@import url("/eng/comm/css/common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");


/* ¼­ºêž */
#visual {position:relative; width:100%; height:550px; background:#000;}
#visual .visual_in {position:absolute; left:50%; top:53%; transform:translate(-50%,-50%); z-index:9999;}
#visual .v_txt {text-align:center; width:100%;}
#visual .v_txt h3 {color:var(--white); transform:translateY(60px); opacity:0; animation:v_txt 1.0s 0.3s; animation-fill-mode:both;}
#visual .v_bg {position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden;}
#visual .v_bg::before {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:2; background:rgba(0,0,0,0.2);}
#visual .v_bg .bg {position:absolute; left:0; top:0; width:100%; height:100%; transform: scale(1); animation: m_vsImg 1.8s;}

#visual.product .subVisual_in {width: 100%; height: 100%; position: relative; overflow: hidden; }
#visual.product .subVisual_in .roll {width: 100%; height:550px;}
#visual.product .subVisual_in .roll .v_bg {position: absolute; left: 0; top:0; width: 100%; height: 100%;}
#visual.product .subVisual_in .roll .v_bg::before {position: absolute; content:"";  left: 0; top:0; width: 100%; height: 100%; z-index:1005; background:var(--black); opacity:0.25; }  
#visual.product .subVisual_in .roll .v_bg .bg {width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center 35%; -ms-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); -webkit-transition:transform 3000ms  ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;}
#visual.product .subVisual_in .roll .v_bg .mo {display:none;}

/* È¿°ú */
#visual.product .subVisual_in .roll.action .v_bg .bg{transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1);}


@keyframes m_vsImg {
	0% {-webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
	20% {-webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
	100% {-webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
}

@keyframes v_txt {
	0% {transform:translateY(50px); opacity:0;}
	100% {transform:translateY(0); opacity:1;}
}


/* ºñÁÖ¾ó lnb */
.visual_lnb {position: absolute; right: 50%; margin-right:-650px; bottom:25px; z-index:1005;}
.visual_lnb dl {display: flex; align-items:center;}
.visual_lnb dl dt {padding-right:20px;}
.visual_lnb dl dt a {display: flex; align-items:center; width: 24px; font-size:0;  transition:all .3s linear;}
.visual_lnb dl dt a:hover {opacity: 1;}
.visual_lnb dl dt a svg {width: 100%; height: 100%;}
.visual_lnb dl dd {position:relative;}
.visual_lnb dl dd::before {content:''; display:block; width:1px; height:16px; position:absolute; left:0; top:50%; margin-top:-8px; background:rgba(255,255,255,0.3);}
.visual_lnb dl dd .txt {padding:0 45px 0 20px; box-sizing:border-box; position: relative; font-size:1rem;  min-width:200px; color:var(--white); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.visual_lnb dl dd .txt:after {position: absolute; right:15px; top:5px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; font-family:var(--icon); font-size:24px; color:var(--white); content:'\e313'; box-sizing:border-box; transition:all .3s linear;}
.visual_lnb dl dd:last-child .txt {font-weight:600;}
.visual_lnb dl dd:last-child .txt:after {right:0; font-weight:400;}
.visual_lnb dl dd .txt.on:after {transform:rotate(180deg);}
.visual_lnb dl dd .dlst {position: absolute; z-index: 999; margin: 10px 0 0; width:100%; background-color: var(--grayBg); padding:20px 15px; box-sizing:border-box; display: none;}
.visual_lnb dl dd .dlst.on {display: block;}
.visual_lnb dl dd .dlst ul {}
.visual_lnb dl dd .dlst ul li {padding: 0 0 4px;}
.visual_lnb dl dd .dlst ul li:last-child {padding: 0;}
.visual_lnb dl dd .dlst ul li a {font-size:0.938rem; transition:all .2s linear; line-height: 120%; }
.visual_lnb dl dd .dlst ul li a.on {color:var(--main); font-weight:600;}
.search_none .visual_lnb dl dd:last-child {display: none;}


/* PC lnb */
.lnb {display:none; overflow:hidden; position: relative; z-index: 9; top:0; background:var(--white); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);}
.lnb .lnb_in{}
.lnb .lnb_in ul{display:flex; justify-content: center;}
.lnb .lnb_in ul li{width: auto; margin:0 20px;}
.lnb .lnb_in ul li a{display:inline-block; font-size:var(--fs18); color:rgba(34,34,34,.5);  line-height:80px; box-sizing:border-box; position:relative; transition:all .3s linear;}
.lnb .lnb_in ul li.left_linktop a{color:var(--main); font-weight:700;}
.lnb .lnb_in ul li:hover a{color:var(--main);}
.lnb .lnb_in ul li a:after{content:''; display:block; width:0; height:3px; background:var(--main); position:absolute; left:50%; top:0; transform:translateX(-50%); transition:all .3s linear;}
.lnb .lnb_in ul li:hover a:after{width: 100%;}
.lnb .lnb_in ul li.left_linktop a:after{width: 100%;}
.search_none .lnb{display: none;}


/* ¸ð¹ÙÀÏ lnb */
.mobile_snb {display:none;}

#contents {margin:0 auto !important;}
.search_none #contents{margin: 0 auto;}

/* ŸÀÌƲ */
#subtitle {padding:100px 0 50px; text-align:center;}
#subtitle h3 {color:var(--black);}


/*** °øÅë css ***/
.basic_cont {max-width:1350px; width:94%; margin:0 auto 150px auto;}

.txt, .txt > p {font-size:1rem;  color:var(--basic); line-height:170%;}
.txt > p + p {margin-top:20px;}

.subTit {color:var(--black);}

.dottList li {position:relative; padding-left:12px; box-sizing:border-box; margin-bottom:8px;}
.dottList li:last-child {margin-bottom:0;}
.dottList li:before {position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:100%; background:#B3B3B5; content:""; z-index:5;}

/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{position:relative;}
.gallery_roll:after{content:''; display:block; clear:both;}
.gallery_roll .roll{position:relative;}
.gallery_roll .roll .imgArea{background:#000; overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_roll .roll .imgArea img{width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_roll .roll .txtArea{position:absolute; left:0; bottom:0; width:100%; text-align:center; background:rgba(34,34,34,.6); padding:20px; box-sizing:border-box;}
.gallery_roll .roll .txtArea h4{font-weight:400; color:var(--white); line-height:150%; font-size:1.25rem;}
.gallery_roll .slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; width: 30px; height: 30px; opacity: 1; left: auto; right:auto; bottom: auto; top:50%; margin-top:-15px;}
.gallery_roll .slick-arrow:hover{opacity:0.5;}
.gallery_roll .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; left:30px;}
.gallery_roll .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto; right:30px;}

.gallery_nav{margin:30px -2px 0; width:calc(100% + 4px);}
.gallery_nav:after{content:''; display:block; clear:both;}
.gallery_nav .roll{margin:0 2px; cursor:pointer; background-color:#000; overflow: hidden;}
.gallery_nav .roll .txtArea{display: none;}
.gallery_nav .roll .imgArea{overflow: hidden; aspect-ratio: 3 / 2;}
.gallery_nav .roll .imgArea img{opacity:0.5; width: 100%;  display: block; width: 100%; height: 100%; object-fit: cover;}
.gallery_nav .roll.slick-current .imgArea img{opacity:1;}


/*** °í°´¼¾ÅÍ > ½Ã°ø¹®ÀÇ ***/
.inquiry {max-width:1000px; margin-right:auto; margin-left:auto;}
.inquiry.txt {margin-top:20px;}
.csBox {text-align:center; padding:30px; box-sizing:border-box; background:var(--grayBg); margin-bottom:20px;}
.csBox dl {display:flex; align-items:center; justify-content:center;}
.csBox dl dt {color:var(--black); margin-right:15px; font-weight:600; line-height:120%;}
.csBox dl dd {color:var(--main); letter-spacing:1.2px; font-weight:700;}
.csBox .fs16 {font-weight:400; margin-top:15px;}


/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px;  font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; }
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); margin:7px 0px 10px 0px; display:block;   line-height:1.7;}

.privacy_list {width:91%; overflow:hidden; clear:both; *zoom:1; padding:4% 4% 3% 4%; border:1px solid var(--border); margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 






/*******************************************************************************
    @media 1350px
*******************************************************************************/
@media all and (max-width:1350px){


/*** °øÅë css ***/


/* ºñÁÖ¾ó lnb */
.visual_lnb {right:2%;  margin-right: 0;}


}
/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1280px){

/* ¼­ºêž */
#visual {height:500px;}
#visual.product .subVisual_in .roll {height:500px;}


/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:15px;}
.gallery_roll .slick-arrow{width: 25px; height: 25px; margin-top:-12px;}
.gallery_roll .slick-prev{left:20px;}
.gallery_roll .slick-next{right:20px;}
.gallery_nav{margin:20px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}



}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* ¼­ºêž */
#visual {height:380px;}
#visual.product .subVisual_in .roll {height:380px;}


/* ŸÀÌƲ */
#subtitle {padding:80px 0 40px;}


/*** °øÅë css ***/
.basic_cont{margin:0 auto 120px auto;}

.subTit{font-size:2rem;}
.subTxt{font-size:1.12rem;}
.stxt{font-size:1rem;}


/*** °í°´¼¾ÅÍ > ½Ã°ø¹®ÀÇ ***/
.inquiry.txt {margin-top:15px;}
.csBox {padding:25px;}
.csBox .fs16 {margin-top:12px;}



/* ÀÌ¿ë¾à°ü, °³ÀÎÁ¤º¸Ãë±Þ¹æħ */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }



/* ¹è¼ÛÁö °ü¸® */
#myDelivery .input{height: 40px; line-height: 38px; padding:0 10px;}
#myDelivery .postSearch_btn{height:40px; line-height:38px;}

#myDelivery .add_table {}
#myDelivery .add_table th {width: 150px; padding: 15px 10px;}
#myDelivery .add_table td{padding:15px 10px;} 

#myDelivery .no_data{padding: 60px 0;}
#myDelivery .myDelivery_list{}
#myDelivery .myDelivery_list dl{padding: 20px;}
#myDelivery .myDelivery_list dl dt{width: calc(100% - 250px);}
#myDelivery .myDelivery_list dl dd{width: 250px;}
#myDelivery .myDelivery_list dl dd .btn{padding:0 15px;}


}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* ¼­ºêž */
#visual {height:280px;}
#visual.product .subVisual_in .roll {height:280px;}
#visual.product .subVisual_in .roll .v_bg .bg {background-position:center center;}
#visual.product .subVisual_in .roll .v_bg .pc {display:none;}
#visual.product .subVisual_in .roll .v_bg .mo {display:block;}

#visual .visual_in {top:55%;}

/* ºñÁÖ¾ó lnb */
.visual_lnb {display:none;}

/* ¸ð¹ÙÀÏ lnb */
.mobile_snb {display:block;}
.mobile_snb .tbox{display:flex;}
.mobile_snb .tbox .box{width:50%; box-sizing:border-box;}
.mobile_snb .tbox .box .dropLst{position: relative;}
.mobile_snb .tbox .box .dropLst .title{display:block; font-size:1rem; font-weight: 700; line-height:50px;  box-sizing:border-box; padding:0 40px 0 5%; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; position: relative;}
.mobile_snb .tbox .box .dropLst .title:after {content:''; display:block; width:15px; height:15px; line-height:1; position:absolute; right:5%; top:50%; margin-top:-8px; transition:all .3s linear; opacity: 1; font-family:var(--icon); font-size:15px; content:"\e313"; color:var(--main);}
.mobile_snb .tbox .box.dep1 .dropLst .title{background:var(--white); color:var(--main);}
.mobile_snb .tbox .box.dep2 .dropLst .title{background:var(--main); color:var(--white);}
.mobile_snb .tbox .box.dep2 .dropLst .title:after {color:var(--white);}
.mobile_snb .tbox .box .dropLst .title.on{}
.mobile_snb .tbox .box .dropLst .title.on:after{transform:rotate(180deg);}
.mobile_snb .tbox .box .dropLst .dlst{display:none; position: absolute; left: 0; top:50px; width: 200%; background:var(--white); z-index: 99999; box-shadow:0 20px 20px rgba(0,0,0,.05);}
.mobile_snb .tbox .box.dep2 .dropLst .dlst{left: -100%;}
.mobile_snb .tbox .box .dropLst .dlst ul{}
.mobile_snb .tbox .box .dropLst .dlst ul li{}
.mobile_snb .tbox .box .dropLst .dlst ul li a{display: block; padding: 0 2.5%; font-size:1rem; line-height:50px;  box-sizing:border-box; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.mobile_snb .tbox .box .dropLst .dlst ul li a.on{background:var(--main); color:var(--white);}

.search_none .mobile_snb{display: none;}

#contents{margin:0 auto;}

/* ŸÀÌƲ */
#subtitle {padding:60px 0 30px;}


/*** °øÅë css ***/
.basic_cont{margin:0 auto 80px;}

.txt, .txt > p {line-height:160%;}
.txt > p + p {margin-top:15px;}

.dottList li {padding-left:8px; margin-bottom:6px;}
.dottList li:before {top:8px; width:3px; height:3px;}


/* °¶·¯¸®2(¹è³Ê) */
.gallery_roll{}
.gallery_roll .roll .txtArea{padding:10px;}
.gallery_roll .slick-prev{left:10px;}
.gallery_roll .slick-next{right:10px;}
.gallery_nav{margin:10px -2px 0; width:calc(100% + 4px);}
.gallery_nav .roll{margin:0 2px;}


/*** °í°´¼¾ÅÍ > ½Ã°ø¹®ÀÇ ***/
.inquiry.txt {margin-top:12px;}
.csBox {padding:22px;}
.csBox .fs16 {margin-top:10px;}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){

/* ¼­ºêž */
#visual {height:230px;}
#visual.product .subVisual_in .roll {height:230px;}

/*** °øÅë css ***/
.dottList li { margin-bottom:5px;}
.dottList li:before {top:8px;}


}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){


}