@charset "utf-8"; 

/******************************************************************************************************************************************
	header CSS (상단-로고,메뉴,탑메뉴 설정) - 쮸양~★
*******************************************************************************************************************************************/
#header {position:relative; width:100%; height:60px; transition:all 0.2s; -moz-transition:all 0.2s; -webkit-transition:all 0.2s; -o-transition:all 0.2s}
#header a:hover {text-decoration:none}


#header .logo {float:left; z-index:30; padding:10px}
#header .logo a {display:inline-block; width:150px; height:40px; text-indent:-9999px;background:url('/img/common/logo.png') no-repeat; background-size:cover;}


#header .head_top .loginBox {position:relative; padding:18px;}
#header .head_top .loginBox li {position:relative; display:inline-block; padding-left:15px;}
#header .head_top .loginBox li a {font-size:14px; font-weight:bold;}



/* right (장바구니)
 */

/* 상단 장바구니 */
.rightBox {float:right; text-align:right; padding-top:35px; width:15%;}
/* Right Wrap */
.right_area {float:right !important; height:40px;}
.right_area:after {content:""; display:block; clear:both}
.right_area li {float:left; width:28px; margin-left:30px; padding:0; text-align:center;}

.right_area li i {width:28px; height:33px; display:block;}
.right_area li i:hover {color:#ec6100;}
.right_area li a {position:relative; font-size:13px; color:#959595; letter-spacing:-1px;}
.right_area li a.txtno { text-indent:-1000em;}


#header .head_top .right_area li a i.ic_01 {background:url('../img/common/top01.gif') no-repeat 0px center;}
#header .head_top .right_area li a i.ic_02 {background:url('../img/common/top02.gif') no-repeat 0px center;}
#header .head_top .right_area li a i.ic_03 {width:36px; height:33px; display:block; background:url('../img/common/top03.gif') no-repeat 0px 0px;}

.right_area li .getnum {position:relative; top:-5px; left:5px; display:inline-block; background:#F60; color:#FFF; text-align:center; border-radius:100%; font-size:11px; text-decoration:none; font-weight:400; width:22px; height:22px; letter-spacing:0em; margin-left:5px;}


/* 메뉴수정(20210829) */
#PcMenu {position:absolute; width:100%; left:0; top:100px; z-index:10000;}
#PcMenu .gnbDiv {width:1200px; margin:0 auto; padding:42px 0 0 0px; box-sizing:border-box; }
#PcMenu .gnbDiv > li {float:left; padding:0 42px; text-align:center;}

#PcMenu .gnbDiv > li > a {width:100%; position:relative; font-size:19px; display:block; position:relative; line-height:100%; box-sizing:border-box; padding-bottom:40px; text-align:center; color:#333; letter-spacing:-0.5pt;  transition: all 0.4s ease-out; z-index:9999999}
#PcMenu .gnbDiv > li > a:after {display:block; content:""; width:15px; height:9px; background:url('/img/common/menu_hover.png') center bottom no-repeat; position:absolute; bottom:-2px; left:50%; margin-left:-8px; z-index:9999999; opacity:0; transition: all 0.2s ease-out;}
#PcMenu .gnbDiv > li:first-child a {}
#PcMenu .gnbDiv > li:last-child a {}
#PcMenu .gnbDiv > li:hover {color:#F60; transition: all 0.4s ease-out;}
#PcMenu .gnbDiv > li:hover > a {color:#F60; transition: all 0.4s ease-out;}
#PcMenu .gnbDiv > li:hover > a:after {opacity:1; transition: all 0.2s ease-out;}

#PcMenu .twoDep {position:absolute; overflow:hidden; width:100%; top:0;left:0; width:100%; box-sizing:border-box; height:0; opacity:0; transition: all 0.2s ease-out;}
#PcMenu .twoDep:after {display:block; content:""; width:100%; background:#ddd; height:1px; position:absolute; top:103px;}
#PcMenu .twoDep_in {position:relative; width:1200px; box-sizing:border-box; margin:0 auto; padding-top:125px; overflow:hidden; opacity:0; transition: all 0.4s ease-out;}

#PcMenu .twoDep_off {display:none;}

#PcMenu .twoDep_tit {width:290px; height:186px; border-right:2px dotted #CCC; float:left; margin-right:30px;opacity:0; transition: all 0.4s ease-out;}
#PcMenu .twoDep_tit h2 {font-size:22px; font-weight:400; letter-spacing:-0.4pt; color:#333; line-height:100%; padding:10px 0px}
#PcMenu .twoDep_tit p {letter-spacing:-0.5pt; color:#777; line-height:24px; padding-top:12px;}
#PcMenu .twoDep_tit a{display:inline-block; position:relative; border:1px solid #000; text-align:center; width:177px; height:40px; font-size:15px; margin-top:20px;}
#PcMenu .twoDep_tit a:hover{color:#fff;}
#PcMenu .twoDep_tit a span{
	position:absolute; top:50%; left:0; width:100%; height:100%; line-height:38px;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	}
#PcMenu .twoDep_tit a:before { 
	content: '';  position: absolute;  background:#F60;  border-color:#F60;  width: 0;  height: calc(100% + 2px);  left: -1px;  top: -1px;
	-webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	-o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}
#PcMenu .twoDep_tit a:hover:before{width: calc(100% + 2px);}

#PcMenu .twoDep_menu {position:relative; width:880px; float:left; opacity:0; transition: all 0.4s ease-out; z-index:9999}
#PcMenu .twoDep_menu li {float:left;}
#PcMenu .twoDep_menu a {display:block; text-align:left; font-size:15px; color:#777; letter-spacing:-0.5pt; line-height:100%; padding:15px 0; box-sizing:border-box; border-bottom:1px solid #ddd; float:left; width:193px; box-sizing:border-box; margin-right:21px; transition: all 0.4s ease-out; background:url(/img/common/sub_menu_off.png) 180px 20px no-repeat;}
#PcMenu .twoDep_menu a:nth-child(4n){margin-right:0px;}
#PcMenu .twoDep_menu.two a:nth-child(4n+1) {clear:both;}
#PcMenu .twoDep_menu a.next {clear:both;}
#PcMenu .twoDep_menu a:hover {color:#F60; border-color:#F60; transition: all 0.4s ease-out; background:url(/img/common/sub_menu_on.png) 180px 20px no-repeat;}

#PcMenu .twoBg {height:0; box-sizing:Border-box; border-bottom:1px solid #ddd; box-sizing:border-box; position:absolute; width:100%; top:0; left:0; opacity:0; background:#fff; z-index:-1; transition: all 0.2s ease-out;}


#PcMenu .gnbDiv:hover .twoBg { opacity:1; height:327px; transition: all 0.2s ease-out; z-index:-1}
#PcMenu .gnbDiv > li:hover .twoDep_in {opacity:1; transition: all 0.4s ease-out;}
#PcMenu .gnbDiv > li:hover .twoDep {z-index:9999; height:327px; opacity:1; transition: all 0.2s ease-out;}

#PcMenu .gnbDiv > li:hover .twoDep_menu {opacity:1; transition: all 0.4s ease-out;}
#PcMenu .gnbDiv > li:hover .twoDep_tit {opacity:1; transition: all 0.4s ease-out;}

.gnb_top {display:none;}



/******************************************************************************************************************************************
	footer CSS (하단-로고,하단메뉴,바로가는사이트) - 쮸양~★
*******************************************************************************************************************************************/
footer {clear:both; z-index:11; padding:30px 0}

/* f_banner */
.f_banner {position:relative; width:100%; height:38px; border-top:1px solid #EEE; border-bottom:1px solid #EEE; background:#FFF;}
.f_banner ul.footBn {float:left;}
.f_banner ul.footBn li {float:left; margin-left:15px;}
.f_banner ul.footBn li a {display:block; width:150px; text-align:left; line-height:35px; height:35px; font-size:12px; color:#000; letter-spacing:-1.3px; border-right:1px solid #dedede; background:url(../img/common/arrow01.png) no-repeat; background-position:130px 12px; letter-spacing:-0.08em;}
.f_banner ul.footBn li a:hover	{color:#ec6100}

/* sns */
.sns {position:absolute; top:-1px; right:0px; display:inline-block; margin:0px auto;}
.sns li {position:relative; float:left; margin:0 0px; font-size:0; line-height:0; z-index:1;}
.sns li a {overflow:hidden; display:block; width:38px; height:38px;}
.sns li a.instagram {background:url('../img/common/btn_sns.png') no-repeat 0px 0px;}
.sns li a.instagram:hover {background-position:0px -38px;}
.sns li a.facebook {background:url('../img/common/btn_sns.png') no-repeat -38px 0px;}
.sns li a.facebook:hover {background-position:-38px -38px;}
.sns li a.twitter {background:url('../img/common/btn_sns.png') no-repeat -76px 0px;}
.sns li a.twitter:hover {background-position:-76px -38px;}
.sns li a.blog {background:url('../img/common/btn_sns.png') no-repeat -114px 0px;}
.sns li a.blog:hover {background-position:-114px -38px;}
.sns li a.kakaostory {background:url('../img/common/btn_sns.png') no-repeat -152px 0px;}
.sns li a.kakaostory:hover {background-position:-152px -38px;}
.sns li a.youtube {background:url('../img/common/btn_sns.png') no-repeat -190px 0px;}
.sns li a.youtube:hover {background-position:-190px -38px;}
.sns li a.cafe {background:url('../img/common/btn_sns.png') no-repeat -228px 0px;}
.sns li a.cafe:hover {background-position:-228px -38px;}

footer .f_info {display:inline-block; vertical-align:middle; padding:30px 0px 0px 0px;}
footer .f_info li {display:inline-block; position:relative; padding:0 25px 5px 0}
footer .f_info li::after {content:""; position:absolute; right:10px; top:3px; width:1px; height:10px; background:#bbb}
footer .f_info li a {display:block; font-size:1.1em}
footer .f_info li:last-child::after {display:none}
footer .f_info address {display:block; padding:0px 0; line-height:1.4; color:#000; margin:5px 0px; font-style:normal;}
footer .f_info address a {color:#000}
footer .f_info small {font-size:11px; color:#000; letter-spacing:0px;}
footer .f_info small a {text-decoration:none; color:#888}

/* 하단바로가기 */
.footBtn {position:absolute; top:0px; right:0px; text-align:left; width:200px; height:40px; margin:0 5px 5px 0; border:1px solid #ccd1da;}
.footBtn button {width:198px; height:38px; background:#fff; color:#404040; text-align:center; border:1px solid #eee;}
.footBtn ul {display:none; position:absolute; bottom:30px; left:-1px; z-index:10000; width:200px; background:#fff; border:1px solid #ccd1da; border-bottom:0; max-height:300px; overflow-y:scroll;}
.footBtn ul li.ti {border-bottom:1px dashed #dedede; overflow:hidden; color:#404040; background:#eeeeee; font-size:13px; text-align:center; padding:7px 5px;}
.footBtn ul li {border-bottom:1px dashed #dedede; overflow:hidden; background:#fff; font-size:13px;}
.footBtn ul li:last-child {border:0;}
.footBtn ul li.subLine {border-bottom:3px double #dedede;}
.footBtn ul li a {display:block; overflow:hidden; padding:7px 5px; color:#333; background:#fff; font-size:13px; text-align:left;}
.footBtn ul li a:hover,
.footBtn ul li a:focus,
.footBtn ul li a:active {color:#fff; background:#404040;}

/* 이전장 다음장 */
.at_prev {
	border:1px solid #CCC;
	background:rgba(255, 255, 255, 0.8);
	color:#444;
	font-size:26px;
	line-height:40px;
	cursor:pointer;
	bottom:80px;
	height:40px;
	overflow: hidden;
	position: fixed;
	left:10px;
	text-align:center;
	width:40px;
	z-index:9;
	opacity:.7;
}

.at_prev i		{vertical-align:0px;}
.at_prev:hover	{background:#FFF; color:#000; opacity:1; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; -o-transition:.3s ease-out; -ms-transition:.3s ease-out; transition:.3s ease-out; transform:translateY(-10px)}

.at_next {
	border:1px solid #CCC;
	background:rgba(255, 255, 255, 0.8);
	color:#444;
	font-size:26px;
	line-height:40px;
	cursor:pointer;
	bottom:80px;
	height:40px;
	overflow: hidden;
	position: fixed;
	right:10px;
	text-align:center;
	width:40px;
	z-index:9;
	opacity:.7;
}

.at_next i		{vertical-align:0px;}
.at_next:hover	{background:#FFF; color:#000; opacity:1; -webkit-transition:.3s ease-out; -moz-transition:.3s ease-out; -o-transition:.3s ease-out; -ms-transition:.3s ease-out; transition:.3s ease-out; transform:translateY(10px)}



@media all and (max-width:480px) {
	.f_logo {display:none}
	.f_info {width:98%; display:inline-block; overflow:hidden; text-align:center;}
	.f_info li:last-child {padding-right:0px;}
	
	.f_banner {position:relative; width:100%; height:auto; border-top:none; border-bottom:none; background:#FFF;}
	.f_banner ul.footBn {float:none; width:100%; display:inline-block; margin-bottom:10px;}
	.f_banner ul.footBn li {float:left; margin:1px 1px; width:49%; border:1px solid #dedede;}
	.f_banner ul.footBn li a {display:block; width:100%; text-align:center; line-height:35px; height:35px; font-size:12px; color:#888; letter-spacing:-1.3px; border:none; background:url(../img/common/arrow01.png) no-repeat; background-position:130px 12px; letter-spacing:-0.08em;}
	.f_banner ul.footBn li:first-child {border-left:1px solid #dedede;}
	
	.sns {position:relative; width:100%; text-align:center; margin:0px auto;}
	.sns li {position:relative; float:none; display:inline-block; width:38px; margin:0px 0px; font-size:0; line-height:0; z-index:1;}
	.sns li a {overflow:hidden; display:block; width:38px; height:38px;}
	
	footer .f_info address {font-size:11px; text-decoration:none;}
	
	.footBtn {position:relative; width:98%; height:40px; margin:0 auto; margin-bottom:10px;} 
	.footBtn button {width:100%; height:38px; background:#fff; color:#404040; text-align:center; border:1px solid #eee;}
	.footBtn ul {display:none; position:absolute; bottom:39px; left:-1px; z-index:10000; width:100%; background:#fff; border:1px solid #ccd1da; border-bottom:0; max-height:300px; overflow-y:scroll;}
}



/* 이미지 오버시 돋보기 아이콘 */
.disnop									{display:none !important;}
.magnifier:hover > a > i.disnop		{display:block !important;}