.title {font-family: "Noto Sans KR", sans-serif; letter-spacing: 0; color: #222;} .sub_visual_area {position: relative; overflow: hidden;} /************** 서브 비쥬얼 */ .sub_visual {height: 800px; overflow: hidden;} .sub_visual .txt {text-align: center; color: #fff; padding-bottom: 7rem;} .sub_visual .txt .sub_tit {font-weight: bold; font-size: 30px;} .sub_visual .txt .tit {font-weight: bold; font-size: 81px; padding-bottom: 30px; line-height: 1;} .sub_visual .txt .wrt {font-size: 22px; } .sub_visual.cp_gr {background: url('../img/sub/visual_1_1.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cp_bs {background: url('../img/sub/visual_1_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cp_vs {background: url('../img/sub/visual_1_3.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cp_hs {background: url('../img/sub/visual_1_4.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cp_nt {background: url('../img/sub/visual_1_5.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.pd {background: url('../img/sub/visual_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.ra_it {background: url('../img/sub/visual_3_1.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.ra_pr {background: url('../img/sub/visual_3_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.ra_sr {background: url('../img/sub/visual_3_3.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.ra_eq {background: url('../img/sub/visual_3_4.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rf_ct {background: url('../img/sub/visual_4_1.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rf_cn {background: url('../img/sub/visual_4_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rf_ns {background: url('../img/sub/visual_4_3.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rf_if {background: url('../img/sub/visual_4_4.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cs_iq {background: url('../img/sub/visual_5_1.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cs_wy {background: url('../img/sub/visual_5_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.cs_diq {background: url('../img/sub/visual_5_3.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rc_rc {background: url('../img/sub/visual_6_1.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rc_ol {background: url('../img/sub/visual_6_2.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rc_fa {background: url('../img/sub/visual_6_4.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.rc_iv {background: url('../img/sub/visual_6_3.png'); background-size: cover; background-position: center; transition: 1s; transform: scale(1.1);} .sub_visual.on.cp_gr {transform: scale(1);} .sub_visual.on.cp_bs {transform: scale(1);} .sub_visual.on.cp_vs {transform: scale(1);} .sub_visual.on.cp_hs {transform: scale(1);} .sub_visual.on.cp_nt {transform: scale(1);} .sub_visual.on.pd {transform: scale(1);} .sub_visual.on.ra_it {transform: scale(1);} .sub_visual.on.ra_pr {transform: scale(1);} .sub_visual.on.ra_sr {transform: scale(1);} .sub_visual.on.ra_eq {transform: scale(1);} .sub_visual.on.rf_ct {transform: scale(1);} .sub_visual.on.rf_cn {transform: scale(1);} .sub_visual.on.rf_ns {transform: scale(1);} .sub_visual.on.rf_if {transform: scale(1);} .sub_visual.on.cs_iq {transform: scale(1);} .sub_visual.on.cs_wy {transform: scale(1);} .sub_visual.on.cs_diq {transform: scale(1);} .sub_visual.on.rc_rc {transform: scale(1);} .sub_visual.on.rc_ol {transform: scale(1);} .sub_visual.on.rc_fa {transform: scale(1);} .sub_visual.on.rc_iv {transform: scale(1);} .pc{display: block} .mo{display: none} @media all and (max-width: 768px){ .pc{display: none} .mo{display: block} .sub_visual {height: 100vh;} .sub_visual .txt {width: 90%; margin: 0 auto} .sub_visual .txt .sub_tit {font-size: 20px;} .sub_visual .txt .tit {font-size: 50px;} .sub_visual .txt .wrt {font-size: 16px;} .sub_visual.cp_gr {background: url('../img/sub/visual_1_1_mo.png'); background-size: cover; background-position: center;} .sub_visual.cp_bs {background: url('../img/sub/visual_1_2_mo.png'); background-size: cover; background-position: center;} .sub_visual.cp_vs {background: url('../img/sub/visual_1_3_mo.png'); background-size: cover; background-position: center; border-bottom: 1px solid #fff;} .sub_visual.cp_hs {background: url('../img/sub/visual_1_4_mo.png'); background-size: cover; background-position: center;} .sub_visual.cp_nt {background: url('../img/sub/visual_1_5_mo.png'); background-size: cover; background-position: center;} .sub_visual.pd {background: url('../img/sub/visual_2.png'); background-size: cover; background-position: center;} .sub_visual.ra_it {background: url('../img/sub/visual_3_1_mo.png'); background-size: cover; background-position: center;} .sub_visual.ra_pr {background: url('../img/sub/visual_3_2_mo.png'); background-size: cover; background-position: center;} .sub_visual.ra_sr {background: url('../img/sub/visual_3_3_mo.png'); background-size: cover; background-position: center;} .sub_visual.ra_eq {background: url('../img/sub/visual_3_4_mo.png'); background-size: cover; background-position: center;} .sub_visual.rf_ct {background: url('../img/sub/visual_4_1_mo.png'); background-size: cover; background-position: center;} .sub_visual.rf_cn {background: url('../img/sub/visual_4_2_mo.png'); background-size: cover; background-position: center;} .sub_visual.rf_ns {background: url('../img/sub/visual_4_3_mo.png'); background-size: cover; background-position: center;} .sub_visual.rf_if {background: url('../img/sub/visual_4_4_mo.png'); background-size: cover; background-position: center;} .sub_visual.cs_iq {background: url('../img/sub/visual_5_1_mo.png'); background-size: cover; background-position: center;} .sub_visual.cs_wy {background: url('../img/sub/visual_5_2_mo.png'); background-size: cover; background-position: center;} .sub_visual.cs_diq {background: url('../img/sub/visual_5_3_mo.png'); background-size: cover; background-position: center;} .sub_visual.rc_rc {background: url('../img/sub/visual_6_1_mo.png'); background-size: cover; background-position: center;} .sub_visual.rc_ol {background: url('../img/sub/visual_6_2_mo.png'); background-size: cover; background-position: center;} .sub_visual.rc_fa {background: url('../img/sub/visual_6_4_mo.png'); background-size: cover; background-position: center;} .sub_visual.rc_iv {background: url('../img/sub/visual_6_3_mo.png'); background-size: cover; background-position: center;} } @media all and (max-width: 450px){ .sub_visual .txt .sub_tit {font-size: 18px;} .sub_visual .txt .tit {font-size: 35px;} .sub_visual .txt .wrt {font-size: 15px;} } /************** 서브 메뉴 */ .sub_menu_area {width: 1700px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); padding: 16px 0;} .sub_menu_area .home_menu {align-items: center; font-size: 17px; color: #808080; gap: 3px; font-weight: 500; padding: 73px 0 35px} .sub_menu_area .sub_menu {border-bottom: 2px solid #DDDDDD;} .sub_menu_area .sub_menu li {flex: 1; text-align: center; position: relative;} .sub_menu_area .sub_menu li::before {content: ''; display: block; position: absolute; width: 0; left: 50%; transform: translateX(-50%); bottom: -2px; height: 2px; background: #8FB73E; transition: 0.5s;} .sub_menu_area .sub_menu li a {display: block; padding: 12px 0; color: #222222; font-size: 16px; transition: 0.5s;} .sub_menu_area .sub_menu li.on::before {width: 100%} .sub_menu_area .sub_menu li.on a {color: #8FB73E; font-weight: 500} .sub_menu_area .sub_menu li:hover::before {width: 100%} .sub_menu_area .sub_menu li:hover a {color: #8FB73E; font-weight: 500} @media all and (max-width: 768px){ .sub_menu_area {width: 100%; border: 1px solid #fff} .sub_menu_area .home_menu {font-size: 11px; padding: 13px 0 10px;} .sub_menu_area .sub_menu {border-bottom: 0; flex-wrap: wrap;} .sub_menu_area .sub_menu li {flex: auto; width: calc(100% / 3); flex-grow: 0;} .sub_menu_area .sub_menu li a {border: 1px solid #DEDEDE; box-sizing: border-box; font-size: 13px; display: grid; height: 100%; place-items: center;} .sub_menu_area .sub_menu li.on::before {bottom: 0;} .sub_menu_area .sub_menu li.on a {border-bottom: 0;} .sub_menu_area .sub_menu.rf_menu li {width: calc(100% / 2);} .sub_menu_area .sub_menu.cs_menu li {width: calc(100% / 2);} .sub_menu_area .sub_menu.rc_menu li {width: calc(100% / 3);} } @media all and (max-width: 450px){ .sub_menu_area .sub_menu li {flex: auto; width: calc(100% / 2);} .sub_menu_area .sub_menu.pd_menu li:nth-child(1) {width: calc(100% / 3)} .sub_menu_area .sub_menu.pd_menu li:nth-child(2) {width: calc(100% / 3)} .sub_menu_area .sub_menu.pd_menu li:nth-child(3) {width: calc(100% / 3)} } /************** 서브 공통 */ .sub_inner {max-width: 1320px; margin: 0 auto;} @media all and (max-width: 768px){ .sub_inner {max-width: 92%;} } /************** 회사소개-인사말 */ #greetings {background: url('../img/sub/cp_sub1/bg.png') no-repeat; background-position: bottom; background-size: contain; padding: 120px 0 280px;} #greetings .s1 {justify-content: space-between; align-items: flex-end; margin-bottom: 160px;} #greetings .s1 .img_wrap {} #greetings .s1 .txt_wrap {padding: 0 5px 0 75px;} #greetings .s1 .txt_wrap .tit {font-size: 38px; font-weight: bold; padding-bottom: 50px; color: #222;} #greetings .s1 .txt_wrap .tit2 {font-size: 26px; font-weight: bold; padding-bottom: 50px; color: #222;} #greetings .s1 .txt_wrap .wrt {font-size: 16px; line-height: 40px; color: #555;} #greetings .s2 {} #greetings .s2 .title {padding-bottom: 140px; position: relative;} #greetings .s2 .title::before {content: ''; display: block; position: absolute; width: 1px; height: 96px; background: #707070; left: 50%; transform: translateX(-50%); bottom: 30px;} #greetings .s2 .img_wrap {gap: 45px; align-items: flex-start;} #greetings .s2 .img_wrap li {padding: 30px; flex: 1; color: #fff; box-sizing: border-box;} #greetings .s2 .img_wrap li .num {font-size: 45px} #greetings .s2 .img_wrap li .tit {font-size: 36px; text-align: center;} #greetings .s2 .img_wrap li:nth-child(1) {background: url('../img/sub/cp_sub1/s2_img1.png'); background-size: cover; background-position: center;} #greetings .s2 .img_wrap li:nth-child(2) {background: url('../img/sub/cp_sub1/s2_img2.png'); background-size: cover; background-position: center;} #greetings .s2 .img_wrap li:nth-child(3) {background: url('../img/sub/cp_sub1/s2_img3.png'); background-size: cover; background-position: center;} #greetings .s2 .img_wrap li:nth-child(1) .tit {padding-top: 235px;} #greetings .s2 .img_wrap li:nth-child(2) .tit {padding-top: 350px;} #greetings .s2 .img_wrap li:nth-child(3) .tit {padding-top: 235px;} #greetings .s2 .txt_wrap {text-align: center; color: #555555; font-size: 16px; padding-top: 110px; line-height: 38px} #greetings .s2 .txt_wrap > div {font-size: 36px; padding-top: 105px;} @media all and (max-width: 768px){ #greetings {background: url('../img/sub/cp_sub1/bg_mo.png') no-repeat; background-size: contain; background-position: bottom; padding: 30px 0 170px;} #greetings .s1 {flex-direction: column;} #greetings .s1 .img_wrap img {width: 100%} #greetings .s1 .txt_wrap {padding: 86px 0 0;} #greetings .s2 .img_wrap {gap: 0;} #greetings .s2 .img_wrap li {flex: auto; width: calc((100% - 24px) / 3); margin-right: 10px; padding: 10px 10px 20px;} #greetings .s2 .img_wrap li:last-child {margin-right: 0;} #greetings .s2 .img_wrap li .num {font-size: 25px;} #greetings .s2 .img_wrap li .tit {font-size: 24px;} #greetings .s2 .txt_wrap {font-size: 20px;} } @media all and (max-width: 450px){ #greetings .s1 {margin-bottom: 80px;} #greetings .s1 .txt_wrap {padding: 46px 0 0;} #greetings .s1 .txt_wrap .tit {font-size: 15px; padding-bottom: 30px;} #greetings .s1 .txt_wrap .wrt {line-height: 25px} #greetings .s2 .title {padding-bottom: 90px;} #greetings .s2 .title::before {height: 46px;} #greetings .s2 .img_wrap {flex-direction: column;} #greetings .s2 .img_wrap li {width: 100%; margin-right: 0; margin-bottom: 10px} #greetings .s2 .txt_wrap {font-size: 16px; padding-top: 70px; line-height: 25px;} } /************** 회사소개-사업분야 */ #businees {background: url('../img/sub/cp_sub2/bg.png') no-repeat; background-position: bottom; background-size: contain; padding: 200px 0 210px;} #businees .s1 {justify-content: space-between; align-items: center; margin-bottom: 90px;} #businees .s1 .txt_wrap {} #businees .s1 .txt_wrap .tit {font-size: 48px; font-weight: bold; color: #222222; padding-bottom: 22px; line-height: 64px;} #businees .s1 .txt_wrap .wrt {font-size: 22px; color: #AAAAAA; padding-bottom: 90px; line-height: 30px;} #businees .s1 .txt_wrap .count {gap: 57px;} #businees .s1 .txt_wrap .count_lst:nth-child(1) {min-width: 120px;} #businees .s1 .txt_wrap .count_lst:nth-child(2) {min-width: 112px;} #businees .s1 .txt_wrap .count_lst:nth-child(3) {min-width: 194px;} #businees .s1 .txt_wrap .count_lst:nth-child(4) {min-width: 120px;} #businees .s1 .txt_wrap .count_lst .num {font-size: 54px; font-weight: 700; color: #8FB73E;} #businees .s1 .txt_wrap .count_lst .txt {font-size: 20px; padding-top: 10px;} #businees .s1 .ani_img {width: 36%; position: relative;} #businees .s1 .ani_img .bg_img {width: 100%} #businees .s1 .ani_img .main_crc {width: 58%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} #businees .s1 .ani_img .main_crc img {width: 100%; transform: scale(0); transition: 2s;} #businees .s1 .ani_img .crc {width: 136px; text-align: center; height: 136px; display: flex; flex-direction: column; justify-content: center; border-radius: 100%; border: 1px solid #C8CF2B; position: absolute; background: #fff; box-sizing: border-box;} #businees .s1 .ani_img .crc span {display: block; min-height: 67px} #businees .s1 .ani_img .crc img {width: 50%; display: none;} #businees .s1 .ani_img .crc p {font-size: 12px} #businees .s1 .ani_img .crc1 {top: -21%; left: 50%; transform: translateX(-50%);} #businees .s1 .ani_img .crc2 {top: 7%; right: -14%;} #businees .s1 .ani_img .crc3 {bottom: 7%; right: -14%;} #businees .s1 .ani_img .crc4 {bottom: -21%; left: 50%; transform: translateX(-50%);} #businees .s1 .ani_img .crc5 {bottom: 7%; left: -14%;} #businees .s1 .ani_img .crc6 {top: 7%; left: -14%;} #businees .s1 .ani_img.animatedIn .main_crc img {transform: scale(1);} #businees .s2 {} #businees .s2 .s2_swiper {overflow: hidden; padding-top: 20px; position: relative; padding-bottom: 20px} #businees .s2 .s2_swiper .on_area {position: absolute;; width: 40%; right: 0; bottom: 0; z-index: 1; background: #8FB73E} #businees .s2 .s2_swiper .on_area .now {background: #293138; padding: 20px; color: #fff; gap: 20px; align-items: center; width: 78%} #businees .s2 .s2_swiper .on_area .now .num {font-size: 18px} #businees .s2 .s2_swiper .on_area .now .sbj {font-weight: bold; font-size: 24px} #businees .s2 .s2_swiper .swiper-button-next {bottom: 16px; right: 23px; top: auto; color: #fff;} #businees .s2 .s2_swiper .swiper-button-prev {bottom: 16px; top: auto; right: 105px; left: auto; color: #fff;} #businees .s2 .s2_swiper .swiper-button-next::after {font-size: 25px;} #businees .s2 .s2_swiper .swiper-button-prev::after {font-size: 25px;} #businees .s2 .txt_wrap {text-align: center; color: #555555; font-size: 23px; padding-top: 35px; line-height: 38px} #businees .s3 {} #businees .s3 .content {justify-content: space-between; padding-top: 60px;} #businees .s3 .txt_wrap {flex-direction: column;} #businees .s3 .txt_wrap .tit {font-size: 36px; font-weight: 700; line-height: 46px; padding: 30px 0 45px} #businees .s3 .txt_wrap .wrt {font-size: 18px; line-height: 32px; padding-bottom: 65px;} #businees .s3 .txt_wrap .txt {font-size: 20px; font-weight: bold; margin-left: auto;} #businees .s3 .img_wrap {} @media all and (max-width: 450px){ #businees {padding: 60px 0 140px; background: url('../img/sub/cp_sub2/bg_mo.png') no-repeat; background-position: bottom; background-size: contain;} #businees .s1 {flex-direction: column-reverse; gap: 70px;} #businees .s1 .txt_wrap {padding-top: 30px; width: 100%;} #businees .s1 .txt_wrap .tit {font-size: 23px; text-align: center; line-height: 35px;} #businees .s1 .txt_wrap .wrt {text-align: center; font-size: 15px; line-height: 20px; padding-bottom: 40px} #businees .s1 .txt_wrap .count {gap: 10px; flex-direction: column;} #businees .s1 .txt_wrap .count_lst:nth-child(1) {min-width: 80%; margin: 0 auto} #businees .s1 .txt_wrap .count_lst:nth-child(2) {min-width: 80%; margin: 0 auto} #businees .s1 .txt_wrap .count_lst:nth-child(3) {min-width: 80%; margin: 0 auto} #businees .s1 .txt_wrap .count_lst:nth-child(4) {min-width: 80%; margin: 0 auto} #businees .s1 .txt_wrap .count_lst .num {font-size: 34px; display: inline-block; min-width: 38%;} #businees .s1 .txt_wrap .count_lst .txt {font-size: 15px; display: inline-block; padding-left: 10px;} #businees .s1 .ani_img {width: 73%;} #businees .s1 .ani_img .crc {width: 85px; height: 85px; padding: 0.5rem;} #businees .s1 .ani_img .crc span {min-height: 35px;} #businees .s1 .ani_img .crc p {font-size: 10px; line-height: 1.2;} #businees .s2 .s2_swiper img {width: 100%} #businees .s2 .s2_swiper .on_area {width: 80%;} #businees .s2 .s2_swiper .on_area .now {width: 70%; padding: 12px;} #businees .s2 .s2_swiper .on_area .now .num {font-size: 12px} #businees .s2 .s2_swiper .on_area .now .sbj {font-size: 15px; font-weight: 500;} #businees .s2 .s2_swiper .swiper-button-next {bottom: 0; right: 12px;} #businees .s2 .s2_swiper .swiper-button-next:after {font-size: 17px;} #businees .s2 .s2_swiper .swiper-button-prev {bottom: 0; right: 80px;} #businees .s2 .s2_swiper .swiper-button-prev:after {font-size: 17px;} #businees .s3 .content {flex-direction: column-reverse;} #businees .s3 .img_wrap img {width: 100%} #businees .s3 .txt_wrap .tit {text-align: center; font-size: 23px; line-height: 35px; padding: 30px 0;} #businees .s3 .txt_wrap .wrt {font-size: 12px; text-align: center; line-height: 23px;} #businees .s3 .txt_wrap .txt {font-size: 14px; margin-left: 0; text-align: center;} } /************** 회사소개-비전 */ #vision {background: url('../img/sub/cp_sub3/bg.png') no-repeat; background-position: bottom; background-size: contain; padding: 90px 0 530px;} #vision .s1 {padding-bottom: 60px;} #vision .s1 .tit_box {padding: 42px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.06); text-align: center; border-radius: 32px;} #vision .s1 .tit_box .tit {color: #8FB73E; font-size: 16px; padding-bottom: 10px; font-weight: bold; display: block} #vision .s1 .tit_box .wrt {font-size: 22px; line-height: 34px;} #vision .s1 .list {justify-content: space-between; flex-wrap: wrap; max-width: 934px; margin: 0 auto; padding-top: 100px;} #vision .s1 .list li {position: relative; width: calc((100% - 86px) / 3); margin-bottom: 60px;} #vision .s1 .list li img {margin-left: -12px} #vision .s1 .list li .act_hv {position: absolute; top: 0; left: 0; opacity: 0; transition: 0.8s;} #vision .s1 .list li:hover .act_hv {opacity: 1;} #vision .s2 {} #vision .s2 .img_wrap {margin-top: 60px; position: relative;} #vision .s2 .img_wrap img.abs_img {position: absolute; bottom: 0; right: 237px; top: auto;} #vision .s3 {margin-top: -80px;} #vision .s3 .step {justify-content: space-between; align-items: center;} #vision .s3 .step .img_wrap {} #vision .s3 .step .txt_wrap {color: #222222; padding-right: 63px; margin-top: 100px} #vision .s3 .step .txt_wrap .hd_tit {font-size: 20px; font-weight: bold; color: #8FB73E;} #vision .s3 .step .txt_wrap .tit {font-size: 40px; font-weight: bold; padding: 20px 0 30px} #vision .s3 .step .txt_wrap .wrt {font-size: 18px; line-height: 30px;} #vision .s3 .step2 .txt_wrap {margin-top: 0;} @media all and (max-width: 450px){ #vision {padding: 20px 0 300px; background: url('../img/sub/cp_sub3/bg_mo.png') no-repeat; background-position: bottom; background-size: contain;} #vision .s1 .tit_box {padding: 22px 0;} #vision .s1 .tit_box .tit {font-size: 12px} #vision .s1 .tit_box .wrt {font-size: 15px; line-height: 23px; padding: 0 15px;} #vision .s1 .list {padding-top: 50px;} #vision .s1 .list li {width: calc(100% / 2); margin-bottom: 0px;} #vision .s1 .list li img {width: 100%; margin: 0} #vision .s2 .img_wrap {margin-top: 40px;} #vision .s2 .img_wrap img {width: 100%} #vision .s2 .img_wrap img.abs_img {right: 0;} #vision .s3 .step {flex-direction: column; padding-top: 50px;} #vision .s3 .step:nth-child(2) {flex-direction: column-reverse;} #vision .s3 {margin-top: 20px} #vision .s3 .step .img_wrap img {width: 100%} #vision .s3 .step .txt_wrap {margin-top: 40px; padding: 43px;} #vision .s3 .step .txt_wrap .hd_tit {font-size: 16px;} #vision .s3 .step .txt_wrap .tit {font-size: 23px; padding: 0 0 20px;} #vision .s3 .step .txt_wrap .wrt {font-size: 12px; line-height: 21px;} } /************** 회사소개-연혁 */ #history {padding: 105px 0 150px} #history .s1 {padding-bottom: 130px;} #history .s1 .tit_box {padding: 42px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.06); text-align: center;} #history .s1 .tit_box .tit {color: #8FB73E; font-size: 16px; padding-bottom: 10px; font-weight: bold; display: block} #history .s1 .tit_box .wrt {font-size: 22px; line-height: 34px;} #history .s1 .content {position: relative; margin-top: 130px; display: flex; justify-content: space-between; align-items: flex-start; min-height: 800px} #history .s1 .box {padding: 60px 43px 40px; border-radius: 32px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); position: sticky; top: 120px; max-width: 564px; box-sizing: border-box;} #history .s1 .box .hd_tit {font-size: 15px; font-weight: bold; color: #8FB73E;} #history .s1 .box .tit {font-size: 32px; font-weight: bold; padding-bottom: 23px;} #history .s1 .box .wrt {font-size: 16px;} #history .s1 .box .year_select {margin-top: 58px; justify-content: space-between;} #history .s1 .box .year_select li {} #history .s1 .box .year_select li span {display: block; background: #F9F9F9; border-radius: 22px; font-size: 16px; font-weight: 600; padding: 12px 33px; cursor: pointer;} #history .s1 .box .year_select li.on span {color: #fff; font-weight: bold; background: #8FB73E;} #history .s1 .list_gnb {width: 630px; margin-top: 45px; position: relative;} #history .s1 .list_gnb::before {content: ''; display: block; position: absolute; background: #ccc; height: 99%; width: 1px; left: 4px; top: 14px;} #history .s1 .list_gnb > li {padding-bottom: 150px} #history .s1 .list_gnb > li:last-child {border-bottom: 0;} #history .s1 .list_gnb .lst {align-items: center; padding-right: 50px;} #history .s1 .list_gnb .lst i {width: 10px; height: 10px; background: #8FB73E; display: inline-block; border-radius: 100%; margin-right: 12px} #history .s1 .list_gnb .lst span {font-size: 26px; font-weight: bold; color: #8FB73E} #history .s1 .list_gnb .lst img {margin-left: auto; transition: 0.3s;} #history .s1 .list_gnb .lst img.on {transform: rotate(180deg);} #history .s1 .list_lnb {} #history .s1 .list_lnb li {align-items: baseline; padding-top: 55px;} #history .s1 .list_lnb li i {width: 10px; height: 10px; background: #ECECEE; display: inline-block; border-radius: 100%; margin-right: 12px} #history .s1 .list_lnb li span {font-size: 18px; font-weight: bold; padding-right: 34px;} #history .s1 .list_lnb li p {font-size: 15px; line-height: 34px; color: #444;} @media all and (max-width: 450px){ #history {padding: 20px 0 0;} #history .s1 .content {margin-top: 0;} #history .s1 .tit_box {padding: 22px 0;} #history .s1 .tit_box .tit {font-size: 12px;} #history .s1 .tit_box .wrt {font-size: 15px; line-height: 23px; padding: 0 15px;} #history .s1 .box {position: relative; padding: 15px;} #history .s1 .box .hd_tit {font-size: 12px;} #history .s1 .box .tit {font-size: 20px; padding-bottom: 15px;} #history .s1 .box .wrt {font-size: 12px;} #history .s1 .box .year_select {margin-top: 30px;} #history .s1 .box .year_select li {width: calc((100% - 10px) / 3);} #history .s1 .box .year_select li span {padding: 6px 15px; font-size: 12px;} #history .s1 .list_gnb {position: relative; width: 100%} #history .s1 .list_gnb::before {display: none} #history .s1 .list_gnb > li {padding: 15px 0; position: relative;} #history .s1 .list_gnb > li.temp::before {content: ''; display: block; position: absolute; height: 99%; width: 1px; background: rgb(171 171 171 / 20%); left: 2px; top: 25px} #history .s1 .list_gnb .lst {padding-right: 0} #history .s1 .list_gnb .lst i {width: 6px; height: 6px;} #history .s1 .list_gnb .lst span {font-size: 20px;} #history .s1 .list_lnb li {padding-top: 20px;} #history .s1 .list_lnb li i {width: 6px; height: 6px;} #history .s1 .list_lnb li span {font-size: 14px; padding-right: 15px;} #history .s1 .list_lnb li p {font-size: 12px;} #history .s1 .list_gnb > li.list_box {padding: 50px 40px; border-radius: 32px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); max-width: 564px; box-sizing: border-box; margin: 15px 0;} #history .s1 .list_gnb > li.list_box .hd_tit {font-size: 13px; font-weight: bold; color: #8FB73E;} #history .s1 .list_gnb > li.list_box .tit {font-size: 22px; font-weight: bold; padding-bottom: 23px;} #history .s1 .list_gnb > li.list_box .wrt {font-size: 14px;} } /************** 회사소개-네트워크 */ #network {padding: 100px 0 90px;} #network .s1 {justify-content: space-between; align-items: flex-end;} #network .s1 .sub_title {place-items: baseline;} #network .s1 .sub_title .tit {color: #222222; padding: 15px 0 28px;} #network .s1 .sub_title .wrt {font-size: 22px; color: #AAAAAA;} #network .s1 .txt {text-align: left; padding-right: 70px; max-width: 450px;} #network .s1 .txt .tit {font-size: 24px; font-weight: bold; color: #8FB73E; padding-bottom: 8px; } #network .s1 .txt .wrt {font-size: 16px; color: #1F1F1F;} #network .s2 {text-align: center; padding-top: 80px; max-width: 1000px;} #network .s2 .map_area {position: relative;} #network .s2 .pointer {width: 20px; position: absolute; transition: 0.5s;} #network .s2 .pointer img {filter: contrast(0.1);} #network .s2 .pointer.filter_on {margin-top: -10px} #network .s2 .pointer.filter_on:not(.point_gen) img {filter: invert(74%) sepia(38%) saturate(3299%) hue-rotate(333deg) brightness(103%) contrast(101%);} /*************** KR ver*/ #network .s2 .pointer.point1 {right: 11%; top: 37%;} #network .s2 .pointer.point2 {right: 21%; top: 20%;} #network .s2 .pointer.point3 {right: 20.5%; top: 27%;} #network .s2 .pointer.point4 {right: 21.3%; top: 33%;} #network .s2 .pointer.point5 {right: 19%; top: 50%;} #network .s2 .pointer.point6 {right: 19%; top: 64%;} #network .s2 .pointer.point7 {right: 23%; top: 48%;} #network .s2 .pointer.point8 {right: 21%; top: 50%;} #network .s2 .pointer.point9 {right: 20.5%; top: 58.6%;} #network .s2 .pointer.point10 {right: 28%; top: 46%;} #network .s2 .pointer.point11 {right: 28%; top: 54%;} #network .s2 .pointer.point12 {right: 32%; top: 42%;} #network .s2 .pointer.point13 {right: 31%; top: 32%;} #network .s2 .pointer.point14 {right: 36%; top: 45%;} #network .s2 .pointer.point15 {right: 38%; top: 41%;} #network .s2 .pointer.point16 {right: 39%; top: 45%;} #network .s2 .pointer.point17 {right: 38%; top: 48%;} #network .s2 .pointer.point18 {right: 40%; top: 40%;} #network .s2 .pointer.point19 {right: 44.5%; top: 45%;} #network .s2 .pointer.point20 {right: 41.5%; top: 36%;} #network .s2 .pointer.point21 {right: 46%; top: 24%;} #network .s2 .pointer.point22 {right: 46%; top: 28%;} #network .s2 .pointer.point23 {right: 45%; top: 30%;} #network .s2 .pointer.point24 {right: 50%; top: 27%;} #network .s2 .pointer.point25 {right: 54%; top: 35%;} #network .s2 .pointer.point26 {right: 82%; top: 31%;} #network .s2 .pointer.point27 {right: 83%; top: 44%;} #network .s2 .pointer.point28 {right: 78%; top: 51%;} #network .s2 .pointer.point29 {right: 67%; top: 67%;} #network .s2 .pointer.point30 {right: 74%; top: 55%;} #network .s2 .pointer.point31 {right: 73%; top: 75%;} #network .s2 .pointer.point32 {right: 70%; top: 82%;} #network .s2 .pointer.point33 {right: 48%; top: 33%;} #network .s2 .pointer.point34 {right: 15.5%; top: 44.7%;} #network .s2 .pointer.point35 {right: 18%; top: 58%;} #network .s2 .pointer.point_gen {width: 50px; top: 36%; right: 12.5%; display: flex; flex-direction: column; gap: 3px; align-items: center;} #network .s2 .pointer.point_gen img:not(.map_logo) {filter: invert(18%) sepia(58%) saturate(1761%) hue-rotate(134deg) brightness(97%) contrast(101%); width: 30px} #network .s2 .pointer.point_gen img.map_logo {filter: none;} #network .s2 .pointer::after {content: 'COUNTRY'; position: absolute; display: block; font-size: 10px; width: 66px; left: 50%; transform: translateX(-50%); top: -18px; opacity: 0; transition: 0.3s;} #network .s2 .pointer.filter_on::after {opacity: 1;} #network .s2 .pointer.point1::after {content: '일본';} #network .s2 .pointer.point2::after {content: '러시아';} #network .s2 .pointer.point3::after {content: '몽골';} #network .s2 .pointer.point4::after {content: '중국';} #network .s2 .pointer.point5::after {content: '베트남';} #network .s2 .pointer.point6::after {content: '인도네시아';} #network .s2 .pointer.point7::after {content: '미얀마';} #network .s2 .pointer.point8::after {content: '태국';} #network .s2 .pointer.point9::after {content: '싱가포르';} #network .s2 .pointer.point10::after {content: '인도';} #network .s2 .pointer.point11::after {content: '스리랑카';} #network .s2 .pointer.point12::after {content: '파키스탄';} #network .s2 .pointer.point13::after {content: '카자흐스탄';} #network .s2 .pointer.point14::after {content: '아랍에미리트';} #network .s2 .pointer.point15::after {content: '쿠웨이트';} #network .s2 .pointer.point16::after {content: '사우디아라비아';} #network .s2 .pointer.point17::after {content: '예멘';} #network .s2 .pointer.point18::after {content: '팔레스타인';} #network .s2 .pointer.point19::after {content: '이집트';} #network .s2 .pointer.point20::after {content: '튀르키예';} #network .s2 .pointer.point21::after {content: '슬로바키아';} #network .s2 .pointer.point22::after {content: '오스트리아';} #network .s2 .pointer.point23::after {content: '헝가리';} #network .s2 .pointer.point24::after {content: '독일';} #network .s2 .pointer.point25::after {content: '스페인';} #network .s2 .pointer.point26::after {content: '미국';} #network .s2 .pointer.point27::after {content: '멕시코';} #network .s2 .pointer.point28::after {content: '파나마';} #network .s2 .pointer.point29::after {content: '브라질';} #network .s2 .pointer.point30::after {content: '콜롬비아';} #network .s2 .pointer.point31::after {content: '칠레';} #network .s2 .pointer.point32::after {content: '아르헨티나';} #network .s2 .pointer.point33::after {content: '이탈리아';} #network .s2 .pointer.point34::after {content: '대만';} #network .s2 .pointer.point35::after {content: '말레이시아';} #network .s2 .point_gen::after {content: 'Seoul, Korea'; color: #004e35; width: 100px; opacity: 1; font-weight: 500; font-size: 12px;} /*************** EN ver*/ #network .s2 .pointer.point41 {right: 11%; top: 37%;} #network .s2 .pointer.point42 {right: 21%; top: 20%;} #network .s2 .pointer.point43 {right: 20.5%; top: 27%;} #network .s2 .pointer.point44 {right: 21.3%; top: 33%;} #network .s2 .pointer.point45 {right: 19%; top: 50%;} #network .s2 .pointer.point46 {right: 19%; top: 64%;} #network .s2 .pointer.point47 {right: 23%; top: 48%;} #network .s2 .pointer.point48 {right: 21%; top: 50%;} #network .s2 .pointer.point49 {right: 20.5%; top: 58.6%;} #network .s2 .pointer.point50 {right: 28%; top: 46%;} #network .s2 .pointer.point51 {right: 28%; top: 54%;} #network .s2 .pointer.point52 {right: 32%; top: 42%;} #network .s2 .pointer.point53 {right: 31%; top: 32%;} #network .s2 .pointer.point54 {right: 36%; top: 45%;} #network .s2 .pointer.point55 {right: 38%; top: 41%;} #network .s2 .pointer.point56 {right: 39%; top: 45%;} #network .s2 .pointer.point57{right: 38%; top: 48%;} #network .s2 .pointer.point58 {right: 40%; top: 40%;} #network .s2 .pointer.point59 {right: 44.5%; top: 45%;} #network .s2 .pointer.point60 {right: 41.5%; top: 36%;} #network .s2 .pointer.point61{right: 46%; top: 24%;} #network .s2 .pointer.point62 {right: 46%; top: 28%;} #network .s2 .pointer.point63 {right: 45%; top: 30%;} #network .s2 .pointer.point64 {right: 50%; top: 27%;} #network .s2 .pointer.point65 {right: 54%; top: 35%;} #network .s2 .pointer.point66 {right: 82%; top: 31%;} #network .s2 .pointer.point67 {right: 83%; top: 44%;} #network .s2 .pointer.point68 {right: 78%; top: 51%;} #network .s2 .pointer.point69 {right: 67%; top: 67%;} #network .s2 .pointer.point70 {right: 74%; top: 55%;} #network .s2 .pointer.point71 {right: 73%; top: 75%;} #network .s2 .pointer.point72 {right: 70%; top: 82%;} #network .s2 .pointer.point73 {right: 48%; top: 33%;} #network .s2 .pointer.point74 {right: 15.5%; top: 44.7%;} #network .s2 .pointer.point75 {right: 18%; top: 58%;} #network .s2 .pointer.point41::after {content: 'Japan';} #network .s2 .pointer.point42::after {content: 'Russia';} #network .s2 .pointer.point43::after {content: 'Mongolia';} #network .s2 .pointer.point44::after {content: 'China';} #network .s2 .pointer.point45::after {content: 'Vietnam';} #network .s2 .pointer.point46::after {content: 'Indonesia';} #network .s2 .pointer.point47::after {content: 'Myanmar';} #network .s2 .pointer.point48::after {content: 'Thailand';} #network .s2 .pointer.point49::after {content: 'Singapore';} #network .s2 .pointer.point50::after {content: 'India';} #network .s2 .pointer.point51::after {content: 'Sri Lanka';} #network .s2 .pointer.point52::after {content: 'Pakistan';} #network .s2 .pointer.point53::after {content: 'Sri Lanka';} #network .s2 .pointer.point54::after {content: 'United Arab Emirates';} #network .s2 .pointer.point55::after {content: 'Kuwait';} #network .s2 .pointer.point56::after {content: 'Saudi Arabia';} #network .s2 .pointer.point57::after {content: 'Yemen';} #network .s2 .pointer.point58::after {content: 'Palestine';} #network .s2 .pointer.point59::after {content: 'Egypt';} #network .s2 .pointer.point60::after {content: 'Türkiye';} #network .s2 .pointer.point61::after {content: 'Slovakia';} #network .s2 .pointer.point62::after {content: 'Austria';} #network .s2 .pointer.point63::after {content: 'Hungary';} #network .s2 .pointer.point64::after {content: 'Germany';} #network .s2 .pointer.point65::after {content: 'Spain';} #network .s2 .pointer.point66::after {content: 'the USA';} #network .s2 .pointer.point67::after {content: 'Mexico';} #network .s2 .pointer.point68::after {content: 'Panama';} #network .s2 .pointer.point69::after {content: 'Brazil';} #network .s2 .pointer.point70::after {content: 'Colombia';} #network .s2 .pointer.point71::after {content: 'Chile';} #network .s2 .pointer.point72::after {content: 'the Argentine Republic';} #network .s2 .pointer.point73::after {content: 'Italy';} #network .s2 .pointer.point74::after {content: 'Taiwan';} #network .s2 .pointer.point75::after {content: 'Malaysia';} @media all and (max-width: 450px){ #network {padding: 20px 0 90px;} #network .s1 .sub_title .tit {text-align: left; padding: 10px 0 14px; font-weight: bold; font-size: 25px;} #network .s1 .sub_title .wrt {padding: 0; font-size: 12px;} #network .s2 {padding-top: 30px;} #network .s2 img {width: 100%;} #network .s2 .pointer {width: 10px} #network .s2 .pointer.point_gen {width: 30px; top: 31%; right: 11.5%;} #network .s2 .pointer.point_gen img:not(.map_logo) {width: 20px} #network .s3 {padding-top: 20px} #network .s3 .txt {text-align: left;} #network .s3 .txt .tit {font-weight: bold; color: #8FB73E; font-size: 18px;} #network .s3 .txt .wrt {font-size: 12px; width: 90%; margin-left: auto;} } /**********************************************************************************/ .mo_bot_menu_area {border-top: 6px solid #F5F5F5; padding: 30px 0px;} .mo_bot_menu_area > div {justify-content: space-between;} .mo_bot_menu {font-size: 16px; font-weight: bold; color: #B3B3B3} .mo_bot_menu.on {color: #000000;} .mo_bot_menu a {display: flex; align-items: center; gap: 5px;} .mo_bot_menu img {width: 9px;} /************** 연구분석서비스-소개 */ #intro {padding: 150px 0; background: url('../img/sub/ra_sub1/bg.png') no-repeat; background-size: contain; background-position: bottom} #intro .s1 {} #intro .cont_inner {max-width: 1154px; margin: 0 auto} #intro .title {font-size: 48px; font-weight: bold; padding-bottom: 90px} #intro .content {position: relative;} #intro .content .txt {font-size: 16px; position: absolute; max-width: 580px; top: 0; left: 0; line-height: 30px} #intro .content .int_list {flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between;} #intro .content .int_list li {width: calc(50% - 49px);} #intro .content .int_list .img_area {} #intro .content .int_list .txt_area {padding-top: 30px;} #intro .content .int_list .txt_area .hd_tit {color: #213B34; font-size: 19px; font-weight: bold;} #intro .content .int_list .txt_area .tit {font-size: 48px; font-weight: bold; padding: 65px 0 33px; position: relative;} #intro .content .int_list .txt_area .tit::before {content: ''; display: block; position: absolute; width: 1px; height: 40px; left: 0; top: 5px; background: #000} #intro .content .int_list .txt_area .btn a {font-size: 16px; padding: 22px 53px; border: 1px solid #707070; font-weight: 300; display: inline-block;} #intro .content .int_list li:nth-child(2) {margin-top: 500px;} #intro .content .int_list li:nth-child(3) {margin-top: -410px} #intro .content .int_list li:nth-child(4) {margin-top: 105px;} #intro .content .int_list li:nth-child(5) {margin-top: -340px;} #intro .content .int_list li:nth-child(6) {margin-top: 105px;} #intro .content .int_list li:nth-child(7) {margin-top: -300px;} #intro .content .button_area {gap: 18px; justify-content: center; margin-top: 185px;} #intro .content .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px;} #intro .content .button_area button a {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff;} /* #intro .content .button_area button:last-child {color: #fff; background: #8FB73E; font-size: 20px} */ @media all and (max-width: 450px){ #intro {padding: 50px 0; background: none;} #intro .title {font-size: 23px; line-height: 35px; padding-bottom: 40px;} #intro .content .txt {position: relative; font-size: 14px; line-height: 22px;} #intro .content .int_list {margin-top: 40px} #intro .content .int_list li {width: 100%;} #intro .content .int_list .img_area img {width: 100%;} #intro .content .int_list .txt_area {text-align: center;} #intro .content .int_list .txt_area .hd_tit {font-size: 15px;} #intro .content .int_list .txt_area .tit {font-size: 35px; padding: 35px 0 20px;} #intro .content .int_list .txt_area .tit::before {left: 50%; height: 20px; top: 10px;} #intro .content .int_list .txt_area .btn a {font-size: 14px; padding: 15px 35px;} #intro .content .int_list li:nth-child(2) {margin-top: 40px} #intro .content .int_list li:nth-child(3) {margin-top: 40px} #intro .content .int_list li:nth-child(4) {margin-top: 40px} #intro .content .int_list li:nth-child(5) {margin-top: 40px} #intro .content .int_list li:nth-child(6) {margin-top: 40px} #intro .content .int_list li:nth-child(7) {margin-top: 40px} #intro .content .button_area {flex-wrap: wrap; margin-top: 80px; gap: 6px;} #intro .content .button_area button {width: 48%; min-width: auto;} #intro .content .button_area button:last-child {width: 100%} #intro .content .button_area button a {font-size: 14px; padding: 20px 0;} } /************** 연구분석서비스-연구분석서비스 신청/조회 */ #procedure {padding: 150px 0;} #procedure .txt {padding-bottom: 120px} #procedure .txt .tit {font-size: 48px; font-weight: bold; padding-bottom: 35px; line-height: 64px;} #procedure .txt .wrt {font-size: 16px; line-height: 30px;} #procedure .content {} #procedure .img_area {text-align: center; margin-top: 40px;} #procedure .content .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #procedure .content .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px;} #procedure .content .button_area button a {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff} /* #procedure .content .button_area button:nth-child(2) {color: #fff; background: #8FB73E; font-size: 20px} */ @media all and (max-width: 450px){ #procedure {padding: 50px 0;} #procedure .txt {padding-bottom: 70px;} #procedure .txt .tit {font-size: 23px; line-height: 35px; padding-bottom: 40px;} #procedure .txt .wrt {font-size: 14px; line-height: 22px;} #procedure .img_area img {width: 100%;} #procedure .content .button_area {flex-wrap: wrap; margin-top: 80px; gap: 6px;} #procedure .content .button_area button {width: 48%; min-width: auto;} #procedure .content .button_area button:last-child {width: 100%} #procedure .content .button_area button a {font-size: 14px; padding: 20px 0;} } /************** 연구분석서비스-연구분석서비스 신청/조회 정보입력*/ #procedure2 {padding: 90px 0 150px} #procedure2 .s1 {} #procedure2 .s1 .tit {font-size: 32px; padding-bottom: 10px; justify-content: space-between; font-weight: bold; align-items: flex-end;} #procedure2 .s1 .tit span {font-size: 12px; color: #666666; display: flex; align-items: flex-start; font-weight: 400} #procedure2 .s1 .tit span i {color: #D14148} #procedure2 .agree_area {} #procedure2 .agree_area .ag_box {margin-top: 10px; background: #F5F5F5; border: 1px solid #DDDDDD; padding: 42px; box-sizing: border-box;} #procedure2 .agree_area .ag_txt {max-height: 295px; overflow-y: scroll; font-size: 18px; color: #444444; line-height: 31px} #procedure2 .agree_area .ag_txt span {font-weight: 600;} #procedure2 .agree_area .ag_check {align-items: center; justify-content: flex-end; padding: 18px 14px 0 0; gap: 37px} #procedure2 .agree_area .ag_check span {font-size: 18px; font-weight: 600;} #procedure2 .agree_area .ag_check span i {color: #8FB73E;} #procedure2 .agree_area .ag_check input {margin-right: 9px;} #procedure2 .agree_area .ag_check label {font-weight: 400;} #procedure2 .info_area {margin-top: 90px;} #procedure2 .info_area .if_box {border-top: 1px solid #111111; border-bottom: 1px solid #111111; padding-bottom: 35px} #procedure2 .info_area .if_lst {padding: 22px 250px 22px 12px; border-bottom: 1px solid #DDDDDD} #procedure2 .info_area .if_lst:last-child {border-bottom: 0;} #procedure2 .info_area .if_tit {font-size: 18px; font-weight: 600; min-width: 280px; display: flex; align-items: center;} #procedure2 .info_area .if_tit i {color: #D14148} #procedure2 .info_area .if_wrt_area {width: 100%;} #procedure2 .info_area .if_wrt_area input {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #procedure2 .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #procedure2 .info_area .if_wrt_area > div {align-items: center; gap: 7px;} #procedure2 .info_area .if_wrt_area > p {color: #6E757C; font-size: 13px; padding-top: 6px} #procedure2 .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #procedure2 .info_area .if_wrt_area textarea {background: #F5F5F5; padding: 24px; height: 260px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #procedure2 .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #procedure2 .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px;} #procedure2 .button_area button a {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff} #procedure2 .button_area button span.aa {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff} @media all and (max-width: 450px){ #procedure2 {padding: 50px 0 80px;} #procedure2 .s1 .tit {font-size: 18px; flex-direction: column; align-items: flex-start;} #procedure2 .agree_area .ag_box {padding: 15px;} #procedure2 .agree_area .ag_txt {max-height: 180px; font-size: 14px; line-height: 22px; padding-right: 15px;} #procedure2 .agree_area .ag_check {gap: 10px; padding: 10px 5px 0;} #procedure2 .agree_area .ag_check span {font-size: 12px;} #procedure2 .info_area .if_lst {flex-direction: column; padding: 17px 0;} #procedure2 .info_area .if_tit {font-size: 15px; padding-bottom: 6px; min-width: auto;} #procedure2 .info_area .if_wrt_area > div {gap: 4px;} #procedure2 .info_area .if_wrt_area input {height: 35px; font-size: 12px; padding: 0 5px;} #procedure2 .info_area .if_wrt_area input::placeholder {font-size: 12px;} #procedure2 .info_area .if_wrt_area > p {font-size: 11px; padding-top: 2px;} #procedure2 .button_area {flex-wrap: wrap; margin-top: 80px; gap: 6px;} #procedure2 .button_area button {width: 48%; min-width: auto;} #procedure2 .button_area button:last-child {width: 100%} #procedure2 .button_area button a {font-size: 14px; padding: 20px 0;} #procedure2 .button_area button span.aa {font-size: 14px; padding: 20px 0;} } /************** 연구분석서비스-연구분석서비스 조회 정보 확인*/ #procedure3 {padding: 60px 0 150px} #procedure3 .tit {font-size: 32px; padding-bottom: 10px; justify-content: space-between; font-weight: bold; align-items: flex-end;} #procedure3 .info_area {margin-top: 90px;} #procedure3 .info_area .if_box {border-bottom: 1px solid #111111; padding-bottom: 15px} #procedure3 .info_area .if_lst {padding: 22px 250px 22px 12px; border-bottom: 1px solid #DDDDDD} #procedure3 .info_area .if_lst:last-child {border-bottom: 0;} #procedure3 .info_area .if_tit {font-size: 18px; font-weight: 600; min-width: 280px; display: flex; align-items: center;} #procedure3 .info_area .if_tit i {color: #D14148} #procedure3 .info_area .if_wrt_area {width: 100%;} #procedure3 .info_area .if_wrt_area input {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #procedure3 .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #procedure3 .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #procedure3 .info_area .if_wrt_area textarea {background: #F5F5F5; padding: 24px; height: 260px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #procedure3 .info_area .if_wrt_area > div {align-items: center; gap: 7px;} #procedure3 .info_area .if_wrt_area > p {color: #6E757C; font-size: 13px; padding-top: 6px} #procedure3 .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #procedure3 .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px;} #procedure3 .button_area button a {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff} #procedure3 .button_area button span.aa {font-size: 18px; font-weight: bold; padding: 33px 0; display: block; text-align: center; border: 1px solid #fff} @media all and (max-width: 450px){ #procedure3 {padding: 30px 0 40px} #procedure3 .info_area {margin-top: 0} #procedure3 .s1 .tit {font-size: 18px; flex-direction: column; align-items: flex-start;} #procedure3 .info_area .if_lst {flex-direction: column; padding: 17px 0;} #procedure3 .info_area .if_tit {font-size: 15px; padding-bottom: 6px; min-width: auto;} #procedure3 .info_area .if_wrt_area > div {gap: 4px;} #procedure3 .info_area .if_wrt_area input {height: 35px; font-size: 12px; padding: 0 5px;} #procedure3 .info_area .if_wrt_area input::placeholder {font-size: 12px;} #procedure3 .info_area .if_wrt_area > p {font-size: 11px; padding-top: 2px;} #procedure3 .button_area {gap: 6px;} #procedure3 .button_area button {width: 48%; min-width: auto;} #procedure3 .button_area button a {font-size: 14px; padding: 20px 0;} #procedure3 .button_area button span.aa {font-size: 14px; padding: 20px 0;} } /************** 연구분석서비스-연구분석서비스 조회 정보 확인*/ #procedure4 {padding: 60px 0 150px} #procedure4 .tit {font-size: 32px; font-weight: bold; padding-bottom: 30px;} #procedure4 .pd4_table {} #procedure4 .pd4_thead {background: #FAFAFA;} #procedure4 .pd4_thead .th {font-size: 15px; font-weight: 500; padding: 18px 0; text-align: center; color: #666666;} #procedure4 .pd4_thead .th1 {width: 15%} #procedure4 .pd4_thead .th2 {width: 35%} #procedure4 .pd4_thead .th3 {width: 25%} #procedure4 .pd4_thead .th4 {width: 20%} #procedure4 .pd4_thead .th5 {width: 5%} #procedure4 .pd4_tbody {} #procedure4 .pd4_tbody .lst {} #procedure4 .pd4_tbody .lst_head {padding: 37px 0; border-bottom: 1px solid #E4E4E4; align-items: center;} #procedure4 .pd4_tbody .lst_head .tb {text-align: center; font-size: 18px; font-weight: 500} #procedure4 .pd4_tbody .lst_head .tb1 {width: 15%;} #procedure4 .pd4_tbody .lst_head .tb2 {width: 35%; text-align: center;} #procedure4 .pd4_tbody .lst_head .tb3 {width: 25%;} #procedure4 .pd4_tbody .lst_head .tb4 {width: 20%} #procedure4 .pd4_tbody .lst_head .tb4 span {color: #AAAAAA; border: 1px solid #AAAAAA; border-radius: 23px; display: inline-block; padding: 9px 0; line-height: 1.3; min-width: 93px;} #procedure4 .pd4_tbody .lst_head .tb4 span.on {color: #8FB73E; border: 1px solid #8FB73E;} #procedure4 .pd4_tbody .lst_head .tb5 {width: 5%; cursor: pointer; transition: 0.4s;} #procedure4 .pd4_tbody .lst_head .tb5.active {transform: rotate(180deg);} #procedure4 .pd4_tbody .cont {background: #F9F9F9; padding: 36px 66px; font-size: 16px; color: #666666; border-bottom: 1px solid #E4E4E4; display: none;} @media all and (max-width: 450px){ #procedure4 {padding: 30px 0 50px;} #procedure4 .pd4_tbody .lst {border-bottom: 1px solid; margin-bottom: 30px; padding-bottom: 30px;} #procedure4 .pd4_tbody .lst_mo {display: flex; flex-direction: column; gap: 6px;} #procedure4 .pd4_tbody .lst_mo .tb {font-size: 13px; color: #111111} #procedure4 .pd4_tbody .lst_mo .tb span {min-width: 90px; display: inline-block;} #procedure4 .pd4_tbody .lst_mo .tb1 {font-weight: 500; align-items: center; gap: 47px; cursor: pointer;} #procedure4 .pd4_tbody .lst_mo .tb1 span {color: #AAAAAA; border: 1px solid #AAAAAA; padding: 1px 3px; min-width: auto; } #procedure4 .pd4_tbody .lst_mo .tb1 span.on{color: #8FB73E; border: 1px solid #8FB73E;} #procedure4 .pd4_tbody .lst_mo .tb1 img {margin-left: auto; width: 10px; transition: 0.4s;} #procedure4 .pd4_tbody .lst_mo .tb1.active img {transform: rotate(180deg);} #procedure4 .pd4_tbody .lst_mo .tb2 {background: #F9F9F9; padding: 20px; } } /************** 연구분석서비스-연구분석서비스 조회 정보 확인*/ #procedure5 {padding: 60px 0 150px} #procedure5 .tit {font-size: 32px; font-weight: bold; padding-bottom: 30px;} #procedure5 .pd5_table {} #procedure5 .pd5_thead {background: #FAFAFA;} #procedure5 .pd5_thead .th {font-size: 15px; font-weight: 500; padding: 18px 0; text-align: center; color: #666666;} #procedure5 .pd5_thead .th1 {width: 24%} #procedure5 .pd5_thead .th2 {width: 24%} #procedure5 .pd5_thead .th3 {width: 24%} #procedure5 .pd5_thead .th4 {width: 24%} #procedure5 .pd5_thead .th5 {width: 4%} #procedure5 .pd5_tbody {} #procedure5 .pd5_tbody .lst {} #procedure5 .pd5_tbody .lst_head {padding: 37px 0; border-bottom: 1px solid #E4E4E4; align-items: center;} #procedure5 .pd5_tbody .lst_head .tb {text-align: center; font-size: 18px; font-weight: 500} #procedure5 .pd5_tbody .lst_head .tb1 {width: 24%;} #procedure5 .pd5_tbody .lst_head .tb2 {width: 24%; text-align: center;} #procedure5 .pd5_tbody .lst_head .tb3 {width: 24%; } #procedure5 .pd5_tbody .lst_head .tb4 {width: 24%} #procedure5 .pd5_tbody .lst_head .tb5 {width: 4%; cursor: pointer; transition: 0.4s;} #procedure5 .pd5_tbody .lst_head .tb5.active {transform: rotate(180deg);} #procedure5 .pd5_tbody .cont {background: #F9F9F9; padding: 36px 66px; font-size: 16px; color: #666666; border-bottom: 1px solid #E4E4E4; display: none;} @media all and (max-width: 450px){ #procedure5 {padding: 30px 0 50px;} #procedure5 .pd5_tbody .lst {border-bottom: 1px solid; margin-bottom: 30px; padding-bottom: 30px;} #procedure5 .pd5_tbody .lst_mo {display: flex; flex-direction: column; gap: 6px;} #procedure5 .pd5_tbody .lst_mo .tb {font-size: 13px; color: #111111} #procedure5 .pd5_tbody .lst_mo .tb span {min-width: 90px; display: inline-block;} #procedure5 .pd5_tbody .lst_mo .tb1 {font-weight: 500; align-items: center; gap: 47px; cursor: pointer;} #procedure5 .pd5_tbody .lst_mo .tb1 span {color: #AAAAAA; border: 1px solid #AAAAAA; padding: 1px 3px; min-width: auto; } #procedure5 .pd5_tbody .lst_mo .tb1 span.on {color: #8FB73E; border: 1px solid #8FB73E;} #procedure5 .pd5_tbody .lst_mo .tb1 img {margin-left: auto; width: 10px; transition: 0.4s;} #procedure5 .pd5_tbody .lst_mo .tb1.active img {transform: rotate(180deg);} #procedure5 .pd5_tbody .lst_mo .tb2 {background: #F9F9F9; padding: 20px; } } /************** 카테고리 */ #zenos_cate {gap: 8px; justify-content: center; margin-bottom: 75px;} #zenos_cate li {background:#FBFBFB; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500;} #zenos_cate li:nth-child(0){ background:#FBFBFB; border-radius: 32px; font-size: 5px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500;} #zenos_cate li.on {color: #fff; background: #8FB73E;} #zenos_cate li:hover {color: #fff; background: #8FB73E;} #zenos_cate li a {display: block;} #zenos_cate1 {gap: 8px; justify-content: center; margin-bottom: 75px;} #zenos_cate1 li {background:#FBFBFB; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500;line-height: 20px;} #zenos_cate1 li:first-child {background:#FBFBFB; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500;line-height: 100px;} #zenos_cate1 li.on {color: #fff; background: #8FB73E;} #zenos_cate1 li:hover {color: #fff; background: #8FB73E;} #zenos_cate1 li a {display: block;} #zenos_cate2 {gap: 8px; justify-content: center; margin-bottom: 25px;} #zenos_cate2 li {background:#fff; border: 1px solid #EDECEF; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500;} #zenos_cate2 li.on {color: #fff; background: #8FB73E;} #zenos_cate2 li:hover {color: #fff; background: #8FB73E;} #zenos_cate2 li a {display: block;} #interview .cate1 {justify-content: center; gap: 20px; margin-bottom: 40px;} #interview .cate1 .cate_lst1 {border-radius: 42px; overflow: hidden; width: 100px;} #interview .cate1 .cate_lst1 a {color: #222222; display: block; padding: 11px 0; text-align: center; font-weight: 500; font-size: 13px;} #interview .cate1 .cate_lst1.on a {color: #000;font-weight:bold} #interview .cate1 .cate_lst1:hover a { color: #000;font-weight:bold} #zenos_cate3 {gap: 8px; justify-content: center; flex-wrap: wrap; flex-wrap: wrap; width: 80%; margin: 0 auto 75px;} #zenos_cate3 li {background:#FBFBFB; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500; width: calc((100% - 32px) / 5)} #zenos_cate3 li.on {color: #fff; background: #8FB73E;} #zenos_cate3 li:hover {color: #fff; background: #8FB73E;} #zenos_cate3 li a {display: block;} #zenos_cate4 {gap: 8px; justify-content: center; flex-wrap: wrap; flex-wrap: wrap; width: 80%; margin: 0 auto 75px;} #zenos_cate4 li {background:#FBFBFB; border-radius: 32px; font-size: 13px; color: #1F1F1F; padding: 11px 0; min-width: 175px; text-align: center; font-weight: 500; width: calc((100% - 24px) / 4)} #zenos_cate4 li.on {color: #fff; background: #8FB73E;} #zenos_cate4 li:hover {color: #fff; background: #8FB73E;} #zenos_cate4 li a {display: block;} @media all and (max-width: 450px){ #zenos_cate {gap: 5px; justify-content: flex-start; margin-bottom: 40px; white-space: nowrap; overflow-x: auto;} #zenos_cate::-webkit-scrollbar{display: none;} #zenos_cate li {font-size: 12px; min-width: 130px; padding: 10px 0;} #zenos_cate1 {gap: 5px; justify-content: flex-start; margin-bottom: 40px; white-space: nowrap; overflow-x: auto;} #zenos_cate1::-webkit-scrollbar{display: none;} #zenos_cate1 li {font-size: 12px; min-width: 130px; padding: 10px 0;} #zenos_cate2 {gap: 5px; justify-content: flex-start; margin-bottom: 40px; white-space: nowrap; overflow-x: auto;} #zenos_cate2::-webkit-scrollbar{display: none;} #zenos_cate2 li {font-size: 12px; min-width: 130px; padding: 10px 0;} #zenos_cate3 {gap: 5px; justify-content: flex-start; margin-bottom: 40px; white-space: nowrap; overflow-x: auto; flex-wrap: inherit; width: auto;} #zenos_cate3::-webkit-scrollbar{display: none;} #zenos_cate3 li {font-size: 12px; min-width: 130px; padding: 10px 0; width: auto;} #zenos_cate4 {gap: 5px; justify-content: flex-start; margin-bottom: 40px; white-space: nowrap; overflow-x: auto; flex-wrap: inherit; width: auto;} #zenos_cate4::-webkit-scrollbar{display: none;} #zenos_cate4 li {font-size: 12px; min-width: 130px; padding: 10px 0; width: auto;} } .wrt_btn {margin-top:10px;width: 150px;font-size: 15px;color:#fff;height: 50px;background: #8FB73E} /************** 연구분석서비스-연구분석서비스 분야 */ #service {padding: 20px 0 170px;} #service .cont_area {display: none;} #service .cont_area.on {display: block;} #service .cont_area .cont_box {justify-content: space-between; gap: 100px} #service .cont_area .cont_box .tit {padding-top: 12px; border-top: 1px solid #000; font-size: 20px; width: 270px; letter-spacing: -0.8px;} #service .cont_area .cont_box .img { width: 1000px} #service .cont_area .cont_box .img img.bt52 {margin-bottom: 52px} #service .cont_area .title {font-size: 32px; font-weight: bold; padding-bottom: 22px;} #service .cont_area .cont_box.bt10 {margin-bottom: 60px} #service .cont_area .cont_box.bt20 {margin-bottom: 60px} #service .cont_area .cont_box.bt60 {margin-bottom: 60px} #service .cont_area .cont_box.bt130 {margin-bottom: 130px} #service table {border-collapse: collapse; font-size: 19px; border-top: 1px solid;} #service table thead tr {} #service table tbody tr {} #service table thead th {background: #F7F7F7; padding: 20px 0; font-weight: bold; border-bottom: 1px solid #D9D9D9;} #service table thead th:first-child {border-right: 1px solid #D9D9D9} #service table tbody td {text-align: center; color: #777777; font-weight: 300; border-bottom: 1px solid #D9D9D9;} #service table tbody td.sbj {border-right: 1px solid #D9D9D9} #service .cont1 table tbody td {padding: 18px 0;} #service .cont2 table tbody td {padding: 18px 0;} #service .cont3 table tbody td {padding: 18px 0;} #service .check {margin-top: 100px} @media all and (max-width: 768px){ #service .cont_area .cont_box {flex-direction: column; gap: 20px} #service .cont_area .cont_box .img img.bt52 {margin-bottom: 45px} #service .cont_area .cont_box .img { width: 100%} #service .check {margin-top: 20px} } @media all and (max-width: 450px){ #service {padding: 20px 0;} #service .cont_area .cont_box {gap: 15px} #service .cont_area .cont_box .tit {font-size: 14px; width: 190px; padding-top: 8px;} #service .cont_area .cont_box .img img.bt52 {margin-bottom: 15px} #service .cont_area .cont_box .img { width: 100%} #service .cont_area .cont_box.bt10 {margin-bottom: 5px} #service .cont_area .cont_box.bt20 {margin-bottom: 10px} #service .cont_area .cont_box.bt60 {margin-bottom: 30px} #service .cont_area .cont_box.bt130 {margin-bottom: 80px} #service table {font-size: 13px; padding-top: 6px;} } /************** 연구분석서비스-보유장비 */ #equip {padding: 20px 0 150px;} #equip .lst_area {} #equip .lst_area .tit {font-size: 31px; font-weight: bold; padding-bottom: 28px; } #equip .lst_area .lst {flex-wrap: wrap; } #equip .lst_area .lst .lst_item {width: calc((100% - 94px) / 3); margin-bottom: 74px; margin-right: 47px;} #equip .lst_area .lst .lst_item:nth-child(3n) {margin-right: 0} #equip .lst_area .lst .lst_item .img_area {border: 1px solid #EDECEF; border-radius: 41px; position: relative; overflow: hidden; cursor: pointer; transition: 0.4s;} /* #equip .lst_area .lst .lst_item .img_area .link_btn {font-size: 18px; position: absolute; color: #fff; background: #8FB73E; border-radius: 32px; padding: 18px 0; text-align: center; width: 80%; min-width: 380px; bottom: 15px; left: 50%; transform: translateX(-50%); opacity: 0;} */ #equip .lst_area .lst .lst_item .img_area .btn_eft2 {font-size: 18px; color: #fff; border-radius: 32px; padding: 18px 0; text-align: center; width: 80%; min-width: 380px; left: 50%; transform: translateX(-50%); bottom: 15px; position: absolute; opacity: 0} #equip .lst_area .lst .lst_item .img_area:hover .btn_eft2 {opacity: 1} #equip .lst_area .lst .lst_item .img_area:hover {box-shadow: 0 0 30px rgba(0,0,0,0.1);} #equip .lst_area .lst .lst_item .txt_area {padding-top: 23px; text-align: center;} #equip .lst_area .lst .lst_item .txt_area .sub_sbj {font-size: 16px; display: block; padding-bottom: 10px; color: #213B34; font-weight: 500;} #equip .lst_area .lst .lst_item .txt_area .sbj {font-size: 28px; font-weight: bold; line-height: 28px} #equip .lst_area .lst .lst_item .lst_pop {position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; z-index: 99999;} #equip .lst_area .lst .lst_item .lst_pop.active {display: block;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_bg {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.6)} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 40px; flex-direction: column; align-items: center; box-sizing: border-box; justify-content: center; width: 80%; padding: 80px 170px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .cancel {position: absolute; top: 50px; right: 50px; cursor: pointer;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .img_box {max-width: 409px;margin-top: -50px} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area {text-align: center;margin-top: -50px} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .sub_sbj {font-size: 25px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .sbj {font-size: 44px; padding-bottom: 22px; line-height: 44px} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .wrt {font-size: 15px;margin-top: 20px} @media all and (max-width: 768px){ #equip .lst_area .lst {justify-content: space-between;} #equip .lst_area .lst .lst_item {width: calc((100% - 30px) / 2); margin-right: 0} } @media all and (max-width: 450px){ #equip {padding: 20px 0 50px;} #equip .lst_area .tit {font-size: 18px; padding-bottom: 10px;} #equip .lst_area .lst .lst_item {width: calc((100% - 8px) / 2); margin-bottom: 30px;} #equip .lst_area .lst .lst_item .img_area {border-radius: 21px;} #equip .lst_area .lst .lst_item .img_area:hover {box-shadow: 0 0 10px rgb(0 0 0 / 10%);} #equip .lst_area .lst .lst_item .img_area img {width: 100%;} #equip .lst_area .lst .lst_item .img_area .link_btn {font-size: 12px; padding: 7px; width: 70%; min-width: 0;} #equip .lst_area .lst .lst_item .txt_area {padding-top: 12px;} #equip .lst_area .lst .lst_item .txt_area .sub_sbj {font-size: 12px; padding-bottom: 5px;} #equip .lst_area .lst .lst_item .txt_area .sbj {font-size: 14px; line-height: 16px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box {width: 90%; padding: 5%; border-radius: 20px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .cancel {width: 20px; display: inline-block; top: 10px; right: 10px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .cancel img {width: 100%} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .img_box {max-width: 80%;margin-top: -20px} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area {text-align: center;margin-top: -20px} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .sub_sbj {font-size: 14px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .sbj {font-size: 18px; line-height: 20px; padding-bottom: 15px;} #equip .lst_area .lst .lst_item .lst_pop .lst_pop_box .txt_area .wrt {font-size: 12px;} } /************** 자료실-카달로그 */ #catalog {padding: 20px 0 200px;} #catalog .cata_lst {flex-wrap: wrap; border-bottom: 1px solid #151516; gap: 96px; padding-bottom: 80px;} #catalog .cata_lst .lst_item {width: calc((100% - 196px) / 3); } #catalog .cata_lst .lst_item .img_area {max-height: 530px; overflow: hidden;} #catalog .cata_lst .lst_item .txt_area {padding-top: 26px;} #catalog .cata_lst .lst_item .txt_area .tit {font-size: 25px; font-weight: 500; padding-bottom: 17px;} #catalog .cata_lst .lst_item .txt_area .tit .subt {display: block; font-size: 0.9rem; color: #aaa; font-weight: 400;} #catalog .cata_lst .lst_item .txt_area .down_btn_wrap {display: flex; justify-content: flex-end;} #catalog .cata_lst .lst_item .txt_area .down_btn {} #catalog .cata_lst .lst_item .txt_area .down_btn a {margin-left: auto; display: inline-block; padding: 18px 27px 18px 23px; border: 1px solid #707070; align-items: center;} #catalog .cata_lst .lst_item .txt_area .down_btn a img {margin-left: 32px;} #catalog .cata_lst .empty_list {width: 100%; text-align: center; padding-bottom: 20px;} @media all and (max-width: 450px){ #catalog {padding: 20px 0 50px;} #catalog .cata_lst {gap: 0; justify-content: space-between; padding-bottom: 40px;} #catalog .cata_lst .lst_item {width: calc((100% - 8px) / 2); margin-bottom: 40px;} #catalog .cata_lst .lst_item .img_area img {width: 100%} #catalog .cata_lst .lst_item .txt_area {padding-top: 12px;} #catalog .cata_lst .lst_item .txt_area .tit {font-size: 14px; font-weight: bold;} #catalog .cata_lst .lst_item .txt_area .tit .subt {font-size: 0.6rem;} #catalog .cata_lst .lst_item .txt_area .down_btn a {padding: 8px 12px 8px 8px; font-size: 12px;} #catalog .cata_lst .lst_item .txt_area .down_btn a img {margin-left: 12px;} } /************** 자료실-임상케이스 */ #clinical {padding: 24px 0 145px;} #clinical .lst_area {padding-top: 67px;} #clinical .lst_head {align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 37px;} #clinical .lst_head .total {font-size: 14px; font-weight: bold; margin-right: auto;} #clinical .lst_head .opt {border-radius: 27px; padding: 16px 19px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); height: 53px; box-sizing: border-box; border: 0; min-width: 155px; position: relative; background: url('../img/sub/ico_select.png') no-repeat; background-size: 10px 5px; background-position: right 20px center; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #clinical .lst_head .opt option {font-size: 14px; font-weight: 500;} #clinical .lst_head .search_box {padding: 9px 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); border-radius: 27px; height: 53px; box-sizing: border-box;} #clinical .lst_head .search_box input {border: 0; box-shadow: none;} #clinical .lst_head .search_box img {} #clinical .lst_table {} #clinical .lst_table th {color: #666666; padding: 18px 0; background: #FAFAFA; font-size: 15px; font-weight: 500; } #clinical .lst_table td {padding: 27px 0; border-bottom: 1px solid #EFEFEF; font-size: 18px; font-weight: 400; color: #202020;} #clinical .lst_table td:not(.sbj) {text-align: center;} #clinical .lst_table .cate {color: #8FB73E; border: 1px solid #8FB73E; border-radius: 23px; display: inline-block; padding: 9px 20px; line-height: 1.3;} #clinical .lst_table tbody tr:last-child td {border-bottom: 1px solid #000} #clinical .lst_table td.pc_view {display: revert;} #clinical .lst_table th.pc_view {display: revert;} @media all and (max-width: 450px){ #clinical {padding: 20px 0 55px;} #clinical .lst_area {padding-top: 10px} #clinical .lst_head {justify-content: space-between; margin-bottom: 20px;} #clinical .lst_head .opt {min-width: 90px; padding: 12px 14px; height: 40px;} #clinical .lst_head .search_box {height: 40px; display: flex; align-items: center; padding: 9px 12px; width: 100%; justify-content: space-between;} #clinical .lst_table th {padding: 8px 0; font-size: 12px;} #clinical .lst_table td {padding: 15px 2px; font-size: 12px;} #clinical .lst_table .cate {padding: 2px 5px; font-size: 11px;} #clinical .lst_table td.pc_view {display: none;} #clinical .lst_table th.pc_view {display: none;} } /************** 페이징 */ #paging {align-items: center; justify-content: center; position: relative; margin-top: 76px;} #paging .page_box {background: #F6F7FB; padding: 22px 43px 22px 27px; position: absolute; top: 50%; transform: translateY(-50%); left: 0;} #paging .page_box .tit {font-size: 18px; font-weight: 500; padding-right: 43px;} #paging .page_box span {font-size: 17px; color: #666666; } #paging .page_num_area {align-items: center; gap: 45px;} #paging .page_num_area .arr_area {gap: 13px;} #paging .page_num_area .arr_area img {cursor: pointer;} #paging .page_num_area .page_num > div {width: 45px; height: 45px; border-radius: 100%; font-size: 18px; cursor: pointer;} #paging .page_num_area .page_num > div a {display: block; width: 100%; height: 100%; display: grid; place-items: center;} #paging .page_num_area .page_num .on {background: #8FB73E; color: #fff;} @media all and (max-width: 450px){ #paging {margin-top: 36px;} #paging .page_box {display: none} #paging .page_num_area {gap: 15px;} #paging .page_num_area .arr_area img {width: 20px; height: 20px;} #paging .page_num_area .page_num {padding: 12px 20px; box-shadow: 0 5px 20px rgb(0 0 0 / 10%); border-radius: 32px;} #paging .page_num_area .page_num > div {width: 20px; height: 20px; font-size: 12px;} } /************** 자료실-뉴스 */ #news {padding: 116px 0 95px;} #news .s1 {padding-bottom: 143px;} #news .news_swiper {overflow: hidden;} #news .news_swiper .swiper-button-prev {width: 47px; height: 47px; background: url('../img/sub/slide_prev.png') no-repeat; background-size: contain; bottom: 0; top: auto; left: 16px;} #news .news_swiper .swiper-button-next {width: 47px; height: 47px; background: url('../img/sub/slide_next.png') no-repeat; background-size: contain; bottom: 0; top: auto; left: 76px;} #news .news_swiper .swiper-button-prev::after {display: none} #news .news_swiper .swiper-button-next::after {display: none} #news .news_slide {gap: 26px;} #news .news_slide .txt_area {} #news .news_slide .txt_area .tit {font-size: 43px; font-weight: bold; } #news .news_slide .txt_area .wrt {font-size: 18px; padding: 37px 0 47px; color: #454545;} #news .news_slide .txt_area .day {color: #909090; font-size: 18px; font-weight: 500;} #news .news_slide .img_area {} #news .s2 {} #news .lst_wrap {flex-wrap: wrap; gap: 43px} #news .lst {margin-bottom: 72px; width: calc((100% - 86px) / 3);} #news .lst > a {} #news .lst .img_area {overflow: hidden;} #news .lst .img_area img {transition: 0.5s} #news .lst .img_area:hover img {transform: scale(1.1);} #news .lst .txt_area {} #news .lst .txt_area .tit {font-size: 20px; font-weight: bold; padding: 31px 0;} #news .lst .txt_area .wrt {font-size: 15px; margin-bottom: 10px; color: #454545; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} #news .lst .txt_area .day {font-size: 15px; color: #909090; font-weight: 500;} @media all and (max-width: 450px){ #news {padding: 30px 0 50px;} #news .lst {width: 100%; margin-bottom: 40px;} #news .lst .img_area img {width: 100%;} #news .lst .txt_area .tit {font-size: 17px; padding: 12px 0 5px;} #news .lst .txt_area .wrt {font-size: 13px} #news .lst .txt_area .day {font-size: 12px;} } /************** 자료실-ifu */ #ifu {padding: 24px 0 145px;} #ifu .lst_area {padding-top: 67px;} #ifu .lst_head {align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 37px;} #ifu .lst_head .total {font-size: 14px; font-weight: bold; margin-right: auto;} #ifu .lst_head .opt {border-radius: 27px; padding: 16px 19px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); height: 53px; box-sizing: border-box; border: 0; min-width: 155px; position: relative; background: url('../img/sub/ico_select.png') no-repeat; background-size: 10px 5px; background-position: right 20px center; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #ifu .lst_head .opt option {font-size: 14px; font-weight: 500;} #ifu .lst_head .search_box {padding: 9px 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); border-radius: 27px; height: 53px; box-sizing: border-box;} #ifu .lst_head .search_box input {border: 0; box-shadow: none;} #ifu .lst_head .search_box img {} #ifu .lst_table {} #ifu .lst_table th {color: #666666; padding: 18px 0; background: #FAFAFA; font-size: 15px; font-weight: 500; } #ifu .lst_table td {padding: 27px 0; border-bottom: 1px solid #EFEFEF; font-size: 18px; font-weight: 400; color: #202020;} #ifu .lst_table td:not(.sbj) {text-align: center;} #ifu .lst_table .cate {color: #8FB73E; border: 1px solid #8FB73E; font-size: 11px;border-radius: 23px; display: inline-block; padding: 9px 20px; line-height: 1.3;} #ifu .lst_table tbody tr:last-child td {border-bottom: 1px solid #000} #ifu .lst_table td.pc_view {display: revert;} #ifu .lst_table th.pc_view {display: revert;} @media all and (max-width: 450px){ #ifu {padding: 20px 0 55px;} #ifu .lst_area {padding-top: 10px} #ifu .lst_head {justify-content: space-between; margin-bottom: 20px;} #ifu .lst_head .opt {min-width: 90px; padding: 12px 14px; height: 40px;} #ifu .lst_head .search_box {height: 40px; display: flex; align-items: center; padding: 9px 12px; width: 100%; justify-content: space-between;} #ifu .lst_table th {padding: 8px 0; font-size: 12px;} #ifu .lst_table td {padding: 15px 2px; font-size: 12px;} #ifu .lst_table .cate {padding: 2px 5px; font-size: 7px;width: 40px;padding-bottom:5px;padding-top: 5px;margin-right: 20px} #ifu .lst_table td.pc_view {display: none;} #ifu .lst_table th.pc_view {display: none;} } /************** 고객센터 - 온라인문의 */ #inquiry {padding: 90px 0 150px} #inquiry .s1 {} #inquiry .s1 .tit {font-size: 32px; padding-bottom: 10px; justify-content: space-between; font-weight: bold; align-items: flex-end;} #inquiry .s1 .tit span {font-size: 12px; color: #666666; display: flex; align-items: flex-start; font-weight: 400} #inquiry .s1 .tit span i {color: #D14148} #inquiry .agree_area {} #inquiry .agree_area .ag_box {margin-top: 10px; background: #F5F5F5; border: 1px solid #DDDDDD; padding: 42px; box-sizing: border-box;} #inquiry .agree_area .ag_txt {max-height: 295px; overflow-y: scroll; font-size: 18px; color: #444444; line-height: 31px} #inquiry .agree_area .ag_txt span {font-weight: 600;} #inquiry .agree_area .ag_check {align-items: center; justify-content: flex-end; padding: 18px 14px 0 0; gap: 37px} #inquiry .agree_area .ag_check span {font-size: 18px; font-weight: 600;} #inquiry .agree_area .ag_check span i {color: #8FB73E;} #inquiry .agree_area .ag_check input {margin-right: 9px;} #inquiry .agree_area .ag_check label {font-weight: 400;} #inquiry .info_area {margin-top: 90px;} #inquiry .info_area .if_box {border-top: 1px solid #111111; border-bottom: 1px solid #111111; padding-bottom: 35px} #inquiry .info_area .if_lst {padding: 22px 250px 22px 12px; border-bottom: 1px solid #DDDDDD} #inquiry .info_area .if_lst:last-child {border-bottom: 0;} #inquiry .info_area .if_tit {font-size: 18px; font-weight: 600; min-width: 280px; display: flex; align-items: center;} #inquiry .info_area .if_tit i {color: #D14148} #inquiry .info_area .if_wrt_area {width: 100%;} #inquiry .info_area .if_wrt_area input {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #inquiry .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #inquiry .info_area .if_wrt_area select {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #inquiry .info_area .if_wrt_area select::placeholder {color: #6E757C; font-size: 18px} #inquiry .info_area .if_wrt_area textarea {background: #F5F5F5; padding: 24px; height: 260px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #inquiry .info_area .if_wrt_area > div {align-items: center; gap: 7px;} #inquiry .info_area .if_wrt_area > p {color: #6E757C; font-size: 13px; padding-top: 6px} #inquiry .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #inquiry .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px; background: #8FB73E; } #inquiry .button_area button a {font-size: 20px; font-weight: bold; padding: 33px 0; display: inline-block; text-align: center; color: #fff;} @media all and (max-width: 450px){ #inquiry {padding: 50px 0 80px;} #inquiry .s1 .tit {font-size: 18px; flex-direction: column; align-items: flex-start;} #inquiry .agree_area .ag_box {padding: 15px;} #inquiry .agree_area .ag_txt {max-height: 180px; font-size: 14px; line-height: 22px; padding-right: 15px;} #inquiry .agree_area .ag_check {gap: 10px; padding: 10px 5px 0;} #inquiry .agree_area .ag_check span {font-size: 12px;} #inquiry .info_area .if_lst {flex-direction: column; padding: 17px 0;} #inquiry .info_area .if_tit {font-size: 15px; padding-bottom: 6px; min-width: auto;} #inquiry .info_area .if_wrt_area > div {gap: 4px;} #inquiry .info_area .if_wrt_area input {height: 35px; font-size: 12px; padding: 0 5px;} #inquiry .info_area .if_wrt_area input::placeholder {font-size: 12px;} #inquiry .info_area .if_wrt_area > p {font-size: 11px; padding-top: 2px;} #inquiry .button_area {flex-wrap: wrap; margin-top: 40px; gap: 6px;} #inquiry .button_area button {width: 48%; min-width: auto;} #inquiry .button_area button a {font-size: 14px; padding: 20px 0;} } /************** 고객센터 - 찾아오시는 길 */ #map {padding: 60px 0 100px} #map .map_area {position: relative;} #map .map_cont {} #map .map_cont .tit {text-align: center; font-size: 46px; font-weight: bold; padding-bottom: 25px;} #map .map_cont .map_info {} #map .map_cont .map_info_inner {max-width: 71%; margin: 0 auto; background: #fff; margin-top: -110px; padding-top: 105px} #map .map_cont .map_info_inner .map_ul {width: 90%; margin: 0 auto; border-top: 2px solid #595959; padding-bottom: 31px} #map .map_cont .map_info_inner .map_ul li {border-bottom: 1px solid #DFDFDF; font-size: 18px; padding: 13px 0;} #map .map_cont .map_info_inner .map_ul li.address {} #map .map_cont .map_info_inner .map_ul li.tel {color: #A5A5A5;} #map .map_cont .map_info_inner .map_ul li.fax {color: #A5A5A5;} #map .map_cont .map_info_inner .map_ul li .info_tit {text-align: center; width: 14%; display: inline-block; margin-right: 15px; color: #000000} #map .map_cont .map_info_inner .map_map {width: 100%; height: 500px} #map .txt_area {padding-top: 55px;} #mapping {width: 100%; height: 450px} #mapping2 {width: 100%; height: 450px} #mapping3 {width: 100%; height: 450px} #mapping4 {width: 100%; height: 450px} #mapping5 {width: 100%; height: 450px} #map .map_arr {justify-content: center; gap: 20px; position: absolute; width: 100%; top: 34%;} #map .swiper-button-next, #map .swiper-button-prev {position: relative; width: 48px; height: 48px; margin: 0; right: auto; left: auto} #map .swiper-button-next::after, #map .swiper-button-prev::after {display: none} #map .swiper-button-next {background: url('../img/sub/map_right_icon.png') no-repeat; background-size: contain;} #map .swiper-button-prev {background: url('../img/sub/map_left_icon.png') no-repeat; background-size: contain;} @media all and (max-width: 768px){ #map .map_cont .tit {font-size: 30px} #map .map_cont .map_info_inner {margin-top: 0px; padding-top: 50px; max-width: 100%;} #map .map_cont .map_info_inner .map_ul {width: 100%; margin: 0 auto; border-top: 2px solid #595959; padding-bottom: 31px} #map .map_cont .map_info_inner .map_ul li {font-size: 12px} #map .map_arr {top: 23.6%;} #map .swiper-button-next, #map .swiper-button-prev {width: 30px; height: 30px} #mapping {width: 100%; height: 350px} #mapping2 {width: 100%; height: 350px} #mapping3 {width: 100%; height: 350px} #mapping4 {width: 100%; height: 350px} #mapping5 {width: 100%; height: 350px} } @media all and (max-width: 450px){ #map {padding: 20px 0 50px} #map .map_cont .tit {font-size: 24px; padding-bottom: 12px} #map .map_cont .map_info_inner .map_ul {width: 100%; margin: 0 auto; border-top: 2px solid #595959; padding-bottom: 31px} #map .map_cont .map_info_inner .map_ul li {font-size: 9px} #map .map_cont .map_info_inner .map_ul li {display: flex; } #map .map_cont .map_info_inner .map_ul li .info_tit {width: 20%} #map .map_arr {top: 20%;} #map .map_cont .map_info_inner .map_map {height: 300px} #map .txt_area {padding-top: 20px} #mapping {width: 100%; height: 280px} #mapping2{width: 100%; height: 280px} #mapping3{width: 100%; height: 280px} #mapping4{width: 100%; height: 280px} #mapping5{width: 100%; height: 280px} } /************** 인재채용-채용공고 */ #recruit {padding: 24px 0 145px;} #recruit .lst_area {padding-top: 67px;} #recruit .lst_head {align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 37px;} #recruit .lst_head .total {font-size: 14px; font-weight: bold; margin-right: auto;} #recruit .lst_head .opt {border-radius: 27px; padding: 16px 19px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); height: 53px; box-sizing: border-box; border: 0; min-width: 155px; position: relative; background: url('../img/sub/ico_select.png') no-repeat; background-size: 10px 5px; background-position: right 20px center; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #recruit .lst_head .opt option {font-size: 14px; font-weight: 500;} #recruit .lst_head .search_box {padding: 9px 20px; box-shadow: 0 3px 10px rgba(0,0,0,0.08); border-radius: 27px; height: 53px; box-sizing: border-box;} #recruit .lst_head .search_box input {border: 0; box-shadow: none;} #recruit .lst_head .search_box img {} #recruit .lst_table {} #recruit .lst_table th {color: #666666; padding: 18px 0; background: #FAFAFA; font-size: 15px; font-weight: 500; } #recruit .lst_table td {padding: 27px 0; border-bottom: 1px solid #EFEFEF; font-size: 18px; font-weight: 400; color: #202020;} #recruit .lst_table td:not(.sbj) {text-align: center;} #recruit .lst_table td.sbj span {display: block; font-size: 14px; color: #666666;} #recruit .lst_table .cate {color: #AAAAAA; border: 1px solid #AAAAAA; border-radius: 23px; display: inline-block; padding: 9px 0; line-height: 1.3; min-width: 93px;} #recruit .lst_table .cate.on {color: #8FB73E; border: 1px solid #8FB73E;} #recruit .lst_table tbody tr:last-child td {border-bottom: 1px solid #000} #recruit .lst_table td.pc_view {display: revert;} #recruit .lst_table th.pc_view {display: revert;} @media all and (max-width: 450px){ #recruit {padding: 20px 0 55px;} #recruit .lst_area {padding-top: 10px} #recruit .lst_head {justify-content: space-between; margin-bottom: 20px;} #recruit .lst_head .opt {min-width: 90px; padding: 12px 14px; height: 40px;} #recruit .lst_head .search_box {height: 40px; display: flex; align-items: center; padding: 9px 12px; width: 100%; justify-content: space-between;} #recruit .lst_table td.sbj span {font-size: 12px} #recruit .lst_table .cate {min-width: 40px;} #recruit .lst_table th {padding: 8px 0; font-size: 12px;} #recruit .lst_table td {padding: 15px 2px; font-size: 12px;} #recruit .lst_table .cate {padding: 2px 5px; font-size: 11px;} #recruit .lst_table td.pc_view {display: none;} #recruit .lst_table th.pc_view {display: none;} } /************** 인재채용 - 온라인 입사지원 */ #online {padding: 90px 0 150px} #online .s1 {} #online .s1 .tit {font-size: 32px; padding-bottom: 10px; justify-content: space-between; font-weight: bold; align-items: flex-end;} #online .s1 .tit span {font-size: 12px; color: #666666; display: flex; align-items: flex-start; font-weight: 400} #online .s1 .tit span i {color: #D14148} #online .agree_area {} #online .agree_area .ag_box {margin-top: 10px; background: #F5F5F5; border: 1px solid #DDDDDD; padding: 42px; box-sizing: border-box;} #online .agree_area .ag_txt {max-height: 295px; overflow-y: scroll; font-size: 18px; color: #444444; line-height: 31px} #online .agree_area .ag_txt span {font-weight: 600;} #online .agree_area .ag_check {align-items: center; justify-content: flex-end; padding: 18px 14px 0 0; gap: 37px} #online .agree_area .ag_check span {font-size: 18px; font-weight: 600;} #online .agree_area .ag_check span i {color: #8FB73E;} #online .agree_area .ag_check input {margin-right: 9px;} #online .agree_area .ag_check label {font-weight: 400;} #online .info_area {margin-top: 90px;} #online .info_area .if_box {border-top: 1px solid #111111; border-bottom: 1px solid #111111; padding-bottom: 35px} #online .info_area .if_lst {padding: 22px 250px 22px 12px; border-bottom: 1px solid #DDDDDD} #online .info_area .if_lst:last-child {border-bottom: 0;} #online .info_area .if_tit {font-size: 18px; font-weight: 600; min-width: 280px; display: flex; align-items: center;} #online .info_area .if_tit i {color: #D14148} #online .info_area .if_wrt_area {width: 100%;} #online .info_area .if_wrt_area input {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #online .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #online .info_area .if_wrt_area textarea {background: #F5F5F5; padding: 24px; height: 260px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #online .info_area .if_wrt_area select {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px !important; width: 100%; box-shadow: none; border: 0; box-sizing: border-box; background: url('../img/sub/ico_select.png') no-repeat; background-size: 10px 5px; background-position: left 140px center; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } #online .info_area .if_wrt_area > div {align-items: center; gap: 7px;} #online .info_area .if_wrt_area > p {color: #6E757C; font-size: 13px; padding-top: 6px} #online .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #online .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px; background: #8FB73E; } #online .button_area button a {font-size: 20px; font-weight: bold; padding: 33px 0; display: inline-block; text-align: center; color: #fff;} @media all and (max-width: 450px){ #online {padding: 50px 0 80px;} #online .s1 .tit {font-size: 18px; flex-direction: column; align-items: flex-start;} #online .agree_area .ag_box {padding: 15px;} #online .agree_area .ag_txt {max-height: 180px; font-size: 14px; line-height: 22px; padding-right: 15px;} #online .agree_area .ag_check {gap: 10px; padding: 10px 5px 0;} #online .agree_area .ag_check span {font-size: 12px;} #online .info_area .if_lst {flex-direction: column; padding: 17px 0;} #online .info_area .if_tit {font-size: 15px; padding-bottom: 6px; min-width: auto;} #online .info_area .if_wrt_area > div {gap: 4px;} #online .info_area .if_wrt_area input {height: 35px; font-size: 12px; padding: 0 5px;} #online .info_area .if_wrt_area input::placeholder {font-size: 12px;} #online .info_area .if_wrt_area > p {font-size: 11px; padding-top: 2px;} #online .button_area {flex-wrap: wrap; margin-top: 80px; gap: 6px;} #online .button_area button {width: 48%; min-width: auto;} #online .button_area button a {font-size: 14px; padding: 20px 0;} } /************** 인재채용 - 사옥소개 */ #facility .s2 {} #facility .s2 .s2_swiper {overflow: hidden; padding-top: 20px; position: relative; padding-bottom: 20px} #facility .s2 .s2_swiper .on_area {position: absolute;; width: 40%; right: 0; bottom: 0; z-index: 1; background: #8FB73E} #facility .s2 .s2_swiper .on_area .now {background: #293138; padding: 20px; color: #fff; gap: 20px; align-items: center; width: 78%} #facility .s2 .s2_swiper .on_area .now .num {font-size: 18px} #facility .s2 .s2_swiper .on_area .now .sbj {font-weight: bold; font-size: 24px} #facility .s2 .s2_swiper .swiper-button-next {bottom: 16px; right: 23px; top: auto; color: #fff;} #facility .s2 .s2_swiper .swiper-button-prev {bottom: 16px; top: auto; right: 105px; left: auto; color: #fff;} #facility .s2 .s2_swiper .swiper-button-next::after {font-size: 25px;} #facility .s2 .s2_swiper .swiper-button-prev::after {font-size: 25px;} #facility .s2 .txt_wrap {text-align: center; color: #555555; font-size: 23px; padding-top: 35px; line-height: 38px} @media all and (max-width: 450px){ #facility .s2 .s2_swiper img {width: 100%} #facility .s2 .s2_swiper .on_area {width: 80%;} #facility .s2 .s2_swiper .on_area .now {width: 70%; padding: 12px;} #facility .s2 .s2_swiper .on_area .now .num {font-size: 12px} #facility .s2 .s2_swiper .on_area .now .sbj {font-size: 15px; font-weight: 500;} #facility .s2 .s2_swiper .swiper-button-next {bottom: 0; right: 12px;} #facility .s2 .s2_swiper .swiper-button-next:after {font-size: 17px;} #facility .s2 .s2_swiper .swiper-button-prev {bottom: 0; right: 80px;} #facility .s2 .s2_swiper .swiper-button-prev:after {font-size: 17px;} } /************** 제품소개 */ #product {padding: 20px 0 200px; color: #222;} #product .cate {justify-content: center; gap: 48px; margin-bottom: 40px;} #product .cate .cate_lst {border-radius: 42px; overflow: hidden; width: 175px;} #product .cate .cate_lst a {color: #222222; display: block; padding: 11px 0; text-align: center; background: #FBFBFB; font-weight: 500; font-size: 13px;} #product .cate .cate_lst.on a {background: #8FB73E; color: #fff} #product .cate .cate_lst:hover a {background: #8FB73E; color: #fff} #product .cate2 {gap: 16px;} #product .cate1 {justify-content: center; gap: 20px; margin-bottom: 40px;} #product .cate1 .cate_lst1 {border-radius: 42px; overflow: hidden; width: 175px;} #product .cate1 .cate_lst1 a {color: #222222; display: block; padding: 11px 0; text-align: center; font-weight: 500; font-size: 13px;} #product .cate1 .cate_lst1.on a {color: #000;font-weight:bold} #product .cate1 .cate_lst1:hover a { color: #000;font-weight:bold} #product .lst_search {width: 74%; margin: 0 auto; padding: 14px 17px; border-radius: 46px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); align-items: center; gap: 10px; margin-top: 13px; margin-bottom: 60px; box-sizing: border-box;} #product .lst_search span {margin-left: 46px;} #product .lst_search input {border: 0; box-shadow: none} #product .lst_search input:focus {outline: none} #product .lst_search button {margin-left: auto; color: #fff; background: #8FB73E; font-weight: bold; font-size: 15px; line-height: 1; padding: 23px 70px; border-radius: 32px;} #product .lst_area {} #product .lst_area .tit {font-size: 31px; font-weight: bold; padding-bottom: 28px; } #product .lst_area .lst {flex-wrap: wrap; } #product .lst_area .lst .lst_item {width: calc((100% - 94px) / 3); margin-bottom: 74px; margin-right: 47px;} #product .lst_area .lst .lst_item:nth-child(3n) {margin-right: 0;} #product .lst_area .lst .lst_item .img_area {border: 1px solid #EDECEF; border-radius: 41px; position: relative; overflow: hidden; cursor: pointer; transition: 0.4s;} #product .lst_area .lst .lst_item .img_area > img {width: 100%} #product .lst_area .lst .lst_item .img_area:hover {box-shadow: 0 0 30px rgba(0,0,0,0.1);} #product .lst_area .lst .lst_item .txt_area {padding-top: 23px; text-align: center;} #product .lst_area .lst .lst_item .txt_area .sub_sbj {font-size: 16px; display: block; padding-bottom: 10px; color: #213B34;} #product .lst_area .lst .lst_item .txt_area .sbj {font-size: 24px; font-weight: bold; line-height: 35px} #product .lst_area .lst .lst_item .img_area .new {font-size: 15px; color: #fff;background: #8FB73E; border-radius: 50px; text-align: center; width: 50px;height: 50px;left: 10px;top: 10px; position: absolute; line-height: 45px} #product .lst_area .lst .lst_item .img_area .btn_eft2 {font-size: 18px; color: #fff; border-radius: 32px; padding: 18px 0; text-align: center; width: 80%; min-width: 380px; left: 50%; transform: translateX(-50%); bottom: 15px; position: absolute; opacity: 0} #product .lst_area .lst .lst_item .img_area:hover .btn_eft2 {opacity: 1} /* #product .lst_area .lst .lst_item .img_area .link_btn {font-size: 18px; color: #fff; background: #8FB73E; border-radius: 32px; padding: 18px 0; text-align: center; width: 80%; min-width: 380px; bottom: 15px; left: 50%; transform: translateX(-50%);} */ @media all and (max-width: 450px){ #product .cate .cate_lst a {color: #222222; display: block; padding: 11px 0; text-align: center; background: #FBFBFB; font-weight: 500; font-size: 12px;} #product .cate {gap: 5px; justify-content: flex-start; margin-bottom: 70px; white-space: nowrap; overflow-x: auto;} #product .cate::-webkit-scrollbar{display: none;} #product .cate .cate_lst {font-size: 12px; min-width: 130px;} #product .lst_search {margin: 0; margin-bottom: 20px; width: 100%; padding: 12px; gap: 5px} #product .lst_search button {padding: 12px 20px; font-size: 10px;} #product .lst_search span {margin-left: 10px} #product {padding: 20px 0 50px;} #product .lst_area .tit {font-size: 18px; padding-bottom: 10px;} #product .lst_area .lst {justify-content: space-between;} #product .lst_area .lst .lst_item {width: calc((100% - 8px) / 2); margin-bottom: 30px; margin-right: 0} #product .lst_area .lst .lst_item .img_area {border-radius: 25px} #product .lst_area .lst .lst_item .img_area img {width: 100%;} #product .lst_area .lst .lst_item .img_area .btn_eft2 {font-size: 12px; padding: 7px; width: 70%; min-width: 0;} #product .lst_area .lst .lst_item .txt_area {padding-top: 12px;} #product .lst_area .lst .lst_item .txt_area .sub_sbj {font-size: 12px; padding-bottom: 5px;} #product .lst_area .lst .lst_item .txt_area .sbj {font-size: 12px; line-height: 16px;} #product .lst_area .lst .lst_item .img_area .new {font-size: 8px; color: #fff;background: #8FB73E; border-radius: 50px; text-align: center; width: 30px;height: 30px;left: 10px;top: 10px; position: absolute; line-height: 27px} } #product .comm {height: 566px; gap: 20px; margin-bottom: 275px} #product .comm_item {min-width: 503px; height: 532px; box-shadow: 0 15px 20px rgba(0,0,0,0.08); overflow: hidden; width: 503px} #product .comm_item span {} #product .comm_item .swiper-pagination-bullet-active {background: #8FB73E} #product .comm_txt {flex-direction: column;} #product .comm_txt .arr {display: inline-block; max-width: 44px;} #product .comm_txt .tit_area {font-weight: bold; padding: 36px 0 10px;} #product .comm_txt .tit_area .sub {font-size: 16px; color: #999999; letter-spacing: -0.16px; } #product .comm_txt .tit_area .tit {font-size: 44px; color: #222222; letter-spacing: -0.44px; line-height: 55px; display: flex} #product .comm_txt .tit_area .tit i {font-size: 22px; line-height: 1.9;} #product .comm_txt .wrt_area {min-width: 650px;} #product .comm_txt .wrt_area span {font-weight: bold; font-size: 18px; letter-spacing: -0.18px; padding-bottom: 5px; color: #222222; display: inline-block;} #product .comm_txt .wrt_area .wrt_box {border-top: 1px solid #151516; border-bottom: 1px solid #151516;} #product .comm_txt .wrt_area .wrt {font-size: 18px; letter-spacing: -0.72px; color: #666666; line-height: 29px; max-width: 650px; box-sizing: border-box; margin: 25px 0;} #product .comm_txt .wrt_area .wrt::-webkit-scrollbar {width: 6px;} #product .comm_txt .wrt_area .wrt::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 1px solid transparent;} #product .comm_txt .wrt_area .wrt::-webkit-scrollbar-track {background-color: #F5F5F5; border-radius: 10px} #product .comm_txt .wrt_area .wrt.over {max-height: 142px; overflow-y: scroll;} #product .comm_txt .wrt_area .wrt.over2 {max-height: 147px; overflow-y: scroll;} #product .comm_txt .wrt_area .wrt.over3 {max-height: 157px; overflow-y: scroll;} #product .comm_txt .wrt_area .wrt.over4 {max-height: 84px; overflow-y: scroll;} #product .comm_txt .wrt_area .wrt .wrt_cont {align-items: flex-start;} #product .comm_txt .wrt_area .wrt .wrt_cont .on {color: #8FB73E; font-weight: bold; min-width: 175px; line-height: 24px;} #product .comm_txt .wrt_area .wrt .wrt_cont_line {height: 0.7px; background: #EEEEEE; margin: 22px 0;} #product .comm_txt .inq_area {justify-content: flex-end; margin-top: auto} #product .comm_txt .inq_area a {background: #8FB73E; color: #fff; padding: 18px 34px; gap: 18px; align-items: center;} #product .comm_txt .inq_area a img {transform: translate(0, 2px);} #product .comm_txt .inq_area a:hover img {transform: translate(10px, -5px); transition: 0.4s;} #product .comm_tit {font-size: 30px; letter-spacing: -0.3px; padding-bottom: 10px; border-bottom: 2px solid #151516; font-weight: bold; margin-bottom: 67px;} #product .cont {box-sizing: border-box;} #product .cont .cont_box {padding-bottom: 25px;} #product .cont .cont_box2 {padding-bottom: 20px;} #product .cont .cont_box3 {padding-bottom: 30px;} #product .cont .cont_box4 {padding-bottom: 100px;} #product .cont .cont_box5 {padding-bottom: 75px;} #product .cont .cont_box6 {padding-bottom: 68px;} #product .cont .cont_title {font-size: 22px; font-weight: bold; letter-spacing: -0.22px; padding-bottom: 20px; line-height: 23px;} #product .cont .cont_title.color {color: #8FB73E} #product .cont .cont_title_sub {font-size: 18px; font-weight: bold; letter-spacing: -0.18px; padding-bottom: 20px; line-height: 33px;} #product .cont .cont_title_sub.color {color: #8FB73E} #product .cont .cont_write {font-size: 18px; line-height: 33px; letter-spacing: -0.18px; gap: 115px; align-items: baseline;} #product .cont .cont_line {height: 2px; background: #E9E9E9; margin: 59px 0 67px;} #product .cont .cont_mini_table {border: 1px solid #5F5E5E; padding: 10px 0; text-align: center;} #product .cont .table_area {} #product .cont .table_area table {font-size: 14px; text-align: center; border-top: 1px solid #151516;} #product .cont .table_area table thead {} #product .cont .table_area table thead tr {} #product .cont .table_area table thead tr th {padding: 20px 0;} #product .cont .table_area table thead tr th.bgclr1 {background: #F7F7F7;} #product .cont .table_area table thead tr th.wid33 {width: calc(100% / 3)} #product .cont .table_area table thead tr th.tbold {font-weight: bold; color: #222222;} #product .cont .table_area table thead tr th.tbold2 {font-weight: bold; color: #0099cb;} #product .cont .table_area table thead tr th.tbrd {border-right: 1px solid #D9D9D9} #product .cont .table_area table thead tr th.tbrd2 {border-right: 1px solid #0099cb} #product .cont .table_area table tbody {} #product .cont .table_area table tbody tr {border-bottom: 1px solid #D9D9D9;} #product .cont .table_area table tbody tr td {padding: 20px 0; color: #777777;} #product .cont .table_area table tbody tr td.bgclr1 {background: #F7F7F7;} #product .cont .table_area table tbody tr td.wid33 {width: calc(100% / 3)} #product .cont .table_area table tbody tr td.tbold {font-weight: bold; color: #222222;} #product .cont .table_area table tbody tr td.tbold2 {font-weight: bold; color: #0099cb;} #product .cont .table_area table tbody tr td.tbrd {border-right: 1px solid #D9D9D9} #product .cont .table_area table tbody tr td.tbrd2 {border-right: 1px solid #0099cb} /* 여기서부터는 이미지 슬라이드 효과 css정리 */ /* Position the image container (needed to position the left and right arrows) */ #product .cont .container { position: relative; } /* Hide the images by default */ #product .cont .mySlides { text-align: center; background-color: #000; } /* Add a pointer when hovering over the thumbnail images */ #product .cont .cursor { cursor: pointer; } /* Next & previous buttons */ #product .cont .prev, #product .cont .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: #ffffff; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */ #product .cont .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ #product .cont .prev:hover, #product .cont .next:hover { color: rgb(255, 255, 255); background-color: #8FB73E; } /* Number text (1/3 etc) */ #product .cont .numbertext { color: rgb(255, 255, 255); font-size: 15px; padding: 8px 12px; position: absolute; top: 0; } /* Container for image text */ #product .cont .caption-container { font-weight: 500; font-size: 18px; text-align: center; background-color: #8FB73E; padding: 3px 16px 3px; color: white; } #product .cont .row:after { content: ""; display: table; clear: both; } /* Six columns side by side */ #product .cont .column { float: left; width: 10%; } /* Add a transparency effect for thumnbail images */ #product .cont .demo { opacity: 0.6; } #product .cont .active, #product .cont .demo:hover { opacity: 1; } /* 스크롤 이벤트 효과 시작*/ #product .cont .scroll-container { position: relative; width: 100%; height: 40vh; overflow: hidden; cursor: grab; display: flex; justify-content: center; align-items: center; } #product .cont #scroll-image { position: absolute; width: 40%; /* 원하는 너비로 조정 */ height: auto; /* 비율 유지 */ top: 50%; left: 50%; transform: translate(-50%, -50%); transition: top 0.1s ease-out; } @media all and (max-width: 1320px){ #product .table_img {overflow: hidden; overflow-x: scroll; padding-bottom: 0.5rem;} #product .table_img img {width: 1320px;} #product .cont .table_area {overflow: hidden; overflow-x: scroll} #product .cont .table_area table {width: 1320px;} #product .cont .table_area::-webkit-scrollbar {width: 2px; height: 6px} #product .cont .table_area::-webkit-scrollbar-thumb {background-color: #aaa; border-radius: 10px; background-clip: padding-box; border: 1px solid transparent;} #product .cont .table_area::-webkit-scrollbar-track {background-color: #fff;} } @media all and (max-width: 768px){ #product .table_img img {width: 1000px;} #product .cont .cont_title_sub {font-size: 10px; font-weight: bold; padding-bottom: 20px; line-height: 22px;} #product .cont .table_area table {font-size: 13px; width: 800px} #product .cont .table_area table thead tr th {padding: 10px 0;} #product .cont .table_area table tbody tr td {padding: 10px 0} #product .cont .scroll-container { width: 100%; } #product .cont #scroll-image { width: 80%; /* 원하는 너비로 조정 */ height: auto; /* 비율 유지 */ top: 50%; left: 50%;} } @media all and (max-width: 450px){ #product {padding: 20px 0 120px;} #product .comm {flex-direction: column; gap: 10px; height: auto; margin-bottom: 30px} #product .comm_item {width: 100%; min-width: auto;height: auto;box-shadow: 0 0px 0;} #product .comm_txt .arr {max-width: 20px} #product .comm_txt .tit_area {padding: 10px 0;} #product .comm_txt .tit_area .sub {font-size: 13px;} #product .comm_txt .tit_area .tit {font-size: 25px; line-height: 35px;} #product .comm_txt .wrt_area {min-width: 100%} #product .comm_txt .wrt_area span {font-size: 13px;} #product .comm_txt .wrt_area .wrt {font-size: 13px; line-height: 22px; margin: 15px 0;} #product .comm_txt .inq_area {margin-top: 10px;} #product .comm_txt .inq_area a {padding: 12px 27px; gap: 10px; font-size: 13px;} #product .comm_txt .inq_area a img {width: 100%; width: 20px;} #product .comm_tit {font-size: 20px; padding-bottom: 5px; margin-bottom: 37px; margin-bottom: 30px;} #product .cont .cont_title {font-size: 15px; padding-bottom: 15px;} #product .cont .cont_write {font-size: 14px; line-height: 28px;} #product .cont .cont_write .txt{font-size: 10px; line-height: 28px;} #product .cont .cont_line {margin: 25px 0;} #product .table_img {padding-bottom: 0.2rem;} #product .table_img img {width: 700px;} #product .cont .table_area table {font-size: 13px; width: 600px} } #board_write .info_area {margin-top: 90px;} #board_write .info_area .if_box {border-top: 1px solid #111111; border-bottom: 1px solid #111111; padding-bottom: 35px} #board_write .info_area .if_lst {padding: 22px 250px 22px 12px; border-bottom: 1px solid #DDDDDD} #board_write .info_area .if_lst:last-child {border-bottom: 0;} #board_write .info_area .if_tit {font-size: 18px; font-weight: 600; min-width: 280px; display: flex; align-items: center;} #board_write .info_area .if_tit i {color: #D14148} #board_write .info_area .if_wrt_area {width: 100%;} #board_write .info_area .if_wrt_area input {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #board_write .info_area .if_wrt_area input::placeholder {color: #6E757C; font-size: 18px} #board_write .info_area .if_wrt_area select {background: #F5F5F5; padding: 0 24px; height: 55px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #board_write .info_area .if_wrt_area select::placeholder {color: #6E757C; font-size: 18px} #board_write .info_area .if_wrt_area textarea {background: #F5F5F5; padding: 24px; height: 260px; font-size: 18px; width: 100%; box-shadow: none; border: 0; box-sizing: border-box;} #board_write .info_area .if_wrt_area > div {align-items: center; gap: 7px;} #board_write .info_area .if_wrt_area > p {color: #6E757C; font-size: 13px; padding-top: 6px} @media all and (max-width: 768px){ .mo_cont_img {overflow-x: scroll;} .mo_cont_img img {width: 600px} } #board_write .button_area {gap: 18px; justify-content: center; margin-top: 50px;} #board_write .button_area button {box-shadow: 0 5px 15px rgba(0,0,0,0.1); min-width: 280px; background: #8FB73E; } #board_write .button_area button a {font-size: 20px; font-weight: bold; padding: 33px 0; display: inline-block; text-align: center; color: #fff;} /******************************************************직무인터뷰***/ #interview {padding: 24px 0 145px;} #interview .interview_inner {max-width: 1064px; margin: 0 auto; height: 100%;} #interview .interview_swiper {overflow: hidden;} #interview .page_area {position: fixed; position: -webkit-sticky; top: 45%; z-index: 999; width: 100%; left: 0; display: none} #interview .page_area .page_arr {width: 35px; position: absolute;} #interview .page_area .page_prev {left: 13.7%} #interview .page_area .page_next {right: 13.7%} #interview .page_area .page_prev::after {display: none;} #interview .page_area .page_next::after {display: none;} #interview .img_area {position: relative;} #interview .img_area .img_txt {position: absolute; top: 53%; transform: translateY(-50%); right: 10%; text-align: right;} #interview .img_area .img_txt .tit {font-size: 30px; color: #153D34; font-weight: bold; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid;} #interview .img_area .img_txt .wrt {font-weight: bold; font-size: 23px; line-height: 1.3;} #interview .img_area .img_txt .prg {color: #355e58; font-size: 17px; font-weight: 600; padding-top: 50px;} #interview .img_area .img_txt .prg span {padding-left: 10px} #interview .txt_wrap {text-align: center; color: #000000; font-size: 23px; padding-top: 35px; line-height: 38px} #interview .interview_area {padding-top: 70px} #interview .interview_lst {margin-bottom: 80px} #interview .interview_lst .num {font-size: 32px; font-weight: bold; color: #8FB73E; padding-bottom: 12px;} #interview .interview_lst .title {border-bottom: 3px solid #DDDDDD; align-items: center; justify-content: space-between; padding-right: 1rem; gap: 10px} #interview .interview_lst .title .tit {border-bottom: 3px solid #8FB73E; font-size: 29px; bottom: -3px; text-align: left;} #interview .interview_lst .title .ico {cursor: pointer; transition: 0.5s;} #interview .interview_lst .title .ico.on {transform: rotate(180deg);} #interview .interview_lst .content {padding-top: 26px; overflow: hidden;} #interview .interview_lst .content .wrt {width: 93%; margin: 0 auto; font-size: 20px; font-weight: 300; line-height: 35px} #interview .interview_lst .img {margin-top: 45px} #interview .interview_line {padding: 80px 0;} #interview .interview_line .line {width: 80px; margin: 0 auto; height: 1px; background: #000000;} @media all and (max-width: 768px){ #interview .img_area .img_txt {top: 50%; right: 6%;} #interview .img_area .img_txt .tit {font-size: 18px; padding-bottom: 5px; margin-bottom: 5px;} #interview .img_area .img_txt .wrt {font-size: 11px; font-weight: 400;} #interview .img_area .img_txt .prg {font-size: 11px; padding-top: 5px;} #interview .page_area {} #interview .page_area .page_arr {width: 15px;} #interview .page_area .page_prev {left: 0} #interview .page_area .page_next {right: 0} #interview .interview_area {padding-top: 30px;} #interview .interview_lst {margin-bottom: 30px} #interview .interview_lst .num {font-size: 23px; padding-bottom: 5px;} #interview .interview_lst .title {} #interview .interview_lst .title .tit {font-size: 18px;} #interview .interview_lst .content {padding-top: 10px;} #interview .interview_lst .content .wrt {font-size: 15px; line-height: 25px;} #interview .interview_lst .title .ico {width: 13px} #interview .interview_lst .title .ico img {width: 100%} #interview .interview_line {padding: 30px 0} }