@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,100..900,0..100,0..1&display=swap');

/*
Pretendard
	regular 400
	medium 500
	semibold 600
	bold 700
	extbold 800
	black 900
Montserrat
	regular 400
	medium 500
	semibold 600
	bold 700
	extbold 800
	black 900
Noto Serif KR
	200–900 (variable)
*/

.tenor-sans{font-family:'Tenor Sans', sans-serif;}
.noto-serif-kr{font-family:'Noto Serif KR', serif;}

.fraunces{
   /*font-family:'Fraunces', serif;*/
   /*font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 0;*/
}

.montserrat{font-family:'Montserrat', sans-serif;}

.fw-bold{
   font-weight: 700;
}
.fw-medium{
   font-weight: 500;
}
.fw-regular{
   font-weight: 400;
}
.fw-light{
   font-weight: 300;
}

.italic{
   font-style: italic;
}

/*********************************************************************************
**********************************************************************************
그누보드 초기화 *******************************************************************
**********************************************************************************/

/* 폰트 설정 */
body {margin:0;padding:0;font-size:0.75em;font-family:'pretendard', sans-serif; color:var(--color__basic); overflow-x: hidden;}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'pretendard', sans-serif;}
input, button {margin:0;padding:0;font-family:'pretendard', sans-serif; font-size:1em}
textarea, select {font-family:'pretendard', sans-serif; font-size:1em}
a {color:var(--color__basic);}

/* 기본 설정 */
#wrapper{background:#fff;}
#container{width:100%;}
#container .is_index{margin-left:0;}
#hd, #wrapper, #ft {min-width:initial}
#container .shop-content{padding: 0 0;}

/* 검색 영역 초기화 */
.hd_sch_wr{float: none; margin-left:0; padding:0 0; width:initial;}
#hd_sch{border-radius:0; overflow:hidden;}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch #sch_stx {float:left;width:385px;height:45px;padding-left:15px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.25em;color:#fff}
#hd_sch #sch_str {float:left;width:385px;height:45px;padding-left:15px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.2em;color:#fff}
#hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px}

/* 탑 버튼 */
#top_btn {position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:46px;border:2px solid #333;color:#333;text-align:center;font-size:15px;z-index:90;background:rgba(255,255,255,0.5)}
#top_btn:hover {border-color:#3059c7;background:#3059c7;color:#fff}


/*********************************************************************************
**********************************************************************************
기본 세팅 *******************************************************************
**********************************************************************************/
::selection {
	/*background: #9ABAD7;*/
	/*color:#fff;*/
}
input[type=text]:-webkit-autofill,input[type=password]:-webkit-autofill, textarea:-webkit-autofill,select:-webkit-autofill {	
	/*-webkit-box-shadow: 0 0 0 1000px transparent inset !important;*/
	/*box-shadow: none !important;*/
	/*background-color: transparent !important;*/
	/*-webkit-text-fill-color: inherit !important;*/
	/*caret-color: inherit !important;*/
	/*transition: background-color 5000s ease-in-out 0s;*/
}

 
/* 
   basic setting 
*/
.hide{display:none !important;}
.show{display: block !important;}
.img__descrip{display: none !important;}
.hidden1720{}
.visible1720{display:none;}
.hidden1440{}
.visible1440{display:none;}
.hidden1280{}
.visible1280{display:none;}
.hidden1024{}
.visible1024{display:none;}
.hidden768{}
.visible768{display:none;}
.hidden570{}
.visible570{display:none;}
.hidden480{}
.visible480{display:none;}
@media screen and (max-width:1720px){
   .hidden1720{display:none;}
   .visible1720{display:block;}
}
@media screen and (max-width:1440px){
   .hidden1440{display:none;}
   .visible1440{display:block;}
}
@media screen and (max-width:1280px){
   .hidden1280{display:none;}
   .visible1280{display:block;}
}
@media screen and (max-width:1024px){
   .hidden1024{display:none !important;}
   .visible1024{display:block !important;}
}
@media screen and (max-width:768px){
   .hidden768{display:none;}
   .visible768{display:block;}
}
@media screen and (max-width:570px){
   .hidden570{display:none;}
   .visible570{display:block;}
}
@media screen and (max-width:480px){
   .hidden480{display:none;}
   .visible480{display:block;}
}

.pdt__00px{padding-top:00px;}
.pdb__00px{padding-bottom:00px;}
.mgt__00px{margin-top:00px;}
.mgb__00px{margin-bottom:00px;}
.mgt__05px{margin-top:5px;}
.mgt__10px{margin-top:10px;}
.mgt__15px{margin-top:15px;}
.mgt__20px{margin-top:20px;}
.mgt__25px{margin-top:25px;}
.mgt__30px{margin-top:30px;}
.mgt__35px{margin-top:35px;}
.mgt__40px{margin-top:40px;}
.mgt__45px{margin-top:45px;}
.mgt__50px{margin-top:50px;}

.mgt__5per{margin-top:5%;}
.mgt__7per{margin-top:7%;}
.mgt__10per{margin-top:10%;}
.mgt__13per{margin-top:13%;}

.hgt__100per{height:100%;}
.border__box{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.clearfix:after{content:""; display:block; clear:both;}
.clearfix{*zoom:1}


/* 
	text setting 
*/
:root {
  --f10px: 10px;
  --f11px: 11px;
  --f12px: 12px;
  --f13px: 13px;
  --f14px: 14px;
  --f15px: 15px;
  --f16px: 16px;
  --f17px: 17px;
  --f18px: 18px;
  --f19px: 19px;
  --f20px: 20px;
  --f21px: 21px;
  --f22px: 22px;
  --f23px: 23px;
  --f24px: 24px;
  --f25px: 25px;
  --f26px: 26px;
  --f27px: 27px;
  --f28px: 28px;
  --f29px: 29px;
  --f30px: 30px;
  --f32px: 32px;
  --f34px: 34px;
  --f36px: 36px;
  --f38px: 38px;
  --f40px: 40px;
  --f42px: 42px;
  --f44px: 44px;
  --f46px: 46px;
  --f48px: 48px;
  --f50px: 50px;
  --f60px: 60px;
  
  --color__basic: #191919;
  --color__hover: #034694;
  --color__white: #fff;
  --color__main: #034694;
  --color__sub01: #191919;
  
  --header__theight: 40px;
  --header__bheight: 90px;
}
.tcolor__main{color:var(--color__main);}
.tcolor__basic{color:var(--color__basic);}
.tcolor__white{color:var(--color__white);}

.talign__left{text-align:left;}
.talign__center{text-align:center;}
.talign__right{text-align:right;}
@media screen and (max-width:1600px){
	:root {
		--f60px: 60px;
	}
}
@media screen and (max-width:1440px){
	:root {
		--f60px: 55px;
	}
}
@media screen and (max-width:1280px){
	:root {
		--f60px: 50px;
	}
}
@media screen and (max-width:1024px){
	:root {
		--f60px: 45px;
	}
}
@media screen and (max-width:768px){
	:root {
		--f60px: 40px;
	}
}
@media screen and (max-width:570px){
	:root {
		--f60px: 35px;
	}
}
@media screen and (max-width:480px){
	:root {
		--f60px: 14.2vw;
	}
}

/* 
   center box style 
*/
.inner__full{position:relative; width:100%; margin: 0 auto;}
.inner__cen584{position:relative; width:95%; max-width:584px; margin: 0 auto;}
.inner__cen768{position:relative; width:95%; max-width:768px; margin: 0 auto;}
.inner__cen860{position:relative; width:95%; max-width:860px; margin: 0 auto;}
.inner__cen980{position:relative; width:95%; max-width:980px; margin: 0 auto;}
.inner__cen1000{position:relative; width:95%; max-width:1000px; margin: 0 auto;}
.inner__cen1110{position:relative; width:95%; max-width:1110px; margin: 0 auto;}
.inner__cen1112{position:relative; width:95%; max-width:1112px; margin: 0 auto;}
.inner__cen1250{position:relative; width:95%; max-width:1250px; margin: 0 auto;}
.inner__cen1320{position:relative; width:95%; max-width:1320px; margin: 0 auto;}
.inner__cen1400{position:relative; width:95%; max-width:1396px; margin: 0 auto;}
.inner__cen1440{position:relative; width:95%; max-width:1440px; margin: 0 auto;}
.inner__cen1680{position:relative; width:95%; max-width:1680px; margin: 0 auto;}
.inner__cen1688{position:relative; width:95%; max-width:1688px; margin: 0 auto;}
.inner__cen1750{position:relative; width:95%; max-width:1750px; margin: 0 auto;}
.inner__cen1800{position:relative; width:95%; max-width:1800px; margin: 0 auto;}
.inner__cen1850{position:relative; width:95%; max-width:1850px; margin: 0 auto;}
.inner__cen1920{position:relative; width:95%; max-width:1920px; margin: 0 auto;}
.inner__wcen768{position:relative; width:100%; max-width:700px; margin: 0 auto;}
.inner__wcen980{position:relative; width:100%; max-width:980px; margin: 0 auto;}
.inner__wcen1200{position:relative; width:100%; max-width:1200px; margin: 0 auto;}
.inner__wcen1400{position:relative; width:100%; max-width:1400px; margin: 0 auto;}
.inner__wcen1700{position:relative; width:100%; max-width:1700px; margin: 0 auto;}
.inner__wcen1800{position:relative; width:100%; max-width:1800px; margin: 0 auto;}
.inner__wcen1850{position:relative; width:100%; max-width:1850px; margin: 0 auto;}
.inner__wcen1920{position:relative; width:100%; max-width:1920px; margin: 0 auto;}

@media screen and (max-width:1024px){
}

@media screen and (max-width:767px){
	.inner__cen1680{width:90%;}
}




/*********************************************************************************
**********************************************************************************
컨텐츠          *******************************************************************
**********************************************************************************/

/* 헤더 영역 */
.header{position:fixed; top:0; left:0; width:100%;z-index: 999;}
.header__main__box{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;} 

.logo__wr{}
.logo__wr img{}

.main__nav__wr{margin-left:auto;}
.main__nav__ul{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: flex-start; align-items: center;}
.main__nav__li{position:relative; margin-left:20px;}
.main__nav__a{}

.main__subnav__ul{display: none; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 100%); width: auto; z-index: 0; transition: all .3s; overflow: hidden; text-align: center; background-color: #fff;}
.main__subnav__li{display: block; padding: 0 24px;}
.main__subnav__a{white-space: nowrap;}
.btn__sch{}
.btn__lang{}
.lan__menu__wr{opacity: 0; visibility: hidden; position:absolute; top:30px; left:50%; padding:10px 20px; background:#1B1616; border-radius:10px; transform: translateX(-50%); transition:0.3s ease; z-index: 99;}
.lan__menu__wr a{color:#fff; display:block; margin:5px 0;}

@media (pointer: fine) {
	.btn__lang:hover .lan__menu__wr{display:block; opacity: 1; visibility: visible;}
}


/* 사이드 메뉴 영역*/
.ham__menu__wr{position:fixed; top:0; left:0; width:100%; max-width:644px; height:100vh; background:#ddd; z-index:1001; display:none;}
.btn__ham__close{position:absolute; top:60px; right:60px;}


/* 검색 영역 커스텀 */
.sch__wr{position:fixed; top:0px; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.8); z-index:999; display:none;}
.sch__box{position:relative; background:#ddd; padding: 100px 0;}
.btn__sch__close{position: absolute; top: 50px; right: 0;}
.hd_sch_wr{}
#hd_sch{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}
#hd_sch #sch_stx,
#hd_sch #sch_str {/*width: calc(100% - 28px);max-width:556px;height:45px;border:0; border-bottom:1px solid #1B1616; background:#FCFAEE; color:#B8B5AC; font-size:16px; padding-left:7px;*/}
#hd_sch #sch_submit {/*width:28px;height:45px;border:0; border-bottom:1px solid #1B1616; background:#FCFAEE; color:#B8B5AC; cursor:pointer; font-size:16px*/}
#popular{display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center;}


/* 푸터 영역*/
.footer{position:relative; background:#ddd;}


/* 메인 공통 세팅 */
.main__contents__wr{padding :240px 0;}
.main__content__box{}

.main__title__wr{}
.main__text01{font-size:20px; font-weight:500; margin-bottom:40px; color:var(--color__main);}
.main__title{font-size:60px; font-weight:700;}

.main__btn__wr{}
.main__btn__a{font-size:16px; font-weight:500;}
.main__btn__a img{margin-left:12px;transition: all .3s;}

@media (pointer: fine) {
	.main__btn__a:hover img{transform:translateX(5px);}

}
@media (max-width: 1440px){
	.main__contents__wr{padding :200px 0 200px;}
}
@media (max-width: 1024px){
	.main__contents__wr{padding :160px 0 160px;}
}
@media (max-width: 768px){
	.main__contents__wr{padding :130px 0 100px;}
}
@media (max-width: 570px){
	.main__contents__wr{padding :150px 0 80px;}
}


/* 메인 비주얼 영역 */
.main__visual__wr{}

.main__visual__swiper .swiper-pagination-progressbar {position: absolute; left: 50%; top:  calc(100% - 50px); transform:translateX(-50%); width:120px; height: 2px; background: rgba(255,255,255,0.3);}
.main__visual__swiper .swiper-pagination-progressbar-fill {background:  rgba(255,255,255,1);}
.main__visual__swiper .swiper-pagination::before {content: attr(data-current); position: absolute; left: -20px; top: 50%; transform:translateY(-50%); font-size: 14px; font-weight: 400; color:#fff; display:none;}
.main__visual__swiper .swiper-pagination::after {content: attr(data-total); position: absolute; right: -20px; top: 50%; transform:translateY(-50%); font-size: 14px; font-weight: 400; color:#fff; display:none;}

.mainvis__img__box{height:100vh;}
.mainvis__img__box img{position:relative; width:100%; height:100%; object-fit:cover;}
.mainvis__text__box{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); max-width:1440px; width:95%;}
.mainvis__text__box{}
.mainvis__tit{color:#fff; font-size:72px; font-weight:700; letter-spacing: -2px; margin-bottom:40px;}
.mainvis__text{color:#fff; font-size:24px; font-weight:400; margin-bottom: 120px;}

/* 메인 컨텐츠 */
#main__영역명__wr{}
.main__contents__wr01{}
.main__영역명__box01{}
.main__영역명__box02{}

#main__영역명__wr{}
.main__contents__wr02{}
.main__영역명__box01{}
.main__영역명__box02{}

@media screen and (max-width:570px){
}