/* BASIC css start */ body{min-width:1400px} /* bxslider 초기화 */ .bx-wrapper{box-shadow: none!important;border: none!important;} _@media (max-width : 720px) { body{font-size: 14px!important;} } /* 탑버튼 */ #top_btn{background:#ff8820; color:#fff;outline:none;} #top_btn:hover{} /* 팝업 반응형*/ _@media (max-width:700px){ .hd_pops{/*width: 95% !important;*/top: 65px !important;left: 10px !important;} /*.hd_pops_con{width: 100%!important;}*/ .hd_pops_footer .hd_pops_reject,.hd_pops_footer .hd_pops_close{font-size: 12px;} } /* 게시판 리스트 카테고리 */ #bo_cate li{padding: 0!important;} #bo_cate #bo_cate_on{border: 1px solid #684ab3!important;background: #ffffff!important;color: #684ab3!important;} #bo_cate a{background: #eee;padding: 5px 20px!important;box-shadow: none!important; border-radius: 0!important; border: 1px solid #cdcbdb!important; border-left: 1px solid #cdcbdb!important; line-height: 25px!important; font-size: 14px;color: #a5a5a5!important; /*margin-left: 4px;*/} #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active{border-color: #684ab3!important} #bo_cate li:first-child a {margin-left:0;} #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active{border: 1px solid #545454!important;background: #ffffff!important;color: #3e3e3e!important;} /* 연도 많은 퍼블리케이션 카테고리 .cate_line */ #bo_cate.cate_line ul {text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;padding: 10px 0;} #bo_cate.cate_line #bo_cate_on{border: none !important;background: #ffffff!important;color: #3e3e3e!important;} #bo_cate.cate_line a{background: none!important;border: none !important;padding: 5px 8px!important;box-shadow: none!important; border-radius: 0!important;line-height: 25px!important; font-size: 14px;color: #a5a5a5!important; margin-left: 4px;} #bo_cate.cate_line a:focus, #bo_cate.cate_line a:hover, #bo_cate.cate_line a:active{border: none !important;color: #3e3e3e!important;} _@media (max-width : 720px) { #bo_cate a{font-size: 11px;} #bo_cate.cate_line a{ line-height: 12px!important;} } /* 게시판 리스트 */ #bo_list .cnt_cmt{background: #dde6f3!important;color: #684ab3!important;} /* 코멘트*/ #bo_gall .bo_tit .cnt_cmt{background: #dde6f3!important;color: #684ab3!important;} /* 코멘트*/ /* 게시판 리스트 하단 page*/ .pg_page{font-size: 1em!important;color: #959599 !important; height: 36px!important;line-height: 34px!important; min-width: 36px!important; background: #eee !important;border: 1px solid #eee!important;} .pg_page:hover{color:#79c8fd!important;background: #fff !important;border: 1px solid #ddd !important;} .pg_current{background:#79c8fd!important;border-color:#79c8fd!important; height: 36px!important;line-height: 34px!important; min-width: 36px!important;} .pg_end {background: url(/design/dermacle/img/pc/btn_end.gif) no-repeat 50% 50% #eee!important;} .pg_start {background: url(/design/dermacle/img/pc/btn_first.gif) no-repeat 50% 50% #eee!important;} .pg_end:hover {background: url(/design/dermacle/img/pc/btn_end.gif) no-repeat 50% 50% #fff!important;} .pg_start:hover {background: url(/design/dermacle/img/pc/btn_first.gif) no-repeat 50% 50% #fff!important;} /* 게시판 보기 */ .cmt_btn span.total{color:#684ab3!important} .cmt_btn span.total:after{background:#684ab3!important} #bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active, #bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {color: #684ab3!important;} #bo_v_file li:hover i, #bo_v_link li:hover i{color: #684ab3!important;} #bo_v_file li:hover, #bo_v_link li:hover{color: #dde6f3!important;background: #f8fbff!important;} .bo_v_nb li .nb_tit{color:#684ab3!important} /* 버튼 */ .btn_submit{background:#684ab3!important;transition: .2s} .btn_submit:hover{background:#87bef5!important;} .btn_b01:hover, .btn_b01:hover{opacity:0.7;} #bo_w .btn_submit{font-size: 1em!important;} #bo_w .btn_cancel{font-size: 1em!important;} a.btn_b02, .btn_b02{background:#684ab3!important;} a.btn_b02:hover, .btn_b02:hover{background:#87bef5!important;} #bo_v .btn{font-size: 14px!important;} .more_opt li button, .more_opt li a{font-size: 14px!important;} /* 게시판 보기 */ /* 로그인 탭*/ /*.mb_log_cate{display: none;}*/ .mbskin{margin: 50px auto !important;} /*링크 검은 테두리 삭제*/ :focus, a, button{outline: none!important;} /* 다음 지도 */ .root_daum_roughmap.root_daum_roughmap_landing{width: 100%;} .root_daum_roughmap .wrap_controllers{display: none !important;} .root_daum_roughmap_landing .border2{display: block!important;} @charset "utf-8"; #head_nav {position:absolute;top:0;left:0;width:100%;padding:0;} #head_nav>div{max-width:100%; height:1px; /*background:#FFF;*/ position:relative; margin:0 auto;} #head_nav.sub_header>div {height:360px !important;} #head_nav h1.logo {top:122px; background:url('/images/logo_header_big.svg') no-repeat; width:29px; height:292px} #head_nav h1.logo.white {background:url('/images/logo_header_big_W.svg') no-repeat;} #head_nav h1.logo.all_white {background:url('/images/logo_header_big_WW.svg') no-repeat;} #head_nav.sub_header nav {} #head_nav.sub_header h1.logo {height:227px; width:23px; top:67px; position:absolute; z-index:11;} #head_nav nav > a {display:block;/*float:left;height:26px;*/background:50% 50% no-repeat;background-size:contain} #head_nav_after {position:fixed; z-index:32; left:0;width:100%;overflow:hidden;padding:0; -webkit-transition-property:top;transition-property:top;-webkit-transition-duration:.3s;transition-duration:.3s; } #head_nav_after nav::after,#head_nav_after>div::after{clear:both;content:"";display:table} /** 메뉴롤오버 **/ header nav {position:relative;} header nav .gnb {position:relative; margin:0 auto; width:1218px; z-index:11; padding:0; } header nav .gnb.sub_gnb {height:100%;} header nav h1{position:absolute; top:65px; z-index:1;} header nav .oneD{float:right; z-index:1;} header nav .oneD>a {display:block; box-sizing:border-box; padding:60px 0; text-align:center; height:632px; font-size:18px; color:#fff; letter-spacing:1px} #head_nav_after nav .oneD>a {padding:0} header nav .oneD .twoD {position:absolute; top:350px; left:0; box-sizing:border-box; width:100%; overflow:hidden; z-index:1; border-top: 0px solid #000; padding:40px 20px;} header nav .oneD .twoD.news {height:320px;} header nav.sec_nav .gnb.after .twoD.after {position:absolute; top:164px; left:0; box-sizing:border-box; width:100%; overflow:hidden; z-index:1;} header nav .oneD .twoD .closeMenu {float:left; background:url('/images/btn_submenu_close.svg') no-repeat 50% 50%; width:12px; height:12px; margin:0 40px 0 210px;} header nav .oneD .twoD .leftMenu {position:relative; float:left; box-sizing:border-box; } header nav .oneD .twoD .leftMenu .menu {display:block; box-sizing:border-box; margin-top:10px; width:170px; height:28px; font-size:15px; color:#333; font-weight:500; } header nav .oneD .twoD .leftMenu .menu:hover{color:#000; } header nav .oneD .twoD .leftMenu .menu:first-child{margin-top:-2px; } header nav .oneD .twoD .rightArea{float:right; box-sizing:border-box;} header nav .oneD .twoD .rightArea .list .title{height:22px; font-size:15px; color:#333; font-weight:500;} header nav .oneD .twoD .rightArea .list .img {overflow:hidden; width:400px; height:240px;} header nav .oneD .twoD .rightArea .list .txt{font-size:13px; letter-spacing:-0.3px} /** 스크롤 메뉴 **/ #head_nav nav::after {clear:both;display:table} h1.head_nav_after_logo{position:absolute; top:60px; left:470px; z-index:999;} h1.head_nav_after_logo {left:0px; bottom:30px; background:url("/images/common/logo.png") no-repeat 50% 50%; width:228px; height:41px} /*h1.head_nav_after_logo.small_logo {left:0px; top:18px; bottom:auto; background:url("/images/common/logo.png") no-repeat 50% 50%; width:134px; height:24px}*/ /** 스크롤 전 메뉴 **/ #head_nav nav a.header_menu_01_company {background:url('/images/header_menu_01_company.svg') no-repeat 50% 110px; width:121px;} #head_nav nav a.header_menu_02_ri {background:url('/images/header_menu_02_ri.svg') no-repeat 50% 110px; width:121px;} #head_nav nav a.header_menu_03_beauty {background:url('/images/header_menu_03_beauty.svg') no-repeat 50% 110px; width:121px;} #roll_menu:hover .oneD a.top_menu { opacity : 0.3 ; } #roll_menu:hover .oneD a.top_menu:hover { opacity : 1.0 ; } #head_nav nav a span{} #head_nav nav a+span {display:block;float:left;width:1px;height:12px;margin:6px 10px;background:#fff;opacity:.4} #head_nav_after div.nav_wrap {width:100%; height:164px; padding:0; position:fixed; left:0; height:135px} #head_nav_after div.nav_wrap.small_wrap {} #head_nav_after div.nav_wrap.small_wrap .small_over {display:inline-block;position:absolute; width:100%; height:60px; top:0px; left:0; z-index:99;} #head_nav_after nav::after,#head_nav_after>div::after{clear:both;content:"";display:table} #head_nav_after nav {width:100%; height:135px} #head_nav_after nav.small_nav {} #head_nav_after nav.open_menu {margin:0 auto;width:100%; height:135px} #head_nav_after nav .inner_menu_wrap {margin:0 auto;width:1218px; height:80px; position:relative; z-index:999;} #active_menu {height:135px; width:100%; position:absolute; z-index:100; left:0px; top:0px;display:none; animation-duration: 0.4s; animation-name: fadein;} /* 메뉴칼라 */ #head_nav_after {} #small_nav_active {background: rgba(255,255,255,0.96);} #head_nav_after div.nav_wrap {} #active_menu { background: rgba(255,255,255,0.92);} #head_nav_after nav .pageHeaderMenu.after.submenu--open ~ .pageHeaderMenu--spacing-helper.after {background: rgba(255,255,255,0.92);} #head_nav_after nav .oneD>a {height:164px;} /** 스크롤 후 메뉴 **/ /** 스크롤 전 메뉴 **/ .head_nav_after_gnb_after {position:relative; height: 135px; width:1218px; margin:0 auto;} #head_nav_after_roll_menu {position: absolute; bottom: 30px; right: 0;} #head_nav_after_roll_menu:after {content:" "; display:block; clear:both; *zoom:1;} #head_nav_after nav .header_menu_01 {background:url('/images/header_menu_01_small.svg') no-repeat top right; width:74px; height:36px; background-size:74px 36px; display:block;} #head_nav_after nav .header_menu_02 {background:url('/images/header_menu_02_small.svg') no-repeat top right; width:92px; height:36px; background-size:92px 36px; display:block; margin-left:140px} #head_nav_after nav .header_menu_03 {background:url('/images/header_menu_03_small.svg') no-repeat top right; width:58px; height:36px; background-size:58px 36px; display:block; margin-left:140px} #head_nav_after nav .main_topmenu_01_after {z-index: 9999;position: absolute; background:url('/images/header_menu_01_small.svg') no-repeat top right; width:79px; height:36px; background-size:79px 36px; display:block; right:471px;} #head_nav_after nav .main_topmenu_02_after {z-index: 9999;position: absolute; background:url('/images/header_menu_02_small.svg') no-repeat top right; width:98px; height:36px; background-size:98px 36px; display:block; right:238px} #head_nav_after nav .main_topmenu_03_after {z-index: 9999;position: absolute; background:url('/images/header_menu_03_small.svg') no-repeat top right; width:62px; height:36px; background-size:62px 36px; display:block; right:5px} #head_nav_after.visible{top:0} /** New 사이트 css 190705**/ .video {width:100% !important;} .video video {height:auto} #myVideo {position: static !important; left: 0; top: 0; min-width: 100%; z-index:0;} #head_nav {background:transparent;} #head_nav h1.logo {top: 135px; right:1%; left: auto; width: 40px; height: 400px;} #sub_page_body #head_nav h1.logo {top: 135px; right:20px; left: auto; width: 40px; height: 400px;} #index_video_container {position:relative; height:700px; top:0} #index_video_wrap {width: 100%; height: 100%; position: relative; left: 0; top: 0; z-index: 0;} #index_video_wrap .player {display:none;} #index_video_wrap video {height:auto;} #index_video_wrap.sub_vod {height:420px; position: relative;} #index_video_wrap.sub_vod .video {} #index_video_wrap.sub_vod video {position: absolute !important; height:auto; width:auto; left: 50%; /*top: -380px;*/ transform: translate(-50%, 0);} #change_header {position:relative; height:80px; background:#fff;/*height:auto; position:absolute; top:0;*/} #change_header .header-bg{ z-index:32; left:0; width:100%; overflow:hidden; padding:0; -webkit-transition-property:top; transition-property:top; -webkit-transition-duration: .3s; transition-duration: .3s; background:rgba(255,255,255,0.96); position: fixed; } #change_header .close { background: url(/design/dermacle/img/xxx.png); position: absolute; top: 40px; height: 50px; width: 50px; z-index: 510; background-size: 29px; cursor: pointer; background-repeat: no-repeat; background-position: center;} #change_header .blind {overflow: hidden; font-size: 0; line-height: 0; position: absolute; height: 0; width: 0;} #change_header .partner {position:relative; z-index:400; width:100%; max-width:1200px; /*width:1218px;*/ margin:0 auto; height:80px;} #change_header .partner .menu_text{_padding:30px 40px 60px 40px;} #change_header .partner .menu_open {left:0; _width:50px; height:80px; position:absolute;text-align:center} #change_header .top_logo{right:18px; top:17px; position:absolute;} #change_header .top_logo > a{ display: inline-block; width: 150px; height: 21px;} #change_header .top_logo h1.logo_img{width: 168px; height: 21px; background: url(/design/dermacle/img/pc/logo.png) no-repeat 50% 50%; position: fixed; cursor: pointer; display: inline-block;} #change_header .gnb-top{display:inline-block; padding:10px 20px 0 0;} #change_header .gnb-top span{display:inline-block; padding-right:40px;} #change_header .gnb-top span a{font-size:19px;color:#242424} #change_header .gnb-top span a:hover{text-decoration:underline;} /* _@media (max-width: 480px){ #change_header .top_logo{width:196px;} #change_header .gnb-top{display:none;} } */ #change_header .partner.open .partner_wrap {opacity:1; left:0; } #change_header .partner_wrap {box-sizing:border-box; opacity:0; position:fixed; left:-200%; top:0; transition:left 0.8s, opacity 0.5s; -webkit-transition:left 0.8s, opacity 0.5s; width:100%; z-index:500;} #change_header .partner_wrap .close {left:570px;} #change_header .partner_container {background-color:#fff; overflow-x:hidden; box-sizing:border-box; /*height:100%;width:35%;*/ width:650px; position: relative;} #change_header .open:after { background-color: #000; content: ""; opacity: 0.5; position: fixed; right: 0; top: 0; height: 100%; width: 100%; z-index: 400;} #change_header .oneD.close {background: url('/images/common/menu7.png') no-repeat left 50%; cursor:pointer; position:static; top:auto; width:486px;height:20px; z-index:510;} #change_header .partner_wrap .oneD.close {left:auto;} #change_header.front-page {width:100%;} #change_header.sub_header {min-height:360px !important;} #change_header .side_menu_close.close { display:block; position:fixed; opacity:1; position:absolute; opacity:0; right:0; top:0; width:calc(100% - 650px); height:100%; background:transparent; z-index:9; left:auto; cursor:pointer; } #header_menu.new_side_menu{ display: block; position: static; margin-top: 0; border-top: 1px solid #f1f1f1; padding: 40px 50px;} #header_menu.new_side_menu .gnbArea {left:0; background:transparent; position: static; /*padding-bottom: 80px;*/} #head_nav_after div.nav_wrap.small_wrap .small_menu {right:auto; left:0; display:inline-block; position:absolute;top:22px;} #head_nav_after {top:0/*-80px;*/} #head_nav_after, #head_nav_after div.nav_wrap.small_wrap, #head_nav_after nav.small_nav{height:80px;} .MS_search_word{ width: 80%; height: 53px; border: 0; background: none; float: left; margin: 10px 0; text-indent: 15px; font-size: 18px;} .side_info_wrap{ display: flex; align-items: center; /* position: absolute; left: 0; top: 10px;*/} .side_info_wrap a{display: inline-block; padding: 0; background-position: top !IMPORTANT; font-size: 26px; font-family: 'Inter'; letter-spacing: 0px; text-align: center; width: 25%; vertical-align: top;} .side_info_wrap a p{ margin-top: 61px; font-size: 21px; color: #8e8e8e; font-weight: 500;} /* _@media (min-width: 640px) and (max-width: 896px){ #change_header .partner .menu_text{padding:20px 50px 30px 50px;} #change_header .partner_container{width:100%; overflow:auto;} #change_header .partner_wrap .close{left:30px; top:33px; height:20px; width:20px; background-size:100%;} .side_info_wrap{left:15px;} #header_menu .gnbArea{overflow-y:hidden;} } _@media (min-width: 0px) and (max-width: 639px){ #change_header .partner .menu_text{padding:10px 20px 10px 20px;} #change_header .partner_container{width:100%;} .gnb_service_menu_wrap.index{display:block; padding-top:16px!important; margin-right:-6px;} .side_info_wrap{left:-5px; top:70px;} #change_header .partner_wrap .close{left:22px; top:31px; height:20px; width:20px; background-position:50% 50%;} #header_menu .gnbArea .menuDiv{margin-bottom:50px;} } _@media (max-width: 360px){ .gnb_service_menu_top.search{display:none;} #header_menu.new_side_menu{margin-top:80px;} } */ .desk_mp4 {display:block} .mobile_mp4 {display:none} .myBtn_wrap { position: absolute; z-index:1; top:720px; left:50%; text-align:right; padding: 20px 28px 20px 2px; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); color: #f1f1f1; width: 1218px; margin:0 auto;} /** 플레이버튼 **/ #sub_page_body .myBtn_wrap {top:600px; display:none;} .myBtn_wrap button {border:0; outline:0; display:none;} .btn_myBtn {cursor:pointer; display:inline-block; margin-top:27px; position:fixed;} h1.head_nav_after_logo.small_logo {left:auto; right:18px; width:196px/*259px*/; height:46px/*62px*/; top:17px/*25px*/; bottom:auto; background:url("/images/common/logo.png") no-repeat 50% 50%; } #s_menu{padding-left:20px;} #b{display: none;} #b a{letter-spacing:-0.02em !important;} #s_menu:hover > #b{display: block;} #s_menu:hover > #a{display: none;} .pageHeaderMenuOverlay.open{display:block;} .pageHeaderMenu{box-sizing: border-box; -webkit-font-smoothing: antialiased; position: relative;} .pageHeaderMenu.subpage{position: initial;} .pageHeaderMenu.after{position: initial;} .pageHeaderMenu ul, .pageHeaderMenu li{margin: 0; padding: 0;} .pageHeaderMenu .topLevel a, .pageHeaderMenu .topLevel a:active, .pageHeaderMenu .topLevel a:visited, .pageHeaderMenu .topLevel a:focus, .pageHeaderMenu .topLevel a:hover{text-decoration: none;} .pageHeaderMenu .topLevel > ul > li > a{display: inline-block;padding: 0;} .pageHeaderMenu .topLevel > ul > li > a > span{white-space: nowrap;display: inline-block;} .pageHeaderMenu .topLevel > ul > li > a:hover > span, .pageHeaderMenu .topLevel > ul > li > a.open > span{color:#333 !important; border-bottom-color: #C75724;} .pageHeaderMenu .subMenu{ position: absolute; height: 430px; top: 20px; display: none; border-top: 0; opacity: 0; z-index: 1; transition: height .3s ease, opacity .3s ease; } .pageHeaderMenu .subMenu.company_menu{height: 467px; } .pageHeaderMenu .subMenu.innovation_menu{height: 433px; } .pageHeaderMenu .subMenu.beaty_menu{height: 365px; } .pageHeaderMenu .subMenu.small_submenu{height: 320px; } .pageHeaderMenu .subMenu.small_submenu.company{height: 340px; } .pageHeaderMenu .subMenu.small_submenu.innovation{height: 306px; } .pageHeaderMenu .subMenu.small_submenu.beaty{height:238px; } .pageHeaderMenu .subMenu .menu_list_wrap {position: absolute; top: 220px; left:20px; display:inline-block;} .pageHeaderMenu .subMenu.company_menu {border-left: 6px solid #ffe0db; left: 627px;} .pageHeaderMenu .subMenu.innovation_menu {border-left: 6px solid #ffc3bd; left: 860px;} .pageHeaderMenu .subMenu.beaty_menu {border-left: 6px solid #ffa298; left: 1093px;} .pageHeaderMenu .subMenu.subpage_menu {top: 170px;} .pageHeaderMenu .subMenu.subpage_menu.medium_menu {top: 23px;} .pageHeaderMenu .subMenu.medium_menu .menu_list_wrap {top: 200px} .pageHeaderMenu .subMenu.medium_menu {height: 440px;} #head_nav_after nav .pageHeaderMenu #subMenu_4.subMenu {left: 627px; border-left: 6px solid #ffe0db; padding-left:20px;} #head_nav_after nav .pageHeaderMenu #subMenu_5.subMenu {left: 860px; border-left: 6px solid #ffc3bd; padding-left:20px;} #head_nav_after nav .pageHeaderMenu #subMenu_6.subMenu {left: 1093px; border-left: 6px solid #ffa298; padding-left:20px;} #head_nav_after nav .pageHeaderMenu .subMenu {} .pageHeaderMenu .subMenu ul li {display: block;white-space:nowrap;} .pageHeaderMenu .subMenu ul li a { position: relative; display: inline-block; text-decoration: none; font-size:15px; letter-spacing:0.02em; color:#111; transition: color .3s ease; padding:0px 0px; font-weight:400; font-family:'NunitoSans-Regular', 'notokr-regular', sans-serif; } .pageHeaderMenu .subMenu ul li.depth_wrap a {padding:5px 0 2px;} .pageHeaderMenu .subMenu ul li.depth_wrap ul li a {padding:0px 0px 0px 0px; font-size:15px; color:rgba( 0,0,0,0.6); line-height: 1.6em;} .pageHeaderMenu .subMenu ul li.depth_wrap ul li a::before {content: "-"; padding-right: 5px;} .pageHeaderMenu .subMenu ul li.depth_wrap ul li:last-child a {padding-bottom:5px;} .pageHeaderMenu .subMenu ul li a span {} .pageHeaderMenu .subMenu ul li a span:hover, .pageHeaderMenu .subMenu ul li a:hover {color:#999;} .pageHeaderMenu .subMenu ul.rangeItems {} .pageHeaderMenu.after .subMenu ul.rangeItems {position: absolute; top: 93px;} .pageHeaderMenu.submenu--open .subMenu {} .pageHeaderMenu .topLevel a.open ~ .subMenu { display:block; opacity: 1; z-index: 10; } .pageHeaderMenu .topLevel { position: absolute; right: 0; top: 66px; width:1240px; } header nav .gnb.sub_gnb .pageHeaderMenu .topLevel {top: 66px;} header.sub_header nav .gnb.sub_gnb .pageHeaderMenu .topLevel {top: 49px;} #head_nav_after nav .pageHeaderMenu.after .topLevel { position: absolute; right: 0; top: 46px; width:1240px; } #head_nav_after nav .pageHeaderMenu.after .topLevel a.open ~ .subMenu.after { position: absolute; right: 0; top: 22px; display:block; width:136px; } .pageHeaderMenu .topLevel > ul { display: flex; flex-direction: row; } .pageHeaderMenu .topLevel > ul > li { margin: 0; } .pageHeaderMenu--spacing-helper { height: 0; transition: height .3s ease; background: transparent; } .pageHeaderMenu.submenu--open ~ .pageHeaderMenu--spacing-helper {height:0;} #head_nav_after nav .pageHeaderMenu.after.submenu--open ~ .pageHeaderMenu--spacing-helper.after { height:280px; position: absolute; left: -50%; top: 135px; width:200%; } .pageHeaderMenu .subMenu ul {margin:0px; padding:0px; display: inline-block; width:116px;} .pageHeaderMenu .subMenu .rangeItems li {} .pageHeaderMenu .subMenu .rangeItems li.fir {top:0;} .pageHeaderMenu .subMenu .rangeItems li.sec {top:30px;} .pageHeaderMenu .subMenu .rangeItems li.thi {top:60px;} .pageHeaderMenu .subMenu .rangeItems li.four {top:90px;} .pageHeaderMenu .subMenu .rangeItems li.fit {top:120px;} .pageHeaderMenu .subMenu .rangeItems li.six {top:150px;} .pageHeaderMenu .subMenu .rangeItems li.sev {top:180px;} .pageHeaderMenu.after .subMenu .rangeItems li {} .pageHeaderMenu .subMenu .rangeItems.sub_topmenu_02 li {/*width:270px;*/} .pageHeaderMenu .subMenu .rangeItems ul.depth_menu {display:none; position:absolute; left:230px; top: 0px; z-index:999;} .pageHeaderMenu .subMenu .rangeItems li:hover > ul.depth_menu {display:block;} .pageHeaderMenu .subMenu .rangeItems ul.depth_menu.fir {top:0} .pageHeaderMenu .subMenu .rangeItems ul.depth_menu.sec {top:30px;} .pageHeaderMenu .subMenu .rangeItems ul.depth_menu.thi {top:60px;} .pageHeaderMenu .subMenu ul.depth_menu li a{text-decoration:none; display:block; width:130px; height: 30px;line-height: 30px; letter-spacing:0.02em;} .pageHeaderMenu .subMenu ul.depth_menu li {width:90px; } .pageHeaderMenu .subMenu ul li:hover{} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li {position:absolute; } #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.fir {top:0;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.sec {top:30px;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.thi {top:60px;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.four {top:90px;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.fit {top:120px;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.six {top:150px;} #head_nav_after .gnb.after .pageHeaderMenu .subMenu .rangeItems li.sev {top:180px;} /*인덱스 섹션나누기 & 세로라인 */ #index_body #section_fir .left_index_area{background:#ffe0db; width:208px;} #index_body #section_fir .right_index_area{border-right:0px solid #ffe0db; width:100%;} #index_body #section_sec .left_index_area{background:#ffc3bd; width:208px;} #index_body #section_sec .right_index_area{border-right:6px solid #ffc3bd; width:1032px;} #index_body #section_thi .left_index_area{background:#ffa298; width:208px;} #index_body #section_thi .right_index_area{border-right:6px solid #ffa298; width:1032px;} #index_body #section_fir .overview_img{border-right:6px solid #ffe0db; margin-left:0 !important;} #index_body #section_sec .overview_img{border-right:6px solid #ffc3bd; margin-left:0 !important;} #index_body #section_thi .overview_img{border-right:6px solid #ffa298; margin-left:0 !important;} #index_body section{margin-bottom:12px;} #index_body section:last-child{margin-bottom:0;} /* 서브라인 넣기 */ /* 1섹션 */ section#fir_section_color .contents_body_fir, section#fir_section_color .contents_body_sec, section.first_section .contents_body_fir, section.first_section .contents_body_sec {padding-top:0px !important; padding-bottom:100px;} /*마지막*/ section:last-child .contents_body_sec {padding-bottom: 0px !important;} /* 피플디테일 */ body.good_people_detail section.relation_container .contents_body_fir{} body.good_people_detail section.relation_container .contents_body_sec{padding-top:0px !important;} body.good_people_detail section #section_desk_wrap .contents_body_sec{padding-bottom: 100px;} body.good_job_detail section #section_desk_wrap .contents_body_sec{padding-bottom: 100px;} body.good_job_detail section.other_job .contents_body_fir, body.good_job_detail section.other_job .contents_body_sec{padding-top:0px !important;} #container_wrap.index_container{} /*#contents_body{width:1218px; margin:0px auto 0px; position:relative;} #contents_body:after{content:" "; display:block; clear:both; *zoom:1;}*/ #contents_body.sub_page{width:100%; position:relative; margin:0 0 0px;} #contents_body .left_wing_wrap{float:left; width:213px;; position:relative;} #contents_body .right_wing_wrap{float:left; width:1027px; position:relative;} /* 서브좌우 나누기 */ #sub_contents_container {height:100%;} #contents_body.sub_page section {width:1218px; margin:0 auto;} #contents_body.sub_page #sub_contents_container, #contents_body.sub_page #sub_contents_container:last-child {padding:25px 0 80px;} #contents_body.sub_page section:after {content:" "; display:block; clear:both; *zoom:1;} #sub_contents_container .left_area {float:left; width: 208px;} #sub_contents_container .right_area {float:left; width:100%;} #contents_body.sub_page #subMap section {width:100%; margin:0 auto;} #section_desk_wrap:after {content:" "; display:block; clear:both; *zoom:1;} #section_desk_wrap .contents_body_fir {position:relative; padding-left:0; padding-right:0px; box-sizing: border-box } #section_desk_wrap .contents_body_sec {width:100%; float:left; position:relative; } #section_desk_wrap .contents_body_sec.dart_wrap {background:#fff;} .relation_container #section_desk_wrap .new_body:after {content:" "; display:block; clear:both; *zoom:1;} .relation_container #section_desk_wrap .contents_body_fir {width:33.333%; float: left;} .relation_container #section_desk_wrap .contents_body_sec {width:66.6667%; float: left;} .relation_container #section_desk_wrap .new_title {display:none;} /* 섹션별 칼라 */ #sub_page_body.good #sub_contents_container.fir_section_color {background:transparent} #sub_page_body.good #sub_contents_container.sec_section_color {background:#f5f5f5} #sub_page_body.good #sub_contents_container.thi_section_color {background:#ffedeb} #sub_page_body.good #sub_contents_container.fou_section_color {background:#ffedeb} #sub_page_body.good #sub_contents_container.rel_section_color {background:#fbfbfb} #sub_page_body.good_investors_detail .contents_body_fir, #sub_page_body.good_investors_detail .contents_body_sec {padding-top:6px;} #sub_page_body.different #sub_contents_container.fir_section_color {background:#ffc3bd} #sub_page_body.different #sub_contents_container.sec_section_color {background:#ffdad6} #sub_page_body.different #sub_contents_container.thi_section_color {background:#ffdad6} #sub_page_body.different #sub_contents_container.fou_section_color {background:#ffdad6} #sub_page_body.different #sub_contents_container.rel_section_color {background:#fbfbfb} #sub_page_body.beautiful #sub_contents_container.fir_section_color {background:#f0efee} #sub_page_body.beautiful #sub_contents_container.sec_section_color {background:#f5f5f5} #sub_page_body.beautiful #sub_contents_container.rel_section_color {background:#fbfbfb} #sub_page_body.news #sub_contents_container.fir_section_color {background:#f3f0f0;} #current_location_wrap {background:#eeeeee;} .fir_section_color {background:#f0f0f0 !important} .sec_section_color {background:#f5f5f5 !important} .rel_section_color {background:#fafafa !important} #wings_link_wrap {position:absolute; top:0; left:0; width:104px; } #wings_link_wrap .notice_wrap {margin-bottom:20px; background:#fff; padding:0 10px;} #wings_link_wrap .notice_wrap .date_year_ti {height:32px; line-height:33px; font-family: 'NunitoSans-Regular', sans-serif; font-weight: 400; letter-spacing:-0em;font-size:14px; border-bottom:1px solid #dadada;} #wings_link_wrap .notice_wrap .date_day_ti {height:102px; padding:15px 0; text-align:center; border-bottom:1px solid #dadada;} #wings_link_wrap .notice_wrap li {border-bottom:1px solid #dadada; padding:7px 0 8px} #wings_link_wrap .notice_wrap li:last-child {border-bottom:0} #wings_link_wrap .notice_wrap li span {display:block; line-height: 1.4em;} .business_inquiries_wrap {color:#fff; z-index:12; position:fixed;bottom:45px; left: 50%; margin-left: -765px; width: 136px; height: 134px;} .business_inquiries_wrap_change {position:absolute; bottom: 279px; z-index:10;} #wings_link_wrap .business_inquiries_wrap p {text-align:left; padding-left:0px; color:#e42225; font-size: 16px; font-family: 'NunitoSans-SemiBold', 'notokr-medium', sans-serif; padding:8px 0 0; letter-spacing:0.04em; line-height: 1.4em;} #wings_link_wrap .business_inquiries_wrap li:last-child {line-height: 1.714em;} #section_desk_wrap .contents_body_fir #wings_link_wrap .business_inquiries_wrap {color:#fff; z-index:2; position:fixed; width:104px; top: 361px !important;} @keyframes arrowInfinite { 0% {transform: translateX(0);} 50% {transform: translateX(12px);} 100% {transform: translateX(0);} } /* 문의슬라이드 */ #slide_inquiry {position: relative; width: 100%; height: 134px; left:-15px;} #slide_inquiry > div {position: absolute; top:0px; left:0px; } #wings_language {position:absolute; top:630px; right:-208px; width:188px; background:#FF7E6E; padding:0 10px;} #wings_language span {display:inline-block; width:56px; text-align:center; height:37px; line-height:38px; color:#FFF; font-style: italic;} #section_fir {position:relative; display: flex} #section_fir:after {content:" "; display:block; clear:both; *zoom:1;} #section_fir .fir {float:left; width:252px; background:#ffaea4; padding-bottom:60px; box-sizing: unset;} #section_fir .sec {float:left; } #section_fir .sec ul li {float:left; margin-right:0px; margin-bottom:0px;} #section_fir .sec ul:last-child li {} #section_fir .sec ul li:last-child {margin-right:0px;} #section_fir .sec .news_area {margin-bottom:12px;} #section_fir .sec .news_area:nth-child(3), #section_fir .sec .news_area:last-child {margin-bottom:0;} #section_fir .sec .news_area .first_dan {} #section_fir .sec .news_area .cada_dan {width:252px; background: #fff; position:relative; min-height: 290px;} #section_fir .sec .news_area .cada_dan .wrap {padding:0 12px;} #section_fir .sec .news_area .cada_dan .date_num {text-align:center; padding-top: 5px; padding-bottom: 10px;} #section_fir .sec .news_area .cada_dan .date_num span {display:inline-block; margin:0 4px;} #section_fir .sec .news_area .cada_dan .date_num img {width:54px; height:86px;} #section_fir .sec .news_area .cada_dan ul.list li {float: none; margin-right: 0px; margin-bottom: 0px; border-top:1px solid #dadada; padding: 9px 0 6px; display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:100%; overflow:hidden; line-height: 1.4em; font-size:14px; } #section_fir .sec .news_area .cada_dan ul.list li span {display:block; } #section_fir .main_article_area {margin-bottom:15px;} #section_fir .main_article_area:last-child {margin-bottom:0px;} #section_fir .main_article_area.first li {position:relative;} #section_fir .main_article_area.first li, #section_fir .main_article_area.second li { border-right:3px solid #ff5959; width:255px;} #section_fir .main_article_area.first li:last-child, #section_fir .main_article_area.second li:last-child {border-right:0px solid #ff5959;width:252px;} #section_fir .stitle_italic_small, #section_sec .stitle_italic_small {color:#000;} #section_thi .stitle_italic_small {color:#000; display: block; padding:3px 0 5px; line-height:1em;} .stitle_italic_small {font-family:'NunitoSans-SemiBold','notokr-medium',sans-serif; color:#000; letter-spacing:0.02em; font-size: 15px;} .index_bottom_img {position:absolute; bottom:0;} .section_ti_01_new {position:absolute; left:10px; top:10px; width:43px; height:126px; background:url('/images/section_ti_01_new.svg') no-repeat right top;} .section_ti_02_new {position:absolute; left:10px; top:10px; width:44px; height:161px; background:url('/images/section_ti_02_new.svg') no-repeat right top;} .section_ti_03_new {position:absolute; left:10px; top:10px; width:44px; height:101px; background:url('/images/section_ti_03_new.svg') no-repeat right top;} .section_ti_01_new.sub_ti {left:10px;} .section_ti_02_new.sub_ti {left:10px} .index_bottom_ti_absolute {position:absolute; left:12px; bottom:0; font-size:15px; font-family: 'NunitoSans-SemiBold', 'notokr-medium', sans-serif; color:#000; line-height: 1.9em; text-transform:uppercase;} .index_top_ti {margin-top:15px; font-size: 18px; font-weight:600; padding-left:20px; font-family: 'NunitoSans-SemiBold', 'notokr-medium', sans-serif; color:#000; text-transform:uppercase; line-height: 1.4em;} #section_sec {position:relative; display: flex} #section_sec:after {content:" "; display:block; clear:both; *zoom:1;} #section_sec .fir {float:left; width:252px; background:#ff6e6a; padding-bottom:60px; box-sizing: unset;} #section_sec .sec {float:left;} #section_sec .sec ul li {float:left; margin-right:0px; position:relative;} #section_sec .sec ul:last-child li {} #section_sec .sec ul li:last-child {margin-right:0px;} #section_sec .sec .news_area {margin-bottom: 12px;} #section_sec .sec .news_area:last-child {margin-bottom:0;} #section_sec .first_dan .overview_dan {margin-bottom:0} #section_sec .dan_ti.section_fir {background:#A89B9F; } #section_sec .main_article_area {margin-bottom:0px;} #section_sec .main_article_area.last_product_area {margin-bottom:0px;} #section_sec .main_article_area .copy {padding: 9px 12px 10px; line-height:1.78em; font-size:14px;} #section_sec .main_article_area .copy .copy_box {display:block; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis; font-size: 18px; line-height: 1.34em; vertical-align: bottom;letter-spacing: -0.01em;} #section_sec .main_article_area.production .copy {padding: 8px 12px;} #section_sec .main_article_area.production .copy.index_product {padding-bottom:5px; padding-top:0px;} #section_sec .sec .main_article_area.production li:first-child {width:510px;} #section_sec .news_area .news_dan {width:252px;} #section_sec .certific_nor {padding-top:3px;} #section_sec .main_article_area li { } #section_sec .main_article_area li:last-child {border-right:0px solid #ffb4aa;} #section_sec #tech_container .logo { line-height:1.4em; padding:0 12px; font-size:15px; font-family: 'NunitoSans-SemiBold', 'notokr-medium', sans-serif; color:#000; padding-bottom: 5px;} #section_sec #tech_container .logo img {height:30px; width:auto;} .index_zoomimg_position {position:absolute;bottom:0;} #section_sec #tech_container .first_dan {width:774px;} #section_sec #tech_container .news_dan {width:252px;} #section_thi {position:relative; display: flex} #section_thi:after {content:" "; display:block; clear:both; *zoom:1;} #section_thi .fir {float:left; width:252px; background:#ff433f; box-sizing: unset;} #section_thi .sec {float:left;} #section_thi .sec ul li {float:left; position:relative;} #section_thi .sec ul li:last-child {margin-right:0px;} #section_thi .dan_ti.section_fir {background:#766662; } #section_thi .main_article_area.beauty {margin-bottom:0px;} #section_thi .main_article_area.beauty .first_dan {min-height:235px;} #section_thi .main_article_area.beauty .first_dan .copy {padding: 9px 12px 9px;} #section_thi .main_article_area.beauty .copy {padding: 0 12px 10px; } #section_thi .sec .main_article_area.production li:first-child {width:484px;} #section_thi .sec .news_area {margin-bottom:12px;} #section_thi .sec > ul.news_area:last-child {margin-bottom:0} #section_thi .news_area .news_dan .popular_nor ul li {font-size:14px; width:100%;} #section_thi .main_article_area li { border-right:3px solid #ffd2c8;} #section_thi .main_article_area li:last-child {border-right:0px solid #ffd2c8;} #section_thi .main_article_area li { border-right:6px solid #ffa298; width:252px; box-sizing:content-box;} #section_thi .main_article_area li:last-child {border-right:0px solid #ffa298;width:252px;} .news_area:after {content:" "; display:block; clear:both; *zoom:1;} .news_area .news_dan {width:252px;} .main_article_area:after {content:" "; display:block; clear:both; *zoom:1;} .main_article_area li {} .main_article_area.beauty li {width:255px;} .main_article_area.beauty li:last-child {width:252px;} .more_area { padding:0px 0 0 12px; margin-bottom: 15px;} .more_area span {display:inline-block; background:url('/images/icon_more.png') no-repeat right 8px; background-size:10px 10px; font-size:15px; letter-spacing: 0.02em; padding-right: 18px; font-family: 'NunitoSans-SemiBold','notokr-medium',sans-serif; line-height: 1.75em;} .icon_play_btn {display:inline-block; width:48px; height:50px; position:absolute; bottom:0; right:0px; z-index:9;} .icon_play_btn_small {display:inline-block; width:20px; height:25px; position:absolute; top:50%; left:50%; z-index:9; margin-top:-13px; margin-left:-10px;} .icon_play_btn img {width:48px !important; height:50px !important;} .section_ti {display:inline-block; margin:16px 0 0 16px; width:53px; height:149px;} .section_ti img {width:100%} .first_dan .overview_dan ul:after {content:" "; display:block; clear:both; *zoom:1;} .first_dan .overview_dan img {width:516px; height:290px;} #section_thi .first_dan .overview_dan img {width:516px; height:290px;} .first_dan .overview_dan ul li {margin:0 !important;} .first_dan .overview_dan ul li:first-child {width:252px;} .first_dan .overview_dan .copy {padding:9px 12px; color:#111;} .first_dan .overview_dan .copy .kor {font-size:20px; line-height:1.4em; margin-bottom:2px; color:#777;} .first_dan .overview_dan .copy .en {font-size:20px; line-height:1.32em; letter-spacing:0.03em; color:#777;} .dan_ti {height:37px; line-height:38px;padding-left:16px; color:#FFF; font-family: 'NunitoSans-SemiBold', sans-serif; font-size:18px; font-style: italic; letter-spacing:0.01em;} .dan_ti.section_fir {background:#D0C6BF; } .contents_people_ti {font-family: 'NunitoSans-bold', 'notokr-bold', sans-serif; font-size:22px; margin-bottom:10px;} .basic_nor {background:#fff; position:relative;} .basic_nor.news {height:610px;} .basic_nor.news .copy {height:auto; border-bottom:1px solid #dadada; margin:0 16px; padding:8px 0 30px;} .basic_nor.news .copy:last-child {border-bottom:0px} .basic_nor .map_flag {line-height: 1em; margin-top:7px;} .basic_nor .map_flag span {margin-right:5px;} .basic_nor .map_flag img {width:26px; height:auto;} /* 위치찾기 */ .location_select_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .location_select_wrap .select_float {float:left; padding-left:30px;} .location_select_wrap .select_float:first-child {padding-left:0px;} .location_select_wrap > div {width:65%; margin-bottom:10px; float:left;} .location_select_wrap div.fir { width:35%; padding-right:30px; float:left;} .location_select_wrap div.sec { width:50%;} .location_select_wrap div.thi { width:50%; margin-right:0;} .location_select_wrap .sub_group_search:after {content:" "; display:block; clear:both; *zoom:1;} .select_loaction {background:url('/images/select_arrow.png') no-repeat right 50%; padding-right: 50px;text-transform:uppercase; letter-spacing:0.02em;} .section_location_map {position:relative} #map .gmnoprint {display:none;} .location_into_wrap {position:absolute; z-index:9; width: auto; left:50%; margin-left: -609px;} .location_into_box {background:#fff; padding:20px; display:inline-block; max-width:270px;} .certific_nor {padding:0 16px; } .certific_nor li {float:none !important; line-height:1.389em; border-bottom:1px solid #dadada; padding:4px 0; font-family: 'NunitoSans-Regular', 'notokr-regular', sans-serif; margin:0 !important; letter-spacing:0; font-size:16px;} .certific_nor .title {padding:12px 0 8px; font-size:18px;} .certific_nor li:last-child {border-bottom:0;} .popular_nor {padding:0 12px; background:#fff;} .popular_nor ul:after {content:" "; display:block; clear:both; *zoom:1;} .popular_nor ul li {padding:7px 0; border-bottom:1px solid #dadada; margin:0 !important;} .popular_nor ul li:last-child {border-bottom:0;} .popular_nor ul li div {float:left; position:relative} .popular_nor ul li div p {line-height:1.429em;} .popular_nor ul li div:first-child {width:65px; height:65px;} .popular_nor ul li div.last_child {margin-left:12px; width:123px; overflow:hidden; margin-top: 2px;} .index_mostpop_img {width:65px; height:65px; background-position:50% 50%; background-size:cover;} .quality_nor {padding:0; height:290px; background:#fff;} .copy.index_copy {vertical-align: bottom;} .copy {padding:8px 12px; color:#777;} .copy .kor {font-size:18px; line-height:1.34em; margin-bottom:2px; letter-spacing:-0.01em;} .copy .en {font-size:18px; line-height:1.32em; letter-spacing:0.01em;} .copy .caption_copy {margin-top:10px; height: 5.4em; overflow: hidden; word-wrap: break-word; text-overflow: ellipsis;} .copy .caption_copy.twoline {height: 3.6em;} .copy .face_ti {font-size:22px; line-height:1em; margin:5px 0; font-family: 'NunitoSans-Bold', sans-serif; letter-spacing:-0.01em;} .copy .hash_copy { font-family:'NunitoSans-Regular', 'Noto_Sans_Medium', sans-serif; letter-spacing:-0.01em; font-size: 14px;} .copy .hash_copy span {display:block; line-height: 1.75em;} .bottom_slogan { line-height:1em; text-align:center; margin:0px auto 0px; background:#ff7e6e;} .bottom_slogan.black {background:transparent; margin:0px auto 100px; padding-top:100px;} .bottom_slogan img {vertical-align:middle; width:500px; height:auto; vertical-align: middle;} /* 상단메뉴 */ .main_topmenu_01 {position: absolute; right:471px; background:url('/images/section_ti_01_new.svg') no-repeat center top; background-size:44px 126px; width:44px; height:126px; display:inline-block !important;} .main_topmenu_02 {position: absolute; right:238px; background:url('/images/section_ti_02_new.svg') no-repeat center top; background-size:44px 161px; width:44px; height:161px; display:inline-block !important;} .main_topmenu_03 {position: absolute; right:5px; background:url('/images/section_ti_03_new.svg') no-repeat center top; background-size:44px 101px; width:44px; height:101px; display:inline-block !important;} .grp-desktop-flyout {margin-left:687px;} .main_topmenu_01.sub_header {background-size:44px 126px; width:44px; height:126px;} .main_topmenu_02.sub_header {background-size:44px 161px; width:44px; height:161px;} .main_topmenu_03.sub_header {background-size:44px 101px; width:44px; height:101px;} .main_menu_spot01 {top:-100px; left:2px; background:url('/images/main_menu_spot_01.svg') no-repeat center top; background-size:16px 27px; width:26px; height:27px; display:inline-block !important; position:absolute;} .main_menu_spot02 {top:-100px; left:232px; background:url('/images/main_menu_spot_01.svg') no-repeat center top; background-size:16px 27px; width:26px; height:27px; display:inline-block !important; position:absolute;} .main_menu_spot03 {top:-100px; left:467px; background:url('/images/main_menu_spot_01.svg') no-repeat center top; background-size:16px 27px; width:26px; height:27px; display:inline-block !important; position:absolute;} #head_nav_after nav .main_menu_spot01 {top:-110px; left:27px;} #head_nav_after nav .main_menu_spot02 {top:-110px; left:257px;} #head_nav_after nav .main_menu_spot03 {top:-110px; left:474px;} .gnb_service_menu {position:absolute; top:0; right:0; z-index: 60;} .gnb_service_menu span {display:inline-block; line-height:42px; padding-left:60px; font-size:11px; text-transform:uppercase; font-family: 'NunitoSans-Regular', sans-serif; font-weight:600; letter-spacing:0.1em;} #head_nav_after nav .gnb_service_menu span {padding-left: 46px;} .gnb_service_menu_span {position:absolute; top:15px; font-size: 11px; text-transform: uppercase; font-family: 'NunitoSans-Regular', sans-serif; font-weight: 600; letter-spacing: 0.1em; line-height:1em;} .gnb_service_menu_span.news {right:426px} .gnb_service_menu_span.careers {right:319px;} .gnb_service_menu_span.investors {right:197px} .gnb_service_menu_span.search {right:98px;} .gnb_service_menu_wrap {} .gnb_service_menu_wrap.index_after {padding-top:14px;} .gnb_service_menu_wrap.subpage {padding-top:8px;} .gnb_service_menu_wrap.index_after .gnb_service_menu_top {padding-top:7px;} .gnb_service_menu_wrap.subpage .gnb_service_menu_top {padding-top:7px;} .gnb_service_menu_wrap.index { padding: 30px 40px 40px 40px; text-align: right; position: relative;} .gnb_service_menu_top {margin-right:30px; display:inline-block; font-size: 11px; text-transform: uppercase; font-family: 'NunitoSans-Regular', sans-serif; font-weight: 600; letter-spacing: 0.1em; line-height: 1em;} .gnb_service_menu_top.search {margin-right:0px;} .gnb_service_menu_top:last-child {margin-right:0;} .rangeItems .drop_menulist {position: relative; width: auto;} .rangeItems .drop_menulist:after {content:" "; display:block; clear:both; *zoom:1;} .rangeItems .drop_menulist > div.fir {float:left; width:150px;} .rangeItems .drop_menulist > div.sec {float:left; width:210px;} .rangeItems .drop_menulist > ul {width:auto !important;} .rangeItems .drop_menulist > ul li a {letter-spacing: 0.02em !important;} .rangeItems li { position: relative;} .rangeItems li a {display: block; } .rangeItems .drop_menulist .dep_title, .rangeItems .drop_menulist .dep_title a {font-size:16px;} .rangeItems .drop_menulist .dep_page {padding-left:0px;} .rangeItems .drop_menulist .dep_page:before {content: "· ";} .rangeItems .drop_submenu_group:hover .drop_dep_group {TOP: 0; left: 116px} .rangeItems .drop_dep_group {position: absolute; text-align: left; left: -999em; width: 400px; height: auto; padding:0; top:0; } .rangeItems .drop_submenu_lab:hover .drop_dep_lab {TOP: 0; left: 116px; top:-68px; } .rangeItems .drop_dep_lab {position: absolute; text-align: left; left: -999em; width: 400px; height: auto; padding:0; top:-68px; } ul.depth_menu li.dep_page:before {content: "· ";} ul.depth_menu li.dep_title {font-size:14px;} /*** 검색css ***/ .search_view { display: block; position: relative; width: 88%; margin-bottom: 45px; height: 74px; border: 0; border-radius: 10px; background: #f9f9f9; text-align: left;} .search_view body#sub_page_body .search_view {margin-right:0px;} i.icon_search {display: inline-block; width: 13px;height: 12px; margin:0 0 0 0px; vertical-align: middle;} .icon_search:before {content: " "; background:url('/images/common/icon_search.svg') no-repeat 50% 50%; background-size:13px 12px; display: inline-block; height:12px; width:13px;} i.icon_search_close {display: inline-block; width: 13px;height: 12px; margin:0 5px 0 0px; vertical-align: middle;} .icon_search_close:before {content: " "; background:url('/images/icon_search_close.svg') no-repeat 50% 50%; background-size:13px 12px; display: inline-block; height:12px; width:13px;} .seach_input_field {width:200px; height:30px; padding:4px; font-size:0.8em; border:1px solid #ccc;} _@media (max-width: 360px){ .search_view{display:none;} } body#index_body #subMenu_1.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:402px; height: 270px; transform: translate(-50%, 0); } body#index_body #subMenu_2.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top: 402px; height: 371px; transform: translate(-50%, 0); } body#index_body #subMenu_3.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top: 402px; height: 86px; transform: translate(-50%, 0); } body#index_body #subMenu_1.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 457px; transform: translate(-50%, 0); } body#index_body #subMenu_2.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 559px; transform: translate(-50%, 0); } body#index_body #subMenu_3.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 320px; transform: translate(-50%, 0); } #subMenu_1.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top: 311px; height: 361px; transform: translate(-50%, 0); } #subMenu_2.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top: 311px; height: 462px; transform: translate(-50%, 0); } #subMenu_3.subMenu.menuboard {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top: 311px; height: 220px; transform: translate(-50%, 0); } #subMenu_1.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 457px; transform: translate(-50%, 0); } #subMenu_2.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 559px; transform: translate(-50%, 0); } #subMenu_3.subMenu.menuboard.scroll_after {position:absolute; background: rgba(255,255,255,0.92); z-index: -1; left: 50%; width: 200%; top:89px; height: 320px; transform: translate(-50%, 0); } /* 서브 서비스 메뉴 */ header nav .gnb.sub_gnb .gnb_service_menu_span.news {right:328px} header nav .gnb.sub_gnb .gnb_service_menu_span.careers {right:221px;} header nav .gnb.sub_gnb .gnb_service_menu_span.investors {right:99px} header nav .gnb.sub_gnb .gnb_service_menu_span.search {right:0px;} input.img_clear_button { margin-right:5px;background: url('/images/canvas_01_clear.png') no-repeat 50% 50%; background-size:24px 24px; border: none; width: 24px; height: 24px; cursor: pointer; z-index:11;} input.img_reset_button { background: url('/images/mainimg_reset.png') no-repeat 50% 50%; border: none; width: 24px; height: 24px; cursor: pointer; z-index:11;} iframe {margin-bottom: 0; padding: 0; display: block; width: 100%;} .show-on-scroll { visibility: hidden; } .show-on-scroll.shown { visibility: visible; } .language_box {position:fixed; width:188px; background:#ff7e6e; height:36px; line-height:36px; z-index:-1; bottom:42px;} .language_box ul:after {content:" "; display:block; clear:both; *zoom:1;} .language_box ul li {float:left; width:33.33%; text-align:center;} .language_box ul li a {font-style:italic; color:#FFF; font-size:13px; letter-spacing:0.03em; font-weight:600;} /* 히스토리 */ #history_accord {background: url('/images/back_history.png') repeat-y top left; } .menu_head_wrap {margin-bottom:80px;} .menu_head { width:270px; cursor: pointer; position: relative; display:block; font-family: 'NunitoSans-Bold'; font-size:40px; color:#ffaba1; text-align:right; margin-bottom:30px;} .menu_head:after {content: url('/images/icon_dia.png'); width:15px; height:15px; position:absolute; top:-5px; right:-37px;} .menu_body:after, .menu_body ul:after {content:" "; display:block; clear:both; *zoom:1;} .menu_body { display:none; animation-duration: 0.4s; animation-name: fadein;} .menu_body ul li {float:left} .menu_body ul li.fir {width:330px; padding-right:60px; line-height: 1.67em; font-size:18px; text-align:right;} .menu_body ul li.fir .ti {font-size:18px; margin-bottom:5px;} .menu_body ul li.sec {width:calc(100% - 330px);} nav.lanquge_select {position:absolute; right:0; z-index:999; width:40px; height:40px; } .lanquge_position.right_lanquge #lanquge_wrap { } #wing_lang_wrap { position:fixed; right:50%; bottom:30px; z-index:430; width:40px; height:80px; -ms-transform: translate(660px, 0); -webkit-transform: translate(680px, 0); -moz-transform: translate(680px, 0); transform: translate(680px, 0);} #lanquge_wrap { box-sizing:border-box; position:relative; right:0; width:40px; height:40px;} #lanquge_wrap .lanquge_select strong {position:absolute; left:0; top:0;} .lanquge_select ul {position:absolute; left:0; bottom:0;} #lanquge_wrap .lanquge_select strong {bottom:40px;width:40px; height:40px; padding-left:0; box-sizing:border-box; transition:all .2s ease .5s; background:url('/images/btn_lang.png') no-repeat 50% 50%;} #lanquge_wrap .lanquge_select:hover strong {background-image:url('/images/btn_lang_hover.png'); transition-delay:0s;} #lanquge_wrap .lanquge_select ul {overflow:hidden; box-sizing:border-box; height:0px; bottom:40px; width:40px; background-color:#ea1d22; transition:all .4s ease .15s;} #lanquge_wrap .lanquge_select ul li:first-child {margin-top:0px;} #lanquge_wrap .lanquge_select ul li:last-child {margin-bottom:0px;} #lanquge_wrap .lanquge_select a {display:block; height:34px; width:100%; text-align:center; color:#FFF; line-height:34px; transition:all .3s ease; font-size:14px; font-style:italic; letter-spacing:0.04em;} #lanquge_wrap .lanquge_select a:hover, .lanquge_select a:focus {background:rgba(0,0,0,.05); color:#FFF;} #lanquge_wrap .lanquge_select:hover ul {height:102px;} .top_select {display:inline-block;position:absolute; left:0; bottom:0;width:40px; height:40px; padding-left:0; cursor:pointer; box-sizing:border-box; transition:all .2s ease .5s; background-image:url('/images/btn_top.png'); background-repeat:no-repeat; background-position:50% 50%;} .top_select:hover {background-image:url('/images/btn_top_hover.png'); transition-delay:0s;} #policy_wrap {} #policy_wrap .dandan {margin-bottom:60px;} #policy_wrap strong {font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; margin-bottom:5px; display: inline-block} #policy_wrap .inner_copy {padding-left:25px;} #policy_wrap .small_magin {margin-bottom:10px;} #policy_wrap .policy_table {border-collapse:collapse;} #policy_wrap .policy_table th {background-color:#e2e2e2; text-align:center; font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; font-weight:normal;} #policy_wrap .policy_table th, #policy_wrap .policy_table td {font-size:16px; line-height:1.35em; padding: 10px 0 8px;} #policy_wrap .policy_table td {padding-left:10px; padding-right:10px;} _@media all and (min-width: 0px) and (max-width: 640px) { #policy_wrap .policy_table th, #policy_wrap .policy_table td {font-size:14px; line-height:1.35em; padding: 6px 0 4px;} #policy_wrap .policy_table td {padding-left:5px; padding-right:5px;} #policy_wrap .dandan {margin-bottom:40px;} } .link_list_parti {display:inline-block; padding:0 12px; font-size:12px;} .ani_fade { animation-duration: 1.5s; animation-name: fadein; } .menu_fade { animation-duration: 0.6s; animation-name: fadein; } /* 아프로디테 사과 */ ul.info_list li {margin-bottom:50px;} ul.info_list li:last-child {margin-bottom:0px;} .section_fir_title {height:60px; padding-left:20px; background:#ffaea4 url('/images/section_fir_title.svg') no-repeat 20px top; background-size:95px 60px;} .section_sec_title {height:60px; padding-left:20px; background:#ff6e6a url('/images/section_sec_title.svg') no-repeat 20px top; background-size:95px 60px; margin-top:24px;} .section_thi_title {height:60px; padding-left:20px; background:#ffaea4 url('/images/section_thi_title.svg') no-repeat 20px top; background-size:95px 60px;} #section_thi .overview_img.index_beauty_img img {width:516px;} #section_fir .overview_title, #section_sec .overview_title, #section_thi .overview_title {width:252px; position:relative;} #section_thi .overview_dan .overview_title {width:252px; position:relative;} .empty12 {display:none} .new_face {background:#EDC6B7 !important;} .gnbBt.mobile_small {display:none;} #scratch_area {width:1218px; height:632px; background:#FFF url('/images/canvas_01.png')no-repeat 134px 180px; background-size: 850px 320px;} /* 단나누기 */ #section_desk_wrap {width:100%; } #section_desk_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .beauty_inquiries #fir_section_color.last_section #section_desk_wrap {padding-top:120px;} #contents_body.sub_page section {margin-bottom:100px;} #contents_body.sub_page section:last-child {margin-bottom:0px;} .contents_body_sec {margin-bottom:0px;} .relation_container .contents_body_sec {padding-bottom:0px;} .contents_body_sec:after {content:" "; display:block; clear:both; *zoom:1;} .contents_body_sec .new_title {width:247px; float:left; padding:0 100px 0 20px; word-break: keep-all} #section_desk_wrap .contents_body_sec.good.group_bti:after {content:" "; display:block; clear:both; *zoom:1;} #section_desk_wrap .contents_body_sec.good.group_bti {margin-left:-20px; margin-right:-20px; width:calc(100% + 40px);} #section_desk_wrap .contents_body_sec.group_group {width:calc(100% + 40px); margin-right:-20px; margin-left:-20px;} .contents_body_sec .new_body.group_bti_box {float:left; width:50%; padding-left:20px; padding-right:20px;} .contents_body_sec .new_body.group_bti_box > div {margin-bottom:50px;} /*.contents_body_sec .new_body.group_bti_box:nth-last-child(-n+2) > div {margin-bottom:0px;}*/ #section_desk_wrap .contents_body_sec .new_body.group_bti_box .acc_img {margin-bottom:0px;} .contents_body_sec .new_body.group_bti_box .group_group_list {position:relative; margin-bottom: 5px;} .contents_body_sec .new_body.group_bti_box .group_btn {position:absolute; right:0; top: -4px;} .contents_body_sec .new_body.group_bti_box .group_btn.mobile_only {min-width: 25px; height:25px; padding: 2px; top: 0px;} #pop_section_color {height:100%;} #pop_section_color #section_desk_wrap {width:100%; margin:0 auto; padding:0; height:100%;} #pop_section_color #section_desk_wrap .contents_body_fir {width:25%; float:left; position:relative;} #pop_section_color #section_desk_wrap .contents_body_sec {width:75%; float:left; padding-right:15%; height:100%; position:relative;} #pop_section_color #section_desk_wrap .contents_body_sec.people img {width:100%;} #pop_section_color #section_desk_wrap .contents_body_sec.relation_wrap .relation_box {float:left; width:calc(33.3% - 30px); margin-right:30px;} #pop_section_color #section_desk_wrap .contents_body_sec.relation_wrap .relation_box img {width:100%; max-height:autopx;} #pop_section_color #section_desk_wrap .contents_body_sec.relation_wrap .relation_box ul li {line-height:1.6em} #pop_section_color #section_desk_wrap .contents_body_sec.relation_wrap .relation_box ul li.thum_img {border-bottom: 2px solid #ffaba1; margin-bottom:15px;} .relation_box img {display:block;} #sec_section_color.cosmax_ci_container .acc_img {margin-bottom:40px;} #sec_section_color.cosmax_ci_container .acc_img img {width:100%; height:auto} .cosmax_ci_container .ci_wrap {position:relative; margin-bottom:70px;} .cosmax_ci_container .ci_wrap .right_img {display:inline-block; position:absolute;right:0;top:0} .cosmax_ci_container .ci_wrap .caption {width:654px;} .cosmax_ci_container .ci_slider_left {position:absolute; left:0; top:0; z-index:999; width:50%; height:100%;} .cosmax_ci_container .ci_slider_left img, .ci_slider_right img {width:100%; height:100%} .cosmax_ci_container .ci_slider_right {position:absolute; right:0; top:0; z-index:999; width:50%; height:100%;} .cosmax_ci_container .ci_slider_left img.over, .cosmax_ci_container .ci_slider_right img.over {display:none} .cosmax_ci_container .ci_slider_left a:hover img.nor, .cosmax_ci_container .ci_slider_right a:hover img.nor {display:none} .cosmax_ci_container .ci_slider_left a:hover img.over, .cosmax_ci_container .ci_slider_right a:hover img.over {display:inline-block} .relation_container .relation_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .relation_container .relation_wrap .relation_box {float:left; width:calc(33.3% - 24px);} .relation_container .relation_wrap .relation_box:nth-child(1) {width:33.3%; padding-right:24px;} .relation_container .relation_wrap .relation_box:nth-child(2) {width:33.3%; padding-left:12px;padding-right:12px;} .relation_container .relation_wrap .relation_box:nth-child(3) {width:33.3%; padding-left:24px;} .relation_container .relation_wrap .relation_box:last-child {margin-right:0;} .relation_container .relation_wrap .relation_box img {width:100%; height:auto;} .relation_container .relation_wrap .relation_box ul li {line-height:1.6em} .relation_container .relation_wrap .relation_box ul li.thum_img {border-bottom: 0px solid #ffaba1; margin-bottom:15px;} .onovation_diagram img {width:100%; height:auto;} .onovation_diagram .onovation_diagram_copy:after {content:" "; display:block; clear:both; *zoom:1;} .onovation_diagram .onovation_diagram_copy ul li {float:left; text-align:center;} .onovation_diagram .onovation_diagram_copy .onovation_sti01 {width:28.0487%;} .onovation_diagram .onovation_diagram_copy .onovation_sti02 {width:30.4878%;} .onovation_diagram .onovation_diagram_copy .onovation_sti03 {width:41.4634%;} .people_list_wrap ul:after {content:" "; display:block; clear:both; *zoom:1;} .people_list_wrap .people_info_wrap {margin-bottom:50px;} .people_list_wrap .people_info_wrap:last-child {margin-bottom:0px;} .people_list_wrap .people_info_wrap > li {margin-right: 0; width:33.333%; padding-right:24px;} .people_list_wrap .people_info_wrap > li div.fir {width:100%;} .people_list_wrap .people_info_wrap > li.interview_sum {width:66.66%; padding-left:12px; padding-right:0;} .people_list_wrap ul li {border-bottom:0px solid #bfbfbf; padding-top:20px; padding-bottom:0px; float:left; margin-right: 47px;} .people_list_wrap p.division {color: #000; font-size: 22px; font-family: 'NunitoSans-bold', 'notokr-bold', sans-serif; margin-bottom: 10px;} .people_list_wrap p.division:first-child {display:none;} .people_list_wrap ul li:nth-child(3n) {margin-right: 0px;} .people_list_wrap ul li:nth-child(-n+3) {padding-top: 0px;} .people_list_wrap ul li:first-child {border-top:0} .people_list_wrap ul li:last-child {border-bottom:0;padding-bottom:0px;} .people_list_wrap ul li:after {content:" "; display:block; clear:both; *zoom:1;} .people_list_wrap ul li div.fir {width:232px; margin-bottom:10px} .people_list_wrap ul li div.fir img {width:100%; height: auto} .people_list_wrap ul li div.sec {line-height:1.4em; width: 100%; padding-right: 10px;} .people_list_wrap ul li div.sec .name {font-family: 'NunitoSans-Regular', 'notokr-regular';} .people_list_wrap ul li div.sec p {overflow:hidden} .people_list_wrap ul li div.sec a:hover, .people_list_wrap ul li div.sec a:hover > strong {text-decoration:underline} .people_list_wrap.job_list ul > li div.fir {margin-bottom:0px} .people_list_wrap.job_list ul > li {padding-top: 0px; margin-right: 0; } .people_list_wrap.job_list ul > li:last-child {margin-bottom:0px;} .people_list_wrap.job_list ul > li:after {content:" "; display:block; clear:both; *zoom:1;} .contents_body_sec.people p.name {line-height:1.4em; margin-bottom:20px; font-family: 'NunitoSans-Bold', 'notokr-medium';} .people_list_wrap ul li div.sec p.plus img {display:block;} .people_list_wrap.job_list ul li div.fir {float:left; width:66.666%;} .people_list_wrap.job_list ul li div.fir img {width:100%;} .people_list_wrap.job_list ul li div.sec {float:left; width:calc(100% - 66.666%); padding-left:20px; word-wrap: break-word;} .people_btn_list {padding-top:40px;} .rnd_icon_wrap ul li.ti {border-top: 2px solid #555; border-bottom: 1px solid #555; font-family: 'NunitoSans-Bold', 'notokr-bold'; padding:5px 0;} .rnd_icon_wrap ul li.icon_box:after {content:" "; display:block; clear:both; *zoom:1;} .rnd_icon_wrap ul li.icon_box {border-bottom: 1px solid #555; padding:20px 0 15px;} .rnd_icon_wrap ul li.icon_box.certifications_box {padding:30px 0 25px;} .rnd_icon_wrap ul li:last-child.icon_box {border-bottom: 0px; padding-bottom:0px;} .rnd_icon_wrap ul li.icon_box div {text-align:center; letter-spacing:0.04em} .rnd_icon_wrap.certifications_wrap ul li.icon_box div {text-align:center; letter-spacing:-0.01em} /* 새로운 */ .rnd_icon_wrap ul li.icon_box > div {display:inline-block; width: calc(25% - 10px); box-sizing: border-box; padding:0 10px;} .rnd_icon_wrap ul li.icon_box > div:first-child {padding:0 10px 0 0; padding-left:0; margin-right:20px;} .rnd_icon_wrap ul li.icon_box > div:last-child {padding:0 0 0 10px;} .rnd_icon_wrap ul li.icon_box > div img {width:auto; text-align:center; height:88px;} .rnd_icon_wrap ul li.icon_box > div p {margin-bottom:20px; text-transform:uppercase; line-height:1.3em; text-align:left !important; min-height:46px; font-size: 16px; letter-spacing:-0.03em;} .rnd_icon_wrap.certifications_wrap ul li.icon_box > div:first-child {margin-right:0px;} .rnd_icon_wrap ul li.icon_box div.fir {font-family: 'NunitoSans-Bold', 'notokr-bold'; line-height:1.5em; font-size:19px;} .rnd_icon_wrap ul li.icon_box div.sec {} .rnd_icon_wrap ul li.icon_box div.sec.research {width:calc(100% - 235px); text-align:left;} .rnd_icon_wrap ul li.icon_box div.sec.research ul li {position:relative; padding-left: 20px; line-height:1.6em;} .rnd_icon_wrap ul li.icon_box div.sec.research ul li:before { content: " "; background-image: url(../images/article_dot.png); position: absolute; left: 8px; top: 50%; height: 4px; margin-top: -2px; width: 4px; } .rnd_icon_wrap ul li.icon_box div.thi {} .rnd_icon_wrap ul li.icon_box div.fou {} .networking_system img {height:494px; width:auto; margin-bottom:15px;} .networking_system .caption {color:#ff595a; text-align:center; font-size:18px;} .rnd_icon_wrap.certifications_wrap {margin-bottom:50px;} .rnd_icon_wrap.certifications_wrap:last-child {margin-bottom:0px;} .rnd_icon_wrap.certifications_wrap ul li.icon_box div.fir {width:40%; padding-right:30px; font-family: 'NunitoSans-Light', 'notokr-regular'; display: inline-block; vertical-align: top;} .rnd_icon_wrap.certifications_wrap ul li.icon_box div.fir span {display:block;} .rnd_icon_wrap.certifications_wrap ul li.icon_box div.fir img {height:18px; width:auto; vertical-align: middle; margin-top:-4px; margin-left:5px;} .rnd_icon_wrap.certifications_wrap ul li.icon_box div.sec {width:calc(100% - 40%); padding-right:0; text-align:left;} .rnd_icon_wrap.certifications_wrap .logo_audit {height:34px !important; width:auto !important; margin-bottom: 5px !important; margin-top: 0px !important; margin-left: 0 !important;} .rnd_icon_wrap.certifications_wrap .flag_certifications {margin-top:-6px !important;} /* 기존 아코디언 */ .accord_wrap.rndcenter_wrap {position: relative;} .accord_wrap.rndcenter_wrap .accord_contents {position: relative;} .accord_wrap.rndcenter_wrap ul li.mb {margin-bottom:0px;} .accord_wrap.rndcenter_wrap .contents:after {content:" "; display:block; clear:both; *zoom:1;} .accord_wrap.rndcenter_wrap .contents .fir {float:left; width:70%; padding-right:30px;} .accord_wrap.rndcenter_wrap .contents .fir.lab_info {width:100%; padding-right:0px;} .accord_wrap.rndcenter_wrap .contents .sec {float:left; width:30%; word-break:keep-all; white-space:-moz-pre-wrap; white-space:-pre-wrap; white-space:-o-pre-wrap; word-wrap:break-word;} .accord_wrap.rndcenter_wrap .contents_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .accord_wrap.rndcenter_wrap .contents_wrap {margin-bottom:20px;} .accord_wrap.rndcenter_wrap .contents_wrap.lab_info {padding-bottom:40px; margin-bottom:0;} .accord_wrap.rndcenter_wrap .quarters03_wrap {padding-top:40px;border-top:1px solid #555; } .accord_wrap.rndcenter_wrap .contents_wrap:last-child {margin-bottom:0px;} .accord_wrap.rndcenter_wrap .contents {margin-top:15px; margin-bottom:0px;} .accord_wrap.rndcenter_wrap .contents .research_wrap {border-top:0px solid #555; padding-top:25px;} .accord_wrap.rndcenter_wrap .contents .fir.research {width:252px; padding-right:20px; line-height: 1.4em;} .accord_wrap.rndcenter_wrap .contents .fir.research p {padding: 0 0 5px;} .accord_wrap.rndcenter_wrap .contents .fir.research img {width:100%; height:auto; margin-bottom:10px} .accord_wrap.rndcenter_wrap .contents .sec.research {width:calc( 100% - 252px );} .accord_wrap.rndcenter_wrap .contents .sec.research .font_medium {font-family: 'NunitoSans-SemiBold','notokr-medium',sans-serif; font-size:21px; line-height: 1em; padding-top:10px;} .accord_wrap.rndcenter_wrap .contents .name {padding-bottom:10px; font-family: 'NunitoSans-SemiBold','notokr-medium',sans-serif;} .accord_wrap.rndcenter_wrap .acc-btn {margin-top: 5px;} .accord_wrap.rndcenter_wrap .openContent {margin-top: 0px;} .accord_wrap.rndcenter_wrap .openContent:last-child {margin-bottom: 0px;} ul.accord_wrap.rndcenter_wrap li:first-child.acc-btn {margin-top:-14px;} .accord_wrap.rndcenter_wrap .contents .research_wrap ul.health_list > li:after {content:" "; display:block; clear:both; *zoom:1;} .accord_wrap.rndcenter_wrap .contents .research_wrap ul.health_list > li {margin-bottom:20px;} .accord_wrap.rndcenter_wrap .contents .research_wrap ul.health_list.product_list > li {margin-bottom:40px;} .accord_wrap.rndcenter_wrap .acc-content_rni_photo {padding:15px 0 10px;} .accord_wrap.rndcenter_wrap .acc-content_rni_photo img {width:100%; height:auto;} .accord_wrap.rndcenter_wrap.faq_wrap .contents {margin-top:15px; margin-bottom:60px; padding:0 20px;} /* 툴팁 */ .tooltip {position: relative; display: inline-block; margin: auto; } .certifications_wrap.audit .tooltip {cursor:unset;} .tooltip .tooltip-content {visibility: hidden; width: 480px; background-color: #fff; padding: 30px; position: absolute; z-index: 12; top: -200px; left: 200px; border:1px solid #e7e7e7;} .tooltip .tooltip-content p {min-height:auto; font-size:13px; line-height:1.54em !important; margin-bottom:0 !important;} .tooltip .tooltip-content img {padding:0; margin-top:0 !important; margin-left:0 !important;} .tooltip .tooltip-content .copy_tool {border-top:1px solid #555; padding-top:15px; margin-top:10px;} .tooltip .tooltip-content .certi_pop_ti {line-height:1em; min-height:1em; margin-top:20px; font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; letter-spacing: 0.01em; font-size: 18px;} .tooltip_btn {cursor:pointer} .technology_diagram_wrap {position:relative; text-align:center;} .technology_diagram_wrap .diagram_icon { width:auto; display:inline-block; position:absolute; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.2s ease-in-out;} .technology_diagram_wrap .diagram_icon:hover { transform: scale(1.8); -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); z-index:999;} .technology_diagram_wrap .diagram_copy { width:auto; display:inline-block; position:absolute; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.2s ease-in-out;} .technology_diagram_wrap .diagram_copy:hover { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} /* 옆집hover */ .technology_diagram_wrap .diagram_icon.icon01:hover + .diagram_copy.copy01 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon02:hover + .diagram_copy.copy02 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon03:hover + .diagram_copy.copy03 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon04:hover + .diagram_copy.copy04 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon05:hover + .diagram_copy.copy05 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon06:hover + .diagram_copy.copy06 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon07:hover + .diagram_copy.copy07 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon08:hover + .diagram_copy.copy08 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon09:hover + .diagram_copy.copy09 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon10:hover + .diagram_copy.copy10 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon11:hover + .diagram_copy.copy11 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon12:hover + .diagram_copy.copy12 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon13:hover + .diagram_copy.copy13 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon14:hover + .diagram_copy.copy14 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon15:hover + .diagram_copy.copy15 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon16:hover + .diagram_copy.copy16 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon17:hover + .diagram_copy.copy17 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon18:hover + .diagram_copy.copy18 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon19:hover + .diagram_copy.copy19 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_icon.icon20:hover + .diagram_copy.copy20 { transform: scale(1.6); -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); z-index:999;} .technology_diagram_wrap .diagram_back {height:730px; width:820px;} .technology_diagram_wrap .diagram_icon img {height:50px; width:50px;} .technology_diagram_wrap .diagram_icon { width:50px; height:50px;} .technology_bagic_wrap .diagram_tech_bagic img {width:100%; height:auto; } .technology_bagic_wrap .diagram_tech_bagic { margin-bottom:10px; width:51%; height:auto; display:inline-block; transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: all 0.1s ease-in-out;} .technology_bagic_wrap .diagram_tech_bagic:hover { transform: scale(1.2); -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); z-index:999;} .technology_diagram_wrap .diagram_icon.icon01 {top:125px; left:319px;} .technology_diagram_wrap .diagram_copy.copy01 {width:54px; height:38px; left:315px; top:8px;} .technology_diagram_wrap .diagram_icon.icon02 {top:121px; left:389px;} .technology_diagram_wrap .diagram_copy.copy02 {width:58px; height:38px; left:403px; top:0px;} .technology_diagram_wrap .diagram_icon.icon03 {top:131px; left:458px;} .technology_diagram_wrap .diagram_copy.copy03 {width:51px; height:38px; left:517px; top:20px;} .technology_diagram_wrap .diagram_icon.icon04 {top:167px; left:516px;} .technology_diagram_wrap .diagram_copy.copy04 {width:117px; height:38px; left:606px; top:73px;} .technology_diagram_wrap .diagram_icon.icon05 {top:221px; left:564px;} .technology_diagram_wrap .diagram_copy.copy05 {width:117px; height:38px; left:673px; top:151px;} .technology_diagram_wrap .diagram_icon.icon06 {top:287px; left:582px;} .technology_diagram_wrap .diagram_copy.copy06 {width:160px; height:38px; left:659px; top:260px;} .technology_diagram_wrap .diagram_icon.icon07 {top:353px; left:590px;} .technology_diagram_wrap .diagram_copy.copy07 {width:78px; height:38px; left:727px; top:362px;} .technology_diagram_wrap .diagram_icon.icon08 {top:423px; left:580px;} .technology_diagram_wrap .diagram_copy.copy08 {width:90px; height:38px; left:700px; top:466px;} .technology_diagram_wrap .diagram_icon.icon09 {top:474px; left:539px;} .technology_diagram_wrap .diagram_copy.copy09 {width:45px; height:38px; left:654px; top:585px;} .technology_diagram_wrap .diagram_icon.icon10 {top:527px; left:489px;} .technology_diagram_wrap .diagram_copy.copy10 {width:45px; height:38px; left:581px; top:665px;} .technology_diagram_wrap .diagram_icon.icon11 {top:551px; left:422px;} .technology_diagram_wrap .diagram_copy.copy11 {width:45px; height:38px; left:478px; top:685px;} .technology_diagram_wrap .diagram_icon.icon12 {top:554px; left:352px;} .technology_diagram_wrap .diagram_copy.copy12 {width:90px; height:38px; left:338px; top:692px;} .technology_diagram_wrap .diagram_icon.icon13 {top:539px; left:285px;} .technology_diagram_wrap .diagram_copy.copy13 {width:110px; height:38px; right:561px; top:684px;} .technology_diagram_wrap .diagram_icon.icon14 {top:502px; left:231px;} .technology_diagram_wrap .diagram_copy.copy14 {width:58px; height:38px; right:642px; top:619px;} .technology_diagram_wrap .diagram_icon.icon15 {top:449px; left:183px;} .technology_diagram_wrap .diagram_copy.copy15 {width:45px; height:38px; right:711px; top:540px;} .technology_diagram_wrap .diagram_icon.icon16 {top:388px; left:162px;} .technology_diagram_wrap .diagram_copy.copy16 {width:73px; height:38px; right:721px; top:440px;} .technology_diagram_wrap .diagram_icon.icon17 {top:320px; left:155px;} .technology_diagram_wrap .diagram_copy.copy17 {width:58px; height:38px; right:750px; top:347px;} .technology_diagram_wrap .diagram_icon.icon18 {top:252px; left:168px;} .technology_diagram_wrap .diagram_copy.copy18 {width:73px; height:38px; right:727px; top:239px;} .technology_diagram_wrap .diagram_icon.icon19 {top:195px; left:210px;} .technology_diagram_wrap .diagram_copy.copy19 {width:105px; height:38px; right:660px; top:129px;} .technology_diagram_wrap .diagram_icon.icon20 {top:147px; left:253px;} .technology_diagram_wrap .diagram_copy.copy20 {width:68px; height:38px; right:589px; top:53px;} .technology_bagic_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .technology_bagic_wrap div {float:left; width:12.5%; text-align:center; font-size:11px; line-height:1.4em; color:#111; letter-spacing:0.02em; font-family:'NunitoSans-bold', 'notokr-medium', sans-serif;} .technology_bagic_wrap div p {padding:0 5px;} .technology_bagic_wrap {border-bottom:1px solid #555555; padding-bottom:15px;} .table_set_3dan_container ul.base_makeup li div {display:inline-block; text-align:center;} .table_set_3dan_container ul.base_makeup li div img {height:226px; width:auto; margin-bottom:10px;} .table_set_2dan_container ul.base_makeup_efficacy > li:first-child {padding-right:10px;} .table_set_2dan_container ul.base_makeup_efficacy > li:last-child {padding-left:10px;} ul.base_make_product_list li img {height:108px; width:auto; margin-bottom:10px;} ul.base_make_product_list.hybrid_tech li {font-size:13px;} ul.base_make_product_list.hybrid_tech li img {height:30px; vertical-align:middle; margin-right:10px; margin-bottom:0px;} ul.base_make_product_list li div {margin-right:60px; text-align:center;} /* 인증현황 캐러셀 */ .carousel_container.patents_container ul.patents_list li {border-bottom:1px solid #3c3c3c; text-align:left; line-height:1.6em; padding:8px 0; } .carousel_container.patents_container ul.patents_list li:last-child {border-bottom:0;} .carousel_container.patents_container ul.patents_list li.ti {font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; margin-top:20px;} /* 그룹 지도 */ .map_spread_wrap {background:url('/images/img_group_map.png') no-repeat 50% 50%; width:790px; height:431px; position:relative; background-size:100% 100%;} /* 히스토리 */ .drop_list_container.history_wrap .drop_list_subdep { width:50%;margin:0;padding:0; font-size:0; letter-spacing:-5px; text-align: left; } .drop_list_container.history_wrap .drop_list_subdep .contents_detail { display:inline-block; width: calc(50% - 25px); font-size:12px; letter-spacing:0; vertical-align:top; *display:inline; zoom:1 } .drop_list_container.history_wrap .drop_list_subdep .contents_detail:nth-child(odd) {margin-right: 25px;} .drop_list_container.history_wrap .drop_list_subdep .contents_detail:nth-child(even) {margin-left: 25px;} .drop_list_container.history_wrap ul.drop_list_maindep > li { float:none; min-height:44px; } .drop_list_container.history_wrap .history_fir {background-size: cover; background-repeat:no-repeat; background-position:center 70px;} .drop_list_container.history_wrap .history_fir > .ti {display:inline-block; width:100%; text-align:center; height:80px; line-height:80px; position:relative; left: 0;} /* 타이틀 보더 */ .drop_list_container.history_wrap .history_fir > .ti:before { content : ""; position: absolute; left: 0; margin-left:0; bottom: 0; height: 1px; width: 100%; border-bottom:1px solid #bfbfbf;} .drop_list_container.history_wrap .history_fir > .ti a {font-family: 'NunitoSans-Bold'; font-size:25px;} .drop_list_container.history_wrap ul.drop_list_subdep > li {min-height:44px;} .drop_list_container.history_wrap ul.drop_list_subdep > li img {width:100%} .drop_list_container.history_wrap ul.drop_list_subdep {border-right:1px solid #555; font-size:18px; line-height:1.536em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .drop_list_container.history_wrap .contents_detail {padding: 25px 0 20px; text-align:left; width:50%; line-height:2.1em;} .drop_list_container.history_wrap .contents_detail img {border-bottom: 0px solid #ffaba1; margin-bottom: 18px !important;} .drop_list_container.history_wrap .contents_detail p {font-size:16px;} .drop_list_container.history_wrap .contents_detail p span {line-height: 1.95em; display: inline-block; margin-top:5px;} .drop_list_container.history_wrap .contents_detail .ti {font-size:20px; font-family: 'NunitoSans-Bold', 'notokr-medium',sans-serif; margin-bottom:10px;} /* 컨텐츠 내용 */ .drop_list_container.history_wrap ul.drop_list_subdep.history { width:100%; border-right:0; text-align:center; background:url('/images/back_history_line.png') repeat-y top center; border-bottom: 0px solid #555;position: relative; left: 0; top: 0;padding-bottom: 40px; margin-left: 0; text-align: left; } .drop_list_container.history_wrap ul.drop_list_subdep.history:after {content:" "; display:block; clear:both; *zoom:1;} .drop_list_container.history_wrap ul.drop_list_subdep.last {left:305px; width:400px; padding-left:20px; border-right:0px; padding:0; line-height:1.536em;} .drop_list_container.history_wrap .history_wrap_detail img {width:100%;} .drop_list_container.history_wrap .history_sec {float:left; width:50%; padding: 30px; height:auto;} .drop_list_container.history_wrap .history_sec p:last-child {font-size:16px;} .drop_list_container.history_wrap .drop_list_subdep {position: static;} .drop_list_container.history_wrap ul.drop_list_wrap > li {width:100%;} .drop_list_container.history_wrap ul.drop_list_maindep.history_back_line {} .dot_dia_10px.history {left:50%; bottom:0; z-index:9; margin-bottom:-6px; margin-left:-5px;} /* 논문발표 */ .drop_list_container.academic_papers {width:100%;} .drop_list_container ul.drop_list_wrap {width:100%;} .drop_list_container ul.drop_list_wrap .drop_list_maindep {background:url('/images/back_drop_list_maindep.png') repeat-y left top; } .good.good_history .drop_list_container ul.drop_list_wrap .drop_list_maindep {background:url('/images/dot.png') !important} .drop_list_container ul.drop_list_wrap li {width:100%;} .drop_list_container ul.drop_list_wrap .drop_list_maindep .ti {font-family: 'NunitoSans-Bold', 'notokr-medium',sans-serif; } .drop_list_container.academic_papers ul.drop_list_maindep > li {width:100%; float:none; border-right:0px solid #555; min-height:44px;} .drop_list_container.history_wrap .academic_fir > .ti {display:inline-block; width:100%; padding-right:20px;} .drop_list_container.history_wrap .academic_fir > .ti a {font-family: 'NunitoSans-Bold'; font-size:34px;} .drop_list_container.academic_papers ul.drop_list_subdep > li {min-height:35px;} .drop_list_container.academic_papers ul.drop_list_subdep {left:105px; width:315px; padding:20px 0px 20px 20px; border-right:1px solid #555; font-size:18px; line-height:1.536em;} .drop_list_container.academic_papers ul.drop_list_subdep.academic {width: calc(100% - 105px); border-right:0; border-top: 1px solid #555; border-bottom: 1px solid #555;} .drop_list_container.academic_papers ul.drop_list_subdep.last {left:305px; width:400px; padding-left:20px; border-right:0px; padding:0; line-height:1.536em;} .drop_list_container.academic_papers .academic_papers_detail img {width:100%;} .academic_papers .academic_sec {margin-bottom:20px;} .academic_papers .academic_sec:last-child {margin-bottom:0px;} .icon_pdf {height:20px; width:auto; vertical-align:middle; margin-top: -4px; margin-left:5px;} /* 모달팝업 */ #lean_overlay { position: fixed; z-index:100; top: 0px; left: 0px; height:100%; width:100%; background: #000; display: none; opacity:0.7} .modal_close { background: url("/images/common/close_b.png") no-repeat 50% 50%; height: 12px; width: 12px; display: inline-block; top: 25px; right: 30px; position: absolute; z-index: 5; cursor:pointer} .popup_close { background: url("/images/common/close_b.png") no-repeat 50% 50%; height: 17px; width: 17px; display: inline-block; top: 18px; right: 18px; position: absolute; z-index: 5; cursor:pointer} .popup_close.back_tool {background: transparent; z-index: -1; width:100vw; height:100vh; position: fixed; left:50%; top:50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} .popup_close.product_position {height: 12px; width: 12px; top: 12px; right: 12px; cursor:pointer; z-index: 999;} #modal_wrap {padding:60px 0 0px 80px; height:100%; overflow: hidden;} /** 인덱스팝업 **/ .modal_back {display: none; position: fixed; left: 0; top: 0; overflow: auto; background-color: rgba(0,0,0,0.4); width:100%; height:100%; } .modal_back1 {display: none; position: fixed; left: 0; top: 0; overflow: auto; background-color: rgba(0,0,0,0.4); width:100%; height:100%; } .modal_back {display: none; position: fixed; left: 0; top: 0; overflow: auto; background-color: rgba(0,0,0,0.0); width:100%; height:100%; } /*#wrap_popup-container {width: 100%; text-align: center; position:absolute; left:50%; top:50%; -ms-transform: translate(-50%, -51%); -webkit-transform: translate(-50%, -51%); -moz-transform: translate(-50%, -51%); transform: translate(-50%, -51%);} */ #wrap_popup {position:absolute; z-index:9999999;} #wrap_popup #closed:after {content:" "; display:block; clear:both; *zoom:1;} #wrap_popup #closed .check_copy {float:left; display:inline-block; color:#fff} #wrap_popup #closed { height: 40px; width: 100%; padding: 5px 10px 2px; text-align: right; position: relative; bottom: 0; left: 0; background: transparent; font-size: 16px;} #wrap_popup #closed img {height:16px; width:16px; cursor:pointer; vertical-align: middle; margin-top: -3px;} #wrap_popup #closed label {margin-right: 10px; background-image: url(/images/arr_red.png); background-repeat: no-repeat; background-position: left top;} #popModal_back.modal_back {/*background:rgba(0,0,0,0.4);*/} #pop-content img {width:100%; height:auto;} #dart_modal {position: absolute; left: 50%; top: 50%; width:90%; height: 90%; background: #FFF; display:none; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #dart_modal #modal_wrap {padding:20px 0 20px 20px; overflow-x:hidden; height:100%; width:100%;} /*** 비즈상담 팝업 ***/ #bizcontact_modal {left: 50%; top: 50%; width:1240px; height:85%; background: #FFF; display:none; padding: 0px 0 0; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: auto; position: fixed; -webkit-overflow-scrolling:touch; z-index: 440 !important;} _@media all and (min-width: 640px) and (max-width: 960px) { #bizcontact_modal { width: calc(100% - 40px); padding:0px 0 0; position: relative; overflow: hidden;} } _@media all and (min-width: 961px) and (max-width: 1218px) { #bizcontact_modal { width: calc(100% - 80px); padding:0px 0 0; position: relative; overflow: hidden;} } _@media all and (min-width: 0px) and (max-width: 639px) { .zoom_img_back_wrap {position: static;} #bizcontact_modal { width: calc(100% - 40px); padding:0px 0 0; overflow: auto; padding-bottom: 0%;} } #movie_modal {position: absolute; left: 50%; top: 50%; width:900px; height: auto; display:none; font-size: 0; line-height: 1em; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #movie_modal #modal_wrap {padding:0 0 0 0;} #movie_modal video {height:auto;} _@media (min-width: 640px) { #email_modal #modal_wrap {padding: 40px; } #email_modal {position: absolute; left: 50%; top: 50%; width:500px; height: 250px; background: #FFF; display:none; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: auto; -webkit-overflow-scrolling: touch;} } _@media all and (min-width: 0px) and (max-width: 639px) { #email_modal #modal_wrap {padding: 30px; } #email_modal {position: absolute; left: 50%; top: 50%; width:calc(100% - 60px); height: auto; padding: 35% 0 35%; background: #FFF; display:none; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: hidden; -webkit-overflow-scrolling: touch;} } /* 반응형 320 X 640 */ _@media all and (min-width: 0px) and (max-width: 640px) { #contents_body {width: 100%; margin:0px auto 40px; position: relative;} .dan_ti {height: 24px; line-height: 25px; padding-left: 14px; font-size: 14px;} #loginmodal { width: 100%; height:auto; padding: 0px; background: transparent; position: relative; top: 50%; height: 150px; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%);} .first_dan .overview_dan {height:auto;} .first_dan .overview_dan .copy {height:auto; padding: 9px 14px 30px;} .first_dan .overview_dan .copy .kor {font-size:15px;} .first_dan .overview_dan .copy .en {font-size:15px;} .first_dan .overview_dan .copy .kor br {display:none} #section_fir .overview_title {margin-left:0 !important; width:100%;} .first_dan .overview_dan {margin-bottom: 12px !important;} .main_article_area {margin-bottom:12px;} .main_article_area.first {display: flex;} .main_article_area.second {display: inline-flex; align-content: flex-start; flex-wrap: wrap;} .main_article_area.second li {flex: auto; margin-bottom:12px !important;} .main_article_area li {float:left !important; width:calc(50% - 6px); flex: 1;} ul.main_article_area li.mobile_left {margin-right:6px !important;} ul.main_article_area li.mobile_right {margin-left:6px !important;} ul.main_article_area li {background:#FFF;} .empty12 {display:block; height:12px;float:none !important; width:100% !important; background:transparent !important; flex: 0 !important;} .basic_nor .map_flag {position: static; margin-top:5px;} .basic_nor .map_flag span img {width:8% !important;} .icon_play_btn {right:0} .news_mobile {} .news_mobile ul {background:#fff; margin-bottom:12px;} .news_mobile ul:after {content:" "; display:block; clear:both; *zoom:1; background:#fff;} .news_mobile ul li {float:left !important; width:50%;} #section_sec .fir {display:none} #section_sec .sec {float:none; width:100%;} #section_sec .sec ul li {float:none; margin-right: 0px; margin-bottom: 0px;} #section_sec .first_dan {width:100%;} .first_dan .overview_dan ul li:first-child {width:100%;} #section_sec .overview_title {margin-left:0 !important; width:100%;} .news_area .news_dan {width:100%;} .certific_nor {padding: 0 14px; height: auto;} .certific_nor:after {content:" "; display:block; clear:both; *zoom:1;} .certific_nor .left {float:left; width:50%} .certific_nor .right {float:left; width:50%; margin-top:9px;} .certific_nor .title {font-size:15px;} .certific_nor li {font-size:15px;} #section_sec .main_article_area.tech p img {width:100%;} #section_sec .sec .main_article_area.production li:first-child {width:100%;} .quality_nor {height:auto;} .quality_nor:after {content:" "; display:block; clear:both; *zoom:1;} #section_sec .qc_img {float:right; width:50%;} #section_sec .qc_copy {float:left; width:50%;} .main_article_area li.manufact {margin-bottom:12px !important;} .main_article_area.production .caption_copy {display:none;} #section_sec .main_article_area.production .copy {height:auto;} #section_thi .fir {display:none;} #section_thi .overview_title {margin-left:0 !important; width:100%;} #section_thi .sec {float:none; width:100%;} #section_thi .sec ul li {float:none; margin-right: 0px; margin-bottom: 0px;} #section_thi .first_dan {width:100%;} #section_thi .sec .news_area {margin-bottom:12px;} #section_thi .popular_nor ul li {float:left; width:33.3%; padding-right:10px;} #section_thi .popular_nor ul li:last-child {padding-right:0px;} .popular_nor ul li div:first-child {width:100%; height:auto;} .popular_nor ul li div img {width:100%;} .popular_nor ul li div:last-child {width:100%; margin-left:0; margin-top: 10px;} .popular_nor ul li {border-bottom: 0;} #head_nav_after nav {width:100% !important;} #head_nav_after nav, #head_nav_after div.nav_wrap {height:80px!important;} header nav .gnb {width:100% !important; height: auto;} .mobile_picture {display:block; height: calc( 100vh - 328px );} .mobile_picture img {width:100%;} .main_menu{position:absolute; display:block; top:64px; right:40px;} .main_menu .mobile_main_topmenu_01{width:27px; background: url(../images/main_topmenu_01.svg) no-repeat center top; background-size: 100%; height:58px; display:inline-block;} .main_menu .mobile_main_topmenu_02{width:27px; background: url(../images/main_topmenu_02.svg) no-repeat center top; background-size: 100%; height:74px; display:inline-block;} .main_menu .mobile_main_topmenu_03{width:27px; background: url(../images/main_topmenu_03.svg) no-repeat center top; background-size: 100%; height:48px; display:inline-block} #header_menu .main_menu .gnbBt.m_topmenu01{position:static; width: auto; height: auto; display: inline-block; margin-right:50px; vertical-align: top;} #header_menu .main_menu .gnbBt.m_topmenu02{position:static; width: auto; height: auto; display: inline-block; margin-right:50px; vertical-align: top;} #header_menu .main_menu .gnbBt.m_topmenu03{position:static; width: auto; height: auto; display: inline-block; vertical-align: top;} header nav .oneD{float: unset !important;} input.img_reset_button{top:16px; right:82px; width: 21px; height: 21px; background-size: 21px 21px;} input.img_clear_button{top:16px; right:48px; width: 21px; height: 21px; background-size: 21px 21px; background: url('/images/canvas_01_clear.png') no-repeat 50% 50%; background-size:21px 21px;} #header_menu{z-index: 1;} .gnb_service_menu{display:none} #head_nav_after nav .pageHeaderMenu.after .topLevel{display:none;} .head_nav_after_gnb_after{height:auto !important;} #footer .foot_logo{width:15px; margin-bottom:20px;} #head_nav_after div.nav_wrap.small_wrap .small_over{display:none !important;} #head_nav_after div.nav_wrap.small_wrap .small_menu{display:none !important;} .gnbBt.mobile_small{display:block !important;} .lanquge_position{display:none !important;} } /* 320x960 */ _@media (min-width:961px) { .mobile_picture{display:none;} .main_menu{display:none} } #wrapper_menu{position:relative; width:100%; max-width:100%; overflow:hidden} #header_menu{display:none; position:absolute; top:0; left:0; width:100%; height:75px; background:transparent; z-index:12} #header_menu.new_side_menu{height:auto;} #header_menu.main{background:none; border-bottom:1px solid rgba(255,255,255,0.2)} #header_menu h1{display:block; width:100%; height:75px; text-align:center;} #header_menu h1 a{display:inline-block; vertical-align:top; margin-top:19px} .gnbBt{position:absolute; top:50%; right:15px; margin-top:-20px} .gnbBt.m_bigmenu{margin-top:0px} .gnbBt a{display:inline-block; vertical-align:top;} #header_menu .gnbArea{position:absolute; top:0; left:100%; width:100%; height:auto !important; background:#fff; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; -webkit-transform:translateZ(0); -moz-transform:translateZ(0); -ms-transform:translateZ(0); -o-transform:translateZ(0); transform:translateZ(0); z-index:9999; overflow-y:hidden;} #change_header .partner_container{overflow-y: auto; height: 100%;} #change_header .partner_container::-webkit-scrollbar{width:8px; height:50px;} #change_header .partner_container::-webkit-scrollbar-track{background:#ebebeb;} #change_header .partner_container::-webkit-scrollbar-thumb{background:#ccc;} #change_header .partner_container::-webkit-scrollbar-thumb:hover{background:#111;} #header_menu .gnbArea::-webkit-scrollbar{width:8px; height:50px;} #header_menu .gnbArea::-webkit-scrollbar-track{background:#ebebeb;} #header_menu .gnbArea::-webkit-scrollbar-thumb{background:#ccc;} #header_menu .gnbArea::-webkit-scrollbar-thumb:hover{background:#111;} #header_menu .gnbArea .top{padding:14px 15px; overflow:hidden} #header_menu .gnbArea .top .lang{position:relative; display:inline-block; font-size:14px; color:#fff; line-height:20px; padding-left:10px; margin-left:11px;} #header_menu .gnbArea .top .lang:before{content:''; position:absolute; top:50%; left:0; margin-top:-7px; width:1px; height:14px;} #header_menu .gnbArea .top .lang:first-child{padding-left:0; margin-left:0;} #header_menu .gnbArea .top .lang:first-child:before{width:0; height:0;} #header_menu .gnbArea .top .srchBt{float:right; position:relative; padding-right:13px; margin-right:32px} #header_menu .gnbArea .top .srchBt:before{content:''; position:absolute; top:50%; right:0; margin-top:-7px; width:1px; height:14px;} #header_menu .gnbArea .menuDiv{width:100%; _margin:0 20px 20px 0; _overflow-y: auto; overflow-scrolling: touch; -webkit-overflow-scrolling: touch; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;} #header_menu .gnbArea .menuDiv a{float:unset;} #header_menu .gnbArea .menuDiv .oneD{ display: inline-block; border-bottom: 0px solid #ddd; font-size: 33px; line-height: 17px; color: #000000; padding: 25px 0px 33px; font-weight: 500; letter-spacing: 0.9px;} #header_menu .gnbArea .menuDiv .oneD:active{} #header_menu .gnbArea .menuDiv .oneD:hover{} #header_menu .gnbArea .menuDiv .oneD:focus{} #header_menu .gnbArea .menuDiv .oneD.on{} #header_menu .gnbArea .menuDiv .oneD span{display:block;} #header_menu .gnbArea .menuDiv .oneD.on span{} #header_menu .gnbArea .menuDiv .twoD{display:none; padding:0px 0 15px; border-bottom:0px solid #ddd;} #header_menu .gnbArea .menuDiv .twoD.empty{height:0 !important; line-height: 0; padding: 0 !important;} #header_menu .gnbArea .menuDiv .twoD ul{padding-left:3px;} #header_menu .gnbArea .menuDiv .twoD ul li:nth-child(1) a{padding-top:0} #header_menu .gnbArea .menuDiv .twoD ul li a{ display: block; font-size: 25px; color: #242424; padding: 11px 0; text-transform: uppercase; font-weight: 300;} #header_menu .gnbArea .menuDiv .twoD ul.depth_menu > li a{display:inline-block} #header_menu .gnbArea .menuDiv .twoD ul li.depth_wrap a{padding:8px 0 5px;} #header_menu .gnbArea .menuDiv .twoD ul li.depth_wrap ul{padding-left:0;} #header_menu .gnbArea .menuDiv .twoD ul li.depth_wrap ul li a{padding:5px 0; color:#666;} #header_menu .gnbArea .menuDiv .twoD ul li.depth_wrap ul li a::before{content: "-"; padding-right: 5px;} #header_menu .gnbArea .menuDiv .twoD ul li.depth_wrap ul li:last-child a{padding-bottom:10px;} #header_menu .gnbArea .menuDiv .twoD a span.kor{font-weight:400; letter-spacing:-0.02em;font-size:14px; display:inline-block; margin-right:7px;} #header_menu .gnbArea .menuDiv .twoD.on{} #header_menu .gnbArea .menuDiv .thiD{display:none; padding:0px 0 15px; border-bottom:0px solid #ddd;} #header_menu .gnbArea .menuDiv .thiD a{display:block; font-size:14px; line-height:14px; color:#333; padding:10px 0; text-transform: uppercase; font-weight: 600; letter-spacing:0.05em;} #header_menu .gnbArea .util{padding:25px 20px 50px} #header_menu .gnbArea .util a{display:block; font-size:15px; line-height:15px; color:#555; margin-top:16px;} #header_menu .gnbArea .util a:first-child{margin-top:0} .closeBt{position:absolute; top:15px; right:15px; display:block; z-index:99999;} #header_menu .gnbArea .menuDiv .twoD.m_menu01 ul{border-left:0px solid #ffe0db;} #header_menu .gnbArea .menuDiv .twoD.m_menu01 ul.depth_menu{border-left:0px solid #ffe0db;} #header_menu .gnbArea .menuDiv .twoD.m_menu02 ul {border-left:0px solid #ffc3bd;} #header_menu .gnbArea .menuDiv .twoD.m_menu02 ul.depth_menu{border-left:0px solid #ffc3bd;} #header_menu .gnbArea .menuDiv .twoD.m_menu03 ul{border-left:0px solid #ffa298;} .m_open_lang{font-size: 11px; text-transform: uppercase; font-family: 'NunitoSans-Regular', sans-serif; font-weight: 600; letter-spacing: 0.1em;} .gnb_service_menu_mobile{margin-top:60px; padding:0 20px 10px;} .gnb_service_menu_mobile span{display:inline-block; padding-right:12px; font-size:11px; text-transform:uppercase; font-family: 'NunitoSans-Regular', sans-serif; font-weight:600; letter-spacing:0.1em;} .gnb_service_mobile_logo{left:19px; top:15px; background:url('/images/logo_header_small.svg') no-repeat 50% 50%; width:112px; height:20px; display:inline-block; position:absolute; z-index: 999;} .gnb_service_menu_mobile .seach_input_field{width:198px;} .gnb_service_menu_mobile .search_ti{padding-right:5px;} .gnb_service_menu_mobile i.icon_search{vertical-align: top; margin-top:4px;} .gnb_service_menu_mobile .seach_input_field{font-size:15px; height: 34px;} #header_menu .m_topmenu_01{ background: url(../images/header_menu_01_small_m.svg) no-repeat top left; width: auto; height: 35px; background-size: auto 100%; } #header_menu .m_topmenu_02{ background: url(../images/header_menu_02_small_m.svg) no-repeat top left; width: auto; height: 35px; background-size: auto 100%; } #header_menu .m_topmenu_03{ background: url(../images/header_menu_03_small_m.svg) no-repeat top left; width: auto; height: 35px; background-size: auto 100%; } /*** 서브시안 스타일 **/ .back_sub_rel{background:#f8f5f5 url('/images/back_sub_rel.png') repeat-x top left; margin-top:70px; text-align:center;} .sub_top{text-align:center; background:#FFF; margin-bottom:0px;} .sub_contents{text-align:center;} .sub_foot{background:#fff; text-align:center; margin-top:0px;} .sub_inquiries{position:absolute; right:-218px; top:60px; display:inline-block; z-index: 5;} .sub_language{position:fixed; left:50%; margin-left:650px; bottom:30px; display:inline-block; z-index: 5;} .display_inline_block{display:inline-block;} .position_relative{position:relative;} .position_absolute{position:absolute;} .carousel_box{position:relative;} .tech_name{position:absolute; top:-100px;} .name_link{position:absolute; top:-100px;} /* 네임태그 */ #scm_name_link{position:absolute; top:-60px;} .report_tab_wrap:after, .report_contents_wrap:after{content:" "; display:block; clear:both; *zoom:1;} .report_tab_wrap > li{float:left; border-bottom:1px solid #555; padding-bottom:20px; width:calc(50% - 10px); text-align:center;} .report_tab_wrap.news > li{padding-bottom:10px; padding-top:10px; border-top:1px solid #555; overflow:hidden; text-align:left; word-break: break-all; min-height:90px;} .report_tab_wrap.news > li a, ul.hashtag > li a{color:#ff433f; font-style:italic; margin-right:20px; font-family: 'NunitoSans-SemiBold'; line-height: 1.8em; letter-spacing: 0em;} .report_tab_wrap li:first-child{margin-right:10px;} .report_tab_wrap li:last-child{margin-left:10px;} .report_tab_wrap li img{height:38px;} .report_tab_wrap li.cosmaxbti{background:url('/images/img_cosmaxbti_logo_dimmed.png') no-repeat 50% top; background-size:auto 38px; height:58px;} .report_tab_wrap li.cosmaxbti.on{background:url('/images/img_cosmaxbti_logo.png') no-repeat 50% top; background-size:auto 38px; height:58px;} .report_tab_wrap li.cosmaxcompany{background:url('/images/img_cosmaxcompany_logo_dimmed.png') no-repeat 50% top; background-size:auto 38px; height:58px;} .report_tab_wrap li.cosmaxcompany.on{background:url('/images/img_cosmaxcompany_logo.png') no-repeat 50% top; background-size:auto 38px; height:58px;} .report_contents_wrap li{border-bottom:1px solid #555; padding:12px 0;} .report_contents_wrap .date{float:right; display:inline-block; font-size:13px; letter-spacing:0.04em;} .date_normal{display:inline-block; font-size:13px; letter-spacing:0.04em;} .report_tab_wrap.process li{text-align:left; padding-bottom: 10px;} .img_process{width:370px; height:auto !important; margin-top:20px;} .report_tab_wrap.technologies:after{content:" "; display:block; clear:both; *zoom:1;} .report_tab_wrap.technologies > li{float:left; width:232px; margin-right:47px; margin-left:0; border-bottom: 0;text-align:left; padding-bottom:0; margin-bottom:60px;} .report_tab_wrap.technologies > li:last-child{margin-right:0;} .report_tab_wrap.technologies > li img{width:100%; max-height:290px; height:auto; margin-bottom:5px;} .report_tab_wrap.technologies > li img.title_img{width:auto; max-height:auto; height:auto; margin-bottom:5px;} .report_tab_wrap.technologies > li .video_caption{margin-top: 0px;} /* 리포트탭 */ .report_tab li{display:inline-block; padding:20px; cursor:pointer; } .report_tab_con div{display:none; } .iframe_relative{position:relative;padding: 20px 0 20px 20px;} .iframe_white_block{display:inline-block;position:absolute; right:0; top:0; height:915px; width:17px;z-index:5; background:#f8f5f5 url('/images/iframe_white_block.png') repeat-y top right; } iframe.dart_data{width:754px; height:930px; overflow:hidden; margin: 0 auto;} iframe.dart_data html{overflow:hidden} /* 뉴스 */ #news_container.beauty_photo_container{margin-bottom:70px;} #news_container.beauty_photo_container:last-child{margin-bottom:0px;} #news_container .news_wrap:after{content:""; display:block; clear:both; *zoom:1;} /*#news_container .news_wrap > li{float:left; margin-right:47px; width:232px; margin-bottom:20px; background:#fff;}*/ #news_container .news_wrap > li .thumb{background-color:#FFF;} #news_container .news_wrap > li img{width:100%; height:180px;} #news_container .news_wrap.beauty_photo{margin-bottom:70px;} #news_container .news_wrap.beauty_photo:last-child{margin-bottom:0px;} #news_container .news_wrap.beauty_photo > li{margin-bottom:20px;} #news_container .news_wrap.beauty_photo > li img{width:100%; height:auto;} #news_container .news_wrap.partners_wrap > li{margin-bottom:20px; background-color:#FFF;} #news_container .news_wrap.partners_wrap > li img{width:100%; height:auto;} #news_container .news_wrap.essentials_wrap > li{background-color:transparent; margin-bottom:40px;} #news_container .news_wrap.essentials_wrap .thumb{} #news_container .news_wrap.essentials_wrap > li img{width:100%; height:auto;} #news_container .news_wrap > li:nth-child(3n){margin-right:0;} .report_contents_wrap li.news_navigator{text-align:center; border-bottom: 0px solid #555;} .news_navigator{text-align:center;} .news_navigator.news_navigator_list{text-align:left;} .news_navigator a{font-size:16px; margin:0 10px;} .news_navigator a.active{color:#ff433f; font-family:'NunitoSans-bold', 'notokr-medium', sans-serif;} .news_navigator img{vertical-align:middle; margin-top:-2px;} .news_contetns_navigator{border-top: 0px solid #555; padding-top: 30px;} .beauty_photo_name{display:inline-block;margin-right:20px;} /** 파트너테이블 **/ #news_container .partners_wrap.partners_list:after{content:" "; display:block; clear:both; *zoom:1;} #news_container .partners_wrap.partners_list{width:calc(100% + 30px); margin-right:-15px; margin-left:-15px; letter-spacing: 0;} #news_container .partners_wrap.partners_list > li{width:25%; padding-right:15px; padding-left:15px; margin:0; background:transparent; margin-bottom:30px;} #news_contents_container{} #news_contents_container .news_wrap.news_contents{border-bottom:0px solid #555; padding-bottom:20px; margin-bottom:30px;} #news_contents_container .news_wrap.news_contents.press_head{padding-top:0px;} #news_contents_container .news_wrap.news_contents .ti{color:#000; font-size:22px; font-family: 'NunitoSans-bold', 'notokr-medium', sans-serif;} #news_contents_container .news_contents_body{padding-bottom:0px;} #news_contents_container .news_contents_body img{/*width:100% !important;*/ height:auto !important; margin-bottom:20px; max-width:100%;} #news_contents_container .news_contents_body strong{font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; letter-spacing: -0.01em; font-weight: normal !important;} #news_contents_container .news_contents_body p, #news_contents_container .news_contents_body font, #news_contents_container .news_contents_body span{font-family: 'NunitoSans-Regular', 'notokr-regular', sans-serif !important; font-size: 18px !important;} .news_photo{margin:10px 0 30px;} .attach_wrap:after{content:" "; display:block; clear:both; *zoom:1;} .attach_wrap{padding:30px 0; border-top: 1px solid #555;} .attach_wrap > div{float:left;} .attach_wrap > div:first-child{padding-right:10px;} .tag_span_wrap{line-height:1em; margin-bottom:10px;} a.tag_none{color:#111 !important; margin-right:5px; font-family: 'NunitoSans-Bold','notokr-Medium', sans-serif; line-height: 1.4em; letter-spacing: 0em; font-size:15px;} .tag_none{color:#111 !important; margin-right:5px; font-family: 'NunitoSans-Bold','notokr-Medium', sans-serif; line-height: 1.4em; letter-spacing: 0em;} .tag_none.tag_none_title{font-size:22px; margin-bottom:20px;} /* 공지사항 */ #notice_container .notice_wrap{margin-bottom:40px;} #notice_container .notice_wrap .notice_list{} #notice_container .notice_list:after{content:""; display:block; clear:both; *zoom:1;} #notice_container .notice_list:first-child{border-top:0px solid #555;} #notice_container .notice_list:last-child{border: 0;} #notice_container .notice_list{border-bottom:1px solid #555; padding:12px 0;} #notice_container .notice_list span{display:inline-block} /* 뷰티에센셜 5단 */ .beauty_essentials_mainimg{margin-bottom:60px} .beauty_essentials_mainimg .essen_img, .essen_img{margin-bottom:10px} .str_summary{ overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.4em; height: 2.8em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #most_popular_container .most_wrap:after{content:" "; display:block; clear:both; *zoom:1;} #most_popular_container .most_wrap > li{float:left; margin-right:47px; width:232px;} #most_popular_container .most_wrap > li .thumb{position:relative;} #most_popular_container .most_wrap > li .thumb img{width:100%; max-height:290px;} #most_popular_container .most_wrap > li .num{display:inline-block; color:#ff433f; font-size:36px; font-family: 'NunitoSans-Bold'; position:absolute; left:50%; top:50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #most_popular_container .most_wrap > li:nth-child(5n){margin-right:0;} .howto_person_wrap{width:50%; background-color:#FFF; position:relative; min-height:150px;} .howto_person_wrap img{width:150px; height:150px; position:absolute; top:0; left:0;} .person_info{width:calc(100% - 170px); margin-left:170px; padding-top: 20px;} .interview_detail_view p{margin-top:30px;} .interview_detail_view img{width:100%; height:auto;} .skin_wrap img.main_img, .skin_list > p img{margin-bottom:20px; border-bottom: 0px solid #ff433f;} .skin_wrap_ti{line-height:1.3em; text-transform:uppercase !important; margin-bottom:15px; font-family: 'NunitoSans-Bold', 'notokr-medium', sans-serif; letter-spacing:0.02em;} .skin_wrap .ti_wrap span{display:block;} .skin_wrap_ti > img{width:auto !important; height:auto;} /* 단 섹션 칼라 */ /* 제품소개 */ .beauty_tech_list:after{content:""; display:block; clear:both; *zoom:1;} .beauty_tech_list li{float:left;} /* 사업문의 */ body.beauty_inquiries {background:url('/images/back_inquiries_01.jpg') no-repeat 50% 50%; background-size:cover;} .beauty_inquiries #fir_section_color {height: calc( 100vh - 60px); background-color: transparent;} .beauty_inquiries #fir_section_color.last_section {height: 100%; background-color: transparent;} .beauty_inquiries #section_desk_wrap {height:100%; position:relative;} .beauty_inquiries #section_desk_wrap .contents_body_sec {height:100%; position:relative;} .beauty_inquiries .tabcontent_container {padding-right: 174px; position: absolute; left: 50%; top: 45%; width: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .beauty_inquiries .inquiries_foot { position:absolute; bottom:50px; width:100%; text-align:center; padding:0 ;font-family: 'NunitoSans-Regular', 'notokr-medium', sans-serif; letter-spacing:0.02em; text-transform:uppercase !important; font-size:16px;} .beauty_inquiries .inquiries_foot .line {border-bottom:1px solid #555;} .beauty_inquiries_wrap {text-align:center; position: absolute; left: 50%; top: 45%; width: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ul.beauty_inquiries_2step_list:after {content:" "; display:block; clear:both; *zoom:1;} ul.beauty_inquiries_2step_list li {float:left; width:295px; margin-right:20px;} ul.beauty_inquiries_2step_list li img {width:100%; } ul.beauty_inquiries_2step_list li .back_pink {background:#ff595a} ul.beauty_inquiries_2step_list li:last-child {margin-right:0px;} ul.beauty_inquiries_2step_list li p {text-align:center; background:#fff; padding:13px 0; font-weight:bold;} ul.beauty_inquiries_2step_list li a:hover {opacity:0.5} ul.beauty_inquiries_2step_list.flag {margin-top:100px;} ul.beauty_inquiries_2step_list.flag li img {width:auto; margin:0 5px;} ul.beauty_inquiries_2step_list.flag li a:hover {opacity:1} ul.beauty_inquiries_2step_list.flag li p {margin-top:10px;} ul.beauty_inquiries_2step_list.flag li p:hover {background:#ff595a; } ul.beauty_inquiries_3step_list:after {content:" "; display:block; clear:both; *zoom:1;} ul.beauty_inquiries_3step_list > li {float:left; width:400px; margin-right:20px;} ul.beauty_inquiries_3step_list > li {padding:0 50px;} ul.beauty_inquiries_3step_list li:last-child {margin-right:0px;} ul.beauty_inquiries_3step_list ul.contents > li {text-align:center; text-transform:uppercase} ul.beauty_inquiries_3step_list ul.contents .ti {font-size:60px; font-family: 'NunitoSans-Bold'; border-bottom:1px solid #555; padding-bottom:30px; line-height:1em; letter-spacing:0.04em;} ul.beauty_inquiries_3step_list ul.contents .medium {font-size:20px; font-family: 'NunitoSans-Extrabold'; border-bottom:1px solid #555; padding:20px 0; font-style: italic; margin-bottom:20px; letter-spacing:0.04em;} /* 제품소개 */ .beauty_product_info_wrap {position:relative; margin-bottom:60px} .beauty_product_info_wrap.sec {position:relative; height:auto;margin-bottom:0px} .beauty_product_info_wrap .back_beauty_product img {width:100%; height:auto;} /* 건강식품 */ .beauty_product_info_wrap.health {position:relative; margin-bottom:60px} .beauty_product_info_wrap.health .back_beauty_product img {width:100%; height:auto;} /******** 프로턱트 원들 ********/ .fade_product {position:absolute;display:inline-block; text-align:center; color:#fff; border-radius:50%; display:table; cursor:pointer; display: block; -webkit-animation: fadein 2s; -moz-animation: fadein 2s; -ms-animation: fadein 2s; -o-animation: fadein 2s; animation: fadein 2s; animation-fill-mode: forwards; animation-name: springy-text; opacity: 0;} .fade_product p {text-align:center; vertical-align:middle; line-height:1.4em; cursor: default; z-index: 1;} .fade_product p img {width:100%; height:auto;cursor: pointer;} .fade_product.skinbasics {bottom:70%; right:73.291%; width:17.468%; height:17.468%; animation-delay: 0s;} .fade_product.sheetmask {bottom:77.468%; right:51.646%; width:17.468%; height:17.468%; animation-delay: 1s;} .fade_product.Hair {bottom:70.886%; right:24.051%; width:14.430%; height:14.430%; animation-delay: 1.5s;} .fade_product.Body {bottom:70.886%; right:5.823%; width:14.430%; height:14.430%; animation-delay: 0.5s;} .fade_product.Cleansing {bottom:56.456%; right:60.253%; width:14.430%; height:14.430%; animation-delay: 1s;} .fade_product.Suncare {bottom:42.9%; right:42.632%; width:14.430%; height:14.430%; animation-delay: 0.5s;} .fade_product.SkinMakeup {bottom:35.494%; right:71.899%; width:17.468%; height:17.468%; animation-delay: 0.5s;} .fade_product.cushion {bottom:32.709%; right:57.975%; width:13.924%; height:13.924%; animation-delay: 1.2s;} .fade_product.EyeMakeup {bottom:5.380%; right:71.139%; width:17.468%; height:17.468%; animation-delay: 0.5s;} .fade_product.LipMakeup {bottom:10.949%; right:53.924%; width:17.468%; height:17.468%; animation-delay: 1.5s;} .fade_product.Nail {bottom:10.418%; right:23.038%; width:11.392%; height:11.392%; animation-delay: 2s;} .fade_product.Fragrance {bottom:20.2%; right:5.823%; width:14.430%; height:14.430%; animation-delay: 1s;} .fade_product.BabyChild {top:0px; left:5%; width:17.468%; height:17.468%; animation-delay: 0s;} .fade_product.Herbal {top:0px;left:50%; width:17.468%; height:17.468%; animation-delay: 0.5s; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } .fade_product.Cosmeceutical {top:0px; right:5%; width:17.468%; height:17.468%; animation-delay: 1s;} /** 건강식품 원들 **/ .fade_product.softgel {bottom:54.79%; right:55.70%; width:17.72%; height:17.72%; animation-delay: 0s;} .fade_product.tablet {bottom:54.79%; right:25.57%; width:17.72%; height:17.72%; animation-delay: 1s;} .fade_product.liguid {bottom:26.30%; right:70.89%; width:17.468%; height:17.72%; animation-delay: 1.5s;} .fade_product.jelly {bottom:26.30%; right:40.63%; width:17.72%; height:17.72%; animation-delay: 2s;} .fade_product.powder {bottom:26.30%; right:10.38%; width:17.72%; height:17.72%; animation-delay: 2.5s;} @keyframes springy-text { 0% { opacity: 0; } 100% { opacity: 1; } } /** 툴팁 모바일 **/ .tooltip_product_M .tooltip-content_product {position:relative; display:none; width: 230px; background-color: #fff; color:#111; position: absolute; padding:20px; text-align:left !important; word-break:keep-all; z-index:100;} .tooltip_product_M .tooltip-content_product.tooltip_skinbasics {bottom:-50%; left:0px;} .tooltip_product_M .tooltip-content_product.tooltip_sheetmask {bottom:-100%; left: -130%;} .tooltip_product_M .tooltip-content_product.tooltip_Hair {bottom:-160%; right:0;} .tooltip_product_M .tooltip-content_product.tooltip_Body {bottom:-220%; right:0;} .tooltip_product_M .tooltip-content_product.tooltip_Cleansing {bottom:-160%; left: -120%;} .tooltip_product_M .tooltip-content_product.tooltip_Suncare {top:0; right:-195%;} .tooltip_product_M .tooltip-content_product.tooltip_SkinMakeup {top:0; left: 0;} .tooltip_product_M .tooltip-content_product.tooltip_cushion {top:0; right:-200%;} .tooltip_product_M .tooltip-content_product.tooltip_LipMakeup {top:0px; right:-160%;} .tooltip_product_M .tooltip-content_product.tooltip_Fragrance {bottom:-75%; right:0px;} .tooltip_product_M .tooltip-content_product.tooltip_EyeMakeup {top:0px; left:0;} .tooltip_product_M .tooltip-content_product.tooltip_Nail {bottom:-70%; right:0px;} .tooltip_product_M .tooltip-content_product.tooltip_BabyChild {bottom:-55%; left:0;} .tooltip_product_M .tooltip-content_product.tooltip_Herbal {bottom:-35%; left:-120px;} .tooltip_product_M .tooltip-content_product.tooltip_Cosmeceutical {top:-75%; right:0;} /** 툴팁 피씨 **/ .tooltip_product .tooltip-content_product {position:relative; display:none; width: 230px; background-color: #fff; color:#111; position: absolute; padding:20px; text-align:left !important; word-break:keep-all; z-index:100;} .tooltip_product .tooltip-content_product.tooltip_skinbasics {bottom:-50%; left:0px;} .tooltip_product .tooltip-content_product.tooltip_sheetmask {bottom:-100%; left:0;} .tooltip_product .tooltip-content_product.tooltip_Hair {bottom:-160%; left:0;} .tooltip_product .tooltip-content_product.tooltip_Body {bottom:-220%; right:0;} .tooltip_product .tooltip-content_product.tooltip_Cleansing {bottom:-160%; left:0;} .tooltip_product .tooltip-content_product.tooltip_Suncare {top:0; right:-195%;} .tooltip_product .tooltip-content_product.tooltip_SkinMakeup {top:0; right:-155%;} .tooltip_product .tooltip-content_product.tooltip_cushion {top:0; right:-200%;} .tooltip_product .tooltip-content_product.tooltip_LipMakeup {top:0px; right:-160%;} .tooltip_product .tooltip-content_product.tooltip_Fragrance {bottom:-75%; right:0px;} .tooltip_product .tooltip-content_product.tooltip_EyeMakeup {top:0px; right:-160%;} .tooltip_product .tooltip-content_product.tooltip_Nail {bottom:-70%; right:0px;} .tooltip_product .tooltip-content_product.tooltip_BabyChild {bottom:-55%; left:0;} .tooltip_product .tooltip-content_product.tooltip_Herbal {bottom:-35%; left:0;} .tooltip_product .tooltip-content_product.tooltip_Cosmeceutical {top:-75%; right:0;} /* 툴팁 건강식품 */ .tooltip_product .tooltip-content_product.tooltip_softgel {bottom:-50%; left:0px;} .tooltip_product .tooltip-content_product.tooltip_tablet {bottom:-50%; left:0px;} .tooltip_product .tooltip-content_product.tooltip_liguid {bottom:-50%; left:0px;} .tooltip_product .tooltip-content_product.tooltip_jelly {bottom:-50%; left:0px;} .tooltip_product .tooltip-content_product.tooltip_powder {bottom:-50%; left:0px;} /* 툴팁 건강식품 모바일*/ .tooltip_product_M .tooltip-content_product.tooltip_softgel {bottom:-50%; left:0px;} .tooltip_product_M .tooltip-content_product.tooltip_tablet {bottom:-50%; right:0px;} .tooltip_product_M .tooltip-content_product.tooltip_liguid {bottom:-50%; left:0px;} .tooltip_product_M .tooltip-content_product.tooltip_jelly {bottom:-50%; right:-50px;} .tooltip_product_M .tooltip-content_product.tooltip_powder {bottom:-50%; right:0px;} .search_result_container {border-top:1px solid #3c3c3c; margin-top:60px; padding-top:40px;} .search_result_container:nth-child(2) {margin-top:10px;} .search_result_container > .headline {margin-bottom: 40px; } .search_result_wrap {margin-bottom:30px;} .search_result_wrap:last-child {/*margin-bottom:0px;*/} .search_result_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .search_result_wrap .fir, .search_result_wrap .sec {float:left} .search_result_wrap .fir {width:110px; height:110px; background-position: 50% 50%; background-size: cover;} .search_result_wrap .sec {width:calc( 100% - 110px); padding-left:20px;} .search_result_wrap.noimg .sec {width:100%} .search_result_wrap .p font {font-family: 'NunitoSans-Regular', 'notokr-regular', sans-serif;} /** 190528 **/ #new_layout_container:after {content:" "; display:block; clear:both; *zoom:1;} #new_layout_container {margin-bottom:28px; /*background: #fff;*/} #new_layout_container .layout_dan {float:left;} #new_layout_container .layout_dan img {width:100%; /*height:300px;*/height:auto;} #new_layout_container .layout_dan .date_num {text-align: center; position:absolute; top:57%; left:50%; width: 100%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%);} #new_layout_container .layout_dan .date_num p {display:inline-block; margin: 0 5px; width: 26%;} #new_layout_container .layout_dan .date_num img {width:100%; height:auto;} #new_layout_container .layout_dan.fir01 {width:65.9091%;}/*870px*/ #new_layout_container .layout_margin {margin-right:2.2727%;} #new_layout_container .layout_dan.sec02 {width:31.8182%;}/*420px*/ #new_layout_container .layout_dan.thi03 {width:31.8182%;} #new_layout_container .layout_dan .zoom_img {/*height:300px;*/ background:#fff;} .new_lay_ti {font-size:30px; font-family: 'NunitoSans-Bold'; padding:30px 20px 15px 20px;} .new_lay_copy {font-size:20px;padding:0 20px 30px 20px; word-break:keep-all;word-wrap:break-word; } #new_layout_container.last_news .back_white {position:relative; background:#fff;} #new_layout_container.last_news .back_white img.trans_date_back {overflow: hidden; width: 100%; height: auto;} #new_layout_container.last_news .inner_date {position:absolute; width:100%;top:0; left:0;} .new_lay_ti_wrap.news_lay{background:#fff; transition:all .2s ease .2s; } .new_lay_ti_wrap.news_lay:hover {background:#ff7b7b; transition:all .2s ease .2s; } a.new_lay_href > ul {background:#fff; transition:all .2s ease .2s; } a.new_lay_href:hover > ul {background:#ffcfc9; transition-delay:0s} a.new_lay_href.dan02_href:hover > ul {background:#ffa298; transition-delay:0s} a.new_lay_href.dan03_href:hover > ul {background:#ff7b7b; transition-delay:0s} .dan01_color {background:#ffcfc9;} .dan02_color {background:#ffa298;} .dan03_color {background:#ff7b7b;} #footer {background:#fff;} body#index_body #footer {background:#f5f5f5;} /** 고객문의 **/ table.question_table {} table.question_table .table-colwidth-l {width:10%; min-width:130px;} table.question_table .table-colwidth-r {width:90%;} table.question_table th {text-align:left; font-weight:normal; min-width: 84px;} table.question_table th, table.question_table td {padding:12px 0;} table.question_table select {border: 1px solid #e4e4e4; background-color:#fff !important; height: 50px; padding:0 10px; background: url('/images/select_arrow.png') no-repeat 98% 55%; background-size: 14px;} table.question_table input {border: 1px solid #e4e4e4; background-color:#fff; height: 50px; padding:0 10px;} table.question_table textarea {border: 1px solid #e4e4e4; background-color:#fff !important; padding:10px; outline-style:none; min-height: 300px;} table.question_table .phone select, table.question_table .phone input {width:30%;} table.question_table .file-attach input {border:0; background:transparent; padding: 8px 0px; vertical-align: middle; width:auto;} table.question_table .ag_info_ti {margin-top:30px;} table.question_table .ag_info {border: 1px solid #e4e4e4; background-color:#fff} table.question_table .ag_check {margin-top:40px;} table.question_table input[type=checkbox]+label {padding-left:26px;} table.question_table .guide-txt {font-size:14px;} .quarters03_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .quarters03_wrap > ul > li {float:left; width:33.3333%;} .quarters03_wrap > ul > li.two_thirds_wrap { width:66.6667%;} .quarters03_wrap > ul > li.one_thirds_wrap { width:100%;} .quarters03_box > ul > li {float:left;} .quarters03_box > ul > li:nth-child(1) {padding-right:24px; width:40%;} .quarters03_box > ul > li:nth-child(2) { text-align:center; width:20%;} .quarters03_box > ul > li:nth-child(3) {padding-left:24px; text-align:right; width:40%;} /** 이전후컨텐츠 **/ #contents_body.sub_page #sub_contents_container.pre_next_contents {padding:80px 0 80px;} #contents_body.sub_page #sub_contents_container.pre_next_contents strong {line-height:1.25em; word-break: keep-all; } .pre_contents {padding-left: 35px; position: relative;} .next_contents {padding-right: 35px; position: relative;} .list_contents {padding-top: 32px; position: relative;} .pre_contents:before {content: " "; position: absolute; left:0; top:50%; background: url(/images/btn_con_pre.svg) no-repeat left 50%; display: inline-block; width: 20px; height: 52px; vertical-align: middle; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); -moz-transition:all .1s ease .1s; -o-transition:all .1s ease .1s; -ms-transition:all .1s ease .1s; -webkit-transition:all .1s ease .1s; transition:all .1s ease .1s;} .next_contents:after {content: " "; position: absolute; right:0; top:50%; background: url(/images/btn_con_next.svg) no-repeat right 50%; display: inline-block; width: 20px; height: 52px; vertical-align: middle; -ms-transform: translate(0, -50%); -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); transform: translate(0, -50%); -moz-transition:all .1s ease .1s; -o-transition:all .1s ease .1s; -ms-transition:all .1s ease .1s; -webkit-transition:all .1s ease .1s; transition:all .1s ease .1s;} .list_contents:before {content: " "; position: absolute; left:50%; top:0; background: url(/images/btn_con_list.svg) no-repeat 50% top; display: inline-block; width: 52px; height: 20px; vertical-align: middle; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate-50%, 0); -moz-transition:all .1s ease .1s; -o-transition:all .1s ease .1s; -ms-transition:all .1s ease .1s; -webkit-transition:all .1s ease .1s; transition:all .1s ease .1s;} .pre_contents .sti, .next_contents .sti {font-size:16px;line-height: 2em;} .pre_contents .link_ti, .next_contents .link_ti, .list_contents .link_ti {font-size:20px; letter-spacing: 0em;line-height: 1em;} a.pre_contents_link:hover > .pre_contents:before {background: url(/images/btn_con_pre_over.svg) no-repeat left 50%;} a.next_contents_link:hover > .next_contents:after {background: url(/images/btn_con_next_over.svg) no-repeat left 50%;} a.list_contents_link:hover > .list_contents:before {background: url(/images/btn_con_list_over.svg) no-repeat 50% top;} .info_list.philosophy {padding-top: 12%;} .contents_header_title > p {margin-bottom:25px} .contents_header_title > p:last-child {margin-bottom:0px} .quarters03_wrap_center {width:66.6667%; margin:0 auto;} /** half 나누기 **/ ul.half_wrap:after {content:" "; display:block; clear:both; *zoom:1;} ul.half_wrap {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); font-size: 0;letter-spacing: 0;} ul.half_wrap > li {float:unset; display:inline-block; vertical-align:top; width: 50%; padding-left: 20px; padding-right: 20px; margin-bottom:40px; font-size: 18px;} ul.half_wrap > li img {width:100%; height:auto;} #news_container ul.news_wrap {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); font-size: 0; letter-spacing: 0;} #news_container ul.news_wrap > li {float:unset; display:inline-block; vertical-align:top; width: 25%; padding-left: 20px; padding-right: 20px; margin-bottom:40px; font-size: 18px;} #news_container ul.news_wrap > li .thumb {width:100%; height:180px; background-repeat:no-repeat; background-size:cover; background-position: 50% 50%;} #news_container ul.news_wrap > li .thumb img {width:100%;height:100%;} #news_container .news_wrap .news_list_box {padding: 15px 0;} .ir_iframe_menu {position:absolute; right:0; top:5px;} .ir_iframe_cosmaxbti {display:inline-block; background: url('/images/img_cosmaxbti_logo.png') no-repeat 50% top; background-size:auto 38px; height:58px; width: 100%;} .ir_iframe_cosmax {display:inline-block; background: url('/images/img_cosmaxcompany_logo.png') no-repeat 50% top; background-size:auto 38px; height:58px; width: 100%;} .ir_menu ul > li {display:inline-block; width:49.8%;} #index_video_container.sub_topimg {background-repeat:no-repeat; background-size:cover; background-position:50% 50%;} #current_location_wrap .current_location {width:1218px; margin:0 auto;} .current_location:after {content:" "; display:block; clear:both; *zoom:1;} .current_location {text-align:right; font-size:13px; color:#555; padding-top:8px; padding-bottom:5px; letter-spacing:0.03em;} .current_location span {display:inline-block; padding-left: 12px;} .current_location span.current_line {border-bottom:1px solid #666;} .current_location span:after {content: " "; background:url('/images/bullet_location.png') no-repeat right 50%; display: inline-block; width:7px; height:13px; margin-top: -4px; vertical-align: middle; padding-left: 12px;} .current_location span.division a {text-transform:uppercase !important;} .current_location span.division:after {content: " "; background:url('/images/bullet_location_parti.png') no-repeat right 50%; display: inline-block; width:1px; height:13px; margin-top: -4px; vertical-align: middle; padding-left: 12px;} .current_location span.division:last-child:after {content: " "; display:none; padding-left: 0px;} .current_location span a:hover {color:#ea0029} .current_location span.back {padding-left:0;} .current_location span.back:before {content: " "; background:url('/images/bullet_back.png') no-repeat left 50%; display: inline-block; width:7px; height:13px; margin-top: -4px; vertical-align: middle; padding-right: 12px;} .current_location span.back:after {display:none;} /** 메뉴 **/ .menuDiv.menu_header .oneD {width:450px;height:20px;background-repeat:no-repeat; background-position:left 50%;} _@media (min-width: 0px) and (max-width: 420px){ #header_menu .gnbArea .menuDiv .oneD{padding:20px 0px 20px;} .menuDiv.menu_header .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_01:hover > .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_02:hover > .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_03:hover > .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_04:hover > .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_05:hover > .oneD{width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_06:hover > .oneD {width:95%; height:15px; background-size:90%;} .menuDiv.menu_header .menu_contact:hover > .oneD{width:95%; height:15px; background-size:90%;} } /** 인트로 **/ .intro_logo {position:absolute; left:50%; top:50%; background:url('/images/intro_logo.png') no-repeat 50% 50%; background-size:100%; /*width: 300px; height:433px;*/width: 160px; height:231px; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); animation-duration: 2.5s; animation-name: fadein; animation-delay: 0.7s; animation-fill-mode:backwards;} .philosophy_apple_copy {padding-top:65px;} .accord_wrap.faq ul li.mb {border-top:0 !important} .title.people_question {display:none;} #mute.btn {width: 30px; height: 30px; position: absolute; right:20px;} .langu {display:none;} .relation_box ul li:nth-child(2) p:nth-child(2) {overflow:hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.6em; height: 4.8em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .cosmax_ci_container .different .carousel_box {margin-bottom: 60px;} .cosmax_ci_container .different .carousel_box:last-child {margin-bottom: 0px;} .certi_status_ti {padding-top:10px;} .index_height_set {background: #fff;} .skin_title {font-family:'NunitoSans-bold', 'notokr-medium', sans-serif; color:#000; font-weight: normal; display:block;} body.h_hidden {overflow: hidden;} .search_result_container:after {content:" "; display:block; clear:both; *zoom:1;} .search_result_container {font-size:0;} .search_result_wrap {width:50%; /*float:left;*/ display:inline-block; vertical-align:top; *display:inline;*zoom:1; margin-bottom: 60px;} .search_result_wrap p {font-size: 18px;} .search_result_container {margin-top: 15px;} .search_result_wrap .sec p:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: normal; line-height: 1.8em; height: 3.6em; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search_result_wrap:nth-child(odd) {padding-left:20px;} .search_result_wrap:nth-child(even) {padding-right:20px;} .vod_back {background-size:cover; width: 100%; height: 100%; background-repeat:no-repeat; background-position:50% 50%;} .videoWrapper { padding:0; text-align:center; position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videoWrapper iframe { position: absolute; top: 0; /*margin-left: -45%;*/ width: 100%; height: 100%; } .videoWrapper .movie { position: absolute; top: 0; margin-left: -45%; width: 100%; height: 100%; } .side_lang span {display:inline-block; font-size:18px; padding-right:15px; padding-top:20px; font-family: 'NunitoSans-SemiBold';} /** 안정성 **/ .source_small {font-size:10px; letter-spacing: 0.03em; line-height:1em; text-align:right; color:#777; padding-top:15px; list-style-type: none !important;} .source_small.width70 {width: 70%; margin:0 auto;} _@media (max-width: 856px) { .source_small.width70 {width: 100%;} } .strong_safety {font-size:19px} select.safety_select option:first-child {display: none;} .dropmenu_submenu {} .dropmenu_submenu li a {} .dropmenu_submenu li a:hover, .dropmenu ul li:hover a {} .dropmenu_submenu li ul {display:none; height:auto; border:0px; position:absolute; width:auto; z-index:200; margin-left: -25px; border:1px solid #eeeeee;} .dropmenu_submenu li:hover ul {display:block;} .dropmenu_submenu li li {background: #fff; display:block; float:none; margin:0px; padding:0px; width:auto;} .dropmenu_submenu li li:first-child {padding-top:5px;} .dropmenu_submenu li li:last-child {padding-bottom:5px;} .dropmenu_submenu li:hover li a {background:none;} .dropmenu_submenu li ul a {display:block; padding: 10px 12px; text-align:left; line-height: 1em; font-family:'NunitoSans-Regular', 'notokr-medium', sans-serif; font-size:14px; color:#000;} .dropmenu_submenu li ul a:hover, .dropmenu li ul li:hover a {background:#ea0029; border:0px; color:#ffffff !important;} .dropmenu_submenu p {clear:left;} _@media all and (min-width: 897px) and (max-width: 1280px) { .dropmenu_submenu li ul {/*right: 0;*/} .dropmenu_submenu.list_up li ul {right: auto;} } .dropmenu_submenu.list_up {font-size:0;} .dropmenu_submenu.list_up li {position:relative; float:none; float:unset; display:inline-block; vertical-align:top; *display:inline;*zoom:1} .dropmenu_submenu.list_up li ul {left:50%; margin-left: auto; width:120%; -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%);} .dropmenu_submenu.list_up li li:first-child {padding-top:0px;} .dropmenu_submenu.list_up li li:last-child {padding-bottom:0px;} .dropmenu_submenu.list_up li ul a {text-align:center; padding: 10px 10px 9px; line-height:1.4em;} .dropmenu_submenu.list_up li ul li {width:100%;} .current_location ul.current_menu > li {display: inline-block; padding-left: 12px; text-transform:uppercase} .current_location ul.current_menu > li:after {content: " "; background: url(/images/bullet_location.png) no-repeat right 50%; display: inline-block; width: 7px; height: 13px; margin-top: -4px; vertical-align: middle; padding-left: 12px;} .current_location ul.current_menu > li.none:after {background: none; width: 0; padding-left: 0;} .current_location ul.current_menu > li.division:after {content: " "; background: url(/images/bullet_location_parti.png) no-repeat right 50%; display: inline-block; width: 1px; height: 13px; margin-top: -4px; vertical-align: middle; padding-left: 12px;} .current_location ul.current_menu > li.division:last-child:after {content: " "; display:none; padding-left: 0px;} .current_location ul.current_menu > li a:hover {color:#ea0029} .safety_menu_container {/*padding-right:25px; padding-left:25px;*/} .safety_menu_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .safety_menu_wrap > li {float:left; width:25%; text-align:center; padding: 0 25px;} .safety_menu_wrap > li .safety_menu_box {position:relative; display:inline-block; width:100%; height:auto; padding-bottom:100%; border-radius:50%; border:2px solid #000; background-color:#transparent; -moz-transition:all .1s ease .1s; -o-transition:all .2s ease .1s; -ms-transition:all .2s ease .1s; -webkit-transition:all .2s ease .1s; transition:all .2s ease .1s;} .safety_menu_wrap > li .safety_menu_box:hover {background-color:#ea0029; border:2px solid #ea0029; } .safety_menu_wrap > li .safety_menu_box:hover > .safety_menu_copy {color:#fff;} .safety_menu_wrap > li .safety_menu_box:hover .icon_plus_new {background: url('/images/foot_ico_plus_W.png') no-repeat top;} .safety_menu_wrap > li .safety_menu_copy {width:100%; height:auto;position:absolute; top:50%; left:50%; -ms-transform: translate(-50%, -45%); -webkit-transform: translate(-50%, -45%); -moz-transform: translate(-50%, -45%); transform: translate(-50%, -45%);} .safety_menu_wrap .safety_menu_copy {font-family:'NunitoSans-Bold', 'notokr-bold', sans-serif; font-size:22px; line-height: 1.3em; -moz-transition:all .1s ease .1s; -o-transition:all .2s ease .1s; -ms-transition:all .2s ease .1s; -webkit-transition:all .2s ease .1s; transition:all .2s ease .1s;} .icon_plus_new {display:inline-block; background: url('/images/foot_ico_plus.png') no-repeat top; width: 13px; height: 13px; margin-right:10px; -moz-transition:all .1s ease .1s; -o-transition:all .2s ease .1s; -ms-transition:all .2s ease .1s; -webkit-transition:all .2s ease .1s; transition:all .2s ease .1s;} .safety_02dan:after {content:" "; display:block; clear:both; *zoom:1;} .safety_02dan > li {float:left; width:50%; text-align:center; padding-left:20px; padding-right:20px; word-break:keep-all;} .safety_02dan.none_padding > li {padding-left:0px; padding-right:0px; } .safety_02dan.none_padding > li img {width:100%; height:auto;} .safety_02dan.bad_cosmetics > li:first-child {padding-right:15px;} .safety_02dan.bad_cosmetics > li:last-child {padding-left: 15px;} .safety_02dan.bad_cosmetics > li p {/*padding-bottom:8px;*/} .safety_05dan:after {content:" "; display:block; clear:both; *zoom:1;} .safety_05dan > li {/*float:left;*/ width:20%; text-align:center; padding-left:10px; padding-right:10px; word-break:keep-all;} .safety_05dan.rawmaterial > li {font-size:16px; line-height: 1.7em;} .safety_05dan.rawmaterial > li img {width:60%; height:auto; margin-bottom:20px;} .safety_05dan.rawmaterial.exam > li:last-child {width:40%; text-align:left; padding-left: 50px; padding-right: 0px;} ul.safety_05dan {font-size:0} ul.safety_05dan > li {display:inline-block; vertical-align:top; *display:inline;*zoom:1} .safety_04dan:after {content:" "; display:block; clear:both; *zoom:1;} .safety_04dan > li {float:left; width:25%; text-align:left; padding:25px 15px 20px 20px; word-break:keep-all; margin:0 5px 10px; width:calc(25% - 10px);} .safety_04dan > li {font-size:16px; line-height: 1.7em;} .safety_04dan > li img {width:100%; height:auto; margin-top: -10px;} .safety_04dan.check_menu {margin-right:-5px; margin-left:-5px;} .safety_04dan.check_menu > li {background-color:#eeeeee;} .safety_04dan.check_menu > li > a div {float:left;} .safety_04dan.check_menu > li > a div:first-child {width:calc(100% - 23%); min-height: 86px; overflow: hidden;} .safety_04dan.check_menu > li > a div:last-child {width:23%; float:right;} .safety_04dan.check_menu .icon_plus_new {margin-top: -4px; vertical-align: middle;} .check_menu_ti {vertical-align:middle; margin-right:10px; } .safety_04dan.list_up > li {width:8.33%; margin:0;} _@media all and (min-width: 897px) and (max-width:1000px) { .safety_04dan.list_up > li {width:16.66%;} } _@media all and (min-width: 640px) and (max-width:896px) { .safety_04dan.list_up > li {width:25%;} } .strong_ti { font-family:'NunitoSans-Bold', 'notokr-bold', sans-serif; font-size:18px; padding-bottom:5px;} .question_wrap ul:after {content:" "; display:block; clear:both; *zoom:1;} .question_wrap ul li {float:left; } .question_wrap ul li:first-child {padding-right:20px; width: 80px;} .question_wrap ul li:last-child {padding-top:0px; width:calc(100% - 80px);} .question_wrap .icon_question {display:inline-block; width:100%; height:80px; background: url('/images/icon_question.svg') no-repeat top; background-size:100%;} .question_wrap .icon_question.icon_mark {background: url('/images/icon_mark.svg') no-repeat top;} .table_rawmaterial_exam {border: 1px solid #999; margin-top: 10px;} .table_rawmaterial_exam td {padding:10px 10px;border-bottom: 1px solid #999; font-size:13px; letter-spacing:0.04em; line-height: 1.6em;} .table_rawmaterial_exam td:first-child {border-right: 1px solid #999; width: 30%} .table_rawmaterial_exam tr:last-child td {border-bottom: 0;} .new_preservative_photo {text-align:center;} .new_preservative_photo img {width:70%; height:auto;} _@media (max-width: 856px) { .new_preservative_photo img {width:100%;} } .anti_virus_photo {text-align:center;} .anti_virus_photo img {max-width:420px; width:100%; height:auto;} .stitle {font-family:'NunitoSans-SemiBold', 'notokr-bold', sans-serif;} #top {position:absolute; top:-80px;} #current_location_wrap.safety_loation {position:relative;} .icon_safety_location {display:inline-block;} .safety_text_list {padding-left: 20px;} .safety_text_list p {margin-bottom:5px; display: list-item; list-style-type: disc;} .usability_ox:after {content:" "; display:block; clear:both; *zoom:1;} .usability_ox .usability_ox_icon {max-width:100px; height:100px;} .usability_ox > div {float:left;} .usability_ox > div:first-child {width:20%; padding-right:20px;} .usability_ox > div:last-child {width:80%; } /* K-beauty */ #new_layout_container.kbeauty_container .layout_dan.fir01 {width: 100%;} #new_layout_container.kbeauty_container .layout_margin {margin-right: 0;} /*팝업제어 */ #popModal_container {left:0; top:0; z-index: 999;} #popModal_back {left:0; z-index:99999} .pop-content01 {left:20px; top:20px;} #popModal_back1 {left:540px; z-index:999999} .pop-content02 {top:20px;} .pop_back_close {width:100%; height:100%;} /*.pop_back01 {background-color:rgba(0,0,0,0.4);}*/ /* 롤링 멀티팝업 */ .multiPopup {position:relative; width:300px; overflow:hidden; z-index:9999} .multiPopup .inner {position:relative; overflow:hidden} .multiPopup ul.bannerList {position:relative; width:1800px; overflow:hidden} .multiPopup ul.bannerList:after {clear:both; display:block; content:''} .multiPopup ul.bannerList > li {float:left; width:300px} .multiPopup ul.bannerList > li img {display:block} .multiPopup ul.thumbList {position:relative; border-top:1px solid #dedede; overflow:hidden; display:flex; justify-content:center;} .multiPopup ul.thumbList:before {position:absolute; top:0; left:0; width:1px; height:100%; content:''; background:#dedede; z-index:1} .multiPopup ul.thumbList > li {position:relative; display:table; float:left; font-size:16px; width:33.33333333333%/*100px*/; height:80px; text-align:center; background:#f0f0f0; cursor:pointer; transition:all .3s ease} .multiPopup ul.thumbList > li:before {position:absolute; top:0; right:0; width:1px; height:100%; content:''; background:#dedede} .multiPopup ul.thumbList > li:after {position:absolute; bottom:0; left:0; width:100%; height:1px; content:''; background:#dedede} .multiPopup ul.thumbList > li:hover {color:#666; background:#f9f9f9} .multiPopup ul.thumbList > li p{display:table-cell; color:#888; padding:0 10px; vertical-align:middle} .multiPopup ul.thumbList > li.on {background:#fff} .multiPopup ul.thumbList > li.on p {color:#555} .multiPopup .closeArea {padding-left:10px; background:#777; overflow:hidden} .multiPopup .closeArea input[type=checkbox] {margin-left:5px; vertical-align:middle; cursor:pointer} .multiPopup .closeArea > div {text-align:left !important; font-family:inherit !important; padding:0 !important; width:inherit !important; background:none !important} .multiPopup .closeArea > div span {color:#ccc; line-height:30px; vertical-align:middle; cursor:pointer} #popup_close_btn {float:right; display:block; width:60px; height:30px; color:#bbb; text-align:center; line-height:30px; background:#555; vertical-align:middle} #popup_close_btn:hover {background:#444} /* 서브상단 */ #sVisual{position:relative; height:320px; overflow:hidden;} #sVisual:before{display:block;content:""; width:100%; height:100%; background:#000; opacity:0.2; position:absolute; left:0; top:0; z-index:1} #sVisual .sv{position: absolute; left:0; top:0; width:100%; height:100%; -webkit-background-size:cover !important; background-size:cover !important; animation:mymove 3s;} #sVisual .sv div.sv0{background:url("/design/dermacle/img/pc/title_img/about_top_01.png") no-repeat 50% 50%;background-size:cover; height:100%;} #sVisual .sv div.sv1{background:url("/design/dermacle/img/pc/title_img/about_top_01.png") no-repeat 50% 50%;background-size:cover; height:100%;} #sVisual .sv div.sv2{background:url("/design/dermacle/img/pc/title_img/lab_top.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv3{background:url("/design/dermacle/img/pc/title_img/test_top.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv4{background:url("/design/dermacle/img/pc/title_img/request_top.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv5{background:url("/design/dermacle/img/pc/title_img/participation_bg.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv6{background:url("/design/dermacle/img/pc/title_img/cs_bg.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv7{background:url("/images/main/visual2.jpg") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv10{background:url("/design/dermacle/img/pc/title_img/eIRB.png") no-repeat 50%;background-size:cover; height:100%;} #sVisual .sv div.sv11{background:url("/design/dermacle/img/pc/title_img/estimate_top.jpg") no-repeat 50%;background-size:cover; height:100%;} @keyframes mymove { from {transform:scale(1.1)} to {transform:scale(1)} } #sVisual .slogan{ display: block; position: absolute; top: 0; _left: 50%; _margin-left: -650px; width: 100%; height: 320px; _text-align: left; z-index: 50;} #sVisual .slogan .slo-wrap{ width: 100%; _max-width: 1200px; display: table; height: 100%; text-align: center;} #sVisual .slogan .slo-tit{ display: table-cell; vertical-align: middle; color: #fff; font-size: 40px; position: relative; font-weight: 300 !important; font-family: 'Spoqa Han Sans Neo';} #sVisual .slogan .slo-txt{ opacity: 0.8; font-size: 20px; display: block; font-weight: 400; letter-spacing: 4px; margin-top: 20px; font-family: Rubik;} _@media (max-width: 1290px){ #sVisual .slogan{left:0; margin-left:0; text-align:center;} #sVisual .slogan .slo-wrap{text-align:center;} } _@media (max-width:639px){ #sVisual{height:320px;} #sVisual .slogan .slo-wrap{padding:120px 5% 0 5%;} #sVisual .slogan .slo-tit{font-size:36px;} #sVisual .slogan .slo-txt{font-size:16px; margin-top:5px;} } /* 서브 네비게이션 */ .sub-menu{position:relative; display:block; width:100%; background:#f9f9f9;} .sub-menu:after{ content: "-"; position: absolute; bottom: 0; border-bottom: 2px solid #e9e9e9; width: 100%; left: 0; font-size: 0;} .sub-menu .sub-loca{display:inline-block; float:left; font-size:14px; padding:5px 0; } .sub-menu .sub-loca:after{content:""; background:url("/images/sub/loca_arrow.png") no-repeat 50% 50%; display:inline-block; width:7px; height:13px; margin-top:-4px; vertical-align:middle; padding:0 10px 0 12px;} .sub-menu .vNav{width:90%; max-width:1200px; overflow:hidden; margin:0 auto; text-align:center;} .sub-menu .vNav:after{display:block; content:""; clear:both;} .sub-menu .vNav ul{display:flex; flex-wrap:wrap; align-items:stretch;} .sub-menu .vNav ul li{ vertical-align: middle; font-size: 18px; position: relative; color: #555; font-weight: 500; width: 180px;} .sub-menu .vNav ul li a{ color: #242424; position: relative; padding: 24px 0; font-size: 18px; display: block; font-weight: 300; vertical-align: middle;} .sub-menu .vNav ul li.active:after{ content: "-"; position: absolute; bottom: 0; border-bottom: 2px solid #0080ff; width: 100%; left: 0; font-size: 0; z-index: 2;} .sub-menu .vNav ul li.active a{ font-weight: 500; color: #0080ff !important;} .sub-menu .vNav ul li:last-child a:after{display:none;} .sub-menu .vNav ul li:last-child{} .sub-menu .vNav ul li a:hover{color:#999; transition:.2s;} .sub-menu .line {opacity:0; display:inline-block; z-index:1; position:absolute; left:0; top:-1px; width:100px; height:2px; background:none;} .sub-menu .m_sub-menu{position:relative; z-index: 999;} .sub-menu .m_sub-menu .btn_s_menu{border:0; font-size:16px; color:#666; font-weight:500; height:61px; width:100%; line-height:61px; background:none;} .sub-menu .m_sub-menu .btn_s_menu > span{color:#222;} .sub-menu .m_sub-menu .s_menu{display:none;} .sub-menu .m_sub-menu .s_menu li{opacity:0.95;} .sub-menu .m_sub-menu .s_menu li:first-child{border-top:1px solid #c7c7c7;} .sub-menu .m_sub-menu .s_menu li a{display:block; width:100%; height:61px; line-height:61px; text-align: center; font-size:15px; color:#000; background:#fff; border-bottom: 1px solid #eee;} .sub-menu .m_sub-menu .s_menu li:last-child a{border-bottom:2px solid #150958;} .sub-menu .m_sub-menu .right{display: inline-block; padding:3px; margin-left:10px; margin-bottom:4px; transform:rotate(45deg); -webkit-transform:rotate(45deg); border: solid #c7c7c7; border-width:0 2px 2px 0;} /*.sub-menu #page1, .sub-menu #page5{display:none;}*/ _@media (max-width: 767px){ .sub-menu .sub-loca{font-size:11px; padding:5px 0; } .sub-menu .vNav{padding:10px 0;} .sub-menu .vNav ul li{font-size:11px; padding:5px 15px 5px 0;} } /* 서브 상단 타이틀 */ .sub-title{text-align:center; padding: 85px 0 85px;} .sub-title h3.sub-title-wrap{} .sub-title .sub-tit-top{ text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 20px;} .sub-title .sub-tit-bottom{ font-weight: 300; line-height: 32px; font-size: 32px; color: #000; display: inline-block; vertical-align: top;} /* 서브공통 */ .sContWrap{position:relative; width:100%;} .sContWrap:after{display:block; content:""; clear:both;} .sCont{padding:0 0 150px 0; width:90%; max-width:1200px; margin:0 auto; position:relative;} .sCont .sCont_title{padding-bottom:65px; color:#222; text-align:center; font-size:42px; font-weight:700; position:relative;} .sCont .sCont_title:before{display:block; content:""; position:relative; margin:0 auto; width:1px; height:38px; background:#666666; margin-bottom:35px;} _@media (max-width: 1024px){ .sCont .sCont_title{padding-bottom:50px;} } _@media (max-width: 767px){ .sub-title{padding:50px 0 50px;} .sCont{padding:0 0 50px 0;} .sCont .sCont_title{font-size:32px;} .sub-title .sub-tit-top{line-height:1.13em; font-size:30px; padding-bottom:5px;} } /* sub1_1 : 인사말 */ .greeting{position:relative; width:100%;} .greeting .int-wrap{position:relative;} .greeting .cont-1{position:relative;} .greeting .cont-2{ background: url(/design/dermacle/img/pc/title_img/about_gr_big_bg.png) no-repeat; margin-top: 0; padding: 105px 110px 0; background-position: bottom;} .greeting .cont-1 .img{position:relative; overflow:hidden; width:100%; height:550px; background:url("/design/dermacle/img/pc/title_img/about_bg.png") no-repeat center top #fff; background-size:cover;} .greeting .cont-1 img{width:100%; position:absolute; top:0; left:0; height:100%;-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} .greeting .cont-1 .textBox{position: absolute; bottom: -50px; left: 110px; width: 323px; background: url(/design/dermacle/img/pc/title_img/about_title_bg.png) no-repeat; z-index: 3; height: 195px;} .greeting .cont-1 .textBox h3{ position: relative; font-size: 30px; color: #fff; line-height: 195px; text-align: center; text-transform: uppercase; font-family: 'Spoqa Han Sans Neo' !important;} .greeting .cont-1 .textBox p{padding-top:10px; font-size:17px; color:#dfe3e3; line-height:28px;} .greeting .cont-2{_margin-top:65px;} .greeting .cont-2 .cont-wrap{} .greeting .cont-2 strong{font-size:31px; line-height:32px; padding:30px 0; color:#333; font-weight:500;} .greeting .cont-2 .text-column{display:flex; } .greeting .cont-2 .text-column > *{} .greeting .cont-2 .text-column p{ font-size: 21px; letter-spacing: -.4px; color: #5e5e5e; line-height: 34px; white-space: nowrap;} .greeting .cont-2 .text-column .col-left{padding-right:50px;} .greeting .cont-2 .text-column .col-right{display:flex; flex-wrap:wrap;} .greeting .cont-2 strong{opacity:0; transform:translateY(40px); transition:all 0.4s ease;} .greeting .cont-2 strong.in-view{opacity:1; transform:translateY(0px); transition:all 0.4s ease;} .greeting .cont-2 .text-column{opacity:0; transform:translateY(40px); transition:all 0.4s ease;} .greeting .cont-2 .text-column.in-view{opacity:1; transform:translateY(0px); transition:all 0.4s ease;} .greeting .gr-name{display:inline-block; width:100%; margin-top:30px; font-size:18px; float:right; text-align:right; font-weight:600; color:#222; margin-bottom: 50px;} .greeting .cont-1 .img img{opacity:0; transform:scale(1.3); transition:all 1s 1.6s ease;} .greeting .in-view .cont-1 .img img{opacity:1; transform:scale(1); transition:all 1s 0.4s ease;} .greeting .textBox{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .textBox{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} .greeting .textBox .txt-wrap{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .textBox .txt-wrap{opacity:1; transform:translateX(0px); transition:all 1s 1.2s ease;} .greeting .text_column .col_left{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .text_column .col_left{opacity:1; transform:translateX(0px); transition:all 1s 1.6s ease;} .greeting .text_column .col_right{opacity:0; transform:translateX(-40px); transition:all 1s 1.6s ease;} .greeting .in-view .text_column .col_right{opacity:1; transform:translateX(0px); transition:all 1s 1.6s ease;} _@media (max-width: 1024px){ .greeting .cont-2 .text-column{display:block;} .greeting .cont-2 .text-column > *{width:100%;} .greeting .cont-2 .text-column .col-left{padding-right:0;} } _@media (max-width: 767px){ .greeting .cont-1 .textBox{padding:45px; width:100%;} .greeting .cont-1 .textBox h3{line-height:42px;} .greeting .cont-2 strong{font-size:18px;} .greeting .cont-2 .text-column p{font-size:15px; line-height:1.7;} } /* sub1_2 : 비전 */ .vision{position:relative; padding-bottom:100px;} .vision .vision-slogan{position:relative; padding:0 0 100px; text-align:center} .vision .vision-slogan:before{display:block; content:""; background:url("/images/sub/gmrc.png") no-repeat center 50%; position:absolute; left:0; top:0px; width:100%; height:244px; z-index:-1;} .vision .gray{background:#fcfcfc} .vision .vision-slogan .slo-tit {} .vision .vision-slogan .slo-tit p{ font-size: 24px; color: #0080ff; text-transform: uppercase; font-family: 'Spoqa Han Sans Neo'; line-height: 34px; font-weight: 500;} .vision .vision-slogan strong{color:#333;font-size:48px;line-height:1.6} .vision .vision-slogan strong span{color:#523892;} .vision .vision-g{width:100%; max-width:1200px; padding:0 0 0 0; text-align:center; /*display:flex;*/ margin:0 auto; position:relative;} .vision .vision-g ul{text-align:center; font-size:0; padding:0 5%;} .vision .vision-g li{display:inline-block; vertical-align:top; position:relative;} .vision .vision-g li:nth-child(2n){margin:0 95px;} .vision .vision-g .text{text-align:center; font-size:20px; font-weight:500; letter-spacing:-.2px; box-sizing:border-box; line-height:1em; margin-top:25px;} .vision .vision-g strong{font-size:26px;font-weight: 500;color:#111;} .vision .vision-g .box{text-align:center; padding-top:20px;} .vision .vision-g .box .tit{font-size:20px; color:#555; font-weight:600; line-height:1.5; letter-spacing:0.25px;} .vision .vision-g .box .tit span{color:#ff6633;} .vision .vision-g .box .txt1{font-size:18px; color:#555; font-weight:400; padding:0 20px; word-break:keep-all; margin-top:10px; line-height:1.6;} .vision .vision-g .item{display:inline-block; width:260px; position:relative; z-index:0; opacity:0;} .vision .vision-g .ico{ height: 250px; margin-top: 0; background: #fff; border: 5px solid #f1f1f1; border-radius: 50%; width: 250px; } .vision .vision-g .ico img{display:block; margin:0 auto; padding-top:50px;} .vision .vision-g li:first-child img{_width:80px;} .vision .vision-g li:nth-child(2n) img {_width:63px;} .vision .vision-g li:nth-child(3n) img {_width:75px;} .vision .vision-g:before{display:block;width:0;height: 236px;position:absolute;left:calc((1100px - 992px) / 2);top: 120px;background:url(/img/page/people_point_icon.png) no-repeat left top;transition:all 3s ease;} .vision .vision-g.in-view:before{width:100%;transition:all 3s ease .2s} .vision .vision-g .item1{transform:translateY(40px);transition:all 1s ease-in-out} .vision .vision-g.in-view .item1{opacity:1;transform:translateY(0px);transition:all .6s .2s ease-in-out} .vision .vision-g .item2{transform:translateY(-40px);transition:all 1s ease-in-out} .vision .vision-g.in-view .item2{opacity:1;transform:translateY(0px);transition:all .6s .6s ease-in-out} .vision .vision-g .item3{transform:translateY(40px);transition:all 1s ease-in-out} .vision .vision-g.in-view .item3{opacity:1;transform:translateY(0px);transition:all .6s 1.0s ease-in-out} .vision .vision-g .item4{transform:translateY(40px);transition:all 1s ease-in-out} .vision .vision-g.in-view .item4{opacity:1;transform:translateY(0px);transition:all .6s 1.4s ease-in-out} .vision .vision-g.in-view .txt{opacity:1;transform:translateY(0px);transition:all .6s 1.6s ease-in-out} .vision .vision-g .txt{transform:translateY(40px);transition:all 1s ease-in-out; opacity:0; display: block; background: #f9f9f9; padding: 70px 45px; border-radius: 25px; margin-top: 100px;} .vision .vision-g .txt p:before{content: "-"; background: url(/design/dermacle/img/pc/list-style.png) no-repeat; width: 4px; height: 4px; font-size: 0; display: inline-block; position: absolute; left: 0; top: 13px;} .vision .vision-g .txt p{ font-size: 19px; font-weight: 300; color: #272727; line-height: 31px; text-align: left; padding-bottom: 40px; padding-left: 25px; position: relative;} .vision .vision-g .txt p:nth-last-child(1){padding-bottom:0 !important} _@media (max-width: 1200px){ .vision .vision-g{width:65%;} .vision .vision-g li{width:50%;} .vision .vision-g li:nth-child(2n):after{display:none;} .vision .vision-g li:last-child:after{display:none;} } _@media (max-width: 1170px){ .vision{padding:0;} .vision .vision-slogan{padding:0px 0 50px;} .vision .vision-slogan:before{display:none;} .vision .vision-g{padding:0;} } _@media (max-width: 1024px){ .vision .vision-g .box .tit{font-size:17px; line-height:1.5;} .vision .vision-g .text{margin-top:20px;} .vision .vision-g .item{width:180px;} .vision .vision-g .box{padding-top:10px;} .vision .vision-g .box .txt1{font-size:15px; padding:0 20px; margin-top:10px; line-height:1.6;} .vision .vision-g .ico{height:180px; margin-top:15px; border:5px solid #f1f1f1; } .vision .vision-g .ico img{padding-top:35px;} .vision .vision-g li:first-child img{width:30%;} .vision .vision-g li:nth-child(2n) img {width:30%;} .vision .vision-g li:nth-child(3n) img {width:30%;} .vision .vision-g li:nth-child(4n) img {width:30%;} } _@media (max-width: 800px){ .vision .vision-g{width:100%;} } _@media (max-width: 767px){ .vision .vision-slogan .slo-tit {font-size:24px;} .vision .vision-slogan strong{font-size:38px; line-height:1.2; display:block; margin-bottom:10px;} } _@media (max-width: 520px){ .vision .vision-g li{width:100%;} .vision .vision-g li:after{display:none;} } /* sub1_3 : 사업소개 */ .introduction{position:relative; padding-bottom:100px;} .introduction .introduction-slogan{position:relative; padding:0 0 100px; text-align:center;} .introduction .introduction-slogan .section01{opacity:0; transform:translateY(40px); transition:all 1s 1.6s ease;} .introduction .introduction-slogan.ani.in-view .section01{ opacity: 1; transform: translateY(0px); transition: all 1s ease;} .introduction .introduction-slogan .section02{opacity:0; transform:translateY(40px); transition:all 1s 1.6s ease;} .introduction .introduction-slogan.ani.in-view .section02{ opacity: 1; transform: translateY(0px); transition: all 5s ease;} .introduction .introduction-slogan:before{display:block; content:""; background:url("/images/sub/gmrc.png") no-repeat center 50%; position:absolute; left:0; top:0px; width:100%; height:244px; z-index:-1;} .introduction .gray{background:#fcfcfc} .introduction .introduction-slogan .slo-tit {} .introduction .introduction-slogan .slo-txt{ line-height: 27px; font-size: 18px; display: block; font-weight: 300; margin-top: 20px; font-family: Rubik; color: #272727;} .introduction .introduction-slogan .section02 .slo-txt{margin-top:40px;margin-bottom:80px} .introduction .introduction-slogan .slo-tit p{ font-size: 24px; color: #0080ff; text-transform: uppercase; font-family: 'Spoqa Han Sans Neo'; line-height: 34px; font-weight: 400;} .introduction .introduction-slogan strong{color:#333;font-size:48px;line-height:1.6} .introduction .introduction-slogan strong span{color:#523892;} .introduction .introduction-slogan{width:100%; max-width:1200px; padding:0 0 0 0; text-align:center; /*display:flex;*/ margin:0 auto; position:relative;} .introduction .introduction-slogan ul{text-align:center; padding:0 5%;} /* .greeting .textBox{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .textBox{opacity:1; transform:translateX(0px); transition:all 1s 0.4s ease;} .greeting .textBox .txt-wrap{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .textBox .txt-wrap{opacity:1; transform:translateX(0px); transition:all 1s 1.2s ease;} .greeting .text_column .col_left{opacity:0; transform:translateX(40px); transition:all 1s 1.6s ease;} .greeting .in-view .text_column .col_left{opacity:1; transform:translateX(0px); transition:all 1s 1.6s ease;} .greeting .text_column .col_right{opacity:0; transform:translateX(-40px); transition:all 1s 1.6s ease;} .greeting .in-view .text_column .col_right{opacity:1; transform:translateX(0px); transition:all 1s 1.6s ease;} */ .introduction .introduction-slogan li{ margin: 0 auto 12px; color: #272727; display: block; vertical-align: top; position: relative; height: 70px; line-height: 70px; background: #f9f9f9; width: 800px; font-size: 20px; border-radius: 20px; text-transform: uppercase; text-align: left;} .introduction .introduction-slogan li span{ position: relative; margin-left: 75px;} .introduction .introduction-slogan li span:before{content: "-"; background: url(/design/dermacle/img/pc/list-style.png) no-repeat; width: 4px; height: 4px; font-size: 0; display: inline-block; position: absolute; left: -19px; top: 13px;} .introduction .introduction-slogan .text{text-align:center; font-size:20px; font-weight:500; letter-spacing:-.2px; box-sizing:border-box; line-height:1em; margin-top:25px;} .introduction .introduction-slogan strong{font-size:26px;font-weight: 500;color:#111;} .introduction .introduction-slogan .box{text-align:center; padding-top:20px;} .introduction .introduction-slogan .box .tit{font-size:20px; color:#555; font-weight:600; line-height:1.5; letter-spacing:0.25px;} .introduction .introduction-slogan .box .tit span{color:#ff6633;} .introduction .introduction-slogan .box .txt1{font-size:18px; color:#555; font-weight:400; padding:0 20px; word-break:keep-all; margin-top:10px; line-height:1.6;} .introduction .introduction-slogan .item{display:inline-block; width:260px; position:relative; z-index:0; opacity:0;} .introduction .introduction-slogan .ico{ height: 250px; margin-top: 0; background: #fff; border: 5px solid #f1f1f1; border-radius: 50%; width: 250px; } .introduction .introduction-slogan .ico img{display:block; margin:0 auto; padding-top:50px;} .introduction .introduction-slogan .txt p{ font-size: 19px; font-weight: 300; color: #272727; line-height: 31px; text-align: left; padding-bottom: 40px; padding-left: 25px; position: relative;} .more_view{ width: 400px; display: inline-block; height: 74px; line-height: 74px; background: #0080ff; color: #fff; font-size: 24px; border-radius: 50px;} .introduction_wide{ background: #f9f9f9; padding: 60px 0 65px 0;} .introduction_wide .info{ width: 900px; margin: 0 auto; text-align: left;} .introduction_wide .info p{ font-size: 18px; line-height: 32px; text-transform: uppercase; font-weight: 300; color: #000;} .introduction_wide .info p span{display:block} .introduction_wide .info p span.last{ padding-top: 45px;} .introduction_wide .info p span.last a{ color: #0080ff; font-size: inherit; vertical-align: unset;} /* sub1_4 : 조직도 */ .organization{} .org-tree{/*min-width:910px;*/ text-align:center; position:relative; margin-bottom:7px; overflow:hidden;} .org-tree a, .org-tree span{display:block; _padding:12px 0; letter-spacing:0;} .org-tree .top-head{ display: block; width: 320px; height: 80px; line-height: 80px; padding: 0; margin: 0 auto 285px; color: #fff; background: #0080ff; font-size: 30px; text-align: center; position: relative; z-index: 1;} .org-tree .top-head:before, .org-tree .head:before{content:""; border-right:2px solid #e9e9e9; position:absolute; top:-30px; left:50%; z-index:-1;} .org-tree .top-head:before{width:1px; height:509px; top:100%; left:50%; margin-left:-1px;} .org-tree .top-head b{} .org-tree .audit{ position: absolute; right: 210px; margin-right: 0; padding: 16px 15px; width: 120px; background: #333333; font-size: 28px; font-weight: 400; line-height: 32px; color: #fff; text-align: center; border-radius: 5px; letter-spacing: 2px; font-weight: bold; font-family: Rubik;} .org-tree .audit{top:150px;} .org-tree .audit:after{content: ""; border-top: 2px solid #e9e9e9; width: 195px; height: 1px; position: absolute; top: 35px; left: -195px} .org-tree .sub-org{display:inline-block; width: 1108px; /*min-width:650px;*/ margin:0 auto; position:relative; z-index:5;} .org-tree .sub-org:before{ position: absolute; content: ""; display: inline-block; border-top: 2px solid #e9e9e9; width: 902px; top: -70px; left: 0; margin-left: 113px;} .org-tree .sub-org > li{ float: left; width: 224px; margin-left: 70px; position: relative;} .org-tree .sub-org > li:first-child{margin-left:0;} .org-tree .sub-org > li .head{ position: relative; border: 0; background: #47b8ff; color: #fff; font-size: 22px; height: 63px; line-height: 63px; font-weight: 500; display: block; width: 100%; border-top-left-radius: 5px; FONT-WEIGHT: 500; border-top-right-radius: 5px;} .org-tree .sub-org > li .head:before{width:1px; height: 68px; top: -68px;} .org-tree .sub-org > li:nth-child(2n) .head:before{/*display:none;*/ margin-left: 18px;} .org-tree .sub-org > li .quarter{ border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: relative; border: 1px solid #61c6d5; padding: 0 12px; height: 194px; min-height: 112px; background: #fff; text-align: center;} .org-tree .sub-org > li .quarter a, .org-tree .sub-org > li .quarter span{color:#030303; font-size:15px; font-weight:300; word-break:keep-all; line-height:24px;} .org-tree .sub-org > li .quarter > li{ font-size: 20px; color: #535353; padding: 8px 0; font-weight: 300;} .org-tree .sub-org2{display:inline-block; width:70%; /*min-width:910px;*/ margin:100px auto 0; position:relative;} .org-tree .sub-org2:before{position:absolute; content:""; display:inline-block; border-top:1px solid #e1e1e1; width:76%; height:1px; top:-41px; left:50%; margin-left:-37.9%;} .org-tree .sub-org2 > li{float:left; width: calc( ( 100% - 30px ) / 4 ); margin-left:10px; position:relative;} .org-tree .sub-org2 > li:first-child{margin-left:0;} .org-tree .sub-org2 > li .head{padding:20px 15px; position:relative; border:1px solid #684ab3; background:#684ab3; color:#fff; font-size:18px; line-height:1; font-weight:500; display:block; width:100%; margin-bottom:-1px;} .org-tree .sub-org2 > li .head:before{width:1px; height:41px; top:-41px;} .org-tree .sub-org2 > li .quarter{position:relative; border:1px solid #684ab3; padding:12px; min-height:165px; background:#fff;} .org-tree .sub-org2 > li .quarter a, .org-tree .sub-org > li .quarter span{color:#030303; font-size:15px; font-weight:300; word-break:keep-all; line-height:24px;} .org-tree .sub-org2 > li .quarter > li{font-size:16px; color:#444; font-weight:400; padding:3px 0; text-align:center;} .org-tree .top-head{opacity:0; transform:translateY(-40px);} .in-view .org-tree .top-head{opacity:1;transform:translateY(0px); transition:all 1s; border-radius: 5px;} .org-tree .top-head:before{height:0%;} .in-view .org-tree .top-head:before{height:216px; transition:2.6s;} .org-tree .audit, .org-tree .audit2, .org-tree .audit3{opacity:0; transform:translateX(40px);} .in-view .org-tree .audit, .in-view .org-tree .audit2, .in-view .org-tree .audit3{opacity:1; transform:translateX(0px); transition:all 1s 0.3s;} .org-tree .audit2:after{opacity:0;} .in-view .org-tree .audit2:after{opacity:1; transition:all 1s 0.6s;} .org-tree .sub-org{opacity:0; transform:translateY(-40px);} .in-view .org-tree .sub-org{opacity:1;transform:translateY(0px); transition:all 1s 1.0s;} .org-tree .sub-org2{opacity:0; transform:translateY(-40px);} .in-view .org-tree .sub-org2{opacity:1;transform:translateY(0px); transition:all 1s 1.6s;} _@media (max-width: 1240px){ .org-tree{text-align:left; max-width:450px; margin:0 auto;} .org-tree .top-head{display:inline-block; width:auto; height:auto; padding:20px 30px; margin: 0 auto 240px;} .org-tree .top-head:before{height:769px; margin-left:-30px;} .in-view .org-tree .top-head:before{height:769px;} .org-tree .top-head b{font-size:14px; line-height:1;} .org-tree .audit, .org-tree .audit2, .org-tree .audit3{margin-left:0px; padding:20px 30px; min-width:175px; width:auto; font-size:14px; } .org-tree .audit{top:50px;} .org-tree .audit:after{left:-40px;} .org-tree .audit2{top:115px;} .org-tree .audit2:after{left:-198px;} .org-tree .audit2:before{left:-40px;} .org-tree .audit3{top:180px;} .org-tree .audit3:after{left:-40px;} .org-tree .sub-org{display:inline-block; width:auto; margin:0 0 0 100px;} .org-tree .sub-org:before{border-left:1px solid #e1e1e1; width:1px; height:305px; position:absolute; top:27px; left:27px;} .org-tree .sub-org > li .head{padding:15px 30px; min-width:190px; font-size:14px; text-align:center;} .org-tree .sub-org > li .head:before{width:37px; height:1px; left:-38px; top:26px; border-top:1px solid #e1e1e1; z-index:1;} .org-tree .sub-org > li{float:none; width:auto; margin-left:0px;} .org-tree .sub-org > li:nth-child(2n), .org-tree .sub-org > li:nth-child(3n){margin-top:15px;} .org-tree .sub-org > li:first-child .head:before{width:73px; left:-74px;} .org-tree .sub-org > li:nth-child(2n) .head:before, .org-tree .sub-org > li:nth-child(3n) .head:before{display:inline-block;} .org-tree .sub-org > li .quarter{padding:10px; min-height:92px;} .org-tree .sub-org > li .quarter a, .org-tree .sub-org > li .quarter span{font-size:14px; line-height:24px;} .org-tree .sub-org > li .quarter > li{font-size:14px; padding:1px 0;} .org-tree .sub-org2{display:inline-block; width:auto; margin:60px 0 0 100px;} .org-tree .sub-org2:before{border-left:1px solid #e1e1e1; width:1px; height:547px; position:absolute; top:27px; left:35px;} .org-tree .sub-org2 > li{float:none; width:auto; margin-left:0px;} .org-tree .sub-org2 > li:first-child .head:before{width:73px; left:-74px;} .org-tree .sub-org2 > li:nth-child(2n), .org-tree .sub-org2 > li:nth-child(3n), .org-tree .sub-org2 > li:nth-child(4n){margin-top:15px;} .org-tree .sub-org2 > li .head{padding:15px 30px; min-width:170px; font-size:14px; text-align:center;} .org-tree .sub-org2 > li .head:before{width:37px; height:1px; left:-38px; top:26px; border-top:1px solid #e1e1e1; z-index:1;} .org-tree .sub-org2 > li .quarter{padding:10px; min-height:122px;} .org-tree .sub-org2 > li .quarter a, .org-tree .sub-org > li .quarter span{font-size:14px; line-height:24px;} .org-tree .sub-org2 > li .quarter > li{font-size:14px; padding:1px 0;} } _@media (max-width: 1170px){ } _@media (max-width: 1024px){ } _@media (max-width: 767px){ } /* sub1_5 : 오시는길 */ .maps{ border:1px solid #e0e0e0; width: 1200px !IMPORTANT; margin: 0 auto; opacity:0; transform:translateY(40px); transition:all 0.4s ease; } .in-view .maps{opacity:1; transform:translateY(0px); transition:all 0.4s ease;} .mapinfo{ margin-top: 60px !important; width: 1200px; margin: auto; display: block; opacity:0; transform:translateY(40px); transition:all 0.4s ease;} .in-view .mapinfo{opacity:1; transform:translateY(0px); transition:all 0.6s ease; display: table;} .in-view .mapinfo h4{ color: #fff; font-size: 26px; margin-top: -5px;} .in-view .mapinfo p{ font-size: 16px; color: #fff; font-weight: 300; line-height: 32px; padding-top: 15px;} .in-view .mapinfo > div{ border-radius: 20px; width: 495px; height: 160px; padding: 40px 50px;} .in-view .mapinfo .left{float: left;background: #0080ff;} .in-view .mapinfo .right{float: right;background:#333333} .location{opacity:0; transform:translateY(40px); transition:all 0.4s ease; width: 1100px; margin: 20px auto 160px; background: #f9f9f9; padding: 60px 50px; border-radius: 15px;} .in-view .location{ opacity: 1; transform: translateY(0px); transition: all 0.8s ease;} .location h4{ font-size: 28px; font-weight: 500; padding-bottom: 45px;} .location p{ padding-bottom: 20px; font-size: 18px; font-weight: 400; color: #535353; line-height: 28px;} .location p:nth-last-child(1){padding-bottom:0} .location p .tit{font-weight:bold; display: inline-block; vertical-align: top;} .location p .txt{ display: inline-block; vertical-align: top;} /* 연구소*/ #aboutcenter{ width: 1200px; margin: 0 auto;} #aboutcenter .sub-title{opacity:0; transform:translateY(40px); transition:all 1s 1.4s ease;} #aboutcenter .sub-title.in-view{opacity: 1; transform: translateY(0px); transition: all 1s ease;} #aboutcenter .sub-tit-bottom{ line-height: 34px; font-size: 20px; display: block; font-weight: 300; margin-top: 13px; color: #272727;} #aboutcenter .imgs{} #aboutcenter .imgs img:nth-child(1){margin-bottom:35px; opacity:0; transform:translateY(40px); transition:all 1s 1.8s ease;} #aboutcenter .imgs.in-view img:nth-child(1){opacity: 1; transform: translateY(0px); transition: all 1.4s ease;} #aboutcenter .imgs img:nth-child(2){margin-bottom:35px; opacity:0; transform:translateY(40px); transition:all 1s 2.2s ease;} #aboutcenter .imgs.in-view img:nth-child(2){opacity: 1; transform: translateY(0px); transition: all 1.8s ease;} #aboutcenter .imgs .txt{ font-size: 20px; line-height: 34px; font-weight: 300; text-align: center; margin-top: 60px; margin-bottom: 135px; opacity:0; transform:translateY(40px); transition:all 1s 2.6s ease; } #aboutcenter .imgs.in-view .txt{opacity: 1; transform: translateY(0px); transition: all 2.2s ease;} #aboutcenter section{} #aboutcenter section{opacity:0; transform:translateY(40px); transition:all 1s 3s ease;} #aboutcenter section.in-view{opacity: 1; transform: translateY(0px); transition: all 1.6s ease;} #aboutcenter section h4{ padding-bottom: 35px; font-size: 28px; font-weight: 500;} #aboutcenter section ul{ font-size: 0;} #aboutcenter section ul li{} #aboutcenter section ul li a{} #aboutcenter section ul.device-list{margin-bottom: 85px;} #aboutcenter section ul.device-list li{ margin-right: 20px; margin-bottom: 20px; width: 285px; height: 70px; text-align: center; line-height: 70px; display: inline-block; vertical-align: top; background: #f9f9f9;} #aboutcenter section ul.device-list li:nth-child(4n){margin-right:0 !important} #aboutcenter section ul.device-list li:nth-child(n+5){margin-bottom:0 !important} #aboutcenter section ul.device-list li a{ display: block; cursor: unset; height: 70px; line-height: 70px; font-size: 20px;} #aboutcenter section ul.partners-list{ margin-bottom: 180px;} #aboutcenter section ul.partners-list li{ margin-right: 20px; margin-bottom: 20px; width: 285px; height: 220px; text-align: center; line-height: 220px; display: inline-block; vertical-align: top; background: #f9f9f9;} #aboutcenter section ul.partners-list li:nth-child(4n){margin-right:0 !important} #aboutcenter section ul.partners-list li:nth-child(n+5){margin-bottom:0 !important} #aboutcenter section ul.partners-list li a{ cursor: unset; display: block;} #aboutcenter section ul.partners-list li a img{} /* sub2_1~5 : 시험항목 */ .test-tems{position:relative; word-break:keep-all;} .test-tems .test-tab{overflow:hidden; margin-bottom:60px; width:100%; position:relative; padding:30px; border:2px solid #523891; font-size:0;} .test-tems .test-tab li{display:inline-block; width:25%; vertical-align:top;} .test-tems .test-tab.tw2 li{width:50%;} .test-tems .test-tab li:first-child span{} .test-tems .test-tab li span{display:block;font-size:17px; line-height:24px; letter-spacing:-.5px; color:#1c1c1c; cursor:pointer; position:relative; padding:5px 0 5px 20px; vertical-align:top;} .test-tems .test-tab li span:before{width:3px; height:3px; border-radius:100px; background:#787878; content:''; position:absolute; left:0; top:16px;} .test-tems .test-tab li.active span{color:#523891; font-weight:500;} .test-tems .tabcontent{clear:both; display:none;} .test-tems table th, .test-tems table td{position:relative;} .test-tems table th.txt-top{vertical-align:top; padding: 34px 10px;} .test-tems .img-box{position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} .test-tems .img-wrap{position:relative; padding:0 1%;} .test-tems .img-wrap p{font-size:15px;} .test-tems .img-area{display:none; width:200px; box-sizing:border-box; padding:5px; position:absolute; background:#fff; box-shadow:17px 17px 20px rgb(0 0 0 / 20%); bottom:90%; left:50%; margin-left:-125px;} .test-tems .img-area-test{display:none; overflow:hidden; box-sizing:border-box; padding:5px; position:absolute; background:#fff; box-shadow:17px 17px 20px rgb(0 0 0 / 20%); bottom:90%; left:50%;} /*.test-tems .img-wrap .type{padding:0; display:block; width:100%; position:absolute; top:0; left:0;} .test-tems .img-wrap .type li{display:block; border-right:2px solid #fff; float:left; font-size:12px; font-weight:500; width:50%; background:#684ab3; color:#fff; text-align:center;} .test-tems .img-wrap .type li:liast-child{border-left:2px solid #fff}*/ .test-tems .type-wrap{position:relative;} .test-tems .type-wrap .type{width:50%; position:absolute; top:0; font-size:12px; font-weight:500; background:#684ab3; color:#fff; text-align:center;} .test-tems .type-wrap .Ltype{left:0; border-right:1px solid #fff;} .test-tems .type-wrap .Rtype{right:0; border-left:1px solid #fff;} .test-tems .type-wrap .img-area-wrap{padding-top:23px;} .test-tems .w1{width:200px; margin-left:-100px;} .test-tems .w2{width:400px; margin-left:-200px;} .test-tems .w3{width:600px; margin-left:-300px;} .test-tems .w4{width:800px; margin-left:-400px;} .test-tems .img-area-test .img-area-wrap{float:left; display:inline-block;} .test-tems .w1 .img-area-wrap{width:100%;} .test-tems .w2 .img-area-wrap{width:50%;} .test-tems .w3 .img-area-wrap{width:33.3333333333333%;} .test-tems .w4 .img-area-wrap{width:25%;} .test-tems .img-area-test .img-area-wrap img{width:100%; max-width:200px; border:1px solid #fff;} .test-tems .img-area2{display:none; width:250px; box-sizing:border-box; padding:5px; position:absolute; background:#fff; box-shadow:17px 17px 20px rgb(0 0 0 / 20%); top:30px; left:50%; margin-left:-125px;} .test-tems .img-area img, .test-tems .img-area2 img{width:100%;} .test-tems h3.mt-tit{font-size:24px; color:#222; font-weight:500; margin-top:40px;} .test-tems .test-tit{font-size:18px; font-weight:500; color:#001f57;} .test-tems .img-btn{margin-bottom:5px; margin-top:5px;} .img-btn{ position:relative; display:inline-block; min-width:70px; margin:0; padding:0px 30px 0px 10px; border:1px solid #7a7d96; box-sizing:border-box; background-color:#fff; font-size:11px; color:#363c5a; text-align:center; font-weight:600; text-transform:uppercase; letter-spacing:-0.02em; transition-property: color, border, background-color, box-shadow; transition-duration:0.2s; transition-timing-function:ease-in-out; vertical-align:middle; text-decoration:none; cursor:pointer; } .img-btn i{font-size:15px; display:block; position:absolute; right:12px; top:3.5px;} .img-btn:hover{background:#7a7d96; color:#fff;} .test-tems .img-txt{display:block; text-align:center; margin-top:5px; font-size:12px; line-height:24px;} .mtable{display:none;} .ptable{display:block;} _@media (max-width: 1240px){ } _@media (max-width: 1170px){ } _@media (max-width: 1024px){ } _@media (max-width: 767px){ .test-tems .test-tab li span{font-size:15px; line-height:22px; padding:3px 0 3px 10px;} .test-tems .test-tab li span:before{top:13px;} } _@media (max-width: 640px){ .test-tems .test-tab li{width:33.33333333%;} } _@media (max-width: 560px){ .test-tems .test-tab{margin-bottom:40px; padding:20px;} .test-tems .test-tab li{width:50%;} } _@media (max-width: 480px){ .test-tems .test-tab{padding:15px;} .test-tems .test-tab li span{font-size:13px; line-height:20px; padding:3px 0 3px 10px;} } /*테이블*/ table{width:100%; border-collapse:collapse; border-spacing:0;} .table_unit{position:relative; display:block; margin-top:-20px; margin-bottom:10px; padding-left:25px; font-size:15px; line-height:17px; color:#898d9f; text-align:right;} .table_unit:before{display:inline-block; position:relative; top:1px; width:14px; height:14px;padding-right:5px; /*background:url('/site/public_2020/images/template/template_title.svg#point_icon02') no-repeat;*/ background-size:14px 14px;} .table{position:relative; width:100%; /*margin:20px 0;*/ background-color:#fff; border-top:2px solid #0080ff; font-size:17px; line-height:24px;} .table:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#c5c9d6;} .table.vertical_top tr th,.table.vertical_top tr td{vertical-align:top} .table.vertical_middle tr th,.table.vertical_middle tr td{vertical-align:middle;} .table.vertical_bottom tr th,.table.vertical_bottom tr td{vertical-align:bottom;} .table.fixed{table-layout:fixed;} .table .caption{display:none;} .table.text_center tbody tr td{text-align:center;} .table.text_left tbody tr td{text-align:left;} .table.text_left tbody tr th,.table.text_left thead tr th{text-align:center;} .table.break tbody td,.table.break thead th,.table.break tbody td,.table.break tbody th{word-break:break-all;} .table thead th{ font-size: 20px; padding: 14px 10px; border: 1px solid #e0e1e3; border-bottom-color: #e3e3e3; background-color: #eff5ff; color: #333; font-weight: 500; text-align: center;} .table thead th:first-child{border-left:none;} .table thead th:last-child{border-right:none;} .table tbody th, .table tfoot th{background-color:#f9fafc; font-weight:500; color:#777;} .table tbody th, .table tbody td, .table tfoot th, .table tfoot td{padding:14px 10px; border-bottom:1px solid #e3e3e3; border-right:1px solid #e3e3e3; font-weight:400; color:#636363; word-break:keep-all;} .table tbody th{ font-size: 18px; color: #000; font-weight: 400;} .table tbody td{ font-size: 17px; font-weight: 300; color: #000; text-align: left !important; text-indent: 15px;} .table tfoot td:first-child{border-left:none;} .table tbody tr th:last-child{border-right:none;} .table td:last-child{border-right:none;} .table td[rowspan]:first-child{border-right:1px solid #e0e1e3;} .table tbody th + td, .table tbody td + td, .table tfoot td{border-left:1px solid #d5d8dd;} .table tbody td, .table tfoot td{text-align:center;} .table tbody td ul{margin-top:0; margin-bottom:0; padding-left:10px; text-align:left;} .table tbody td ul li, .table tbody td ol li{font-size:15px;} .table tbody td ul.po-list_clear{padding-left:0;} .table tbody td ol{margin-top:0; margin-bottom:0;} .table th.double, .table td.double{border-left:3px double #d5d8dd;} .table .po-list > li > ul >li > ul > li:before, .table .num > li > ul >li > ul > li:before, .table p.blt.type3:before, .table .po-list.third > li:before {top:15px;} .table td.color-1{background:#f1f7fd;} .table td.color-2{background:#edfbf2;} .table2{position:relative; width:100%; margin:20px 0; background-color:#fff; border-top:2px solid #7a7d96; font-size:14px; line-height:24px;} .table2:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#c5c9d6;} .table2 thead th{padding:10px 10px; border:1px solid #e0e1e3; border-bottom-color:#c5c9d6; background-color:#f4f5f9; color:#333; font-weight:500; text-align:center;} .table2 thead th:first-child{border-left:none;} .table2 thead th:last-child{border-right:none;} .table2 tbody th{font-size:14px; color:#777; font-weight:400;} .table2 tbody td{font-size:14px;} .table2 tbody th, .table2 tbody td, .table2 tfoot th, .table2 tfoot td{padding:10px 10px; border-bottom:1px solid #c5c9d6; border-right:1px solid #e5e7ee; font-weight:400; color:#636363; word-break:keep-all;} .table2 tfoot td:first-child{border-left:none;} .table2 tbody tr th:last-child{border-right:none;} .table2 td:last-child{border-right:none;} .table2 td[rowspan]:first-child{border-right:1px solid #e0e1e3;} .table2 tbody th + td, .table2 tbody td + td, .table2 tfoot td{border-left:1px solid #d5d8dd;} .table2 tbody td, .table2 tfoot td{text-align:center;} .table2 tbody td ul{margin-top:0; margin-bottom:0; padding-left:10px; text-align:left;} .table2 tbody td ul li, .table2 tbody td ol li{font-size:15px;} .table2 tbody td ul.po-list_clear{padding-left:0;} .table2 tbody td ol{margin-top:0; margin-bottom:0;} .table2 th.double, .table2 td.double{border-left:3px double #d5d8dd;} .table2 .po-list > li > ul >li > ul > li:before, .table2 .num > li > ul >li > ul > li:before, .table2 p.blt.type3:before, .table2 .po-list.third > li:before {top:15px;} /*모바일 가로 스크롤*/ .table_con_wrap{position:relative;} .table_con_wrap .table_prev_mo{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:95;} .table_con_wrap .table_prev_mo ul{position:absolute; top:50%; left:50%; margin:-11px 0 0 -75px;} .table_con_wrap .table_prev_mo ul:after{content: ''; display:block; clear:both;} .table_con_wrap .table_prev_mo ul li{float:left;} .table_con_wrap .table_prev_mo ul li p{font-size:15px; color:#fff;} .table_con_wrap .table_prev_mo ul li i{margin-top:4px; font-size:12px; color:#fff; animation:prevarrow .5s ease-in infinite alternate;} p.mo_hide{display:none; color:#888; text-align:center; margin-top:10px;} _@media (max-width:1000px){ .dbstg{display: block;} } _@media (max-width:900px){ /*.table_con_wrap{width:100%; overflow-x:auto; white-space:nowrap;}*/ .table_con_wrap table{width:100%;} .table_con_wrap .table_prev_mo{display:block;} p.mo_hide{display:block;} } _@media (max-width: 1240px){ } _@media (max-width: 1170px){ } _@media (max-width: 1024px){ .mtable{display:block;} .ptable{display:none;} .test-tems .type-wrap .type{width:100%;} .test-tems .img-area-test{padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative; box-shadow:none; bottom:0; left:0;} .test-tems .img-area-test .img-area-wrap{float:none;} .test-tems .img-area-test .img-area-wrap img{max-width:100px;} .test-tems .test-tit{font-size:14px; font-weight:500; color:#001f57;} .table{font-size:14px; margin-top:20px;} .table tbody th{font-size:14px;} .table tbody td{font-size:14px;} .test-tems table th.txt-top{vertical-align:top; padding: 14px 10px;} } _@media (max-width: 767px){ } /* sub3_1 : 임상 시험*/ .procedure{position:relative; word-break:keep-all;} .procedure .cont-1{position:relative; border-bottom: 1px solid #e1e1e1;} .procedure .cont-1 h4{margin-top: 85px;margin-bottom: 35px;font-size:28px; font-weight:500;color:#333333} .procedure .process{} .procedure .process{opacity:0; transform:translateY(-20px);} .procedure .cont-1.in-view .process{opacity:1; transform:translateY(0px); transition:0.4s;} .procedure .cont-1 h4.tit{margin-top: 15px !important; margin-bottom:0} .procedure .cont-1 .txt{ font-size: 18px; font-weight: 300; padding-top: 25px; color: #272727;} .cont-2 .center_tit{text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 90px; text-align: center; padding-top: 100px;} .addtit{ padding-top: 25px; font-size: 18px; color: #000;} /*임상시험 공통*/ .procedure .proc-list li{background: url(/design/dermacle/img/pc/icons/test/01/bg_full.png) repeat;} .procedure .proc-list li:after{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_next.png) no-repeat; width: 40px; height: 90px; display: inline-block; vertical-align: top; position: absolute;} .procedure .proc-list li.mid-last:after{background-color: #fff;} .procedure .proc-list li:nth-child(1):before, .procedure .proc-list li.enter:before{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_first.png) no-repeat; width: 18px; height: 90px; display: inline-block; vertical-align: top; position: absolute; left: 0; background-color: #fff;} .procedure .proc-list li.last:after{ background-color: #fff !important; content:"-";background: url(/design/dermacle/img/pc/icons/test/01/bg_last.png) no-repeat;} .procedure .go_btn{width:400px; height:74px; line-height:74px; color:#fff;font-weight:500; font-size:24px;text-align:center; border-radius:50px; margin: 85px auto 190px;background:#0080ff;display:block} .procedure .proc-list li .cont-txt{display: inline-block; vertical-align: middle;} .procedure .proc-list li .cont-txt p{font-size: 18px; color: #333; font-weight: 400;} .procedure .proc-list{font-size:0; text-align: left;} .procedure .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .procedure .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle;} /*견적내기*/ .procedure .price .proc-list{font-size:0; text-align: left;} .procedure .price .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .procedure .price .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle; margin-left: -15px;} .procedure .price .proc-list li:first-child .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_01.png") no-repeat 50% 50%;} .procedure .price .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_02.png") no-repeat 50% 50%;} .procedure .price .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_03.png") no-repeat 50% 50%;} .procedure .price .proc-list li:nth-child(4) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_04.png") no-repeat 50% 50%;} .procedure .price .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_05.png") no-repeat 50% 50%;} .procedure .price .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_06.png") no-repeat 50% 50%;} .procedure .price .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 360px;} .procedure .in-view .price .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .procedure .price .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);width: 300px;} .procedure .in-view .price .proc-list li:nth-child(2){ opacity: 1; transform: translateX(0px); transition: 0.4s 0.2s; z-index: -1;} .procedure .price .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 450px; z-index: -2;} .procedure .in-view .price .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .procedure .price .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);width: 400px; margin-left: 0;} .procedure .in-view .price .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .procedure .price .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px); width: 250px;z-index:-2} .procedure .in-view .price .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .procedure .price .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 290px;z-index:-3} .procedure .in-view .price .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} /*실제 시험의뢰*/ .procedure .realtest .proc-list li:first-child .icon,.procedure .realtest .proc-list li.enter .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_01.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_02.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_03.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(4) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_04.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_05.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_06.png") no-repeat 50% 50%; } .procedure .realtest .proc-list li:nth-child(7) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_07.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(8) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_08.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:nth-child(9) .icon{background:url("/design/dermacle/img/pc/icons/test/01/realtest_ico_09.png") no-repeat 50% 50%;} .procedure .realtest .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 200px;} .procedure .in-view .realtest .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .procedure .realtest .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);width: 260px;} .procedure .in-view .realtest .proc-list li:nth-child(2){opacity: 1; transform: translateX(0px);transition: 0.4s 0.2s; z-index: -1;} .procedure .realtest .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 350px; z-index: -2;} .procedure .in-view .realtest .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .procedure .realtest .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);width: 254px; margin-left: 0; z-index: -4;} .procedure .in-view .realtest .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .procedure .realtest .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);width: 208px;z-index:-1} .procedure .in-view .realtest .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .procedure .realtest .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 250px;z-index:-2} .procedure .in-view .realtest .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} .procedure .realtest .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px);width: 210px;z-index:-3} .procedure .in-view .realtest .proc-list li:nth-child(7){opacity:1; transform:translateX(0px); transition:0.4s 1.2s;} .procedure .realtest .proc-list li:nth-child(8){opacity:0; transform:translateX(-20px);width: 260px;z-index:-4} .procedure .in-view .realtest .proc-list li:nth-child(8){opacity:1; transform:translateX(0px); transition:0.4s 1.4s;} .procedure .realtest .proc-list li:nth-child(9){opacity:0; transform:translateX(-20px);width: 270px;z-index:-5} .procedure .in-view .realtest .proc-list li:nth-child(9){opacity:1; transform:translateX(0px); transition:0.4s 1.6s;} /*대면시험절차*/ .procedure .interview .proc-list li:first-child .icon,.procedure .interview .proc-list li.enter .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_01.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_02.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_03.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(4) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_04.png") no-repeat 50% 50%; margin-left: -25px;} .procedure .interview .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_05.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_06.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(7) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_07.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(8) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_08.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(9) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_09.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(10) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_10.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(11) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_11.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(12) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_12.png") no-repeat 50% 50%;} .procedure .interview .proc-list li:nth-child(13) .icon{background:url("/design/dermacle/img/pc/icons/test/01/interview_ico_13.png") no-repeat 50% 50%;} .interview .txt{padding: 30px 0 !important;} .procedure .interview .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 345px;} .procedure .in-view .interview .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:1.4s ; margin-left: 0;} .procedure .interview .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);width: 345px;} .procedure .in-view .interview .proc-list li:nth-child(2){opacity: 1; transform: translateX(0px);transition: 1.4s 0.2s; z-index: -1;} .procedure .interview .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 340px; z-index: -2;} .procedure .in-view .interview .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:1.4s 0.4s;} .procedure .interview .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);width: 343px; margin-left: 0; z-index: -4;} .procedure .in-view .interview .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:1.4s 0.6s;} .procedure .interview .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);_width: 208px;z-index:-1} .procedure .in-view .interview .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:1.4s 0.8s;} .procedure .interview .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 305px;z-index:-2} .procedure .in-view .interview .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:1.4s 1.0s;} .procedure .interview .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px);_width: 210px;z-index:-3} .procedure .in-view .interview .proc-list li:nth-child(7){opacity:1; transform:translateX(0px); transition:1.4s 1.2s;} .procedure .interview .proc-list li:nth-child(8){opacity:0; transform:translateX(-20px);width: 260px;z-index:-4} .procedure .in-view .interview .proc-list li:nth-child(8){opacity:1; transform:translateX(0px); transition:1.4s 1.4s;} .procedure .interview .proc-list li:nth-child(9){opacity:0; transform:translateX(-20px);_width: 320px;z-index:-4} .procedure .in-view .interview .proc-list li:nth-child(9){opacity:1; transform:translateX(0px); transition:1.4s 1.6s;} .procedure .interview .proc-list li:nth-child(10){opacity:0; transform:translateX(-20px);width: 375px;z-index:-5} .procedure .in-view .interview .proc-list li:nth-child(10){opacity:1; transform:translateX(0px); transition:1.4s 1.8s;} .procedure .interview .proc-list li:nth-child(11){opacity:0; transform:translateX(-20px);_width: 270px;} .procedure .in-view .interview .proc-list li:nth-child(11){opacity:1; transform:translateX(0px); transition:1.4s 2.0s;} .procedure .interview .proc-list li:nth-child(12){opacity:0; transform:translateX(-20px);width: 330px;z-index:-1} .procedure .in-view .interview .proc-list li:nth-child(12){opacity:1; transform:translateX(0px); transition:1.4s 2.2s;} .procedure .interview .proc-list li:nth-child(13){opacity:0; transform:translateX(-20px);width: 245px;z-index:-2} .procedure .in-view .interview .proc-list li:nth-child(13){opacity:1; transform:translateX(0px); transition:1.4s 2.4s;} /*주의사항*/ .procedure .cont-2{position:relative; padding-bottom:50px;} .procedure .cont-3{position:relative;} .procedure .cont-2 h3, .procedure .cont-3 h3{margin-bottom:5px; font-size:22px; font-weight:600; line-height:1.8em; letter-spacing:-0.01em;} .procedure .txt-list{} .procedure .txt-list li{position:relative; font-size:18px; line-height:1.8em; letter-spacing:-0.01em; padding-left:15px;} .procedure .txt-list li:before{content:""; display:block; width:3px; height:3px; border-radius:50%; background:#666; position:absolute; top:13px; left:0;} .procedure .txt-list p{font-size:18px; line-height:1.8em; letter-spacing:-0.01em;} .procedure .cont-2{opacity:0; transform:translateY(-20px);} .procedure .cont-2.in-view{opacity:1; transform:translateY(0px); transition:2.4s;} .procedure .cont-3{opacity:0; transform:translateY(-20px);} .procedure .cont-3.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} .procedure table{margin-bottom: 80px; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3;} .procedure h4{font-size: 28px; font-weight: 500; padding-bottom: 30px;} .procedure p.txt{ font-size: 20px; margin-top: -15px; margin-bottom: 30px;} .procedure .part01 table, .procedure .part03 table{width:590px; border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3;} .procedure .part03 table{margin-bottom:55px} .procedure .part03 .color.txt{font-size:18px; font-weight:300;color:#838383} .procedure .part02 .left,.procedure .part02 .right{width:590px; display: inline-block; vertical-align: top;} .procedure .part02 .right{float:right} _@media (max-width: 1170px){ .procedure .proc-list li{width:33.333333%;} .procedure .proc-list li:nth-child(3n):after, .procedure .proc-list li:last-child:after, .procedure .proc-list li:nth-child(3n) .num-top:after, .procedure .proc-list li:last-child .num-top:after{display:none;} .procedure .proc-list li:nth-child(4n):after, .procedure .proc-list li:nth-child(4n) .num-top:after{display:inline-block;} .procedure .proc-list li .cont-txt p{font-size:17px; line-height:23px;} } _@media (max-width: 860px){ .procedure .cont-1{padding-bottom:0px;} .procedure .proc-list li{width:50%;} .procedure .proc-list li:nth-child(2n):after, .procedure .proc-list li:nth-child(2n) .num-top:after{display:none;} .procedure .proc-list li:nth-child(3n):after, .procedure .proc-list li:nth-child(3n) .num-top:after{display:inline-block;} .procedure .proc-list li:nth-child(4n):after, .procedure .proc-list li:nth-child(4n) .num-top:after{display:none;} .procedure .proc-list li:nth-child(6n):after, .procedure .proc-list li:nth-child(6n) .num-top:after{display:none;} } _@media (max-width: 480px){ .procedure .proc-list li{margin-bottom:40px;} .procedure .proc-list li .num-top{width:38px; height:38px; margin-bottom:20px;} .procedure .proc-list li .num-top:after{margin-left:11%;} .procedure .proc-list li .num-top span{font-size:15px; line-height:40px;} .procedure .proc-list li .icon{width:53px; height:56px;} .procedure .proc-list li:first-child .icon{background-size:53px;} .procedure .proc-list li:nth-child(2n) .icon{background-size:53px;} .procedure .proc-list li:nth-child(3n) .icon{background-size:53px;} .procedure .proc-list li:nth-child(4n) .icon{background-size:53px;} .procedure .proc-list li:nth-child(5n) .icon{background-size:53px;} .procedure .proc-list li:nth-child(6n) .icon{background-size:53px;} .procedure .proc-list li:nth-child(7n) .icon{background-size:53px;} .procedure .proc-list li .cont-txt{margin-top:10px;} .procedure .proc-list li .cont-txt p{font-size:15px; line-height:21px;} .procedure .cont-2 h3, .procedure .cont-3 h3{font-size:20px;} .procedure .txt-list li{font-size:16px;} .procedure .txt-list li:before{top:10px;} .procedure .txt-list p{font-size:16px;} } _@media (max-width: 380px){ .procedure .cont-2{padding-bottom:20px;} .procedure .proc-list li{width:100%;} .procedure .proc-list li:first-child:after, .procedure .proc-list li:first-child .num-top:after, .procedure .proc-list li:nth-child(3n):after, .procedure .proc-list li:nth-child(3n) .num-top:after, .procedure .proc-list li:nth-child(5n):after, .procedure .proc-list li:nth-child(5n) .num-top:after{display:none;} } /* sub3_2 : 이화학 시험*/ .pac{position:relative; word-break:keep-all;} .pac .cont-1{position:relative;} .pac .cont-1 h4{margin-top: 70px;font-size:28px; font-weight:500;color:#333333} .pac_ .process{} .pac_ .sub-tit-bottom{ font-size: 20px; font-weight: 300; margin-top: 35px; margin-bottom: 70px; line-height: 34px; display: block;} .pac_{opacity:0; transform:translateY(-20px);} .pac_.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} .pac .cont-1 h4.tit{margin-top: 15px !important; margin-bottom:0} .pac .cont-1 .txt{ font-size: 18px; font-weight: 300; padding-top: 25px; line-height: 32px; color: #272727;} .cont-2 .center_tit{text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 90px; text-align: center; padding-top: 100px;} .addtit{ padding-top: 25px; font-size: 18px; color: #000;} .pac .notice{ padding-top: 15px;} .pac .notice .addcomment{ line-height: 28px;} .pac .notice .notice_top, .pac .notice .notice_bottom{ font-size: 18px; font-weight: 400; line-height: 40px; color: #272727;} .pac .notice .notice_bottom{ line-height: 30px;} .pac .notice .notice_bottom em{} /*이화학 공통*/ .pac .proc-list li{background: url(/design/dermacle/img/pc/icons/test/01/bg_full.png) repeat;} .pac .proc-list li:after{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_next.png) no-repeat; width: 40px; height: 90px; display: inline-block; vertical-align: top; position: absolute;} .pac .proc-list li.mid-last:after{background-color: #fff;} .pac .proc-list li:nth-child(1):before, .pac .proc-list li.enter:before{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_first.png) no-repeat; width: 18px; height: 90px; display: inline-block; vertical-align: top; position: absolute; left: 0; background-color: #fff;} .pac .proc-list li.last:after{ background-color: #fff !important; content:"-";background: url(/design/dermacle/img/pc/icons/test/01/bg_last.png) no-repeat;} .pac .go_btn{width:400px; height:74px; line-height:74px; color:#fff;font-weight:500; font-size:24px;text-align:center; border-radius:50px; margin: 85px auto 190px;background:#0080ff;display:block} .pac .proc-list li .cont-txt{display: inline-block; vertical-align: middle;} .pac .proc-list li .cont-txt p{font-size: 18px; color: #333; font-weight: 400;} .pac .proc-list{font-size:0; text-align: left; margin-top: 35px;} .pac .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .pac .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle;} /*견적내기*/ .pac .price .proc-list{font-size:0; text-align: left;} .pac .price .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .pac .price .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle; margin-left: -15px;} .pac .price .proc-list li:first-child .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_01.png") no-repeat 50% 50%;} .pac .price .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_02.png") no-repeat 50% 50%;} .pac .price .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_03.png") no-repeat 50% 50%;} .pac .price .proc-list li:nth-child(4) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_04.png") no-repeat 50% 50%;} .pac .price .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_05.png") no-repeat 50% 50%;} .pac .price .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_06.png") no-repeat 50% 50%;} .pac .price .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 360px;} .pac .in-view .price .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .pac .price .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);width: 300px;} .pac .in-view .price .proc-list li:nth-child(2){ opacity: 1; transform: translateX(0px); transition: 0.4s 0.2s; z-index: -1;} .pac .price .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 450px; z-index: -2;} .pac .in-view .price .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .pac .price .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);width: 400px; margin-left: 0;} .pac .in-view .price .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .pac .price .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px); width: 250px;z-index:-2} .pac .in-view .price .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .pac .price .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 290px;z-index:-3} .pac .in-view .price .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} /*실제 시험의뢰*/ .pac .realtest .proc-list li:first-child .icon,.pac .realtest .proc-list li.enter .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_01.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_02.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_03.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:nth-child(4) .icon{background: url(/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_04.png) no-repeat 50% 50%; padding-left: 30px; margin-right: -10px;} .pac .realtest .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_05.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_06.png") no-repeat 50% 50%; } .pac .realtest .proc-list li:nth-child(7) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_07.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:nth-child(8) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_08.png") no-repeat 50% 50%;} .pac .realtest .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 200px;} .pac .in-view .realtest .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .pac .realtest .proc-list li:nth-child(2){padding: 0 30px; opacity:0; transform:translateX(-20px);} .pac .in-view .realtest .proc-list li:nth-child(2){opacity: 1; transform: translateX(0px);transition: 0.4s 0.2s; z-index: -1;} .pac .realtest .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 350px; z-index: -2; padding-left: 10px;} .pac .in-view .realtest .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .pac .realtest .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);_width: 254px; margin-left: 0; } .pac .in-view .realtest .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .pac .realtest .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);width: 218px;z-index:-1; padding-left: 35px;} .pac .in-view .realtest .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .pac .realtest .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 250px;z-index:-2; padding-left: 30px;} .pac .in-view .realtest .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} .pac .realtest .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px);width: 230px;z-index:-3} .pac .in-view .realtest .proc-list li:nth-child(7){opacity:1; transform:translateX(0px); transition:0.4s 1.2s;} .pac .realtest .proc-list li:nth-child(8){opacity:0; transform:translateX(-20px);width: 260px;z-index:-4; padding-left: 15px;} .pac .in-view .realtest .proc-list li:nth-child(8){opacity:1; transform:translateX(0px); transition:0.4s 1.4s;} .pac .realtest .proc-list li:nth-child(9){opacity:0; transform:translateX(-20px);width: 270px;z-index:-5} .pac .in-view .realtest .proc-list li:nth-child(9){opacity:1; transform:translateX(0px); transition:0.4s 1.6s;} /*주의사항*/ .pac .cont-2{position:relative; padding-bottom:50px;} .pac .cont-3{position:relative;} .pac .cont-2 h3, .pac .cont-3 h3{margin-bottom:5px; font-size:22px; font-weight:600; line-height:1.8em; letter-spacing:-0.01em;} .pac .txt-list{} .pac .txt-list li{position:relative; font-size:18px; line-height:1.8em; letter-spacing:-0.01em; padding-left:15px;} .pac .txt-list li:before{content:""; display:block; width:3px; height:3px; border-radius:50%; background:#666; position:absolute; top:13px; left:0;} .pac .txt-list p{font-size:18px; line-height:1.8em; letter-spacing:-0.01em;} .pac .cont-2{opacity:0; transform:translateY(-20px);} .pac .cont-2.in-view{opacity:1; transform:translateY(0px); transition:2.4s;} .pac .cont-3{opacity:0; transform:translateY(-20px);} .pac .cont-3.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} _@media (max-width: 1170px){ .pac .proc-list li{width:33.333333%;} .pac .proc-list li:nth-child(3n):after, .pac .proc-list li:last-child:after, .pac .proc-list li:nth-child(3n) .num-top:after, .pac .proc-list li:last-child .num-top:after{display:none;} .pac .proc-list li:nth-child(4n):after, .pac .proc-list li:nth-child(4n) .num-top:after{display:inline-block;} .pac .proc-list li .cont-txt p{font-size:17px; line-height:23px;} } _@media (max-width: 860px){ .pac .cont-1{padding-bottom:0px;} .pac .proc-list li{width:50%;} .pac .proc-list li:nth-child(2n):after, .pac .proc-list li:nth-child(2n) .num-top:after{display:none;} .pac .proc-list li:nth-child(3n):after, .pac .proc-list li:nth-child(3n) .num-top:after{display:inline-block;} .pac .proc-list li:nth-child(4n):after, .pac .proc-list li:nth-child(4n) .num-top:after{display:none;} .pac .proc-list li:nth-child(6n):after, .pac .proc-list li:nth-child(6n) .num-top:after{display:none;} } _@media (max-width: 480px){ .pac .proc-list li{margin-bottom:40px;} .pac .proc-list li .num-top{width:38px; height:38px; margin-bottom:20px;} .pac .proc-list li .num-top:after{margin-left:11%;} .pac .proc-list li .num-top span{font-size:15px; line-height:40px;} .pac .proc-list li .icon{width:53px; height:56px;} .pac .proc-list li:first-child .icon{background-size:53px;} .pac .proc-list li:nth-child(2n) .icon{background-size:53px;} .pac .proc-list li:nth-child(3n) .icon{background-size:53px;} .pac .proc-list li:nth-child(4n) .icon{background-size:53px;} .pac .proc-list li:nth-child(5n) .icon{background-size:53px;} .pac .proc-list li:nth-child(6n) .icon{background-size:53px;} .pac .proc-list li:nth-child(7n) .icon{background-size:53px;} .pac .proc-list li .cont-txt{margin-top:10px;} .pac .proc-list li .cont-txt p{font-size:15px; line-height:21px;} .pac .cont-2 h3, .pac .cont-3 h3{font-size:20px;} .pac .txt-list li{font-size:16px;} .pac .txt-list li:before{top:10px;} .pac .txt-list p{font-size:16px;} } _@media (max-width: 380px){ .pac .cont-2{padding-bottom:20px;} .pac .proc-list li{width:100%;} .pac .proc-list li:first-child:after, .pac .proc-list li:first-child .num-top:after, .pac .proc-list li:nth-child(3n):after, .pac .proc-list li:nth-child(3n) .num-top:after, .pac .proc-list li:nth-child(5n):after, .pac .proc-list li:nth-child(5n) .num-top:after{display:none;} } /* sub3_2 : 이화학 시험*/ .invitro{position:relative; word-break:keep-all;} .invitro .cont-1{position:relative;} .invitro .cont-1 h4{margin-top: 70px;font-size:28px; font-weight:500;color:#333333} .invitro_ .process{} .invitro_ .sub-tit-bottom{ font-size: 20px; font-weight: 300; margin-top: 35px; margin-bottom: 70px; line-height: 34px; display: block;} .invitro_{opacity:0; transform:translateY(-20px);} .invitro_.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} .invitro .cont-1 h4.tit{margin-top: 15px !important; margin-bottom:0} .invitro .cont-1 .txt{ font-size: 18px; font-weight: 300; padding-top: 25px; line-height: 32px; color: #272727;} .cont-2 .center_tit{text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 90px; text-align: center; padding-top: 100px;} .addtit{ padding-top: 25px; font-size: 18px; color: #000;} .invitro .notice{padding-top: 20px;} .invitro .notice .addcomment{ line-height: 28px;} .invitro .notice .notice_top, .invitro .notice .notice_bottom{ font-size: 18px; font-weight: 400; line-height: 40px; color: #272727;} .invitro .notice .notice_bottom{ line-height: 30px;} .invitro .notice .notice_bottom em{} /*이화학 공통*/ .invitro .proc-list li{background: url(/design/dermacle/img/pc/icons/test/01/bg_full.png) repeat;} .invitro .proc-list li:after{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_next.png) no-repeat; width: 40px; height: 90px; display: inline-block; vertical-align: top; position: absolute;} .invitro .proc-list li.mid-last:after{background-color: #fff;} .invitro .proc-list li:nth-child(1):before, .invitro .proc-list li.enter:before{ content: "-"; background: url(/design/dermacle/img/pc/icons/test/01/bg_first.png) no-repeat; width: 18px; height: 90px; display: inline-block; vertical-align: top; position: absolute; left: 0; background-color: #fff;} .invitro .proc-list li.last:after{ background-color: #fff !important; content:"-";background: url(/design/dermacle/img/pc/icons/test/01/bg_last.png) no-repeat;} .invitro .go_btn{width:400px; height:74px; line-height:74px; color:#fff;font-weight:500; font-size:24px;text-align:center; border-radius:50px; margin: 85px auto 190px;background:#0080ff;display:block} .invitro .proc-list li .cont-txt{display: inline-block; vertical-align: middle;} .invitro .proc-list li .cont-txt p{font-size: 18px; color: #333; font-weight: 400;} .invitro .proc-list{font-size:0; text-align: left; margin-top: 35px;} .invitro .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .invitro .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle;} /*견적내기*/ .invitro .price .proc-list{font-size:0; text-align: left;} .invitro .price .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; margin-bottom: 10px; height: 90px;} .invitro .price .proc-list li .icon{width: 90px;display: inline-block; height: 90px; margin: 0 auto; vertical-align: middle; margin-left: -15px;} .invitro .price .proc-list li:first-child .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_01.png") no-repeat 50% 50%;} .invitro .price .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_02.png") no-repeat 50% 50%;} .invitro .price .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_03.png") no-repeat 50% 50%;} .invitro .price .proc-list li:nth-child(4) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_04.png") no-repeat 50% 50%;} .invitro .price .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_05.png") no-repeat 50% 50%;} .invitro .price .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/01/price_ico_06.png") no-repeat 50% 50%;} .invitro .price .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 360px;} .invitro .in-view .price .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .invitro .price .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);width: 300px;} .invitro .in-view .price .proc-list li:nth-child(2){ opacity: 1; transform: translateX(0px); transition: 0.4s 0.2s; z-index: -1;} .invitro .price .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 450px; z-index: -2;} .invitro .in-view .price .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .invitro .price .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);width: 400px; margin-left: 0;} .invitro .in-view .price .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .invitro .price .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px); width: 250px;z-index:-2} .invitro .in-view .price .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .invitro .price .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 290px;z-index:-3} .invitro .in-view .price .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} /*실제 시험의뢰*/ .invitro .realtest .proc-list li:first-child .icon,.invitro .realtest .proc-list li.enter .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_01.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:nth-child(2) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_02.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:nth-child(3) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_03.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:nth-child(4) .icon{background: url(/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_04.png) no-repeat 50% 50%; padding-left: 30px; margin-right: -10px;} .invitro .realtest .proc-list li:nth-child(5) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_05.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:nth-child(6) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_06.png") no-repeat 50% 50%; } .invitro .realtest .proc-list li:nth-child(7) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_07.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:nth-child(8) .icon{background:url("/design/dermacle/img/pc/icons/test/02/pac_realtest_ico_08.png") no-repeat 50% 50%;} .invitro .realtest .proc-list li:first-child{opacity:0; transform:translateX(-20px);width: 200px;} .invitro .in-view .realtest .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s; margin-left: 0;} .invitro .realtest .proc-list li:nth-child(2){padding: 0 30px; opacity:0; transform:translateX(-20px);} .invitro .in-view .realtest .proc-list li:nth-child(2){opacity: 1; transform: translateX(0px);transition: 0.4s 0.2s; z-index: -1;} .invitro .realtest .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);width: 350px; z-index: -2; padding-left: 10px;} .invitro .in-view .realtest .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .invitro .realtest .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);_width: 254px; margin-left: 0; } .invitro .in-view .realtest .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .invitro .realtest .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);width: 218px;z-index:-1; padding-left: 35px;} .invitro .in-view .realtest .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .invitro .realtest .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);width: 250px;z-index:-2; padding-left: 30px;} .invitro .in-view .realtest .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} .invitro .realtest .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px);width: 260px;z-index:-3} .invitro .in-view .realtest .proc-list li:nth-child(7){opacity:1; transform:translateX(0px); transition:0.4s 1.2s;} .invitro .realtest .proc-list li:nth-child(8){opacity:0; transform:translateX(-20px);width: 260px;z-index:-4; padding-left: 15px;} .invitro .in-view .realtest .proc-list li:nth-child(8){opacity:1; transform:translateX(0px); transition:0.4s 1.4s;} .invitro .realtest .proc-list li:nth-child(9){opacity:0; transform:translateX(-20px);width: 270px;z-index:-5} .invitro .in-view .realtest .proc-list li:nth-child(9){opacity:1; transform:translateX(0px); transition:0.4s 1.6s;} /*주의사항*/ .invitro .cont-2{position:relative; padding-bottom:50px;} .invitro .cont-3{position:relative;} .invitro .cont-2 h3, .invitro .cont-3 h3{margin-bottom:5px; font-size:22px; font-weight:600; line-height:1.8em; letter-spacing:-0.01em;} .invitro .txt-list{} .invitro .txt-list li{position:relative; font-size:18px; line-height:1.8em; letter-spacing:-0.01em; padding-left:15px;} .invitro .txt-list li:before{content:""; display:block; width:3px; height:3px; border-radius:50%; background:#666; position:absolute; top:13px; left:0;} .invitro .txt-list p{font-size:18px; line-height:1.8em; letter-spacing:-0.01em;} .invitro .cont-2{opacity:0; transform:translateY(-20px);} .invitro .cont-2.in-view{opacity:1; transform:translateY(0px); transition:2.4s;} .invitro .cont-3{opacity:0; transform:translateY(-20px);} .invitro .cont-3.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} _@media (max-width: 1170px){ .invitro .proc-list li{width:33.333333%;} .invitro .proc-list li:nth-child(3n):after, .invitro .proc-list li:last-child:after, .invitro .proc-list li:nth-child(3n) .num-top:after, .invitro .proc-list li:last-child .num-top:after{display:none;} .invitro .proc-list li:nth-child(4n):after, .invitro .proc-list li:nth-child(4n) .num-top:after{display:inline-block;} .invitro .proc-list li .cont-txt p{font-size:17px; line-height:23px;} } _@media (max-width: 860px){ .invitro .cont-1{padding-bottom:0px;} .invitro .proc-list li{width:50%;} .invitro .proc-list li:nth-child(2n):after, .invitro .proc-list li:nth-child(2n) .num-top:after{display:none;} .invitro .proc-list li:nth-child(3n):after, .invitro .proc-list li:nth-child(3n) .num-top:after{display:inline-block;} .invitro .proc-list li:nth-child(4n):after, .invitro .proc-list li:nth-child(4n) .num-top:after{display:none;} .invitro .proc-list li:nth-child(6n):after, .invitro .proc-list li:nth-child(6n) .num-top:after{display:none;} } _@media (max-width: 480px){ .invitro .proc-list li{margin-bottom:40px;} .invitro .proc-list li .num-top{width:38px; height:38px; margin-bottom:20px;} .invitro .proc-list li .num-top:after{margin-left:11%;} .invitro .proc-list li .num-top span{font-size:15px; line-height:40px;} .invitro .proc-list li .icon{width:53px; height:56px;} .invitro .proc-list li:first-child .icon{background-size:53px;} .invitro .proc-list li:nth-child(2n) .icon{background-size:53px;} .invitro .proc-list li:nth-child(3n) .icon{background-size:53px;} .invitro .proc-list li:nth-child(4n) .icon{background-size:53px;} .invitro .proc-list li:nth-child(5n) .icon{background-size:53px;} .invitro .proc-list li:nth-child(6n) .icon{background-size:53px;} .invitro .proc-list li:nth-child(7n) .icon{background-size:53px;} .invitro .proc-list li .cont-txt{margin-top:10px;} .invitro .proc-list li .cont-txt p{font-size:15px; line-height:21px;} .invitro .cont-2 h3, .invitro .cont-3 h3{font-size:20px;} .invitro .txt-list li{font-size:16px;} .invitro .txt-list li:before{top:10px;} .invitro .txt-list p{font-size:16px;} } _@media (max-width: 380px){ .invitro .cont-2{padding-bottom:20px;} .invitro .proc-list li{width:100%;} .invitro .proc-list li:first-child:after, .invitro .proc-list li:first-child .num-top:after, .invitro .proc-list li:nth-child(3n):after, .invitro .proc-list li:nth-child(3n) .num-top:after, .invitro .proc-list li:nth-child(5n):after, .invitro .proc-list li:nth-child(5n) .num-top:after{display:none;} } /* sub4_1 : 시험의뢰안내*/ .request{position:relative; word-break:keep-all;} .request .cont-1{position:relative;} .request .cont-1 h4{margin-top: 70px;font-size:28px; font-weight:500;color:#333333} .request .cont-1 .addcomment{line-height:30px; color: #272727;} .request_ .process{} .request_ .sub-tit-bottom{ font-size: 20px; font-weight: 300; margin-top: 35px; margin-bottom: 70px; line-height: 34px; display: block;} .request .cont-1 .addcomment.light{ color: #838383;} .request_{opacity:0; transform:translateY(-20px);} .request_.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} .request .cont-1 h4.tit{margin-top: 15px !important; margin-bottom:0} .request .cont-1 .txt{ font-size: 18px; font-weight: 300; padding-top: 25px; line-height: 32px; color: #272727;} .cont-2 .center_tit{text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 90px; text-align: center; padding-top: 100px;} .addtit{ padding-top: 25px; font-size: 18px; color: #000;} .addcomment{ font-size: 18px; font-weight: 300; padding-top: 25px; color: #838383; padding-bottom: 50px;} .request .notice{padding-top: 20px;} .request .notice .addcomment{ line-height: 28px;} .request .notice .notice_top, .request .notice .notice_bottom{ font-size: 18px; font-weight: 400; line-height: 40px; color: #272727;} .request .notice .notice_bottom{ line-height: 30px;} .request .notice .notice_bottom em{} .request .go_btn{width:400px; height:74px; line-height:74px; color:#fff;font-weight:500; font-size:24px;text-align:center; border-radius:50px; margin: 85px auto 190px;background:#0080ff;display:block} .request .proc-list{border-radius: 20px; background: #f9f9f9; padding: 60px 35px 0; display: flex;} .request .proc-list li{text-align:center; display:inline-block; position:relative; padding-right: 60px; vertical-align:top; margin-bottom:40px;} .request .proc-list li .num-top{ display: inline-block; border-radius: 50%; width: 10px; height: 10px; position:relativ; background: #0080ff; text-align: center; margin-bottom: 20px;} /*의뢰_견적*/ .request .request_price .proc-list li .num-top:after{ content: ""; display: block; height: 2px; background: #cce6ff; width: 86%; position: absolute; top: 4px; z-index: -1; left: 63px } .request .request_price .proc-list li:first-child{opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s;} .request .request_price .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(2){opacity:1; transform:translateX(0px); transition:0.4s 0.2s;} .request .request_price .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .request .request_price .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .request .request_price .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .request .request_price .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} .request .request_price .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px);} .request .in-view .request_price .proc-list li:nth-child(7n){opacity:1; transform:translateX(0px); transition:0.4s 1.2s;} .request .request_price .proc-list li:nth-child(1) .num-top:after{width:140px !important} .request .request_price .proc-list li:nth-child(2) .num-top:after{width:140px !important} .request .request_price .proc-list li:nth-child(3) .num-top:after{width:235px !important} .request .request_price .proc-list li:nth-child(4) .num-top:after{width: 260px !important; left: 156px;} .request .request_price .proc-list li:nth-child(5) .num-top:after{width: 155px !important; left: 87px;} .request .request_price .proc-list li:last-child:after,.request .request_price .proc-list li:last-child .num-top:after{display:none;} .request .request_price .proc-list li:nth-last-child(1){padding-right:0; position:absolute; right:35px} .request .request_price .proc-list li:nth-last-child(1) .num-top:after {right: 35px;} /*의뢰_견적*/ /*의뢰_실제시험*/ .request .request_real .proc-list li{padding-right:30px} .request .request_real .proc-list li .num-top:after{ content: ""; display: block; height: 2px; background: #cce6ff; width: 86%; position: absolute; top: 4px; z-index: -1; left: 45px } .request .request_real .proc-list li:nth-child(1) .num-top:after{width:228px !important} .request .request_real .proc-list li:nth-child(2) .num-top:after{width: 400px !important; left: 200px;} .request .request_real .proc-list li:nth-child(3) .num-top:after{ width: 291px !important; left: 225px;} .request .request_real .proc-list li:nth-child(4) .num-top:after{width: 93px !important; left: 30px;opacity:0} .request .request_real .proc-list li:nth-child(5) .num-top:after{width: 178px !important; left: 93px;} .request .request_real .proc-list li:nth-child(6) .num-top:after{width: 253px !important; left: 145px;} .request .request_real .proc-list li:nth-child(7) .num-top:after{width: 220px !important; left: 170px;} .request .request_real .proc-list li:nth-child(8) .num-top:after{width: 187px !important; left: 120px;} .request .request_real .proc-list li:last-child:after,.request .request_real .proc-list li:last-child .num-top:after{display:none;} .request .request_real .proc-list li:nth-last-child(1){ padding-right: 0; padding-left: 35px;} .request .request_real .proc-list li:nth-last-child(1) .num-top:after {right: 35px;} .request .request_real .proc-list li:first-child{opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:0.4s;} .request .request_real .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:nth-child(2){opacity:1; transform:translateX(0px); transition:0.4s 0.2s;padding-left: 10px;} .request .request_real .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); padding-left: 15px;transition:0.4s 0.4s;} .request .request_real .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .request .request_real .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s; padding-left: 50px;} .request .request_real .proc-list li:nth-child(6){opacity:0; transform:translateX(-20px); padding-left: 50px;} .request .in-view .request_real .proc-list li:nth-child(6){opacity:1; transform:translateX(0px); transition:0.4s 1.0s;} .request .request_real .proc-list li:nth-child(7){opacity:0; transform:translateX(-20px); padding-left: 60px;} .request .in-view .request_real .proc-list li:nth-child(7){opacity:1; transform:translateX(0px); transition:0.4s 1.2s;} .request .request_real .proc-list li:nth-child(8){opacity:0; transform:translateX(-20px); padding-left: 50px;} .request .in-view .request_real .proc-list li:nth-child(8){opacity:1; transform:translateX(0px); transition:0.4s 1.4s;} .request .request_real .proc-list li:nth-child(9){opacity:0; transform:translateX(-20px);} .request .in-view .request_real .proc-list li:nth-child(9){opacity:1; transform:translateX(0px); transition:0.4s 1.6s;} /*의뢰_실제시험*/ .request .proc-list li .num-top span{color:#fff; font-size:18px; line-height:42px; font-weight:500;} .request .proc-list li .cont-txt{ display: table; _margin-top:10px;} .request .proc-list li .cont-txt small{font-size:16px; color:#7a52dd; font-weight:600;} .request .proc-list li .cont-txt p{ font-size: 18px; line-height: 30px; color: #333; font-weight: 400; margin-top: 0;} /*결제방법*/ .request .payment .proc-list{display: flex; background: none; padding: 0; border-radius: 0;} .request p strong{ line-height: 30px; margin-bottom: 20px; display: block; font-weight: inherit; font-size: 20px;} .request .payment .proc-list.ex02 li{margin-right: 15px;} .request .payment .proc-list li{ padding-right: 0; height: 50px; border-radius: 25px; background: #0080ff; line-height: 50px; padding: 0 20px;} .request .payment .proc-list li:after{content: ">"; top: 0; background: url(/design/dermacle/img/pc/icons/payment_arrow.png) no-repeat center; font-size: 0; width: 19px; position: absolute; right: -12px;} .request .payment .proc-list li:nth-last-child(1):after{opacity:0} .request .payment .proc-list li .cont-txt{} .request .payment .proc-list li .cont-txt p{ color: #fff; font-size: 20px; font-weight: 400; display: table-cell; height: 50px; white-space: pre; line-height: 48px;} .request .payment .proc-list li:first-child{opacity:0; transform:translateX(-20px);} .request .in-view .payment .proc-list li:first-child{opacity:1; transform:translateX(0px); transition:3.4s;} .request .payment .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);} .request .in-view .payment .proc-list li:nth-child(2){opacity:1; transform:translateX(0px); transition:3.4s 0.2s;} .request .payment .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);} .request .in-view .payment .proc-list li:nth-child(3){opacity:1; transform:translateX(0px);transition:3.4s 0.4s;} .request .payment .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px);} .request .in-view .payment .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:3.4s 0.6s;} .request .payment .proc-list li:nth-child(5){opacity:0; transform:translateX(-20px);} .request .in-view .payment .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:3.4s 0.8s; margin-right: 0 !important;} /*결제*/ _@media (max-width: 1170px){ .request .proc-list li{width:33.333333%;} .request .proc-list li:nth-child(3n):after, .request .proc-list li:last-child:after, .request .proc-list li:nth-child(3n) .num-top:after, .request .proc-list li:last-child .num-top:after{display:none;} .request .proc-list li:nth-child(4n):after, .request .proc-list li:nth-child(4n) .num-top:after{display:inline-block;} .request .proc-list li .cont-txt p{font-size:17px; line-height:23px;} } _@media (max-width: 860px){ .request .cont-1{padding-bottom:0px;} .request .proc-list li{width:50%;} .request .proc-list li:nth-child(2n):after, .request .proc-list li:nth-child(2n) .num-top:after{display:none;} .request .proc-list li:nth-child(3n):after, .request .proc-list li:nth-child(3n) .num-top:after{display:inline-block;} .request .proc-list li:nth-child(4n):after, .request .proc-list li:nth-child(4n) .num-top:after{display:none;} .request .proc-list li:nth-child(6n):after, .request .proc-list li:nth-child(6n) .num-top:after{display:none;} } _@media (max-width: 480px){ .request .proc-list li{margin-bottom:40px;} .request .proc-list li .num-top{width:38px; height:38px; margin-bottom:20px;} .request .proc-list li .num-top:after{margin-left:11%;} .request .proc-list li .num-top span{font-size:15px; line-height:40px;} .request .proc-list li .icon{width:53px; height:56px;} .request .proc-list li:first-child .icon{background-size:53px;} .request .proc-list li:nth-child(2n) .icon{background-size:53px;} .request .proc-list li:nth-child(3n) .icon{background-size:53px;} .request .proc-list li:nth-child(4n) .icon{background-size:53px;} .request .proc-list li:nth-child(5n) .icon{background-size:53px;} .request .proc-list li:nth-child(6n) .icon{background-size:53px;} .request .proc-list li:nth-child(7n) .icon{background-size:53px;} .request .proc-list li .cont-txt{margin-top:10px;} .request .proc-list li .cont-txt p{font-size:15px; line-height:21px;} .request .cont-2 h3, .request .cont-3 h3{font-size:20px;} .request .txt-list li{font-size:16px;} .request .txt-list li:before{top:10px;} .request .txt-list p{font-size:16px;} } _@media (max-width: 380px){ .request .cont-2{padding-bottom:20px;} .request .proc-list li{width:100%;} .request .proc-list li:first-child:after, .request .proc-list li:first-child .num-top:after, .request .proc-list li:nth-child(3n):after, .request .proc-list li:nth-child(3n) .num-top:after, .request .proc-list li:nth-child(5n):after, .request .proc-list li:nth-child(5n) .num-top:after{display:none;} } /*참여안내*/ .parti{position:relative; word-break:keep-all;} .parti .cont-1{position:relative;} .parti .cont-1 h4{margin-top: 70px;font-size:28px; font-weight:500;color:#333333} .parti_ .process{} .parti_ .sub-tit-bottom{ font-size: 20px; font-weight: 300; margin-top: 35px; line-height: 34px; display: block;} .parti_{opacity:0; transform:translateY(-20px);} .parti_.in-view{opacity:1; transform:translateY(0px); transition:0.4s;} .parti .cont-1 h4.tit{margin-top: 15px !important; margin-bottom:0} .parti .cont-1 .txt{ font-size: 18px; font-weight: 300; padding-top: 25px; line-height: 32px; color: #272727;} .cont-2 .center_tit{text-transform: uppercase; font-weight: bold; line-height: 1.2em; font-size: 40px; color: #000; font-family: 'Rubik'; padding-bottom: 90px; text-align: center; padding-top: 100px;} .addtit{ padding-top: 25px; font-size: 18px; color: #000;} .parti .notice{ padding-top: 15px;} .parti .notice .addcomment{ line-height: 28px;} .parti .notice .notice_top{ font-size: 18px; font-weight: 400; line-height: 26px; color: #272727;} .parti .notice .notice_bottom{ font-size: 18px; font-weight: 400; line-height: 40px; color: #272727;} .parti .notice .notice_bottom{ font-weight: 500; padding-top: 60px; line-height: 1;} .parti .notice .notice_bottom em{} /*과정*/ .parti .process .proc-list{font-size:0; text-align: left; padding: 75px 0 45px;} .parti .process .proc-list li{text-align:center; display:inline-block; position:relative;vertical-align:top; height: 90px;} .parti .process .proc-list li:first-child{opacity:0; transform:translateX(-20px);background: url(/design/dermacle/img/pc/icons/parti01.png) no-repeat;width: 239px} .parti .in-view .process .proc-list li:first-child{opacity: 1; transform: translateX(0px); transition: 0.4s; margin-left: 0;} .parti .process .proc-list li:nth-child(2){opacity:0; transform:translateX(-20px);background: url(/design/dermacle/img/pc/icons/parti02.png) no-repeat right;width: 331px;margin-left: -55px;} .parti .in-view .process .proc-list li:nth-child(2){opacity: 1; transform: translateX(0px); transition: 0.4s 0.2s; z-index: -1;} .parti .process .proc-list li:nth-child(3){opacity:0; transform:translateX(-20px);z-index: -2; background: url(/design/dermacle/img/pc/icons/parti03.png) no-repeat right;width: 290px; margin-left: -45px;} .parti .in-view .process .proc-list li:nth-child(3){opacity:1; transform:translateX(0px); transition:0.4s 0.4s;} .parti .process .proc-list li:nth-child(4){opacity:0; transform:translateX(-20px); z-index: -3;background: url(/design/dermacle/img/pc/icons/parti04.png) no-repeat right;width: 345px;margin-left: -45px;z-index:-3} .parti .in-view .process .proc-list li:nth-child(4){opacity:1; transform:translateX(0px); transition:0.4s 0.6s;} .parti .process .proc-list li:nth-child(5){opacity: 0; transform: translateX(-20px); z-index: -4; background: url(/design/dermacle/img/pc/icons/parti05.png) no-repeat right; width: 195px; margin-left: -55px;} .parti .in-view .process .proc-list li:nth-child(5){opacity:1; transform:translateX(0px); transition:0.4s 0.8s;} .parti .process .proc-list .cont-txt p{ color: #fff; font-size: 20px; font-weight: 400; height: 90px; line-height: 87px;} /* 마이페이지 */ #mp .test-tab{overflow:hidden; margin-bottom:40px; width:100%; position:relative;} #mp .test-tab li{float:left; width:50%; display:table; cursor:pointer;} #mp .test-tab li:first-child a{border-left:none;} #mp .test-tab li a{ padding:20px 5px; overflow:hidden; display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; font-size:18px; line-height:24px; letter-spacing:-.5px; color:#1c1c1c; border-top:1px solid #f3f2f6; border-bottom:1px solid #f3f2f6; border-left:1px solid #e3dee4; background:#f3f2f6; } #mp .test-tab li a.on{color:#5833b5; font-weight:500; border:1px solid #6d5bbf; background:#fff;} _@media (max-width: 480px){ #mp .test-tab li a{padding:15px 5px; font-size:16px; line-height:22px;} } _@media (max-width: 360px){ #mp .test-tab li{width:100%;} #mp .test-tab li:first-child a, #mp .test-tab li:nth-child(2n) a, #mp .test-tab li:nth-child(3n) a, #mp .test-tab li:nth-child(4n) a{border-left:none;} #mp .test-tab li:nth-child(3n) a{border-bottom:1px solid #e3dee4;} #mp .test-tab li:first-child a.on, #mp .test-tab li:nth-child(2n) a.on{border-left:1px solid #6d5bbf;} #mp .test-tab li:nth-child(3n) a.on{border-bottom:1px solid #6d5bbf;} } #mp .mp-wrap .mp-form dl{border-top:1px solid #ccc; display:flex; flex-wrap: wrap; font-size:17px; line-height:180%; color:#222;} #mp .mp-wrap .mp-form dl dt{padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; flex:1 1 20%; font-weight:500;} #mp .mp-wrap .mp-form dl dt span{} #mp .mp-wrap .mp-form dl dd{padding:15px 25px; background:#fff;border-bottom:1px solid #ccc; flex:1 1 80%; font-weight:400;} #mp .mp-wrap .mp-form dl dd:after{clear:both; content:""; display:block;} #mp .mp-wrap .mp-form dl dd .input-call{width:80px;} #mp .mp-wrap .mp-form dl dd .apply-time{width:224px;} #mp .mp-wrap .mp-form dl dd textarea{width:100%; min-height:300px; border-radius:3px; border: 1px solid #ccc;} #mp .mp-wrap .btn-bottom-center{margin-top:15px;} #mp .mp-wrap .btn-bottom-center{clear:both; text-align:center; margin-top:40px; font-size:0;} #mp .mp-wrap .view-bottom-btn{text-align:center; display:inline-block; margin:0 auto; font-size:20px; font-weight:500; line-height:1; padding:15px 25px; background:#684ab3; color:#fff;} #mp .mp-wrap .view-bottom-btn:hover{opacity:0.9; transition:.2s ease-out;} #mp .mp-wrap .list-table{position:relative; text-align:center;} #mp .mp-wrap .list-table table{width:100%; border-collapse:collapse; border-spacing:0 5px; border-top:1px solid #ececec; border-bottom:1px solid #ececec; margin-bottom:30px;} #mp .mp-wrap .list-table thead th{padding:20px 0; font-weight:normal; text-align:center; border-bottom:2px solid #ececec; height:40px} #mp .mp-wrap .list-table tfoot th, #mp .mp-wrap .list-table tfoot td{padding:10px 0;border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center;} #mp .mp-wrap .list-table tbody th{padding:8px 0; border-bottom:1px solid #e8e8e8} #mp .mp-wrap .list-table td {color:#666; padding:10px 5px; border-top:1px solid #ecf0f1; border-bottom:1px solid #ecf0f1; line-height:16px; height:60px; word-break:keep-all;} #mp .mp-wrap .list-table tbody tr:hover td{background:#fafafa} #mp .mp-wrap .mp-list-btn-wrap{position:relative; margin-top:30px;} #mp .mp-wrap .mp-list-btn-wrap:after{clear:both; content:""; display:block;} #mp .mp-wrap .mp-btn{display:inline-block; color:#fff; font-weight:400; font-size:16px; text-align:center; padding:10px 15px; line-height:1;} #mp .mp-wrap .mp-list-btn-wrap .btn-1{background:#999;} #mp .mp-wrap .mp-list-btn-wrap .btn-2{float:right; background:#684ab3;} _@media (max-width: 767px){ #mp .mp-wrap .mp-form dl{font-size:14px; line-height:160%;} #mp .mp-wrap .mp-form dl dt{padding:10px 15px;} #mp .mp-wrap .mp-form dl dd{padding:10px 15px;} } _@media (max-width: 460px){ #mp .mp-wrap .mp-form dl dt{flex:100%; border-right:0;} #mp .mp-wrap .mp-form dl dd{flex:100%; padding:10px 15px 10px 0;} } /* sub4_3 : 시험진행사례 */ #case{width:100%; position:relative;} #case .case-wrap{position:relative;} /* CASE(시험진행사례)-LIST */ #case .case-wrap .case-list{font-size:0; position:relative;} #case .case-list .item{position:relative; display:inline-block; vertical-align:top; margin-right:30px; width:calc(25% - 23px); margin-bottom:60px; border:1px solid #f4f4f4;} #case .case-list .item a{display:block; width:100%; /*max-width:418px;*/ height:100%; overflow:hidden; background:#f8f8f8;} #case .case-list .item a>span{display:block;} #case .case-list .item a .img{width:100%; height:0; padding-bottom:67%; text-align:center; background:#fff; overflow:hidden; position:relative;} #case .case-list .item a .img img{/*max-width:418px;*/ width:100%; vertical-align:middle; } #case .case-list .item a .item-cont{padding:20px 30px 25px; width:100%; display:block; position:relative; height:180px;} #case .case-list .item a>*{display:block;letter-spacing:-.3px;} #case .case-list .item a .item-cont h3.ca-tit{font-size:20px; color:#222; font-weight:600; vertical-align:top; overflow:hidden;} #case .case-list .item a .item-cont dl.ca-brand{display:block; position:relative; font-size:0; margin-top:10px;} #case .case-list .item a .item-cont dl.ca-product{display:block; position:relative; font-size:0; /*margin-top:5px;*/} #case .case-list .item a .item-cont dl.ca-brand dt, #case .case-list .item a .item-cont dl.ca-product dt{font-size:14px; color:#222; font-weight:400; display:inline-block; width:20%; vertical-align:top;} #case .case-list .item a .item-cont dl.ca-brand dd, #case .case-list .item a .item-cont dl.ca-product dd{font-size:14px; color:#222; font-weight:500; display:inline-block; width: calc(100% - 20%); vertical-align:top; overflow:hidden;} #case .case-list .item a .item-cont dl.ca-brand dd{height:24px;} #case .case-list .item a .item-cont dl.ca-product dd{height:42px;} #case .case-list .item a .item-cont .date{position:absolute; bottom:25px; left:30px; display:block; font-size:13px; color:#8a8a8a; font-weight:500;} #case .case-list .item a:hover{transition:.2s ease-out;} _@media (min-width: 1440px) and (max-width: 4000px){ #case .case-list .item:nth-child(4n){margin-right:0;} } _@media (min-width: 1170px) and (max-width: 1440px){ #case .case-list .item{margin-right:30px; width:calc(33.33333333% - 23px);} #case .case-list .item:nth-child(3n){margin-right:0;} } _@media (min-width: 767px) and (max-width: 1170px){ #case .case-list .item{margin-right:30px; width:calc(50% - 23px);} #case .case-list .item:nth-child(2n){margin-right:0;} } _@media (max-width: 767px){ #case .case-list .item{margin-bottom:30px; margin-right:0; width:100%;} } /* 롤오버효과 */ #case .case-list .line span.l1:before{display:block; content:""; width:0; height:4px; background:#523891; position:absolute; left:0; top:0; transition:all 0s; z-index:1;} #case .case-list .line span.l1:after{display:block; content:""; width:4px; height:0; background:#523891; position:absolute; right:0; top:0; transition:all 0s; z-index:1;} #case .case-list .line span.l2:before{display:block; content:""; width:0; height:4px; background:#523891; position:absolute; right:0; bottom:0; transition:all 0s; z-index:1;} #case .case-list .line span.l2:after{display:block; content:""; width:4px; height:0; background:#523891; position:absolute; left:0; bottom:0; transition:all 0s; z-index:1;} #case .case-list .item:hover .img .line span.l1:before{width:100%; height:4px; transition:all 0.2s linear;} #case .case-list .item:hover .img .line span.l1:after{width:4px; height:100%; transition:all 0.2s 0.05s linear;} #case .case-list .item:hover .img .line span.l2:before{width:100%; height:4px; transition:all 0.2s 0.1s linear;} #case .case-list .item:hover .img .line span.l2:after{width:4px; height:100%; transition:all 0.2s 0.15s linear;} #case .case-list .img img{width:100%; opacity:0} #case .in-view .case-list .item .img img{transition:opacity 0.5s .4s, transform .3s linear; opacity:1;} #case .case-list .item:hover .img img{transform:scale(1.06); transition:transform .4s linear;} /* CASE(시험진행사례)-VIEW */ #case .case-wrap .case-view{position:relative;} #case .case-view .view-tit{position:relative; width:100%; display:block; margin-bottom:30px;} #case .case-view .view-tit h2.top-tit{font-size:28px;} #case .case-view .view-top{position:relative; margin-bottom:20px; vertical-align:top; font-size:0; margin-bottom:40px;} #case .case-view .view-img{position:relative; display:inline-block; vertical-align:top; margin-right:5%; width:calc(100% - 65%);border:1px solid #f4f4f4;} #case .case-view .view-img img{width:100%;} #case .case-view .view-cont{position:relative; display:inline-block; width:55%; padding:30px 0; height:100%; overflow:hidden;} #case .case-view .view-cont h3.ca-tit{font-size:24px; color:#222; font-weight:600; vertical-align:top; overflow:hidden;} #case .case-view .view-cont dl.ca-brand{display:block; position:relative; font-size:0; margin-top:5px;} #case .case-view .view-cont dl.ca-product{display:block; position:relative; font-size:0; margin-top:5px;} #case .case-view .view-cont dl.ca-brand dt, #case .case-view .view-cont dl.ca-product dt{font-size:17px; color:#222; font-weight:400; display:inline-block; width:20%; vertical-align:top;} #case .case-view .view-cont dl.ca-brand dd, #case .case-view .view-cont dl.ca-product dd{font-size:17px; color:#222; font-weight:500; display:inline-block; width: calc(100% - 20%); vertical-align:top; overflow:hidden;} #case .case-view .view-cont p.cont-txt{margin-top:30px; display:block; font-size:16px; line-height:1.7; color:#666; font-weight:400;} #case .view-bottom{clear:both; position:relative; width:100%;} #case .view-bottom img{width:100%;} _@media (max-width: 1024px){ #case .case-view .view-img{margin:0 auto; width:100%;} #case .case-view .view-cont{width:100%;} #case .case-view .view-cont dl.ca-brand dt, #case .case-view .view-cont dl.ca-product dt{width:auto; margin-right:10px;} #case .case-view .view-cont dl.ca-brand dd, #case .case-view .view-cont dl.ca-product dd{width:auto;} } _@media (max-width: 767px){ #case .case-view .view-tit{margin-bottom:15px;} #case .case-view .view-tit h2.top-tit{font-size:20px;} } /* sub5_1 : E-IRB */ #eirb{width:100%; position:relative;} #eirb .eirb-wrap{position:relative;} /* E-IRB(시험진행사례)-관리자 LIST */ #eirb .eirb-wrap .eirb-list{} #eirb .eirb-wrap .eirb-list .list-table{position:relative; text-align:center;} #eirb .eirb-wrap .eirb-list .list-table table{width:100%; border-collapse:collapse; border-spacing:0 5px; border-top:1px solid #ececec; border-bottom:1px solid #ececec; margin-bottom:30px;} #eirb .eirb-wrap .eirb-list .list-table thead th{padding:20px 0; font-weight:normal; text-align:center; border-bottom:2px solid #ececec; height:40px} #eirb .eirb-wrap .eirb-list .list-table tfoot th, #eirb .eirb-wrap .eirb-list .list-table tfoot td{padding:10px 0;border-top:1px solid #c1d1d5; border-bottom:1px solid #c1d1d5; background:#d7e0e2; text-align:center;} #eirb .eirb-wrap .eirb-list .list-table tbody th{padding:8px 0; border-bottom:1px solid #e8e8e8} #eirb .eirb-wrap .eirb-list .list-table td {color:#666; padding:10px 6px; border-top:1px solid #ecf0f1; border-bottom:1px solid #ecf0f1; line-height:160%; height:60px; word-break:keep-all;} #eirb .eirb-wrap .eirb-list .list-table tbody tr:hover td{background:#fafafa} #eirb .eirb-wrap .bottom-btn-wrap{text-align:center; margin-top:40px;} #eirb .eirb-wrap .eirb-btn{display:inline-block; padding:8px 12px; background:#684ab3; color:#fff; font-size:13px; line-height:1; text-align:center; line-height:150%;} #eirb .eirb-wrap .eirb-E-btn{display:inline-block; padding:8px 12px; background:#808080; color:#fff; font-size:13px; line-height:1; text-align:center;} #eirb .eirb-wrap .eirb-bt-btn{display:inline-block; padding:15px 25px; border:0; font-size:18px; line-height:1; background:#684ab3; color:#fff; text-align:center;} #eirb .eirb-wrap .eirb-bt-btn:after{clear:both; content:""; display:block;} /* E-IRB(시험진행사례)-관리자 VIEW */ #eirb .eirb-wrap .eirb-view{position:relative; margin-bottom:40px;} #eirb .eirb-wrap .eirb-view dl{border-top:1px solid #ccc; display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222;} #eirb .eirb-wrap .eirb-view dl dt{padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; flex:1 1 20%; font-weight:500;} #eirb .eirb-wrap .eirb-view dl dt span{} #eirb .eirb-wrap .eirb-view dl dd{padding:15px 25px; background:#fff;border-bottom:1px solid #ccc; flex:1 1 80%; font-weight:400;} #eirb .eirb-wrap .eirb-view dl dd:after{clear:both; content:""; display:block;} #eirb .eirb-wrap .eirb-exami{position:relative;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap{position:relative;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap:after{clear:both; content:""; display:block;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .eirb-btn{display:inline-block; color:#fff; font-weight:400; font-size:16px; text-align:center; padding:10px 15px; line-height:1;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .btn-1{background:#2bb2c3;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .btn-2{background:#999;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .btn-3{background:#666;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .btn-4{float:right; background:#684ab3;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .eirb-btn-table {width:100%;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .eirb-btn-table th {padding:15px 5px; text-align:center; border-top:1px solid #ccc; background: #684ab3; color:#fff; width:16.5%;} #eirb .eirb-wrap .eirb-exami .eirb-btn-wrap .eirb-btn-table td {padding:15px 5px; text-align:center; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width:16.5%;} #eirb .eirb-exami .eirb-exami-top{position:relative;} #eirb .eirb-exami .eirb-exami-top h3{text-align:center; font-size:30px; color:#111; font-weight:500;} #eirb .eirb-exami .eirb-exami-top:after{clear:both; content:""; display:block;} #eirb .eirb-exami .eirb-exami-top dl{margin-top:40px; border-top:1px solid #ccc; display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222; width:33.33333333%; float:left;} #eirb .eirb-exami .eirb-exami-top dt{display:block; width:50%; padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-weight:500;} #eirb .eirb-exami .eirb-exami-top dd{display:block; width:50%; padding:15px; background:#fff; border-bottom:1px solid #ccc; font-weight:400; text-align:center;} #eirb .eirb-exami .eirb-exami-top2{position:relative; overflow:hidden; display:block; padding-top:30px;} #eirb .eirb-exami .eirb-exami-top2 h3{text-align:center; font-size:30px; color:#111; font-weight:500; margin-bottom:30px;} #eirb .eirb-exami .eirb-exami-top2:before{content:""; position:absolute; left:0; top:20px; background:url("/images/sub/eirb_logo1.jpg") no-repeat 0 bottom; width:122px; height:73px;} #eirb .eirb-exami .eirb-exami-top2:after{content:""; position:absolute; right:0; top:20px; background:url("/images/sub/eirb_logo2.jpg") no-repeat 0 bottom; width:122px; height:73px;} #eirb .eirb-exami .eirb-exami-top2 dl{display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222; border-top:1px solid #ccc; margin-top:-1px;} #eirb .eirb-exami .eirb-exami-top2 dt{width:20%; display:flex; align-items:center; text-align:center; flex-direction:column; justify-content: center; padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-weight:500;} #eirb .eirb-exami .eirb-exami-top2 dd{width:80%; background:#fff; padding:15px 25px; border-bottom:1px solid #ccc; font-weight:400;} #eirb .eirb-exami .eirb-exami-list{position:relative; margin-top:40px;} #eirb .eirb-exami .eirb-exami-list:after{clear:both; content:""; display:block;} #eirb .eirb-exami .eirb-exami-list .sect{} #eirb .eirb-exami .eirb-exami-list .sect h4{display:block; background:#eee; padding:15px 25px; font-size:18px; font-weight:500; margin-top:-1px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} #eirb .eirb-exami .eirb-exami-list .sect dl{display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222;} #eirb .eirb-exami .eirb-exami-list .sect dt{display:block; width:70%; padding:15px 25px; background:#fff; border-bottom:1px solid #ccc; font-weight:400;} #eirb .eirb-exami .eirb-exami-list .sect dd{display:block; width:15%; padding:15px 25px; background:#fff; border-bottom:1px solid #ccc; border-left:1px solid #ccc; font-weight:400;} #eirb .eirb-exami .eirb-exami-list .sect dd input{vertical-align:baseline;} #eirb .eirb-exami .eirb-exami-list .sect dl.eirb-exami-tit{display:flex; flex-wrap:wrap; background:#eee; margin-top:-1px; border-top:1px solid #ccc; border-bottom:1px solid #ccc;} #eirb .eirb-exami .eirb-exami-list .sect dl.eirb-exami-tit dt{display:block; width:70%; font-size:18px; font-weight:500; background:none; border-bottom:0;} #eirb .eirb-exami .eirb-exami-list .sect dl.eirb-exami-tit dd{display:block; width:15%; font-size:18px; background:none; border-bottom:0;} #eirb .eirb-exami .eirb-exami-list-top2{position:relative;} #eirb .eirb-exami .eirb-exami-list-top2 dl{display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222;} #eirb .eirb-exami .eirb-exami-list-top2 dl dt{width:20%; display:flex; align-items:center; text-align:center; flex-direction:column; justify-content: center; padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-weight:500;} #eirb .eirb-exami .eirb-exami-list-top2 dl dt span{} #eirb .eirb-exami .eirb-exami-list-top2 dl dd{width:80%; background:#eee; border-bottom:1px solid #ccc; font-weight:400;} #eirb .eirb-exami .eirb-exami-list-top2 dl dd:after{clear:both; content:""; display:block;} #eirb .eirb-exami .eirb-exami-list-top2 dl dd .dd-top{padding:15px 25px;} #eirb .eirb-exami .eirb-exami-list-top2 dl dd .dd-bottom{padding:15px 0 15px 15px; border-top:1px solid #ccc; } #eirb .eirb-exami .eirb-exami-list-top2 dl dd textarea{width:100%; height:100%; min-height:200px; padding:10px; border:1px solid #d1d1d1;} #eirb .eirb-exami .eirb-exami-list-bottom{position:relative;} #eirb .eirb-exami .eirb-exami-list-bottom dl{display:flex; flex-wrap:wrap; font-size:17px; line-height:180%; color:#222;} #eirb .eirb-exami .eirb-exami-list-bottom dl dt{width:20%; display:flex; align-items:center; text-align:center; flex-direction:column; justify-content: center; padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-weight:500;} #eirb .eirb-exami .eirb-exami-list-bottom dl dt span{} #eirb .eirb-exami .eirb-exami-list-bottom dl dd{width:80%; background:#fff; border-bottom:1px solid #ccc; font-weight:400;} #eirb .eirb-exami .eirb-exami-list-bottom dl dd:after{clear:both; content:""; display:block;} #eirb .eirb-exami .eirb-exami-list-bottom dl dd .dd-top{padding:15px 25px;} #eirb .eirb-exami .eirb-exami-list-bottom dl dd .dd-bottom{padding:15px 0 15px 15px; border-top:1px solid #ccc; } #eirb .eirb-exami .eirb-exami-list-bottom dl dd textarea{width:100%; height:100%; min-height:200px; padding:10px; border:1px solid #d1d1d1;} #eirb .eirb-exami-list-text{text-align:center; margin:50px 0 30px;} #eirb .eirb-exami-list-text span.ymd{font-size:22px; font-weight:600; display:block; margin-bottom:20px;} #eirb .eirb-exami-list-text span.na{font-size:22px; font-weight:600; display:block;} _@media (max-width: 1240px){ } _@media (max-width: 1170px){ } _@media (max-width: 1024px){ #eirb .eirb-exami .eirb-exami-list .sect dl.eirb-exami-tit dt{font-size:13px; padding:10px 15px;} #eirb .eirb-exami .eirb-exami-list .sect dl.eirb-exami-tit dd{font-size:13px; padding:10px 15px;} #eirb .eirb-exami .eirb-exami-list .sect dt{font-size:13px; padding:10px 15px;} #eirb .eirb-exami .eirb-exami-list-bottom dl dt{font-size:13px; padding:10px 15px;} #eirb .eirb-exami .eirb-exami-list .sect dd{font-size:13px; padding:10px 15px;} #eirb .eirb-exami .eirb-exami-list-bottom dl dd .dd-top{font-size:13px;} } _@media (max-width: 767px){ } /* sub6_1~5 : 비즈니스 */ /* 이미지 라벨 */ #biz_body input[type=checkbox], #biz_body input[type=radio] {cursor:pointer;} #biz_body input[type=checkbox], #biz_body input[type=radio] {display:none;} #biz_body label {cursor: pointer;} #biz_body input, #biz_body select { vertical-align:middle; color:#505050; border:0; outline:0; height:40px; border-top:0; border-right:0; border-left:0; border-bottom:0px solid #555; padding:6px; /*width:100%;*/ font-size:18px; background-color:transparent; } /* ::-webkit-scrollbar {width: 6px; height: 6px; border: 6px solid #ebebeb; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 20px; background: #ccc} ::-webkit-scrollbar-track {background: rgba(0,0,0,0); -webkit-border-radius: 0px; border-radius:0px; } ::-webkit-scrollbar-thumb {height: 6px; width: 6px; background: rgba(0,0,0,0.3); -webkit-border-radius: 0px; border-radius: 0px;} */ #biz_body {padding:50px 80px 60px;} #biz_body::-webkit-scrollbar{display:none;} #biz_contact_container {position:relative; /*height:100%;*/} #biz_contact_container.right_btn {padding-right: 0px; margin-bottom: 120px;} _::-webkit-full-page-media, _:future, :root body#biz_body.biz_product_type > #biz_contact_container.right_btn{padding-bottom:120px; //or any property you need} _@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { #biz_contact_container.right_btn {padding-bottom: 0px; margin-bottom: 0px;} } #biz_contact_container .body_wrap {margin-top:0px; font-size:0} #biz_contact_container .select_biz_section {margin-bottom:30px;} #biz_contact_container .select_biz_section:last-child {margin-bottom:0px;} .biz_point {font-weight:500; color:#5833b5 !important} .biz_red {color:#ff001c !important} .biz_black {color:#111 !important} .biz_gray {color:#222 !important} .biz_title {padding:0; margin-bottom:40px;} .biz_title.map_ti {padding:0; margin-bottom:40px; position:absolute; top:0;left:0;} .biz_title.sub_biz_title {margin-bottom:20px;} .biz_title span {display:inline-block;} .biz_h1_en {color:#ff001c; font-size:32px; font-weight:500; line-height:1.1em; letter-spacing:0.07em;} .biz_h1_kr {color:#5833b5; font-size:28px; font-weight:500; line-height:1.3em; letter-spacing:-0.03em;} _@media all and (min-width: 320px) and (max-width: 660px) { .biz_h1_kr br {display:none} } .biz_h1_kr_noto_m {} .biz_h1_kr_medium {color:#111; font-size:23px; line-height:1.5em; letter-spacing:-0.01em; margin-top:5px;} .biz_h1_kr_small {color:#111; font-size:17px; line-height:1.5em; letter-spacing:-0.01em; margin-top:15px;} .biz_error_caption {color:#ff001c; font-size:14px; line-height:1.5em; letter-spacing:-0.01em; margin-top:40px; padding-left:0.7em;text-indent:-0.7em;} .biz_kinds_wrap:first-child {margin-top: 0;} .biz_kinds_wrap {margin-top: 30px;} .biz_kinds_wrap:last-child {margin-bottom: 30px;} .biz_kinds_wrap .block_box{position:relative; display:block;} .biz_kinds_sti {color: #111; font-size: 18px; line-height: 1.4em; letter-spacing: -0.03em; margin-bottom:10px} .clearboth {clear:both} .biz_map_01, .biz_map_02 {padding:20px 0 30px;} .biz_map_01 img, .biz_map_02 img {width:100%;} .biz_map_01.new_bizmap, .biz_map_02.new_bizmap{position:absolute;} /* 판매 */ .body_wrap_sales_num /*{position:relative;*/ width:100%; /*height:400px;*/} /* 비즈니스상담 */ .biz_nation_wrap:after {content:" "; display:block; clear:both; *zoom:1;} {} ul.biz_nation_wrap li {/*float:left;*/ line-height: 1em; padding-right: 10px; width:25%; display:inline-block; vertical-align:top; *display:inline;*zoom:1} .biz_nation_wrap li > p {margin-bottom:10px; line-height:1.3em;} .biz_nation_wrap li:last-child {} .biz_nation_wrap li:nth-child(4n) {padding-right:0;} .biz_nation_wrap li p.slaes_nation {font-size:14px; line-height:1.3em;} .biz_nation_wrap > div.cell {/*float:left;*/ line-height: 1em; padding-right: 10px; width:25%; display:inline-block; vertical-align:top; *display:inline;*zoom:1} .biz_nation_wrap div.cell > p {margin-bottom:10px; line-height:1.3em;} .biz_nation_wrap div.cell:last-child {} .biz_nation_wrap div.cell:nth-child(4n) {padding-right:0;} .biz_nation_wrap div.cell p.slaes_nation {font-size:14px; line-height:1.3em;} /* OEM 선택 */ .biz_oem_wrap:after {content:" "; display:block; clear:both; *zoom:1;} {} /*.biz_oem_wrap li {float:left; line-height: 1em; padding-right: 10px; width:33.33%;}*/ .biz_oem_wrap li {float:left; line-height: 1em; padding-right: 10px; width:50%;} .oem_wrap {margin-top:50px; margin-bottom:20px;} .oem_en_copy {position:absolute; top:0; right:0; width:50%; font-size:20px; line-height:1.2em; margin:14px 0 20px; letter-spacing:0.03em; z-index:11} _@media all and (min-width: 850px) and (max-width: 1093px) { .oem_en_copy {width:60%;} } _@media all and (min-width: 661px) and (max-width: 849px) { .oem_en_copy {width:55%; font-size:15px;} } _@media all and (min-width: 320px) and (max-width: 660px) { .oem_en_copy { position: relative; margin: 0 15px 20px; width: auto; } .oem_wrap { margin-top: 30px; margin-bottom: 20px;} } .fir_step_container {} .fir_step_container.contents {} .fir_step_wrap:after {content:" "; display:block; clear:both; *zoom:1;} ul.fir_step_wrap li {float:left; width:calc( 33.3% - 30px); padding:20px; font-size:18px; line-height: 1.45em; /*display:block;*/ border-bottom:1px solid #ff001c; -moz-transition:all .5s ease .1s; -o-transition:all .5s ease .1s; -ms-transition:all .5s ease .1s; -webkit-transition:all .5s ease .1s; transition:all .5s ease .1s;} ul.fir_step_wrap li.fir {margin-right:30px;} ul.fir_step_wrap li.sec {margin-left:15px; margin-right:15px;} ul.fir_step_wrap li.thi {margin-left:30px;} ul.fir_step_wrap li:hover {background:#facccd} ul.fir_step_wrap li:active {background:#ff001c; transition:all .0s ease .0s; color:#fff;} .fir_step_eq p {margin-bottom:10px;} .fir_step_eq {min-height:200px;} #biz_contact_container.mapmap form {height: 100%;} #biz_contact_container.mapmap .fir_step_container {height: 100%;} #biz_contact_container.mapmap .fir_step_container .select_biz_section {height: 100%;} #biz_contact_container.mapmap .body_wrap_sales_num {/*height: 100%;*/} /* 제품선택 */ .select_biz_pro input[type=checkbox]+label, input[type=radio]+label {padding: 0 0 0 0;} .select_biz_pro input[type=checkbox] {display:none; } .select_biz_pro input[type=checkbox] + label { display: inline-block; cursor: pointer; font-size: 22px; line-height:1.05em; padding-top:20px; padding-left:25px; background-size: cover !important; } .select_biz_pro input[type=checkbox] + label { position:absolute; background-repeat: no-repeat; background-position: 50% 50%; background: url("/images/common/arr.png") no-repeat left 0px; background-size: 20px !important; padding-top:0; z-index:9; margin:20px; width: 100%; } .select_biz_pro.second_step input[type=checkbox] + label {width: auto;} .select_biz_pro input[type=checkbox]:checked + label { background: url("/images/common/arr.png") no-repeat left -185px; background-size: 20px !important; font-family: 'NunitoSans-Bold','notokr-medium', sans-serif;} .select_biz_pro input[type=checkbox]:checked ~ .active_layer {opacity:1;} .select_biz_pro.second_step input[type=checkbox]:checked ~ .active_layer {opacity:0.7;} .active_layer {background:#d3ebff; opacity:0; position:absolute; width:100%; height:100%;top: 0; z-index:0; left:0;} .health_brick .active_layer {background:#ffb5ab;} .select_biz_mapnum .select_biz_pro input[type=checkbox] + label {margin:15px 0 10px 15px; width: 93%;} .select_biz_pro.num01 input[type=checkbox] + label {background-repeat:no-repeat; background-position: left 0; background-size: 20px !important;} .select_biz_pro input[type=checkbox]:checked + label {background-repeat:no-repeat; background-position: left -185px; background-size: 20px !important;} /* 넘버체크박스 */ .select_biz_pro.num01 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num01.png');} .select_biz_pro.num01 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num01.png');} .select_biz_pro.num02 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num02.png');} .select_biz_pro.num02 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num02.png');} .select_biz_pro.num03 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num03.png');} .select_biz_pro.num03 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num03.png');} .select_biz_pro.num04 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num04.png');} .select_biz_pro.num04 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num04.png');} .select_biz_pro.num05 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num05.png');} .select_biz_pro.num05 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num05.png');} .select_biz_pro.num06 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num06.png');} .select_biz_pro.num06 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num06.png');} .select_biz_pro.num07 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num07.png');} .select_biz_pro.num07 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num07.png');} .select_biz_pro.num08 input[type=checkbox] + label {background-image: url('/new/images/num/brick_num08.png');} .select_biz_pro.num08 input[type=checkbox]:checked + label {background-image: url('/new/images/num/brick_num08.png');} /* 런칭제품군 롤오버 */ .select_biz_masonry .brick:hover > .active_layer {opacity: 0.7;} /** OEM 롤오버 **/ #biz_contact_container .body_wrap .brick.oem:hover {background: #d3ebff;} /*생산국가롤오버 건강기능식품 #biz_contact_container .body_wrap .brick.health.num01:hover {background: rgba(255, 220, 216, 1); border: 1px solid rgba(255, 220, 216, 1);} .brick.health.num01 .active_layer {background: rgba(255, 220, 216,1);} #biz_contact_container .body_wrap .brick.health.num02:hover {background: rgba(255, 237, 219, 1); border: 1px solid rgba(255, 237, 219, 1);} .brick.health.num02 .active_layer {background: rgba(255, 237, 219, 1);} #biz_contact_container .body_wrap .brick.health.num03:hover {background: rgba(205, 241, 241, 1); border: 1px solid rgba(205, 241, 241, 1);} .brick.health.num03 .active_layer {background: rgba(205, 241, 241, 1);} #biz_contact_container .body_wrap .brick.health.num04:hover {background: rgba(247, 176, 51, 1); border: 1px solid rgba(247, 176, 51, 1);} .brick.health.num04 .active_layer {background: rgba(247, 176, 51, 1);} #biz_contact_container .body_wrap .brick.health.num05:hover {background: rgba(146, 191, 31, 1); border: 1px solid rgba(146, 191, 31, 1);} .brick.health.num05 .active_layer {background: rgba(146, 191, 31, 1);} */ /*#biz_contact_container .body_wrap .bricknum06:hover {background: rgba(211, 235, 255, 0.9);}*/ /*#biz_contact_container .body_wrap.health_brick .brick:hover {background: rgba(255, 181, 171, 0.9);}*/ /* 화장품생산지도위넘버 */ #cosmetic_production .select_biz_pro.position input[type=checkbox] + label {margin:0; height:20px; width:20px;} #cosmetic_production .position_nation01 {position:absolute; top:204px; left:unset; right:147px; width:20px;} #cosmetic_production .position_nation02 {position:absolute; top:210px; left:unset; right:230px; width:20px;} #cosmetic_production .position_nation03 {position:absolute; top:250px; left:unset; right:230px; width:20px;} #cosmetic_production .position_nation04 {position:absolute; top:185px; left:215px; width:20px;} #cosmetic_production .position_nation05 {position:absolute; top:230px; left:270px; width:20px;} #cosmetic_production .position_nation06 {position:absolute; top:350px; left:unset; right:220px; width:20px;} #cosmetic_production .position_nation07 {position:absolute; top:285px; left:unset; right:225px; width:20px;} /* 건식생산지도위넘버 */ #health_production .select_biz_pro.position input[type=checkbox] + label {margin:0; height:20px; width:20px;} #health_production .position_nation01 {position:absolute; top:264px; left:unset; right:148px; width:20px;} #health_production .position_nation02 {position:absolute; top:220px; left:unset; right:170px; width:20px;} #health_production .position_nation03 {position:absolute; top:201px; left:unset; right:86px; width:20px;} #health_production .position_nation04 {position:absolute; top:220px; left:205px; width:20px;} #health_production .position_nation05 {position:absolute; top:350px; left:unset; right:100px; width:20px;} #health_production .position_nation06 {position:absolute; top:350px; left:unset; right:220px; width:20px;} #health_production .position_nation07 {position:absolute; top:285px; left:unset; right:225px; width:20px;} #health_production .red_line_01 {position:absolute; top:209px; right:156px; display:inline-block} #health_production .red_line_02 {position:absolute; top:209px; right:106px; display:inline-block} #health_production .red_line_03 {position:absolute; top:370px; right:107px; display:inline-block} /* 제품유형선택 */ .select_biz_detail input[type=checkbox]+label, input[type=radio]+label {padding:0 0 0 0;} .select_biz_detail .cb-sub{margin-bottom:20px;} .select_biz_detail .cb-sub > input[type=checkbox]+label{background: url("/images/common/arr_gray.png") no-repeat 10px 13px; border:1px solid #ccc; line-height:14px; font-size:16px; height:10px; color:#444; padding:14px 15px 16px 35px; } .select_biz_detail .cb-sub > input[type=checkbox]:checked + label {background: #e9e9e9 url("/images/common/arr_gray.png") no-repeat 10px -126px; background-size: 15px !important;} .select_biz_detail .cb-sub > input[type=checkbox] + label:hover {background-color:#e9e9e9;} .select_biz_detail input[type=checkbox] {display:none;} .select_biz_detail input[type=checkbox]+label { display: inline-block; cursor: pointer; line-height: 18px; font-size: 20px; line-height: 1em; background: url("/images/common/arr.png") no-repeat 10px 13px; height:13px; padding: 14px 15px 18px 35px; box-sizing:content-box; border:1px solid #64bdff; margin-bottom:8px; margin-right:8px;} .select_biz_detail input[type=checkbox]:checked + label {background:#d3ebff url("/images/common/arr.png") no-repeat 10px -172px; background-size: 20px !important; } .select_biz_detail input[type=checkbox] + label:hover {background-color: rgba(211,235,255,0.9);} .select_biz_detail .oem_wrap .oem_input input[type=checkbox]+label {position: absolute; z-index: 999;top: 26px; display: inline-block; cursor: pointer; line-height: 18px; font-size: 20px; line-height: 1em; background: url("/images/common/arr.png") no-repeat left 1px; height:20px; padding: 2px 0 0 26px; box-sizing:content-box; border:0; margin-right:4px; margin-bottom:0px; min-width:auto;} .select_biz_detail .oem_wrap .oem_input input[type=checkbox]:checked + label {background: url("/images/common/arr.png") no-repeat left -185px;} .select_biz_detail .oem_wrap .oem_input input[type=checkbox]:checked ~ .active_layer_oem {opacity:0.9;} .active_layer_oem {background:#d3ebff; opacity:0; position:absolute; width:100%; height:100%;top: 0; z-index:-1; left:0;} .select_biz_detail.biz_health_tech input[type=checkbox] + label {min-width:484px;} /* 라디오버튼 노말 */ input[type=radio].radio_normal { display:none; } input[type=checkbox].radio_normal +label {width:20%; vertical-align:middle; display: inline-block; cursor: pointer; font-size: 20px; background: url("/images/common/arr.png") no-repeat 10px 13px; box-sizing:content-box; padding: 9px 12px 8px 35px; height: 28px; line-height: 28px;} input[type=checkbox].radio_normal:checked + label {background:url("/images/common/arr.png") no-repeat 10px -172px; background-size: 20px !important; } /* 라디오버튼 노말 */ /* OEM 선택 */ .oem_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .oem_wrap ul > li {float:left; border:1px solid #64bdff; width:32.8%; margin-right:8px; padding:20px; position:relative; min-height: 800px;} .oem_wrap ul > li:last-child {margin-right:0;} .oem_wrap ul > li.fir_dan > div {float:left; } .oem_wrap ul > li.fir_dan > div:first-child {width:35%;} .oem_wrap ul > li.fir_dan > div.copy_name {width:100%; line-height:1.4em; padding-left:35%; padding-top:4px;font-size: 20px;} .oem_wrap ul > li.fir_dan > div.caption_oem {padding-top:40px; padding-left:26px;} .oem_wrap ul > li.fir_dan > div.caption_oem img {margin-top:60px;} .oem_wrap ul > li.fir_dan > div.caption_oem .oem_infog01 img {height:120px; width:auto; position:absolute; left:47px; bottom:20px;} .oem_wrap ul > li.fir_dan > div.caption_oem .oem_infog02 img {height:120px; width:auto; position:absolute; left:47px; bottom:20px;} .oem_wrap ul > li.fir_dan > div.caption_oem .oem_infog03 img {height:200px; width:auto; position:absolute; left:47px; bottom:20px;} /* 국가선택 */ .select_biz_mapnum {/*position: absolute; margin-bottom:100px;*/padding-bottom: 100px;} .select_biz_mapnum.oem_select {position: static;} .select_biz_mapnum input[type=checkbox]+label, input[type=radio]+label {padding: 0 0 0 0;} .select_biz_mapnum input[type=checkbox] { display:none; } .select_biz_mapnum input[type=checkbox] + label { position:relative; display: inline-block; cursor: pointer; font-size: 20px; line-height: 1.08em; height:auto; padding:0 0 0 25px; margin-right:30px; margin-bottom: 15px; letter-spacing:-0.04em;} .select_biz_mapnum input[type=checkbox]:checked + label {color:#000} _@media all and (min-width: 320px) and (max-width: 640px) { .select_biz_mapnum.mt40 {margin-top:20px !important;} } _@media (max-width: 1159px) { .select_biz_mapnum {/*top: 59%;*/} } _@media all and (min-width: 1160px) and (max-width: 2000px) { .select_biz_mapnum {/*top: 65%;*/} } .select_biz_mapnum input[type=checkbox] + label.num01 {background: url('/new/images/biz_map_num01.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num01 {background: url('/new/images/biz_map_num01_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num02 {background: url('/new/images/biz_map_num02.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num02 {background: url('/new/images/biz_map_num02_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num03 {background: url('/new/images/biz_map_num03.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num03 {background: url('/new/images/biz_map_num03_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num04 {background: url('/new/images/biz_map_num04.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num04 {background: url('/new/images/biz_map_num04_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num05 {background: url('/new/images/biz_map_num05.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num05 {background: url('/new/images/biz_map_num05_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num06 {background: url('/new/images/biz_map_num06.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num06 {background: url('/new/images/biz_map_num06_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num07 {background: url('/new/images/biz_map_num07.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num07 {background: url('/new/images/biz_map_num07_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num08 {background: url('/new/images/biz_map_num08.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num08 {background: url('/new/images/biz_map_num08_on.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox] + label.num09 {background: url('/new/images/biz_map_num09.png') no-repeat left top;} .select_biz_mapnum input[type=checkbox]:checked + label.num09 {background: url('/new/images/biz_map_num09_on.png') no-repeat left top;} .select_biz_mapnum .brick { padding: 0 10px 15px 0;} .select_biz_mapnum .brick.biz_map_02 { padding: 0 0px 0 0;} .select_biz_mapnum.oem_select .brick { padding: 0;} .select_biz_mapnum.oem_select .brick > label {display:block} .select_biz_mapnum .brick.oem {padding-bottom:25px;} .select_biz_mapnum .nation_copy {padding:0 20px 0 45px; line-height:1.5em; font-size: 15px; position: relative; z-index: 1; word-break: keep-all} .select_biz_mapnum .biz_map_02 .nation_copy {padding:0 15px 15px 15px; word-break: normal;} .select_biz_mapnum .biz_map_01 .nation_copy, .select_biz_mapnum .biz_map_02 .nation_copy.production {padding:0 15px 15px 15px; word-break: normal;} .select_biz_mapnum .nation_copy.production {padding-left:16px;} .select_biz_mapnum .nation_copy.graph {padding: 0 20px 10px 20px; text-align:center;} .select_biz_mapnum .nation_copy.graph img {width:50%; height:auto;} .select_biz_mapnum .active_layer { z-index:0;} label.privacy {margin-right:10px;} /* 인풋 */ .nation_name_input {} .box_input_line {border: 1px solid #64bcff; min-width:300px; width: auto; box-sizing: content-box; display:inline-block;} input.blue_line { font-size: 18px; padding: 0 12px; height: 45px; line-height: 28px; color:#111; vertical-align:middle; border:0; } input.blue_line.nation_name {width:700px;} input::placeholder {color: #d2eaff;} .biz_input_wrap input {border-bottom: 0px solid #ff001c; min-width:300px; width: auto; font-size: 18px; padding: 8px 12px; height: 29px; line-height: 28px; box-sizing: content-box; color:#111; vertical-align:middle;} .biz_input_wrap input.launched_qa {min-width:auto; padding-right:2px; width:320px;} .launched_qa_wrap:after {content:" "; display:block; clear:both; *zoom:1;} .launched_qa_wrap .launched_qa_right {text-align:right} .biz_input_wrap ul {width:100%;} .biz_input_wrap ul li {border: 1px solid #64bdff; margin-bottom:8px;} .biz_input_wrap ul li span {border-bottom: 0px solid #ff001c; display:inline-block; box-sizing: content-box; font-size: 20px; padding: 9px 12px 8px 12px; height: 29px; line-height: 29px; vertical-align:middle;} .biz_input_wrap ul li span.type {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height:46px; line-height: 31px;} .biz_input_wrap ul li span.type.a01_01 {width:20%;} .biz_input_wrap ul li span.type.a01_02 {width:80%;} .biz_input_wrap ul li span.type.a01_02 input {width:95%;} .biz_input_wrap ul li span.type.b01_01 {width:28%;} .biz_input_wrap ul li span.type.b01_02 {width:72%;} .biz_input_wrap ul li span.type.b01_02 input {width:95%; } .biz_input_wrap ul li span.type.c01_01 {width:22%;} .biz_input_wrap ul li .type.c01_02 {width:78%;} .biz_input_wrap ul li input.input_unit {width:69%; } .biz_input_wrap ul li input.input_qa {width:79%; } .biz_input_wrap ul li span.type.a01_02.othernation_input_wrap {width:40%; padding-top:7px; padding-left:0; padding-right:0;} .biz_input_wrap ul li span.type.a01_02.othernation_input_wrap.en {width:40%;} .biz_input_wrap ul li span.type.a01_02 input.othernation_input{width: calc(100% - 30px); height: 14px; min-width: auto; border: 1px solid #ebebeb; margin-top: 0; margin-right: 6px; background-color: #f5f5f5;} .biz_input_wrap ul li span.type.a01_02 input.othernation_input::placeholder {color: #add7ff;} .biz_input_wrap.body_wrap .check_nation.check_othernation {padding-right:0;} .biz_input_wrap textarea{width:100%; padding:10px; outline-style:none; min-height:300px; border: 1px solid #64bdff; margin-bottom:8px; font-size:20px; vertical-align: middle;} .biz_input_wrap .privacy{height:40px;} .biz_input_wrap .privacy input[type=checkbox]+label, input[type=radio]+label{ background:url("/images/common/arr.png") no-repeat left top; padding:0 20px 1px 0; width:20px; height:20px; } .biz_input_wrap .privacy input { border-bottom: 0px solid #ff001c; min-width: 300px; width: auto; font-size: 18px; padding: 8px 12px; height: 29px; line-height: 28px; box-sizing: content-box; color: #111; vertical-align: middle; } /* 이미지 라벨 .privacy input[type=checkbox], input[type=radio] {cursor: pointer;} .privacy input[type=checkbox], input[type=radio] {display: none;} .privacy input[type=checkbox]+label, input[type=radio]+label {background: url("/images/common/arr.png") no-repeat left top; padding: 0 20px 0 0; width:20px; height:20px;} .privacy input[type=checkbox]:checked+label, input[type=radio]:checked+label {background: url("/images/common/arr.png") no-repeat left -185px;} .privacy label {cursor: pointer;} .privacy label{margin-right:10px;} .privacy input { border-bottom: 0px solid #ff001c; min-width: 300px; width: auto; font-size: 18px; padding: 8px 12px; height: 29px; line-height: 28px; box-sizing: content-box; color: #111; vertical-align: middle; } */ _@media all and (min-width: 320px) and (max-width: 640px) { .biz_input_wrap ul li span.type {-webkit-box-sizing: none; -moz-box-sizing: none; box-sizing: none; height: auto; line-height: auto;} .biz_input_wrap ul li span.type.a01_01 {width:auto;} .biz_input_wrap ul li:first-child span.type.a01_01 {width:auto; display:block} .biz_input_wrap ul li span.type.a01_02 {width:100%; float:unset; float:none;} .biz_input_wrap ul li:first-child span.type.a01_02 {width:100%; float:unset; float:none;} .biz_input_wrap ul li span.type.a01_02 input {width:95%; } .biz_input_wrap ul li span.type.b01_01 {width:auto;} .biz_input_wrap ul li span.type.b01_02 {width:auto;} .biz_input_wrap ul li span.type.b01_02 input {width:auto; } .biz_input_wrap ul li span.type.c01_01 {width:auto;} .biz_input_wrap ul li .type.c01_02 {width:auto;} .biz_input_wrap ul li input.input_unit {width:auto; } .biz_input_wrap ul li input.input_qa {width:auto; } } /* @ 320~640 */ .biz_input_wrap input.textright {text-align:right;} .biz_input_wrap .laun_qa_wrap {vertical-align:middle; line-height:1.2em;} .biz_input_wrap input.input_minus, .biz_input_wrap input.input_plus {min-width: auto; font-size: 18px; padding: 0; height: auto; line-height: 1em; border:1px solid #666; width:21px; height:21px; vertical-align:middle;} /* 비즈니스경험 */ .biz_input_location input[type=checkbox].radio_normal +label {width:auto; line-height:1.5em;} .biz_input_location input[type=checkbox].radio_normal +label.kor {padding-right:30px;} .biz_input_wrap.body_wrap .text-right {text-align:right;} .biz_input_wrap.body_wrap .float-right {float:right; border-bottom: 0px; display: inline-block; padding: 0; height: auto; line-height: auto; vertical-align: middle;} .biz_input_wrap.body_wrap span.unit {padding-left:0; font-size:18px;} .biz_input_wrap.body_wrap .check_nation > input[type=checkbox].radio_normal.check_nation_input +label {padding-top:0; padding-bottom:0; background-position:10px 3px;} .biz_input_wrap.body_wrap .check_nation > input[type=checkbox].radio_normal.check_nation_input:checked + label {background-position:10px -182px;} .biz_input_location:after {content:" "; display:block; clear:both; *zoom:1;} .biz_input_location > div {float:left;} .biz_input_location > div:last-child {float:right; text-align:right;} .biz_input_location > div.en_location_div {width:70%;} _@media all and (min-width: 320px) and (max-width: 640px) { .biz_input_wrap ul li span.type.a01_02.othernation_input_wrap {width: 80%; padding-top:0;} /*.biz_input_location > div:last-child {float:right; width:100%;}*/ .biz_input_wrap ul li span.type.a01_02.othernation_input_wrap.en {width:100%;} } /* @ 320~640 */ _@media all and (min-width: 320px) and (max-width: 1215px) { .biz_input_location > div.en_location_div {width:100%;} } #sch_submit{ position: absolute; right: 27px; top: 18px;} /* 마조니 */ .select_biz_pro {max-width: 100%;} .select_biz_masonry {column-count: 4; column-gap: 8px; column-fill: initial;} .select_biz_masonry .brick { margin-bottom: 8px; display: inline-block; vertical-align: top; width:100%; position:relative; border:1px solid #64bdff; background-size:cover; background-repeat: no-repeat; background-position:50% 50%} .select_biz_masonry .brick:hover {background-size: cover !important; padding:0; background-position:50% 50% !important;} .select_biz_masonry .brick label {max-width: 100%; vertical-align: middle;} .select_biz_masonry.start_biz {column-count:3; /*column-gap:20px;*/ column-fill:initial;} .select_biz_masonry.start_biz .brick {/*padding-bottom:100%;*/ width:100%; position: relative; float:left; background-size: cover;} .btn_next_select_biz {text-align:center; margin-bottom:100px;} .brick { margin-bottom: 8px; display: inline-block; vertical-align: top; width:100%; position:relative; border:1px solid #64bdff;} /* 브릭테두리 */ .brick.biz_map_01 {border:1px solid #e1abab;} .brick.biz_map_01.health {border:1px solid #a2cdbb;} .brick label {max-width: 100%; vertical-align: middle;} .health_brick .brick {border:1px solid #5833b5;} .skyblue {color:#64bdff; font-size: 20px !important; padding:0 !important; line-height:1em !important; height:auto !important; vertical-align:top !important;} /* 넥스트버튼 */ .biz_contact_next {position: fixed; right: 15px; top: 44%; width: 28px; height: 54px; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } /* 하단페이지네이션 */ .inquiries_foot { /*height:100px;*/ z-index:99; background:#fff; position: fixed; bottom: 0; left:50%; width: 100%; text-align: center; padding: 20px 0 35px; letter-spacing: 0.04em; text-transform: uppercase !important; z-index:999; -ms-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); } .inquiries_foot .line {border-bottom: 1px solid #ccc;} .inquiries_foot > span {display:inline-block; vertical-align:middle; line-height:1em; margin:0 5px;} .inquiries_foot > span img {width:7px; height:auto} .inquiries_foot .relative {margin-top:0px;} .inquiries_foot .relative span.biz_navi_btn {display:inline-block; } .inquiries_foot .relative span.biz_navi_btn img {width:25px; height:22px;} .inquiries_foot .biz_navi_num {display:inline-block; padding:0 10px; font-size: 15px; line-height: 1.5em; font-weight:500; margin-top:-10px;} .biz_progressbar_wrap {bottom: 30px; width: calc(100% - 159px); margin: 0 auto; height: auto; text-align:left; line-height: 1em;} .biz_progressbar_wrap .bar {height:5px; background:#d0c2f0; width:100%; position: relative;} .biz_progressbar_wrap .bar .step01 {position: absolute; height:5px; width:12%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step02 {position: absolute; height:5px; width:25%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step03 {position: absolute; height:5px; width:37%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step04 {position: absolute; height:5px; width:50%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step05 {position: absolute; height:5px; width:62%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step06 {position: absolute; height:5px; width:75%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step07 {position: absolute; height:5px; width:87%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap .bar .step08 {position: absolute; height:5px; width:100%; background:#5833b5;left:0;top:0; display:block} .biz_progressbar_wrap > p {color:#5833b5} .biz_progressbar_wrap .biz_progressbar_copy {font-size:15px; text-align:left; display: inline-block; font-weight:500; line-height:1em; margin-bottom:5px;} /*.biz_progressbar_wrap .biz_progressbar_copy.step01_copy {width:12%;} .biz_progressbar_wrap .biz_progressbar_copy.step02_copy {width:25%;} .biz_progressbar_wrap .biz_progressbar_copy.step03_copy {width:37%;} .biz_progressbar_wrap .biz_progressbar_copy.step04_copy {width:50%;} .biz_progressbar_wrap .biz_progressbar_copy.step05_copy {width:62%;} .biz_progressbar_wrap .biz_progressbar_copy.step06_copy {width:75%;} .biz_progressbar_wrap .biz_progressbar_copy.step07_copy {width:87%;} .biz_progressbar_wrap .biz_progressbar_copy.step08_copy {width:100%;}*/ .ag_info {border:1px solid #dbdbdb; font-size:14px; padding:15px; margin-bottom:10px; width:100%; height:200px; overflow-x:hidden; overflow-y:auto; padding:20px; line-height:1.5em;} .ex_nation {padding:5px; display:inline-block; color:#d2eaff;} .biz_button { font-size: 15px; min-width: 70px; padding: 4px 10px 2px; line-height: 1.4em; cursor:pointer; text-align: center; display: inline-block; -moz-transition:all .2s ease .5s; -o-transition:all .2s ease .5s; -ms-transition:all .2s ease .5s; -webkit-transition:all .2s ease .5s; transition:all .2s ease .1s; border:1px solid #888; color:#666;} .biz_button:hover {color:#FFF; background-color: #5833b5; border:1px solid #5833b5;} .biz_button.active {color:#FFF; background-color: #5833b5; border:1px solid #5833b5;} .biz_button.dimmed {opacity:0.2; cursor:default !important; } .biz_button.dimmed:hover {color:inherit; background-color: inherit; border-color: inherit;} .biz_interview_btn { position:relative; margin-top: 20px; bottom: unset; left: 50%; -ms-transform: translate(-50%, 0%); -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); transform: translate(-50%, 0%);} .back_biz_0step {background:url("/images/common/biz_1step_back.png") no-repeat 50% 50%;} .biz_lang {position:absolute; top:22px; right: 60px; font-size:15px; font-style: italic;letter-spacing: 0.06em;} .biz_lang a {padding:0 3px;} /** 210321 captcha**/ .biz_input_wrap ul li.last {border:0;} .biz_input_wrap ul li.last img {vertical-align:middle;} .biz_imgRefresh {display:inline-block; vertical-align:middle; font-size:13px;} input.biz_captcha_input {display: block; border: 1px solid #64bdff;} /* 반응형 */ _@media (max-width: 980px){ .biz_progressbar_wrap{width: calc(100% - 60px); bottom:30px;} } _@media (max-width: 720px){ } _@media (min-width: 547px) and (max-width: 960px){ #biz_body{padding:50px 25px 25px;} } _@media (min-width: 480px) and (max-width: 639px){ .select_biz_detail input[type=checkbox]+label{font-size:16px; line-height:1.3em; min-width:calc(50% - 57px); margin-right:5px;} } _@media (max-width: 546px){ #biz_body{padding:45px 30px 0; overflow-x:hidden;} .biz_h1_kr{font-size:21px; line-height:1.38em;} .inquiries_foot{width:calc(100% - 60px); height:auto; padding:10px 0px 20px;} } _@media (max-width: 479px){ .select_biz_detail input[type=checkbox]+label{font-size:16px; line-height:1.3em; min-width:auto; width:calc(100% - 52px); margin-right:0;} .biz_input_wrap ul li span{font-size:16px;} } _@media all and (min-width: 500px) and (max-width: 1240px) { .biz_contact_next {width: auto; height: 30px;} .biz_contact_next img {height:100%; width:auto;} .biz_contact_next {right: 7px;} /*#biz_contact_container {background-size: contain !important;}*/ } _@media (min-width: 320px) and (max-width: 640px){ .biz_input_wrap ul li span.type { -webkit-box-sizing: none; -moz-box-sizing: none; box-sizing: none; height: auto; line-height: auto; .biz_input_wrap ul li:first-child span.type.a01_01{width:auto; display:block;} .biz_input_wrap ul li span.type.a01_02 input{width:90% !important;} } _@media all and (min-width: 0px) and (max-width: 639px) { .back_biz_0step {background:url("/images/common/biz_1step_back.png") no-repeat 50% 50%; background-size:300%;} .select_biz_masonry.start_biz{column-count:1;} .select_biz_masonry .brick{height: 120px !important;} .biz_input_wrap input{min-width:auto; width:calc(100% - 10px); padding:8px 10px 8px 0; font-size:16px !important;} .biz_input_wrap.body_wrap .check_nation{display:inline-block; width:auto; text-align:right; padding:0 5px;} .biz_input_location input[type=checkbox].radio_normal +label.kor{padding-right:10px;} input[type=checkbox].radio_normal +label{font-size:16px;} .biz_input_wrap ul li span {padding: 9px 12px 8px 12px; height: 29px; line-height: 29px;} } _@media all and (min-width: 0px) and (max-width: 896px) { .biz_lang {top: 14px; right: 45px; font-size: 13px;} .biz_lang a {padding:0 5px;} } /* sub7_1~3 : 복리후생 */ .careers{position:relative;} .careers .top-slogan{display:block; margin:50px 0 70px; padding:0 4%; font-size:36px; color:#222; text-align:center; line-height:1.4; word-break:keep-all;} .careers .top-slogan strong{font-size:38px; color:#684ab3;} .careers .top-slogan .un{position:relative; padding:0 3px;} .careers .top-slogan .un:before{content:""; display:block; height:15px; position:absolute; left:0; bottom:3px; background:#684ab3; opacity:.1; z-index:-1;} .careers .card-l{display:flex; flex-wrap:wrap; margin-top:-30px} .careers .card-l li{width:calc(24% - 20px); margin-right:30px; margin-top:30px; background:#fafafa; height:275px; padding:55px 40px 0 40px; box-sizing:border-box; background-repeat:no-repeat; background-position:50% 60px} .careers .tit{padding-top:120px; position:relative; font-size:22px; text-align:center; color:#333; letter-spacing:-.8px; font-weight:500;} .careers .tit:before{content:''; position:absolute; top:100px; left:50%; transform:translate(-50%, -50%); width:24px; height:2px; background:#684ab3;} .careers .tit span{font-size:16px; display:block; color:#666;} .careers .card-l li:first-child{background:#684ab3; color:#fff; display:flex; flex-direction:column;justify-content:center; align-items:center; font-size:22px; text-align:center; line-height:1.4; padding:0; background-position:center} .careers .card-l li:first-child strong{font-size:34px;} .careers .card-l li:nth-child(4n){margin-right:0} .careers .card-l li:nth-child(1){} .careers .card-l li:nth-child(2){background-image:url("/images/sub/icon1.png");} .careers .card-l li:nth-child(3){background-image:url("/images/sub/icon2.png");} .careers .card-l li:nth-child(4){background-image:url("/images/sub/icon3.png");} .careers .card-l li:nth-child(5){background-image:url("/images/sub/icon4.png");} .careers .card-l li:nth-child(6){background-image:url("/images/sub/icon5.png");} .careers .card-l li:nth-child(7){background-image:url("/images/sub/icon6.png");} .careers .card-l li:nth-child(8){background-image:url("/images/sub/icon7.png");} .careers .card-l li:nth-child(9){background-image:url("/images/sub/icon8.png");} .careers .card-l li:nth-child(10){background-image:url("/images/sub/icon9.png");} .careers .card-l li:nth-child(11){background-image:url("/images/sub/icon10.png");} .careers .card-l li:nth-child(12){background-image:url("/images/sub/icon11.png");} .careers .card-l li:nth-child(13){background-image:url("/images/sub/icon12.png");} .careers .card-l li:nth-child(14){background-image:url("/images/sub/icon13.png");} .careers .top-slogan{opacity:0; transform:translateY(20px);} .careers .in-view .top-slogan{opacity:1; transform:translateY(0px); transition:all 1s 0.4s ease;} .careers .top-slogan .un:before{width:0;} .careers .in-view .top-slogan .un:before{width:100%; transition:all 1s 0.8s ease;} .a-left{transform:translateX(-15px);transition:.8s;opacity:0} .a-left.in-view{transform:translateX(0px);opacity:1} .a-right{transform:translateX(15px);transition:.8s;opacity:0} .a-right.in-view{transform:translateX(0px);opacity:1} .a-:nth-child(1){transition-delay:.1s} .a-:nth-child(2){transition-delay:.2s} .a-:nth-child(3){transition-delay:.3s} .a-:nth-child(4){transition-delay:.4s} .a-:nth-child(5){transition-delay:.5s} .a-:nth-child(6){transition-delay:.6s} .a-:nth-child(7){transition-delay:.7s} .a-:nth-child(8){transition-delay:.8s} .a-:nth-child(9){transition-delay:.9s} .a-:nth-child(10){transition-delay:1s} .a-:nth-child(11){transition-delay:1.2s} .a-:nth-child(12){transition-delay:1.3s} .a-:nth-child(13){transition-delay:1.4s} .a-:nth-child(14){transition-delay:1.5s} _@media (max-width: 1170px){ .careers .card-l li{width:calc(32% - 20px);} .careers .card-l li:nth-child(4n){margin-right:30px;} .careers .card-l li:nth-child(3n){margin-right:0px;} } _@media (max-width: 767px){ .careers .top-slogan{margin:30px 0 60px; padding:0 4%; font-size:28px; line-height:1.4;} .careers .top-slogan strong{font-size:30px;} .careers .top-slogan .un{padding:0 2px;} .careers .top-slogan .un:before{height:13px; bottom:2px;} .careers .card-l li{width:calc(50% - 10px); margin-right:20px;} .careers .card-l li:nth-child(4n){margin-right:20px;} .careers .card-l li:nth-child(3n){margin-right:20px;} .careers .card-l li:nth-child(2n){margin-right:0px;} } _@media (max-width: 520px){ .careers .card-l li{width:100%; margin-right:0px;} .careers .card-l li:nth-child(4n){margin-right:0px;} .careers .card-l li:nth-child(3n){margin-right:0px;} .careers .card-l li:nth-child(2n){margin-right:0px;} } .careers .step-list{padding:0; position:relative; width:100%; max-width:1275px; display:flex; flex-wrap:wrap; justify-content: center; margin:0 auto;} .careers .step-list li{opacity:0; transform: rotateY(180deg); position:relative; width:248px/*calc(25% - 60px)*/; height:258px; text-align:center; border:5px solid #684ab3; border-radius:50%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; margin-left:80px;} .careers .step-list li:nth-child(even){} .careers .step-list li + li{} .careers .step-list li:before{display:block; content:""; position:absolute; top:calc(50% - 8px); left:-63px; width:25px; height:10px; background:url("/images/sub/step_arr.png") no-repeat top left; opacity:.8;} .careers .step-list li:nth-child(1){margin-left:0px;} .careers .step-list li:nth-child(1):before{display:none;} .careers .step-list li .num{font-size:16px; color:#222; font-weight:600; line-height:1em; margin-bottom:17px;} .careers .step-list li .tit{background-repeat:no-repeat; background-position:top center; padding-top:55px; line-height:1em; font-size:20px; color:#222; font-weight:500;} .careers .step-list li:nth-child(1) .tit{background-image:url("/images/sub/step_icon1.png");} .careers .step-list li:nth-child(2) .tit{background-image:url("/images/sub/step_icon2.png");} .careers .step-list li:nth-child(3) .tit{background-image:url("/images/sub/step_icon3.png");} .careers .step-list li:nth-child(4) .tit{background-image:url("/images/sub/step_icon4.png");} .careers ul.recruit{margin-top:100px;} .careers ul.recruit li{opacity:0; transform:translateX(40px); position: relative; counter-increment:custom; border:1px solid #e2e2e2; padding:28px 40px 40px 155px; line-height:1.6; margin-top:-1px;} .careers ul.recruit li:before{content:counter(custom, decimal-leading-zero) " "; position:absolute; color:#684ab3; font-size:32px; top:0; left:45px; padding:20px 15px 10px 15px; border-radius:0 0 30px 30px; min-width:70px; text-align:center; background:#f3f0fb; font-weight:600;} .careers ul.recruit li dt{font-size:24px; font-weight:700;} .careers ul.recruit li dd{font-size:18px; font-weight:400; color:#666; margin-top:10px;} .careers ul.recruit li dd span{color:#684ab3; font-weight:500;} .careers .in-view .step-list li:nth-child(1){opacity:1; transform:rotateY(0deg); transition:all 1s;} .careers .in-view .step-list li:nth-child(2){opacity:1; transform:rotateY(0deg); transition:all 1s 0.5s;} .careers .in-view .step-list li:nth-child(3){opacity:1; transform:rotateY(0deg); transition:all 1s 1s;} .careers .in-view .step-list li:nth-child(4){opacity:1; transform:rotateY(0deg); transition:all 1s 1.5s;} .careers .in-view ul.recruit li:nth-child(1){opacity:1; transform:translateX(0px); transition:all 1s;} .careers .in-view ul.recruit li:nth-child(2){opacity:1; transform:translateX(0px); transition:all 1s 0.5s;} .careers .in-view ul.recruit li:nth-child(3){opacity:1; transform:translateX(0px); transition:all 1s 1s;} _@media (max-width: 1024px){ .careers .step-list li:nth-child(3){margin-left:0px; margin-top:2%;} .careers .step-list li:nth-child(3):before{display:none;} .careers .step-list li:nth-child(4){margin-top:2%;} } _@media (max-width: 767px){ .careers .step-list li{width:180px; height:180px; margin-left:40px;} .careers .step-list li:before{left:-35px; background-size:20px;} .careers .step-list li .tit:before{display:none;} .careers ul.recruit li:before{font-size:22px; left:25px; padding:20px 10px 10px 10px; min-width:40px;} .careers ul.recruit li{padding:28px 30px 30px 90px;} .careers ul.recruit li dt{font-size:20px;} .careers ul.recruit li dd{font-size:16px; margin-top:5px;} } _@media (max-width: 460px){ .careers .step-list li{margin-left:0; margin-top:10px;} .careers .step-list li:first-child{margin-top:0;} .careers .step-list li:before{display:none;} } /* 채용-상단 슬로건 */ .careers .top-slogan{display:block; margin:50px 0 70px; padding:0 4%; font-size:36px; color:#222; text-align:center; line-height:1.4; word-break:keep-all;} .careers .top-slogan strong{font-size:38px; color:#684ab3;} .careers .top-slogan .un{position:relative; padding:0 3px;} .careers .top-slogan .un:before{content:""; display:block; height:15px; position:absolute; left:0; bottom:3px; background:#684ab3; opacity:.1; z-index:-1;} .careers .top-slogan{opacity:0; transform:translateY(20px);} .careers .in-view .top-slogan{opacity:1; transform:translateY(0px); transition:all 1s 0.4s ease;} .careers .top-slogan .un:before{width:0;} .careers .in-view .top-slogan .un:before{width:100%; transition:all 1s 0.8s ease;} /* 채용공고 게시판 */ #careers-board{position:relative;} #careers-board .ca-wrap{} /* 채용공고 게시판-리스트 */ #careers-board .ca-list{} #careers-board .ca-list ul{} #careers-board .ca-list li{padding:20px 0; border-bottom:1px solid #ececec;} #careers-board .ca-list li:last-child{border:0;} #careers-board .ca-list li a{display:block; width:100%; height:100%;} #careers-board .ca-list .ca-list-cont{display:flex; justify-content:space-between; align-items:center;} #careers-board .ca-list .list-cate{position:relative; width:250px; font-size:19px; font-weight:500; color:#684ab3; letter-spacing:-.5px; text-align:center;} #careers-board .ca-list .list-cate:after{content:"/"; position:absolute; right:0; color:#c2c2c2;} #careers-board .ca-list .list-cont{text-align:left; width:calc(100% - 350px); padding:0 30px;} #careers-board .ca-list .list-cont dl{} #careers-board .ca-list .list-cont dt{font-size:22px; color:#333; font-weight:500; letter-spacing:-.5px;} #careers-board .ca-list .list-cont dd{font-size:16px; color:#707070;} #careers-board .ca-list .list-state{width:100px;} #careers-board .ca-list .list-state .icon-color{width:72px; display:inline-block; padding:8px 12px; background:#684ab3; color:#fff; font-size:13px; line-height:1; text-align:center;} #careers-board .ca-list .list-state .icon-end{width:72px; display:inline-block; padding:8px 12px; background:#bbb; color:#fff; font-size:13px; line-height:1; text-align:center;} #careers-board .ca-list li a:hover .list-cont dt{text-decoration:underline;} /* 채용공고 게시판-뷰 */ #careers-board .ca-view{position:relative;} #careers-board .ca-view .view-top{margin-bottom:40px;} #careers-board .ca-view .view-top dl{border-top:1px solid #ccc; display:flex; flex-wrap: wrap; font-size:17px; line-height:180%; color:#222;} #careers-board .ca-view .view-top dl dt{padding:15px 25px; background:#eee; border-bottom:1px solid #ccc; border-right:1px solid #ccc; flex:1 1 20%; font-weight:500;} #careers-board .ca-view .view-top dl dt span{} #careers-board .ca-view .view-top dl dd{padding:15px 25px; background:#fff;border-bottom:1px solid #ccc; flex:1 1 80%; font-weight:400;} #careers-board .ca-view .view-top dl dd:after{clear:both; content:""; display:block;} #careers-board .ca-view .view-top dl dd .view-state{position:relative; display:inline-block; margin-left:32px;} #careers-board .ca-view .view-top dl dd .view-state:before{content:""; position:absolute; top:9px; left:-18px; height:13px; border-left: 1px solid #d6dace;} #careers-board .ca-view .view-top dl dd .view-state .state{font-weight:500; display:inline-block; color:#684ab3;} #careers-board .ca-view .view-cont{} #careers-board .btn-bottom-center{clear:both; text-align:center; margin-top:40px; font-size:0;} #careers-board .view-bottom-btn{text-align:center; display:inline-block; margin:0 auto; border:0; font-size:20px; font-weight:500; line-height:1; padding:15px 25px; background:#684ab3; color:#fff;} #careers-board .view-bottom-btn:hover{opacity:0.9; transition:.2s ease-out;} /* 초기화 */ html {overflow-y:scroll} body {margin:0;padding:0;font-size:1em;color: #222;font-family:'Montserrat', 'Noto Sans KR', 'Malgun Gothic', sans-serif;background:#fff} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Montserrat', 'Noto Sans KR', 'Malgun Gothic', sans-serif} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block} ul, dl,dt,dd {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle;font-size:1em} input, button {margin:0;padding:0;font-family:'Montserrat', 'Noto Sans KR', 'Malgun Gothic', sans-serif;font-size:1em} input[type="submit"] {cursor:pointer} button {cursor:pointer} .blind, legend, caption{position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);} textarea, select {font-family:'Montserrat', 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:keep-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a {color:#222;text-decoration:none} *, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } input[type=text],input[type=password], textarea { -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out; outline:none; } .placeholdersjs {color:#aaa !important} /* 레이아웃 크기 지정 */ #hd, #wrapper, #ft {max-width:1200px} #hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {max-width:1200px} /* 팝업레이어 */ #hd_pop {z-index:10000;position:relative;margin:0 auto;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops img {max-width:100%} .hd_pops_con {} .hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative} .hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""} .hd_pops_footer button {padding:10px;border:0;color:#fff} .hd_pops_footer .hd_pops_reject {font-size:12px; background:#000;text-align:left} .hd_pops_footer .hd_pops_close {font-size:12px; background:#393939;position:absolute;top:0;right:0} /* 상단 레이아웃 */ #hd {background:#212020} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #tnb {border-bottom:1px solid #383838;margin:0 auto} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb .inner {margin:0 auto} #hd_wrapper {position:relative;margin:0 auto;height:140px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""} #logo {float:left;padding:0} .hd_sch_wr {float:left;padding:30px 0;;width:445px;margin-left:65px} #hd_qnb {float:right;text-align:right} #hd_qnb:after {display:block;visibility:hidden;clear:both;content:""} #hd_qnb li {float:left;font-size:1.083em;line-height:16px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px} #hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0} #hd_qnb li span {display:block;margin-top:5px;font-size:0.92em} #hd_qnb li a {display:inline-block;color:#919191} #hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px} .hd_login {position:absolute;right:0;top:60px} .hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px} .hd_login li:first-child {border-left:0} .hd_login a {color:#fff} /* 메인메뉴 */ #gnb {position:relative;} #gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} #gnb .gnb_wrap {margin:0 auto;position:relative} #gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3} #gnb #gnb_1dul {font-size:1.083em;padding:0;border-bottom:1px solid #e0e2e5;zoom:1} #gnb ul:after {display:block;visibility:hidden;clear:both;content:""} #gnb .gnb_1dli {float:left;line-height:55px;padding:0px;position:relative} #gnb .gnb_1dli:hover > a {color:#184fa1; -webkit-transition:background-color 2s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} .gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;background:url('./images/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px} .gnb_1da {display:block;font-weight:bold;padding:0 15px;color:#080808;text-decoration:none} .gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px} .gnb_2dli:first-child {border:0} .gnb_2dul {display:none;position:absolute;top:54px;min-width:140px;padding-top:2px} .gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0; -webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); -moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2); box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)} .gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none} a.gnb_2da:hover {color:#184fa1;background:#f7f7f8; -moz-transition:all 0.3s ease-out; -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out} .gnb_1dli_air .gnb_2da {} .gnb_1dli_on .gnb_2da {} .gnb_2da:focus, .gnb_2da:hover {color:#fff} .gnb_1dli_over .gnb_2dul {display:block;left:0} .gnb_1dli_over2 .gnb_2dul {display:block;right:0} .gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808} .gnb_wrap .gnb_empty a {color:#184fa1;text-decoration:underline} .gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555} #gnb .gnb_menu_btn {background:#4158d1;color:#fff;width:50px;height:55px;border:0;vertical-align:top;font-size:18px} #gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0} #gnb .gnb_mnal {float:right;padding:0} #gnb_all {display:none;position:absolute;border:1px solid #c5d6da;width:100%;background:#fff;z-index:1000;-webkit-box-shadow:0 2px 5px rgba(0,0,0,0.2); -moz-box-shadow:0 2px 5px rgba(0,0,0,0.2); box-shadow:0 2px 5px rgba(0,0,0,0.2)} #gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef} #gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""} #gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0} #gnb_all .gnb_al_li {float:left;width:20%;min-height:150px;padding:20px;border-left:1px solid #e7eeef} #gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#184fa1} #gnb_all .gnb_al_li li {line-height:2em} #gnb_all .gnb_al_li li a {color:#555} #gnb_all_bg {display:none;background:rgba(0,0,0,0.1);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999} /* 중간 레이아웃 */ #wrap{position: relative; width:100%; overflow:hidden;} #container{position: relative;width:100%; overflow:hidden;} #container_wr:after {display:block;visibility:hidden;clear:both;content:""} #container_wr {margin:0 auto;height:100%;zoom:1} #aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px} #container {position:relative;float:left;min-height:500px;height:auto !important;margin:20px 0;height:500px;font-size:1em;width:930px;zoom:1} #container:after {display:block;visibility:hidden;clear:both;content:""} #container_title {font-size:1.333em;margin:0 auto;font-weight:bold} #container_title span {margin:0 auto 10px;display:block;line-height:30px} .lt_wr {width:32%} .lt_wr:nth-child(3n+1) {clear:both} .latest_wr {margin-bottom:20px} .latest_wr:after {display:block;visibility:hidden;clear:both;content:""} .latest_top_wr {margin:0 -10px 20px} .latest_top_wr:after {display:block;visibility:hidden;clear:both;content:""} /* 하단 레이아웃 */ #ft {background:#212020;margin:0 auto;text-align:center} #ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #ft_wr {max-width:1240px;margin:0;padding:40px 0;position:relative;display:inline-block;text-align:left} #ft_wr:after {display:block;visibility:hidden;clear:both;content:""} #ft_wr .ft_cnt {width:25%;float:left;padding:0 20px} #ft_link {text-align:left} #ft_link a {display:block;color:#fff;line-height:2em;font-weight:bold} #ft_company h2 {font-size:1.2em;margin-bottom:20px} #ft_company {font-weight:normal;color:#e3e3e3;line-height:2em} #ft_catch {margin:20px 0 10px} #ft_copy {text-align:center;max-width:1200px;margin:0 auto;padding:20px 0;color:#5b5b5b;font-size:0.92em;border-top:1px solid #383838} #top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #0160e7;color:#0160e7;text-align:center;font-size:15px;z-index:90;background:#fff;} #top_btn:hover {border-color:#0160e7;background:#0160e7;color:#fff} /* 게시물 선택복사 선택이동 */ #copymove {} #copymove .win_desc {text-align:center;display:block} #copymove .tbl_wrap {margin:20px} #copymove .win_btn {padding:0 20px 20px} .copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px} .copymove_currentbg {background:#f4f4f4} /* 화면낭독기 사용자용 */ #hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden} .msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important} /* 본문 바로가기 */ #skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden} #skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em} /* ie6 이미지 너비 지정 */ .img_fix {width:100%;height:auto} /* 캡챠 자동등록(입력)방지 기본 -pc */ #captcha {display:inline-block;position:relative} #captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0} #captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px} #captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px} #captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top} #captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} /* 캡챠 자동등록(입력)방지 기본 - mobile */ #captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px} #captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block} #captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px} #captcha.m_captcha #captcha_reload span {display:none} #captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px} #captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em} #captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none} /* ckeditor 단축키 */ .cke_sc {margin:0 0 5px;text-align:right} .btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer} .cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center} .cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1} .cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""} .cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9} .cke_sc_def dt {width:20%;font-weight:bold} .cke_sc_def dd {width:30%} /* ckeditor 태그 기본값 */ #bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px} #bo_v_con li {display:list-item} /* 버튼 */ a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:400;border:0;font-size:16px; -webkit-transition:background-color 0.3s ease-out; -moz-transition:background-color 0.3s ease-out; -o-transition:background-color 0.3s ease-out; transition:background-color 0.3s ease-out} a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle} a.btn01:focus, a.btn01:hover {text-decoration:none} button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none} a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle} a.btn02:focus, .btn02:hover {text-decoration:none} button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none} .btn_confirm {text-align:right} /* 서식단계 진행 */ .btn_submit {border:0;background:#184fa1;color:#fff;cursor:pointer;} .btn_submit:hover {background:#684ab3} .btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff} a.btn_close {text-align:center;line-height:50px} a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle} .btn_cancel:hover {background:#aaa} a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */ a.btn_frmline {} button.btn_frmline {font-size:1em} /* 게시판용 버튼 */ a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent} /*.btn_b01:hover, .btn_b01:hover {color:#000}*/ a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle} a.btn_b02:hover, .btn_b02:hover {background:#0025eb} a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle} a.btn_b03:hover, .btn_b03:hover {background:#ebedf6} a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle} a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9} a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */ .btn_admin:hover, a.btn_admin:hover {color:#ff3746} /* 기본테이블 */ .tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;/*background:#fff;*/border-top:1px solid #ececec;border-bottom:1px solid #ececec} .tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left} .tbl_head01 {margin:0 0 10px} .tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head01 thead th {padding:20px 0;font-weight:normal;text-align:center;border-bottom:1px solid #ececec;height:40px} .tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8} .tbl_head01 td {color:#666;padding:10px 5px;border-top:1px solid #ecf0f1;border-bottom:1px solid #ecf0f1;line-height:16px;height:60px;word-break:keep-all} .tbl_head01 tbody tr:hover td {background:#fafafa} .tbl_head01 a:hover {text-decoration:underline} .tbl_head02 {margin:0 0 10px} .tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden} .tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em} .tbl_head02 thead a {color:#383838} .tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */ .tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center} .tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff} .tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:16px;word-break:keep-all} .tbl_head02 a {} /* 폼 테이블 */ .tbl_frm01 {margin:0 0 20px} .tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0} .tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left} .tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent} .wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); } .tbl_frm01 textarea {padding:2px 2px 3px} .frm_input {height:40px} .full_input {width:100%} .half_input {width:49.5%} .twopart_input {width:385px;margin-right:10px} .tbl_frm01 textarea, .write_div textarea {width:100%;height:100px} .tbl_frm01 a {text-decoration:none} .tbl_frm01 .frm_file {display:block;margin-bottom:5px} .tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:16px} /*기본 리스트*/ .list_01 ul {border-top:1px solid #ececec} .list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative} .list_01 li:nth-child(odd) {background:#f6f6f6} .list_01 li:after {display:block;visibility:hidden;clear:both;content:""} .list_01 li:hover {background:#f9f9f9} .list_01 li.empty_li {text-align:center;padding:20px 0;color:#666} /*폼 리스트*/ .form_01 h2 {font-size:1.167em} .form_01 li {margin-bottom:10px} .form_01 ul:after, .form_01 li:after {display:block;visibility:hidden;clear:both;content:""} .form_01 .left_input {float:left} .form_01 .margin_input {margin-right:1%} .form_01 textarea {height:100px;width:100%} .form_01 .frm_label {display:inline-block;width:130px} /* 자료 없는 목록 */ .empty_table {padding:50px 0 !important;text-align:center} .empty_list {padding:20px 0 !important;color:#666;text-align:center} /* 필수입력 */ .required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important} /* 테이블 항목별 정의 */ .td_board {width:80px;text-align:center} .td_category {width:80px;text-align:center} .td_chk {width:30px;text-align:center} .td_date {width:60px;text-align:center} .td_datetime {width:110px;text-align:center} .td_group {width:80px;text-align:center} .td_mb_id {width:100px;text-align:center} .td_mng {width:80px;text-align:center} .td_name {width:100px;text-align:left} .td_nick {width:100px;text-align:center} .td_num {width:50px;text-align:center} .td_numbig {width:80px;text-align:center} .td_stat {width:60px;text-align:center} .txt_active {color:#5d910b} .txt_done {color:#e8180c} .txt_expired {color:#ccc} .txt_rdy {color:#8abc2a} /* 새창 기본 스타일 */ .new_win {position:relative} .new_win .tbl_wrap {margin:0 20px} .new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1); -moz-box-shadow:0 1px 10px rgba(0,0,0,.1); box-shadow:0 1px 10px rgba(0,0,0,.1)} .new_win #win_title .sv {font-size:0.75em;line-height:1.2em} .new_win .win_ul {margin-bottom:15px;padding:0 20px} .new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px} .new_win .win_ul li:first-child {margin-left:0} .new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3} .new_win .win_ul .selected {background:#184fa1;border-color:#184fa1;position:relative;z-index:5} .new_win .win_ul .selected a {color:#fff;font-weight:bold} .new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px} .new_win .win_desc i {font-size:1.2em;vertical-align:baseline} .new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px} .new_win .frm_info {font-size:0.92em;color:#919191} .new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:#184fa1;background:#f6f6f6;padding:0 10px;border-radius:5px} .new_win .new_win_con {margin:20px 0;padding:20px} .new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""} .new_win .new_win_con2 {margin:20px 0} .new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""} .new_win .win_btn {text-align:center} .new_win .btn_close {height:45px;width:60px;overflow:hidden;cursor:pointer} .new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em} /* 검색결과 색상 */ .sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px} /* 자바스크립트 alert 대안 */ #validation_check {margin:100px auto;width:500px} #validation_check h1 {margin-bottom:20px;font-size:1.3em} #validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff} /* 사이드뷰 */ .sv_wrap {position:relative;font-weight:normal} .sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333; -webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); -moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2); box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)} .sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent} .sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb} .sv_wrap .sv a:hover {background:#000;color:#fff} .sv_member {color:#333} .sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto} .sv_nojs .sv {display:block} /* 페이징 */ .pg_wrap {clear:both;float:left;display:inline-block} .pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} .pg {text-align:center} .pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee} .pg a:focus, .pg a:hover {text-decoration:none} .pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px} .pg_page:hover {background-color:#fafafa} .pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee} .pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa} .pg_current {display:inline-block;background:#184fa1;border:1px solid #184fa1;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px} /* cheditor 이슈 */ .cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; } /* Mobile화면으로 */ #device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center} /* 테이블 */ /* Responsive scroll-y table */ .table-responsive {min-height:.01%; overflow-x:auto;} _@media screen and (max-width: 801px) { .table-responsive {width:100%; overflow-y:hidden; -ms-overflow-style:-ms-autohiding-scrollbar;} } /* Default table */ .certification table { border-top: 2px solid #a0a0a0; border-bottom: 1px solid #dfdfdf; border-collapse:collapse; border-spacing:0; margin-bottom:40px; margin-top:.5em; width:100%; max-width:100%; } .certification table thead tr {background:#f1f3f5; color:#000;} .certification table thead th, .certification table tfoot th {font-size:20px; color:#1c1c1c; letter-spacing:-.075em; line-height:1.3em; padding:23px 5px; position:relative; text-align:center; text-transform:uppercase;} .certification table th:first-child, .certification table td:first-child{border-left:none;} .certification table th:last-child, .certification table td:last-child{border-right:none;} .certification table tbody tr {background-color:#fff;} .certification table tbody tr:hover {background-color:#eef6fb; color:#000;} .certification table th, .certification table td { border:1px solid #dfdfdf; padding:23px 16px 23px 16px; position:relative; vertical-align:middle; font-size: 20px; color: #1c1c1c; text-align: center; line-height: 1.25em; letter-spacing: -.075em; } .certification caption{font-size:1.111em; font-weight:300; padding:10px 0;} _@media (max-width:1024px) { .certification table {font-size: .944444em;} } _@media (max-width:767px) { .certification table {font-size: 1em;} } /* Responsive table full */ _@media (max-width: 767px) { .table-responsive-full {box-shadow:none;} .table-responsive-full thead tr, .table-responsive-full tfoot tr {display:none;} .table-responsive-full tbody tr {/* -webkit-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); -moz-box-shadow:0px 7px 6px -6px rgba(0,0,0,.28); box-shadow:0px 7px 6px -6px rgba(0,0,0,.28);*/ margin-bottom:20px; } .table-responsive-full tbody tr:last-child {margin-bottom:0;} .table-responsive-full tr, .table-responsive-full td {display:block;} .table-responsive-full td { background-color:#fff; border-top:none; position:relative; padding-left:50%; } .table-responsive-full td:hover {background-color:#eef6fb; color:#000;} .table-responsive-full td:hover:before {color:hsl(0, 0%, 40%);} .table-responsive-full td:first-child { border-top:1px solid #dfdfdf; background:#f1f3f5; border-radius: 4px 4px 0 0; color: #000; font-size: 1.11111em; font-weight: bold; } .table-responsive-full td:before { content: attr(data-label); display: inline-block; color: hsl(0, 0%, 60%); font-size: 16px; font-weight: normal; margin-left: -100%; text-transform: uppercase; width: 100%; white-space:nowrap; } } _@media (max-width: 360px) { .table-responsive-full td {padding-left:16px;} .table-responsive-full td:before {display:block; margin-bottom:.5em; margin-left:0;} } @charset "utf-8"; /* 새글 스킨 (latest) */ .lat {position:relative;} .lat .lat_title {display:block;line-height:45px;font-size:15px;color:#253dbe} .lat .lat_title a {position:relative;color:#000;display:inline-block} .lat ul {} .lat li {position:relative;line-height:18px;border-bottom:1px solid #e5ecee;margin-bottom:10px} .lat li a {line-height:24px;font-weight:500;font-size:15px;line-height:20px;vertical-align:middle} .lat li a:hover {color:#3a8afd} .lat li .fa-heart {color:#ff0000} .lat li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle} .lat li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle} .lat li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle} .lat li .fa-caret-right {color:#bbb} .lat li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle} .lat li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle} .lat .profile_img img{border-radius:50%} .lt_info {padding:10px 0} .lt_info .lt_nick {} .lt_info .lt_date {color:#676767; font-size:12px;} .lat .empty_li {line-height:145px;color:#666;text-align:center;padding:0} .lat .empty_li:before {background:none;padding:0} .lat .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle} .lat .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center} .lat .lt_more:hover {color:#777} @charset "utf-8"; /* 새글 스킨 (latest) */ .pic_lt {position:relative;margin-bottom:20px;background:#fff} .pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe} .pic_lt .lat_title a {color:#000;display:inline-block;position:relative} .pic_lt .lt_more {position:absolute;top:11px;right:10px;display:block;width:25px;line-height:25px;color:#aaa;border-radius:3px;text-align:center;} .pic_lt .lt_more:hover {color:#777} .pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""} .pic_lt ul {margin: 0 -10px} .pic_lt li {float:left;width:25%;padding:0 10px} .pic_lt li.galley_li:nth-child(4n+1) {clear: both!important} .pic_lt li .lt_img {margin:5px 0;display:block} .pic_lt li .lt_img img {width:100%;height:auto} .pic_lt li a:hover {color:#a22121} .pic_lt li .fa-heart {color:#ff0000} .pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle} .pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle} .pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle} .pic_lt li .fa-caret-right {color:#bbb} .pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle} .pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle} .pic_lt .profile_img img{border-radius:50%} .lt_info {padding:10px 0} .lt_info .lt_nick {} .lt_info .lt_date {color:#888} .pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0} .pic_lt .empty_li:before {background:none;padding:0} .pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle} .pic_lt .lt_more {position:absolute;top:11px;right:0;display:block;width:40px;line-height:25px;color:#3a8afd;border-radius:3px;text-align:center} .pic_lt .lt_more:hover {color:#777} .floating-banner { position: fixed; top: 80%; right: 16px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 1000; } /* 개별 버튼 */ .floating-banner .banner-btn { display: flex; align-items: center; gap: 8px; background-color: #f9f9f9; padding: 8px 16px; border-radius: 30px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } /* Font Awesome 아이콘 크기 & 색상 */ .floating-banner .banner-btn i { font-size: 20px; width: 20px; text-align: center; color: #555; } /* 텍스트 스타일 */ .floating-banner .banner-btn span { font-size: 14px; color: #333; white-space: nowrap; } /* 호버 효과 */ .floating-banner .banner-btn:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .floating-banner .banner-btn .material-symbols-outlined { /* 기존 폰트 설정 유지 */ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-size: 20px; line-height: 1; color: #fff; /* 원형 배경 */ background-color: #0080ff; /* 배경색 */ border-radius: 50%; /* 완전 원형 */ padding: 8px; /* 원 크기 조정 */ display: inline-flex; /* 가운데 정렬 */ align-items: center; justify-content: center; } /* 이미지 아이콘에 원형 배경 입히기 */ .floating-banner .banner-btn .banner-icon { /* 이미지 본연의 크기 */ width: 35px; height: 35px; /* circle 배경 */ border-radius: 50%; /* Flex 가운데 정렬 */ display: inline-flex; align-items: center; justify-content: center; /* 이미지 비율 유지 */ object-fit: contain; } /* BASIC css end */