@charset "utf-8";
.wrap {position: relative;}
#header {width:93.7042459%; max-width:1280px; margin:0 auto; height:96px; position:relative;}
#header h1 {position:absolute; left:0; top:38px;}
#header .logo {display:block; width:179px; height:18px; background-image:url("../image/common/h_logo.png"); background-size:100% auto; background-repeat:no-repeat; font-size:0;}
#header .gnb {position:absolute; top:26px; right:0; width:auto; height:33px; text-align:right;display: flex; align-items: center;}
#header .gnb > li {float:left; margin-left:31px; width:24px; height:33px; background:50% 9px no-repeat; background-size:24px; font-size:0;}
#header .gnb .free_event_pc { width: 131px; height: 30px;margin-left:0; font-size: 0; background-image:url("../image/common/ico_freeevent.png"); background-size:100%; background-position: center;} 
#header .gnb .free_event_pc a {display:block; width:100%; height:100%;}
#header .gnb .h_search {background-image:url("../image/common/h_search.svg"); margin:0;}
#header .gnb .h_search a {display:block; width:100%; height:100%;}
#header .gnb .h_mypage {background-image:url("../image/common/h_mypage.svg"); position:relative;}
#header .gnb .h_mypage span {display:block; width:100%; height:100%; cursor:pointer;}
#header .gnb .h_mypage span i {display:block; font-size:8px; background:#000; color:#fff; width:3em; text-align:center; height:18px; line-height:18px; border-radius:1em; letter-spacing:.03em; position:absolute; top:-10px; left:-3px;}
#header .gnb .h_mypage ul {display:none; width:80px; padding:0 .5em; font-size:13px; text-align:center; position:absolute; left:0; top:56px; z-index:99; margin-left:-35px; background:#fff; border: 1px solid #d7d7d7; border-radius:.5em; letter-spacing:0;}
#header .gnb .h_mypage ul:before {position:absolute; top:-15px; left:40px; border:7px solid transparent; border-bottom-color:#d7d7d7; content:'';}
#header .gnb .h_mypage ul:after {position:absolute; top:-13px; left:40px; border:7px solid transparent; border-bottom-color:#fff; content:'';}
#header .gnb .h_mypage li a {display:block; padding:.75em 0; border-top:1px solid #e5e5e5; color:#797979;}
#header .gnb .h_mypage li:first-child a {border:0}
#header .gnb .h_mypage li a:hover {color:#0f8cfc}
#header .gnb .h_cart {background-image:url("../image/common/h_cart.svg"); position:relative;}
#header .gnb .h_cart a {display:block; width:100%; height:100%;}
#header .gnb .h_cart .active {position:absolute; left:10px; top:0; z-index:1; display:block; width:5px; height:5px; border-radius:2.5px; background:#0f8cfc;}

#header .lnb {position:absolute; top:0; left:50%; width:49%; max-width:450px; margin:38px 0 0 0; transform:translateX(-50%);}
#header .lnb li {display:inline-block; margin-left:15.25%; font-weight:600; font-size:18px; letter-spacing:0;}
#header .lnb li:first-child {margin:0;}
#header .lnb li:hover {color:#0f8cfc;}
#header .h_fullmenu {display:none}

@media screen and (max-width:1024px){
	#header {width:94.140625%;}
	#header h1 {left:50%; transform:translateX(-50%);}
	#header .gnb {width:auto}
	#header .lnb {display:none}
	#header .h_fullmenu {display:block}
	#header .h_fullmenu a {display:block; position:absolute; top:28px; left:0; width:24px; height:18px; font-size:0;}
	#header .h_fullmenu span {display:block; height:2px; background:#000;}
	#header .h_fullmenu span:nth-child(2) , #header .h_fullmenu span:nth-child(3) {margin-top:6px;}
}
@media screen and (max-width:768px){
	#header {width:92.1875%; height:72px;}
	#header h1 {top:26px}
	#header .logo {width:128px; height:18px;}
	#header .gnb {top:15px}
	#header .gnb > li {margin-left:10px;}
	#header .gnb .h_search ,
	#header .gnb .h_mypage {display:none}
	#header .gnb .free_event_pc {width: 130px; height: 37px;}
}
@media screen and (max-width:568px){
	#header .gnb .free_event_pc {display:none;}
}
@media screen and (max-width:414px){
	#header {width:90.3381642%; height:64px;}
	#header h1 {top:22px}
	#header .gnb {top:11px}
	#header .h_fullmenu a {top:22px;}
}



.fullmenu {position:fixed; z-index:91; left:-100%; top:0; width:256px; height:100%; background:#fff;}
.fullmenu_bg {display:none; position:fixed; z-index:90; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.4);}
.fullmenu_close {position:absolute; top:20px; right:16px; display:block; width:20px; height:20px; background:url("../image/common/close1_f.svg") 50% no-repeat; background-size:cover; font-size:0;}
.fullmenu .full_top {height:64px; line-height:64px; padding:0 16px; background:#222;}
.fullmenu .full_top .full_user {}
.fullmenu .full_top .full_user .user {font-size:12px; color:#8167ff;}
.fullmenu .full_top .full_user .user em {color:#fff;}
.fullmenu .full_top .full_user .user em strong {font-size:16px; margin-right:2px;}
.fullmenu .full_top .full_user .login {display:inline-block; width:48px; height:24px; line-height:24px; margin-right:4px; text-align:center; background:#000; color:#fff; font-size:12px;}
.fullmenu .full_quick {}
.fullmenu .full_quick ul {width:100%; overflow:hidden;}
.fullmenu .full_quick li {float:left; width:50%; box-sizing:border-box;}
.fullmenu .full_quick li a {display:block; height:3em; line-height:3em; padding:0; text-decoration:none; font-size:14px;}
.fullmenu .full_quick li:nth-child(2n) {border-left:1px solid #e5e5e5;}
.fullmenu .full_quick li:nth-child(n+3) {border-top:1px solid #e5e5e5;}
.fullmenu .full_quick i {display:inline-block; width:22px; height:22px; margin-right:4px; vertical-align:middle;}
.fullmenu .full_quick li:nth-child(1) i {background:url("../image/common/h_user.svg") 50% no-repeat; background-size:90%;}
.fullmenu .full_quick li:nth-child(2) i {background:url("../image/common/delivery.svg") 50% no-repeat; background-size:100%;}
.fullmenu .full_quick li:nth-child(3) i {background:url("../image/common/chat.svg") 50% no-repeat; background-size:90%;}
.fullmenu .full_quick li:nth-child(4) i {background:url("../image/common/headset.svg") 50% no-repeat; background-size:90%;}
.fullmenu h3 {padding:1em 16px; font-weight:600; font-size:14px; border-top:1px solid #d7d7d7;}
.fullmenu .full_lst {}
.fullmenu .full_lst .depth1 {}
.fullmenu .full_lst li {}
.fullmenu .full_lst li em {}
.fullmenu .full_lst li a {display:block; padding:1em 24px; font-weight:300; font-size:14px; text-decoration:none;}
.fullmenu .full_lst .depth2 {display:none;}
.fullmenu .full_lst .depth2 ul {}
.fullmenu .full_lst .depth2 li {}
.fullmenu .full_lst .depth2 li a {padding:1em 32px; background:#f5f5f5;}
.fullmenu .free_event_mobile {display:none; font-size:0; width:131px; height:30px; font-size: 0; background-image:url("../image/common/ico_freeevent.png"); background-size:cover; background-position: center;}


#footer {width:93.7042459%; max-width:1280px; padding-top:96px; margin:0 auto; font-family:'Nanum Barun Gothic',sans-serif;}
.f_banner {width:100%; margin:0 0 48px; text-align:center; overflow:hidden;}
.f_banner table {width:100%;}
.f_banner .box {width:33.3333%; padding:0 8px 30px; color:#797979; line-height:1.4; border:1px solid #d7d7d7; box-sizing:border-box;}
.f_banner .box i {display:block; width:51px; height:58px; margin:27px auto; background:50% no-repeat; background-size:cover;}
.f_banner .box strong {display:block; margin-bottom:22px; color:#000; font-weight:600; font-size:1.313em;}
.f_banner .box2 {background:#f9f9f9;}
.f_banner .box1 i {background-image:url("../image/common/f_ico_bnr1.png");}
.f_banner .box2 i {background-image:url("../image/common/f_ico_bnr2.png");}
.f_banner .box2 i.ico2 {width: 36px; height: 43px; margin-bottom: 21px; margin-top: 37px;}
.f_banner .box2 strong {margin-bottom:14px;}
.f_banner .box3 i {background-image:url("../image/common/f_ico_bnr3.png");}
.f_info {width:100%; padding:0 0 48px; margin:48px 0; border-bottom:1px solid #efefef; position:relative;}
.f_center {margin-right:400px; font-size:.813em;}
.f_center strong {display:block; margin:0 0 28px; font-weight:600; font-size:1.875em; font-family:'din-2014',sans-serif;}
.f_center span {display:block; line-height:1.8; letter-spacing:0; }
.f_center span em {color:#797979;}
.f_center ul {margin:48px 0 0; overflow:hidden;}
.f_center ul li {float:left; margin-left:1.692em;}
.f_center ul li:first-child {margin:0;}
.f_company {position:absolute; top:0; right:0; width:342px; font-size:.813em; letter-spacing:0;}
.f_company span {display:block; margin:1em 0 0;}
.f_company span:first-child {margin:0;}
.f_company span em {display:inline-block; width:186px;}
.f_company .num a {color:#797979; text-decoration:underline;}
.f_bottom {width:100%; margin:48px 0; position:relative; font-size:.813em; letter-spacing:0;}
.f_address {margin-right:240px; line-height:1.5;}
.f_address address {margin:0 0 24px;}
.f_select_wrap {position:absolute; top:0; right:0;}
.f_select {width:200px; position:relative;}
.f_select .bt_select {display:block; width:100%; height:36px; line-height:36px; text-indent:1em; border:1px solid #000;}
.f_select .bt_select span {float:right; display:block; width:36px; height:36px; background:url("../image/common/bt_slt_k.gif") 50% no-repeat #000; background-size:9px auto;}
.f_select .bt_select:hover {color:#0f8cfc;}
.f_select ul {position:absolute; bottom:37px; left:0; width:100%; height:96px; padding:8px 0; overflow:auto; background:#fff; border:1px solid #000;}
.f_select ul li a {display:block; padding:.5em 1em; font-size:12px;}
.f_select ul li a:hover {background:#efefef;}

@media screen and (max-width:1366px){
	#footer {padding-top:7.0278%;}
}
@media screen and (max-width:1024px){
	#footer {width:94.140625%;}
}
@media screen and (max-width:768px){
	#footer {width:92.1875%;}
	.f_info {padding:0 0 1.5em; margin:0 0 1.5em;}
	.f_center {margin:0 0 4em; font-size:12px;}
	.f_center ul {margin:1em 0 0;}
	.f_company {position:initial; width:100%; font-size:12px;}
	.f_company span em {width:9em;}
}
@media screen and (max-width:568px){
	.fullmenu .free_event_mobile {display:block; margin-left: 25px;}
}
@media screen and (max-width:414px){
	#footer {width:90.3381642%;}
	.f_banner table, .f_banner table tr, .f_banner table tbody, .f_banner table td {display:block;}
	.f_banner .box {width:100%; padding:2em 1%; border-top-width:0;}
	.f_banner .box:first-child {border-top-width:1px;}
	.f_banner .box i {margin-top:0;}
	.f_bottom {margin:0 0 4em;}
	.f_address {margin:0; font-size:12px;}
	.f_address address {margin:0 0 1em;}
	.f_select_wrap {position:initial; margin:1em 0 0;}
	.f_select {width:100%;}
	.f_select .box {width:50%;}
}



.subpage {width:100%; border-top:1px solid #d7d7d7;}
.introduce , .history, .system, .thesis , .hair_thesis, .hair_develop, .trichogene_is, .media , .product , .shop, .pagewrap ,.offline_shop,.freesample {width:93.7042459%; max-width:1280px; margin:0 auto; overflow:hidden;}
.detail {width:100%; max-width:1280px; margin:0 auto;}

@media screen and (max-width:1366px){ }
@media screen and (max-width:1024px){
.introduce , .history, .system, .thesis , .hair_thesis, .hair_develop, .trichogene_is, .media , .product , .shop, .pagewrap,.offline_shop  {width:94.140625%;}
}
@media screen and (max-width:768px){
.introduce , .history, .system, .thesis , .hair_thesis, .hair_develop, .trichogene_is,  .media , .product , .shop, .pagewrap,.offline_shop  {width:92.1875%;}
}
@media screen and (max-width:414px){
.introduce , .history, .system, .thesis , .hair_thesis, .hair_develop, .trichogene_is,  .media , .product , .shop, .pagewrap,.offline_shop  {width:90.3381642%;}
}

/* 기존 layout css 복사 */




/* sub layout */
.max_shop_page {width:66.66666666666667%; padding-bottom:50px; margin:3% auto;}
.max_login_form_auto_login { width:auto; margin:0; padding:0; }

@media screen and (max-width: 1440px) {
	.max_shop_page {width:93.66%; padding:3%; box-sizing:border-box;}
}
@media screen and (max-width: 1024px) {
	.max_shop_page {width:93.66%; padding:3%; margin:0 auto;}
}

/* sub visual */
.max_sub_vis {width:100%; height:440px; background-position:top center;}
@media screen and (max-width: 1024px) {
	.max_sub_vis {display:none;}
}
/* sub navigation bar */
.max_snb_wrap {width:14.85714285714286%; height:auto; overflow:hidden; background:#fff; position:absolute; top:-82px; left:3%; z-index:2; box-sizing:border-box; padding:30px;}
.max_snb_wrap h3 {font-size:25px; position:relative; padding-bottom:23px; text-transform:uppercase;}
.max_snb_wrap h3:after {content:''; width:20px; height:2px; background:#000; position:absolute; bottom:0; left:0;}
.max_snb {margin-top:20px;}
.max_snb_wrap .snb_names {display:block; font-weight:700; padding:10px 0;}
.max_snb_wrap .off {float:right; display:block; width:24px; height:24px; background:url("../image/common/maxmall_ui_lab_24.png") -96px -26px no-repeat;}
.max_snb_wrap .on {float:right; display:block; width:24px; height:24px; background:url("../image/common/maxmall_ui_lab_24.png") -121px -26px no-repeat;}
.max_snb_wrap .max_snb { border-bottom:1px solid #000; }
.max_snb_wrap .max_snb .max_depth_lst { border-bottom:none; }
.max_snb_mobile { display:none; }
/* sub navigation menu */
.max_depth_lst {width:100%; height:auto; padding:10px 0; border-bottom:1px solid #000; box-sizing:border-box;}
.max_depth_lst li {padding:1% 0;}
.max_depth_lst li a {font-size:13px; color:#797979;}
.max_depth_lst li a:hover,
.max_depth_lst li a.active {color:#000;}
.max_depth_lst .max_3depth { background:#f1f1f1; padding:10px; margin-top:10px; box-sizing:border-box; }
/* sub navigation search */
.max_cate_sch_lst > li {margin-top:10px; border-bottom:1px solid #000;}
.max_cate_sch_lst .sch_lst_box {padding:5px 0 15px;}
.sch_lst_box li {padding:5px 0;}
.sch_lst_box li .max_checkit.checkit_label input[type="checkbox"] + label {font-size:13px; color:#797979;}
/* mobile sub navigation search */
.bg_layer {display:none; position:fixed; top:0; left:0; z-index:25; width:100%; height:100%; background:#000; filter:Alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; cursor:pointer;}
.max_sch_mobile_btn {display:none;}
.max_sch_mobile_btn a {display:inline-block; text-align:center; background:#000; border:1px solid #000; color:#fff; padding:7px 20px; box-sizing:border-box;}
.max_sch_mobile_btns {display:none; justify-content:space-between; margin-top:10px; }
.max_snb_sch_box button {width:49%; height:40px; font-size:13px; background:#000; color:#fff;}
.bt_close_layer {display:none; width:100%; height:auto; text-align:center; margin-top:20px;}
.bt_close_layer a { border:1px solid #d7d7d7; font-size:13px; display:inline-block; padding:7px 20px; }
@media screen and (max-width: 1440px) {
	.max_snb_wrap {width:230px;}
}
@media screen and (max-width: 1024px) {
	/* sub navigation bar */
	.max_snb_wrap {width:100%; position:static; padding:30px 0; overflow:visible;}
	.max_snb_wrap h3 {text-align:center; padding-bottom:0;}
	.max_snb_wrap h3:after {display:none; /*left:50%; transform:translateX(-50%);*/}

	.max_snb {display:none;}
	.max_snb_wrap .snb_names {border:1px solid #000; box-sizing:border-box; padding:13px;}
	/* sub navigation mobile menu */
	.max_snb_mobile .max_depth_lst {border-bottom:none; margin:10px 0 0 0; text-align:center; }
	.max_snb_mobile .max_depth_lst li {display:inline-block; position:relative; padding:0;}
	.max_snb_mobile .max_depth_lst li:before {content:''; width:1px; height:10px; background:#d7d7d7; position:absolute; top:4px; left:0;}
	.max_snb_mobile .max_depth_lst li:first-child:before {width:0;}
	.max_snb_mobile .max_depth_lst li a {display:block; padding:0 10px;}
	.max_snb_mobile .max_depth_lst li:first-child a {padding-left:0;}

	/* sub navigation search */
	.max_cate_sch_lst > li { border-bottom:none; }
	/* mobile sub navigation search */
	.max_sch_mobile_btn {/*display:block;*/ width:100%;}
	.max_sch_mobile_btn a { margin-top:5px; }
	.max_sch_mobile_btns {display:flex;}
	.max_snb_sch_box {display:none; width:50%; height:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:99; background:#fff; box-sizing:border-box; padding:20px;}
	.bt_close_layer {display:block;}
}
@media screen and (max-width: 740px) {
	/* sub navigation bar */
	.max_snb_wrap {padding:5% 0;}
	.max_snb_wrap h3 { font-size:20px; }
	/*.max_snb_wrap h3:after {display:none; bottom:10px;}*/

	/* sub navigation mobile menu */
	.max_snb_mobile .max_depth_lst {margin:0;}
	/* mobile sub navigation search */
	.max_snb_sch_box { width:80%; }
}

/* category wrap */
#max_cate_wrap {float:right; width:79.42857142857143%; padding-top:70px; padding-bottom:5%;}
@media screen and (max-width: 1024px) {
	#max_cate_wrap {float:none; width:100%; padding-top:0;}
}
@media screen and (max-width: 740px) {
	#max_cate_wrap {padding-top:0;}
}
/* sub menu */
.max_smenu {float:left; width:14.85714285714286%; min-width:160px; height:auto; box-sizing:border-box; padding:30px;}
.max_smenu h3, 
.max_smenu h3 a {font-size:30px; color:#000; letter-spacing:-0.03em;}
.max_smenu ul {border-top:1px solid #000; border-bottom:1px solid #ccc; padding:15px 0; margin-top:30px;}
.max_smenu ul li {padding:15px 0;}
.max_smenu ul li .active {color:#000; border-bottom:1px solid #000;}
.max_smenu ul li .nscoupon {display:inline-block; background:#222; width:20px; height:20px; border-radius:20px; line-height:20px; color:#fff; font-size:12px; font-weight:700; text-align:center;}

@media screen and (max-width: 1440px) {
	.max_smenu {padding:30px 0;}
}
@media screen and (max-width: 1024px) {
	.max_smenu { display:none; }
}

/* contents */
.max_contents {float:right; width:79.42857142857143%; height:auto; padding:70px 30px 0 0; box-sizing:border-box;}

@media screen and (max-width: 1024px) {
	.max_contents {float:none; width:100%; padding:30px 0 0 0;}
}
/* 민경용 추가. */

.max_cart_info { padding-bottom:50px; }
.max_cart_info > h4 { padding: 11px 21px; background: #000; color: #FFF; display: inline-block; }
.max_cart_info > ul { display: block; border: 1px solid #000; padding: 24px; }
.max_cart_info > ul > li { list-style-type: disc; list-style-position: inside; padding: 5px 0px 5px; letter-spacing: 0.02em;}
.max_cart_info > ul > li .stroke { text-decoration: underline; font-weight: 600; text-underline-position: under;}

#coupon_select_wrap { position:fixed; width:50%; left:25%; top:10%; background:#FFF; border:1px solid #000; }
#coupon_select_wrap .close_btn { position:absolute; right:40px; top:10px; }
@media screen and (max-width: 740px) {
	#coupon_select_wrap { left:0; top:0; right:0; bottom:0; width:100%; }
}

#bt_top {display: block; background: rgb(0, 0, 0); width: 60px; height: 60px; border-radius: 100px; color: rgb(255, 255, 255); line-height: 60px; text-align: center; position: absolute; right: 5%; bottom: 0px;}
#bt_top a {display: block;}