@charset "UTF-8";

/*
 * 톡스앤필 브랜드 웹 레이아웃 style
 */

/************************************
	header & navbar*/
	.header_cover { 
		padding-top: 102px;
	}
	#header { 
		z-index: 100;
		width: 100%;
		position: absolute;
		height: 102px;
		top: 0;
		left: 0;
		background-color: transparent;
		border-bottom: 1px solid #ededed;
		/*overflow: hidden;*/
		-webkit-transition: height .15s cubic-bezier(.65,.15,.26,1), background-color .3s ease-out; 
		-moz-transition: height .15s cubic-bezier(.65,.15,.26,1), background-color .3s ease-out; 
		-o-transition: height .15s cubic-bezier(.65,.15,.26,1), background-color .3s ease-out;
		transition: height .15s cubic-bezier(.65,.15,.26,1), background-color .3s ease-out; 
	}
	#header > .fix_area { 
		position: relative;
	}
	#header h1.logo { 
		position: absolute;
		top: 45px;
		left: 16px;
		z-index: 10;
	}
	#header h1.logo img {
		display: block;
	    height: 30px;
	}

	#nav .nav_top { 
		padding: 0;
		text-align: right;
		font-size: 13px;
	}
	#nav .nav_top > li { 
		display: inline-block;
		float: none;
		vertical-align: top;
	}
	#nav .nav_top .item { 
		padding: .45rem .75rem;
		margin: 0;
		display: inline-block;
	}
	#nav .nav_top .item > i { 
		font-size: 8pt;
	}
	.nav_top .global {
		position: relative;
	}
	.nav_top .global .icon_sec {
	    position: absolute;
	}
	.nav_top .global > span { 
	    vertical-align: top;
	}
	#nav .gnb_sec { 
		padding: 15px 0 0 20%;
	}
	#nav .gnb_menu { 
		text-align: right;
		margin-right: -15px;
	}
	#nav .gnb_menu:after { 
		content: "";
		display: block;
		visibility: hidden;
		height: 0;
		font-size: 0;
		clear: both;
	}
	#nav .gnb_menu > li { 
		position: relative;
		vertical-align: top;
		font-size: 15px;
		min-width: 120px;
		padding-left: 5px;
		display: inline-block;
		text-align: center;
	}
	#nav .gnb_menu > li:hover > a { 
		color: #a73439;
	}
	#nav .gnb_menu > li > a { 
		position: relative;
		display: inline-block;
		height: 50px;
		padding: 0 30px;
		color: #000;
		white-space: nowrap;
	}
	#nav .gnb_menu > li > a:after { 
		content: none;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30px;
		width: 0px;
		height: 2px;
		background-color: #a73439;
	}
	#nav .gnb_menu > li:hover > a:after { 
		content: '';
		width: 60px;
	}
	#header .gnb_menu > li > ul { 
		display: none; 
		margin-top: 0;
	}
	#header.gnb_open { 
		background-color: #fff;
		height: 360px;
		border-bottom: 1px solid #e5e5e5;
		-webkit-transition: all .2s cubic-bezier(.65,.15,.26,1); 
		-moz-transition: all .2s cubic-bezier(.65,.15,.26,1);
		-o-transition: all .2s cubic-bezier(.65,.15,.26,1);
		transition: all .2s cubic-bezier(.65,.15,.26,1);
	}
	.renewal #header.gnb_open {
		height: 530px;
	}
	#header.gnb_open:after { 
		display: block; 
		content: ''; 
		width: 100%; 
		height: 1px; 
		background-color: #ebebeb; 
		position: absolute; 
		top: 103px;
	}
	#header.gnb_open .gnb_menu > li > ul { 
		/*display: block !important;*/
		text-align: center;
		white-space: nowrap;
		padding-top: 22px;
		position: relative;
		z-index: 5;
		margin-top: -1px;
	}
	#header .gnb_menu > li > ul > li > a { 
		display: block;
		padding: 7px 0;
		font-size: 0.9em;
		letter-spacing: -0.09em;
		color: #5d5d5d;
	}
	.renewal #header .gnb_menu > li > ul > li > a {
		padding: 5px 0;
	}
	#header .gnb_menu > li > ul > li > a:hover { 
		color: #a73439;
	}

	/*white ver*/
	.white_ver #nav .gnb_menu > li > a { 
	    color: #e6e6e6;
	}
	.white_ver .nav_top { 
		color: #e6e6e6;
	}
	.white_ver .carvon:after { 
		border: solid #e6e6e6;
		border-width: 0 1px 1px 0;
	}
	#header.white_ver.gnb_open { 
		background-color: rgba(0, 0, 0, 0.7);
	    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
	}
	#header.white_ver.gnb_open:after { 
		background-color: rgba(0, 0, 0, 0.6);
	}
	#header.white_ver .gnb_menu > li > ul > li > a { 
		color: #cecece;
	}
	#header.white_ver .gnb_menu > li > ul > li > a:hover { 
		color: #fff;
	}

	/*main*/
	#header.main  { 
		border-bottom: 0;
	}
	#header.main h1.logo { 
		/* visibility: hidden; */
	}

/*click down menu*/
	.down-menu-wrap { 
		display: inline-block;
		position: relative;
	}
	.down-menu + .secon_menu > li:first-child > b { 
		padding-top: 0;
	} 
	.down-menu + .secon_menu > li > b { 
		display: block;
		padding: 1rem 0.2rem 0.2rem;
		white-space: nowrap;
	}
	.down-menu + .secon_menu > li > a { 
		line-height: 1.2;
		white-space: nowrap;
	}
	.h_sub .down-menu {
		display: block;
	}
	.h_sub .down-menu + .secon_menu { 
		font-size: 90%;
		right: auto;
	}
	.h_sub .down-menu + .secon_menu.on { 
		display: block;
	}
	.secon_menu { 
		display: none;
		position: absolute;
		z-index: 10;
		left: 0;
		right: 0;
		padding: 0.5rem 0;
		background-color: #fff;
		border-top-width: 2px;
		border-top-style: solid;
		color: #fff;
		font-size: 16px;
		-webkit-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.27);
		-moz-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.27);
		box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.27);
	}
	.secon_menu.menu_scroll { 
		overflow-y: auto;
		max-height: 35rem;
	}
	.secon_menu > li > a { 
		display: block;
		width: 100%;
		padding: 0.8rem 1rem;
		line-height: 24px;
		/*font-weight: bold;*/
		color: #787878;
	}
	.secon_menu > li > a:hover { 
		color: #a73439;
	}
/*//*/

/**************************************
	brand footer*/
footer { 
	position: relative;
	border-top: 1px solid #eee;
}
footer.minver {
	border-top: 0;
}
footer .compInfoBtn { 
	cursor: pointer;
	text-align: center;
    padding-bottom: 0.7rem;
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.18);
}
footer .compInfoBtn span.selbox {
	border: 0;
    padding-right: 20px;
    height: auto;
}
footer .compInfoBtn span.selbox:before { 
	transform: rotate(135deg);
}
footer .compInfoBtn span.selbox:after { 
	transform: rotate(45deg);
}
/*off company info*/
footer .compInfoBtn.off { 
	box-shadow: none;
}

footer .compInfoBtn.off span.selbox:before { 
	transform: rotate(45deg);
}
footer .compInfoBtn.off span.selbox:after { 
	transform: rotate(135deg);
}
footer .compInfoBtn > span { 
	font-size: 0.9em;
    vertical-align: top;
}
footer .selbox:before,
footer .selbox:after { 
	top: 55%;
}
.footer-bar { 
	box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.13);
}
.max_area { 
	max-width: 1920px;
	margin: 0 auto;
}
.footer-bar .max_area > .left { 
    width: calc(100% - 0px);
	box-shadow: none;
}
.footer-bar .max_area > .right { 
	width: 0px;
}
.footer-bar .down-menu-wrap,
.footer-bar .down-menu { 
	width: 100%;
}
footer .compInfoWrap { 
	margin: 0 auto;
	text-align: center;
}
.footer .compInfoBtn > span,
.footer .down-menu-wrap {
	color: rgba(255, 255, 255, 0.75);
}
.footer .selbox:before,
.footer .selbox:after { 
	background-color: #fff;
}
.scrolpage .footer.brand_footer { 
	position: unset;
}
footer.brand_footer address { 
	color: #221e1f;
	font-size: 9pt;
	padding: 0;
}
.footer.brand_footer { 
	z-index: 100;
}
.filter footer.brand_footer { 
	background-color: transparent;
	z-index: 1000;
}
footer.brand_footer .compInfoBtn { 
	padding-top: 0.5rem;	
}
.brand_footer .basic_adr { 
    width: 345px;
	padding: 10px 0 0 10px;
    line-height: 1.4;
}
.brand_footer .basic_adr,
.brand_footer .rolling_wrap{ 
	display: inline-block;
    text-align: left;
	vertical-align: top;
}
.brand_footer .compInfoWrap .rolling_wrap { 
	width: 420px;
}
.brand_footer .basic_adr address span,
footer .rolling_list address span {
	padding-right: 5px;
}
.sitepolicy > a:first-child { 
	display: inline-block;
	margin-right: 1rem;
}
.adr_tit { 
	font-size: 1.1rem;
    font-weight: 400;
    padding-bottom: 5px;
}
.minver .adr_tit {
    color: #e2c8bf;
}
/*가맹점 추가작업*/
.minver footer.brand_footer address { 
	color: #d0b5a8;
}
.minver footer.brand_footer address b { 
	color: #e2c8bf;
}

.bdf-wrap  {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}
.bdf-wrap .member-ask > p {
	margin: 0;
    padding: 30px 0;
    background-color: rgba(0, 0, 0, 0.1);
}
.minver .bdf-top-wrap {
	position: relative;
}
.bdf-top-wrap h1.logo {
    padding-top: 0;
	padding-bottom: 10px;
    left: 0;
    padding-left: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}
.minver .bdf-top-wrap h1.logo {
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.bdf-top-wrap h1.logo img {
    display: block;
    width: 100px;
    height: 23.25px;
}
.bdf-top-wrap .cp-txt {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 9pt;
    line-height: 24px;
    opacity: 0.7;
}
.minver .bdf-top-wrap .cp-txt {
	color: #d0b5a8;
}
.compInfoWrap .bdf-wrap .rolling_wrap {
	padding: 10px 10px 0 0;
    width: 490px;
}

.bdf-wrap .rolling_wrap .rolling_list,
.bdf-wrap .rolling_wrap .rolling_list li {
	height: 62px;
}
.bdf-wrap .rolling_wrap address {
	font-size: 9pt;
    line-height: 1.4;
}
.bdf-wrap .sitepolicy {
    font-size: 1rem;
    padding-bottom: 5px;
}
.minver .bdf-wrap .sitepolicy {
    color: #e2c8bf;
}
.bdf-wrap .sitepolicy .bar_right {
	padding-right: 1rem;
}
.bdf-wrap .sitepolicy .bar_right:after {
	margin-top: -0.5em;
	background-color: #bc6568;
}
/*//*/


/*************************************
	시술안내 카테고리 네비게이션
*/
#categoryMenu {
	position: relative;
	background-color: #590306;
	/*color: #888888;*/
	color: #d2d2d2;
	user-select: none;
}
#categoryMenu .cm-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.cm-depth1-box .cm-depth1-txt a {
	display: block;
	position: relative;
	padding: 18px 18px;
	letter-spacing: -0.03em;
	cursor: pointer;
}
.cm-depth1-box .cm-depth1-txt a:after {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	height: 1px;
	background-color: #fff;
}
.cm-depth1-box .cm-depth2-box {
	display: none;
	position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #F5F5F5;
	color: #666666;
}
.cm-depth2-box .cm-depth2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding-top: 4px;
	padding-bottom: 4px;
	flex-wrap: wrap;
}
.cm-depth2 > li > a {
	display: inline-block;
    padding: 15px 13px;
    letter-spacing: -0.02em;
	font-size: 14px;
    white-space: nowrap;
	transition: 0.2s;
}
.cm-depth2 > li > a:hover {
	color: #84050B;
}

.cm-depth2-box .cm-depth2-bg{
	height:51px;
	background-color:#fff;
}
/*active*/
.cm-depth1-box > li.current .cm-depth1-txt a,
.cm-depth1-box > li.active .cm-depth1-txt a {
	color: #fff;
}
.cm-depth1-box > li.current .cm-depth1-txt a:after {
	content: '';
}
.cm-depth1-box > li.current .cm-depth2-box,
.cm-depth1-box > li.active .cm-depth2-box {
	display: block;
}
.cm-depth1-box > li.active .cm-depth2-box {
	z-index: 10;
}
.cm-depth2 > li > a:hover,
.cm-depth2 > li > a.current {
	/*font-weight: 500;*/
	color: #84050B;
}
.cm-depth2 > li > a.current {
	font-weight: 500;
	color: #84050B;
}
/*fixed*/
#categoryMenu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
	-webkit-animation: down 0.2s ease-out 1;
	animation: down 0.2s ease-out 1;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: forwards;
}
@keyframes down {
	0%{
		top: -50px;
	}
	100% {
		top: 0;
	}
}