@charset "utf-8";

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
공통CSS
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/

:root {
  --side-width: 400px; /* 고정 sidebar 너비 */
}
html, body{overflow-x:hidden !important;}
ul,ol{list-style:none}
body{font-size:16px; line-height:1; color:#333}
.container_fix{width:1230px;}
.container_img img{display:block;}
@media (min-width:1950px){
	.container_img img{width:100%; margin:0 auto;}
}
@media (max-width:1850px){
	.container_img img{width:100%; margin:0 auto;}
}
@media (max-width:991px){

}

::selection {
  background: #999999; /* 드래그 시 배경색 */
  color: white;        /* 드래그 시 글자색 */
}

::-moz-selection {
  background: #999999; /* 드래그 시 배경색 */
  color: white;        /* 드래그 시 글자색 */
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
헤더 html > thema > fivesense-basic > shop.head.php
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
header.header{position:fixed; top:0; left:0;  width: var(--side-width); transition:all 0.3s; z-index:10; height: 100%; padding: 20px;}
header.header > .container_fix{width:1820px; display:flex; flex-direction: column; height: 100%; padding: 0; }
header.header > .container_fix > div{position:relative;}
header.header > .container_fix > div.header_logo{width:110px; text-align:left;}
header.header > .container_fix > div.header_logo a {display: block; position: relative; z-index: 30;}
header.header > .container_fix > div.header_logo .logo_b{display:none;}
header.header > .container_fix > div.header_menu{text-align:left; margin-top: 50px;}
header.header > .container_fix > div.header_foot { margin-top: auto; }
header.header > .container_fix > div.header_foot .sns { display: flex; flex-direction: column; gap:10px; }
header.header > .container_fix > div.header_foot .sns .sns_email { display: none; }
header.header.sub_head > .container_fix > div.header_foot .sns .sns_email { display: flex; }
header.header > .container_fix > div.header_foot .sns a { font-size: 11px; font-weight: 300; color:#000000; display: block; width: 100px; }
header.header > .container_fix > div.header_foot .sns span { font-size: 11px; font-weight: 300; color:#000000;}
header.header > .container_fix > div.header_foot .header_cont { margin-top: 30px; }
header.header > .container_fix > div.header_foot .header_cont h3 { font-size: 11px; font-weight: 400; color:#000000; line-height: 18px;}
header.header > .container_fix > div.header_foot .header_copy { font-size: 10px; font-weight: 300; color:#000000; margin-top: 40px; }
header.header > .container_fix > div.header_foot .header_copy p { font-family: 'Mukta Malar', sans-serif; }

.font-pre {font-family: 'Pretendard', sans-serif; font-weight: 200;}

header.header > .container_fix > div.header_menu > ul{position:relative; z-index:1;  margin:0 auto; display: flex; flex-direction: column;}
header.header > .container_fix > div.header_menu > ul > li{display:flex; vertical-align:top; position:relative; margin-bottom: 25px; }
header.header > .container_fix > div.header_menu > ul > li > a{font-size:16px; color:#000000; font-weight:500; margin-right:60px; position:relative; display:block;}
header.header > .container_fix > div.header_menu > ul > li > a:hover {font-weight:bold;}
header.header > .container_fix > div.header_menu > ul > li.on > a { font-weight:bold;}
/*header.header > .container_fix > div.header_menu > ul > li.on > a::after{ content: "_"; position: absolute; }*/


header.header > .container_fix > div.header_menu > ul > li:hover > a::after{width:100%;}
header.header > .container_fix > div.header_menu > ul > li > .sub_div{ text-align:left; opacity:0; visibility:hidden; height:0; transform-origin:top;}
header.header.m01_01_list > .container_fix > div.header_menu > ul > li:first-child > .sub_div{ text-align:left; visibility:visible; opacity:1; height:auto; }
/* 2,3,4는 해당 2차메뉴 노출 안되게 */
header.header.sub_head > .container_fix > div.header_menu > ul > li:first-child:hover > .sub_div{visibility:visible; opacity:1; height:auto; transition: all 0.3s ease;}
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul{ display: flex; flex-direction: column; }
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li{display:inline-block; margin-right:35px; margin-bottom: 15px;}
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li > a{display:block; font-size:14px; font-weight:400; color:#000000;}
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li > a:hover{ font-weight:bold; }
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li.on > a{display:block; font-size:14px; font-weight:bold; color:#000000;}
/*header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li.on > a::after{ content: "_";}*/
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li.off > a{display:block; font-size:14px; font-weight:400; color:#000000;}
header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li.off > a:hover{ font-weight:bold; }
header.header > .container_fix > div.header_menu > ul:hover + .header_menu_bg{opacity:1; height:100px; visibility:visible;}
header.header > .container_fix > div.header_btn{width:1px; white-space:nowrap; text-align:right;}
header.header > .container_fix > div.header_btn .lang_box{display:block; position:relative;}
header.header > .container_fix > div.header_btn .lang_box a.lang_a{font-size:17px; color:#ffffff; font-weight:600; padding-right:20px;}
header.header > .container_fix > div.header_btn .lang_box a.lang_a span.tri{border-top:5px solid #fff; border-left:5px solid transparent; 
border-right:5px solid transparent; position:absolute; right:0; top:8px; transition:all 0.4s;}
header.header > .container_fix > div.header_btn .lang_box:hover a.lang_a span.tri{transform:rotate(90deg);}
header.header > .container_fix > div.header_btn .lang_box a.lang_a + ul{position:absolute; top:4px; left:-80px; opacity:0; visibility:hidden; transition:all 0.4s;}
header.header > .container_fix > div.header_btn .lang_box:hover a.lang_a + ul{opacity:1; left:-100px; visibility:visible;}
header.header > .container_fix > div.header_btn .lang_box a.lang_a + ul li{display:inline-block;margin-right:20px;}
header.header > .container_fix > div.header_btn .lang_box a.lang_a + ul li a{font-size:17px; color:#fff; font-weight:600;}

header.header > .container_fix > div.header_btn .mobile_all_menu_btn{display:none;}


header.header .all_menu{display:none;}



/* 서브 페이지 */
.at-wrapper.sub_page {
    width: calc(100% - var(--side-width));
    margin-left: var(--side-width);
    padding: 20px;
}
/*
@media (max-width:1500px){
	header.header > .container_fix > div.header_menu > ul{position:relative;}
	header.header > .container_fix > div.header_menu > ul > li{position:static;}
	header.header > .container_fix > div.header_menu > ul > li > .sub_div{position:absolute; left:0;}
}
*/
@media (max-width:1200px){
	header.header > .container_fix > div.header_menu > ul > li > a{margin-right:30px;}
	header.header > .container_fix > div.header_menu > ul > li > .sub_div > ul > li{margin-right:15px;}
}

@media (max-width:991px){
    header.header > .container_fix > div.header_logo img{width:50px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn{display:none;}
	header.header.active, header.header.fixed{}
	header.header.active > .container_fix > div.header_logo .logo_b,
	header.header.fixed > .container_fix > div.header_logo .logo_b{display:block;}
	header.header.active > .container_fix > div.header_logo .logo_w,
	header.header.fixed > .container_fix > div.header_logo .logo_w{}
	header.header.active > .container_fix > div.header_menu > ul > li > a,
	header.header.fixed > .container_fix > div.header_menu > ul > li > a{color:#000000;}
	header.header.active > .container_fix > div.header_btn .lang_box a.lang_a,
	header.header.fixed > .container_fix > div.header_btn .lang_box a.lang_a{color:#222222;}
	header.header.active > .container_fix > div.header_btn .lang_box a.lang_a + ul li a,
	header.header.fixed > .container_fix > div.header_btn .lang_box a.lang_a + ul li a{color:#222;}
	header.header.active > .container_fix > div.header_btn .lang_box a.lang_a span.tri,
	header.header.fixed > .container_fix > div.header_btn .lang_box a.lang_a span.tri{border-top-color:#222222; transition:none;}
	header.header .all_menu{display:none;}
	header.header{padding:10px 0; width: 100%; height: auto;}
	header.header > .container_fix{display:flex; justify-content:space-between; flex-direction: row; padding: 0 10px;}
	header.header > .container_fix > div.header_btn{width:auto; display: flex; justify-content: center; align-items: center;}
	header.header > .container_fix > div.header_menu,
	header.header > .container_fix > div.header_btn .lang_box{display:none;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn{display:block; text-align: -webkit-right;}
	header.header.fixed > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span,
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span{background:#222;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn{display:flex; width:28px; vertical-align:middle; z-index:30; position:relative; gap: 12px; flex-direction: column; align-items: flex-end; justify-content: center;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span{display:block; width:10px; height:2px; margin-bottom:0; background:#000000; transition:all 0.5s;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span:nth-child(2){}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span:nth-child(4){margin-bottom:0;}
   
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(1){transform:translateY(19px) rotate(-45deg); width:15px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(2){opacity:0;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(3){transform:translateY(-9px) rotate(45deg); width:15px;}
    header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(4){opacity:0;}

	header.header .all_menu{display:block; left:100%; /* opacity:0; */ visibility:hidden; transition:all 0.5s; background:#fff; width:100%;
	position:fixed; top:0; height:100vh; }
	header.header .all_menu.active{left:0; /* opacity:1; */ visibility:visible;}
	header.header .all_menu .all_menu_header{padding:30px 15px; position:relative; margin-bottom:60px;}
	header.header .all_menu .all_menu_header > ul{}
	header.header .all_menu .all_menu_header > ul > li{display:inline-block; margin-right:30px;}
	header.header .all_menu .all_menu_header > ul > li:last-child{margin-right:0;}
	header.header .all_menu .all_menu_header > ul > li > a{font-size:18px; color:#999;}
	header.header .all_menu .all_menu_header > ul > li.active > a{color:#000000;}
	/* header.header .all_menu .all_menu_header a.all_menu_close{position:absolute; width:28px; display:block; top:15px; right:15px;}
	header.header .all_menu .all_menu_header a.all_menu_close span{display:block; width:28px; height:2px; transition:all 0.3s; 
	background:#222; transform:translateY(11px) rotate(45deg);}
	header.header .all_menu .all_menu_header a.all_menu_close span:nth-child(2){transform:translateY(-11px) rotate(45deg);} */
	header.header .all_menu .container_fix ul.all_menu_ul{}
	header.header .all_menu .container_fix ul.all_menu_ul > li{display:block; padding-bottom:18px; margin-bottom:18px; }
	header.header .all_menu .container_fix ul.all_menu_ul > li > a{font-size:16px; color:#000000; display:block; position:relative; font-weight: 500;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a > span.mobile_plus{display:block; position:absolute; top:3px; right:0; width:14px; height:14px;}
    /*
	header.header .all_menu .container_fix ul.all_menu_ul > li > a > span.mobile_plus::before{content:""; width:14px; height:1px; position:absolute; top:6px; background:#333;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a > span.mobile_plus::after{content:""; width:1px; height:14px; position:absolute; left:6px; background:#333;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a.active > span.mobile_plus::before{background:#000000;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a.active > span.mobile_plus::after{display:none;}
    */
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div{margin-top:20px; display:none;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a.active + .all_menu_sub_div{display:none;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div > ul > li{margin-bottom:20px;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div > ul > li:last-child{margin-bottom:0;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div > ul > li > a{font-size:16px; color:#666;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div > ul > li > .all_menu_sub_div2{display:none;}

    header.header .all_menu .all_menu_footer { margin-top: 140px;  }
    header.header .all_menu .all_menu_footer .all_menu_sns a { display: block; margin-bottom: 25px; }
    header.header .all_menu .all_menu_footer .all_menu_sns p { color: #000000; font-size: 11px; }
    header.header .all_menu .all_menu_footer h4 { color: #000000; font-size: 10px; margin-bottom: 20px; font-family: 'Mukta Malar', sans-serif; }

    /* 서브 페이지 */
    .at-wrapper.sub_page { width: 100%; margin-left: 0; padding: 10px; margin-top: 60px; }
}
/*
@media (max-width:768px){
	header.header{padding:20px 0;}
	header.header > .container_fix > div.header_logo img{width:90px;}
	header.header .all_menu .all_menu_header{padding:25px 15px;}
	header.header .all_menu .all_menu_header > ul > li > a{font-size:16px;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > a{font-size:18px;}
	header.header .all_menu .container_fix ul.all_menu_ul > li > .all_menu_sub_div > ul > li > a{font-size:15px;}
}

@media (max-width:480px){
	header.header{padding:15px 0;}
	header.header > .container_fix > div.header_logo img{width:80px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn{width:25px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span{width:25px; height:1px; margin-bottom:7px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn > span:nth-child(2){width:20px;}
	header.header .all_menu .all_menu_header{padding:18px 15px;}
	header.header .all_menu .all_menu_header > ul > li{margin-right:15px;}
	header.header .all_menu .all_menu_header > ul > li > a{font-size:14px;}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(1){transform:translateY(8px) rotate(-45deg);}
	header.header > .container_fix > div.header_btn .mobile_all_menu_btn > a.all_menu_btn.active > span:nth-child(3){transform:translateY(-8px) rotate(45deg);}
}
    */
/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
풀페이지 네비게이션 
html > thema > fivesense-basic > main > main-shop-basic-wide.php
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
.fullpage_bar_wrap{width:1850px; padding:0 15px; max-width:100%; margin:0 auto; position:relative;}
.fullpage_bar_wrap > .fullpage_bar{position:fixed; top:50%; transform:translateY(-50%); z-index:1;}
.fullpage_bar_wrap > .fullpage_bar .current_index{position:absolute; top: -30px; color:#fff; font-size:16px; font-weight:600; letter-spacing:-1px;
transform:rotate(90deg); white-space:nowrap; width:20px; vertical-align:top;}
.fullpage_bar_wrap > .fullpage_bar .total_length{position:absolute; bottom: -30px; color:#fff; font-size:16px; font-weight:600; letter-spacing:-1px; 
transform:rotate(90deg); white-space:nowrap; width:20px; vertical-align:top;}
.fullpage_bar_wrap > .fullpage_bar .bar{width:2px; height:270px; background:#fff; position:relative; left:8px; overflow:hidden;}
.fullpage_bar_wrap > .fullpage_bar .bar .bar_active{position:absolute; width:2px; height:0; background:#000000; transition:all 0.7s; }
@media (max-width:991px){
	.fullpage_bar_wrap{display:none;}
}

/*◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
푸터
html > thema > fivesense-basic > shop.tail.php
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆*/
/*footer.footer{padding:40px 0; margin-top:100px;}*/
footer.footer{padding:0; margin-top:0;}
footer.footer .container_fix{width:100%; padding-left:18vw;}
footer.footer .container_fix ul{}
footer.footer .container_fix ul li{display:inline-block; margin-right:12px; position:relative;}
footer.footer .container_fix ul li:last-child{margin-right:0;}
footer.footer .container_fix ul li::after{content:""; width:1px; height:17px; background:#d1d1d1; position:absolute; top:5px; right:-8px;}
footer.footer .container_fix ul li:last-child::after{display:none;}
footer.footer .container_fix ul li, footer.footer .container_fix ul li a,
footer.footer .container_fix ul li, footer.footer .container_fix h5{font-size:15px; color:#888888; line-height:26px;}
.at-go #go-btn{display:none !important;}

@media (max-width:991px){
	#fullpage footer.footer{display:none;}
	footer.footer .container_fix{padding-left:0; padding:0 15px;}
    .at-wrapper footer.footer {padding:0; margin-top:0; display: none;}
    .at-wrapper.sub_page footer.footer {display: block;}
    .at-wrapper.sub_page footer.footer h5 { font-size: 10px; color: #000000; margin-bottom: 30px; font-family: 'Mukta Malar', sans-serif;}

    .sns_m01 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
    .sns_m01 a { font-size: 11px; font-weight: 400; color: #000000; display: block; width: 100px;}
    .sns_m01 span { font-size: 11px; font-weight: 400; color: #000000; }
    .sns_m01 .sns_email { display: flex;}
}
@media (max-width:480px){
	/*footer.footer{margin-top:70px;}
	footer.footer{padding:20px 0;}*/
	footer.footer .container_fix ul li{display:inline-block; margin-right:8px; position:relative;}
	footer.footer .container_fix ul li::after{height:14px; top:5px; right:-6px;}	
	footer.footer .container_fix ul .mobile_block{display:block;}
	footer.footer .container_fix ul li:nth-child(2)::after, footer.footer .container_fix ul li:nth-child(4)::after,
	footer.footer .container_fix ul li:nth-child(7)::after{display:none;}
	footer.footer .container_fix ul li, footer.footer .container_fix ul li a,
	footer.footer .container_fix ul li, footer.footer .container_fix h5{font-size:13px; line-height:24px;}
}