@charset "utf-8"; /* CSS Document */ /** 개별 css || W.LAB, 로그인, 회원가입, 주문단 **/ /*─────────────────────────────────────────────────────────── 회원관련 - member ───────────────────────────────────────────────────────────*/ .benefits_dc.hidden {display:none!important;} /*** 회원 관련 공통 ***/ .log_content {padding:48px 15px 50px;background: rgb(134,160,130);background: linear-gradient(130deg, rgba(134,160,130,1) 0%, rgba(32,61,54,1) 100%);margin-bottom:0;box-sizing:border-box;position:relative;z-index:1;} .log_content:before {background:url(../img/da_image/bg_login_top.png) no-repeat 50% 50%;background-size:cover;width:42.65vw;height:72vw;right:0%;transform:translateX(0);position:absolute;top:0;z-index:12;display:inline-block;content:"";z-index:-1;} .log_content .logform_wrap {width:100%;margin:0 auto;padding:0;} .log_content .logform_wrap:before, .log_content .logform_wrap:after {display:inline-block;position:absolute;margin:0;padding:0;font-family: 'Trirong', serif;color:#fff;font-size:16px;letter-spacing:-0.8px;font-weight:400;opacity:0.5;left: calc(50% - 600px);} .log_content .logform_wrap:before {transform:translate(-83.5px, 0) rotate(90deg);content:"";width:100px;height:1px;bottom:225px;background:#fff;} .log_content .logform_wrap:after {transform:translate(-117px, 0) rotate(90deg);content:"WELLKIN";bottom:65px;letter-spacing:12px;height:12px;line-height:12px;width:162px;} .log_content .member_tit {font-size:25px;line-height:30px;letter-spacing:0;font-weight:400;color:#fff;text-align:center;font-family: 'Jomolhari', serif;border:none;} .log_content .member_cont {width:100%;margin:25px auto 0;border:0;outline:0;box-sizing:border-box;box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.46);-webkit-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);-moz-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);-ms-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);} /* 로그인폼, 아이디찾기, 비번 공통 */ /* 외곽 */ .log_content .member_form_box, .log_content .member_bnr {text-align:center;width:100%;box-sizing:border-box;border-radius:5px;overflow:hidden;box-shadow: 0 0 34px 0 rgba(0, 0, 0, 0.46);-webkit-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);-moz-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);-ms-box-shadow:0 0 34px 0 rgba(0, 0, 0, 0.46);position:relative;z-index:0;} .log_content .member_bnr {} .member_bnr .mem_bnr_slide {position:relative;z-index:1;width:100%;overflow:hidden;} .member_bnr .mem_bnr_slide .slick-arrow {height:20px;width:11px;border-radius:100%;position:absolute;top:50%;transform:translateY(-50%);background:none !important;font-size:0 !important;border:0 !important;z-index:4 !important;} .member_bnr .mem_bnr_slide .slick-arrow:before {width:14px;height:14px;left:50%;top:50%;border-color:#fff;border-width:1px;border-style:solid;border-left:0;border-bottom:0;display:inline-block;vertical-align:top;content:"";position:absolute;box-sizing:border-box;} .member_bnr .mem_bnr_slide .slick-prev {left:5px;} .member_bnr .mem_bnr_slide .slick-next {right:5px;} .member_bnr .mem_bnr_slide .slick-prev:before {transform:translate(-25%, -50%) rotate(-135deg);} .member_bnr .mem_bnr_slide .slick-next:before {transform:translate(-75%, -50%) rotate(45deg);} .member_bnr .mem_bnr_slide .slick-dots {position:absolute;left:50%;bottom:10px;display:inline-block;margin:0 auto;padding:0;height:6px;line-height:6px;font-size:0;width:auto;transform:translateX(-50%);} .member_bnr .mem_bnr_slide .slick-dots li {height:6px;line-height:6px;width:6px;display:inline-block;vertical-align:top;text-align:center;position:relative;z-index:1;} .member_bnr .mem_bnr_slide .slick-dots li + li {margin-left:10px;} .member_bnr .mem_bnr_slide .slick-dots li button {width:4px;height:4px;padding:0;border-radius:100%;background:#ccc;display:inline-block;vertical-align:top;outline:0;border:0;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .member_bnr .mem_bnr_slide .slick-dots li.slick-active {} .member_bnr .mem_bnr_slide .slick-dots li.slick-active button {width:6px;height:6px;background:#fff;} .member_bnr .mem_bnr_slide .slick_cut {} .member_bnr .mem_bnr_slide .slick_cut img {width:100%;height:auto;} /* 좌측 내부탭, 타이틀 등 외곽 */ .log_content .member_form_box {padding:40px 20px;margin:0 auto 15px;background:#fff;z-index:10;background:#fff url('../img/da_image/bg_method_cont.jpg')no-repeat top;background-size:100% auto;} .log_content .member_form_box.pw_form_box {padding-top:40px;padding-bottom:40px;} .log_content .member_form_box > h3 {height:21px;line-height:21px;margin:0 0 19px;font-size:21px;letter-spacing:-1.05px;padding:0;font-weight:400;color:#222;font-family: 'Jeju Myeongjo', serif;text-align:center;} .log_content .member_form_box > p {margin:0 0 25px 0;padding-top:9px;line-height:1em;font-size:15px;letter-spacing:-0.75px;font-weight:400;color:#666;text-align:center;} .log_content .member_form_box > p strong {font-weight:500;color:#275b4e;} .log_content .member_form_box > p.pw_changes {line-height:20px;padding-top:6px;} .log_content .member_form_box > p.pw_changes strong {display:inline-block;padding-top:10px;} .logform_tab {font-size:0;vertical-align:top;position:relative;z-index:2;margin-top:-10px;} .logform_tab li {width:50%;display:inline-block;vertical-align:top;border-bottom:1px #ddd solid;cursor:pointer;} .logform_tab li h3 {height:38px;line-height:38px;font-size:16px;letter-spacing:-0.8px;font-weight:400;color:#888;font-family: 'Jeju Myeongjo', serif;position:relative;z-index:1;} .logform_tab li h3:before {display:inline-block;content:"";position:absolute;left:50%;top:0;width:3px;height:3px;border-radius:100%;background:#275b4e;transform:translateX(-50%);opacity:0;} .logform_tab li.on {border-bottom:1px #000 solid;} .logform_tab li.on h3 {color:#222;font-weight:700;} .logform_tab li.on h3:before {opacity:1;} .logform_box {padding:20px 0 0;} .logform_box .logform_cont {height:0;overflow:hidden;width:100%;margin:0;padding:0;} .logform_box .logform_cont.on {height:auto;overflow:inherit;} .login_inp_box {position:relative;z-index:3;} .login_inp_box.user_certification_confirm {padding:0;} /* 좌측 폼 */ /* 라디오 선택 */ .find_id_sec .inp_rdo.inp_custom {padding-bottom:25px;} .login_inp_box .inp_rdo.inp_custom, .login_inp_box .inp_chk.inp_custom {font-size:15px;line-height:16px;letter-spacing:-0.75px;} .login_inp_box .inp_rdo.inp_custom label + input, .login_inp_box .inp_chk.inp_custom label + input {margin-left:25px;} .login_inp_box .user_certify_list {text-align:left;padding:12px 0 5px;box-sizing:border-box;} .login_inp_box .user_certify_list li {border:1px #ddd solid;margin-bottom:0;padding:9px 15px 11px;box-sizing:border-box;text-align:left;} .login_inp_box .user_certify_list li + li {margin-top:10px;} .login_inp_box .user_certify_list li label {display:inline-block;vertical-align:top;} .login_inp_box .user_certify_list li strong {color:#275b4e;line-height:16px;padding:5px 0;font-size:14px;font-weight:400;letter-spacing:-0.7px;display:inline-block;vertical-align:top;} .login_inp_box .user_certify_list li strong + span {margin-top:7px;margin-left:23px;font-size:13px;letter-spacing:-0.65px;color:#888;} /* 입력폼 */ .login_inp_box .user_certify_box {margin-top:-11px;} .login_inp_box .login_inp_dl {position:relative;z-index:1;} .login_inp_box .login_inp_dl + .login_inp_dl, .login_inp_box .find_id_sec .login_inp_dl + .login_inp_dl {margin-top:10px;} .login_inp_box .login_inp_dl + .btn_center, .login_inp_box .login_inp_dl + .btn_type_submit {padding-top:0;margin-top:15px;} .login_inp_box .login_inp_dl + .btn_center_box, .sns_cont + .btn_center_box {margin-top:20px;} .login_inp_box .login_inp_dl dt {position:absolute;left:0;top:0;opacity:0;z-index:-1;} .login_inp_box .login_inp_dl dd {position:relative;z-index:2;width:100%;} .login_inp_box .login_inp_dl dd input {height:45px;line-height:43px;padding:0 16px;font-size:15px;letter-spacing:-0.45px;text-indent:0;width:100%;font-weight:400;color:#333;background:#f5f5f5;border:1px #f5f5f5 solid;font-family: 'Roboto','Noto Sans KR',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif;box-sizing:border-box;display:inline-block;vertical-align:top;margin:0 !important;} .login_inp_box .login_inp_dl dd input:placeholder {font-size:15px;letter-spacing:-0.45px;font-weight:300;color:#888;} .login_inp_box .login_inp_dl dd input::placeholder {font-size:15px;letter-spacing:-0.45px;font-weight:300;color:#888;} .login_inp_box .login_inp_dl dd input:-webkit-input-placeholder {font-size:15px;letter-spacing:-0.45px;font-weight:300;color:#888;} .login_inp_box .login_inp_dl dd input:-webkit-autofill, .login_inp_box .login_inp_dl dd input:-webkit-autofill:hover, .login_inp_box .login_inp_dl dd input:-webkit-autofill:active{-webkit-box-shadow: 0 0 0 30px #f5f5f5 inset !important;} .login_inp_box .login_inp_dl dd input:-webkit-autofill:focus {background:#fff;border:1px #333 solid !important;} .login_inp_box .login_inp_dl dd input.input_email {width:57.4% !important;margin-right:10px !important;} .login_inp_box .login_inp_dl dd input:focus {border-color:#333;background:#fff;color:#333;} .login_inp_box .login_inp_dl dd .email_select_box {width: calc(42.6% - 10px);display:inline-block;float:right;} #wrap .login_inp_box .login_inp_dl dd select {height:45px;border:1px #f5f5f5 solid;background:#f5f5f5 url(../img/da_image/icon_bg_select_gd.png) no-repeat 100% center;background-size:auto 34px;margin:0;width:100%;line-height:19px;padding:12px 0 12px 15px;font-size:15px;letter-spacing:-0.75px;font-weight:400;color:#333;font-family: 'Roboto','Noto Sans KR',-apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif;box-sizing:border-box;display:inline-block;vertical-align:top;} .login_inp_box .login_inp_dl .input_pw {text-align:left;} .login_inp_box .sns_cont{margin:15px 0;padding:20px 0;border:1px solid #dadada;background:#ffffff;text-align:center;} .login_inp_box .sns_cont + .sns_cont {} /* 입력폼 하단 */ .login_inp_box .login_inp_ft {padding:20px 0 0;} .login_inp_box .login_inp_dl+ .login_inp_ft {padding:15px 0 25px;} .user_certification_confirm .inp_tx.login_inp_ft {margin:0;text-align:left;} .member_form_box.pw_form_box .login_inp_box .login_inp_ft {text-align:left;} .login_inp_box form + .login_inp_ft {padding:25px 0 0;} .login_inp_box .caution_msg1 {margin-bottom:10px;font-size:14px;line-height:20px;letter-spacing:-0.42px;color:#942020;font-weight:400;display:block;text-align:left;} .login_inp_box .caution_msg1 strong {font-size:inherit;font-weight:inherit;line-height:inherit;} .login_inp_box .find_id_sec .caution_msg1, .login_inp_box .find_password_box .caution_msg1 {margin-top:-4px;margin-bottom:16px;text-align:center;} .login_inp_box .find_password_box .caution_msg1 {margin-bottom:24px;} .login_inp_box #errorMessage {margin-top:17px;margin-bottom:0;text-align:center;} .login_inp_box #errorMessage strong {font-size:inherit;font-weight:inherit;color:inherit;line-height:inherit;letter-spacing:inherit;margin:0;padding:0;} .login_inp_box .login_inp_ft .login_desc {border-bottom:1px #ddd solid;padding:0 0 25px;margin-bottom:25px;font-size:15px;color:#777;line-height:21px;letter-spacing:-0.75px;text-align:center;} .login_inp_box .login_inp_ft ul {font-size:0;border-bottom:1px #ddd solid;padding:0 0 25px;} .login_inp_box .login_inp_ft ul li {line-height:21px;padding:0 0 0 12px;font-size:14px;letter-spacing:-0.7px;font-weight:400;color:#888;position:relative;z-index:1;text-align:left;vertical-align:top;box-sizing:border-box;} .login_inp_box .login_inp_ft ul li:before {width:4px;height:4px;background:#bebebe;left:0;top:8px;border-radius:100%;display:inline-block;content:"";position:absolute;} .login_inp_box .login_inp_ft ul li + li {margin-top:10px;} .login_inp_box .login_inp_ft .id_chk {display:block;text-align:left;padding-bottom:15px;} .login_inp_box .login_inp_ft .id_chk .inp_custom {} .login_inp_box .login_inp_ft .id_chk .inp_custom + .inp_custom {} .login_inp_box .login_inp_ft .id_chk .inp_custom label {font-size:15px;letter-spacing:-0.75px;} .login_inp_box .login_inp_ft .log_link {padding:0;text-align:center;font-size:0;} .login_inp_box .login_inp_ft.clear .log_link {padding:25px 0 0;text-align:center;} .login_inp_box .login_inp_ft .log_link a {line-height:1em;font-size:14px;letter-spacing:-0.42px;font-weight:400;color:#666;display:inline-block;vertical-align:top;} .login_inp_box .login_inp_ft .log_link a + a {} .login_inp_box .login_inp_ft .log_link a + a:before {margin:3px 12px;height:10px;width:1px;background:#ddd;display:inline-block;content:"";vertical-align:top;} .login_inp_box .login_inp_ft .notice_text, .login_inp_box .login_inp_ft #errorMessage p.info_again, .login_inp_box .login_inp_ft .txt_tip, .member_form_box.pw_form_box .login_inp_box .login_inp_ft .auth-text-time-authno {text-align:left;color:#888 !important;font-size:14px;letter-spacing:-0px;font-weight:400;margin:0 !important;padding:0 !important;line-height:20px;height:20px;vertical-align:top;} .member_form_box.pw_form_box .login_inp_box .login_inp_ft .auth-text-time-authno{padding-left:17px !important;} .login_inp_box .login_inp_ft .txt_tip {letter-spacing:-0.7px;} .login_inp_box .login_inp_ft .notice_text a, .login_inp_box .login_inp_ft #errorMessage p.info_again a, .login_inp_box .login_inp_ft .fc_red span, .login_inp_box .login_inp_dl .msg.c_red, .login_inp_box .login_inp_dl .msg.c_blue, .member_form_box.pw_form_box .login_inp_box .login_inp_ft .auth-text-time-authno span.auth-time-authno {color:#275b4e !important;font-size:14px;letter-spacing:-0px;font-weight:400;margin:0 !important;line-height:20px;height:20px;border:0 !important;display:inline-block;vertical-align:top;width:auto;} .login_inp_box .login_inp_ft .notice_text a, .login_inp_box .login_inp_ft #errorMessage p.info_again a {text-decoration:underline;background:none;} .login_inp_box .login_inp_dl .msg.c_red, .login_inp_box .login_inp_dl .msg.c_blue {margin-top:10px !important;margin-bottom:10px !important;} .login_inp_box .login_inp_dl .msg.c_red {color:#942020 !important;} .member_form_box.pw_form_box .login_inp_box .login_inp_ft .auth-text-time-authno span.auth-time-authno{margin-top:0px !important;} .login_inp_box .login_inp_join {margin:0;padding:0;} /* 버튼 */ .btn_center_box {} .member_warning + .btn_center_box {margin-top:0;} #wrap .btn_center_box .btn_go, #wrap .btn_center_box .btn_type_submit, #wrap .btn_center_box .btn{width: calc(50% - 5px);height:50px;display:inline-block;} #wrap .btn_center_box .btn{margin-left:5px;} #wrap .btn_center_box .btn button{width:100%;} .btn_center_box .btn_go + .btn_go, .btn_center_box .btn_go + .btn_type_submit {float:right;margin-left:10px;} .btn_type_submit, .login_inp_box .btn_mall_join, .login_inp_box .btn_mall_kakao {height:45px;line-height:43px;font-size:15px;letter-spacing:-0.75px;width:100%;padding:0;margin:0;border-width:1px;border-style:solid;text-align:center;box-sizing:border-box;display:inline-block;} .btn_type_submit {font-size:16px;letter-spacing:-0.48px;font-weight:400;color:#fff;border-color:#275b4e;background:#275b4e;} .btn_go.btn_member_next {width:100%;font-weight:400;} .login_inp_dl + .js_caution_msg2 + .btn_type_submit, #errorMessage + .btn_member_next {margin-top:10px;} #errorMessage.dn + .btn_member_next {margin-top:20px;} #errorMessage + .btn_member_next {margin-top:27px;} .login_inp_box .btn_mall_join {font-weight:400;color:#333;/*border-color:#aaa;*/margin:0 0 5px;} .login_inp_box .btn_mall_kakao {padding-left:29px;font-weight:400;color:#3e2616;border-color:#3e2616;margin:0;position:relative;z-index:1;} .login_inp_box .btn_mall_kakao:before {left:18.3%;background:url(../img/da_image/icon_login_sns01.png) no-repeat 50% 50%;width:21px;height:20px;background-size:auto 20px;display:inline-block;content:"";position:absolute;top:50%;transform:translateY(-50%);} .login_inp_box .member_sns_login {text-align:center;font-size:0;} .login_inp_box .member_sns_login a {display:inline-block;vertical-align:top;width:40px;} .login_inp_box .member_sns_login a + a {margin-left:20px;} .login_inp_box .member_sns_login img {vertical-align:top;width:100%;} @media only screen and (max-width:360px) { } @media only screen and (max-width:320px) { .log_content, .log_content .member_form_box, .login_inp_box .user_certify_list li {padding-left:10px;padding-right:10px;} .login_inp_box .inp_rdo.inp_custom label + input, .login_inp_box .inp_chk.inp_custom label + input {margin-left:20px;} .log_content .member_form_box > p {font-size:14px;letter-spacing:-0.7px;} .login_inp_box .user_certify_list li strong + span {margin-left:21px;font-size:12px;letter-spacing:-0.6px;} .log_content .member_form_box > p strong {letter-spacing:-0.9px;} .login_inp_box .login_inp_ft .txt_tip {font-size:13px;letter-spacing:-0.65px;} } /* 아이디 찾기 완료, 비밀번호 변경 완료 */ /* 일반 - 375 */ .login_inp_box .find_complete_box {text-align:center;padding:0;background:none;} .login_inp_box .find_complete_box p {padding:81px 0 25px;font-size:16px;letter-spacing: -0.8px;line-height:23px;color:#333;font-weight:400;background:#f5f5f5 url(../img/da_image/icon_check_end.png) no-repeat 50% 30px;background-size:40px auto;} .login_inp_box .find_complete_box p strong, .login_inp_box .find_complete_box .find_id_name{font-size:inherit;letter-spacing:inherit;color:#275b4e;font-weight:inherit;} .login_inp_box .find_complete_box a.btn_type_submit {margin-top:10px;} @media only screen and (max-width:360px) { .login_inp_box .btn_mall_kakao:before {left:16.3%;} } @media only screen and (max-width:320px) { .login_inp_box .btn_mall_kakao:before {left:11.3%;} } /*회원가입 수단*/ #wrap .log_content{width:100%;box-sizing:border-box;padding-left:15px;padding-right:15px;} .log_content.joinMethod .logform_wrap{position: relative;z-index:2;} #wrap .log_content.joinMethod .member_form_box{padding:30px 20px;background:#fff url('../img/da_image/bg_method_cont.jpg')no-repeat top;background-size:100% auto;} #wrap .log_content.joinMethod .member_form_box .join_txt{margin-top:5px;} #wrap .log_content.joinMethod .member_form_box .join_txt p{font-size:16px;color:#333;font-weight:400;letter-spacing:-0.9px;line-height:24px;} #wrap .log_content.joinMethod .member_form_box .join_txt p strong{color:#275b4e;font-weight:500;} #wrap .shop_mall_join{background:#275b4e;border:1px solid #275b4e;padding:8px 0 11px;display: inline-block;width:100%;box-sizing:border-box;margin-top:23px;} #wrap .shop_mall_join span{font-size:16px;color:#fff;font-weight:400;letter-spacing:-0.05em;} #wrap .kakao_login{border-top:1px solid #ddd;box-sizing:border-box;margin-top:25px;padding-top:25px;} #wrap .kakao_login .js_btn_kakao_login{display: block;width:100%;font-size:15px;color:#3e2616;font-weight:400;box-sizing:border-box;background:#fff url('../img/da_image/logo_kakao.png')no-repeat 19.2% 12px;background-size:auto 19px;border:1px solid #675244;height:45px;line-height:45px;padding-left:30px;letter-spacing:-0.06em;} #wrap .kakao_login .js_btn_kakao_login a{display: block;width:100%;height:100%;line-height:42px;font-size:inherit;color:inherit;font-weight:inherit;} #wrap .member_sns_login{width:100%;font-size:0;margin-top:25px;} #wrap .member_sns_login li{display:inline-block;vertical-align: top;margin:0;} #wrap .member_sns_login li img{width:40px;} #wrap .member_sns_login li + li{margin-left:20px;} #wrap .member_guide_txt{padding:26px 0 40px 0;} #wrap .member_guide_txt p{font-size:14px;color:#666;font-weight:400;letter-spacing:-0.05em;} #wrap .member_guide_txt p a{font-size:inherit;color:#275b4e;font-weight:inherit;position: relative;} #wrap .member_guide_txt p a:after {content:'';display:block;position:absolute;width: 100%;height:1px;background:#275b4e;bottom: 1px;left:0;} .method_bnr{padding-bottom:8px;} .method_bnr img{width:100%;} @media only screen and (max-width:350px){ #wrap .kakao_login .js_btn_kakao_login{background-position:14.2% 12px;} } @media only screen and (max-width:320px){ #wrap .kakao_login .js_btn_kakao_login{background-position:10.2% 12px;} } /*정보입력*/ .log_content#memberjoin{background:linear-gradient(89deg, rgba(134,160,130,1) 1%, rgba(32,61,54,1) 100%);} #wrap .join_write_tit{width:100%;box-sizing:border-box;position:relative;border-radius:5px 5px 0 0;background:#275b4e;background-size:100% auto;text-align:center;padding:34px 15px 15px;} #wrap .join_write_tit h3{font-size:23px;color:#fff;font-weight:500;padding:0;margin-bottom:5px;letter-spacing:-1.35px;} #wrap .join_write_tit p{font-size:15px;color:#fff;font-weight:400;padding:0;margin-bottom:14px;letter-spacing:-0.95px;} #wrap .join_write_tit p strong{font-size:inherit;color:inherit;font-weight:500;} #wrap .join_write_tit span{font-size:12px;color:rgba(255,255,255, 0.4);font-weight:400;display:block;text-align: right;letter-spacing:-0.8px;} #wrap .base_phone_info.input_wrap, #wrap .join_branch.input_wrap{width:100%;box-sizing:border-box;position:relative;background:#f2f6f4;padding:20px 20px 30px 40px;display: block;} .join_branch{padding:40px 48px 60px 85px;} .base_info_tit{font-size:16px;color:#333;font-weight:500;letter-spacing:-0.05em;position:relative;line-height:23px;} .base_info_tit:before{width:17px;height:10px;content:"";background:url('../img/da_image/icon_chk.png')no-repeat center;position: absolute;top:7px;left:-22px;background-size:auto 100%;} .base_info_txt{font-size:13px;color:#777;font-weight:400;line-height:20px;letter-spacing:-0.05em;display: block;margin:6px 0 10px;} .base_info_box dl dt, .base_info_box dl dd{box-sizing:border-box;} .base_info_box dl dt{font-size:15px;color:#222;font-weight:400;letter-spacing:-0.05em;} .base_info_box dl dt.required:after{content:"*";font-size:13px;color:#942020;font-weight:500;display: inline-block;vertical-align:top;margin:-1px 0 0 3px;} .base_phone_info input{box-sizing:border-box;height:45px;border:1px solid #ddd !important;} .base_info_box .address_postcode{display: inline-block;vertical-align: top;margin-top:10px;width:100%;} .base_info_box .address_postcode input{background:#fff;float: left;padding-left:12px;text-indent:0;border:1px solid #f5f5f5 !important;padding-left:12px;font-size:15px;color:#888;font-weight:300;font-family:'Noto Sans KR';vertical-align: top;height:45px;line-height:45px;letter-spacing:-0.06em;} #wrap .base_info_box button{display:inline-block;margin-top:10px;box-sizing:border-box;width:100%;height:45px;line-height:43px;font-size:15px;color:#333;font-weight:400;padding:0;} #wrap .input_wrap{padding:0;} #wrap .input_wrap .input_title{display: block;width:100%;} #wrap .join .input_title{padding:0;padding-bottom:13px;font-size:15px;color:#222;font-weight:400;letter-spacing:-0.05em;line-height:1;} #wrap .input_wrap .input_title label{font-size:inherit;color:inherit;font-weight:inherit;} #wrap .join .input_title.required{background:none;} #wrap .join .input_title.required:after{content:"*";font-size:15px;color:#942020;font-weight:500;display: inline-block;vertical-align:top;margin:-1px 0 0 3px;} #wrap .base_info_box .base_info_sec{border:none;width:100%;box-sizing:border-box;position: relative;padding:25px 20px 8px 20px;background:#fff;} #wrap .input_wrap .input_content{display: block;width:100%;padding-bottom:20px;} #wrap .input_wrap .input_content input[type="text"], #wrap .input_wrap .input_content input[type="password"], #wrap .input_wrap .input_content input[type="number"]{text-indent:0;width:100%;background:#f5f5f5;border:1px solid #f5f5f5 !important;padding-left:12px;font-size:15px;color:#888;font-weight:300;font-family:'Noto Sans KR';vertical-align: top;height:45px;line-height:45px;letter-spacing:-0.06em;box-sizing:border-box;} #wrap .input_wrap .input_content input[type="text"]::placeholder{color:#888;} #wrap .input_wrap .input_content input[type="text"]:focus{background:#fff;border:1px solid #333 !important;color:#333;} #wrap .input_wrap .input_content input[type="text"]:focus::placeholder{color:#333;} #wrap .input_wrap .input_content input[type="password"]::placeholder{color:#888;} #wrap .input_wrap .input_content input[type="password"]:focus{background:#fff;border:1px solid #333 !important;color:#333;} #wrap .input_wrap .input_content input[type="password"]:focus::placeholder{color:#333;} #wrap .input_wrap .input_content input[type="number"]::placeholder{color:#888;} #wrap .input_wrap .input_content input[type="number"]:focus{background:#fff;border:1px solid #333 !important;color:#333;} #wrap .input_wrap .input_content input[type="number"]:focus::placeholder{color:#333;} #wrap .input_wrap.mem_birthday #birthDt{width:68.6%;} #wrap .input_wrap.mem_birthday .inp_rdo{display:inline-block;font-size:0;vertical-align: top;padding:0;margin-left:2px;} #wrap .input_wrap.mem_birthday .inp_rdo input{display:none;} #wrap .input_wrap.mem_birthday .inp_rdo label{display: inline-block;box-sizing:border-box;width:45px;height:45px;border:1px solid #bbb;background:none;font-size:15px;color:#666;font-weight:400;padding:0;text-align:center;line-height:42px;cursor:pointer;margin:0;} #wrap .input_wrap.mem_birthday .inp_rdo #sexFlMan + label{border-right:none;} #wrap .input_wrap.mem_birthday .inp_rdo #sexFlMan:checked + label{border:1px solid #333;color:#333;} #wrap .input_wrap.mem_birthday .inp_rdo #sexFlWoman + label{border-left:none;} #wrap .input_wrap.mem_birthday .inp_rdo #sexFlWoman:checked + label{border:1px solid #333;color:#333;} #wrap .join_branch{} #wrap .join_branch.input_wrap{border-radius:0 0 5px 5px;} #wrap .join_branch .base_info_tit span{position:relative;} #wrap .join_branch .base_info_tit span:before{width:100%;height:5px;content:"";background:#275b4e;opacity:0.15;position: absolute;bottom:2px;left:0;} #wrap .join_branch .branch_cont{margin-top:10px;} #wrap .join_branch dl + dl{margin-top:15px;} #wrap .join_branch dl dd{font-size:0;padding-top:7px;} #wrap .join_branch dl dd select{width:calc(50% - 5px);height:45px;padding-left:12px;font-size:15px;color:#333;font-weight:400;border-color:#ccc;} #wrap .join_branch dl dd select + select{margin-left:10px;} #wrap .join_branch dl dd input{width:70.3%;font-size:15px;color:#888;font-weight:400;font-family:'Noto Sans KR';padding:0 0 0 12px;height:45px;line-height:45px;border:1px solid #ddd;box-sizing:border-box;} #wrap .base_info_box .join_branch button{margin:0 0 0 4px;width:28.1%;} #wrap .base_info_box .join_branch .join_ok_btn{width:100%;margin:0;color:#fff;} #wrap .join_branch .branch_txt{margin:10px 0 13px 0;} #wrap .join_branch .branch_announce{width:100%;text-align:center;box-sizing:border-box;border:1px solid #275b4e;background:#fff;} #wrap .join_branch .branch_announce span{font-size:14px;color:#3a6a5e;font-weight:400;line-height:19px;padding:6px 0 6px;display: inline-block;letter-spacing: -0.5px;} #wrap .log_content .member_cont.join_agree_box{border-radius:5px;overflow:hidden;margin-top:10px;} #wrap .join_write_agree{width:100%;box-sizing:border-box;padding:25px 20px 30px 20px;background:#fff;} #wrap .member_cont .join_write_agree h3{font-size:18px;color:#333;font-weight:400;line-height:1.25;letter-spacing:-1.2px;border-bottom:1px solid #ddd;box-sizing:border-box;padding-bottom:13px;margin-bottom:15px;} #wrap .member_cont .join_write_agree h3 span{font-size:14px;color: #666;font-weight: normal;line-height:15px;letter-spacing: -0.75px;display:inline-block;margin-top:10px;} #wrap .join_agreement_cont #allAgree + label{line-height: 1.67;letter-spacing:-0.9px;font-size:16px;font-weight:400;line-height:21px;} #wrap .join_agreement_cont .join_agreement_box{margin-bottom:16px;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view{box-sizing:border-box;padding-left:12px;margin-bottom:12px;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom input{vertical-align: top;margin-top:-2px;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view label{font-size:14px;color:#555;font-weight:400;letter-spacing:-0.8px;width:68%;line-height:21px;display: inline-block;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view label strong{font-size:inherit;color:#942020;font-weight:inherit;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view label strong.agree_c{color:#275b4e;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom{display: block;width:100%;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom:after{clear:both;content:"";display: block;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom span{display: inline-block;float:right;font-size:12px;color:#888;font-weight:400;line-height:21px;letter-spacing:-0.7px;padding-right:15px;box-sizing:border-box;position:relative;cursor:pointer;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom span:before{width:12px;height:5px;content:"";background:url('../img/da_image/agree_arr_down.png')no-repeat right center;position: absolute;right:0;top:10px;background-size:auto 100%;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom span.on:before{background:url('../img/da_image/agree_arr_up.png')no-repeat right center;background-size:auto 100%;} #wrap .join_agreement_cont .agreement_box{box-sizing:border-box;margin:10px 0 0 0;border:none;height:95px;background:#f5f5f5;padding:14px 15px;font-size:12px;color:#666;font-weight:400;line-height:18px;letter-spacing:-0.75px;display: none;overflow-y:auto;} #wrap .join_agreement_cont .alert_txt{display:block;font-size:12px;color:#942020;font-weight:400;line-height:15px;letter-spacing:-0.7px;margin-top:3px;padding-left:29px;width:80%;} #wrap .join_agreement_cont .join_agreement_box .c_red{font-size:12px;} #wrap .join_write_agree .btn_center_box {margin:25px 0 0;} #wrap .member_cont .btn_center_box{} /* #wrap .member_cont .btn_center_box .btn_comfirm{font-size:18px;color:#fff;font-weight:400;letter-spacing:-1px;} */ #wrap .join_ok_btn{width:100%;height:45px;font-size:15px;color:#fff;font-weight:400;line-height:43px;padding:0;letter-spacing:-1px;background:#275b4e;border:1px solid #275b4e;} #wrap .join_agree_box .member_guide_txt{margin-top:20px;padding:0;text-align: center;} @media only screen and (max-width:374px){ #wrap #ft_layer1 .join_agreement_cont .join_agreement_box.js_terms_view label{width:62%;} } /*sns 회원가입*/ .join_view.base_info_box{overflow:visible !important;} .base_info_box dl.branch_code{position: relative;} .base_info_box dl.branch_code dt{display: inline-block;} .base_info_box dl.branch_code dt > p{padding-right:29px;display: inline-block;box-sizing:border-box;position: relative;} .base_info_box dl.branch_code dt em{width:20px;height:20px;display: inline-block;box-sizing:border-box;background: url('../img/da_image/icon_caution.png')no-repeat right center;background-size:auto 20px;cursor:pointer;position: absolute;top:1px;right:0;} .base_info_box dl.branch_code dt > span{position:absolute;display:inline-block;height:30px;line-height:30px;box-shadow:0 0 13px 0 rgba(0, 0, 0, 0.19);box-sizing:border-box;border-radius:5px;font-size:12px;color:#fff;font-weight:400;letter-spacing:-0.7px;background:#333;padding:0 8px;top:-7px;right:11px;cursor:pointer;} .base_info_box dl.branch_code dt > span:before{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid #333;border-left:none;position: absolute;bottom:8px;left:-6px;content:"";} .base_info_box dl.branch_code dt > span.dn{display: none;} .branch_code_layer{position: absolute;width:calc(100% + 25px);height:0;opacity:0;box-sizing:border-box;border:1px solid #333;box-shadow:0 0 38px 0 rgba(0, 0, 0, 0.21);background:#fff;top:150px;left:-19px;z-index:210;overflow:hidden;} .branch_code_layer.on{height:auto;opacity:1;overflow:initial;} .branch_container{max-height:240px;overflow-y:auto;} .branch_container::-webkit-scrollbar{width: 3px;height: 80px;margin:10px 0;border-radius: 2.5px;background-color:#e6e8ee;} .branch_container::-webkit-scrollbar-thumb{background:#5c6273;border-radius:2.5px;} .branch_container::-webkit-scrollbar-track{width:5px;background:#e6e8ee;} .branch_code_layer .branch_code_box{width:100%;box-sizing:border-box;position: relative;} .branch_code_layer .code_tit{width:100%;box-sizing:border-box;height:45px;background:#333;text-align:center;position: relative;} .branch_code_layer .code_tit p{font-size:15px;color:#fff;font-weight:500;letter-spacing:-1.2px;line-height:45px;} #wrap .branch_code_layer .code_tit .code_close{width:20px;height:20px;position: absolute;top:10px;right:15px;cursor:pointer;} #wrap .branch_code_layer .code_tit .code_close span{display: block;width:100%;height:100%;box-sizing:border-box;position: relative;} #wrap .branch_code_layer .code_tit .code_close span em{width:100%;height:2px;display: inline-block;background:#fff;position: absolute;top:50%;left:0;} #wrap .branch_code_layer .code_tit .code_close span em:nth-child(1){transform:rotate(45deg);} #wrap .branch_code_layer .code_tit .code_close span em:nth-child(2){transform:rotate(-45deg);} #wrap .branch_code_layer .code_tit > span{position: absolute;display: inline-block;box-sizing:border-box;background:#fff;border:1px solid #333;font-size:12px;color:#666;font-weight:400;border-radius: 10px;width:200px;height:35px;line-height:33px;top:-26px;left: -20px;} #wrap .branch_code_layer .code_tit > span:before{width:10px;height:10px;content:"";background:url('../img/da_image/cta_arr.png')no-repeat center;position: absolute;bottom: -10px;transform: scaleX(-1);right: 60px;} .branch_code_layer .code_tab {font-size:0;text-align:center;vertical-align:top;padding:10px 15px 8px 15px;box-sizing:border-box;width:100%;} .branch_code_layer .code_tab > li {display:inline-block;vertical-align:top;width:calc(33.3333% - 5px);text-align:Center;height:35px;line-height:33px;cursor:pointer;margin:0 0 7px 7px;border:1px solid #aaa;box-sizing:border-box;border-radius:3px;} .branch_code_layer .code_tab > li:nth-of-type(3n+1){margin-left:0;} .branch_code_layer .code_tab > li span {display:block;vertical-align:Top;font-size:14px;color:#444;font-weight:400;} .branch_code_layer .code_tab > li.on {background:#275b4e;border:1px solid #275b4e;} .branch_code_layer .code_tab > li.on span{color:#fff;} .branch_code_layer #code_list_wrap{} .branch_code_layer .code_list{width:100%;box-sizing:border-box;padding:0 15px 20px 15px;} .branch_code_layer .code_list li + li{margin-top:20px;} .branch_code_layer .code_list li dl{width:100%;display: block;} .branch_code_layer .code_list li dl dt, .branch_code_layer .code_list li dl dd{display: block;text-align: center;box-sizing:border-box;} .branch_code_layer .code_list li dl dt{padding:0;font-size:16px;color:#333;font-weight:500;letter-spacing:-0.9px;background:#eee;border:1px solid #ddd;width:100%;} #wrap .branch_code_layer .code_list li dl dd{width:100%;font-size:0;box-sizing:border-box;text-align: center;padding:0;} .branch_code_layer .code_list li dl dd ul{text-align:left;} .branch_code_layer .code_list li dl dd ul:after{clear:both;content:"";display: block;} .branch_code_layer .code_list li dl dd ul li{display:inline-block;box-sizing:border-box;width:50%;border:1px solid #ddd;border-top:none;padding:3px 0;text-align: center;vertical-align: top;} .branch_code_layer .code_list li dl dd ul li + li{margin:0;} .branch_code_layer .code_list li dl dd ul li:nth-of-type(2n){border-left:none;} .branch_code_layer .code_list li dl dd ul li .inp_rdo.inp_custom{text-align:center;padding:0;display: block;} #wrap .branch_code_layer .code_list li dl dd ul li .inp_rdo.inp_custom input{border:none;display: inline-block;width:18px;height:18px;line-height:18px;} #wrap .branch_code_layer .code_list li dl dd ul li .inp_rdo.inp_custom input + label{display:block;box-sizing:border-box;} .branch_code_layer .code_list li dl dd ul li .branch_name{font-size:13px;color:#333;font-weight:400;letter-spacing:-0.8px;display: block;line-height:initial;} .branch_code_layer .code_list li dl dd ul li .code_name{font-size:12px;color:#555;font-weight:400;display: block;font-family:'Roboto';line-height:initial;} /* #wrap .sns_join .join_branch.input_wrap{border-radius:0;} #wrap .sns_join .member_cont .btn_center_box{background:#f2f6f4;padding:0 20px 30px 40px;border-radius:0 0 5px 5px;} */ @media only screen and (max-width:370px){ #wrap .input_wrap.mem_birthday .inp_rdo label{width:40px;} .base_info_box dl.branch_code dt > span{right:0;} } @media only screen and (max-width:365px){ .branch_code_layer .code_tab > li span{font-size:12px;} .branch_code_layer .code_list li dl dd ul li .branch_name{font-size:12px;} .branch_code_layer .code_list li dl dd ul li .code_name{font-size:11px;} } @media only screen and (max-width:360px){ .base_info_box dl.branch_code dt > span{right:-10px;} } @media only screen and (max-width:350px){ .base_info_box dl.branch_code dt > span{font-size:11px;} } @media only screen and (max-width:345px){ .branch_code_layer .code_list li.branch_04 dd li:nth-child(4){height:82.66px;} } @media only screen and (max-width:340px){ .base_info_box dl.branch_code dt > span{padding:0 5px;} } @media only screen and (max-width:330px){ .branch_code_layer .code_tab > li{width:calc(33.3333% - 4px);margin:0 0 7px 5px;} } @media only screen and (max-width:326px){ .branch_code_layer .code_tab > li span{font-size:11px;} } @media only screen and (max-width:325px){ .base_info_box dl.branch_code dt > span{right:-15px;} } /*중복체크 레이어*/ .join_pop_layer{position:fixed;top:50%;left:40px;transform:translateY(-51%);z-index:10;display: none;width:calc(100% - 80px);} .join_pop_layer .pop_box{width:100%;box-sizing:border-box;position:relative;padding:20px 10px;text-align: center;box-shadow:0 0 38px 0 rgba(0, 0, 0, 0.21);background:#fff;box-sizing:border-box;border:1px solid #333;margin:0 auto;} .duplicate_phone_layer .pop_box .duplicate_tit{font-size:15px;color:#333;font-weight:500;} .duplicate_phone_layer .pop_box .duplicate_tit strong{font-size:inherit;color:#942020;font-weight:inherit;} .duplicate_phone_layer .pop_box .duplicate_txt{font-size:13px;color:#666;font-weight:400;line-height:20px;font-family:'Noto Sans KR';display:block;margin:10px 0 15px;letter-spacing:-0.05em;} .duplicate_phone_layer .pop_box .btn_ok, .branch_pop_layer .btn_ok{width:120px;height:45px;line-height:43px;box-sizing:border-box;font-size:15px;color:#333;font-weight:400;padding:0;} /*지점인증 레이어*/ .branch_pop_layer .code_txt{font-size:15px;color:#333;font-weight:400;display:block;line-height:21px;margin-bottom:15px;letter-spacing:-0.75px;} /*약관동의 레이어*/ .agree_pop_layer .pop_box{padding:20px 23px;} .agree_pop_layer .agree_tit{font-size:15px;color:#333;font-weight:500;line-height:21px;font-family:'Noto Sans KR';position: relative;padding-bottom:12px;margin-bottom:13px;letter-spacing:-0.06em;} .agree_pop_layer .agree_tit:before{width:20px;height:1px;content:"";background:#000;position: absolute;bottom:0;left:50%;transform:translate(-50%);} .agree_pop_layer .agree_txt p{font-size:13px;color:#666;font-weight:400;font-family:'Noto Sans KR';line-height:20px;letter-spacing:-0.06em;} .agree_pop_layer .agree_txt p + p{margin-top:7px;} .agree_pop_layer .agree_btn_box{font-size:0;margin-top:15px;} .agree_pop_layer .agree_btn_box .btn_go{width:calc(50% - 3.5px);height:45px;line-height:41px;font-size:15px;} .agree_pop_layer .agree_btn_box .btn_cancel{margin-left:7px;} /*회원가입 완료*/ .log_content.join_ok .member_form_box{padding:0;} .log_content.join_ok .member_wrap{width:100%;position: relative;z-index:2;} .join_ok_box{width:100%;box-sizing:border-box;position: relative;padding:40px 20px;} #wrap .join_ok_box .join_ok_tit{padding:0;background:#f5f5f5;width:100%;text-align:center;box-sizing:border-box;padding:30px 0 27px;} #wrap .join_ok_box .join_ok_tit .complete{background:url('../img/da_image/icon_join_ok.png')no-repeat center top;background-size:auto 40px;padding:47px 0 0 0;font-size:16px;color:#333;font-weight:400;line-height:28px;letter-spacing:-0.9px;} #wrap .join_ok_box .join_ok_tit .join_ok_txt{font-size:14px;color:#777;font-weight:400;line-height:20px;letter-spacing:-0.8px;padding:3px 0 0 0;} #wrap .join_ok_box .join_ok_tit .join_ok_txt span{font-size:inherit;color:inherit;font-weight:inherit;} #wrap .join_ok_box .btn_member_sec{border:none;margin-top:15px;} #wrap .join_ok_box .btn_member_sec ul{width:100%;margin:0;} #wrap .join_ok_box .btn_member_sec ul li .btn_login{display: inline-block;color:#fff;background:#275b4e;border:1px solid #275b4e;width:100%;height:45px;line-height:45px;box-sizing:border-box;font-size:16px;font-weight:500;letter-spacing:-0.9px;} @media only screen and (max-width:372px){ #wrap .input_wrap.mem_birthday #mem_birthday{width:67.6%;} } @media only screen and (max-width:362px){ #wrap .input_wrap.mem_birthday #mem_birthday{width:66.6%;} #wrap .input_wrap.mem_birthday .inp_rdo label{width:40px;} } @media only screen and (max-width:360px){ #wrap .join_agreement_cont .join_agreement_box.js_terms_view label{font-size:13px;width:66%;} } @media only screen and (max-width:345px){ #wrap .join_agreement_cont .join_agreement_box.js_terms_view{padding-left:5px;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view label{font-size:12px;width:63%;} #wrap .join_agreement_cont .alert_txt{font-size:11px;} } @media only screen and (max-width:340px){ #wrap .base_info_box .join_branch button{width:26.1%;font-size:14px;} #wrap .input_wrap.mem_birthday .inp_rdo label{width:36px;} } @media only screen and (max-width:330px){ #wrap .join_write_tit h3{font-size:21px;} #wrap .join_write_tit p{font-size:12px;} #wrap .join_write_tit span{font-size:11px;} .base_info_tit{font-size:14px;} .base_info_txt{font-size:12px;} .base_info_box dl dt{font-size:14px;} .base_info_box dl dt.required:after{font-size:14px;} #wrap .join .input_title{font-size:14px;} #wrap .join .input_title.required:after{font-size:14px;} #wrap .input_wrap .input_content input{font-size:13px;} #wrap .join_branch dl dd select{font-size:13px;} #wrap .join_branch dl dd input{font-size:14px;} #wrap .join_branch .branch_announce span{font-size:12px;} #wrap .member_cont .join_write_agree h3{font-size:16px;} #wrap .member_cont .join_write_agree h3 span{font-size:12px;margin-top:5px;} #wrap .join_agreement_cont #allAgree + label{font-size:15px;} #wrap .join_agreement_cont .join_agreement_box.js_terms_view .inp_chk.inp_custom span{font-size:11px;} #wrap .member_guide_txt p{font-size:13px;} } @media only screen and (max-width:325px){ #wrap .input_wrap.mem_birthday #mem_birthday{width:65.6%;} } /*─────────────────────────────────────────────────────────── 주문 order ───────────────────────────────────────────────────────────*/ /*─────────────────────────────────────────────────────────── 주문서 | 장바구니 order/cart ───────────────────────────────────────────────────────────*/ /*공통*/ .cart_bnr{width:100%;box-sizing:border-box;padding:0 15px;margin-top:20px;} .cart_bnr a{display: block;width:100%;height:100%;} .cart_bnr a img{width:100%;} #wrap #popupOption .ly_wrap{background:transparent;} #wrap .cart .cart_content_box{background:#fff;width:100%;box-sizing:border-box;padding:0 15px;margin:30px 0 40px;} /*전체선택*/ #wrap .cart .cart_content_box .allchk{padding:0;margin:0;} #wrap .cart .cart_content_box .allchk:after{clear:both;content:"";display:block;} #wrap .cart .cart_content_box .allchk .inp_chk.inp_custom {padding-top:5px;} #wrap .cart .cart_content_box .allchk .inp_chk.inp_custom label{font-size:17px;color:#333;font-weight:400;line-height:21px;} #wrap .cart .cart_content_box .allchk .inp_chk.inp_custom label strong{font-weight:400;color:#275b4e;} #wrap .cart .cart_content_box .allchk .prd_del{display: inline-block;float: right;vertical-align:top;} #wrap .cart .cart_content_box .allchk .btn_self_go.btn_go{width:100px;height:35px;line-height:33px;font-size:14px;color:#444;font-weight:400;} /*일반구매*/ #wrap .cart .cart_content_box .my_goods{padding:0;box-sizing:border-box;border-top:1px solid #333;margin-top:15px;} #wrap .cart .cart_content_box .my_goods > li{margin:0;padding:15px 0;border:1px solid #ccc;border-width:0 0 1px 0;box-sizing:border-box;} #wrap .cart .cart_content_box .my_goods li .btn_list{display: none;} #wrap .cart .cart_content_box .my_goods li .select_del_box{top:5px;right:2px;} #wrap .cart_onedel_btn{width:18px;height:18px;position: relative;box-sizing:border-box;background:none;padding:0;} #wrap .cart_onedel_btn:before, #wrap .cart_onedel_btn:after{width:100%;height:1px;content:"";background:#aaa;position: absolute;top:50%;left:0;} #wrap .cart_onedel_btn:before{transform:rotate(45deg);} #wrap .cart_onedel_btn:after{transform:rotate(-45deg);} #wrap .cart .cart_content_box .my_goods li .mid_box .left_box{padding:0;} #wrap .cart .cart_content_box .my_goods li .mid_box .left_box .inp_chk.inp_custom label{font-size:0;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box{padding:0 0 0 10px;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info{padding:0;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itemhead .thmb_box .option_btn{margin-top:10px;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itemhead .thmb_box .option_btn button{width:100%;height:32px;line-height:30px;border:1px solid #bbb;font-size:13px;color:#333;font-weight:400;padding:0;letter-spacing:-0.05em;border-radius:0;box-sizing:border-box;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody{padding:0 0 0 20px;vertical-align: top;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p{font-size:14px;color:#777;font-weight:300;letter-spacing:-1.4px;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.name{font-size:16px;color:#333;font-weight:400;letter-spacing:-0.05em;line-height:20px;padding:0 0 7px 0;max-width:88%;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .prc{font-size:17px;color:#222;font-weight:400;letter-spacing:-0.68px;font-family:'Roboto', 'Noto Sans KR';padding:7px 0 0 0;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.prd_cnt{color:#666;padding-top:9px;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody p.prd_cnt + .delivery {padding-top:5px;} #wrap .cart .cart_content_box .my_goods li .mid_box .right_box .info .itembody .delivery{font-size:14px;color:#888;font-weight:300;} #wrap .cart_content_box .btn_left_box .shop_go_link{font-size:14px;color:#333;display:inline-block;font-weight:400;line-height:25px;box-sizing:border-box;background:url('../img/da_image/btn_go.png')no-repeat left center;padding-left:30px;border: none;letter-spacing: -0.75px;margin-top:15px;} /* .pay_box{padding-left:15px;} */ .pay_box .npay_button_box{background:transparent !important;} .pay_box img{width:94%;} #wrap .cart_content_box .price_info_box .btn_order_box{padding-top:10px;} /*no data*/ #wrap .no_data{background:none;} #wrap .cart .no_data{background:none;padding:30px 0 60px;} #wrap .cart .no_data:before{width:50px;height:50px;line-height:48px;font-size:29px;} #wrap .cart .no_data p{font-size:15px;color:#888;font-weight:400;} #wrap .cart .no_data p strong{font-weight:400;} /*정기배송*/ .cart_info_box{width:100%;box-sizing:border-box;border-top:12px solid #eee;padding:36px 0 40px;} .cart_info_box .cart_box{width:100%;box-sizing:border-box;padding:0 15px;} .cart_info_box h3{font-size:20px;color:#333;font-weight:normal;letter-spacing:-1.2px;font-family:'Jeju Myeongjo', serif;} .cart_info_box h3 span{display: block;font-size:14px;color:#777;font-weight:400;font-family:'Noto Sans KR';margin-top:5px;} /*정기배송 상세정보*/ .cart_regular_box{width:100%;font-size:0;box-sizing:border-box;position: relative;margin-top:16px;} .cart_regular_box > li{width:100%;box-sizing:border-box;border:1px solid #ccc;padding:16px 15px 15px 15px;cursor:pointer;} .cart_regular_box > li + li{margin-top:10px;} .cart_regular_box > li .regular_tit{background:url('../img/da_image/regular_arr_down.png')no-repeat right center;background-size:auto 6px;} .cart_regular_box > li .regular_tit:after{clear:both;content:"";display: block;} .cart_regular_box > li .regular_tit span{display:inline-block;vertical-align: top;} .cart_regular_box > li .regular_tit .cnt{font-size:14px;color:#333;font-weight:400;font-family:'Noto Sans KR';height:23px;line-height:21px;box-sizing:border-box;border-radius:11.5px;border:1px solid #333;padding:0 10px;} .cart_regular_box > li .regular_tit .date{margin-left:8px;font-size:16px;color:#333;font-weight:400;letter-spacing:-1.28px;font-family:'Noto Sans KR';line-height:21px;} .cart_regular_box > li .regular_tit .price{float: right;font-size:18px;color:#222;font-weight:500;letter-spacing:-0.72px;font-family:'Roboto', 'Noto Sans KR';padding-right:25px;line-height:21px;} .cart_regular_box > li .regular_tit .price em{font-size:13px;color:inherit;font-weight:inherit;letter-spacing:-0.52px;} .cart_regular_box > li .regular_content{width:100%;box-sizing:border-box;position: relative;border-top:1px solid #ddd;margin-top:15px;padding-top:10px;display: none;} .cart_regular_box > li .regular_content dl{width:100%;box-sizing:border-box;} .cart_regular_box > li .regular_content dl:after{clear:both;content:"";display: block;} .cart_regular_box > li .regular_content dl dt, .cart_regular_box > li .regular_content dl dd{display: inline-block;vertical-align: top;box-sizing:border-box;line-height:27px;} .cart_regular_box > li .regular_content dl dt{font-size:15px;color:#777;font-weight:400;letter-spacing:-1.2px;} .cart_regular_box > li .regular_content dl dd{float: right;} .cart_regular_box > li .regular_content dl dd.pay_date{font-size:15px;color:#666;font-weight:400;font-family:'Noto Sans KR';} .cart_regular_box > li .regular_content dl dd.pay_date strong{color:#275b4e;font-weight:400;} .cart_regular_box > li .regular_content dl dd.pay_price span{font-size:16px;color:#333;font-weight:400;letter-spacing:-0.64px;font-family:'Roboto', 'Noto Sans KR';} .cart_regular_box > li .regular_content dl dd.pay_price em{font-size:14px;color:inherit;font-weight:inherit;} /*on*/ .cart_regular_box > li.on{padding:16px 15px 6px 15px;border:1px solid #333;} .cart_regular_box > li.on .regular_tit{background:url('../img/da_image/regular_arr_up.png')no-repeat right center;background-size:auto 6px;} /*자동결제 정보등록*/ #wrap .order .order_info_box.pay_mehtod.pay_info_reg h2{padding-bottom:0;} .pay_info_reg.cart_info_box h3{margin-bottom:10px;} /* 간편결제 카드등록 - 주문서작성, 마이페이지 간편결제 카드 */ .reg_auto_cont{width:100%;box-sizing:border-box;border:1px solid #ccc;padding:20px;overflow:hidden;} .reg_auto_cont.reg_before{background:#f5f5f5;border:1px solid #f5f5f5;} .reg_auto_cont.reg_before .reg_auto_txt{text-align: center;} .reg_auto_cont.reg_before .reg_auto_txt p{font-size:15px;color:#333;font-weight:400;letter-spacing:-0.9px;line-height:21px;} .reg_auto_cont.reg_before .reg_auto_txt p span{color:#275b4e;font-weight:500;} .reg_auto_cont.reg_before .btn_self_now.btn_go{width:66.1%;margin-top:15px;} .reg_auto_cont.reg_card{width:calc(100% + 15px);border-right:none;} .reg_auto_cont .reg_card_box{overflow:visible;} #wrap ul.card_list {font-size:0;vertical-align:top;text-align:left;} #wrap .card_list_wrap ul.card_list {width:100%;height:auto;padding:30px;box-sizing:border-box;border:2px solid #eee;background:#fff;} #wrap ul.card_list:after {clear:both;content:"";display:block;} #wrap ul.card_list li.card_box {border-radius:10px;padding:0;margin:0 auto;display:inline-block;vertical-align:top;box-sizing:border-box;} #wrap ul.card_list li.card_box .inp_rdo.inp_custom {width:100%;height:160px;box-sizing:border-box;margin:0;position:relative;z-index:1;border-radius:10px;overflow:hidden;padding:0;} #wrap .card_box.on .inp_rdo.inp_custom {box-shadow: 0px 3px 24px 0 rgba(0, 0, 0, 0.35);-webkit-box-shadow: 0px 3px 24px 0 rgba(0, 0, 0, 0.35);-ms-box-shadow: 0px 3px 24px 0 rgba(0, 0, 0, 0.35);-moz-box-shadow: 0px 3px 24px 0 rgba(0, 0, 0, 0.35);} #wrap .card_box .inp_rdo.inp_custom input{display: none;} #wrap .card_box .inp_rdo.inp_custom label {width:100%;height:100%;z-index:2;position:absolute;box-sizing:border-box;} #wrap .card_box .inp_rdo.inp_custom label.check_s {padding-top:99px;padding-left:20px;border-color:#ccc;background-color:#fff;background-image:url('../img/da_image/input_card_check.png');background-repeat:no-repeat !important;background-position:92.4% 12.5% !important;background-size:25px auto !important;border-width:1px;border-style:solid;box-sizing:border-box;border-radius:10px;} #wrap .card_box .inp_rdo.inp_custom label .cardnm, #wrap .card_box .inp_rdo.inp_custom label .carddate {line-height:1em;color:#fff;display:block;vertical-align:top;margin:0;padding:0;text-align:left;} #wrap .card_box .inp_rdo.inp_custom label .cardnm {font-size:16px;font-weight:500;letter-spacing:-0.8px;margin-bottom:10px;color:#333;} #wrap .card_box .inp_rdo.inp_custom label .carddate {font-size:15px;font-weight:300;letter-spacing:-0.75px;color: rgba(102, 102, 102, 0.8);} #wrap .card_box .inp_rdo.inp_custom input:checked + label.check_s, #wrap .card_box .inp_rdo.inp_custom label.check_s:hover, #wrap .card_box .inp_rdo.inp_custom label.check_s.on {background-color:#275b4e;background-image:url('../img/da_image/input_card_check_on.png');border-width:2px;border-color:#275b4e;} #wrap .card_box .inp_rdo.inp_custom input:checked + label.check_s .cardnm, #wrap .card_box .inp_rdo.inp_custom input:checked + label.check_s .carddate, #wrap .card_box .inp_rdo.inp_custom label.check_s:hover .cardnm, #wrap .card_box .inp_rdo.inp_custom label.check_s:hover .carddate, #wrap .card_box .inp_rdo.inp_custom label.check_s.on .cardnm, #wrap .card_box .inp_rdo.inp_custom label.check_s.on .carddate {color:#fff;} #wrap .card_box.card_plus {border:1px solid #ddd;background:#f5f5f5;text-align:center;} #wrap .card_box.card_plus button {font-size:16px;line-height:1;font-weight:400;color:#333;padding:106px 0 38px;display:block;width:100%;height:100%;background:url('../img/da_image/icon_plus.png') no-repeat center top 38px;letter-spacing:-0.8px;border:none;} #wrap .card_box.card_plus button:before {content:'';display:block;position:absolute;} .pay_info_reg .reg_caution{margin-top:20px;} .pay_info_reg .reg_caution .caution_tit{font-size:16px;color:#942020;font-weight:400;letter-spacing:-0.54px;box-sizing:border-box;padding-left:25px;background:url('../img/da_image/icon_caution.png')no-repeat left center;margin-bottom:7px;} .pay_info_reg .reg_caution ul li{font-size:14px;color:#777;font-weight:400;line-height:20px;letter-spacing:-0.48px;position: relative;padding-left:9px;} .pay_info_reg .reg_caution ul li + li{margin-top:7px;} .pay_info_reg .reg_caution ul li:before{width:3px;height:3px;content:"";background:#999;box-sizing:border-box;border-radius:100%;position: absolute;top:10px;left:0;} @media only screen and (max-width:340px){ /*정기배송정보*/ .cart_regular_box > li .regular_tit .cnt{font-size:12px;} .cart_regular_box > li .regular_tit .date{font-size:15px;} .cart_regular_box > li .regular_tit .price{font-size:16px;padding-right:18px;} .cart_regular_box > li .regular_tit .price em{font-size:12px;} /*자동결제정보등록*/ .reg_auto_cont.reg_before .reg_auto_txt p{font-size:13px;} .reg_auto_cont.reg_before .reg_auto_txt .btn_self_now.btn_go{font-size:14px;height:45px;line-height:43px;} } /*─────────────────────────────────────────────────────────── 주문서 | 구매하기 order/order ───────────────────────────────────────────────────────────*/ /*공통*/ #wrap .order{margin:0;} #wrap .order .order_info_box{width:100%;box-sizing:border-box;padding:35px 15px 40px 15px;border-bottom:12px solid #eee;} .order_info_box .order_tit{background:#fff;border-top:none;padding:0;border-bottom:1px solid #333;font-size:20px;color:#333;font-weight:normal;font-family:'Jeju Myeongjo', serif;box-sizing:border-box;line-height:initial;padding-bottom:10px;margin-bottom:12.5px;} .order_info_box .order_tit:after{clear:both;content:"";display: block;} .order_info_box .order_tit b{font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;} /*상품정보*/ #wrap .order .order_info_box.prd_info{padding-top:24px;} #wrap .order .order_info_box.prd_info .order_tit{font-size:17px;color:#555;font-weight:400;font-family:'Noto Sans KR';letter-spacing:-0.03em;margin-bottom:0;} #wrap .order .order_info_box.prd_info .order_tit strong{color:#275b4e;font-weight:400;} #wrap .order .pay .my_goods li .info, .regular_order_info {padding:15px 0 15px;border-bottom:1px solid #ddd;display: block;} #wrap .order .pay .my_goods li .info > a, .regular_order_info > a {margin:0;width:100%;} #wrap .order .pay .my_goods li .info > a > div, .regular_order_info > a > div {display:table;table-layout:fixed;width:100%;margin:0;border-collapse:collapse;} #wrap .order .pay .my_goods li .info .itemhead, .regular_order_info .itemhead, #wrap .order .pay .my_goods li .info .itembody, .regular_order_info .itembody {padding:0;margin:0;border-collapse:collapse;display:table-cell;vertical-align:middle;box-sizing:border-box;} #wrap .order .pay .my_goods li .info .itemhead, .regular_order_info .itemhead {width:90px;} #wrap .order .pay .my_goods li .info .itemhead .thmb, .regular_order_info .itemhead .thmb {vertical-align:middle;} #wrap .order .pay .my_goods li .info .itemhead .thmb img , .regular_order_info .itemhead .thmb img {width:100%;height:auto;vertical-align:middle;} #wrap .order .pay .my_goods li .info .itembody, .regular_order_info .itembody {padding:0 0 0 20px;width:auto;} #wrap .order .pay .my_goods li .info .itembody p, .regular_order_info .itembody p {font-size:14px;color:#777;font-weight:300;letter-spacing:-1.4px;} #wrap .order .pay .my_goods li .info .itembody p.name, .regular_order_info .itembody p.name {font-size:16px;color:#333;font-weight:400;letter-spacing:-0.05em;line-height:20px;padding:0 0 7px 0;max-width:88%;} #wrap .order .pay .my_goods li .info .itembody .prc, .regular_order_info .itembody .prc {font-size:17px;color:#222;font-weight:400;letter-spacing:-0.68px;font-family:'Roboto', 'Noto Sans KR';padding:7px 0 0 0;display: inline-block;} #wrap .order .pay .my_goods li .info .itembody p.prd_cnt, .regular_order_info .itembody p.prd_cnt {color:#666;padding-top:9px;} #wrap .order .pay .my_goods li .info .itembody .delivery, .regular_order_info .itembody .delivery {font-size:14px;color:#888;font-weight:400;display: inline-block;padding-top:5px;} #wrap .order .order_info_box .btn_left_box .shop_go_link{font-size:14px;color:#333;display:inline-block;font-weight:400;line-height:25px;box-sizing:border-box;background:url('../img/da_image/btn_go.png')no-repeat left center;padding-left:30px;border: none;letter-spacing: -0.75px;margin-top:15px;} /*약관동의*/ #wrap .order_info_box.order_agree{} #wrap .order_info_box.order_agree input{vertical-align: top;} #wrap .order_info_box.order_agree label{display: inline-block;width:90%;} #wrap .order .order_info_box.order_agree .order_box{padding:0;} #wrap .order_info_box.order_agree .my_tit label{font-size:16px;color:#333;font-weight:400;letter-spacing:-1.6px;line-height:23px;font-family:'Noto Sans KR';} #wrap .order .order_box .guest_info{box-sizing:border-box;padding-left:15px;margin-top:15px;} #wrap .order .order_box .guest_info .inp_chk{border:none;padding:0;display: block;width:100%;position: relative;} #wrap .order .order_box .guest_info label{font-size:14px;color:#555;font-weight:400;letter-spacing:-1px;line-height:25px;} #wrap .order .order_box .guest_info .ag_arr{display: inline-block;width:25px;height:25px;background:url('../img/da_image/regular_arr_down.png')no-repeat center;background-size:auto 6px;position: absolute;top:0;right:0;cursor:pointer;} #wrap .order .order_box .guest_info .ag_arr.on{background:url('../img/da_image/regular_arr_up.png')no-repeat center;background-size:auto 6px;} #wrap .order .order_box .guest_info label strong{color:#942020;font-weight:400;} #wrap .order .order_box .guest_info label strong.c_choice{color:#275b4e;} #wrap .order .order_box .guest_info .g_content{background:#f5f5f5;height:95px;padding:15px;font-size:12px;color:#666;font-weight:400;letter-spacing:18px;letter-spacing:-1.2px;margin:10px 0 0 0;display:none;} /*주문자정보*/ #wrap .order_box.order_info_box{} #wrap .order_info_box .table_box table{border-top:none;} #wrap .order_info_box .table_box table th{background:none;font-size:15px;color:#222;font-weight:400;letter-spacing:-1.5px;padding:7.5px 0;border:none;vertical-align:top;width:90px;line-height:45px;} #wrap .order_info_box .table_box table th.required{background:none;} #wrap .order_info_box .table_box table th.required:after{content:"*";font-size:15px;color:#942020;font-weight:400;display:inline-block;vertical-align:middle;margin-left:3px;} #wrap .order_info_box .table_box table td{border:none;padding:7.5px 0 7.5px 10px;font-size:0;vertical-align: top;} #wrap .order_info_box .table_box table tr:last-child th, #wrap .order_info_box .table_box table tr:last-child td{padding-bottom:0;} #wrap .order_info_box .table_box table td input{width:100%;height:45px;line-height:45px;box-sizing:border-box;background:#f5f5f5;border:1px solid #f5f5f5;font-size:15px;color:#333;font-weight:400;letter-spacing:-1.5px;padding-left:15px;} #wrap .order_info_box .table_box table td input:focus{background:#fff;border:1px solid #333;} #wrap .order_info_box .table_box table td select{height:45px;padding-left:15px;font-size:15px;color:#333;font-weight:400;letter-spacing:-1.5px;background-position:86% center;} /*휴대폰번호, 전화번호*/ .order_number{width:27.8% !important;} .order_number + span{width:10px;height:45px;display:inline-block;position: relative;margin:0 5px;vertical-align:top;} .order_number + span:before{width:100%;height:1px;content:"";background:#888;position: absolute;left:0;top:calc(50% + 1px);} #wrap .order_box.order_info_box .table_box table td .certify_phone_wrap{width:100%;position: relative;} #wrap .order_box.order_info_box .table_box table td .certify_phone_wrap .btn_self_go.btn_go{font-size:15px;font-weight:400;} #wrap .order_box.order_info_box .table_box table td .certify_alert{width:157px;height:61px;background:url('../img/da_image/certify_alert.png')no-repeat center;position: absolute;top:-45px;right:-6px;z-index:1;transition:all 0.3s;background-size:auto 100%;} #wrap .order_box.order_info_box .table_box table td .certify_alert p{width:100%;height:100%;box-sizing:border-box;position:relative;} #wrap .order_box.order_info_box .table_box table td .certify_alert p span{font-size:12px;color:#666;font-weight:400;letter-spacing:-0.7px;line-height:16px;position:absolute;top: 50%;left: 50%;transform: translate(-44%, -61%);display: inline-block;width:100%;} #wrap .order_box.order_info_box .table_box table td .cell_bx .cell{width:54.3%;} /*배송정보*/ #wrap .order_info_box.shipping_info_area .table_box table tr.check_shipping th, #wrap .order_info_box.shipping_info_area .table_box table tr.check_shipping td{line-height:17px;padding-top:12.5px;padding-bottom:12.5px;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom{padding:0;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom + .inp_rdo.inp_custom{margin-left:15px;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom input{display: inline-block;width: 17px;height:17px;margin: 0 -1px 0 0;vertical-align: middle;background: url('../img/da_image/icon_rad_chk.png') no-repeat center;background-size: 17px;border: none;padding:0;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom input:checked {background:url('../img/da_image/icon_rad_chk_on.png') no-repeat center;background-size:17px;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom label {margin:0;font-size:15px;line-height:17px;vertical-align:top;} #wrap .order .order_box .zipcode_box .zipcode_top{padding-right: calc(43.7% + 8px);} #wrap .order .order_box .zipcode_box .zipcode_top .zipcode_btn_box{width:43.7%;} #wrap .order .order_box .zipcode_box .zipcode_top .zipcode_btn_box button{font-size:15px;font-weight:400;} #wrap .order .order_box .zipcode_box .zipcode_top .zipcode_num {width:100%;} #wrap .order .order_box .zipcode_box .zipcode_top .zipcode_num input{margin:0;} #wrap .order .order_box .zipcode_box input{margin:10px 0 0 0;} /*회원일때*/ #wrap .order_info_box.shipping_info_area .shipping_same{float: right;font-size:13px;font-family:'Noto Sans KR';} #wrap .order_info_box.shipping_info_area .table_box table tr.mem_shipping th, #wrap .order_info_box.shipping_info_area .table_box table tr.mem_shipping td{line-height:17px;padding-top:12.5px;padding-bottom:0;} #wrap .order .order_box .tab_content .tab_box{padding:0;} #wrap .order .order_box .delivery_box .tab_menu{padding:0;} #wrap .order .order_box .delivery_box .tab_menu li{display: inline-block;border:none;width:auto;} #wrap .order .order_box .delivery_box .tab_menu li a{font-size:15px;color:#666;font-weight:400;letter-spacing:-1.5px;background: url('../img/da_image/icon_rad_chk.png') no-repeat left top;background-size:17px;padding:0 20px 17px 23px;} #wrap .order .order_box .delivery_box .tab_menu ul li.active{background:none;} #wrap .order .order_box .delivery_box .tab_menu ul li.active a{color:#333;background: url('../img/da_image/icon_rad_chk_on.png') no-repeat left top;background-size:17px;} /*배송지목록*/ #wrap .order_info_box.shipping_info_area table tr.delivery_add_box{} #wrap .order_info_box.shipping_info_area table tr.delivery_add_box td{padding:0;} #wrap .order_info_box.shipping_info_area table tr.delivery_add_box .delivery_list_add{width:calc(100% + 10px);padding:0;font-size:0;margin-left:-5px;} #wrap .order_info_box.shipping_info_area table tr.delivery_add_box .delivery_list_add li{box-sizing:border-box;margin:0 5px 10px 5px;vertical-align: top;width:calc(25% - 10px);} #wrap .order_info_box.shipping_info_area table tr.delivery_add_box .delivery_list_add li a{height:40px;line-height:40px;padding:0;font-size:15px;font-weight:400;} #wrap .order_info_box.shipping_info_area table tr.delivery_add_box .delivery_list_add li a.on{background:#275b4e;border:1px solid #275b4e;} #wrap .order_info_box.shipping_info_area .table_box table .mem_info_add th, #wrap .order_info_box.shipping_info_area .table_box table .mem_info_add td{padding-top:12.5px;} #wrap .order_info_box.shipping_info_area .table_box table .mem_info_add th{line-height:25px;} #wrap .order .order_box .tab_content .member_chk_box{padding:0;} #wrap .order .order_box .tab_content .member_chk_box + .member_chk_box{margin-top:15px;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom{font-size:15px;color:#666;font-weight:400;line-height:21px;letter-spacing:-1px;width:100%;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom.add_my_shipping label{color:#942020;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom small{font-size:inherit;display:block;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom input{display:inline-block;width: 25px;height: 25px;margin: 0 5px 0 0;vertical-align:top;background: url('../img/da_image/input_check_off.png') no-repeat center;background-size: 25px;border: none;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom input:checked {background:url('../img/da_image/input_check_on.png') no-repeat center; background-size:25px;} #wrap .order_info_box .table_box table td .inp_chk.inp_custom label{display: inline-block;width:80%;} /*마이스토어*/ #wrap .order .order_info_box.store_info{} #wrap .order .order_info_box.store_info .store_tit span{display: inline-block;font-size:16px;color:#333;font-weight:400;box-sizing:border-box;background:url('../img/da_image/icon_caution.png')no-repeat left center;padding-left:26px;background-size:auto 100%;} #wrap .order .order_info_box.store_info .store_tit span em{font-weight:500;text-decoration:underline;} #wrap .order .order_info_box.store_info .store_tit h2{text-align:center;width:calc(100% + 30px);height:55px;line-height:53px;margin-left:-15px;box-sizing:border-box;background:#275b4e;box-shadow:8px 4.1px 28px 0 rgba(0, 0, 0, 0.25);font-size:20px;color:#fff;font-weight:500;letter-spacing:-1.2px;margin-top:20px;} #wrap .order .order_info_box.store_info .store_info_box{width:100%;box-sizing:border-box;margin-top:15px;padding:20px 10px 20px 15px;border:1px solid #ddd;} #wrap .order .order_info_box.store_info .store_info_box .reg_code{} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl{display:table;width:100%;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dt, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd{display:table-cell;box-sizing:border-box;vertical-align: middle;padding-bottom:15px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dt{font-size:15px;color:#222;font-weight:400;letter-spacing:-1.5px;line-height:21px;width:65px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd{font-size:0;padding-left:22px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select{width:71.4%;height:50px;box-sizing:border-box;background-color:#f5f5f5;border:1px solid #f5f5f5;font-size:13px;color:#333;font-weight:400;letter-spacing:-1.5px;padding-left:15px;text-align: center;padding:0;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select{padding-left:5px;padding-right:15px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select option{background:#fff;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input:focus, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select:focus{background-color:#fff;border:1px solid #000;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd button, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input + .btn_self_go.btn_go, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select + .btn_self_go.btn_go {width:60px;font-size:15px;color:#333;font-weight:400;margin-left:5px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt{width:100%;box-sizing:border-box;border-top:1px dashed #ddd;margin-top:8px;padding-top:18px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt .store_tit{font-size:16px;color:#333;font-weight:400;letter-spacing:-0.96px;line-height:23px;box-sizing:border-box;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt .store_option{color:#942020;background:url('../img/da_image/icon_caution.png')no-repeat left center;padding-left:26px;margin-top:22px;background-size:auto 100%;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul{margin-top:10px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul li{font-size:14px;color:#777;font-weight:400;letter-spacing:-0.6px;line-height:20px;position:relative;padding-left:10px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul li:before{width:3px;height:3px;content:"";background:#999;position: absolute;top:10px;left:0;box-sizing:border-box;border-radius:100%;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul li + li{margin-top:10px;} #wrap .order .order_info_box.store_info .store_info_box .store_caution{font-size:13px;color:#999;font-weight:400;letter-spacing:-0.78px;line-height:19px;font-family:'Noto Sans KR';margin-top:8px;} /*결제정보*/ #wrap .order .order_info_box.payment_info{} #wrap .order .order_info_box.payment_info .btn_apply_coupon{font-size:15px;font-weight:400;} #wrap .order .order_info_box.payment_info .use_deposit th, #wrap .order .order_info_box.payment_info .use_deposit td{padding-bottom:20px;border-bottom:1px dotted #ddd;} #wrap .order .order_info_box.payment_info .use_deposit .money_right .point_view span{display: inline-block;} #wrap .order .order_info_box.payment_info .money_left input{width:90%;} #wrap .order .order_info_box.payment_info .money_left span{display: inline-block;font-size:15px;color:#333;font-weight:400;line-height:-1.5px;line-height:45px;margin-left:10px;} #wrap .order .order_info_box.payment_info .money_right{margin-top:10px;} #wrap .order .order_info_box.payment_info .money_right label{font-size:15px;color:#555;font-weight:400;font-family:'Noto Sans KR';letter-spacing:-1.5px;line-height:21px;} #wrap .order .order_info_box.payment_info .money_right label p, #wrap .order .order_info_box.payment_info .money_right .point_txt{color:#942020;font-size:15px;font-weight:400;font-family: 'Noto Sans KR';letter-spacing: -1.5px;line-height: 21px;} #wrap .order .order_info_box.payment_info .money_right .point_txt{margin:-8px 0 11px 29px;line-height:21px;} #wrap .order .order_info_box.payment_info .money_right .point_view .point_txt span{font-size:inherit;color:inherit;font-weight:inherit;} #wrap .order .order_info_box.payment_info .money_right .point_view span{font-size:13px;color:#999;font-weight:400;letter-spacing:-0.78px;line-height:18px;font-family:'Noto Sans KR';display: block;margin-top:9px;} #wrap .order .order_info_box.payment_info .money_right .point_view p + p{font-size: 13px;color: #999;font-weight: 400;letter-spacing: -0.78px;line-height: 18px;font-family: 'Noto Sans KR';display: block;margin-top:3px;} #wrap .order .order_info_box.payment_info .pay_benefits{} #wrap .order .order_info_box.payment_info .pay_benefits p{font-size:14px;color:#555;font-weight:300;line-height:23px;font-family:'Jomolhari', 'Noto Sans KR', serif;} #wrap .order .order_info_box.payment_info .pay_benefits p strong{color:#333;font-weight:400;} #wrap .order .order_info_box.payment_info .pay_benefits p strong b{font-weight:inherit;} #wrap .order .order_info_box.payment_info .pay_benefits p span{color:#777;font-weight:300;letter-spacing:-0.48px;font-family:'Noto Sans KR';display: inline-block;} #wrap .order .order_info_box.payment_info .dc_benefit th, #wrap .order .order_info_box.payment_info .dc_benefit td{padding:20px 0 0 0;} #wrap .order .order_info_box.payment_info .dc_benefit th{line-height:23px;} #wrap .order .order_info_box.payment_info table th{line-height:25px;} #wrap .order .order_info_box.payment_info table td{font-size:14px;color:#333;font-weight:400;padding-left:0;} #wrap .order .order_info_box.payment_info table td #totalDeliveryCharge{font-size:18px;color:#333;font-weight:normal;font-family:'Jomolhari', serif;line-height:23px;} #wrap .order .order_info_box.payment_info table td .total{font-size:20px;color:#1b253c;font-weight:normal;font-family:'Jomolhari', 'Noto Sans KR', serif;line-height:23px;} /*결제하기*/ #wrap .order .price_info_box .re_confirm{padding:15px 0 0 0;} #wrap .order .price_info_box .re_confirm input{vertical-align: top;} #wrap .order .price_info_box .re_confirm label{display: inline-block;width:90%;font-size:15px;color:#555;font-weight:400;letter-spacing:-1px;font-family:'Noto Sans KR';line-height:23px;} #wrap .order .price_info_box .re_confirm label strong{color:#942020;font-weight:400;} /*결제수단 선택/결제*/ #wrap .order .order_info_box.pay_mehtod{padding-bottom:0;border:none;padding-top:0;margin-top:40px;} #wrap .order .order_info_box.pay_mehtod h2{background: #fff;border-top: none;padding: 0;font-size: 20px;color: #333;font-weight: normal;font-family: 'Jeju Myeongjo', serif;box-sizing: border-box;line-height: initial;margin-bottom:15px;padding-bottom:15px;} #wrap .order .order_tit .mth_txt{display:block;font-size:13px;color:#942020;font-weight:400;letter-spacing:-0.78px;line-height:19px;word-break:keep-all;font-family:'Noto Sans KR';margin-top:8px;} #wrap .order .order_tit > span img{vertical-align: top;} #wrap .order .pay_mehtod .pay_mth_box{width:100%;box-sizing:border-box;display:table;border-top:1px solid #333;padding-top:10px;} #wrap .order .pay_mehtod .pay_mth_box dt, #wrap .order .pay_mehtod .pay_mth_box dd{display:table-cell;vertical-align:top;box-sizing:border-box;} #wrap .order .pay_mehtod .pay_mth_box dt{font-size:15px;color:#222;font-weight:400;letter-spacing:-1px;width:78px;line-height:20px;padding:0 0 5px;} #wrap .order .pay_mehtod .pay_mth_box dd{padding-left:20px;} #wrap .order .order_box .pay_mth{width:calc(100% + 7.5px);box-sizing:border-box;padding:0;} #wrap .order .order_box .pay_mth li{float:none;width:auto;display:inline-block;margin:0 7.5px 15px 7.5px;} #wrap .order .order_box .normal_pay_mth > li {margin:0 0 15px;width:44%;} #wrap .order .order_box .pay_mth li > .inp_rdo{padding:0;font-size:15px;color:#666;font-weight:400;} #wrap .order .order_box .pay_mth li > .inp_rdo label{color:inherit;} #wrap .order .order_box .pay_mth li > .inp_rdo input:checked + label{color:#333;} #wrap .order .how_to_pay .settlekind_box{width:100%;box-sizing:border-box;padding:0 15px 0 15px;} #wrap .order .how_to_pay .settlekind_box .pay_mth_box{width:100%;box-sizing:border-box;display:table;padding-top:20px;border-top:1px solid #ddd;} #wrap .order .how_to_pay .settlekind_box .pay_mth_box dt, #wrap .order .how_to_pay .settlekind_box .pay_mth_box dd{display:table-cell;vertical-align:top;box-sizing:border-box;} #wrap .order .how_to_pay .settlekind_box .pay_mth_box dt{font-size:15px;color:#222;font-weight:400;letter-spacing:-1px;width:78px;border:none;padding:0;line-height:20px;} #wrap .order .how_to_pay .settlekind_box .pay_mth_box dd{padding-left:20px;} #wrap .order .how_to_pay .settlekind_box .order_tit{background:none;} #wrap .order .order_box .pay_notice{padding:0;font-size:13px;color:#888;font-weight:300;letter-spacing:-1.3px;line-height:19px;} #wrap .order .how_to_pay .settlekind_box table{border:none;} #wrap .order .how_to_pay .settlekind_box table tbody th{padding:0;background:none;font-size:15px;color:#222;font-weight:400;letter-spacing:-1px;width:78px;line-height:20px;border:none;} #wrap .order .how_to_pay .settlekind_box table tbody td{border:none;padding:7.5px 0 7.5px 20px;} #wrap .order .how_to_pay .settlekind_box table tbody td input{width:100%;height:45px;line-height:45px;background:#f5f5f5;border:1px solid #f5f5f5;font-size: 15px;color: #333;font-weight: 400;letter-spacing: -1.5px;padding-left: 15px;} #wrap .order .how_to_pay .settlekind_box table tbody td input:focus{background:#fff;border:1px solid #333;} #wrap .order .how_to_pay .settlekind_box table tbody td select{height:45px;line-height:45px;font-size: 15px;color: #333;font-weight: 400;letter-spacing: -1.5px;padding-left: 15px;width:100%;box-sizing:border-box;} /*페이코*/ #wrap .order #settlekind_payco{margin-top:10px;} #wrap .order #settlekind_payco .order_tit{border:none;background:#fff;margin:0;padding:0;} #wrap .pay_mth_payco{padding-bottom:8px;} #wrap .order .how_to_pay #settlekind_fintech_payco .order_box{box-sizing:border-box;border-top:1px solid #ddd;} #wrap .order .how_to_pay #settlekind_fintech_payco .order_tit{display: inline-block;vertical-align: top;font-size: 15px;color: #222;font-weight: 400;letter-spacing: -1px;width: 78px;line-height: 20px;padding: 15px 0 5px;border:none;} #wrap .order .how_to_pay #settlekind_fintech_payco .payco_notice{display: inline-block;width:calc(100% - 100px);margin:15px 0;} #wrap .order .how_to_pay #cash_receipt_info{width:100%;box-sizing:border-box;padding:0 15px;} #wrap .order .how_to_pay #cash_receipt_info > .order_box{width:100%;border-top:1px dotted #bfbfbf;padding:15px 0 0 0;margin-top:5px;} #wrap .order .how_to_pay #cash_receipt_info table{border:none;} #wrap .order .how_to_pay #cash_receipt_info table tbody th{padding:0;background:none;font-size:15px;color:#222;font-weight:400;letter-spacing:-1px;width:78px;line-height:20px;border:none;} #wrap .order .how_to_pay #cash_receipt_info table tbody td{border:none;padding:7.5px 0 7.5px 20px;} #wrap .order .how_to_pay #cash_receipt_info table tbody td input{width:100%;height:45px;line-height:45px;background:#f5f5f5;border:1px solid #f5f5f5;font-size: 15px;color: #333;font-weight: 400;letter-spacing: -1.5px;padding-left: 15px;} #wrap .order .how_to_pay #cash_receipt_info table tbody td .order_number{width:26% !important;} #wrap .order .how_to_pay #cash_receipt_info table tbody td input:focus{background:#fff;border:1px solid #333;} #wrap .order .price_info_box{margin-top:32.5px;} /*쿠폰적용하기*/ #wrap .ly_coupon_apply_btn{background:#00293a;border:1px solid #00293a;font-size:14px;font-weight:400;} /*배송지 등록*/ #wrap .layer_shipping_address_regist .ly_head{height:45px;border-bottom:1px solid #ddd;line-height:45px;} #wrap .layer_shipping_address_regist .h_tit{font-size:16px;color:#333;font-weight:500;} #wrap .layer_shipping_address_regist .close_btn{top:8px;right:15px;} #wrap .layer_shipping_address_regist .lys_close_btn{background:none;width:20px;height:20px;position: relative;} #wrap .layer_shipping_address_regist .lys_close_btn:before, #wrap .layer_shipping_address_regist .lys_close_btn:after{width:100%;height:1px;content:"";background:#333;position: absolute;top:50%;left:0;} #wrap .layer_shipping_address_regist .lys_close_btn:before{transform:rotate(45deg);} #wrap .layer_shipping_address_regist .lys_close_btn:after{transform:rotate(-45deg);} #wrap .layer_shipping_address_regist .ly_content{padding:20px 15px 20px 15px;} #wrap .layer_shipping_address_regist table{box-sizing:border-box;border-bottom:1px solid #ddd;} #wrap .layer_shipping_address_regist table tbody tr th, #wrap .layer_shipping_address_regist table tbody tr td{padding:7.5px 0;box-sizing:border-box;} #wrap .layer_shipping_address_regist table tbody tr:nth-child(1) th, #wrap .layer_shipping_address_regist table tbody tr:nth-child(1) td{padding-top:0;} #wrap .layer_shipping_address_regist table tbody tr:last-child th, #wrap .layer_shipping_address_regist table tbody tr:last-child td{padding-bottom:10px;} #wrap .layer_shipping_address_regist table tbody tr th{font-size:15px;color:#222;font-weight:400;letter-spacing:-1.5px;line-height:45px;} #wrap .layer_shipping_address_regist table tbody tr th.required:after{content:"*";font-size:15px;color:#942020;font-weight:400;vertical-align:top;display: inline-block;padding-left:3px;} #wrap .layer_shipping_address_regist table tbody tr td div{font-size:0;} #wrap .layer_shipping_address_regist table tbody tr td input{height:45px;border:1px solid #f5f5f5;background:#f5f5f5;text-indent:0;font-size:15px;color:#333;font-weight:400;letter-spacing:-1.5px;padding-left:15px;} #wrap .layer_shipping_address_regist table tbody tr td input:focus{border:1px solid #333;background:#fff;} #wrap .layer_shipping_address_regist .zipcode_box .zipcode_top{padding-right:108px;} #wrap .layer_shipping_address_regist .zipcode_box .zipcode_top .zipcode_btn_box{width:104px;} #wrap .layer_shipping_address_regist .zipcode_box .zipcode_top .zipcode_btn_box .btn_self_go.btn_go {height:45px;line-height:43px;} #wrap .layer_shipping_address_regist .zipcode_btn{font-size:15px;font-weight:400;} #wrap .layer_shipping_address_regist .zipcode_box input{margin-bottom:10px;} #wrap .layer_shipping_address_regist .inp_chk_box{padding-top:20px;} #wrap .layer_shipping_address_regist .inp_chk_box label b{font-size:15px;color:#555;font-weight:400;letter-spacing:-1.5px;} #wrap .layer_shipping_address_regist .btn_box{padding-top:25px;} #wrap .layer_shipping_address_regist .btn_box li{vertical-align: top;} #wrap .layer_shipping_address_regist .btn_box li:nth-child(1){padding-right:5px;} #wrap .layer_shipping_address_regist .btn_box li:nth-child(2){padding-left:5px;} #wrap .layer_shipping_address_regist .btn_box li button{box-sizing:border-box;font-size:15px;letter-spacing:-1.5px;height:50px;line-height:48px;padding:0;font-weight:400;} #wrap .layer_shipping_address_regist .btn_box .address_save_btn{background:#275b4e;border:1px solid #275b4e;} @media only screen and (max-width:374px){ /*약관동의*/ #wrap .order_info_box.order_agree label{width:88%;} /*마이스토어*/ #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select{width:70%;} } @media only screen and (max-width:370px){ /*주문자정보*/ .order_number{width:26.8% !important;} /*결제정보*/ #wrap .order .order_info_box.payment_info .money_left input{width:89%;} } @media only screen and (max-width:360px){ /*약관동의*/ #wrap .order_info_box.order_agree .my_tit label{font-size:14px;} #wrap .order .order_box .guest_info label{font-size:13px;} /*마이스토어*/ #wrap .order .order_info_box.store_info .store_tit span{font-size:15px;} #wrap .order .order_info_box.store_info .store_tit h2{height:50px;line-height:48px;font-size:18px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dt{font-size:14px;width:60px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select{width:68%;} /*결제 수단 선택 / 결제*/ #wrap .order .how_to_pay #cash_receipt_info table tbody td .order_number{width:25% !important;} } @media only screen and (max-width:345px){ /*배송정보*/ #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom + .inp_rdo.inp_custom{margin-left:10px;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom label{font-size:14px;} #wrap .order .order_box .zipcode_box .zipcode_top{padding-right:100px;} /*마이스토어*/ #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd{padding-left:15px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd input, #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd select{width:65%;} /*결제정보*/ #wrap .order .order_info_box.payment_info .money_left input{width:88%;} } @media only screen and (max-width:340px){ /*약관동의*/ #wrap .order .order_box .guest_info{padding-left:5px;margin-top:10px;} #wrap .order .order_box .guest_info label{font-size:12px;} /*주문자정보*/ #wrap .order_info_box .table_box table th{font-size:14px;} #wrap .order_info_box .table_box table td input{font-size:14px;} #wrap .order_info_box .table_box table td select{font-size:14px;} .order_number{width:25.8% !important;} #wrap .order_box.order_info_box .table_box table td .cell_bx .cell{width:50%;} /*배송정보*/ #wrap .order_info_box .table_box table td .inp_chk.inp_custom{font-size:13px;} } @media only screen and (max-width:330px){ /*배송정보*/ #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom + .inp_rdo.inp_custom{margin-left:7px;} #wrap .order_info_box.shipping_info_area .table_box table td .inp_rdo.inp_custom label{font-size:13px;} #wrap .order .order_box .zipcode_box .zipcode_top{padding-right:90px;} #wrap .order .order_box .zipcode_box .zipcode_top .zipcode_btn_box button{font-size:13px;} /*마이스토어*/ #wrap .order .order_info_box.store_info .store_tit span{font-size:14px;} #wrap .order .order_info_box.store_info .store_tit h2{height:45px;line-height:43px;font-size:16px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dt{font-size:13px;line-height:16px;} #wrap .order .order_info_box.store_info .store_info_box .reg_code dl dd button{width:50px;font-size:14px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt .store_tit{font-size:14px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul li{font-size:12px;line-height:18px;} #wrap .order .order_info_box.store_info .store_info_box .mystore_txt ul li:before{top:8px;} #wrap .order .order_info_box.store_info .store_info_box .store_caution{font-size:11px;} /*결제정보*/ #wrap .order .order_info_box.payment_info .money_left input{width:87%;} #wrap .order .order_info_box.payment_info .money_right .point_view span br{display: none;} /*결제 수단 선택 / 결제*/ #wrap .order .how_to_pay #cash_receipt_info table tbody td .order_number{width:24% !important;} } /*정기배송*/ /*정기배송정보*/ #wrap .order .order_info_box.cart_delivery_regular h3{font-size:20px;color:#333;font-weight:normal;letter-spacing:-1.2px;font-family:'Jeju Myeongjo', serif;} #wrap .order .order_info_box.cart_delivery_regular h3 span{display: block;font-size:14px;color:#777;font-weight:400;font-family:'Noto Sans KR';margin-top:5px;} /*전체동의*/ #wrap .order .price_info_box .re_confirm.payment_final_check .inp_chk.inp_custom{display: block;} #wrap .order .price_info_box .re_confirm.payment_final_check .inp_chk.inp_custom + .inp_chk.inp_custom{padding:10px 0 0 10px;} #wrap .order .price_info_box .re_confirm.payment_final_check .btn_gray_small{height:25px;line-height:23px;font-size:14px;color:#444;margin-left:10px;vertical-align: top;} /*레이어*/ .order_regular_agree_layer{position:fixed;width:calc(100% - 50px);top:50%;left:25px;transform:translateY(-50%);background:#fff;opacity:0;height:0;overflow:hidden;z-index:10;display:block;} .order_regular_agree_layer.on{opacity:1;height:auto;overflow:inherit;} .order_regular_agree_layer .agree_layer_box{width:100%;box-sizing:border-box;border:1px solid #333;box-shadow:0 0 38px 0 rgba(0, 0, 0, 0.21);padding:20px 25px;} .order_regular_agree_layer .agree_layer_box .agree_tit{text-align:center;font-size:15px;color:#333;font-weight:500;letter-spacing:-1.5px;} .order_regular_agree_layer .agree_layer_box .agree_container{} .order_regular_agree_layer .agree_layer_box .agree_layer_swiper{max-height:165px;width:100%;box-sizing:border-box;padding:14px 15px;margin:15px 0 20px;background:#f5f5f5;} .order_regular_agree_layer .agree_layer_box .layer_textarea{font-size:12px;color:#666;font-weight:400;letter-spacing:-1.2px;line-height:18px;} .order_regular_agree_layer .agree_layer_box .layer_btn_box{text-align: center;} .order_regular_agree_layer .agree_layer_box .layer_btn_box button{width:120px;font-size:15px;margin:0 auto;} @media only screen and (max-width:370px){ #wrap .order .price_info_box .re_confirm label{width:85%;} #wrap .order .price_info_box .re_confirm label span{display: inline-block;width:70%;} #wrap .order .price_info_box .re_confirm label:after{clear:both;content:"";display: block;} #wrap .order .price_info_box .re_confirm.payment_final_check .btn_gray_small{float: right;vertical-align: top;margin-left:0;} } @media only screen and (max-width:335px){ #wrap .order .price_info_box .re_confirm label span{width:68%;} } /*선물하기*/ #wrap .order .gift_info_box table tbody tr:last-child th, #wrap .order .gift_info_box table tbody tr:last-child td{padding-bottom:25px;} #wrap .order .gift_info_box table tfoot tr > td{padding:25px 0 0 0;box-sizing:border-box;border-top:1px solid #ddd;} #wrap .order .gift_info_box .order_gift_content{width:100%;box-sizing:border-box;background:#f5f5f5;padding:30px 15px;} #wrap .order .gift_info_box .gift_txt{font-size:0;} #wrap .order .gift_info_box .gift_txt li{display:inline-block;box-sizing:border-box;width:calc(25% - 4px);font-size:15px;color:#555;font-weight:400;letter-spacing:-1.5px;text-align: center;height:35px;line-height:33px;background:#fff;border-radius:17.5px;position: relative;} #wrap .order .gift_info_box .gift_txt li + li{margin-left:5px;} #wrap .order .gift_info_box .gift_txt li.gift_on{background:#2d3348;color:#fff;} #wrap .order .gift_info_box .gift_txt li.gift_on:before{content:"";border-top:4px solid #2d3348;border-right:4px solid transparent;border-left:4px solid transparent;border-bottom:4px solid transparent;position: absolute;bottom:-8px;left:50%;transform:translate(-50%);} #wrap .order .gift_info_box .gift_tab_cont{display:none;margin-top:24px;} #wrap .order .gift_info_box .gift_tab_cont.gift_on{display: block;} #wrap .order .gift_info_box .gift_tab_cont img{width:100%;} #wrap .order .gift_info_box .gift_box{margin-bottom:12.5px;} #wrap .order .gift_info_box .gift_take_info{display:table;width:100%;} #wrap .order .gift_info_box .gift_take_info dt, #wrap .order .gift_info_box .gift_take_info dd{display:table-cell;box-sizing:border-box;padding: 7.5px 0;} #wrap .order .gift_info_box .gift_take_info dt{font-size: 15px;color: #222;font-weight: 400;letter-spacing: -1.5px;border: none;vertical-align: top;width:80px;line-height: 45px;} #wrap .order .gift_info_box .gift_take_info dt.required:after{content: "*";font-size:15px;color:#942020;font-weight: 400;display: inline-block;vertical-align: middle;margin-left: 3px;} #wrap .order .gift_info_box .gift_take_info dd input{background:#fff;border:1px solid #ddd;} #wrap .order .gift_info_box .gift_take_info dd .order_number{width:26.8% !important;} #wrap .order .gift_info_box .recipient_shipping{margin-top:2.5px;} #wrap .order .gift_info_box .recipient_shipping label{font-size:16px;color:#444;font-weight:400;} #wrap .order .gift_info_box .recipient_shipping label span{display: block;width:100%;font-size:14px;color:#999;font-weight:300;letter-spacing:-0.84px;line-height:21px;margin-top:8px;} #wrap .order .gift_info_box .zipcode_box .zipcode_top .zipcode_btn_box button{background:#fff;} #wrap .order .gift_info_box .gift_take_info.receive_letter{display: block;} #wrap .order .gift_info_box .gift_take_info.receive_letter dt, #wrap .order .gift_info_box .gift_take_info.receive_letter dd{display: block;width:100%;} #wrap .order .gift_info_box .gift_take_info.receive_letter dt{line-height:initial;padding:12.5px 0 0 0;} #wrap .order .gift_info_box .gift_take_info.receive_letter dd{padding:0;} #wrap .order .gift_info_box .gift_take_info.receive_letter .sub_letter_txt{font-size:14px;color:#666;font-weight:300;letter-spacing:-0.84px;display: block;margin:7px 0;} #wrap .order .gift_info_box .gift_take_info.receive_letter dd textarea{width:100%;height:100px;box-sizing:border-box;background:#fff;border:1px solid #ddd;outline:none;font-size:15px;color:#888;font-weight:400;letter-spacing:-1.5px;line-height:27px;padding:5px 14px;overflow-y:auto;} #wrap .order .gift_info_box .gift_take_info.receive_letter dd textarea::placeholder{color:#888;} @media only screen and (max-width:345px) { #wrap .order .gift_info_box .gift_take_info dd .order_number{width:25.8% !important;} } /*주문완료*/ #wrap .order_end .order_end_completion{width:100%;box-sizing:border-box;margin:30px 0 0 0;padding:0 15px 0 15px;} #wrap .order_end .order_end_completion .completion_box{width:100%;box-sizing:border-box;background:#f5f5f5;text-align: center;padding:40px 0 36px;} #wrap .order_end .order_end_completion .completion_box > span{} #wrap .order_end .order_end_completion .completion_box > span img{width:50px;} #wrap .order_end .order_end_completion .completion_box p{margin-top:14px;} #wrap .order_end .order_end_completion .completion_box p strong{font-size:19px;color:#333;font-weight:500;letter-spacing:-1.2px;} #wrap .order_end .order_end_completion .completion_box p em{font-size:15px;color:#555;font-weight:400;letter-spacing:-1.1px;display: block;margin-top:5px;} #wrap .order_end .order_end_table{width:100%;box-sizing:border-box;padding:40px 15px 0 15px;} #wrap .order_end .order_end_table.order_info{width:100%;box-sizing:border-box;padding:40px 0 0 0;border-top:12px solid #eee;margin-top:40px;} #wrap .order_end .order_end_table.order_info .order_cart_tit, #wrap .order_end .order_end_table.order_info .order_table_type{padding:0 15px;} #wrap .order_end .order_end_table .order_cart_tit{width:100%;box-sizing:border-box;} #wrap .order_end .order_end_table .order_cart_tit h3{font-size:20px;color:#333;font-weight:normal;letter-spacing:-1.2px;font-family:'Jeju Myeongjo', serif;line-height:1;} #wrap .order_end .order_end_table .order_table_type{margin-top:15px;} #wrap .order_end .order_end_table .order_table_type table{width:100%;} #wrap .order_end .order_end_table .order_table_type table tr:nth-child(1) th, #wrap .order_end .order_end_table .order_table_type table tr:nth-child(1) td{border-top:1px solid #000;} #wrap .order_end .order_end_table .order_table_type table tr th, #wrap .order_end .order_end_table .order_table_type table tr td{box-sizing:border-box;border-bottom:1px solid #ddd;padding:12px 0;text-align:left;} #wrap .order_end .order_end_table .order_table_type table tr th{font-size:15px;color:#222;font-weight:400;letter-spacing:-1.2px;background:#f5f5f5;padding-left:10px;padding-right:10px;vertical-align: top;} #wrap .order_end .order_end_table .order_table_type table tr td{padding-left:15px;padding-right:10px;font-size:15px;color:#666;font-weight:400;letter-spacing:-1.5px;font-family:'Roboto', 'Noto Sans KR';line-height:20px;} #wrap .order_end .order_end_table .order_table_type table tr td .discount .discount_tit{padding-left:0;} #wrap .order_end .order_end_table .order_table_type table tr td .discount .discount_tit:before{display: none;} #wrap .order_end .order_end_table .order_table_type table tr td .discount li{position: relative;padding-left:10px;} #wrap .order_end .order_end_table .order_table_type table tr td .discount li:before{position: absolute;top: 5px;left: 0px;width: 7px;height: 7px;content: '';box-sizing: border-box;border-radius: 0;background: none;border: 1px solid #666;border-width: 1px 1px 0 0;transform: rotate(-180deg);} #wrap .order_end .order_end_table .order_table_type table tr td strong{font-weight:inherit;} #wrap .order_end .order_end_table .order_table_type table tr td .order_benefit_list li em{display: inline-block;width:100%;} #wrap .order_end .order_end_table .order_table_type table tr td .order_benefit_list li em span{width:auto;} #wrap .order_end .order_end_table .order_table_type table tr td .pay_with_list strong{color:#333;font-weight:400;} #wrap .order_end .order_end_table .order_table_type table tr td .pay_with_list ul{margin-top:7px;} #wrap .order_end .order_end_table .order_table_type table tr td .pay_with_list ul li{font-size:14px;font-family:'Noto Sans KR';} #wrap .order_end .order_end_table .order_table_type table tr td .pay_with_list ul li strong{font-size:inherit;color:inherit;font-weight:inherit;font-family:inherit;} #wrap .order_end .order_end_table .order_table_type table tr td .delivery_place{font-size:14px;font-family:'Noto Sans KR';} #wrap .order_end .order_end_table .order_table_type table tr td .delivery_place strong{display: block;color:#333;font-weight:400;margin-bottom:7px;} #wrap .order_end .order_end_table .order_table_type table tr td .order_payment_sum{font-size:18px;color:#1b253c;font-weight:normal;font-family:'Jomolhari', 'Jeju Myeongjo', serif;} #wrap .order_end .order_end_table .order_table_type table tr td .order_benefit_list li em span{display: inline-block;vertical-align:top;width:80%;font-size:14px;font-weight:400;font-family:'Noto Sans KR';} #wrap .order_end .order_end_table .order_table_type table tr td .order_benefit_list li.order_benefit_mileage em span{display: inline;} #wrap .btn_order_end_box{margin-top:30px;width:100%;box-sizing:border-box;padding:0 15px;} #wrap .btn_order_end_box .btn_self_go.btn_go{width:100%;} @media only screen and (max-width:360px){ #wrap .order_end .order_end_table .order_table_type table tr td .order_benefit_list li.order_benefit_mileage em span{width:55%;;} } /*─────────────────────────────────────────────────────────── 주문서 | 간편주문 order/easy ───────────────────────────────────────────────────────────*/ /* 간편주문 - order/easy */ .content_box .order_easy_tit{text-align:center;padding:45px 0 26px;font-size: 25px;color: #333;font-weight: 400;line-height: 1.3;font-family: 'Jomolhari', 'Jeju Myeongjo', serif;letter-spacing: -0.75px;} .order_easy_wrap{width:100%;box-sizing:border-box;position: relative;font-size:0;background:#f4f2f0;} .order_easy_wrap:after{clear:both;content:"";display: block;} .order_easy_wrap .easy_prd_info{width:100%;box-sizing:border-box;background:#cbc8c3 url('../img/da_image/order_easy_bg.jpg')no-repeat center top;background-size:100% auto;text-align: center;vertical-align: top;} .order_easy_wrap .easy_prd_info h3{font-size:40px;color:#fff;font-weight:normal;font-family:'Jomolhari', 'Noto Sans KR', sans-serif;letter-spacing:20px;padding-top:48px;margin-left:173px;} .order_easy_wrap .easy_prd_info .prd_wrap{padding:65px 15px 50px 15px;width:100%;box-sizing:border-box;transition:all 0.3s;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category{width:100%;font-size:0;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li{box-sizing:border-box;background:#fff;border-radius:10px;padding:15px 0 15px 0;position:relative;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li + li{margin-top:65px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_tag_wrap{box-sizing:border-box;border-radius:10px 10px 0 0;position: absolute;top:-35px;left:12px;padding:0 15px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Inpure_Care .unit_tag_wrap{background:#6cc291;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Hyper_Care .unit_tag_wrap{background:#6cc2b9;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Moin_Care .unit_tag_wrap{background:#6288b9;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Miracle_Care .unit_tag_wrap{background:#c7afa5;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Reparative_Care .unit_tag_wrap{background:#88959d;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Nutritive_Care .unit_tag_wrap{background:#d99099;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li.unit_cate_li.Special_Care .unit_tag_wrap{background:#81a5bf;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_tag{width:100%;height:100%;box-sizing:border-box;position: relative;text-align:center;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_tag span{display: block;width:100%;font-size:15px;color:#fff;font-weight:400;letter-spacing:-0.01em;line-height:35px;font-family:'Jomolhari', 'Noto Sans KR', sans-serif;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table{border-collapse:collapse;width:100%;text-align: center;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr:nth-child(1) td{padding-top:0;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td{box-sizing:border-box;vertical-align: middle;padding:7.5px 0;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_img{padding-left:15px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_img img{width:65px;box-sizing:border-box;border-radius:100%;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_info_box{padding-left:10px;padding-right:15px;text-align:left;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_info_box .unit_info{} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_info_box .unit_info:after{clear:both;content:"";display: block;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_name{font-size:15px;color:#333;font-weight:400;letter-spacing:-0.9px;margin-bottom:7px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_volume{display:inline-block;font-size:13px;color:#777;font-weight:400;letter-spacing:-0.8px;font-family:'Roboto';line-height:30px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_price{font-size:14px;color:#333;font-weight:500;font-family:'Roboto', 'Noto Sans KR';line-height:30px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_price:before{width:1px;height:12px;content:"";background:#ddd;vertical-align:middle;display: inline-block;margin:0 10px;} #wrap .order_easy_wrap .easy_prd_info .count{display: inline-block;padding:0;vertical-align:middle;float: right;} #wrap .order_easy_wrap .easy_prd_info .goods_qty{width:95px;height:30px;} #wrap .order_easy_wrap .easy_prd_info .goods_qty .text{float:none;width:35px;height:30px;display: inline-block;border:1px solid #ccc;border-width:1px 0 1px 0;font-size:15px;color:#333;font-weight:400;font-family:'Trirong';line-height:30px;} #wrap .order_easy_wrap .easy_prd_info .goods_qty .goods_cnt{width:30px;height:30px;box-sizing:border-box;border:none;display:inline-block;font-size:0;border:1px solid #ccc;position: relative;background:#fff;} #wrap .order_easy_wrap .easy_prd_info .goods_qty .goods_cnt.down:before{top:14px;left:7px;} #wrap .order_easy_wrap .easy_prd_info .goods_qty .goods_cnt.up:before{top:14px;left:7px;} #wrap .order_easy_wrap .easy_prd_info .goods_qty .goods_cnt.up:after{left:14px;top:8px;} #wrap .order_easy_wrap .easy_prd_info .count.on .goods_qty .text{border:1px solid #333;border-width:1px 0 1px 0;} #wrap .order_easy_wrap .easy_prd_info .count.on .goods_qty .goods_cnt{border:1px solid #333;} #wrap .order_easy_wrap .easy_prd_info .count.on .goods_qty .goods_cnt.down{border-width:1px 0 1px 1px;border-right:1px solid #ccc;} #wrap .order_easy_wrap .easy_prd_info .count.on .goods_qty .goods_cnt.up{border-width:1px 1px 1px 0;border-left:1px solid #ccc;} .order_easy_wrap .easy_prd_price{position: relative;box-sizing:border-box;} @media only screen and (max-width:360px) { .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td.unit_img img{width:60px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_name{font-size:14px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_volume{font-size:12px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_price{font-size:13px;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_price:before{height:10px;margin:0 6px;} } @media only screen and (max-width:345px) { .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_name{margin-bottom:0;} .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_volume, .order_easy_wrap .easy_prd_info .prd_wrap .unit_category li .unit_price_table tbody tr td .unit_price{line-height:initial;} #wrap .order_easy_wrap .easy_prd_info .count{display: block;float:none;margin-top:5px;} } /*─────────────────────────────────────────────────────────── 개별페이지 W.LAB ───────────────────────────────────────────────────────────*/ /*** 추후 옮길 것 - > gd.layout.css ***/ /*** W.LAB 관련 공통 ***/ /* 일반 - 375 */ @media only screen and (max-width:360px) { } @media only screen and (max-width:320px) { } /*** 웰킨스토리 - service/story_brand.html ***/ /* 일반 - 375 */ .story_video_wrap{font-size:0;margin-bottom:50px;} .sub_story .story_video_wrap .story_video{} .story_video_wrap .story_video img{width:100%;} .story_video_wrap {position:relative;} .story_video_wrap .story_scroll {font-size: 8px;line-height:1;font-weight:400;color:#fff;font-family:'Roboto','Noto Sans KR';position:absolute;bottom: 30px;left:50%;margin-left: -23px;/* transform:translateX(-50%); */background:none;padding: 0;letter-spacing: 0.2em;} .story_video_wrap .story_scroll span {width:32px;height:32px;margin:0 auto 10px;display:block;position: relative;} .story_video_wrap .story_scroll span:before{width:100%;height:100%;content:"";box-sizing:border-box;border-radius:100%;border:1px solid #fff;position: absolute;top:0;left:0;} .story_video_wrap .story_scroll span .arr_img{position:absolute;top:4px;left:10px;width:12px;height:7px;opacity: 0; text-align: left;background:url("../img/da_image/scr_arr01.png")no-repeat;background-size:12px auto;} .story_video_wrap .story_scroll span .arr_img:nth-child(1){-webkit-animation:arrow 1200ms 0s linear infinite;-moz-animation:arrow 1200ms 0s linear infinite;animation:arrow 1200ms 0s linear infinite;} .story_video_wrap .story_scroll span .arr_img:nth-child(2){-webkit-animation:arrow 1200ms 400ms linear infinite;-moz-animation:arrow 1200ms 400ms linear infinite;animation:arrow 1200ms 400ms linear infinite;} .story_video_wrap .story_scroll span .arr_img:nth-child(3){-webkit-animation:arrow 1200ms 800ms linear infinite;-moz-animation:arrow 1200ms 800ms linear infinite;animation:arrow 1200ms 800ms linear infinite;} @-webkit-keyframes arrow { 0% {-webkit-transform: translate(0px, 0px);opacity: 0;} 50% {-webkit-transform: translate(0px, 9px);opacity: 1;} 100% {-webkit-transform: translate(0px, 18px);opacity: 0;} } @-moz-keyframes arrow{ 0% {-moz-transform: translate(0px, 0px);opacity: 0;} 50% {-moz-transform: translate(0px, 9px);opacity: 1;} 100% {-moz-transform: translate(0px, 18px);opacity: 0;} } @keyframes arrow { 0% {transform: translate(0px, 0px);opacity: 0;} 50% {transform: translate(0px, 9px);opacity: 1;} 100% {transform: translate(0px, 18px);opacity: 0;} } /* 동영상 */ .sub_story .anti_video_wrap {background:#f4f4f4 url('../img/wlab/hairloss-type-bg-stress.jpg') no-repeat 50% 0;background-size:cover;padding:60px 0;} .sub_story .anti_video_wrap > div{width:100%;box-sizing:border-box;padding:0 15px;} .sub_story .anti_video_wrap .video_cont {cursor:pointer;} .sub_story .anti_video_wrap img{width:100%;} .sub_story .sub_line_tit .sub_line_tab li.line_5.on {letter-spacing:0;} .sub_story .brandStory_tit > h2{font-family: 'Jomolhari';font-size: 25px;line-height: 30px;text-align: center;color: #333;font-weight:400;margin: 37px 0 27px;} .sub_story .brand_special{margin-top: 79px;} .sub_story .brand_special .w_custom{background:#fff; padding-bottom:38px; position:relative; z-index:1;} .sub_story .brand_special h2{font-size: 18px;color: #b3aeaa;font-weight: 300;font-family:'Jomolhari', 'Jeju Myeongjo',serif;letter-spacing:0;line-height: 33px;margin-left: 0px;position: relative;margin-bottom:43px;z-index:1;} .sub_story .brand_special h2 span{display:block;font-size: 33px;color:#51443a;font-weight:normal;letter-spacing:-2px;margin-top: 10px;position: absolute;top:100%;left:0;} .sub_story .brand_special > div:after{clear:both;content:"";display:block;} .sub_story .brand_special .special_img, .sub_story .brand_special .special_txt{display: inline-block;vertical-align: top;box-sizing:border-box;width: 100%;position: relative;} .sub_story .brand_special .special01 .special_img{text-align: right;padding-left: 65px;position: relative;top: -7px;} .sub_story .brand_special .special01 .special_img img{max-width:100%;} .sub_story .brand_special .special01 .special_img:before{width: 270px;height: 880px;content:"";background:#f6f3f1;opacity:0.8;position: absolute;left:-110px;top: -121px;z-index:-1;} .sub_story .brand_special .special_txt p{font-size: 15px;color:#444;font-weight:300;letter-spacing:-0.6px;line-height: 21px;text-underline-position:from-font;} .sub_story .brand_special .special_txt p + p{margin-top:23px;} .sub_story .brand_special .special_txt p strong{position:relative; display:inline-block; z-index:1; color:#333; font-weight:400;} .sub_story .brand_special .special_txt p strong:before{position:absolute; content:''; width:100%; height:6px; background:#e8e3e0; left:0; bottom:0; z-index:-1;} .sub_story .brand_special .special01 .special_txt{padding-left: 65px;margin-top: 23px;} .sub_story .brand_special .special02{margin-top: 115px;} .sub_story .brand_special .special02 .special_txt{padding-right: 65px;margin-top: 30px;} .sub_story .brand_special .special02 .special_img{padding: 0 60px 0 0;} .sub_story .brand_special .special02 .special_img img{max-width:100%;} .sub_story .brand_special .special02 .special_img:before{width: 140px;height: 105px;content:"";background:#f5f5f5;position: absolute;top: -40px;right: -15px;z-index:-1;} .sub_story .brand_bnr {width: calc(100% - 30px);height: 140px;background:url('../img/wlab/story_brand_img03.jpg') no-repeat center;background-size:cover;position:relative;margin: 40px auto 0;} .sub_story .brand_bnr .txt_box {position:absolute;top:50%;left:50%;display:inline-block;transform:translate(-50%, -50%);text-align:center;width: 100%;} .sub_story .brand_bnr .txt_box strong {display:block;font-size: 25px;line-height:1;font-weight:500;color:#fff;letter-spacing: -1.45px;} .sub_story .brand_bnr .txt_box p {font-size: 17px;line-height: 23px;font-weight:300;color:#fff;letter-spacing: -0.85px;margin-top: 15px;} .sub_story .brand_advantage{padding: 0;background: #eee;padding-bottom: 12px;} .sub_story .brand_advantage .w_custom{background:#fff; padding-bottom:40px;} .sub_story .brand_advantage .av_box{width: 100%;margin:0 auto;box-sizing:border-box;background:url('../img/wlab/story_brand_wellkin.png')no-repeat;background-size: 100%;height: 370px;} .sub_story .brand_advantage .av_box ul{width:100%;font-size:0;} .sub_story .brand_advantage .av_box ul li{display:inline-block;width:50%;text-align: left;box-sizing:border-box;vertical-align: top;text-align: center;} .sub_story .brand_advantage .av_box ul li:nth-child(-n+2){margin-bottom: 125px;} .sub_story .brand_advantage .av_box ul li:nth-of-type(2n){padding-left: 15px;} .sub_story .brand_advantage .av_box ul li:nth-of-type(2n+1){padding-right: 15px;} .sub_story .brand_advantage .av_box ul li:nth-child(n+1):nth-child(-n+2){padding-top:15px;} .sub_story .brand_advantage .av_box ul li .av_sub_des{font-size: 13px;color:#333;font-weight:400;letter-spacing:-0.9px;font-family:'Noto Sans KR';display: block;margin-top:8px;line-height: 18px;} .sub_story .brand_advantage .av_box ul li .av_sub_tit{position: relative;font-size: 20px;color:#333;font-weight:500;letter-spacing:-1px;font-family:'Noto Sans KR';display: inline-block;margin-top: 7px;line-height: 26px;} .sub_story .brand_advantage .av_box ul li .av_sub_tit:before{width:100%;height:10px;content:"";background:#927433;opacity:0.15;position: absolute;left:0;bottom:2px;margin-top:15px;} .sub_story .brand_advantage .av_box ul li .av_sub_tit:after{position:absolute; content:''; width:65px; height:10px; background:#927433; opacity:0.15; left:50%; top:13px; transform:translateX(-50%);} .sub_story .brand_advantage .av_box ul li .av_sub_tit.no2:after{width:70px;} .sub_story .brand_advantage .av_box ul li .av_sub_tit.no3:after{width:36px;} .sub_story .brand_advantage .av_box ul li .av_sub_tit.no4:after{width:100%;} .sub_story .brand_advantage .av_box ul li .av_txt{font-size:16px;color:#666;font-weight:400;letter-spacing:-0.9px;line-height:26px;font-family:'Noto Sans KR';margin-top:15px;} .sub_story .brand_advantage_info{margin-bottom:10px;} .sub_story .brand_advantage_info > ul{} .sub_story .brand_advantage_info > ul li{position:relative; padding:33px 0 29px;} .sub_story .brand_advantage_info > ul li + li{border-top:1px solid #ddd;} .sub_story .brand_advantage_info > ul li + li:before{position:absolute; content:''; width:12px; height:1px; background:#777; top:-0.5px; left:50%; margin-left:-6px;z-index:5;} .sub_story .brand_advantage_info > ul li + li:after{position:absolute; content:''; width:1px; height:12px; background:#777; top:-6px; left:50%; z-index:5;} .sub_story .brand_advantage_info > ul li + li span:before{position:absolute; content:''; width:30px; height:30px; background:#f5f5f5; top:-15px; left:50%; margin-left:-15px; border-radius:100%;} .sub_story .brand_advantage_info > ul li h4{font-size: 18px;line-height: 21px;letter-spacing: -1.1px;color: #333;font-weight:400;margin-bottom: 12px;} .sub_story .brand_advantage_info > ul li h3{position:relative; font-size: 25px;line-height: 25.75px;letter-spacing: -1.5px;color: #333;font-weight:500;margin-bottom: 23px; z-index:1;display:inline-block;} .sub_story .brand_advantage_info > ul li h3:before{position:absolute; content:''; width:100%; height:10px; background:#efeae1; z-index:-1; left:0; bottom:0;} .sub_story .brand_advantage_info > ul li p{font-size: 15px; font-weight: 300; line-height: 22px; letter-spacing: -1px; color: #666;} .sub_story .brand_wellkin {position:relative;padding:77px 0 120px;border-top:12px solid #eeeeee;} .sub_story .brand_wellkin > ul {position:relative;z-index:1;} .sub_story .brand_wellkin > ul:before {content:'Wellkin';display:inline-block;position:absolute;font-size: 60px;line-height:1;font-weight:400;color:#ddd;letter-spacing:-1px;font-family:'Trirong','Noto Sans KR';z-index:1;top:-37px;left:15px;font-style:italic;} .sub_story .brand_wellkin > ul li {float:left;overflow:hidden;position:relative;transition:all 0.4s;} .sub_story .brand_wellkin > ul li + li {margin-left:15px;} .sub_story .brand_wellkin > ul li img {width:100%;} .sub_story .brand_wellkin > ul .slick-list {padding-right:12%;} .sub_story .brand_wellkin .slick-dots {width:100%;text-align:center;margin:15px 0 0;} .sub_story .brand_wellkin .slick-dots li, .sub_story .brand_wellkin .slick-dots button {font-size:0;margin:0;padding:0;border:0;outline:0;display:inline-block;vertical-align:top;opacity:1;transition:all 0.3s;} .sub_story .brand_wellkin .slick-dots li {width:6px;height:6px;line-height:6px;position:relative;z-index:1;float:none;} .sub_story .brand_wellkin .slick-dots li + li {margin-left:7px;} .sub_story .brand_wellkin .slick-dots li button {width:6px;height:6px;border-radius:100%;background:#ccc;opacity:0.8;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) scale(0.65, 0.65);} .sub_story .brand_wellkin .slick-dots li.slick-active {} .sub_story .brand_wellkin .slick-dots li.slick-active button {transform:translate(-50%, -50%) scale(1, 1);background:#333;opacity:1;} /*cosmetic*/ .cosmetic_bnr, .cosmetic_middle_bnr, .cosmetic_bnr img, .cosmetic_middle_bnr img{width:100%; font-size:0;} .cosmetic_bnr a, .cosmetic_middle_bnr a{display: block;width:100%;height:100%} .cosmetic_bnr a img, .cosmetic_middle_bnr a img{width:100%;} .cosmetic_bnr {width:100%;height: 0;padding-bottom: 122.67%;position:relative;background:url('../img/wlab/cosmetic_bnr_bg.jpg') no-repeat center;background-size:cover;} .cosmetic_bnr .txt_box {text-align:center;position:absolute;display:inline-block;width: 100%;left:0;top: 16%;} .cosmetic_bnr .txt_box h3 {font-size: 16px;line-height: 1;font-weight:300;color:#444;letter-spacing: -1px;margin-bottom: 25px;} .cosmetic_bnr .txt_box h3 strong {display:block;font-size: 30px;line-height: 1;font-weight: 500;color:#444;letter-spacing: -1.7px;margin-top: 15px;} .cosmetic_bnr .txt_box img {height:19px;width: auto;} .cosmetic_middle_bnr {background: url('../img/wlab/cosmetic_figure_bg.jpg') no-repeat center top;background-size: 100%;height: 0;padding: 0 8px 244%;box-sizing:border-box;text-align:center;position: relative;border-bottom:12px solid #eeeeee;} .cosmetic_middle_bnr .sub_title {padding-top: 60px;} .cosmetic_middle_bnr .sub_title h4 {font-size: 25px;line-height: 1.36;font-weight:500;color:#333;letter-spacing:-2px;} .cosmetic_middle_bnr .sub_title h4 strong {font-size:inherit;line-height:inherit;font-weight:inherit;color:#009531;position:relative;display:inline-block;} .cosmetic_middle_bnr .sub_title h4 strong:before {content:'';display:block;position:absolute;width:100%;height: 8px;background:#127934;opacity:0.15;bottom: 1px;} .cosmetic_middle_bnr .sub_title p {font-size: 15px;line-height: 1.53;font-weight:300;color:#555;letter-spacing: -0.75px;margin-top: 11px;} .cosmetic_middle_bnr .figure_ul {margin: 14% auto 0;width: 100%;box-sizing: border-box;} .cosmetic_middle_bnr .figure_ul li {text-align:center;display:inline-block;float:left;width: 33.333%;padding-bottom: 65%;} .cosmetic_middle_bnr .figure_ul li p {font-size: 13px;line-height:1;font-weight:400;color:#333;letter-spacing: -0.4px;} .cosmetic_middle_bnr .figure_ul li strong {display:block;font-size: 16px;font-weight:500;color:#333;font-style:italic;font-family:'Trirong';line-height: 1;margin-top: 7px;} .cosmetic_middle_bnr .figure_ul li strong span {font-size: 25px;font-weight:inherit;font-style:inherit;color:inherit;} .cosmetic_middle_bnr .figure_ul + .figure_ul {padding: 0 16% 0 17%;margin-top: 12%;} .cosmetic_middle_bnr .figure_ul + .figure_ul li {width:50%;} .cosmetic_middle_bnr .warning {position:absolute;right: 15px;bottom: 45px;width:100%;font-size: 12px;line-height: 1.67;font-weight:300;color:#999;text-align:right;} /*웰킨센터 go*/ .cosmetic_routine{width:100%;box-sizing:border-box;position: relative;background:#f5f5f5 url('../img/wlab/cosmetic_leaf.png')no-repeat right top;background-size: 100%;padding: 57px 0 50px;} .cosmetic_routine .routine_box{width:100%;margin:0 auto;box-sizing:border-box;} .cosmetic_routine .routine_tit{text-align:center;} .cosmetic_routine .routine_tit h4{font-size: 27px;color:#333;font-weight:bold;letter-spacing: -1.35px;line-height: 30px;font-family: 'Jeju Myeongjo', serif;text-align: center;width:calc(100% + 14px);} .cosmetic_routine .routine_tit h4 strong{display: inline-block;position: relative;color:#275b4e;} .cosmetic_routine .routine_tit h4 strong:before{width:100%;height: 10px;content:"";background:#275b4e;opacity:0.15;position: absolute;left:0;bottom: -1px;} .cosmetic_routine .routine_tit h4 span{display: inline-block;font-size: 20px;color:#666;font-weight:normal;letter-spacing:-1.5px;margin: 0 10px 0 0px;line-height: 30px;vertical-align: top;} .cosmetic_routine .routine_tit p{font-size: 16px;color:#333;font-weight:400;letter-spacing:-0.8px;margin-top: 16px;} .cosmetic_routine .routine_cont{width:100%;font-size:0;margin-top:22px;background: #fff; box-shadow:2px 8px 20px rgba(0,0,0,0.15);} .cosmetic_routine .routine_cont:after{clear:both;content:"";display: block;} .cosmetic_routine .routine_cont > div{display: inline-block;box-sizing:border-box;vertical-align: top;} .cosmetic_routine .routine_cont > div img{max-width:100%;} .cosmetic_routine .routine_cont .routine_txt{padding: 27px 16px 38px;} .cosmetic_routine .routine_cont .routine_txt p{font-size: 15px;color:#444;font-weight:400;letter-spacing:-1px;line-height: 21px;} .cosmetic_routine .routine_cont .routine_txt p + p{margin-top: 18px;} .cosmetic_routine .routine_cont .routine_txt p span{display:inline-block;position: relative;} .cosmetic_routine .routine_cont .routine_txt p span:before{width:100%;height:6px;content:"";background:#927433;opacity:0.15;position: absolute;left:0;bottom:2px;} /*무료 제품 추천 받기*/ .cosmetic_rec_prd{margin:0 auto;box-sizing:border-box;position: relative;text-align:center;padding-bottom:50px;} .cosmetic_rec_prd:before{width:1px;height: 60px;content:"";background:#333;position: absolute;left:50%;top: -30px;} .cosmetic_rec_prd .rec_tit{padding-top: 46px;} .cosmetic_rec_prd .rec_tit p{font-size: 18px;color:#333;font-weight:400;letter-spacing:-1.3px;line-height: 24px;} .cosmetic_rec_prd .rec_tit span{display: block;font-size: 15px;color:#666;font-weight:400;letter-spacing:-1px;margin-top:12px;} .cosmetic_rec_prd .rec_btn_box{margin-top: 25px;} .cosmetic_rec_prd .rec_btn_box .btn_self_now.btn_go{width: 180px;font-size: 15px; letter-spacing:-1px;} /*두피 연구 18년의 노하우*/ .cosmetic_knowhow{width:100%;box-sizing:border-box;background:url('../img/wlab/cosmetic_know_bg.jpg')no-repeat center top;padding: 47px 0 17px;background-size: cover;} .cosmetic_knowhow .knowhow_box{margin:0 auto;box-sizing:border-box;text-align: center;} .cosmetic_knowhow .knowhow_tit {font-size: 27px;color:#fff;font-weight:300;letter-spacing: -1.7px;font-family:'Noto Sans KR';line-height: 33px;} .cosmetic_knowhow .knowhow_tit strong{font-weight:400;color:#fffad6;display: inline-block;position: relative;} .cosmetic_knowhow .knowhow_tit strong:before{width:100%;height: 8px;content:"";background:#c6d1bd;opacity:0.3;position: absolute;left:0;bottom: 0px;} .cosmetic_knowhow .knowhow_tit span{font-size:20px;color:#fff;font-weight:normal;font-family: 'Trirong', serif;display: block;line-height:1;font-style:italic;letter-spacing:0;margin-bottom: 20px;} .cosmetic_knowhow .knowhow_cont{width:100%;font-size:0;margin: 35px auto 0 auto;text-align: left;} .cosmetic_knowhow .knowhow_cont li{display: inline-block;width: calc(100% / 2);box-sizing:border-box;vertical-align: top;text-align: center;margin-bottom: 37px;} .cosmetic_knowhow .knowhow_cont li:nth-child(1){} .cosmetic_knowhow .knowhow_cont li:nth-child(2){} .cosmetic_knowhow .knowhow_cont li:nth-child(3){} .cosmetic_knowhow .knowhow_cont li:nth-child(4){} .cosmetic_knowhow .knowhow_cont li .knowhow_icon{width: 97.5px;height: 97.5px;box-sizing:border-box;border-radius:100%;background:#fff;position:relative;margin:0 auto;} .cosmetic_knowhow .knowhow_cont li:nth-child(1) .knowhow_icon{background: #fff url('../img/wlab/cos_know01.png')no-repeat center center;background-size: 36.5px auto;} .cosmetic_knowhow .knowhow_cont li:nth-child(2) .knowhow_icon{background: #fff url('../img/wlab/cos_know02.png')no-repeat 21px center;background-size: 61px auto;} .cosmetic_knowhow .knowhow_cont li:nth-child(3) .knowhow_icon{background:#fff url('../img/wlab/cos_know03.png')no-repeat center;background-size: 35.5px auto;} .cosmetic_knowhow .knowhow_cont li:nth-child(4) .knowhow_icon{background:#fff url('../img/wlab/cos_know04.png')no-repeat center;background-size: 39.5px auto;} .cosmetic_knowhow .knowhow_cont li .knowhow_icon:before{width: 110px;height: 110px;content:"";box-sizing:border-box;border-radius:100%;border:1px dashed #fff;position: absolute;top: -6px;left: -6px;} .cosmetic_knowhow .knowhow_cont li .cont_tit{font-size:18px;color:#fff;font-weight:400;letter-spacing:-1.2px;line-height: 24px;font-family:'Noto Sans KR';margin-top: 16px;height:48px;display: table;width:100%;} .cosmetic_knowhow .knowhow_cont li .cont_tit span{display: table-cell;vertical-align: middle;} .cosmetic_knowhow .knowhow_cont li .cont_txt{font-size: 13px;color:rgba(255, 255, 255, 0.7);font-weight:300;letter-spacing: -0.9px;line-height: 19px;font-family:'Noto Sans KR';margin-top: 8px;display: block;} /*두피를 가장 잘 아는*/ .cosmetic_pro{margin:0 auto;box-sizing:border-box;margin-bottom:70px;} .cosmetic_pro h4{font-size: 32px;color:#222;font-weight:normal;font-family:'Trirong', serif;line-height: 41px;font-style:italic;margin-top: 52px;} .cosmetic_pro h4 span{font-size: 17px;color: #333;font-weight: 300;font-family:'Noto Sans KR';display: block;font-style:normal;margin-top: 4px;letter-spacing: -1.1px;} .cosmetic_pro .pro_list{width:100%;font-size:0;margin-top: 30px;} .cosmetic_pro .pro_list li{box-sizing:border-box;position: relative;display: table;width:100%;} .cosmetic_pro .pro_list li:before{height:calc(100% - 100px);background:#f3f2f0;position: absolute;top:50%;left:-100%;transform:translateY(-50%);z-index:-1;} .cosmetic_pro .pro_list li.pro_prd{margin: 20px 0 20px;} .cosmetic_pro .pro_list li:after{clear:both;content:"";display:block;} .cosmetic_pro .pro_list li .pro_img, .cosmetic_pro .pro_list li .pro_txt{box-sizing:border-box;} .cosmetic_pro .pro_list li .pro_img{padding-right:25px;} .cosmetic_pro .pro_list li .pro_img img{max-width:100%;} .cosmetic_pro .pro_list li:nth-of-type(even) .pro_img{padding-left: 25px;padding-right: 0;} .cosmetic_pro .pro_list li .pro_txt{box-shadow: 3.25px 5.65px 28.5px 0 rgba(0, 0, 0, 0.21);padding: 25px 0 27px;} .cosmetic_pro .pro_list li .pro_txt h5{font-size: 23px;color:#333;font-weight: 400;letter-spacing:-1.7px;line-height: 29px;padding-left: 20px;margin-bottom: 16px;} .cosmetic_pro .pro_list li:nth-child(even) .pro_txt h5{padding-left:0; padding-right:20px;} .cosmetic_pro .pro_list li .pro_txt p{font-size: 15px;color:#666;font-weight: 300;letter-spacing: -1px;line-height: 21px;position: relative;margin-top: 15px;padding-top: 0px;padding-left: 20px;} .cosmetic_pro .pro_list li:nth-child(even) .pro_txt p{padding-left:0; padding-right:20px;} .cosmetic_pro .pro_list li:nth-of-type(even) .pro_txt{text-align: right;} /*웰킨 & 데일리 두피스킨케어*/ .cosmetic_daily{margin-top: 37px;box-sizing:border-box;position: relative;padding-bottom:64px;} .cosmetic_daily h4{text-align:center;font-size: 27px;color:#333;font-weight:500;letter-spacing:-1.4px;font-family:'Noto Sans KR';line-height: 28px;} .cosmetic_daily h4 strong{font-weight:inherit;display: inline-block;position: relative;} .cosmetic_daily h4 strong:before{width:100%;height: 10px;content:"";background:#927433;opacity:0.15;position: absolute;left:0;bottom: -2px;} .cosmetic_daily h4 span{display: block;font-size: 15px;color:#444;font-weight:300;letter-spacing:-0.9px;line-height: 21px;margin-top:20px;} .cosmetic_daily .clean_list{margin:0 auto;box-sizing:border-box;font-size:0;margin-top: 25px;} .cosmetic_daily .clean_list li{display:inline-block;box-sizing:border-box;width:calc(100% / 2 - 7.5px);margin-bottom: 15px;} .cosmetic_daily .clean_list li:nth-child(odd){margin-right:15px;} .cosmetic_daily .clean_list li .clean_tit{box-sizing:border-box;width:100%;border-radius:10px 10px 0 0;overflow:hidden;font-size: 17px;color:#fff;font-weight:400;letter-spacing:-1px;height: 42px;line-height: 42px;text-align: center;font-weight: 400;} .cosmetic_daily .clean_list li:nth-child(1) .clean_tit{background:#6cc290;} .cosmetic_daily .clean_list li:nth-child(2) .clean_tit{background:#6cc2b9;} .cosmetic_daily .clean_list li:nth-child(3) .clean_tit{background:#c8afa5;} .cosmetic_daily .clean_list li:nth-child(4) .clean_tit{background:#6ca9c2;} .cosmetic_daily .clean_list li .clean_cont{box-sizing:border-box;width:100%;border:1px solid #ddd;border-top:none;text-align:center;padding: 23px 0 20px 0;} .cosmetic_daily .clean_list li .clean_cont p{font-size: 15px;color:#333;font-weight: 400;letter-spacing:-0.75px;font-family:'Noto Sans KR';margin: 0 0 12px 0;} .cosmetic_daily .clean_list li .clean_cont .clean_icon{width: 100px;height: 100px;box-sizing:border-box;border-radius:100%;margin:0 auto;} .cosmetic_daily .clean_list li:nth-child(1) .clean_cont .clean_icon{background:#f5f5f5 url('../img/wlab/cos_care01.png')no-repeat center;background-size: 21.5px auto;} .cosmetic_daily .clean_list li:nth-child(2) .clean_cont .clean_icon{background:#f5f5f5 url('../img/wlab/cos_care02.png')no-repeat center;background-size: 29.5px auto;} .cosmetic_daily .clean_list li:nth-child(3) .clean_cont .clean_icon{background:#f5f5f5 url('../img/wlab/cos_care03.png')no-repeat center;background-size: 34px auto;} .cosmetic_daily .clean_list li:nth-child(4) .clean_cont .clean_icon{background:#f5f5f5 url('../img/wlab/cos_care04.png')no-repeat center;background-size: 40.5px;} .cosmetic_daily .clean_list li .clean_cont span{font-size: 14px;color:#666;font-weight:300;letter-spacing:-0.7px;line-height: 20px;font-family:'Noto Sans KR';margin-top: 17px;display: block;} /*상품리스트*/ .cosmetic_daily .daily_prd_list{margin:0 auto;box-sizing:border-box;font-size:0;margin-top: 30px;} .cosmetic_daily .daily_prd_list:after{clear:both;content:"";display: block;} .cosmetic_daily .daily_prd_list > li{width: 100%;box-sizing:border-box; box-shadow: 3.25px 5.65px 28.5px 0 rgba(0, 0, 0, 0.21);} .cosmetic_daily .daily_prd_list > li + li{margin-top:20px;} .cosmetic_daily .daily_prd_list > li:nth-of-type(3n+1){} .cosmetic_daily .daily_prd_list li .prd_img{width:100%;overflow:hidden;position:relative;} .cosmetic_daily .daily_prd_list li .prd_img img{width:100%;} .cosmetic_daily .daily_prd_list > li > .text_wrap{display:flex;align-items:flex-start;justify-content:flex-start;padding: 17px 15px;} .cosmetic_daily .daily_prd_list > li > .text_wrap > a{font-size: 20px;color:#333;font-weight:500;letter-spacing:-1px;line-height:26px;display: block;width: 140px;margin-top:4px;} .cosmetic_daily .daily_prd_list .sub_daily_prd{font-size:0;} .cosmetic_daily .daily_prd_list .sub_daily_prd li{position: relative;padding-left:10px;box-sizing:border-box;padding-top:2px;} .cosmetic_daily .daily_prd_list .sub_daily_prd li:before{width: 4px;height: 4px;content:"";box-sizing:border-box;border-radius:100%;background: #aaa;position: absolute;left:0;top: 13px;} .cosmetic_daily .daily_prd_list .sub_daily_prd li a{font-size: 15px;color:#777;font-weight:300;letter-spacing:-0.9px;line-height: 29px;} .cosmetic_daily .daily_prd_list .sub_daily_prd li + li {padding-top:0;} /*what we do*/ .whatDo_cont h3{text-align: center;font-size: 25px;color:#333;font-weight:normal;font-family:'Jomolhari', serif;margin-top:47px;line-height: 30px;} .whatDo_cont h3 span{display: block;font-size: 14px;color:#444;font-weight: 300;letter-spacing:-1px;font-family:'Noto Sans KR';margin-top: 5px;} .whatDo_cont .service_tab{margin:0 auto;box-sizing:border-box;font-size:0;margin-top: 21px;text-align: center; padding-bottom:36px; border-bottom:1px solid #444; display: flex;justify-content: center;flex-wrap: wrap;} .whatDo_cont .service_tab li{display: inline-block;width: calc(100% / 3);box-sizing:border-box;border-radius: 5px;overflow:hidden;border: 1px solid #eee;background: #eee;position: relative;text-align: center;padding: 14px 0 8px;margin-right:9px;vertical-align: top;margin-bottom: 9px;min-height: 100px;} .whatDo_cont .service_tab li:nth-child(2n){margin-right:0;} .whatDo_cont .service_tab li:last-child{margin-right:0;} .whatDo_cont .service_tab li a{display: block;width:100%;height:100%;box-sizing:border-box;padding-top: 38px;} .whatDo_cont .service_tab li:nth-child(1) a{background:url('../img/da_image/story_service01.png')no-repeat center top;background-size: 36px auto;} .whatDo_cont .service_tab li:nth-child(2) a{background:url('../img/da_image/story_service02.png')no-repeat center top;background-size: 27.5px auto;} .whatDo_cont .service_tab li:nth-child(3) a{background:url('../img/da_image/story_service03.png')no-repeat center top;background-size: 30.5px auto;} .whatDo_cont .service_tab li:nth-child(4) a{background: url('../img/da_image/story_service04.png')no-repeat 42px top;background-size: 29.5px auto;padding-top: 46px;} .whatDo_cont .service_tab li:nth-child(5) a{background:url('../img/da_image/story_service05.png')no-repeat center top;background-size: 31.5px auto;padding-top: 46px;} .whatDo_cont .service_tab li p{font-size: 15px;color:#777;font-weight:400;letter-spacing:-0.85px;font-family:'Noto Sans KR';line-height: 20px;} .whatDo_cont .service_tab li span{font-size:13px;color:#999;font-weight:400;letter-spacing:-0.65px;font-family:'Noto Sans KR';display: block;margin-top:2px;} /*on*/ .whatDo_cont .service_tab li.on{background:#fff;border:1px solid #333;} .whatDo_cont .service_tab li:nth-child(1).on a{background:url('../img/da_image/story_service01_ov.png')no-repeat center top;background-size: 36px auto;} .whatDo_cont .service_tab li:nth-child(2).on a{background:url('../img/da_image/story_service02_ov.png')no-repeat center top;background-size: 27.5px auto;} .whatDo_cont .service_tab li:nth-child(3).on a{background:url('../img/da_image/story_service03_ov.png')no-repeat center top;background-size: 30.5px auto;} .whatDo_cont .service_tab li:nth-child(4).on a{background:url('../img/da_image/story_service04_ov.png')no-repeat center top;background-size: 29.5px auto;} .whatDo_cont .service_tab li:nth-child(5).on a{background:url('../img/da_image/story_service05_ov.png')no-repeat center top;background-size: 31.5px auto;} .whatDo_cont .service_tab li.on p{color:#333;} /*리스트*/ .whatDo_cont .service_list{margin:0 auto;box-sizing:border-box;font-size:0;margin-top: 32px;} .whatDo_cont .service_list > li{width:100%;box-sizing:border-box;position: relative;} .whatDo_cont .service_list > li > a{position: absolute;top:-50px;} .whatDo_cont .service_list > li:before{width:100%;height: 232px;background:#f3f2f0;content:"";position: absolute;z-index:-1;top: 144px;} .whatDo_cont .service_list > li + li{margin-top: 75px;} .whatDo_cont .service_list > li a{clear:both;} .whatDo_cont .service_list > li:after{clear:both;content:"";display:block;} .whatDo_cont .service_list > li + li:after{width: calc(100% + 30px);height:12px;position:absolute;background:#eee;left: -15px;top: -45px;} .whatDo_cont .service_list > li .service_img_box, .whatDo_cont .service_list li .service_txt_box{display: inline-block;box-sizing:border-box;width: 100%;} .whatDo_cont .service_list > li .service_txt_box{} .whatDo_cont .service_list > li .service_txt_box .what_do_tit{} /*이미지*/ .whatDo_cont .service_img_box{margin-top: 18px;} .whatDo_cont .service_img_box .service_img_ul{width:100%;position: relative;overflow:visible;} .whatDo_cont .service_img_box .service_img_ul .slick-slide{height:230px;} .whatDo_cont .service_img_box .service_img_ul .slick-slide img{max-width:100%; height:100%; object-fit:cover;} .whatDo_cont .service_img_box .service_img_ul .slick-dots{position:static;margin-top:12px;box-sizing:border-box;} .whatDo_cont .service_img_box .service_img_ul .slick-dots li{margin: 0 8px 0 9px;display: inline-block;} .whatDo_cont .service_img_box .service_img_ul .slick-dots li button{padding:0;border: 0;background: none;} .whatDo_cont .service_img_box .service_img_ul .slick-dots li button:before{display: inline-block;vertical-align: middle;font-size: 12px;color:#999;font-weight:500;letter-spacing:-0.75px;font-family:'Roboto';font-weight: 400;} .whatDo_cont .service_img_box .service_img_ul .slick-dots li.slick-active button:before{color:#333;} .whatDo_cont .service_img_box .service_img_ul .slick-dots li:nth-child(1) button:before{content:"01";} .whatDo_cont .service_img_box .service_img_ul .slick-dots li:nth-child(2) button:before{content:"02";} .whatDo_cont .service_img_box .service_img_ul .slick-dots li:nth-child(3) button:before{content:"03";} .whatDo_cont .service_img_box .service_img_ul .slick-dots li:nth-child(4) button:before{content:"04";} /*타이틀*/ .whatDo_cont .service_list li .service_txt_box h3{font-size: 25px;color:#333;font-weight:500;letter-spacing: -2px;font-family:'Noto Sans KR';display: inline-block;line-height: 1.3;position:relative;margin:0;text-align: right;margin-bottom: 20px;} .whatDo_cont .service_list li .service_txt_box h3 span{font-size:inherit;color:inherit;font-weight:inherit;position: relative;display: inline-block;} .whatDo_cont .service_list li .service_txt_box h3 span:before{width:100%;height:10px;content:"";background:#927433;opacity:0.15;position: absolute;left:0;bottom: 0;} .whatDo_cont .service_list li .service_txt_box .icon{display:inline-block;box-sizing:border-box;height: 20px;line-height: 21px;padding: 0 10px;background:#275b4e;font-size: 13px;color:#fff;font-weight: 300;letter-spacing:-0.7px;font-family:'Roboto';vertical-align: top;position: absolute;top:12px;} .whatDo_cont .service_list li .service_txt_box .sub_des{font-size: 19px;color:#999;font-weight:400;letter-spacing: -1px;font-family: 'Roboto','Noto Sans KR';/* margin-top: 19px; *//* margin-bottom: 19px; */} /*내용*/ .whatDo_cont .service_list li .service_txt_box .service_txt{margin-top: 36px;} .whatDo_cont .service_list li .service_txt_box .service_txt p{font-size: 15px;color:#666;font-weight:400;letter-spacing: -1px;font-family:'Noto Sans KR';line-height: 21px;} .whatDo_cont .service_list li .service_txt_box .service_txt p strong{color:#333;font-weight: 400;word-break:keep-all;} .whatDo_cont .service_list li .service_txt_box .service_txt p + p{margin-top: 20px;} .whatDo_cont .service_list li .service_txt_box .program_list{margin-top:31px;font-size: 0;} .whatDo_cont .service_list li .service_txt_box .program_list li{font-size: 14px;color: #999;font-weight:400;letter-spacing:-1.2px;line-height:30px;font-family:'Noto Sans KR';position: relative;box-sizing:border-box;width:calc(50% - 10px);display: inline-block;text-align: center;height: 38.5px;line-height: 36.5px;border: 1px solid #ddd;border-radius: 5px;margin-right:10px;margin-bottom:10px;} .whatDo_cont .service_list li .service_txt_box .service_link{margin-top: 10px;} .whatDo_cont .service_list li .service_txt_box .service_link > span{font-size:12px;color:#999;font-weight:400;letter-spacing:-0.7px;line-height:25px;font-family:'Noto Sans KR';display: block;} .whatDo_cont .service_list li .service_txt_box .service_link .btn_review_more{margin-top:11px;margin-bottom: 7px;} .whatDo_cont .service_list li .service_txt_box .service_link .btn_review_more a{font-family:'Noto Sans KR'; letter-spacing:-1px;position:relative;} .whatDo_cont .service_list li .service_txt_box .service_link .btn_review_more a span{position:relative; z-index:1; display:inline-block;} .whatDo_cont .service_list li .service_txt_box .service_link .btn_review_more a:before{position:absolute; content:''; width:67px; height:6px; left:0; top:auto; bottom:0; background:#927433; opacity:0.15; z-index:-1;} /*odd*/ .whatDo_cont .service_list > li:nth-of-type(odd):before{left: -7%;} .whatDo_cont .service_list > li:nth-of-type(odd) .service_img_box{} .whatDo_cont .service_list > li:nth-of-type(odd) .service_img_box .service_img_ul .slick-dots{text-align: right;padding-right: 37px;} .whatDo_cont .service_list > li:nth-of-type(odd) .service_txt_box{} .whatDo_cont .service_list > li:nth-of-type(odd) .service_txt_box h3{padding-right: 62px;text-align: left;} .whatDo_cont .service_list > li:nth-of-type(odd) .service_txt_box .icon{right:0;} .whatDo_cont .service_list > li:nth-of-type(odd) .service_txt_box .program_list li{} /*even*/ .whatDo_cont .service_list > li:nth-of-type(even):before{right: -7%;} .whatDo_cont .service_list > li:nth-of-type(even) .service_img_box{} .whatDo_cont .service_list > li:nth-of-type(even) .service_img_box .service_img_ul .slick-dots{text-align:left;padding-left: 35px;} .whatDo_cont .service_list > li:nth-of-type(even) .service_txt_box{padding-right: 0;text-align: right;} .whatDo_cont .service_list > li:nth-of-type(even) .service_txt_box h3{padding-left: 68px;} .whatDo_cont .service_list > li:nth-of-type(even) .service_txt_box .icon{left:0;} .whatDo_cont .service_list > li:nth-of-type(even) .service_txt_box .program_list li{margin-right:0; margin-left:10px;} /* etc */ .whatDo_cont .service_list > li:nth-of-type(3) .service_txt_box h3{margin-bottom:10px;} .whatDo_cont .service_list > li:nth-of-type(5) .service_txt_box h3 {padding:0; line-height:35px; margin-bottom:5px;} .whatDo_cont .service_list > li:nth-of-type(5) .service_txt_box h3 span{margin-top:0;} .whatDo_cont .service_list > li:nth-of-type(5) .service_txt_box h3 span:before{bottom:0;} .whatDo_cont .service_list > li:nth-child(3):before{top: 136px;} .whatDo_cont .service_list > li:nth-child(4):before{top: 148px;} .whatDo_cont .service_list > li:nth-child(5):before{top:168px;} .whatDo_cont .whar_bnr{width:100%;box-sizing:border-box;margin-top:68px; margin-bottom:55px; font-size:0;} .whatDo_cont .whar_bnr a{display: block;width:100%;height:100%;} .whatDo_cont .whar_bnr img{width:100%;} .whatDo_cont .whar_bnr {background:url('../img/wlab/whatdo_bnr.jpg') no-repeat center;background-size: cover;width:100%;} .whatDo_cont .whar_bnr .w_custom {position:relative;height: 0;padding-bottom: 44%;} .whatDo_cont .whar_bnr .txt_box {position:absolute;width:100%;top:50%;transform:translateY(-50%);text-align: left;} .whatDo_cont .whar_bnr .txt_box p {font-size: 14px;line-height:1;font-weight:300;color:#fff;opacity:0.8;letter-spacing:-0.9px;} .whatDo_cont .whar_bnr .txt_box strong {display:block;font-size: 21px;font-weight:400;color:#fff;line-height: 1.33;letter-spacing: -1.05px;margin-top:13px;} .whatDo_cont .whar_bnr .txt_box strong span {font-size:inherit;font-weight:inherit;font-weight:500;color:inherit;} .whatDo_cont .whar_bnr .clean_mark {position:absolute;width: 80px;height: 80px;background:#2a5dac;right: 15px;top: 30px;border-radius:100%;text-align:center;} .whatDo_cont .whar_bnr .clean_mark:before {content:'';display:block;position:absolute;width: 68px;height: 68px;background:#fff;box-shadow: 0.5px 0.9px 13px 0 rgba(0, 0, 0, 0.42);top: 50%;left: 50%;transform: translate(-50%,-50%);border-radius:100%;z-index:0;} .whatDo_cont .whar_bnr .clean_mark .txt_box {transform:inherit;top: 16px;text-align: center;} .whatDo_cont .whar_bnr .clean_mark .txt_box p {font-size: 10px;line-height:1;font-weight:500;color:#444;letter-spacing: -0.5px;margin: 0 0 2px;-webkit-transform: scale(0.8);} .whatDo_cont .whar_bnr .clean_mark .txt_box strong {font-size: 18px;line-height:1;font-weight:600;color:#2a5dac;letter-spacing:-1.5px;display:inline-block;padding: 0 0 4px;margin: 0 0 0px;border-bottom:1px solid #ddd;} .whatDo_cont .whar_bnr .clean_mark .txt_box em {display:block;font-size: 10px;font-weight:600;color:#2a5dac;letter-spacing:0;-webkit-transform: scale(0.7);} /*about us*/ .about_cont .about_sub_tit {font-size: 25px;color:#333;font-weight:400;letter-spacing: -1.2px;line-height: 35px;margin-top:15px;} .about_cont .about_sub_tit span{font-weight:500;position: relative;display: inline-block;} .about_cont .about_sub_tit span:before{width: calc(100% + 4px);height: 10px;content:"";background:#927433;opacity:0.15;position: absolute;left:0;bottom: 2px;} /*intro*/ .about_cont .about_intro_box{width:100%;box-sizing:border-box;position: relative;padding-top: 40px;} .about_cont .about_intro_box:before{width: 100%;height: 375px;content:"";background:#2c4441 url('../img/wlab/story_about_intro_bg.jpg')no-repeat left top;position: absolute;top: 0;left: 0;z-index:-1;background-size: cover;} .about_cont .about_intro_box .about_intro{margin:0 auto;box-sizing:border-box;font-size:0;} .about_cont .about_intro_box .about_intro > div{display: inline-block;float: left;box-sizing:border-box;} .about_cont .about_intro_box .about_intro .intro_img{margin: 35px 0 34px;} .about_cont .about_intro_box .about_intro .intro_img img{max-width:100%;} .about_cont .about_intro_box .about_intro .intro_txt{} .about_cont .about_intro_box .about_intro .intro_txt .intro_tit span{font-size: 28px;color:#ccc;font-weight:normal;font-family: 'Trirong', serif;font-style:italic;display: inline-block;text-align: center;width: 100%;} .about_cont .about_intro_box .about_intro .intro_txt .intro_tit h3{font-size: 25px;color:#333;font-weight:400;letter-spacing:-1.5px;line-height: 35px;font-family:'Noto Sans KR';text-align: center;color: #fff;} .about_cont .about_intro_box .about_intro .intro_txt .intro_cont{position: relative;box-sizing:border-box;text-align: center;box-shadow: 4px 8px 20px rgba(0,0,0,0.2);padding-bottom: 50px;margin-bottom: 62px;} .about_cont .about_intro_box .about_intro .intro_txt .intro_cont p{font-size: 15px;color:#444;font-weight:400;letter-spacing: -1px;line-height: 23px;font-family:'Noto Sans KR';} .about_cont .about_intro_box .about_intro .intro_txt .intro_cont p + p{margin-top: 11px;} .about_cont .about_intro_box .intro_logo{width: 252px;margin: 30px auto 0;} .about_cont .about_intro_box .intro_logo img{max-width:100%;} /*introduce*/ .about_cont .about_introduce{width:100%;box-sizing:border-box;position: relative;background:#f8f7f6;padding-top: 42px;padding-bottom: 59px;} .about_cont .about_introduce .introduce_ul{width: 100%;box-sizing:border-box;margin:0 auto;font-size:0;} .about_cont .about_introduce .introduce_ul > li + li{position:relative;margin-top: 62px;} .about_cont .about_introduce .introduce_ul > li + li:after{position:absolute;content:'';width:calc(100% + 30px);height:12px;background:#eee;left:-15px;top: -30px;} .about_cont .about_introduce .introduce_ul li:after{clear:both;content:"";display: block;} .about_cont .about_introduce .introduce_ul li > div{display: inline-block;box-sizing:border-box;} .about_cont .about_introduce .introduce_ul li .introduce_img{width: calc(100% + 15px);margin-top: 27px;} .about_cont .about_introduce .introduce_ul li .introduce_img img{max-width:100%;} .about_cont .about_introduce .introduce_ul li .introduce_txt{} .about_cont .about_introduce .introduce_ul li .introduce_txt p{font-size: 15px;color:#555;font-weight: 300;letter-spacing: -1px;line-height: 21px;margin-top: 26px;} .about_cont .about_introduce .introduce_ul li .introduce_txt p + p{margin-top: 19px;} .about_cont .about_introduce .introduce_ul .sub_introduce_ul{margin-top: 21px;} .about_cont .about_introduce .introduce_ul .sub_introduce_ul li{font-size: 14px;color:#666;font-weight: 300;letter-spacing: -0.9px;line-height: 26px;box-sizing:border-box;position: relative;padding-left:13px;} .about_cont .about_introduce .introduce_ul .sub_introduce_ul li:before{width:4px;height:4px;content:"";background:#aaa;position: absolute;top:12px;left:0;box-sizing:border-box;border-radius:100%;} .about_cont .about_introduce .introduce_ul > li:nth-child(odd){padding-left:25px} .about_cont .about_introduce .introduce_ul > li:nth-child(even){padding-right:25px;} .about_cont .about_introduce .introduce_ul li:nth-of-type(2n+1) .introduce_txt{} .about_cont .about_introduce .introduce_ul li:nth-of-type(2n+1) .introduce_img{text-align: right;} .about_cont .about_introduce .introduce_ul li:nth-of-type(2n) .introduce_txt{} .about_cont .about_introduce .introduce_ul li:nth-of-type(2n) .introduce_img{margin-left:-15px;} /*프리미어 스칼프케어*/ .about_cont .about_premier{position:relative; margin:0 auto;box-sizing:border-box;margin-top: 53px;} .about_cont .about_premier:after{position:absolute;content:'';width:calc(100% + 30px);height:12px;background:#eee;left:-15px;bottom: -52px;} .about_cont .about_premier .premier_txt{display: inline-block;box-sizing:border-box;padding-left: 25px;} .about_cont .about_premier .premier_txt .about_sub_tit{margin:0;} .about_cont .about_premier .premier_txt p{font-size: 15px;color:#444;font-weight: 300;letter-spacing:-0.9px;line-height: 21px;margin-top: 20px;} .about_cont .about_premier .premier_txt p + p{margin-top: 18px;} .about_cont .about_premier .premier_hair{margin-top: 28px;font-size:0;padding-right: 60px;} .about_cont .about_premier .premier_hair img{max-width:100%;} .about_cont .about_premier .premier_img{display: inline-block;box-sizing:border-box;position: relative;font-size:0;margin-top: 27px;width: calc(100% + 15px);} .about_cont .about_premier .premier_img img{max-width:100%;} /*center*/ .about_cont .about_center{margin-top: 85px;padding-bottom:94px;} .about_cont .about_center .center_box{margin:0 auto;box-sizing:border-box;} .about_cont .about_center .center_box:after{clear:both;content:"";display: block;} .about_cont .about_center .center_img_wrap{width: 100%;display: inline-block;} .about_cont .about_center .center_img_wrap .center_img_b{} .about_cont .about_center .center_img_wrap .center_img_b img{width:100%;} .about_cont .about_center .center_img_wrap .center_img_s{width: calc(100% + 10px);box-sizing:border-box;margin-top:10px;margin-left: -5px;} .about_cont .about_center .center_img_wrap .center_img_s li{margin: 0 5px;cursor:pointer;display: inline-block;width:calc(33.3333% - 13px);} .about_cont .about_center .center_img_wrap .center_img_s li.slick-current img{border:1px solid #000;} .about_cont .about_center .center_img_wrap .center_img_s li img{width:100%; height:20vw; object-fit:cover; box-sizing:border-box;border:1px solid transparent;} .about_cont .about_center .center_txt{display: block;box-sizing:border-box;} .about_cont .about_center .center_txt h3{line-height: 35px;margin-bottom: 28px;} .about_cont .about_center .center_txt p{font-size: 15px;color:#444;font-weight: 300;letter-spacing:-0.9px;line-height: 21px;margin: 21px 0 37px;} .about_cont .about_center .center_txt .center_btn{width:180px;} .about_cont .about_center .center_txt .center_btn .btn_self_go.btn_go{font-size:15px;} /*history*/ .story_history_cont{width:100%;box-sizing:border-box;position: relative;background:url('../img/wlab/story_history_bg.jpg')no-repeat top;background-size:cover;padding:40px 15px 60px 15px;} .story_history_cont:before{width:100%;height:350px;content:"";background:url('../img/wlab/sub_history_before.jpg')no-repeat center;background-size:cover;position: absolute;top:0;left:0;} .story_history_cont:after{width:100%;height:320px;content:"";background:url('../img/wlab/sub_history_after.jpg')no-repeat center;background-size:cover;position: absolute;bottom:0;left:0;} .story_history_cont .history_tab{text-align:center;margin:0 auto;width:100%;box-sizing:border-box;font-size:0;position: relative;z-index:2;} .story_history_cont .history_tab li{display: inline-block;box-sizing:border-box;border-radius:5px;border:1px solid #ccc;text-align: center;} .story_history_cont .history_tab li + li{margin-left:10px;} .story_history_cont .history_tab li a{font-size:15px;color:#888;font-weight:400;letter-spacing:-1.2px;line-height:20px;font-family:'Noto Sans KR';display: block;box-sizing:border-box;padding:7.5px 11px;} .story_history_cont .history_tab li.on{border:1px solid #333;} .story_history_cont .history_tab li.on a{color:#333;} .story_history_cont .history_cont{width:100%;margin:0 auto;text-align:left;box-sizing:border-box;margin-top:40px;position: relative;z-index:2;} .story_history_cont .history_cont ol{font-size:0;} .story_history_cont .history_cont ol > li{position: relative;box-sizing:border-box;} .story_history_cont .history_cont ol > li > a{position: absolute;top:0px;} .story_history_cont .history_cont ol > li:last-child:before{display: none;} .story_history_cont .history_cont ol > li:before{width:1px;height:0;content:"";background:#275b4e;position: absolute;top:6px;left:1px;z-index:2;transition:all 0.5s;} .story_history_cont .history_cont ol > li.on:before{height:100%;transition:all 0.5s;} .story_history_cont .history_cont ol > li:after{clear:both;content:"";display: block;} .story_history_cont .history_cont ol > li .his_box{padding-bottom:60px;position: relative;box-sizing:border-box;padding-left:20px;} .story_history_cont .history_cont ol > li .his_box:after{clear:both;content:"";display: block;} .story_history_cont .history_cont ol > li .his_box:before{width:1px;height:100%;content:"";background:#ccc;position: absolute;top:6px;left:1px;} .story_history_cont .history_cont ol > li:last-child .his_box{padding-bottom:0;} .story_history_cont .history_cont ol > li:last-child .his_box:before{display: none;} .story_history_cont .history_cont ol > li .his_box > div{box-sizing:border-box;position: relative;} .story_history_cont .history_cont ol > li .his_txt:before{width:8px;height:8px;content:"";background:#275b4e;position: absolute;top:6px;left:-22px;box-sizing:border-box;border-radius:100%;} .story_history_cont .history_cont ol > li .his_txt dl{position: relative;box-sizing:border-box;} .story_history_cont .history_cont ol > li .his_txt dl dt{font-size:22px;color:#275b4e;font-weight:600;font-family:'Trirong', serif;position:relative;box-sizing:border-box;display:inline-block;line-height:20px;} .story_history_cont .history_cont ol > li .his_txt dl dt:before{width:100%;height:8px;content:"";background:#dcd8ce;position: absolute;z-index:-1;bottom:-1px;left:0;} .story_history_cont .history_cont ol > li .his_txt dl dd{margin-top:9px;} .story_history_cont .history_cont ol > li .his_txt dl dd ul li{font-size:14px;color:#333;font-weight:400;letter-spacing:-1px;line-height:27px;font-family:'Noto Sans KR';} .story_history_cont .history_cont ol > li .his_txt dl dd ul li.txt_emp p{font-size: 19px;color:#275b4e;font-weight:400;letter-spacing: -1px;} .story_history_cont .history_cont ol > li .his_txt dl dd ul li.txt_emp p span{font-size: 14px;color:#275b4e;font-weight:400;font-family:'Noto Sans KR';letter-spacing: -0.7px;} .story_history_cont .history_cont ol > li .his_txt dl dd ul li strong{font-weight:500;} .story_history_cont .history_cont ol > li .his_box .his_img{margin-top:13px;} .story_history_cont .history_cont ol > li .his_box .his_img img{width:100%;} @media only screen and (max-width:820px) { .cosmetic_middle_bnr .figure_ul {margin-top:48%;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:18%;} } @media only screen and (max-width:414px) { .cosmetic_middle_bnr .figure_ul {margin-top:19%;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:13%;} } @media only screen and (max-width:390px) { .cosmetic_middle_bnr .figure_ul {margin-top:16%;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:13%;} } @media only screen and (max-width:375px) { .story_history_cont .history_tab{text-align: center;} .story_history_cont .history_tab li + li{margin-left:5px;} .story_history_cont .history_tab li a{padding:7.5px 9px;} .cosmetic_middle_bnr .figure_ul {margin-top:14%;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:13%;} } @media only screen and (max-width:374px) { .about_cont .about_sub_tit{font-size:23px;} } @media only screen and (max-width:370px) { .whatDo_cont .whar_bnr .txt_box p{font-size:12px;} .whatDo_cont .whar_bnr .txt_box strong{font-size:16px;} } @media only screen and (max-width:360px) { .cosmetic_middle_bnr .figure_ul {margin-top:12%;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:13%;} .whatDo_cont .service_list li .service_txt_box .program_list li{font-size:12px;} } @media only screen and (max-width:355px) { .story_history_cont .history_tab li a{font-size:13px;} } @media only screen and (max-width:350px) { .about_cont .about_sub_tit{font-size:22px;} } @media only screen and (max-width:335px) { .about_cont .about_sub_tit{font-size:21px;} } @media only screen and (max-width:330px) { .whatDo_cont .whar_bnr .txt_box p{font-size:11px;} .whatDo_cont .whar_bnr .txt_box strong{font-size:15px;} } @media only screen and (max-width:320px) { .sub_story .brandStory_tit > h2{font-size:23px;} .sub_story .brand_advantage_info > ul li p{font-size:13.5px;} .sub_story .brand_special h2{font-size:17px;} .sub_story .brand_special h2 span{font-size:27px;} .sub_story .brand_special .special02 .special_img{padding:0 40px 0 0;} .sub_story .brand_advantage .av_box ul li .av_sub_tit{font-size:17px;} .sub_story .brand_advantage_info > ul li h4{font-size:17px;} .sub_story .brand_advantage_info > ul li h3{font-size:21px;} .cosmetic_routine .routine_tit h4, .cosmetic_knowhow .knowhow_tit, .cosmetic_daily h4{font-size:23px;} .cosmetic_rec_prd .rec_tit p, .cosmetic_knowhow .knowhow_cont li .cont_tit{font-size:17px;} .cosmetic_rec_prd .rec_tit span, .cosmetic_daily h4 span, .cosmetic_daily .clean_list li .clean_cont p{font-size:14px;} .cosmetic_knowhow .knowhow_tit span{font-size:19px;} .cosmetic_knowhow .knowhow_cont li .cont_txt{font-size:12px;} .cosmetic_pro h4{font-size:25px; line-height:135%;} .cosmetic_pro h4 span{font-size:15px;} .cosmetic_pro .pro_list li .pro_txt h5{font-size:19px;} .cosmetic_pro .pro_list li .pro_txt p{font-size:14px; word-break:keep-all;} .cosmetic_pro .pro_list li .pro_txt p br{display:none;} .cosmetic_middle_bnr .sub_title {padding-top:40px;} .cosmetic_middle_bnr .figure_ul + .figure_ul {margin-top:10%;} .cosmetic_middle_bnr .warning {font-size:12px;right:10px;} .cosmetic_daily .clean_list li .clean_cont span{font-size:13px;} .cosmetic_daily .daily_prd_list > li > .text_wrap > a{font-size:16px; width:105px;} .cosmetic_daily .daily_prd_list .sub_daily_prd li a{font-size:14px; letter-spacing:-1px;} .whatDo_cont h3, .whatDo_cont .service_list li .service_txt_box h3{font-size:23px;} .whatDo_cont .service_tab li p{font-size:14px;} .whatDo_cont .service_list li .service_txt_box .sub_des{font-size:17px;} .whatDo_cont .service_list li .service_txt_box .service_txt p{font-size:13px;} .whatDo_cont .service_list li .service_txt_box .program_list li{width:140px;} .about_cont .about_intro_box .about_intro .intro_txt .intro_tit span{font-size:23px;} .about_cont .about_intro_box .about_intro .intro_txt .intro_tit h3{font-size:23px; line-height:135%;} .about_cont .about_intro_box .about_intro .intro_txt .intro_cont p{font-size:14px; line-height:145%;} .about_cont .about_intro_box .intro_logo{width:200px;} .about_cont .about_sub_tit{font-size:21px;} .about_cont .about_introduce .introduce_ul > li:nth-child(odd){padding-left:15px;} .about_cont .about_introduce .introduce_ul > li:nth-child(even){padding-right:15px;} .about_cont .about_introduce .introduce_ul .sub_introduce_ul li{font-size:13px;} .about_cont .about_introduce .introduce_ul li .introduce_txt p, .about_cont .about_premier .premier_txt p, .about_cont .about_center .center_txt p{font-size:14px;} .about_cont .about_premier .premier_txt{padding-left:15px;} .about_cont .about_center .center_txt h3{line-height:135%;} } /*** R&D - service/rnd.html ***/ /* 일반 - 375 */ .rnd_title {box-sizing:border-box;} .rnd_title > .title_sm, .rnd_title > .title_lg, .rnd_title > .title_tag {display:block;margin:0 auto;padding:0;vertical-align:top;} .rnd_title > .title_sm {font-size:13px;line-height:15px;padding-bottom:3px;font-weight:500;color:#222;font-family:'Roboto',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;position:relative;z-index:1;display:inline-block; letter-spacing:0;} .rnd_title > .title_sm:before {left:0;bottom:0;height:1px;width:100%;background:#000;position:absolute;display:inline-block;content:"";} .rnd_title > .title_lg {font-size:28px;line-height:35px;letter-spacing:-1.2px;font-weight:400;font-style:italic;color:#333;font-family:'Trirong','Jeju Myeongjo',serif;} .rnd_title > .title_tag {font-size:18px;line-height:25px;letter-spacing:-0.6px;font-weight:300;color:#333;} .rnd_title > .title_sm + .title_lg {margin-top:17px;} .rnd_title > .title_sm + .title_lg + .title_tag {margin-top:9px;} .rnd_title > .title_sm + .title_tag {margin-top:10px;} .rnd_title > .title_sm + .title_tag + .title_lg {margin-top:12px;font-size: 29px;letter-spacing: -0.8px;} .rnd_discription {font-size:15px;line-height:23px;letter-spacing:-1.1px;padding-top:6px;font-weight:300;color:#666;box-sizing:border-box;} .rnd_discription strong {font-size:inherit;line-height:inherit;font-weight:500;color:inherit;} .clear{width:auto; margin:0 auto;} .clear > .rnd_title {float:none; width:342px; margin:0 auto;} .clear > .rnd_title + .rnd_discription {float:none;width:auto;padding-top:16px;color:#444; width:342px; margin:0 auto;} .clear > .rnd_title + .rnd_discription span{display:block; margin-bottom:12px;} .rnd_sec01 {padding-bottom:55px;background:#fafafa url('../img/da_image/bg_rnd_sec01.jpg') no-repeat 50% 0;background-size:cover;position:relative;z-index:2; height:auto;} .rnd_sec01 .w_custom {text-align:left;max-width:1300px;} .rnd_time_wrap {background:#27282c;padding:21px 0 2px;box-sizing:border-box;transform:translateY(-34%);margin-bottom:-49px;} .rnd_time_wrap dl {width:100%;margin:0 auto;box-sizing:border-box;position:relative;z-index:1;overflow:hidden;} .rnd_time_wrap dt, .rnd_time_wrap dd {} .rnd_time_wrap dt {position:absolute;left:100%;top:100%;} .rnd_time_wrap dd {display:block;width:100%;} .rnd_time_wrap ul {display:table;table-layout:fixed;width:100%;margin:0 auto;border-collapse:collapse;} .rnd_time_wrap ul li {display:inline-block;border-collapse:collapse;box-sizing:border-box;text-align:center;vertical-align:middle;width:50%;} .rnd_time_wrap ul li + li {width:50%;} .rnd_time_wrap ul li:nth-child(3) {margin-left:25%;} .rnd_time_wrap ul li .thumb {display:inline-block; width:30.5px; height:30.5px;} .rnd_time_wrap ul li:nth-child(2) .thumb{width:29px; height:29px;} .rnd_time_wrap ul li:nth-child(3) .thumb{width:26.5px; height:34px;} .rnd_time_wrap ul li:nth-child(4) .thumb{width:28px; height:29px;} .rnd_time_wrap ul li .thumb img {width:100%;} .rnd_time_wrap ul li .h_number {letter-spacing:-0.8px;padding:5px 0 19px;font-size:25px;line-height:25px;color:#fff;font-family:'Roboto',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;margin:0 auto;} .rnd_time_wrap ul li .h_number strong, .rnd_time_wrap ul li .h_number em {line-height:inherit;font-size:inherit;font-weight:inherit;color:inherit;font-family:inherit;margin:0;padding:0;display:inline-block;vertical-align:top;} .rnd_time_wrap ul li .h_number strong {} .rnd_time_wrap ul li .h_number em {} .rnd_time_wrap ul li p {font-size:15px;line-height:25px;font-weight:300;color:#fff;letter-spacing:-0.9px; margin-top:3px;} .rnd_develop_wrap {margin:56px auto 0;padding:0;position:relative;z-index:1;} .rnd_develop_wrap .rnd_logo {width:172px;text-align:center;position:absolute;left:50%;top: calc(50% + 9px);transform:translate(-50%, -50%);z-index:3;} .rnd_develop_wrap .rnd_logo img {vertical-align:top; width:auto; height:14.5px;} .rnd_develop_wrap .rnd_logo span {font-size:13px;line-height:22px;margin:3px auto 0;font-weight:300;color:#fff;font-family:'Roboto',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;display:block;} .rnd_develop_wrap .rnd_bg {margin:0 auto;padding:28px 0 21px;background:url(../img/da_image/bg_rnd_develop.png) no-repeat 50% 50%;height:257.5px;box-sizing:border-box;position:relative;z-index:1; background-size:auto 100%;} .rnd_develop_wrap ul {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);height:100%;width:100%;z-index:2;} .rnd_develop_wrap ul > li {position:absolute;display:inline-block;vertical-align:top;margin:0;padding:0;} .rnd_develop_wrap ul > li:nth-of-type(1) {right: calc(50% + 25px);top:-18px;} .rnd_develop_wrap ul > li:nth-of-type(2) {left: calc(50% + 25px);top:-18px;} .rnd_develop_wrap ul > li:nth-of-type(3) {right: calc(50% + 99px);top: calc(50% - 1px);transform:translateY(-50%);} .rnd_develop_wrap ul > li:nth-of-type(4) {left: calc(50% + 99px);top: calc(50% - 1px);transform:translateY(-50%);} .rnd_develop_wrap ul > li:nth-of-type(5) {right: calc(50% + 22px);bottom:-20px;} .rnd_develop_wrap ul > li:nth-of-type(6) {left: calc(50% + 33px);bottom:-20px;} .rnd_develop_wrap ul > li .thumb {margin:0 20px;width:50px;height:50px;border-radius:100%;position:relative;z-index:1;} .rnd_develop_wrap ul > li .thumb img {position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);} .rnd_develop_wrap ul > li:nth-child(1) .thumb img {width:auto; height:23px;} .rnd_develop_wrap ul > li:nth-child(2) .thumb img {width:auto; height:25px;} .rnd_develop_wrap ul > li:nth-child(3) .thumb img {width:auto; height:24px;} .rnd_develop_wrap ul > li:nth-child(4) .thumb img {width:auto; height:23px;} .rnd_develop_wrap ul > li:nth-child(5) .thumb img {width:auto; height:27px;} .rnd_develop_wrap ul > li:nth-child(6) .thumb img {width:auto; height:20.5px;} .rnd_develop_wrap ul > li dl {} .rnd_develop_wrap ul > li dl dt, .rnd_develop_wrap ul > li dl dd {margin:0;padding:0;vertical-align:top;} .rnd_develop_wrap ul > li dl dt {font-size:24px;line-height:27px;letter-spacing:-0.7px;margin-top:9px;font-weight:500;font-family:'Roboto',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif;} .rnd_develop_wrap ul > li dl dd {font-size:16px;line-height:22px;letter-spacing:-0.8px;margin-top:13px;font-weight:400;color:#666;} .rnd_develop_wrap ul > li:nth-of-type(odd) {} .rnd_develop_wrap ul > li:nth-of-type(odd) .thumb {float:right;} .rnd_develop_wrap ul > li:nth-of-type(odd) dl {text-align:right;float:left;} .rnd_develop_wrap ul > li:nth-of-type(even) {} .rnd_develop_wrap ul > li:nth-of-type(even) .thumb {float:left;} .rnd_develop_wrap ul > li:nth-of-type(even) dl {text-align:left;float:right;} .rnd_develop_wrap ul > li:nth-of-type(1) .thumb, .rnd_develop_wrap ul > li:nth-of-type(4) .thumb, .rnd_develop_wrap ul > li:nth-of-type(5) .thumb {background:#171b2c;} .rnd_develop_wrap ul > li:nth-of-type(2) .thumb, .rnd_develop_wrap ul > li:nth-of-type(3) .thumb, .rnd_develop_wrap ul > li:nth-of-type(6) .thumb {background:#1e3a37;} .rnd_develop_wrap ul > li:nth-of-type(1) dt, .rnd_develop_wrap ul > li:nth-of-type(4) dt, .rnd_develop_wrap ul > li:nth-of-type(5) dt {color:#093040;} .rnd_develop_wrap ul > li:nth-of-type(2) dt, .rnd_develop_wrap ul > li:nth-of-type(3) dt, .rnd_develop_wrap ul > li:nth-of-type(6) dt {color:#1e3a37;} .rnd_develop_info{} .rnd_develop_info > ul{margin-top:55px;} .rnd_develop_info > ul li{display:flex; align-items:center; justify-content:flex-start} .rnd_develop_info > ul li > div{font-size:0;} .rnd_develop_info > ul li .thumb{display:inline-block; width:70px; height:70px; border-radius:100%; background:#171b2c; text-align:center; line-height:70px; position:relative; margin-right:15px;} .rnd_develop_info > ul li + li{margin-top:15px;} .rnd_develop_info > ul li:nth-child(even) .thumb{background:#1e3a37;} .rnd_develop_info > ul li .thumb img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .rnd_develop_info > ul li:nth-child(1) .thumb img{width:auto; height:31.5px;} .rnd_develop_info > ul li:nth-child(2) .thumb img{width:auto; height:33.5px;} .rnd_develop_info > ul li:nth-child(3) .thumb img{width:auto; height:31.5px;} .rnd_develop_info > ul li:nth-child(4) .thumb img{width:auto; height:32.5px;} .rnd_develop_info > ul li:nth-child(5) .thumb img{width:auto; height:37.5px;} .rnd_develop_info > ul li:nth-child(6) .thumb img{width:auto; height:27.5px;} .rnd_develop_info > ul li dl{width:100%;} .rnd_develop_info > ul li dl dt{font-size:20px; font-weight:500; font-family:'Roboto'; color:#171b2c; border-bottom:1px solid #ddd; margin-bottom:5px; padding-bottom:5px; width:calc(100% - 10px);} .rnd_develop_info > ul li:nth-child(even) dl dt{color:#1e3a37;} .rnd_develop_info > ul li dl dd{font-size:15px; font-weight:400; color:#666; letter-spacing:-0.75px;} .rnd_sec02 {padding-top:68px;padding-bottom:100px;background:#f4f5f7 url(../img/da_image/bg_rnd_sec02.jpg) no-repeat 50% 0;background-size:cover;} .rnd_sec02 .w_custom {text-align:left;max-width:1200px; padding-right:0;} .rnd_sec02 .rnd_title, .rnd_sec02 .rnd_discription {padding-left:0;} .rnd_inno_list {padding-top:38px;font-size:0;vertical-align:top;} .rnd_inno_list .rnd_inno_list_li {height:320px;box-sizing:border-box;display:inline-block;vertical-align:top;position:relative;z-index:1;background-repeat:no-repeat !important;background-size:cover;background-position:50% 50% !important;transition:all 0.3s;} .rnd_inno_list .rnd_inno_list_li:nth-of-type(1) {background-image:url(../img/da_image/bg_rnd_inno01.jpg);} .rnd_inno_list .rnd_inno_list_li:nth-of-type(2) {background-image:url(../img/da_image/bg_rnd_inno02.jpg);} .rnd_inno_list .rnd_inno_list_li:nth-of-type(3) {background-image:url(../img/da_image/bg_rnd_inno03.jpg);} .rnd_inno_list .rnd_inno_list_li:nth-of-type(4) {background-image:url(../img/da_image/bg_rnd_inno04.jpg);} .rnd_inno_list .rnd_inno_list_li:before {display:none;} .rnd_inno_list .rnd_inno_list_li:hover:before {display:none;} .rnd_inno_list .rnd_inno_list_li > a {position:absolute;left:0;top:0;display:block;height:100%;width:100%;z-index:3;} .rnd_inno_list .rnd_inno_list_li.slick-slide{margin-right:15px; box-sizing:border-box;} .rnd_inno_list .rnd_inno_list_li .inno_cont {box-sizing:border-box;width:100%;padding:42px 0 0 20px;left:0;bottom:auto;top:0;position:absolute;z-index:2;transition:all .5s ease;} .rnd_inno_list .rnd_inno_list_li .inno_cont.off {opacity:1;transform:translateY(-27px);} .rnd_inno_list .rnd_inno_list_li .inno_cont.hov {opacity:1;transform:translateY(0px);bottom:auto;top:50px;} .rnd_inno_list .rnd_inno_list_li:nth-of-type(2) .inno_cont {padding-bottom:31px;} .rnd_inno_list .rnd_inno_list_li .thumb {width:21.5px; height:31.5px;vertical-align:top;display:block; margin-bottom:15px;} .rnd_inno_list .rnd_inno_list_li:nth-child(3) .thumb {width:31.5px;} .rnd_inno_list .rnd_inno_list_li:nth-child(4) .thumb {width:23.5px;} .rnd_inno_list .rnd_inno_list_li .thumb img {vertical-align:top; width:100%;} .rnd_inno_list .rnd_inno_list_li dl {} .rnd_inno_list .rnd_inno_list_li dl dt, .rnd_inno_list .rnd_inno_list_li dl dd {text-align:left;color:#fff;transition:all .5s ease;} .rnd_inno_list .rnd_inno_list_li dl dt {font-size:18px;line-height:24px;letter-spacing: -0.9px;font-weight:500;} .rnd_inno_list .rnd_inno_list_li dl dd {font-size:15px;line-height:21.5px;letter-spacing:-0.8px;font-weight:300;opacity:0.8;}/*height:0;overflow:hidden;*/ /*.rnd_inno_list > li:hover dl dd {height:auto;overflow:inherit;}*/ .rnd_inno_list .rnd_inno_list_li dl dd p {padding:11px 0 44px;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;vertical-align:top;margin:0;} .rnd_inno_list .rnd_inno_list_li dl dd p span {font-size:15px;line-height:26px;letter-spacing:-0.7px;font-weight:inherit;color:inherit;display:inline-block;vertical-align:top;margin:0;padding:0;} .rnd_inno_list .rnd_inno_list_li dl dd .btn_mores {height:27px;line-height:26px;padding:0 26px 1px 0;font-size:13px;letter-spacing:-0.7px;font-weight:300;color:#fff;display:inline-block;vertical-align:top;margin:0 auto 0 0;position:relative;z-index:1;font-family:'Roboto',Malgun Gothic,'맑은 고딕',AppleGothic,Dotum,'돋움',sans-serif; text-transform:uppercase;} .rnd_inno_list .rnd_inno_list_li dl dd .btn_mores:before{display:none;} .rnd_inno_list .rnd_inno_list_li dl dd .btn_mores:after {background:url('../img/da_image/btn_mores_arrow.png') no-repeat center center; left:auto;bottom:auto;width:18.5px;height:18px;position:absolute;display:inline-block;content:""; background-size:100%; margin-top:4px; margin-left:7.5px;} .rnd_inno_list .slick-dots {bottom:-20px;transform:translateX(-50%);text-align:center;left:50%;position:absolute;z-index:3;margin:0 auto;padding:0;font-size:0;} .rnd_inno_list .slick-dots li, .recommend_wrap .slick-dots button {font-size:0;margin:0;padding:0;border:0;outline:0;display:inline-block;vertical-align:top;opacity:1;transition:all 0.3s;} .rnd_inno_list .slick-dots li {width:6px;height:6px;line-height:6px;position:relative;z-index:1;} .rnd_inno_list .slick-dots li + li {margin-left:10px;} .rnd_inno_list .slick-dots li button {width:6px;height:6px;border-radius:100%;background:#ccc;opacity:0.8;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%) scale(0.65, 0.65); border:0; padding:0; } .rnd_inno_list .slick-dots li.slick-active {} .rnd_inno_list .slick-dots li.slick-active button {transform:translate(-50%, -50%) scale(1, 1);background:#333;opacity:1;} .rnd_sec03 {padding-top:68px;;text-align:center;position:relative;z-index:1;} .rnd_sec03 .w_custom {max-width:1200px; padding-left:0; padding-right:0;} .rnd_sec03 .rnd_title > .title_sm + .title_lg {margin-top:17px; font-size:29px;} .rnd_sec03 .txt_opacity {transform:translate(-1098px, 0) rotate(90deg);top:445px;font-size:100px;letter-spacing:4px;font-weight:400;color:#ddd;font-style:italic;font-family: 'Italianno', cursive;opacity:0.5;position:absolute;left:50%;} .rnd_sec03 ol {font-size:0;vertical-align:top;margin:0 auto;padding:0;} .rnd_sec03 ol > li {width:100%;counter-increment:rnd-number;text-align:left;display:block;vertical-align:top;margin:0;padding:0;box-sizing:border-box;} .rnd_sec03 ol > li:nth-of-type(2), .rnd_sec03 ol > li:nth-of-type(3) {width:100%;display:inline-block;} .rnd_sec03 ol > li:nth-of-type(1), .rnd_sec03 ol > li:nth-of-type(5) {text-align:right;} .rnd_sec03 ol > li:nth-of-type(1) {margin-top:35px;margin-bottom:42px;padding-right:0;height:auto;} .rnd_sec03 ol > li:nth-of-type(2) {float:right;padding-left:0;padding-top:0;margin-right:0;width:100%; margin-bottom:45px;} .rnd_sec03 ol > li:nth-of-type(3){text-align:right;margin-bottom: 47px;} .rnd_sec03 ol > li:nth-of-type(4) {margin-top:0;margin-bottom:45px;padding-left:0;height:auto;} .rnd_sec03 ol > li:nth-of-type(5){margin-bottom:47px;} .rnd_sec03 ol > li:nth-of-type(6) {} .rnd_sec03 ol > li:nth-of-type(6):before {height:240px;transform:translateY(260px);} .rnd_sec03 ol > li .thumb {display:inline-block;vertical-align:top;font-size:0;position:relative;z-index:2;} .rnd_sec03 ol > li .thumb:before {display:none;} .rnd_sec03 ol > li .thumb img {vertical-align:top; width:100%;} .rnd_sec03 ol > li dl {display:inline-block;vertical-align:top;position:relative;padding-top:18px;padding-right: 10px; width:285px;} .rnd_sec03 ol > li dl dt, .rnd_sec03 ol > li dl dd {margin:0;padding:0;vertical-align:top; display:block; text-align:left;} .rnd_sec03 ol > li dl dt {position:relative; font-size:16px;line-height:23px;font-weight:400;color:#222;letter-spacing:-1px;} .rnd_sec03 ol > li dl dt:before {margin:0 auto 27px 0;content:'0' counter(rnd-number);font-size:25px;line-height:1em;letter-spacing:-1px;font-weight:300;font-style:italic;color:#27282c;display:block;font-family:'Trirong','Jeju Myeongjo',serif;padding:0;vertical-align:top; position:absolute; top:0; left:-40px;} .rnd_sec03 ol > li dl dd {margin-top:5px;font-size:15px;line-height:23px;letter-spacing:-0.8px;font-weight:300;color:#666;} .rnd_sec03 ol > li dl dd .list_check {padding-top:11px;} .rnd_sec03 ol > li dl dd .list_check li {line-height:30px;color:#444; font-size:14px; line-height:25px; padding-left:20px;} .rnd_sec03 ol > li dl dd .list_check li:before{top:8px; left:3px;} .rnd_sec03 ol > li:nth-of-type(1) dl {margin-left:auto;} .rnd_sec03 ol > li:nth-of-type(2) dl{float:right;} .rnd_sec03 ol > li:nth-of-type(4) dl {float:right;} .rnd_sec03 ol > li:nth-of-type(5) dl {} .rnd_sec03 ol > li:nth-of-type(6) dl {float:right;} .rnd_sec03 ol > li:nth-of-type(1) .thumb {position:relative;left:auto;right:0;padding-left: 40px;} .rnd_sec03 ol > li:nth-of-type(2) .thumb {margin-top:0;padding-right: 55px;} .rnd_sec03 ol > li:nth-of-type(3) .thumb {margin-bottom:0;padding-left: 40px;} .rnd_sec03 ol > li:nth-of-type(4) .thumb {position:relative;right:auto;padding-right: 55px;} .rnd_sec03 ol > li:nth-of-type(5) .thumb{padding-left:40px;} .rnd_sec03 ol > li:nth-of-type(6) .thumb{padding-right:55px;} .rnd_inno_list > li:nth-of-type(2)[data-aos].aos-animate {transition-delay:0.2s;} .rnd_inno_list > li:nth-of-type(3)[data-aos].aos-animate {transition-delay:0.3s;} .rnd_inno_list > li:nth-of-type(4)[data-aos].aos-animate {transition-delay:0.4s;} .rnd_sec04 {padding-top:60px;} .rnd_sec04 .rnd_ingredients_bnr {background:url('../img/da_image/rnd_ingredients_bg.jpg') no-repeat center;position:relative;width:100%;height: 0;padding-bottom: 46.67%;background-size:100%;} .rnd_sec04 .rnd_ingredients_bnr span {position:absolute;display:block;width: 100%;font-size: 30px;line-height:1;font-weight:400;color:#fff;letter-spacing:0;font-family:'Trirong';text-align:right;font-style:italic;bottom: -5px;right: 2px;} .rnd_sec04 .ingredients_ul {text-align:center;padding-top:40px;} .rnd_sec04 .ingredients_ul li {display:inline-block;vertical-align:top;width: 50%;float: left;} .rnd_sec04 .ingredients_ul li:nth-child(n+3) {margin-top:30px;} .rnd_sec04 .ingredients_ul li .icon_box {width: 100px;height: 100px;border:1px solid #ddd;background:#fff;border-radius:100%;padding: 10px;margin: 0 auto;box-sizing:border-box;} .rnd_sec04 .ingredients_ul li .icon_box span {display:block;width:100%;height:100%;border-radius:100%;} .rnd_sec04 .ingredients_ul li:nth-child(1) .icon_box span {background:#f9f9f9 url('../img/da_image/rnd_icon01.png') no-repeat center;background-size: auto 44px;} .rnd_sec04 .ingredients_ul li:nth-child(2) .icon_box span {background: #f9f9f9 url('../img/da_image/rnd_icon02.png') no-repeat center right 48%;background-size: auto 45px;} .rnd_sec04 .ingredients_ul li:nth-child(3) .icon_box span {background:#f9f9f9 url('../img/da_image/rnd_icon03.png') no-repeat center;background-size: auto 40px;} .rnd_sec04 .ingredients_ul li:nth-child(4) .icon_box span {background:#f9f9f9 url('../img/da_image/rnd_icon04.png') no-repeat center;background-size: auto 45px;} .rnd_sec04 .ingredients_ul li .txt_box {} .rnd_sec04 .ingredients_ul li .txt_box strong {display:block;font-size: 16px;line-height: 1.38;font-weight:400;color:#333;letter-spacing:-0.05em;padding: 16px 0 10px;} .rnd_sec04 .ingredients_ul li .txt_box p {font-size: 13px;line-height: 1.46;font-weight:400;color:#888888;letter-spacing:-0.05em;} @media only screen and (max-width:1920px) { .rnd_sec01, .rnd_sec02 {background-size:cover;} } @media only screen and (max-width:360px) { .rnd_time_wrap ul li p{font-size:14px;} .rnd_time_wrap ul li .h_number{font-size:23px;} .rnd_title > .title_lg{font-size:25px;} .rnd_title > .title_tag{font-size:17px;} .rnd_title > .title_sm + .title_tag + .title_lg{font-size:27px; line-height:115%;} .rnd_discription{font-size:14px;} .rnd_develop_info > ul li dl dd{font-size:14px;} .rnd_sec03 ol > li dl{width:265px;} .rnd_sec03 ol > li dl dt{font-size:15px;} .rnd_sec03 ol > li dl dd{font-size:14px;} .rnd_sec03 .rnd_title > .title_sm + .title_lg{font-size:27px;} } @media only screen and (max-width:320px) { .rnd_time_wrap ul li .h_number{font-size:21px;} .rnd_title > .title_lg{font-size:23px; line-height:28px;} .rnd_title > .title_sm + .title_tag + .title_lg{font-size:25px;} .rnd_discription{font-size:13px;} .rnd_sec01{height:1250px;} .rnd_develop_wrap .rnd_bg{height:200px;} .rnd_develop_wrap ul > li:nth-of-type(1){right:calc(50% + 30px); top:-30px;} .rnd_develop_wrap ul > li:nth-of-type(2){left:calc(50% + 30px); top:-30px;} .rnd_develop_wrap ul > li:nth-of-type(5){right:calc(50% + 34px); bottom:-30px;} .rnd_develop_wrap ul > li:nth-of-type(6){left:calc(50% + 34px); bottom:-30px;} .rnd_develop_wrap ul > li .thumb{margin:0;} .rnd_develop_info > ul li .thumb{width:60px; height:60px;} .rnd_develop_info > ul li dl dt{font-size:17px;} .rnd_develop_info > ul li dl dd{font-size:13px;} .rnd_inno_list .rnd_inno_list_li .inno_cont{padding:40px 10px 0 10px;} .rnd_inno_list .rnd_inno_list_li dl dt{font-size:16px;} .rnd_inno_list .rnd_inno_list_li dl dd{font-size:14px;} .rnd_sec03 .rnd_title > .title_sm + .title_lg{font-size:25px;} .rnd_sec03 ol > li:nth-of-type(1) .thumb, .rnd_sec03 ol > li:nth-of-type(3) .thumb, .rnd_sec03 ol > li:nth-of-type(5) .thumb{padding-left:30px;} .rnd_sec03 ol > li:nth-of-type(4) .thumb, .rnd_sec03 ol > li:nth-of-type(6) .thumb{padding-right:45px;} .rnd_sec03 ol > li dl{width:235px;} .rnd_sec03 ol > li dl dt{font-size:14px;} .rnd_sec03 ol > li dl dt:before{font-size:23px; left:-35px;} .rnd_sec03 ol > li dl dd{font-size:13px; letter-spacing:-1px;} .rnd_sec03 ol > li dl dd .list_check li{font-size:13px;} } /*** 특허&출원 - service/patent.html ***/ /* 일반 - 375 */ .patent_tit{text-align:center;} .patent_tit > span{position:relative; font-family: 'Jomolhari';font-size: 13.5px;color: #313131;border-top:1px solid rgba(37,37,37,0.5);border-bottom:1px solid rgba(37,37,37,0.5);display:inline-block;padding:4px 0;} .patent_sec02 .patent_tit > span, .patent_list01 .patent_tit > span, .patent_list02 .patent_tit > span{font-size: 13.5px;border-top:1px solid rgba(37,37,37,0.3);border-bottom:1px solid rgba(37,37,37,0.3);} .patent_tit > span:after{position:absolute;font-family: 'Jomolhari';font-size: 80px;color:#333;opacity:0.075;left: 50%;top: 50%;transform: translate(-50%, -50%);} .patent_tit > h3{font-size: 25px;font-weight: 300;line-height: 1;letter-spacing: -2.2px;color: #010101;margin-top: 31px;margin-bottom: 21px;} .patent_tit > h3 strong{font-weight:500;} .patent_tit > h4{font-size: 19px; line-height: 1; letter-spacing: -1.5px; color: #010101; font-weight:500; margin-bottom:20px;} .patent_tit > p{font-size: 14px;font-weight: 400;line-height: 21px;letter-spacing: -0.8px;color: #454444;opacity: 0.8;} .patent_tit > p + p{margin-top:10px;} .patent_sec01{} .patent_sec01 .patent_tit{margin-bottom:22px;} .patent_sec01 .txt_wrap{background:url('../img/da_image/patent_sec01_bg.jpg') no-repeat left top; width:100%; height:450px; background-size:100%; box-sizing:border-box; padding-top:35px; text-align:center;} .patent_sec01 .txt_wrap h4{font-size: 18px;font-weight: 400;line-height: 1;letter-spacing: -0.8px;color: rgba(49, 49, 49, 0.55);margin-bottom: 18px;} .patent_sec01 .txt_wrap h3{font-size: 25px;line-height: 32px;letter-spacing: -0.5px;color: #313131;font-family: 'Jeju Myeongjo';font-weight:normal;} .patent_sec01 .txt_wrap .sub_txt{position:relative;width:calc(100% - 10px);padding: 22px 0 20px;border: solid 1px #ddd;box-sizing:border-box; margin:21px auto 0;} .patent_sec01 .txt_wrap .sub_txt:after{position:absolute;content:"";width:55px;height:55px;background:url('../img/da_image/solep_logo.png') no-repeat center center;top: -9px;right: -6px; background-size:100%;} .patent_sec01 .txt_wrap .sub_txt > h5{font-family: 'Jomolhari';font-size: 17px;line-height: 1.21;color: #790023;font-weight:normal;margin-bottom: 12px;} .patent_sec01 .txt_wrap .sub_txt > p{font-size: 14px;line-height: 22px;letter-spacing: -0.6px;color:#000;opacity:0.9;font-weight:300;} .patent_sec01 .txt_wrap .sub_txt > p strong{font-weight:500;} .patent_sec01 .img_wrap{position:relative;z-index:1; /* margin-bottom:; */font-size:0;} .patent_sec01 .img_wrap img{width:100%;} .patent_sec02{background:url('../img/da_image/patent_sec02_bg.jpg') no-repeat center center;width:100%;height:560px;background-size:cover;padding-top: 50px;box-sizing: border-box;} .patent_sec02 .txt_wrap{padding-bottom:20px;} .patent_sec02 .txt_wrap > span{font-size: 13px;font-weight: 400;letter-spacing: 1.1px;text-align: center;color: #fff;padding: 7px 12.2px;background:#790023;display: inline-block;line-height: 1;border-radius:60px;} .patent_sec02 .txt_wrap > h5{font-family: 'Jeju Myeongjo';font-size: 17px;line-height:1;letter-spacing: -0.6px;color: #3e3e3e;font-weight:normal;margin-top: 19px;} .patent_sec02 .txt_wrap > h4{font-size: 25px;line-height: 1.07;letter-spacing: -1.25px;color: #0b1431;font-weight: 300;margin-top: 13px;margin-bottom: 24px;} .patent_sec02 .txt_wrap > h4 strong{font-weight:500;} .patent_sec02 .txt_wrap > p{position:relative;font-size: 15px;font-weight: 300;line-height: 23px;letter-spacing: -1px;color: #0b1431;padding-left:30px;} .patent_sec02 .txt_wrap > p:before{position:absolute;content:'';background:url('../img/da_image/patent_sec02_check_icon.png') no-repeat center center;width:21px;height: 22px;vertical-align:middle;background-size: cover; top:0; left:0;} .patent_sec02 .txt_wrap > p strong{font-weight:500;} .patent_sec02 .img_wrap{padding-top:5px; text-align:center;} .patent_sec02 .img_wrap img{width:100%; max-width:400px;} .patent_list01 .patent_tit{text-align:center; padding-top:68px; padding-bottom:45px;} .patent_list01 .patent_tit > span:after{content:'01';} .patent_list01 .raw_material{width:100%;height: 1093.5px;background:#f9f8f5;padding: 40px 0 0;box-sizing:border-box;} .patent_list01 .raw_material{position:relative;} .patent_list01 .raw_material ul{font-size:0; text-align:center; max-width:400px; margin:0 auto;} .patent_list01 .raw_material li{display:inline-block; vertical-align:top; position:relative;} .patent_list01 .raw_material dl{display:table;} .patent_list01 .raw_material dt, .patent_list01 .raw_material dd{display:table-cell; vertical-align:middle;} .patent_list01 .raw_material dt{padding-right: 56px; position:relative;} .patent_list01 .raw_material dt img{width:100%;} .patent_list01 .raw_material dd li{padding-bottom: 6px;} .patent_list01 .raw_material p{font-size: 14px; font-weight: 500; letter-spacing: -1.2px; text-align: left; color: #000;} .patent_list01 .raw_material p em{position:relative;font-family: 'Italianno';font-size: 28px;line-height: 40px;color: #000;display:inline-block;margin-bottom:3px;letter-spacing:0;} .patent_list01 .raw_material p em:before{position:absolute;content:'a.';font-family: 'Italianno';font-size: 35px;color:#000;top: -2px;left: -31px;} .patent_list01 .raw_material p em:after{position:absolute; content:''; width:100%; height:1px; background:#3e3d3d; left:0; bottom:8px;} .patent_list01 .raw_material span.under_line{position:relative;display:inline-block;font-size: 13px;font-weight: 400;line-height: 1.82;letter-spacing: -1px;color: #6a6a6a;margin-top: 0px;z-index:1; float:left;} .patent_list01 .raw_material span:after{position:absolute; content:''; width:100%; height:7px; background:#ebebeb; left:0; bottom:0px; z-index:-1;} .patent_list01 .raw_material .list_li02 dt, .patent_list01 .raw_material .list_li04 dt, .patent_list01 .raw_material .list_li06 dt{float:right;} .patent_list01 .raw_material .list_li02 dd, .patent_list01 .raw_material .list_li04 dd, .patent_list01 .raw_material .list_li06 dd{float:left;} .patent_list01 .raw_material .list_li01{margin-bottom:40px;} .patent_list01 .raw_material .list_li01 dt{width:134px; height:156px; position:relative; left:5px;} .patent_list01 .raw_material .list_li01 p em:after{width:66%;} .patent_list01 .raw_material .list_li01 p em span:after{position:absolute;content:'';width: 93px;height:1px;left: 0;top: 32px;background:#3e3d3d; z-index:1;} .patent_list01 .raw_material .list_li02{margin-bottom:18px;} .patent_list01 .raw_material .list_li02 dt{width:134px; height:114px; padding-right:0; top:-12px;} .patent_list01 .raw_material .list_li02 dd{padding-left:50px; margin-right:88px;} .patent_list01 .raw_material .list_li02 dd li{padding-bottom:10px;} .patent_list01 .raw_material .list_li02 p em:before{content:'b.';} .patent_list01 .raw_material .list_li03{margin-bottom:38px;} .patent_list01 .raw_material .list_li03 dt{width:134px; height:150px; padding-left:0; padding-right:70px;} .patent_list01 .raw_material .list_li03 dd li{padding-bottom:6px;} .patent_list01 .raw_material .list_li03 p em:before{content:'c.';} .patent_list01 .raw_material .list_li04{margin-bottom:28px;} .patent_list01 .raw_material .list_li04 dt{width:118px; height:156px; padding-right:0; top:-9px;} .patent_list01 .raw_material .list_li04 dd{padding-left:50px; margin-right:101px;} .patent_list01 .raw_material .list_li04 dd li{padding-bottom:0; margin-top:26px;} .patent_list01 .raw_material .list_li04 p em:before{content:'d.';} .patent_list01 .raw_material .list_li05{margin-bottom:28px;} .patent_list01 .raw_material .list_li05 dt{width:134px; height:116px; top:-5px; padding-left:0px; padding-right:70px;} .patent_list01 .raw_material .list_li05 dd li{padding-bottom:15px;} .patent_list01 .raw_material .list_li05 p em:before{content:'e.';} .patent_list01 .raw_material .list_li06{} .patent_list01 .raw_material .list_li06 dt{width:134px; height:126px; padding-right:0; top:-3px;} .patent_list01 .raw_material .list_li06 dd{padding-left:50px; margin-right:71px;} .patent_list01 .raw_material .list_li06 dd li{padding-bottom:0; margin-top:16px;} .patent_list01 .raw_material .list_li06 p em:before{content:'f.';top:0; left:-35px;} .patent_list01 .raw_material .material_not{position:absolute; font-size: 12px; font-weight: 400; letter-spacing: -0.75px; color: #0b1431; bottom:40px; right:15px;} .patent_list01 .raw_material .material_not:after{display:none;} .patent_list02{padding:70px 0 47px;} .patent_list02 .patent_tit{text-align:left;} .patent_list02 .patent_tit > h3{margin-top:15px; line-height: 1.34; margin-bottom:18px;} .patent_list02 .patent_tit > span:after{content:'02'; left:247px; top:62px;} .patent_list02 .img_wrap{position:relative; z-index:1; font-size:0; margin-bottom:39px;} .patent_list02 .img_wrap img{width:100%;} .patent_list02 .img_wrap:before{position:absolute; content:''; width:160px; height:150px; background:#f5f5f5; top:-20px; right:0; z-index:-1;} .patent_list03{padding-bottom:40px;} .patent_list03 .img_wrap{position:relative; z-index:1; font-size:0;} .patent_list03 .img_wrap img{width:100%;} .patent_list03 .patent_tit{padding-top:59px;} .patent_list03 .patent_tit > span:after{content:'03';} .patent_list03 .patent_tit > h3{margin-top:15px; line-height: 1.34;} .patent_list04{position:relative; padding-bottom:58px;} .patent_list04 .patent_tit{position:relative; z-index:1; text-align:left;} .patent_list04 .patent_tit > h3{margin-top:15px; line-height: 1.34;} .patent_list04 .patent_tit > span:after{content:'04'; left:256px; top:60px;} .patent_list04 .img_wrap{position:relative;z-index:2;padding-top: 15px; font-size:0; margin-bottom:38px;} .patent_brand_bg{position:relative; width:100%; background:url('../img/da_image/patent_brand_bg.jpg') no-repeat center top; background-size:cover; z-index:1; box-sizing:border-box; padding-top:105px;} .patent_brand{} .patent_brand .tit_wrap{padding-top:53px;} .patent_brand .tit_wrap:before{position:absolute;content:'';width:600px;height:750px;top:0;left: -260px;z-index:-1;} .patent_brand .tit_wrap > h5{font-size: 18px;line-height: 1;color: #111;font-weight: 400;margin-bottom: 20px; letter-spacing:-1px;} .patent_brand .tit_wrap > h3{font-family: 'Jomolhari';font-size: 38px;line-height: 45px;color: #111;font-weight:normal;margin-bottom: 16px;} .patent_brand .tit_wrap > p{font-size: 14px; font-weight: 300; line-height: 21px; letter-spacing: -0.72px; text-align: left; color: #222;} .patent_brand .certificate_list{margin-top:30px;padding-bottom:27px;border-top:1px solid #1b253c;} .patent_brand .certificate_list ol{counter-reset: ordered; } .patent_brand .certificate_list ol li{position:relative;border-bottom:1px solid #ddd;padding: 14px 0 14px 35px;box-sizing:border-box;min-height: 70px;display: flex;justify-content: flex-start;align-items: center;} .patent_brand .certificate_list ol li + li {margin-top: 0;} .patent_brand .certificate_list ol li:before, .patent_brand .certificate_list ol li .bbs_number{font-family: 'Jomolhari';font-size: 15px;color:#555;padding-left:10px;padding-right:30px;position: absolute;left: 4px;top: 50%;transform: translateY(-50%);} /*.patent_brand .certificate_list ol li:before {content:counter(ordered);counter-increment: ordered;}*/ .patent_brand .certificate_list ol li:after{position:absolute;content:'0';left: 5px;top: 50%;transform: translateY(-50%);font-family:'Jomolhari';font-size: 15px;color:#555;} .patent_brand .certificate_list ol li a{font-size: 15px;letter-spacing: -0.75px;color: #555;line-height: 20px;font-weight:400;position: relative;display: block;padding-right: 35px; width:100%; height:100%; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .patent_brand .certificate_list ol li a h3, .patent_brand .certificate_list ol li a h4, .patent_brand .certificate_list ol li a span {font-size:inherit;letter-spacing:inherit;color:inherit;line-height:inherit;font-weight:inherit;} .patent_brand .certificate_list ol li a br {display:none;} .patent_brand .certificate_list ol li a:after{position: absolute;content:'';background:url('../img/da_image/certificate_list_arrow.png') no-repeat center center;width: 25px;height: 7px;vertical-align:middle;margin-bottom: 10px;margin-left: 15px;background-size: 100%;top: 50%;right: 0;margin-top: -3.5px;} .patent_brand .certificate_list ol li:last-child a:after{display: none;} .certificate_list_layer{} .certificate_list_layer .layer_tit{width:100%;min-height:60px;background:#f3f5f8;text-align:center;padding:16px 15px;box-sizing:border-box;} .certificate_list_layer .layer_tit > h3{font-size:18px; font-weight:500; color:#333; line-height: 27px; letter-spacing: -1.8px;} .certificate_list_layer .layer_tit > h3 span, .certificate_list_layer .layer_tit > h3 em{display:inline-block; position:relative; z-index:1;font-size:inherit;color:inherit;font-weight:inherit;} .certificate_list_layer .layer_tit > h3 span:before, .certificate_list_layer .layer_tit > h3 em:before{position:absolute; content:''; width:100%; height:7px; background:#d7e1f3; z-index:-1; left:0; bottom:0;} .certificate_list_layer .layer_tit > h4{display:inline-block; position:relative; z-index:1; font-size:16px; font-weight:400; color:#666; letter-spacing:-1.1px; margin-top:3px;} .certificate_list_layer .layer_tit > h4:before{position:absolute; content:''; width:100%; height:7px; background:#d7e1f3; z-index:-1; left:0; bottom:1px;} .certificate_list_layer .img_wrap{display:flex;align-items:center;justify-content:center;width:100%;padding:19px 0 23px;background:#fff;vertical-align:middle;box-sizing:border-box;} .certificate_list_layer .img_wrap img{width:100%;height:auto;margin:0 auto;vertical-align:middle;} .certificate_list_layer .layer_bg{display:none; position:fixed; top:0; left:0; background:rgba(0,0,0,0.5); width:100%; height:100%; z-index:999;} .certificate_list_layer .close_btn{position:absolute;top: 9px;right: 9px;cursor:pointer;width: 15px;height: 15px;} .certificate_list_layer .close_btn:before{display:inline-block;position:absolute;width:20px;height:1px;background:#333;transform:rotate(45deg);left:50%;transform: translate(-50%, -50%) rotate(45deg);top: 50%;content:"";} .certificate_list_layer .close_btn:after{display:inline-block;position:absolute;width:1px;height:20px;background:#333;transform:rotate(45deg);left:50%;transform: translate(-50%, -50%) rotate(45deg);top: 50%;content:"";} .certificate_list_layer .close_btn span.line01{} .certificate_list_layer .close_btn span.line02{} .certificate_list_layer .certificate_layer{display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; border:1px solid #222; box-sizing:border-box; z-index:9999;width:calc(100% - 30px);max-height: calc(100% - 48px);} .certificate_list_layer .certificate_layer.list07 .img_wrap {padding-bottom:25px;} .certificate_list_layer .certificate_layer.list04 .img_wrap {padding-left:5px;padding-right:15px;} .certificate_list_layer .certificate_layer.list03 .before_after{ padding:25px 30px 45px; font-size:0;box-sizing:border-box;} .certificate_list_layer .certificate_layer.list03 .before_after .test{position:relative; width: calc(50% - 5px); display:inline-block; margin-bottom:23px;} .certificate_list_layer .certificate_layer.list03 .before_after .test > img {width:100%;height:auto;} .certificate_list_layer .certificate_layer.list03 .before_after .test.bofore:before{position:absolute; content:''; width:69px; height:56px; background:url('../img/da_image/certificate_emblem.png') no-repeat center center;background-size:auto 56px; top:-10px; left:-19px;} .certificate_list_layer .certificate_layer.list03 .before_after .test.after{margin-left:10px;} .certificate_list_layer .certificate_layer.list03 .before_after .test.after:before{position:absolute;content:'';width:30px;height:30px;background:#0b3040;border-radius:100%;top:50%;margin-top: -30px;left: -20px;} .certificate_list_layer .certificate_layer.list03 .before_after .test.after:after{position:absolute;content:'';width:10px;height:8px;background:url('../img/da_image/certificate_after_arrow.png');background-size:auto 8px;top:50%;margin-top:-19px;left:-9px;} .certificate_list_layer .certificate_layer.list03 .before_after .test dt{} .certificate_list_layer .certificate_layer.list03 .before_after .test dd{position:relative; width:100%; height:34px; line-height:34px; text-align:center; background:#c2c2c2; color:#fff; font-size:13px; font-weight:700; letter-spacing: -0.52px; border-radius:0 0 4px 4px;} .certificate_list_layer .certificate_layer.list03 .before_after .test.after dd{background:#0b3040;} .certificate_list_layer .certificate_layer.list03 .before_after .test dd:before{position:absolute; content:''; width:3px; height:3px; border-radius:100%; background:#fff; top:50%; margin-top:-1.5px; left:11px;} .certificate_list_layer .certificate_layer.list03 .before_after .test dd:after{position:absolute; content:''; width:3px; height:3px; border-radius:100%; background:#fff; top:50%; margin-top:-1.5px; right:11px;} .certificate_list_layer .certificate_layer.list03 .before_after > ul{font-size:0;} .certificate_list_layer .certificate_layer.list03 .before_after > ul li{width: calc(50% - 5px); display:inline-block;} .certificate_list_layer .certificate_layer.list03 .before_after > ul li + li{margin-left:10px;} .certificate_list_layer .certificate_layer.list03 .before_after > ul li > span{} .certificate_list_layer .certificate_layer.list03 .before_after > ul li > span img{width:100%;height:auto;} .certificate_list_layer .certificate_layer.list03 .before_after > ul li > p{margin-top:10px; font-family: 'Roboto'; font-size: 11px;line-height:1em; font-weight: bold; color: #282828; text-align:center;} .certificate_list_layer .certificate_layer.list03 .before_after > ul li > p span{display:inline-block; margin-left:22%;} .certificate_list_layer .certificate_layer.list03 .certificate_layer_list05_bg{position:absolute; left:50%;transform:translateX(-50%); bottom:0; width:100%; height:45.98%; background:#efede8; z-index:-1;} .certificate_list_layer .certificate_layer.list03 .noti{position:absolute; bottom:17px; right:14px; font-size: 11px; font-weight: 300; letter-spacing: -0.55px;line-height:1em; color: rgba(46, 46, 46, 0.6);} .certificate_list_layer .certificate_layer.list01 {max-height: calc(100% - 24px);} .certificate_list_layer .certificate_layer.list01 .img_wrap {padding:18px 0 16px;display:block;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul {font-size:0; text-align:center;margin:0 auto;vertical-align:top;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul {width: calc(100% - 72px);} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul:nth-of-type(2) {width: calc(100% - 30px);margin-top:13px;margin-bottom:13px;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul:after, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul:after {clear:both;content:"";display:block;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li{display:inline-block; text-align:center; margin:0 auto;width: calc(33.32% - 7px);vertical-align:top;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li + li, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li + li {margin-left:10.5px;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li:nth-child(3n + 1), .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li:nth-child(3n + 1){margin-left:auto;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li:nth-child(n + 4) {margin-top:13px;} .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li:nth-child(n + 4) {margin-top:18px;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul:nth-of-type(2) li {width: calc(28.85% - 7px);} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul:nth-of-type(2) li:nth-of-type(3) {width: calc(42.3% - 7px);padding-top:8px;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li span, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li span{} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li p, .certificate_list_layer .certificate_layer.list02 .img_wrap > ul li p {font-size: 14px; letter-spacing: -0.7px; text-align: center; color: #333; margin-top:6px;line-height:1em;} .certificate_list_layer .certificate_layer.list01 .img_wrap > ul li p {margin-top:5px;} /*.certificate_list_layer .certificate_layer.list01 .img_wrap > ul li span .eu{position:relative; top:20px;}*/ @media only screen and (max-width:371px) { .patent_list01 .raw_material .list_li02 dd, .patent_list01 .raw_material .list_li04 dd, .patent_list01 .raw_material .list_li06 dd{margin-right:40px;} .patent_list01 .raw_material p em{font-size:25px;} .patent_list01 .raw_material dt, .patent_list01 .raw_material .list_li03 dt, .patent_list01 .raw_material .list_li05 dt{padding-right:40px;} } @media only screen and (max-width:320px) { .patent_tit > h3{font-size:23px;} .patent_tit > h4{font-size:17px;} .patent_tit > span{font-size:13px;} .patent_sec01 .txt_wrap h4{font-size:17px;} .patent_sec01 .txt_wrap h3{font-size:23px;} .patent_sec01 .txt_wrap .sub_txt{width:100%;} .patent_sec01 .txt_wrap .sub_txt > h5{font-size:16px;} .patent_sec02 .txt_wrap > span{font-size:12px;} .patent_sec02 .txt_wrap > h5{font-size:16px;} .patent_sec02 .txt_wrap > h4{font-size:23px;} .patent_sec02 .txt_wrap > p{font-size:14px;} .patent_list01 .raw_material .list_li06 dd{margin-right:30px;} .patent_brand .tit_wrap > h5{font-size:17px;} .patent_brand .tit_wrap > h3{font-size:35px;} .patent_brand .certificate_list ol li a{font-size:14px;} } /*** 전국지점 - service/offline_spot.html ***/ /* 관련 css custom.css 1분 두피진단 쪽에 있음. */ /*** 브랜드대상 - service/brand.html ***/ /* 일반 - 375 */ span.awards_tit{display:inline-block;font-family: 'Roboto';font-size: 12px;letter-spacing: 0.13px;color: #222;border-bottom:1px solid #222;font-weight:500;margin-bottom: 20px;position: relative;z-index: 1;} span.awards_tit strong{font-size:13px; font-weight:500;} .brand_sec01{background:url('../img/da_image/brand_sec01_bg.jpg') no-repeat center top; width:100%; height:790px; background-size:cover;} .brand_sec01 .txt_wrap{position: relative;z-index:1;} .brand_sec01 > h3{font-family: 'Jomolhari';font-size: 25px;line-height: 1.2;text-align: center;color: #333;padding: 45px 0 54px;font-weight:normal;} .brand_sec01 .img_wrap{position:relative;z-index:1;padding-left:15px;font-size:0;box-sizing:border-box;margin-bottom: 30px;} .brand_sec01 .img_wrap:before{position:absolute; content:''; width:175px; height:100px; background:#1b263c; top:-30px; left:0; z-index:-1;} .brand_sec01 .img_wrap:after{position:absolute;content:'Awards';color:#e5e9ec;font-size: 170px;font-family:'Italianno';bottom: -98px;right: -77px;z-index: -1;line-height: 1;} .brand_sec01 .img_wrap img{width:100%; max-height:241px; object-fit:cover;} .brand_sec01 .txt_wrap{padding-bottom:20px;} .brand_sec01 .txt_wrap > h3{font-family: 'Trirong';font-size: 29px;font-style: italic;line-height: 35px;color: #333;font-weight:400;margin-bottom: 11px;letter-spacing: -0.87px;} .brand_sec01 .txt_wrap > p{font-size: 15px;font-weight: 300;line-height: 23px;letter-spacing: -1px;color: #444;} .brand_sec01 .txt_wrap > p + p{margin-top:11px;} .brand_sec01 .txt_wrap > p strong{font-weight:500;} .brand_sec02{} .brand_sec02 .sec02_tit span.awards_tit{color:#fff; border-bottom:1px solid #fff;} .brand_sec02 .sec02_tit h2{font-family:'Noto Sans KR';font-size: 29px;line-height: 33px;letter-spacing: -1px;color: #fff;font-weight:500; margin-bottom:28px;} .brand_sec02 .sec02_tit h2 span{font-family: 'Roboto'; font-weight:400;} .brand_sec02 .awards_wrap{} .brand_sec02 .awards_info{width:100%;height:610px;background:url('../img/da_image/brand_sec02_bg.jpg') no-repeat center center;background-size:cover;text-align:center;padding: 56px 0 0;box-sizing:border-box;} .brand_sec02 .awards_info .info_con{width:calc(100% - 50px); height:380px;background:url('../img/da_image/brand_sec02_awards_info_bg.jpg') no-repeat center center; background-size:cover; box-sizing:border-box; margin:0 auto; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:0 5px 16px rgba(0,0,0,0.25);} .brand_sec02 .awards_info .info_con > div{padding-bottom:10px;width: 100%;} .brand_sec02 .awards_info .info_con h5{font-size: 17px;font-weight: 400;line-height: 23px;letter-spacing: -1px;color: #fff;margin-bottom: 10px;} .brand_sec02 .awards_info .info_con h4{position:relative;font-size: 20px;font-weight: bold;line-height: 25px;letter-spacing: -1.5px;background:url('../img/da_image/brand_sec02_txt.jpg') no-repeat center center;background-size:cover;background-clip: text;-webkit-background-clip: text;color: #fff0;margin-bottom: 18px;} .brand_sec02 .awards_info .info_con h4:before{display:block;content:'';margin: 0px auto 10px;background:url('../img/da_image/brand_sec02_bpi_2026.png') no-repeat center center;width: 120px;height: 160px;background-size: 100%;position: relative;left: 0px;} .brand_sec02 .awards_info .info_con h4:after{position:absolute;content:'';width:auto;height: 65px;background:url('../img/da_image/brand_sec02_txt_icon.png') no-repeat center center;bottom: -10px;left: 50%;transform: translateX(-50%);background-size: 100%; aspect-ratio: 391 / 116;} .brand_sec02 .awards_info .info_con p{position:relative;display:inline-block;font-size: 12px;letter-spacing: -0.8px;color: #fff;} .brand_sec02 .awards_info .info_con p:after{position:absolute; content:''; width:100%; height:1px; background:#fff; left:0; bottom:2px;} .brand_sec02 .awards_list{width:100%;position: relative;background:#fff;z-index: 1; box-sizing:border-box; padding-top:30px; padding-bottom:63px;} .brand_sec02 .awards_list > ul{font-size:0; box-shadow: 0px 4.5px 16px 0 rgba(0, 0, 0, 0.25); border:1px solid #ddd;} .brand_sec02 .awards_list > ul li{display:flex; align-items:center; justify-content:flex-start;} .brand_sec02 .awards_list > ul li + li{border-top:1px solid #ddd; box-sizing:border-box;} .brand_sec02 .awards_list > ul li span{display:block; width:104px; height:94.4px;} .brand_sec02 .awards_list > ul li span img{width:100%; object-fit:cover;} .brand_sec02 .awards_list > ul li dl{width:calc(100% - 104px);} .brand_sec02 .awards_list > ul li dl dd{width:100%; font-size: 14px; line-height: 18px; letter-spacing: -0.8px; color: #666; padding-right:10px; box-sizing:border-box; word-break:keep-all;} .brand_sec02 .awards_list > ul li dl dt{width:100%; font-family: 'Trirong';font-size: 17px;font-weight: 500;color: #333; margin-bottom: 4px;} @media only screen and (max-width:320px) { .brand_sec01 .txt_wrap > h3, .brand_sec02 .sec02_tit h2{font-size:25px;} .brand_sec02 .awards_info .info_con{width:calc(100% - 30px);} .brand_sec02 .awards_info .info_con h5{font-size:16px;} .brand_sec02 .awards_info .info_con h4{font-size:19px;} .brand_sec02 .awards_list > ul li dl dt{margin-bottom:0;} .brand_sec02 .awards_list > ul li dl dd{font-size:13px;} } /* @@@ 정리대상 - 추후 위치 옮겨야함 @@@*/