@charset "utf-8"; @font-face{ font-family:'Lato'; src: url(lato-regular-webfont.eot); src: url(lato-regular-webfont.eot#iefix) format('embedded-opentype'), url(lato-regular-webfont.woff) format('woff'); } @font-face{ font-family:'LatoL'; src: url(lato-light-webfont.eot); src: url(lato-light-webfont.eot#iefix) format('embedded-opentype'), url(lato-light-webfont.woff) format('woff'); } @font-face{ font-family:'LatoB'; src: url(lato-bold-webfont.eot); src: url(lato-bold-webfont.eot#iefix) format('embedded-opentype'), url(lato-bold-webfont.woff) format('woff'); } @font-face{ font-family:'ng'; src: url(NanumGothic.eot); src: url(NanumGothic.eot#iefix) format('embedded-opentype'), url(NanumGothic.woff) format('woff'); } @font-face{ font-family:'ngB'; src: url(NanumGothicBold.eot); src: url(NanumGothicBold.eot#iefix) format('embedded-opentype'), url(NanumGothicBold.woff) format('woff'); } /* ======================================= */ /* ============ [태그 초기화] ============ */ /* ======================================= */ * {margin:0; padding:0;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} html * {margin:0; padding:0;} html input[type=checkbox], input[type=radio]{margin:0;} html, body {width:100%; height:100%;} body {font-size:14px; font-family:'Lato', sans-serif; color:#000; background:#dcddde;word-break:keep-all;} html[lang="cn"] body {word-break:normal;} body.main{background:#fff;} img {border:0; vertical-align:middle;} form, fieldset {display:block; border:0;} ul,ol,li {list-style:none;} hr {display:none;} table {border-collapse:collapse; border-spacing:0; width:100%;} th{font-weight:normal;} strong, b{font-weight:normal;} h1, h2, h3, h4, h5, h6 {font-size:14px;font-weight:normal;} input, select { vertical-align:middle; } legend {height:0; width:0; font-size:0; text-indent:-9999px; } /* 161201 수정 */ em{font-style:normal;} button{overflow:visible;background:none;border:0;margin:0;text-transform:none;-webkit-appearance:button;cursor:pointer;} button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0;} button span{position:relative} blockquote, q {quotes: none;} a:link {color:#666; text-decoration:none;} a:visited {color:#666; text-decoration:none;} a:hover {color:#015d23; text-decoration:none;} a:active {color:#666; text-decoration:none;} /* ======================================= */ /* ============ [공통 스타일] ============ */ /* ======================================= */ /* [서식] */ input:focus { outline: none; } button:focus{ outline: none; } input[type="text"]{border:1px solid #d3d2d2;height:30px;box-sizing:border-box;line-height:28px;padding:0 15px;font-size:12px;border-radius:2px;color:#666;} input[type="text"]:focus{border-color:#7c7c7c;} /* 161201 수정 */ select{border:1px solid #d3d2d2;height:30px;box-sizing:border-box;line-height:28px;padding:0 0 0 15px;font-size:12px;border-radius:2px;color:#666;} } input[type="radio"]{width:18px;height:18px;vertical-align:top;} input[type="checkbox"]{width:18px;height:18px;vertical-align:middle;} label{line-height:18px;font-size:12px;cursor:pointer;} /* 161201 수정 */ /* 정렬 */ .al_l {text-align:left !important;} .al_c {text-align:center !important;} .al_r {text-align:right !important;} .al_j {text-align:justify !important;} .al_t {vertical-align:top !important;} .fl_l {float:left !important;} .fl_r {float:right !important;} /* 텍스트속성 */ .textLineT{text-decoration:overline;} .textLineM{text-decoration:line-through;} .textLineB{text-decoration:underline;} /* 포지션 */ .poRe{position:relative;} .poAb{position:absolute;} /* 세로정렬 */ .vCenter{position:absolute;top:1000%;} /* clear */ .clear{*zoom:1;} .clear:after{content:''; display:block; clear:both;} /* margin, padding */ .mgt0{margin-top:0px !important;}.mgt5{margin-top:5px !important;}.mgt10{margin-top:10px !important;}.mgt15{margin-top:15px !important;}.mgt20{margin-top:20px !important;}.mgt25{margin-top:25px !important;}.mgt30{margin-top:30px !important;}.mgt40{margin-top:40px !important;}.mgt60{margin-top:60px !important;} /* 161214 수정 START */ .mgb0{margin-bottom:0px !important;}.mgb5{margin-bottom:5px !important;}.mgb10{margin-bottom:10px !important;}.mgb15{margin-bottom:15px !important;}.mgb20{margin-bottom:20px !important;}.mgb25{margin-bottom:25px !important;}.mgb30{margin-bottom:30px !important;} .mgl0{margin-left:0px !important;}.mgl5{margin-left:5px !important;}.mgl10{margin-left:10px !important;}.mgl15{margin-left:15px !important;}.mgl20{margin-left:20px !important;}.mgl25{margin-left:25px !important;}.mgl30{margin-left:30px !important;} .mgr0{margin-right:0px !important;}.mgr5{margin-right:5px !important;}.mgr10{margin-right:10px !important;}.mgr15{margin-right:15px !important;}.mgr20{margin-right:20px !important;}.mgr25{margin-right:25px !important;}.mgr30{margin-right:30px !important;} .pdt0{padding-top:0px !important;}.pdt5{padding-top:5px !important;}.pdt10{padding-top:10px !important;}.pdt15{padding-top:15px !important;}.pdt20{padding-top:20px !important;}.pdt25{padding-top:25px !important;}.pdt30{padding-top:30px !important;} .pdb0{padding-bottom:0px !important;}.pdb5{padding-bottom:5px !important;}.pdb10{padding-bottom:10px !important;}.pdb15{padding-bottom:15px !important;}.pdb20{padding-bottom:20px !important;}.pdb25{padding-bottom:25px !important;}.pdb30{padding-bottom:30px !important;} .pdl0{padding-left:0px !important;}.pdl5{padding-left:5px !important;}.pdl10{padding-left:10px !important;}.pdl15{padding-left:15px !important;}.pdl20{padding-left:20px !important;}.pdl25{padding-left:25px !important;}.pdl30{padding-left:30px !important;} .pdr0{padding-right:0px !important;}.pdr5{padding-right:5px !important;}.pdr10{padding-right:10px !important;}.pdr15{padding-right:15px !important;}.pdr20{padding-right:20px !important;}.pdr25{padding-right:25px !important;}.pdr30{padding-right:30px !important;} .hide{font-size:0;line-height:0;text-indent:-5000px;} /* ======================================= */ /* ========== [레이아웃 - 공통] ========== */ /* ======================================= */ /* HEADER */ header{position:fixed;left:0;top:0;z-index:5;width:100%;height:80px;} header.bgOn{background:#fff;} header h1{position:absolute;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);width:130px;background:url('../images/logo_sub.png') no-repeat center center;} header h1 a{display:block;height:44px;} .main header.bgOn{background:none;} .main header h1{background-image:url('../images/logo.png');} header.bgOn h1{background-image:url('../images/logo_sub.png') !important;} header.bgOn .menu_btn:before{background:#222 !important;} header.bgOn .menu_btn:after{background:#222 !important;} header.bgOn .menu_btn span:before{background:#222 !important;} header.bgOn .menu_btn span:after{background:#222 !important;} header .menu_btn{position:relative;display:block;height:64px;width:64px;margin:8px 0 0 10px;float:left;} header .menu_btn:before{content:'';position:absolute;width:28px;height:3px;background:#222;left:18px;top:20px;} header .menu_btn:after{content:'';position:absolute;width:28px;height:3px;background:#222;left:18px;top:40px;} header .menu_btn span:before{content:'';position:absolute;width:28px;height:3px;background:#222;left:18px;top:30px;} .main header .menu_btn:before{background:#fff;} .main header .menu_btn:after{background:#fff;} .main header .menu_btn span:before{background:#fff;} header .language_btn{float:right;font-size:0;padding:32px 32px 0 0;} header .language_btn em{font-size:16px;line-height:1;color:#666;display:inline-block;padding:0 10px;} header .language_btn a{font-size:16px;line-height:1;color:#666;} header .language_btn a:hover{color:#f15922;} html[lang="ko"] header .language_btn a:nth-child(1){color:#f15922;} html[lang="en"] header .language_btn a:nth-child(3){color:#f15922;} html[lang="cn"] header .language_btn a:nth-child(5){font-family:'NotoSansSCR';color:#f15922;} header .sns_btn{position:absolute;right:170px;top:20px;font-size:0;} header .sns_btn li{display:inline-block;width:40px;height:40px;margin-left:10px;} header .sns_btn li:first-child{margin-left:0;} header .sns_btn li a{display:block;width:40px;height:40px;background:url('../images/header_sns.png') no-repeat;} .main header .sns_btn li a{background:url('../images/header_sns_main.png') no-repeat;} header .sns_btn li a.sns_s{background-position:left top;} header .sns_btn li a.sns_i{background-position:center top;} header .sns_btn li a.sns_f{background-position:right top;} header .sns_btn li a.sns_s:hover{background-position:left bottom;} header .sns_btn li a.sns_i:hover{background-position:center bottom;} header .sns_btn li a.sns_f:hover{background-position:right bottom;} /* 전체메뉴 */ #all_menu{position:fixed;z-index:11;width:100%;height:100%;box-sizing:border-box;background:#ccc;display:none;} #all_menu .close{display:block;height:64px;width:64px;position:absolute;left:10px;top:8px;} #all_menu .close:before{content:'';position:absolute;width:28px;height:3px;background:#fff;left:18px;top:30px;transform: rotate(45deg);} #all_menu .close:after{content:'';position:absolute;width:28px;height:3px;background:#fff;left:18px;top:30px;transform: rotate(135deg);} #all_menu > div{width:100%;height:100%;display:table;} #all_menu > div > div{display:table-cell;vertical-align:middle;} #all_menu > div > div ul.menu_list li{padding-top:50px;text-align:center;} #all_menu > div > div ul.menu_list li:first-child{padding-top:0;} #all_menu > div > div ul.menu_list li a{font-size:40px;line-height:1;color:#fff;} html[lang="cn"] #all_menu > div > div ul.menu_list li a{font-family:'NotoSansSCR';} #all_menu > div > div ul.menu_list li a.hover{font-family:'ngB';font-size:34px;line-height:40px;} #all_menu > div > div ul.sns_list{margin-top:60px;font-size:0;text-align:center;} #all_menu > div > div ul.sns_list li{display:inline-block;margin-left:20px;} #all_menu > div > div ul.sns_list li:first-child{margin-left:0;} #all_menu > div > div ul.sns_list li a{display:block;width:80px;height:80px;background:url('../images/btn_sns.png') no-repeat;} #all_menu > div > div ul.sns_list li a.sns_s{background-position:left top;} #all_menu > div > div ul.sns_list li a.sns_i{background-position:center top;} #all_menu > div > div ul.sns_list li a.sns_f{background-position:right top;} #all_menu > div > div ul.sns_list li a.sns_s:hover{background-position:left bottom;} #all_menu > div > div ul.sns_list li a.sns_i:hover{background-position:center bottom;} #all_menu > div > div ul.sns_list li a.sns_f:hover{background-position:right bottom;} /* FOOTER */ footer{background:#000;} footer .footer_con{max-width:1120px;margin:0 auto;} footer .footer_con .txt_area{padding:50px 0 30px 0;color:#999;text-align:center;} footer .footer_con .txt_area p{font-size:45px;line-height:36px;} footer .footer_con .txt_area p span{font-size:22px;display:block;} footer .footer_con .txt_area p.last{font-size:18px;line-height:1;padding-top:15px;font-family:'ng';} footer .footer_con .logo_footer{text-align:center;} footer .footer_con .nav_footer{padding:70px 0 20px 0;border-bottom:1px solid rgba(83,87,90,0.5);} footer .footer_con .nav_footer ul{font-size:0;text-align:center;} footer .footer_con .nav_footer ul li{display:inline-block;line-height:1;} footer .footer_con .nav_footer ul li:nth-child(1){width:102px;} footer .footer_con .nav_footer ul li:nth-child(2){width:138px;} footer .footer_con .nav_footer ul li:nth-child(3){width:131px;} footer .footer_con .nav_footer ul li:nth-child(4){width:140px;} footer .footer_con .nav_footer ul li a{font-size:15px;color:rgba(235,235,243,0.5);} footer .footer_con .nav_footer ul li a.hover{font-family:'ng';} footer .footer_con address{font-family:'ng';font-size:13px;line-height:1;color:#53575a;padding:35px 0 10px 0;text-align:center;font-style:normal;} footer .footer_con .copyright{font-size:13px;line-height:1;color:#53575a;text-align:center;padding-bottom:60px;} /* container */ #container{padding:80px 0 0 0;overflow:hidden;} .main #container{padding:0;height:100%;width:100%;} /* BR */ .pcBr{display:inline;} .moBr{display:none;} /* BTN STYLE */ .btn_style{position:relative;} .btn_style span{position:absolute;left:0;top:0;height:100%;width:100%;z-index:3;} .btn_style em{position:absolute;background:#f15922;left:0;top:0;height:100%;width:0%;z-index:2;transition: all 0.3s ease;} .btn_style:hover em{width:100%;} .main .intro-end{display:none;} /* ======================================= */ /* ============ [메인 컨텐츠] ============ */ /* ======================================= */ #container .main_con{height:100%;} #container .main_con > section{width:100%;height:100%;overflow:hidden;position:relative;} #container .main_con > section .bg_area{position:absolute;width:100%;height:100%;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);} #container .main_con > section .bg_area img{position:absolute;left:50%;top:50%;min-width:100%;min-height:100%;transform:translateX(-50%) translateY(-50%);} #container .main_con > section .cont{position:relative;z-index:2;} #container .main_indicator{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:9;} #container .main_indicator li{margin-top:84px;position:relative;} #container .main_indicator li:after{content:'';position:absolute;width:3px;height:20px;background:#f15922;left:50%;transform:translateX(-50%);top:48px;display:none;} #container .main_indicator li.on:after{display:block;} #container .main_indicator li:last-child:after{display:none;} #container .main_indicator li:first-child{margin-top:0;} #container .main_indicator a{color:#53575a;font-size:16px;line-height:16px;} #container .main_indicator .on a, #container .main_indicator a:hover{color:#f15922;} #container .main_con > section.sec1 .mainBanner .slick-list{height:100%;} #container .main_con > section.sec1 .mainBanner .slick-track{height:100%;} #container .main_con > section.sec1 .mainBanner .slick-slide{position:relative;overflow:hidden;} #container .main_con > section.sec1 .banner_nav{margin-top:-180px;position:relative;z-index:10;font-size:0;text-align:center;} #container .main_con > section.sec1 .banner_nav .btn_prev{display:inline-block;width:30px;height:30px;background:url('../images/main/btn_prev.png') no-repeat center bottom / cover;vertical-align:bottom;} #container .main_con > section.sec1 .banner_nav .btn_next{display:inline-block;width:30px;height:30px;background:url('../images/main/btn_next.png') no-repeat center bottom / cover;vertical-align:bottom;} #container .main_con > section.sec1 .banner_nav ul{display:inline-block;padding:10px 30px;vertical-align:bottom;} #container .main_con > section.sec1 .banner_nav ul li{display:inline-block;width:6px;height:6px;border:2px solid #fff;border-radius:50%;margin-left:7px;} #container .main_con > section.sec1 .banner_nav ul li:first-child{margin-left:0;} #container .main_con > section.sec1 .banner_nav ul li.on{border-color:#f15922;background:#f15922;} #container .main_con > section.sec1 .intro{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:100;} #container .main_con > section.sec1 .intro p{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);color:#fff;font-weight:bold;width:100%;text-align:center;font-size:60px;line-height:1;} #container .main_con > section.sec1 .intro p em{opacity:0;transition: all 2s ease-out;} #container .main_con > section.sec1 .intro p em.on{opacity:1;} #container .main_con > section.sec1 .intro2{position:fixed;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:100;} #container .main_con > section.sec1 .intro2 .logo{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);padding-bottom:27px;} #container .main_con > section.sec1 .intro2 .logo em{border:3px solid #ef4f25;border-radius:50%;width:11px;height:11px;display:block;box-sizing:border-box;position:absolute;left:106px;top:91px;display:none;} #container .main_con > section.sec1 .intro2 .logo span{position:absolute;bottom:0;left:134px;width:0;height:16px;overflow:hidden;} #container .main_con > section.sec1 .intro2 .logo span.on{width:180px;} #container .main_con > section.sec1 .intro2 .logo span img{position:absolute;left:0;top:-2px;} #container .main_con > section.sec1 .intro2 .line{height:3px;background:#ef4f25;width:0;left:0;top:50%;margin-top:43px;position:absolute;transition:all 1s ease-out;} #container .main_con > section.sec1 .intro2 .line.on{width:50%;transform:translateX(-50px);} #container .main_con > section.sec1 .scroll_info{position:absolute;bottom:33px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;line-height:1;padding-bottom:55px;background:url('../images/main/arr_down.png') no-repeat center bottom / 37px 37px;color:#fff;} /*#container .main_con > section.sec1 .scroll_info:after{content:'';position:absolute;left:50%;top:-80px;width:1px;height:60px;background:#fff;}*/ #container .main_con > section.sec1 .banner1 .cont{display:table;width:100%;height:100%;} #container .main_con > section.sec1 .banner1 .txt_area{color:#fff;font-size:60px;line-height:48px;text-align:center;display:table-cell;vertical-align:middle;} #container .main_con > section.sec1 .banner1 .txt_area em{text-decoration:none;opacity:0;transition: all 2s ease-out;display:block;} #container .main_con > section.sec1 .banner1 .txt_area em.on{opacity:1;} #container .main_con > section.sec1 .banner1 .txt_area i{font-style:normal;font-size:30px;display:block;} #container .main_con > section.sec1 .banner1 .txt_area span{opacity:0;transition: all 2s ease-out;display:block;padding-top:35px;font-family:'ng';font-size:24px;line-height:1;} #container .main_con > section.sec1 .banner1 .txt_area span.on{opacity:1;} #container .main_con > section.sec1 .banner1 .bg_area{transition:all 2s ease-out;transform:translateX(-50%) translateY(-50%) scale(1.1);} #container .main_con > section.sec1 .banner1 .bg_area.on{transform:translateX(-50%) translateY(-50%) scale(1.2);} #container .main_con > section.sec1 .banner1 .bg_area .parallax{width:100%;height:100%;background:url('../images/main/main_visual1.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner2{background:url('../images/main/banner2.jpg') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner2 .txt_area{margin:100px 0 0 0px;color:#464351;text-align:center;transition:all 2s ease-out;opacity:0;position:relative;} #container .main_con > section.sec1 .banner2 .txt_area.on{opacity:1;} #container .main_con > section.sec1 .banner2 .txt_area .txt{display:inline-block; padding:0 15px; font-size:24px;line-height:50px;letter-spacing:-1px; border-top:2px solid #464351; border-bottom:2px solid #464351;} #container .main_con > section.sec1 .banner2 .txt_area .name{margin-top:15px;font-family:'ngB';font-size:60px;line-height:70px;letter-spacing:-5px;} #container .main_con > section.sec1 .banner2 .txt_area .name span {font-family:'LatoB';} #container .main_con > section.sec1 .banner2 .txt_area .video {position:relative; margin:30px auto 0 auto; max-width:760px; position:relative;} #container .main_con > section.sec1 .banner2 .txt_area .video img {width:100%;} #container .main_con > section.sec1 .banner2 .txt_area > a{display:inline-block;padding:0 15px 5px 0;margin-top:30px;border-bottom:1px solid #fff;font-family:'LatoB';font-size:14px;line-height:1;color:#fff;background:url('../images/main/icon_arr3.png') no-repeat right 4px;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area .txt{font-family:'Lato';font-size:22px;letter-spacing:0;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area .name{font-family:'LatoB';letter-spacing:-1px;} html[lang="cn"] #container .main_con > section.sec1 .banner2 .txt_area .txt{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec1 .banner2 .txt_area .name{font-family:'NotoSansSCB';} #container .main_con > section.sec1 .banner3{background:url('../images/main/banner3.jpg') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner3 .txt_area{margin:100px 0 0 0px;color:#aa8066;text-align:center;transition:all 2s ease-out;opacity:0;position:relative;} #container .main_con > section.sec1 .banner3 .txt_area.on{opacity:1;} #container .main_con > section.sec1 .banner3 .txt_area .txt{display:inline-block; padding:0 15px; font-size:24px;line-height:50px;letter-spacing:-1px; border-top:2px solid #aa8066; border-bottom:2px solid #aa8066;} #container .main_con > section.sec1 .banner3 .txt_area .name{margin-top:15px;font-family:'ngB';font-size:60px;line-height:70px;letter-spacing:-5px;} #container .main_con > section.sec1 .banner3 .txt_area .name span {font-family:'LatoB';} #container .main_con > section.sec1 .banner3 .txt_area .video {position:relative; margin:30px auto 0 auto; max-width:760px; position:relative;} #container .main_con > section.sec1 .banner3 .txt_area .video img {width:100%;} #container .main_con > section.sec1 .banner3 .txt_area > a{display:inline-block;padding:0 15px 5px 0;margin-top:30px;border-bottom:1px solid #fff;font-family:'LatoB';font-size:14px;line-height:1;color:#fff;background:url('../images/main/icon_arr3.png') no-repeat right 4px;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area .txt{font-family:'Lato';font-size:22px;letter-spacing:0;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area .name{font-family:'LatoB';letter-spacing:-1px;} html[lang="cn"] #container .main_con > section.sec1 .banner3 .txt_area .txt{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec1 .banner3 .txt_area .name{font-family:'NotoSansSCB';} #container .main_con > section.sec1 .banner4{background:url('../images/main/banner4.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner4 .cont{display:table;width:100%;height:100%;} #container .main_con > section.sec1 .banner4 .txt_area{color:#19566c;display:table-cell;vertical-align:middle;padding-left:50%;transition:all 2s ease-out;opacity:0;} #container .main_con > section.sec1 .banner4 .txt_area.on{opacity:1;} #container .main_con > section.sec1 .banner4 .txt_area .txt{font-family:'ngB';font-size:24px;line-height:36px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner4 .txt_area .name{margin-top:35px;font-family:'ngB';font-size:60px;line-height:70px;letter-spacing:-5px;} #container .main_con > section.sec1 .banner4 .txt_area .txt2{margin-top:20px;font-size:18px; line-height:30px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner4 .txt_area a{display:inline-block;padding:0 15px 5px 0;margin-top:30px;border-bottom:1px solid #19566c;font-family:'LatoB';font-size:14px;line-height:1;color:#19566c;background:url('../images/main/icon_arr2.png') no-repeat right 4px;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .txt{font-family:'Lato';font-size:22px;letter-spacing:0;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .name{font-family:'LatoB';letter-spacing:-1px;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .txt2{font-family:'Lato';margin-top:15px;font-size:16px;line-height:26px;letter-spacing:0;} html[lang="cn"] #container .main_con > section.sec1 .banner4 .txt_area .txt{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec1 .banner4 .txt_area .name{font-family:'NotoSansSCB';} html[lang="cn"] #container .main_con > section.sec1 .banner4 .txt_area .txt2{font-family:'NotoSansSCL';} #container .main_con > section.sec1 .banner5{background:url('../images/main/banner5.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner5 .txt_area{padding-top:85px;margin:180px 0 0 150px;;color:#fff;transition:all 2s ease-out;opacity:0;background:url('../images/main/banner5_txt.png') no-repeat left top;} #container .main_con > section.sec1 .banner5 .txt_area.on{opacity:1;} #container .main_con > section.sec1 .banner5 .txt_area .txt{margin-bottom:20px;font-size:32px;font-family:'ng';line-height:1;letter-spacing:-1.5px;} #container .main_con > section.sec1 .banner5 .txt_area .txt2{font-size:48px;font-family:'ngB';line-height:56px;letter-spacing:-1.5px;} #container .main_con > section.sec1 .banner5 .txt_area .txt3{width:320px;margin-top:5px;text-align:center;font-size:40px;font-family:'ng';line-height:70px;color:#333;background:#fff;letter-spacing:-1.5px;} #container .main_con > section.sec1 .banner5 .txt_area .txt4{margin-top:35px;font-size:20px;font-family:'ng';line-height:30px;letter-spacing:-0.5px;} #container .main_con > section.sec1 .banner5 .txt_area .date{font-size:24px;line-height:40px;letter-spacing:-0.5px;} #container .main_con > section.sec1 .banner5 .txt_area a{display:inline-block;padding:0 15px 5px 0;margin-top:45px;border-bottom:1px solid #fff;font-family:'LatoB';font-size:14px;line-height:1;color:#fff;background:url('../images/main/icon_arr3.png') no-repeat right 4px;} html[lang="cn"] #container .main_con > section.sec1 .banner5 .txt_area .txt2{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec1 .banner5 .txt_area .txt4{font-family:'NotoSansSCL';} #container .main_con > section.sec1 .banner6{background:url('../images/main/banner6.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner6 .txt_area{padding-top:145px;text-align:center;color:#fff;transition:all 2s ease-out;opacity:0;} #container .main_con > section.sec1 .banner6 .txt_area.on{opacity:1;} #container .main_con > section.sec1 .banner6 .txt_area .tit{height:336px;background:url('../images/main/banner6_txt.png') no-repeat center center / auto 100%;} #container .main_con > section.sec1 .banner6 .txt_area .txt{margin-top:40px;font-size:24px;line-height:36px;} #container .main_con > section.sec1 .banner6 .txt_area .txt2{margin-top:15px;font-size:16px; line-height:28px;} #container .main_con > section.sec1 .banner6 .txt_area a{display:inline-block;padding:0 15px 5px 0;margin-top:45px;border-bottom:1px solid #fff;font-family:'LatoB';font-size:14px;line-height:1;color:#fff;background:url('../images/main/icon_arr3.png') no-repeat right 4px;} html[lang="en"] #container .main_con > section.sec1 .banner6 .txt_area .tit{font-family:'LatoB';} html[lang="en"] #container .main_con > section.sec1 .banner6 .txt_area .txt{font-family:'Lato';} html[lang="en"] #container .main_con > section.sec1 .banner6 .txt_area .txt2{font-family:'Lato';} html[lang="cn"] #container .main_con > section.sec1 .banner6 .txt_area .txt{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec1 .banner6 .txt_area .txt2{font-family:'NotoSansSCL';} #container .main_con > section.sec2 .cont{display:table;width:100%;height:100%;} #container .main_con > section.sec2 .bg_area{opacity:0.3;transition: all 2s ease;} #container .main_con > section.sec2 .bg_area.on{opacity:1;} #container .main_con > section.sec2 .cont_left{display:table-cell;width:50%;height:100%;overflow:hidden;} #container .main_con > section.sec2 .cont_left .con_box{position:relative;height:100%;} #container .main_con > section.sec2 .cont_left .bg_area{height:100%;width:100%;background:url('../images/main/main_visual2_1.jpg') no-repeat center center / cover;} #container .main_con > section.sec2 .cont_right{display:table-cell;width:50%;height:100%;overflow:hidden;} #container .main_con > section.sec2 .cont_right .cont_top{height:50%;position:relative;overflow:hidden;} #container .main_con > section.sec2 .cont_right .cont_top .bg_area{height:100%;width:100%;background:url('../images/main/main_visual2_2.jpg') no-repeat center center / cover;} #container .main_con > section.sec2 .cont_right .cont_bottom{height:50%;position:relative;overflow:hidden;} #container .main_con > section.sec2 .cont_right .cont_bottom .bg_area{height:100%;width:100%;background:url('../images/main/main_visual2_3.jpg') no-repeat center center / cover;} #container .main_con > section.sec2 .txt_area{position:absolute;z-index:2;color:#fff;padding:140px 0 0 6.25%;} #container .main_con > section.sec2 .txt_area .txt1{position:relative;font-size:72px;line-height:1;opacity:0;transition: all 1s ease-out;margin-left:-50px;} #container .main_con > section.sec2 .txt_area .txt1.on{margin:0;opacity:1;} #container .main_con > section.sec2 .txt_area .txt1 span{display:block;font-size:24px;line-height:1;padding-top:20px;margin-top:25px;position:relative;} #container .main_con > section.sec2 .txt_area .txt1 span:before{content:'';position:absolute;width:100%;height:10px;left:0;top:0;background:url('../images/main/tit_line.png') no-repeat left center;} #container .main_con > section.sec2 .txt_area .txt2{margin-top:100px;opacity:0;font-family:'ng';font-size:24px;line-height:34px;padding-top:40px;transition: all 1s ease-out;} #container .main_con > section.sec2 .txt_area .txt2.on{margin:0;opacity:1;} #container .main_con > section.sec2 .txt_area .txt3_area{margin-top:30px;opacity:0;transition: all 1s ease-out;width:550px;padding-top:70px;} #container .main_con > section.sec2 .txt_area .txt3_area.on{margin:0;opacity:1;} #container .main_con > section.sec2 .txt_area .txt3{font-family:'ng';font-size:16px;line-height:26px;} #container .main_con > section.sec2 .txt_area .txt3 em{color:#f15922;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots{position:absolute;left:0;top:35px;font-size:0;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots li{display:inline-block;border-radius:15px;width:15px;height:15px;background:#bababb;margin-right:10px;overflow:hidden;position:relative;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots li button{font-size:0;line-height:0;width:0;height:100%;opacity:1;background:#fff;position:absolute;left:0;top:0;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots li.slick-active button{width:100%;transition: all 4s ease-out;} html[lang="cn"] #container .main_con > section.sec2 .txt_area .txt2{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec2 .txt_area .txt3{font-family:'NotoSansSCL';} #container .main_con > section.sec3 .cont{display:table;width:100%;height:100%;} #container .main_con > section.sec3 .cont_left{display:table-cell;width:50%;height:100%;overflow:hidden;position:relative;} #container .main_con > section.sec3 .cont_left .bg_area{width:100%;height:100%;transform:translateX(-50%) translateY(-50%) scale(1.2);transition:all 2s ease-out;position:relative;} #container .main_con > section.sec3 .cont_left .bg_area.on{transform:translateX(-50%) translateY(-50%) scale(1.1);} #container .main_con > section.sec3 .cont_left .bg_area .parallax{width:100%;height:100%;background:url('../images/main/main_visual3_1.jpg') no-repeat center center / cover;} #container .main_con > section.sec3 .cont_right{display:table-cell;width:50%;height:100%;overflow:hidden;vertical-align:middle;background:#ebebf3;} #container .main_con > section.sec3 .cont_right .txt_area{width:391px;margin:0 auto;} #container .main_con > section.sec3 .cont_right .txt_area .txt1{margin-left:-50px;opacity:0;font-size:72px;line-height:72px;transition: all 1s ease-out;padding-bottom:25px;} #container .main_con > section.sec3 .cont_right .txt_area .txt1.on{margin:0;opacity:1;} #container .main_con > section.sec3 .cont_right .txt_area .txt2{position:relative;font-size:24px;line-height:30px;padding-top:15px;margin-left:50px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec3 .cont_right .txt_area .txt2.on{margin:0;opacity:1;} #container .main_con > section.sec3 .cont_right .txt_area .txt2:before{content:'';position:absolute;width:100%;height:10px;left:0;top:0;background:url('../images/main/tit_line.png') no-repeat left center;} #container .main_con > section.sec3 .cont_right .txt_area .txt3{font-family:'ng';font-size:24px;line-height:30px;padding-top:40px;margin-left:-50px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec3 .cont_right .txt_area .txt3.on{margin:0;opacity:1;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area{margin-right:50px;opacity:0;transition: all 1s ease-out;width:100%;padding-top:70px;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area.on{margin:0;opacity:1;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4{font-size:16px;font-family:'ng';line-height:30px;color:#666;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4 span{color:#f15922;font-size:24px;font-family:'ngB';line-height:1;padding-bottom:5px;display:block;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4 em{color:#f15922;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots{position:absolute;left:0;top:35px;font-size:0;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots li{display:inline-block;border-radius:15px;width:15px;height:15px;background:#ebebf3;margin-right:10px;border:2px solid #ccc;box-sizing:border-box;position:relative;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots li button{font-size:0;line-height:0;width:0;height:100%;opacity:1;background:#ccc;position:absolute;left:0;top:0;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots li.slick-active button{width:100%;transition: all 4s ease-out;} #container .main_con > section.sec3 .cont_right .img_area{text-align:center;padding-top:25px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec3 .cont_right .img_area.on{opacity:1;} html[lang="cn"] #container .main_con > section.sec3 .cont_right .txt_area .txt3{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec3 .cont_right .txt_area .txt4{font-family:'NotoSansSCL';} #container .main_con > section.sec4{background:#53575a;} #container .main_con > section.sec4 .cont{position:relative;height:100%;} #container .main_con > section.sec4 .txt_area{position:absolute;left:50%;top:50%;z-index:3;box-sizing:border-box;margin:0 0 0 120px;transform:translateY(-50%);margin-top:-40px;} #container .main_con > section.sec4 .txt_area .txt1{transform:translateY(-50px);opacity:0;font-size:72px;line-height:72px;transition: all 1s ease-out;} #container .main_con > section.sec4 .txt_area .txt1.on{transform:translateY(0);opacity:1;} #container .main_con > section.sec4 .txt_area .txt2{position:relative;font-size:24px;line-height:30px;padding-top:15px;margin-top:20px;opacity:0;transition: all 1s ease-out;transform:translateX(50px);} #container .main_con > section.sec4 .txt_area .txt2:before{content:'';position:absolute;width:100%;height:10px;left:0;top:0;background:url('../images/main/tit_line.png') no-repeat left center;} #container .main_con > section.sec4 .txt_area .txt2.on{transform:translateX(0);opacity:1;} #container .main_con > section.sec4 .txt_area .txt3{font-family:'ng';color:#fff;font-size:16px;line-height:26px;padding-top:25px;margin-left:-50px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec4 .txt_area .txt3.on{margin:0;opacity:1;} #container .main_con > section.sec4 .txt_area .txt3 > span{display:block;font-size:24px;line-height:32px;padding-bottom:10px;} #container .main_con > section.sec4 .txt_area .txt3 > em{color:#f15922;font-family:'ngB';} #container .main_con > section.sec4 .txt_area .txt3 .location_link{background:#8b9093;color:#fff;display:block;font-family:'ng';font-size:16px;line-height:40px;height:40px;width:152px;text-align:center;margin-top:25px;} #container .main_con > section.sec4 .bg_area{background:url('../images/main/main_visual4.png') no-repeat right center;width:50%;left:0;top:0;transform:translateX(0);} #container .main_con > section.sec4 .floor1{width:50%;height:100%;position:absolute;left:0;top:0;} #container .main_con > section.sec4 .floor1.on{background:url('../images/main/main_visual4_floor1.png') no-repeat right center;} #container .main_con > section.sec4 .floor1 .line{background:url('../images/main/main_visual4_floor1_line.png') no-repeat center center;width:200%;height:100%;display:none;} #container .main_con > section.sec4 .floor1.show{display:block;} #container .main_con > section.sec4 .floor1.show .line{display:block;} #container .main_con > section.sec4 .floor1.on{display:block;} #container .main_con > section.sec4 .floor1.on .line{display:block;background:url('../images/main/main_visual4_floor1_line2.png') no-repeat center center;} #container .main_con > section.sec4 .floor2{width:50%;height:100%;position:absolute;left:0;top:0;} #container .main_con > section.sec4 .floor2.on{background:url('../images/main/main_visual4_floor2.png') no-repeat right center;} #container .main_con > section.sec4 .floor2 .line{background:url('../images/main/main_visual4_floor2_line.png') no-repeat center center;width:200%;height:100%;display:none;} #container .main_con > section.sec4 .floor2.show{display:block;} #container .main_con > section.sec4 .floor2.show .line{display:block;} #container .main_con > section.sec4 .floor2.on{display:block;} #container .main_con > section.sec4 .floor2.on .line{display:block;background:url('../images/main/main_visual4_floor2_line2.png') no-repeat center center;} #container .main_con > section.sec4 .floor_layer{position:absolute;left:0;top:190px;width:420px;height:182px;box-sizing:border-box;border-radius:3px;background:#222;padding:20px 30px;display:none;} html[lang="en"] #container .main_con > section.sec4 .floor_layer{height:200px;} html[lang="cn"] #container .main_con > section.sec4 .floor_layer{height:132px;} #container .main_con > section.sec4 .floor_layer .layer_tit{line-height:30px;} #container .main_con > section.sec4 .floor_layer .layer_tit .mBr{display:none;} #container .main_con > section.sec4 .floor_layer .layer_tit em{display:inline-block;font-size:28px;color:rgba(255,255,255,0.5);vertical-align:top;} #container .main_con > section.sec4 .floor_layer .layer_tit span{display:inline-block;color:#fff;font-size:22px;font-family:'ngB';} html[lang="en"] #container .main_con > section.sec4 .floor_layer .layer_tit span{font-size:19px;letter-spacing:-0.5px;} html[lang="cn"] #container .main_con > section.sec4 .floor_layer .layer_tit span{font-size:19px;letter-spacing:-0.5px;} #container .main_con > section.sec4 .floor_layer .layer_txt{margin-top:10px;font-size:15px;line-height:24px;color:#666;font-family:'ng';} #container .main_con > section.sec4 .floor_layer a{width:20px;height:20px;position:absolute;right:5px;top:5px;background:url('../images/main/floor_layer_close.png') no-repeat center center;cursor:pointer;} #container .main_con > section.sec4 .floor_layer_pop1{position:absolute;z-index:5;left:50%;top:50%;transform:translateX(-525px) translateY(247px);width:245px;height:145px;} #container .main_con > section.sec4 .floor_layer_pop2{position:absolute;z-index:5;left:50%;top:50%;transform:translateX(-500px) translateY(132px);width:295px;height:115px;} html[lang="cn"] #container .main_con > section.sec4 .txt_area .txt3{font-family:'NotoSansSCL';} #container .main_con > section.sec5{background:#101010;} #container .main_con > section.sec5 .cont{position:relative;height:100%;} #container .main_con > section.sec5 .txt_area{position:absolute;left:0%;bottom:18.5%;z-index:2;font-family:'ng';width:100%;font-size:24px;line-height:40px;text-align:center;color:#fff;transition: all 1s ease-out;opacity:0;} #container .main_con > section.sec5 .txt_area.on{opacity:1;} #container .main_con > section.sec5 .txt_area em{color:#f15922;} #container .main_con > section.sec5 .txt_area em:last-child{font-weight:bold;} #container .main_con > section.sec5 .txt_area .mo_br{display:none;} #container .main_con > section.sec5 .bg_area{background:url('../images/main/main_visual5.jpg') no-repeat center center / cover;transition: all 2s ease-out;opacity:0;transform:translateX(-50%) translateY(-50%) scale(0.95);} #container .main_con > section.sec5 .bg_area.on{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1);} html[lang="cn"] #container .main_con > section.sec5 .txt_area{font-family:'NotoSansSCR';} #container .main_con > section.sec6 .cont{position:relative;height:100%;} #container .main_con > section.sec6 .txt_area{position:absolute;left:50%;top:50%;margin:0 0 0 -90px;z-index:2;transform:translateY(-50%);} #container .main_con > section.sec6 .txt_area .txt1{transform:translateY(100px);position:relative;color:#f15922;font-size:60px;line-height:72px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec6 .txt_area .txt1.on{transform:translateY(0px);opacity:1;} #container .main_con > section.sec6 .txt_area .txt2{transform:translateY(50px);font-size:60px;line-height:72px;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec6 .txt_area .txt2.on{transform:translateY(0px);opacity:1;} #container .main_con > section.sec6 .txt_area .txt3{font-family:'ng';transform:translateX(50px);margin:85px 0 0 250px;font-size:24px;line-height:1;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec6 .txt_area .txt3.on{transform:translateY(0px);opacity:1;} #container .main_con > section.sec6 .txt_area .txt3 em{font-weight:normal;font-size:14px;line-height:24px;color:#666;display:block;padding-top:15px;} #container .main_con > section.sec6 .txt_area .txt4{transform:translateX(50px);margin:35px 0 0 250px;font-size:14px;line-height:1;opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec6 .txt_area .txt4.on{transform:translateY(0px);opacity:1;} #container .main_con > section.sec6 .txt_area .txt4 a{border-bottom:1px solid #333;display:inline-block;padding:3px 0;color:#333;font-family:'Lato';} #container .main_con > section.sec6 .img_area{position:absolute;left:-25%;top:50%;transform:translateX(-300px) translateY(-50%);opacity:0;transition: all 1s ease-out;} #container .main_con > section.sec6 .img_area.on{transform:translateX(-130px) translateY(-50%);opacity:1;} #container .main_con > section.sec6 .bg_area{width:50%;top:0;background:#d2d7dd;left:0;transform:translateX(0);} html[lang="cn"] #container .main_con > section.sec6 .txt_area .txt3{font-family:'NotoSansSCR';} html[lang="cn"] #container .main_con > section.sec6 .txt_area .txt4 a{font-family:'NotoSansSCR';} /* ======================================= */ /* =========== [SUBPAGE - 공통] ========== */ /* ======================================= */ h2.page_tit{font-size:60px;line-height:80px;padding:110px 0 65px 0;text-align:center;font-family:'LatoL'} h2.page_tit span{color:#f15922;} html[lang="cn"] h2.page_tit{font-family:'NotoSansSCL';} /* ======================================= */ /* ============== [CONTACT] ============== */ /* ======================================= */ body.contact_page #container{padding:0 0 150px 0;} body.contact_page header h1{background-image:url('../images/logo.png');} body.contact_page header .menu_btn:before{background:#fff;} body.contact_page header .menu_btn:after{background:#fff;} body.contact_page header .menu_btn span:before{background:#fff;} body.contact_page header .menu_btn span:after{background:#fff;} body.contact_page h2.page_tit{padding:200px 0 320px 0;color:#fff;background:url('../images/sub/contact_bg.jpg') no-repeat center top;} .contact_box{max-width:720px;padding:60px 40px;margin:20px auto 0 auto;background:#fff;-webkit-border-radius:5px;border-radius:5px;} .contact_box h3.tit{padding-bottom:30px;font-size:24px;font-family:'ngB';line-height:1;color:#222;border-bottom:1px solid #f15a22;} .contact_box .contact h3.tit{font-family:'LatoB';} html[lang="cn"] .contact_box h3.tit{font-family:'NotoSansSCB';} .offline_store{margin-top:-174px;} .offline_store li{border-bottom:1px solid #e5e5e5;} .offline_store .list_con{overflow:hidden;position:relative;padding:25px 130px 25px 0;} .offline_store .list_con .store_name{float:left;font-family:'ngB';color:#222;font-size:16px;line-height:24px;padding:0px 10px;float:left;width:256px;box-sizing:border-box;} .offline_store .list_con .store_addr{margin-left:256px;font-size:14px;font-family:'ng';line-height:18px;color:#333;} .offline_store .list_con .store_addr span{display:block;margin-top:5px;font-family:'ng';} .offline_store .list_con a{position:absolute;right:10px;top:30px;width:106px;height:40px;text-align:center;background:#aaa;} .offline_store .list_con a span{font-size:13px;font-family:'ngB';line-height:40px;color:#fff;} .offline_store .view_con{display:none;font-size:0;line-height:0;} html[lang="cn"] .offline_store .list_con .store_name{font-family:'NotoSansSCR';} html[lang="cn"] .offline_store .list_con .store_addr{font-family:'NotoSansSCL';} .online_store dl{overflow:hidden;border-bottom:1px solid #e5e5e5;padding:25px 0;} .online_store dl dt{font-family:'ngB';color:#222;font-size:16px;line-height:24px;padding:0px 10px;float:left;width:256px;box-sizing:border-box;} .online_store dl dd{margin-left:256px;} .online_store dl dd p{position:relative;padding-left:100px;font-size:14px;font-family:'LatoB';line-height:30px;color:#333;} .online_store dl dd p span{position:absolute;left:0;top:0;font-family:'ng';} .online_store dl dd p a{color:#f15922;text-decoration:underline;} html[lang="cn"] .online_store dl dt{font-family:'NotoSansSCR';} html[lang="cn"] .online_store dl dd p span{font-family:'NotoSansSCL';} .contact dl{overflow:hidden;border-bottom:1px solid #e5e5e5;padding:25px 0;} .contact dl dt{font-family:'ngB';color:#222;font-size:16px;line-height:24px;padding:0px 10px;float:left;width:300px;box-sizing:border-box;} .contact dl dd{margin-left:300px;} .contact dl dd li{font-size:14px;line-height:18px;color:#666;padding:2px 0 2px 60px;margin-top:30px;} .contact dl dd li:nth-child(1){background:url('../images/sub/contact_icon1.png') no-repeat left center;margin-top:0;} .contact dl dd li:nth-child(2){background:url('../images/sub/contact_icon2.png') no-repeat left center;} .contact dl dd li:nth-child(3){background:url('../images/sub/contact_icon3.png') no-repeat left center;} .contact dl dd li span{font-family:'LatoB';color:#222;display:block;} .contact dl dd li a{color:#f15922;text-decoration:underline;} .contact dl dd > a{display:none;} html[lang="cn"] .contact dl dt{font-family:'NotoSansSCR';} /* ======================================= */ /* =========== [WHERE TO BUY] ============ */ /* ======================================= */ .where{max-width:1600px;margin:0 auto;padding-bottom:160px;} .where .where_top{position:relative;overflow:hidden;} .where .img_area{float:left;width:40%;} .where .img_area img{max-width:100%;} .where .txt_area{float:right;width:60%;box-sizing:border-box;padding:0 90px 0 90px;} .where .txt_area .tit{font-family:'LatoB';font-size:48px;line-height:60px;} .where .txt_area .tit span{color:#f15922;} .where .txt_area .txt{font-size:14px;line-height:32px;font-family:'ng';color:#666;margin-top:45px;} .where .txt_area .txt span{font-size:24px;line-height:32px;color:#000;display:block;padding-bottom:15px;} .where .txt_area .detail_link{display:block;width:266px;line-height:40px;height:40px;color:#fff;font-size:16px;text-align:center;background:#53575a;margin-top:20px;} .where .txt_area .address_area{display:inline-block;border-top:1px solid #979a9c;border-bottom:1px solid #979a9c;padding:10px 0;margin-top:50px;} .where .txt_area .address_area p{font-family:'ngB';color:#222;line-height:30px;font-size:14px;} .where .txt_area .address_area p br{display:none;} .where .txt_area .address_area a{display:none;} .where #google_map{height:640px;margin-top:80px;position:relative;} .where #google_map iframe{width:100%;height:100%;} html[lang="cn"] .where .txt_area .txt{font-family:'NotoSansSCL';} html[lang="cn"] .where .txt_area .txt span{font-family:'NotoSansSCR';} /* ======================================= */ /* ================ [NEWS] =============== */ /* ======================================= */ .news{max-width:960px;margin:0 auto;padding:0 15px 150px 15px;} .news .news_list{border-top:1px solid #222;} .news .news_list > li{border-bottom:1px solid #aaa;} .news .news_list > li .news_top{line-height:22px;position:relative;padding:15px 0;} .news .news_list > li .news_top .news_tit{padding:0 100px 0 10px;font-family:'ngB';font-size:16px;} .news .news_list > li .news_top .news_tit a{color:#222;} .news .news_list > li .news_top .news_tit a:hover, .news .news_list > li.on .news_top .news_tit a{color:#f15922;} .news .news_list > li .news_top .news_date{position:absolute;right:0;top:0;width:100px;text-align:center;font-family:'ng';color:#777;font-size:12px;padding:15px 0;} .news .news_list > li .news_con{border-top:1px solid #aaa;text-align:left;padding:40px 10px 75px 10px;font-family:'ng';font-size:16px;line-height:30px;display:none;} .news .news_list > li .news_con p.tit{font-family:'ngB';font-size:36px;line-height:40px;color:#333;margin-top:10px;} .news .news_list > li .news_con p.stit{font-size:22px;color:#333;} .news .news_list > li .news_con p.txt{font-family:'ngB';font-size:18px;color:#222;} .news .news_list > li .news_con .colorBlack {color:#222;} html[lang="cn"] .news .news_list > li .news_top .news_tit{font-family:'NotoSansSCR';} html[lang="cn"] .news .news_list > li .news_con{font-family:'NotoSansSCL';} .event .news_list > li .news_con{padding:40px 0 75px 0;} /* ======================================= */ /* =============== [PRODUCT] ============= */ /* ======================================= */ /* LIST */ .pdt_list_tab{margin-top:-50px;padding-bottom:130px;} .pdt_list_tab ul{font-size:0;text-align:center;} .pdt_list_tab ul li{display:inline-block;margin-left:6px;width:156px;} .pdt_list_tab ul li:first-child{margin-left:0;} .pdt_list_tab ul li a{display:block;font-size:18px;line-height:48px;color:#53575a;border:1px solid #53575a;} .pdt_list_tab ul li a.on{color:#fff;border-color:#f15a22;background:#f15a22;} html[lang="cn"] .pdt_list_tab ul li a{font-family:'NotoSansSCR';} .pdt_list{padding-bottom:230px;} .pdt_list ul li{overflow:hidden;max-width:1466px;margin:100px auto 0 auto;position:relative;} .pdt_list ul li:first-child{margin-top:0;} .pdt_list ul li .list_img{position:relative;float:left;width:45.5%;text-align:right;} .pdt_list ul li .list_img img{width:100%;max-width:100%} .pdt_list ul li .list_img .new{position:absolute;left:10px;top:10px;width:60px;text-align:center;font-size:16px;font-family:'LatoB';line-height:60px;color:#fff;background:#f15922;-webkit-border-radius:30px;border-radius:30px;} .pdt_list ul li .list_txt{float:right;vertical-align:middle;padding:0 0 0 80px;color:#222;box-sizing:border-box;width:54.5%;} .pdt_list ul li .list_txt .pdt_num{font-family:'LatoB';font-size:48px;line-height:60px;color:#f15922;} .pdt_list ul li .list_txt .pdt_name{font-family:'LatoB';font-size:48px;line-height:60px;} .pdt_list ul li .list_txt .pdt_info{position:relative;font-family:'ngB';font-size:24px;line-height:26px;padding-top:60px;margin-top:20px;} .pdt_list ul li .list_txt .pdt_info:before{content:'';position:absolute;left:0;top:0;background:url('../images/product/list_line.png') no-repeat;width:82px;height:14px;} .pdt_list ul li .list_txt .pdt_info em{font-family:'ng';} .pdt_list ul li .list_txt .pdt_info span{display:block;font-size:16px;font-family:'ng';} .pdt_list ul li .list_txt .pdt_txt{font-family:'ng';font-size:16px;line-height:28px;padding-top:20px;color:#666;} .pdt_list ul li .list_txt .detail_btn{font-size:14px;font-family:'LatoB';color:#fff;background:#53575a;line-height:40px;display:inline-block;width:154px;height:40px;margin-top:35px;text-align:center;color:#fff;} html[lang="cn"] .pdt_list ul li .list_img .new{font-family:'NotoSansSCR';} html[lang="cn"] .pdt_list ul li .list_txt .pdt_info{font-family:'NotoSansSCB';} html[lang="cn"] .pdt_list ul li .list_txt .pdt_info em{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_list ul li .list_txt .pdt_info span{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_list ul li .list_txt .pdt_txt{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_list ul li .list_txt .detail_btn{font-family:'NotoSansSCR';} /* VIEW */ body.pdt_view{background:#fff;height:100%;overflow:visible;} body.pdt_view #container{padding-top:0;height:100%;overflow:visible;} body.pdt_view header h1{background-image:url('../images/logo.png');} body.pdt_view header .menu_btn:before{background:#fff;} body.pdt_view header .menu_btn:after{background:#fff;} body.pdt_view header .menu_btn span:before{background:#fff;} body.pdt_view header .menu_btn span:after{background:#fff;} .pdt_view .con1{max-width:1920px;margin:0 auto;position:relative;overflow:hidden;} .pdt_view .con1 .img_area img{width:100%;} .pdt_view .con1 .img_area img.moImg{display:none;} .pdt_view .con1 .txt_area{position:absolute;left:12.5%;top:50%;transform: translateY(-50%);} .pdt_view .con1 .txt_area .pdt_num{font-family:'LatoB';font-size:72px;line-height:90px;color:#f15922;} .pdt_view .con1 .txt_area .pdt_name{font-family:'LatoB';font-size:72px;line-height:90px;color:#fff;} .pdt_view .con1 .txt_area .pdt_txt{font-family:'ng';font-size:24px;line-height:32px;padding-top:50px;color:#999;} .pdt_view .con1 .txt_area .pdt_txt.color_white{color:#fff;} .pdt_view .con1 .txt_area .pdt_txt span{font-size:30px;color:#fff;display:block;margin-top:20px;} .pdt_view .con1 .txt_area .detail_btn{font-size:14px;font-family:'LatoB';color:#fff;background:#53575a;line-height:40px;display:inline-block;width:154px;height:40px;margin-top:35px;text-align:center;color:#fff;} html[lang="cn"] .pdt_view .con1 .txt_area .pdt_txt{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_view .con1 .txt_area .pdt_txt span{font-family:'NotoSansSCR';} html[lang="cn"] .pdt_view .con1 .txt_area .detail_btn{font-family:'NotoSansSCR';} .pdt_view .con2{max-width:1920px;margin:0 auto;display:table;padding:123px 0;position:relative;} .pdt_view .con2 .img_area{display:table-cell;width:50%;text-align:right;} .pdt_view .con2 .img_area img{width:100%;} .pdt_view .con2 .txt_area{display:table-cell;width:50%;vertical-align:middle;} .pdt_view .con2 .txt_area .pdt_info{font-size:32px;line-height:44px;font-family:'ngB';padding:0 80px;} .pdt_view .con2 .txt_area .pdt_info em{font-size:24px;font-family:'ng';} .pdt_view .con2 .txt_area .pdt_info span{font-size:18px;display:block;color:#999;font-family:'ng';} .pdt_view .con2 .txt_area .pdt_txt{font-size:20px;color:#222;line-height:36px;margin-top:25px;padding:0 80px;} .pdt_view .con2 ul.listStyle1{overflow:hidden;margin:50px 80px 0 80px;} .pdt_view .con2 ul.listStyle1 li{float:left;margin-right:15px;padding-left:15px;font-size:14px;line-height:16px;color:#666;background:url('../images/product/pdt_view_con2_icon.png') no-repeat left 3px;} .pdt_view .con2 ul.listStyle2{overflow:hidden;margin:15px 80px 0 80px;} .pdt_view .con2 ul.listStyle2 li{float:left;margin-right:15px;padding-left:15px;font-size:14px;line-height:16px;color:#666;background:url('../images/product/pdt_view_con2_icon2.png') no-repeat left 6px;} html[lang="cn"] .pdt_view .con2 .txt_area .pdt_info{font-family:'NotoSansSCB';} html[lang="cn"] .pdt_view .con2 .txt_area .pdt_info em{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_view .con2 .txt_area .pdt_info span{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_view .con2 .txt_area .pdt_txt{font-family:'NotoSansSCL';} .pdt_view .con3{max-width:1920px;height:800px;margin:0 auto;position:relative;} .pdt_view .con4{max-width:1920px;margin:0 auto;padding:135px 0 200px 0;background:#eaeaea;} .pdt_view .con4 .tit{font-family:'LatoB';color:#f15922;font-size:24px;line-height:1;position:relative;text-align:center;} .pdt_view .con4 .tit:after{content:'';position:absolute;left:50%;bottom:-20px;width:30px;height:1px;margin-left:-15px;background:#f15922;} .pdt_view .con4 .txt{padding-top:50px;font-family:'ngB';color:#222;font-size:32px;line-height:44px;text-align:center;} .pdt_view .con4 .list{overflow:hidden;margin:0 auto;max-width:1420px;padding:0 20px;font-size:0;} .pdt_view .con4 .list li{float:left;width:15%;margin:100px 0 0 2%;text-align:center;} .pdt_view .con4 .list li img{max-width:100%;} .pdt_view .con4 .list li span{display:block;font-family:'ng';color:#333;font-size:16px;line-height:20px;margin-top:10px;} .pdt_view .con4 .list.leng6 li:nth-child(6n + 1){margin-left:0;clear:both;} .pdt_view .con4 .list.leng5{max-width:1080px;} .pdt_view .con4 .list.leng5 li{margin-left:0;width:20%;} .pdt_view .con4 .list.leng5 li:nth-child(5n + 1){margin-left:0;clear:both;} .pdt_view .con4 .list.leng4{max-width:860px;} .pdt_view .con4 .list.leng4 li{margin-left:0;width:25%;} .pdt_view .con4 .list.leng4 li:nth-child(4n + 1){margin-left:0;clear:both;} html[lang="cn"] .pdt_view .con4 .txt{font-family:'NotoSansSCB';} html[lang="cn"] .pdt_view .con4 .list li span{font-family:'NotoSansSCR';} .pdt_view .con5{max-width:1920px;margin:0 auto;padding:135px 0 200px 0;} .pdt_view .con5 .tit{font-family:'LatoB';color:#f15922;font-size:24px;line-height:1;position:relative;text-align:center;} .pdt_view .con5 .tit:after{content:'';position:absolute;left:50%;bottom:-20px;width:30px;height:1px;margin-left:-15px;background:#f15922;} .pdt_view .con5 .txt{padding-top:50px;font-family:'ngB';color:#222;font-size:32px;line-height:44px;text-align:center;} .pdt_view .con5 .sTxt{font-size:18px;line-height:1;color:#222;margin-top:15px;text-align:center;} .pdt_view .con5 .list{overflow:hidden;margin:100px auto 0 auto;max-width:1600px;text-align:center;font-size:0;} .pdt_view .con5 .list li{display:inline-block;width:22%;margin-left:4%;overflow:hidden;vertical-align:top;text-align:left;} .pdt_view .con5 .list li:first-child{margin-left:0;} .pdt_view .con5 .list li .step{width:80px;font-size:20px;line-height:35px;color:#333;border:2px solid #151515;text-align:center;font-family:'LatoB';position:relative;} .pdt_view .con5 .list li .step:after{content:'';position:absolute;left:104px;top:17px;width:215px;height:2px;background:#151515;} .pdt_view .con5 .list li:last-child .step:after{display:none;} .pdt_view .con5 .list li .listTxt{font-size:24px;line-height:36px;font-family:'ng';color:#333;margin-top:25px;} .pdt_view .con5 .list li .listTxt span{font-size:16px;line-height:24px;margin-top:15px;display:block;} .pdt_view .con5 .list li .listTxt br{display:none;} .pdt_view .con5 .useTxt{margin:100px auto 0 auto;max-width:1600px;text-align:center;font-size:24px;line-height:36px;color:#333;} html[lang="cn"] .pdt_view .con5 .txt{font-family:'NotoSansSCB';} html[lang="cn"] .pdt_view .con5 .sTxt{font-family:'NotoSansSCL';} html[lang="cn"] .pdt_view .con5 .list li .listTxt{font-family:'NotoSansSCR';} html[lang="cn"] .pdt_view .con5 .useTxt{font-family:'NotoSansSCR';} /* HR101 ANTI HAIR LOSS */ .HR101_ANTI_HAIR_LOSS_PROGRAM.pdt_view .con3{background:url('../images/product/HR101_ANTI_HAIR_LOSS_PROGRAM/pdtImg3.jpg') no-repeat center top fixed;background-size:auto 120%;} /* HR101 ANTI HAIR LOSS START-UP KIT */ .HR101_ANTI_HAIR_LOSS_PROGRAM_STARTER_KIT.pdt_view .con3{background:url('../images/product/HR101_ANTI_HAIR_LOSS_PROGRAM_STARTER_KIT/pdtImg3.jpg') no-repeat center top fixed;background-size:auto 120%;} /* RS101 DOUBLE WHITENING UV PROTECTOR */ .RS101_DOUBLE_WHITENING_UV_PROTECTOR.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_UV_PROTECTOR/pdtImg3.jpg') no-repeat center top fixed;background-size:auto 120%;} /* RS101 DOUBLE WHITENING CREAM MASK */ .RS101_DOUBLE_WHITENING_CREAM_MASK.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_CREAM_MASK/pdtImg3.jpg') no-repeat center top fixed;background-size:auto 120%;} /* RS101 DOUBLE WHITENING SERUM */ .RS101_DOUBLE_WHITENING_SERUM.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_SERUM/pdtImg3.jpg') no-repeat center top fixed;background-size:auto 120%;} @media all and (max-width: 1024px) { /* ======================================= */ /* ========== [레이아웃 - 공통] ========== */ /* ======================================= */ /* HEADER */ header{position:fixed;left:0;top:0;z-index:5;width:100%;height:45px;} header h1{width:65px;background-size:65px 22px;} header h1 a{height:22px;} header .menu_btn{position:relative;display:block;height:32px;width:32px;margin:7px 0 0 8px;float:left;} header .menu_btn:before{width:18px;height:2px;left:7px;top:8px;} header .menu_btn:after{width:18px;height:2px;left:7px;top:20px;} header .menu_btn span:before{width:18px;height:2px;left:7px;top:14px;} header .language_btn{padding:15px 15px 0 0;} header .language_btn em{font-size:12px;} header .language_btn a{font-size:12px;} header .sns_btn{display:none;} /* 전체메뉴 */ #all_menu .close{display:block;height:32px;width:32px;position:absolute;left:8px;top:7px;} #all_menu .close:before{content:'';position:absolute;width:22px;height:2px;background:#fff;left:5px;top:15px;transform: rotate(45deg);} #all_menu .close:after{content:'';position:absolute;width:22px;height:2px;background:#fff;left:5px;top:15px;transform: rotate(135deg);} #all_menu > div > div ul.menu_list li{padding-top:26px;} #all_menu > div > div ul.menu_list li a{font-size:24px;} #all_menu > div > div ul.sns_list{margin-top:25px;} #all_menu > div > div ul.sns_list li{margin-left:18px;} #all_menu > div > div ul.sns_list li a{width:50px;height:50px;background-size:150px auto;} #all_menu > div > div ul.sns_list li a.sns_s{background-position:left bottom;} #all_menu > div > div ul.sns_list li a.sns_i{background-position:center bottom;} #all_menu > div > div ul.sns_list li a.sns_f{background-position:right bottom;} /* FOOTER */ footer .footer_con .txt_area{padding:30px 0 18px 0;} footer .footer_con .txt_area p{font-size:23px;line-height:18px;} footer .footer_con .txt_area p span{font-size:11px;} footer .footer_con .txt_area p.last{font-size:10px;padding-top:8px;} footer .footer_con .logo_footer img{width:50px;} footer .footer_con .nav_footer{padding:15px 0 20px 0;} footer .footer_con .nav_footer ul{font-size:0;text-align:center;} footer .footer_con .nav_footer ul li{display:block;width:auto !important;padding:0;padding-top:15px;line-height:15px;font-size:11px;} footer .footer_con .nav_footer ul li a{font-size:11px;} footer .footer_con address{font-size:10px;padding:18px 0 5px 0;} footer .footer_con .copyright{font-size:10px;padding-bottom:30px;} /* container */ #container{padding:45px 0 0 0;} /* BR */ .pcBr{display:none;} .moBr{display:inline;} /* BTN STYLE */ .btn_style em{display:none;} /* ======================================= */ /* ============ [메인 컨텐츠] ============ */ /* ======================================= */ #container .main_indicator{display:none !important;} #container .main_con > section.sec1 .scroll_info{font-size:10px;padding-bottom:28px;background:url('../images/main/arr_down.png') no-repeat center bottom / 18px 18px;} #container .main_con > section.sec1 .scroll_info:after{top:-60px;height:48px;display:none;} #container .main_con > section.sec1 .banner_nav{margin-top:-118px;} #container .main_con > section.sec1 .banner_nav .btn_prev{width:30px;height:30px;background:url('../images/main/btn_prev.png') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner_nav .btn_prev:hover{background-position:center bottom;} #container .main_con > section.sec1 .banner_nav .btn_next{width:30px;height:30px;background:url('../images/main/btn_next.png') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner_nav .btn_next:hover{background-position:center bottom;} #container .main_con > section.sec1 .banner_nav ul{padding:10px 55px;} #container .main_con > section.sec1 .banner1 .txt_area{font-size:27px;line-height:27px;} #container .main_con > section.sec1 .banner1 .txt_area i{font-size:20px;} #container .main_con > section.sec1 .banner1 .txt_area span{font-size:12px;padding-top:15px;} #container .main_con > section.sec1 .banner1 .bg_area .parallax{background:url('../images/main/main_visual1.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner2{background:url('../images/main/banner2_m.jpg') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner2 .txt_area{margin:75px 0 0 0;text-align:center;} #container .main_con > section.sec1 .banner2 .txt_area:before{left:50%;top:-52px;margin-left:-140px;width:60px;height:86px;background:url('../images/main/icon_new.png') no-repeat center center / 60px auto;} #container .main_con > section.sec1 .banner2 .txt_area .txt{padding:0 5px;font-size:13px;line-height:25px;letter-spacing:0px;border-width:1px;} #container .main_con > section.sec1 .banner2 .txt_area .name{margin-top:5px;font-size:30px;line-height:40px;letter-spacing:-2px;} #container .main_con > section.sec1 .banner2 .txt_area .video {margin-top:40px;width:290px;} #container .main_con > section.sec1 .banner2 .txt_area > a{position:absolute;left:50%;top:124px;padding:0 10px 3px 0;margin:0 0 0 -18px;font-size:10px;color:#464351;border-color:#464351;background:url('../images/main/icon_arr5.png') no-repeat right 1px / 3px auto;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area .txt{font-size:15px;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area .name{line-height:36px;letter-spacing:-1px;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area ul{margin-top:10px;} html[lang="en"] #container .main_con > section.sec1 .banner2 .txt_area ul li{font-size:11px;line-height:20px;} #container .main_con > section.sec1 .banner3{background:url('../images/main/banner3_m.jpg') no-repeat center bottom / cover;} #container .main_con > section.sec1 .banner3 .txt_area{margin:75px 0 0 0;text-align:center;} #container .main_con > section.sec1 .banner3 .txt_area:before{left:50%;top:-52px;margin-left:-140px;width:60px;height:86px;background:url('../images/main/icon_new.png') no-repeat center center / 60px auto;} #container .main_con > section.sec1 .banner3 .txt_area .txt{padding:0 5px;font-size:13px;line-height:25px;letter-spacing:0px;border-width:1px;} #container .main_con > section.sec1 .banner3 .txt_area .name{margin-top:5px;font-size:30px;line-height:40px;letter-spacing:-2px;} #container .main_con > section.sec1 .banner3 .txt_area .video {margin-top:40px;width:290px;} #container .main_con > section.sec1 .banner3 .txt_area > a{position:absolute;left:50%;top:124px;padding:0 10px 3px 0;margin:0 0 0 -18px;font-size:10px;color:#aa8066;border-color:#aa8066;background:url('../images/main/icon_arr4.png') no-repeat right 1px / 3px auto;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area .txt{font-size:15px;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area .name{line-height:36px;letter-spacing:-1px;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area ul{margin-top:10px;} html[lang="en"] #container .main_con > section.sec1 .banner3 .txt_area ul li{font-size:11px;line-height:20px;} #container .main_con > section.sec1 .banner4{background:url('../images/main/banner4_m.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner4 .cont{display:block;} #container .main_con > section.sec1 .banner4 .txt_area{margin:75px 25px 0 25px;color:#19566c;display:block;padding-left:0;} #container .main_con > section.sec1 .banner4 .txt_area .txt{font-size:13px;line-height:20px;letter-spacing:0px;} #container .main_con > section.sec1 .banner4 .txt_area .name{margin-top:15px;font-size:30px;line-height:40px;letter-spacing:-2px;} #container .main_con > section.sec1 .banner4 .txt_area .txt2{margin-top:10px;font-size:12px; line-height:20px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner4 .txt_area a{padding:0 10px 3px 0;margin-top:10px;font-size:10px;background:url('../images/main/icon_arr2.png') no-repeat right 1px / 3px auto;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .txt{font-size:15px;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .name{line-height:36px;letter-spacing:-1px;} html[lang="en"] #container .main_con > section.sec1 .banner4 .txt_area .txt2{margin-top:10px;font-size:11px;line-height:20px;} #container .main_con > section.sec1 .banner5{background:url('../images/main/banner5_m.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner5 .txt_area{width:auto;height:auto;padding-top:42px;margin:65px auto 0 auto;text-align:center;background:url('../images/main/banner5_txt_m.png') no-repeat center top / 55px auto;} #container .main_con > section.sec1 .banner5 .txt_area .txt{margin-bottom:10px;font-size:16px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner5 .txt_area .txt2{font-size:27px;line-height:31px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner5 .txt_area .txt3{width:258px;margin:5px auto 0 auto;font-size:24px;line-height:35px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner5 .txt_area .txt4{margin-top:18px;font-size:13px;line-height:20px;} #container .main_con > section.sec1 .banner5 .txt_area .date{font-size:13px;line-height:20px;} #container .main_con > section.sec1 .banner5 .txt_area a{padding:0 10px 3px 0;margin-top:25px;font-size:10px;background:url('../images/main/icon_arr3.png') no-repeat right 1px / 3px auto;} #container .main_con > section.sec1 .banner6{background:url('../images/main/banner6_m.jpg') no-repeat center center / cover;} #container .main_con > section.sec1 .banner6 .txt_area{padding-top:74px;} #container .main_con > section.sec1 .banner6 .txt_area .tit{height:136px;} #container .main_con > section.sec1 .banner6 .txt_area .txt{margin-top:18px;font-size:13px;line-height:22px;letter-spacing:-1px;} #container .main_con > section.sec1 .banner6 .txt_area .txt2{margin-top:18px;font-size:12px; line-height:18px;} #container .main_con > section.sec1 .banner6 .txt_area a{padding:0 10px 3px 0;margin-top:25px;font-size:10px;background:url('../images/main/icon_arr3.png') no-repeat right 1px / 3px auto;} #container .main_con > section.sec2{background:#000;} #container .main_con > section.sec2 .cont{display:block;} #container .main_con > section.sec2 .cont_left{display:block;width:100%;height:65%;} #container .main_con > section.sec2 .cont_left .con_box{position:relative;height:100%;} #container .main_con > section.sec2 .cont_left .bg_area{background:url('../images/main/main_visual2_1.jpg') no-repeat center center / 150%;} #container .main_con > section.sec2 .cont_right{display:block;width:100%;height:35%;} #container .main_con > section.sec2 .cont_right .cont_top{height:100%;width:50%;float:left;} #container .main_con > section.sec2 .cont_right .cont_top .bg_area{background:url('../images/main/main_visual2_2_m.jpg') no-repeat center center / cover;} #container .main_con > section.sec2 .cont_right .cont_bottom{height:100%;width:50%;float:left;} #container .main_con > section.sec2 .cont_right .cont_bottom .bg_area{background:url('../images/main/main_visual2_3.jpg') no-repeat center center / auto 100%;} #container .main_con > section.sec2 .txt_area{width:100%;box-sizing:border-box;padding:55px 25px 0 25px;} #container .main_con > section.sec2 .txt_area .txt1{font-size:36px;} #container .main_con > section.sec2 .txt_area .txt1 span{font-size:10px;line-height:1;padding-top:10px;margin-top:12px;} #container .main_con > section.sec2 .txt_area .txt1 span:before{height:5px;background-size:auto 5px;} #container .main_con > section.sec2 .txt_area .txt2{margin-top:50px;font-size:12px;line-height:17px;padding-top:20px;font-family:'ngB';} #container .main_con > section.sec2 .txt_area .txt2.on{margin:0;opacity:1;} #container .main_con > section.sec2 .txt_area .txt2 br{display:none;} #container .main_con > section.sec2 .txt_area .txt3_area{margin-top:15px;width:100%;padding-top:35px;} #container .main_con > section.sec2 .txt_area .txt3{font-size:12px;line-height:15px;} #container .main_con > section.sec2 .txt_area .txt3 br{display:none;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots{top:18px;} #container .main_con > section.sec2 .txt_area .txt3_area .slick-dots li{border-radius:8px;width:8px;height:8px;background:#bababb;margin-right:5px;} #container .main_con > section.sec3 .cont{display:block;} #container .main_con > section.sec3 .cont_left{display:none;} #container .main_con > section.sec3 .cont_right{width:100%;height:100%;box-sizing:border-box;padding:45px 15px 40px 15px;background:url('../images/main/main_visual3_1.jpg') no-repeat center center / cover;display:block;position:relative;} #container .main_con > section.sec3 .cont_right .con_box{background:#ebebf3;padding:30px 50px;overflow:hidden;display:block;vertical-align:middle;position:relative;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);} #container .main_con > section.sec3 .cont_right .txt_area{width:auto;} #container .main_con > section.sec3 .cont_right .txt_area .txt1{font-size:36px;line-height:36px;transition: all 1s ease-out;padding-bottom:8px;} #container .main_con > section.sec3 .cont_right .txt_area .txt2{font-size:10px;line-height:1;} #container .main_con > section.sec3 .cont_right .txt_area .txt2:before{height:5px;background-size:auto 5px;} #container .main_con > section.sec3 .cont_right .txt_area .txt3{font-family:'ngB';font-size:12px;line-height:17px;padding-top:30px;width:100%;} #container .main_con > section.sec3 .cont_right .txt_area .txt3 br{display:none;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area{padding-top:35px;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4{font-size:12px;font-family:'ng';line-height:15px;color:#666;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4 span{color:#f15922;font-size:12px;font-family:'ngB';line-height:1;padding-bottom:5px;display:block;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .txt4 em{color:#f15922;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots{top:18px;} #container .main_con > section.sec3 .cont_right .txt_area .txt4_area .slick-dots li{border-radius:8px;width:8px;height:8px;background:#ebebf3;margin-right:5px;} #container .main_con > section.sec3 .cont_right .img_area{padding-top:25px;text-align:left;} #container .main_con > section.sec3 .cont_right .img_area img{width:100%;} #container .main_con > section.sec4 .txt_area{position:absolute;left:0;top:10%;z-index:3;margin:0;transform:translateY(0);margin-top:0;width:100%;box-sizing:border-box;padding:0 25px;} #container .main_con > section.sec4 .txt_area .txt1{transform:translateY(-50px);opacity:0;font-size:32px;line-height:32px;transition: all 1s ease-out;} #container .main_con > section.sec4 .txt_area .txt2{position:relative;font-size:12px;line-height:15px;padding-top:8px;margin-top:10px;} #container .main_con > section.sec4 .txt_area .txt2:before{height:5px;background-size:auto 5px;} #container .main_con > section.sec4 .txt_area .txt3{font-size:12px;line-height:15px;padding-top:12px;width:100%;} #container .main_con > section.sec4 .txt_area .txt3 > span{font-family:'ngB';font-size:12px;line-height:17px;padding-bottom:5px;} #container .main_con > section.sec4 .txt_area .txt3 .location_link{font-size:11px;line-height:30px;height:30px;width:105px;margin-top:12px;} html[lang="cn"] #container .main_con > section.sec4 .txt_area .txt3 .location_link{font-family:'NotoSansSCR';} #container .main_con > section.sec4 .bg_area{background:url('../images/main/main_visual4_m.png') no-repeat center bottom / auto 100%;width:100%;left:0;top:0;transform:translateX(0);} #container .main_con > section.sec4 .floor1{width:100%;height:100%;position:absolute;left:0;top:0;} #container .main_con > section.sec4 .floor1.on{background:url('../images/main/main_visual4_floor1_m.png') no-repeat center bottom / auto 100%;} #container .main_con > section.sec4 .floor1 .line{background:url('../images/main/main_visual4_floor1_line_m.png') no-repeat center bottom / auto 100%;width:100%;height:100%;display:none;} #container .main_con > section.sec4 .floor1.show{display:block;} #container .main_con > section.sec4 .floor1.show .line{display:block;} #container .main_con > section.sec4 .floor1.on{display:block;} #container .main_con > section.sec4 .floor1.on .line{display:block;background:url('../images/main/main_visual4_floor1_line2_m.png') no-repeat center center / auto 100%;} #container .main_con > section.sec4 .floor2{width:100%;height:100%;position:absolute;left:0;top:0;} #container .main_con > section.sec4 .floor2.on{background:url('../images/main/main_visual4_floor2_m.png') no-repeat center center / auto 100%;} #container .main_con > section.sec4 .floor2 .line{background:url('../images/main/main_visual4_floor2_line_m.png') no-repeat center center / auto 100%;width:100%;height:100%;display:none;} #container .main_con > section.sec4 .floor2.show{display:block;} #container .main_con > section.sec4 .floor2.show .line{display:block;} #container .main_con > section.sec4 .floor2.on{display:block;} #container .main_con > section.sec4 .floor2.on .line{display:block;background:url('../images/main/main_visual4_floor2_line2_m.png') no-repeat center center / auto 100%;} #container .main_con > section.sec4 .floor_layer{position:absolute;left:50%;top:190px;width:210px;height:148px;padding:15px 20px;display:none;z-index:10;transform:translateX(-50%);} html[lang="en"] #container .main_con > section.sec4 .floor_layer{height:200px;} html[lang="cn"] #container .main_con > section.sec4 .floor_layer{height:152px;} #container .main_con > section.sec4 .floor_layer .layer_tit{line-height:18px;} #container .main_con > section.sec4 .floor_layer .layer_tit .mBr{display:inline;} #container .main_con > section.sec4 .floor_layer .layer_tit em{font-size:14px;} #container .main_con > section.sec4 .floor_layer .layer_tit span{font-size:12px;} html[lang="en"] #container .main_con > section.sec4 .floor_layer .layer_tit span{width:140px;} #container .main_con > section.sec4 .floor_layer .layer_txt{margin-top:5px;font-size:10px;line-height:15px;} #container .main_con > section.sec4 .floor_layer .layer_txt br{display:none;} #container .main_con > section.sec4 .floor_layer a{width:20px;height:20px;position:absolute;right:5px;top:5px;background:url('../images/main/floor_layer_close.png') no-repeat center center;cursor:pointer;} #container .main_con > section.sec4 .floor_layer_pop1{position:absolute;z-index:5;left:50%;top:100%;transform:translateX(-72%) translateY(-155%);width:40%;height:13%;} #container .main_con > section.sec4 .floor_layer_pop2{position:absolute;z-index:5;left:50%;top:100%;transform:translateX(-60%) translateY(-248%);width:50%;height:14%;} #container .main_con > section.sec5 .txt_area{position:absolute;bottom:10%;font-size:12px;line-height:20px;} #container .main_con > section.sec5 .txt_area .mo_br{display:inline;} #container .main_con > section.sec5 .txt_area .pc_br{display:none;} #container .main_con > section.sec5 .bg_area{background:url('../images/main/main_visual5.jpg') no-repeat center center / cover;transition: all 2s ease-out;opacity:0;transform:translateX(-50%) translateY(-50%) scale(0.95);} #container .main_con > section.sec5 .bg_area.on{opacity:1;transform:translateX(-50%) translateY(-50%) scale(1);} #container .main_con > section.sec6{background:#d2d7dd;box-sizing:border-box;padding-top:45px;} #container .main_con > section.sec6 .cont{position:relative;height:100%;top:0;left:0;width:100%;} #container .main_con > section.sec6 .txt_area{position:absolute;margin:0;left:0;top:50%;text-align:center;width:100%;transform:translateY(-50%);} #container .main_con > section.sec6 .txt_area .txt1{transform:translateY(50px);font-size:24px;line-height:27px;} #container .main_con > section.sec6 .txt_area .txt2{transform:translateY(50px);font-size:24px;line-height:27px;} #container .main_con > section.sec6 .txt_area .txt3{margin:10px 0 0 0;font-size:12px;text-align:left;padding:0 25px;box-sizing:border-box;} #container .main_con > section.sec6 .txt_area .txt3 em{font-size:10px;line-height:15px;padding-top:5px;} #container .main_con > section.sec6 .txt_area .txt4{transform:translateX(50px);margin:10px 0 0 0;font-size:10px;text-align:left;padding-left:25px;box-sizing:border-box;} #container .main_con > section.sec6 .txt_area .txt4.on{transform:translateY(0px);opacity:1;} #container .main_con > section.sec6 .img_area{position:relative;left:0;top:0;transform:translateX(15%) translateY(0);width:100%;margin-top:0px;} #container .main_con > section.sec6 .img_area.on{transform:translateX(0) translateY(0);} #container .main_con > section.sec6 .img_area img{width:25%;} #container .main_con > section.sec6 .bg_area{display:none;} /* ======================================= */ /* =========== [SUBPAGE - 공통] ========== */ /* ======================================= */ h2.page_tit{font-size:30px;line-height:36px;padding:45px 0 40px 0;text-align:center;font-family:'LatoL'} /* ======================================= */ /* ============== [CONTACT] ============== */ /* ======================================= */ body.contact_page #container{padding:0 0 70px 0;} body.contact_page h2.page_tit{padding:90px 0;background-size:auto 100%;} .contact_box{max-width:auto;padding:40px 15px;-webkit-border-radius:0;border-radius:0;} .contact_box h3.tit{padding-bottom:20px;font-size:20px;} .offline_store{margin-top:0;} .offline_store .list_con{padding:20px 0;} .offline_store .list_con .store_name{float:none;font-size:14px;line-height:22px;padding:0px 5px;width:auto;} .offline_store .list_con .store_addr{margin:10px 5px 0 5px;font-size:12px;line-height:17px;} .offline_store .list_con a{position:relative;right:0;top:0;display:block;width:140px;height:40px;margin:15px 0 0 5px;} .offline_store .view_con{margin:0 -15px;} .offline_store .view_con iframe{height:240px;} .online_store dl{padding:20px 0;} .online_store dl dt{float:none;font-size:14px;line-height:22px;padding:0px 5px;width:auto;} .online_store dl dd{margin:0 5px;} .online_store dl dd p{padding-left:0;margin-top:10px;font-size:12px;line-height:17px;} .online_store dl dd p span{position:static;display:block;} .contact dl{padding:20px 0;} .contact dl dt{float:none;font-size:14px;line-height:22px;padding:0px 5px;width:auto;} .contact dl dd{position:relative;width:auto;padding:0;margin:25px 5px 0 5px;} .contact dl dd li{font-size:12px;line-height:18px;color:#666;padding-left:42px;margin-top:15px;} .contact dl dd li:nth-child(1){background-size:30px;margin-top:0;} .contact dl dd li:nth-child(2){background-size:30px;} .contact dl dd li:nth-child(3){background-size:30px;} .contact dl dd li span{font-family:'LatoB';color:#222;display:block;} .contact dl dd li a{color:#f15922;text-decoration:underline;} .contact dl dd > a{display:block;position:absolute;left:160px;bottom:60px;width:30px;} /* ======================================= */ /* =========== [WHERE TO BUY] ============ */ /* ======================================= */ .where{max-width:1600px;margin:0 auto;padding-bottom:0;} .where .img_area{float:none;width:100%;text-align:center;} .where .txt_area{float:none;width:100%;box-sizing:border-box;padding:35px 25px 0 25px;} .where .txt_area .tit{font-size:24px;line-height:30px;} .where .txt_area .tit .pcBr{display:none;} .where .txt_area .txt{font-size:11px;line-height:18px;margin-top:20px;} .where .txt_area .txt span{font-size:14px;line-height:20px;padding-bottom:8px;} .where .txt_area .detail_link{width:180px;line-height:30px;height:30px;font-size:12px;margin-top:15px;} .where .txt_area .address_area{display:block;padding:10px 0;margin-top:30px;} .where .txt_area .address_area p{line-height:18px;font-size:12px;} .where .txt_area .address_area p br{display:inline;} .where .txt_area .address_area p em{display:none;} .where .txt_area .address_area a{display:block;position:absolute;right:25px;bottom:10px;width:30px;} .where #google_map{height:240px;margin-top:50px;} /* ======================================= */ /* ================ [NEWS] =============== */ /* ======================================= */ .news .news_list > li .news_con{font-size:14px;} .news .news_list > li .news_con p.tit{font-size:24px;line-height:36px;} .news .news_list > li .news_con p.stit{font-size:16px;} .news .news_list > li .news_con p.txt{font-size:16px;} .event .news_con > div{margin:0 -25px;} /* ======================================= */ /* =============== [PRODUCT] ============= */ /* ======================================= */ /* LIST */ .pdt_list_tab{margin-top:-25px;padding-bottom:60px;} .pdt_list_tab ul li{margin-left:3px;width:95px;} .pdt_list_tab ul li a{font-size:13px;line-height:38px;} .pdt_list{padding-bottom:55px;} .pdt_list ul li{margin:50px auto 0 auto;} .pdt_list ul li .list_img{float:none;width:auto;margin:0 25px;text-align:right;} .pdt_list ul li .list_txt{float:none;padding:25px 25px 0 25px;width:auto;} .pdt_list ul li .list_txt .pdt_num{font-size:24px;line-height:30px;} .pdt_list ul li .list_txt .pdt_name{font-size:24px;line-height:30px;} .pdt_list ul li .list_txt .pdt_info{font-size:14px;line-height:16px;padding-top:27px;margin-top:10px;} .pdt_list ul li .list_txt .pdt_info:before{background:url('../images/product/list_line.png') no-repeat left top / auto 7px;width:100%;height:7px;} .pdt_list ul li .list_txt .pdt_info span{font-size:10px;} .pdt_list ul li .list_txt .pdt_txt{font-size:11px;line-height:18px;padding-top:8px;} .pdt_list ul li .list_txt .detail_btn{font-size:12px;line-height:30px;width:120px;height:30px;margin-top:23px;} /* VIEW */ .pdt_view .con1{height:auto;} .pdt_view .con1 .img_area img.pcImg{display:none;} .pdt_view .con1 .img_area img.moImg{display:inline;} .pdt_view .con1 .txt_area{position:static;transform: translateY(0);background:#fff;padding:15px 25px 50px 25px;} .pdt_view .con1 .txt_area .pdt_num{font-size:30px;line-height:36px;} .pdt_view .con1 .txt_area .pdt_name{font-size:30px;line-height:36px;color:#222;} .pdt_view .con1 .txt_area .pdt_txt{font-size:12px;line-height:18px;padding-top:20px;} .pdt_view .con1 .txt_area .pdt_txt.color_white{color:#999;} .pdt_view .con1 .txt_area .pdt_txt span{font-size:15px;color:#222;margin-top:6px;} .pdt_view .con2{display:block;padding:0 25px 60px 25px;position:relative;overflow:hidden;} .pdt_view .con2 .img_area{display:block;width:100%;} .pdt_view .con2 .txt_area{display:block;width:100%;} .pdt_view .con2 .txt_area .pdt_info{font-size:14px;line-height:16px;padding:0;} .pdt_view .con2 .txt_area .pdt_info em{font-size:10px;} .pdt_view .con2 .txt_area .pdt_info span{font-size:10px;} .pdt_view .con2 .txt_area .pdt_txt{font-size:11px;line-height:18px;margin-top:8px;padding:0;} .pdt_view .con2 ul.listStyle1{overflow:hidden;margin:25px 0 0 0;float:left;width:50%;} .pdt_view .con2 ul.listStyle1 li{float:none;margin-left:0;padding-left:10px;font-size:10px;line-height:16px;background:url('../images/product/pdt_view_con2_icon.png') no-repeat left 3px / 7px 7px;} .pdt_view .con2 ul.listStyle2{overflow:hidden;margin:25px 0 0 0;float:left;width:50%;} .pdt_view .con2 ul.listStyle2 li{float:none;margin-left:0;padding-left:10px;font-size:10px;line-height:16px;background:url('../images/product/pdt_view_con2_icon2.png') no-repeat left 4px / 7px 7px;} .pdt_view .con3{height:320px;} .pdt_view .con4{padding:45px 0 70px 0;} .pdt_view .con4 .tit{font-size:12px;} .pdt_view .con4 .tit:after{bottom:-10px;width:14px;margin-left:-7px;} .pdt_view .con4 .txt{padding-top:25px;font-size:16px;line-height:22px;} .pdt_view .con4 .list{margin:0;} .pdt_view .con4 .list li{float:left;width:33% !important;margin:35px 0 0 0;} .pdt_view .con4 .list li span{font-size:11px;line-height:15px;margin-top:15px;letter-spacing:-0.5px;} .pdt_view .con4 .list li:nth-child(3n + 1){clear:both !important;} .pdt_view .con4 .list.leng6 li:nth-child(6n + 1){clear:none;} .pdt_view .con4 .list.leng5 li:nth-child(5n + 1){clear:none;} .pdt_view .con4 .list.leng4 li:nth-child(4n + 1){clear:none;} .pdt_view .con5{padding:45px 0 50px 0;} .pdt_view .con5 .tit{font-size:12px;} .pdt_view .con5 .tit:after{bottom:-10px;width:14px;margin-left:-7px;} .pdt_view .con5 .txt{padding-top:25px;font-size:16px;line-height:22px;} .pdt_view .con5 .sTxt{padding-top:10px;font-size:14px;line-height:18px;} .pdt_view .con5 .list{overflow:hidden;margin:25px 25px 0 25px;} .pdt_view .con5 .list li{display:block;width:100%;margin:25px 0 0 0;text-align:center;} .pdt_view .con5 .list li .step{width:40px;font-size:10px;line-height:16px;border:1px solid #151515;margin:0 auto;} .pdt_view .con5 .list li .step:after{display:none;} .pdt_view .con5 .list li .listTxt{font-size:14px;line-height:20px;margin-top:10px;} .pdt_view .con5 .list li .listTxt span{font-size:11px;line-height:15px;margin-top:10px;} .pdt_view .con5 .list li .listTxt br{display:inline;} .pdt_view .con5 .useTxt{margin:25px 25px 0 25px;font-size:14px;line-height:20px;} /* HR101 ANTI HAIR LOSS */ .HR101_ANTI_HAIR_LOSS_PROGRAM.pdt_view .con3{background:url('../images/product/HR101_ANTI_HAIR_LOSS_PROGRAM/pdtImg3.jpg') no-repeat center top;background-size:auto 140%;} /* HR101 ANTI HAIR LOSS START-UP KIT */ .HR101_ANTI_HAIR_LOSS_PROGRAM_STARTER_KIT.pdt_view .con3{background:url('../images/product/HR101_ANTI_HAIR_LOSS_PROGRAM_STARTER_KIT/pdtImg3.jpg') no-repeat center top;background-size:auto 140%;} /* RS101 DOUBLE WHITENING UV PROTECTOR */ .RS101_DOUBLE_WHITENING_UV_PROTECTOR.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_UV_PROTECTOR/pdtImg3_m.jpg') no-repeat center top fixed;background-size:auto 120%;} /* RS101 DOUBLE WHITENING CREAM MASK */ .RS101_DOUBLE_WHITENING_CREAM_MASK.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_CREAM_MASK/pdtImg3_m.jpg') no-repeat center top fixed;background-size:auto 120%;} /* RS101 DOUBLE WHITENING SERUM */ .RS101_DOUBLE_WHITENING_SERUM.pdt_view .con3{background:url('../images/product/RS101_DOUBLE_WHITENING_SERUM/pdtImg3_m.jpg') no-repeat center top fixed;background-size:auto 120%;} } @media all and (max-width: 320px) { /* ======================================= */ /* ============ [메인 컨텐츠] ============ */ /* ======================================= */ #container .main_con > section.sec3 .cont_right .img_area img{width:75%;} }