@charset "UTF-8";

@font-face {
font-family: 'NEXON Lv1 Gothic OTF';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
font-weight: normal;
font-style: normal;
}

.all_wrap {width:100%;  min-width:1200px; display:inline-block;  box-sizing:border-box; }



/* header scroll */
.header_show {transform: translateY(0%); -webkit-transform: translateY(0%);}
.header_hide {transform: translateY(-100%); -webkit-transform: translateY(-100%);}
 

.header {
position:fixed;
top:0;
left:0; min-width:1200px;
width:100%;  
z-index:1000;
height:75px;
 transition: all 0.3s ease-out;
}

.header.roll {height: 75px;}

.header:hover {background-color:#111}


nav.menu {
position: relative;
width:100%; min-width:1200px;
 }
 nav.menu li {vertical-align:middle}
 
.menu > ul li a.ov {background:url('/sian/img/ov_bg.jpg') no-repeat;  background-position:0.6vw 38px}
.displaynone{
display: none;
}

.mega-menu {
background: none repeat scroll 0 0 #222;
left: 0; top:75px;
padding:0 3%; box-sizing:border-box;
position: absolute;
width: 100%; line-height:48px;
display:none;
transition-duration: 0.9s;

}



.display-on{
display:block;
transition-duration: 0.9s;
}
 


/*Animation--*/

.animated {
-webkit-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}



.top {width:100%;  position:fixed;  }

.menu > ul li.logo {padding-right:3.1vw; width:140px; padding-left:2.6vw; border:1px solid red }
.menu > ul li.logo img {width:140px; }
 
.menu > ul li.util {text-align:right; padding-right:2.6vw; float:right; box-sizing:border-box;}

.menu > ul li a.top_util {display:inline-block; line-height:20px; width:35px; padding:0; height:30px;  margin:0; margin-top:25px;  }
.menu > ul li a.top_util img {height:24px}
.menu > ul li a.top_util:hover {background-color:#111}
 

.top_util_wrap {width:200px;  z-index:9999999999;  text-align:right; position:absolute; right:2.6vw;; top:23px;}
a.top_util img {height:24px; }
a.top_util {  padding:0 5px;  } 

.top_search {width:100%; display:inline-block; height:auto; background-color:#fff; position:absolute; z-index:9999999999; top:70px; padding:50px 0 70px 0; box-sizing:border-box; }
.top_search div {width:75%; margin:0 auto}
.top_search ul {width:20%; vertical-align:top;  display:inline-block; margin:0 3%}
.top_search ul li {width:100%; padding:0; font-size:1rem; color:#666; padding-bottom:10px; line-height:1.3em;  }
.top_search ul li:first-child {font-size:1.1rem; font-weight:600; color:#333; padding-bottom:30px}
.top_search .input_wrap {width:100%; height:80px; display:inline-block; border-bottom:2px solid #333; margin-bottom:50px; position:relative}

.top_search input {width:100%; height:78px; border:none;   font-size:2rem; text-align:center; }
.top_search input::placeholder {color:#111}
.top_search a.search_img_btn {position:absolute; right:13px; top:30px}
.top_search .close_btn {width:50px; line-height:50px;   position:absolute; right:10px; top:10px; text-align:center; color:#111}


/*새로운네비*/

nav {width:100%;    background-color:#333;   }
/* nav:hover {background-color:#222; height:130px;  transition: all 0.3s ease-out;}
 */
nav ul {
  font-size: 0;
  margin: 0; 
  padding: 0; width:100%; position:relative;  
} 

nav ul li {
  display: inline-block; position:relative;
 
}

nav ul li a {
 text-decoration: none; box-sizing:border-box;
color: #fff !important;  width:100%;  height:75px; line-height:75px;
display:inline-block; font-size:18px; font-weight:600;  padding:0 1.4vw; letter-spacing:1.5px;   
  transition: 0.3s linear; 
}
  
nav ul li ul {
 /*  background-color:#444; */
  display: none;
  width:600px;
   padding-left:1.4vw; position: absolute;  left:0;  top:75px; z-index:99999;  height:55px; 
}

nav ul li ul li {
  
  display:inline-block;  
}

 
nav ul li ul li a {
   color:#333 !important; font-size:1rem;  font-weight:400;
  display: block; height:50px; line-height:50px; letter-spacing:-1px; margin:0; padding:0; padding-right:1.6vw
 }
 

@media all and (max-width:1250px){
 nav ul li a {  font-size:1rem; }
}

.li_bg {width:130vw; height:55px;  /* background-color:#444; */ display:none; position:absolute; left:0; top:75px}
.li_bg1 {margin-left:-300px; }
.li_bg2 {margin-left:-400px; }
.li_bg3 {margin-left:-500px; }
.li_bg4 {margin-left:-700px; }
.li_bg5 {margin-left:-900px; }
.li_bg6 {margin-left:-1000px; }
 
/*컨텐츠*/

p.total {width:100%; display:inline-block;  font-size:1rem; letter-spacing:.3px; line-height:1em; text-align:left;  color:#555;   box-sizing:border-box ;  }
span.date {font-size:1em; letter-spacing:1px; font-family: 'Montserrat', sans-serif;}
.d-day {font-weight:600; color:#111; font-size:1rem; letter-spacing:2px;  line-height:1em; font-family: 'Montserrat', sans-serif;}
.d-day  span {color:red; letter-spacing:2px;  font-family: 'Montserrat', sans-serif;}
 .day {font-weight:600; color:#111; font-size:1rem; letter-spacing:2px;  line-height:1em; font-family: 'Montserrat', sans-serif;}

.label { font-size:1.3rem; padding:2px 10px; display:inline-block; background-color:#fff; border:1px solid #111} 
.label_bg1  {background-color:#333; color:#fff !important}


.li_line {width:100%; height:1px; background-color:#ddd; margin:2.6vw 0; display:inline-block }

.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.img_box {position:Relative; line-height:0; width:100%;   overflow:hidde }
.img_box img {width:100%; cursor: pointer; }
.img_box .label {background-color:#333; color:#fff; padding:0 10px;  position:absolute; bottom:0; left:0; line-height:26px; font-size:1rem;  }



.writer {color:#333;   position:absolute; bottom:30px; right:30px;   font-size:1rem;   }
.writer  img {width:30px; height:30px;  vertical-align:middle;  background-color:#fff; border-radius:50%; display:inline-block; margin-left:5px}

.writer2 {color:#333;   font-size:1rem;   }
.writer2  img {width:30px !important; height:30px !important;  vertical-align:middle;  background-color:#fff; border-radius:50%; display:inline-block; margin-right:5px}

.img_heart {color:#333;   position:absolute; top:30px; right:30px;  }





#heart {
 font-size:0px !important;   background:url('/sian/img/heart.png') no-repeat; background-size:cover; width:25px; height:21px;   vertical-align:top; cursor:pointer;
}

#heart.red {  
  font-size:0px !important;   background:url('/sian/img/heart_ov.png') no-repeat; background-size:cover; width:25px; height:21px;   vertical-align:top; cursor:pointer;
}

.border_one {width:21px; height:21px; border-radius:50%; border:5px solid #333; display:inline-block; box-sizing:border-box; vertical-align:middle;  margin-top:-3px;}


.main_ct {width:100%; display:flex;   justify-content:space-between; margin:2.6% 0 0 0;  box-sizing:border-box; padding:0 2.6%;  font-size:0; }
.left_wrap {width:60%; margin-right:1.3%;  }
.right_wrap {width:40%;margin-left:1.3%;  }

.box { background-color:#fff;    box-sizing:border-box;}
.box div.text_box {font-size:1rem;   color:#666; line-height:1.3em;   }
.box h3 {font-size:1.7rem; line-height:1.3em;   font-weight:600; color:#333; width:100%;  display:inline-block; padding:1.6vw 0 1vw 0; box-sizing:border-box;    }
.box div.text_box  p {width:100%; display:inline-block; box-sizing:border-box; }
.box div.text_box  p.t {width:100%; color:#666; line-height:1.5em; font-size:1rem; font-weight:300;   box-sizing:border-box;  }

.border_box {width:100%; border:1px solid #333; padding:20px; box-sizing:border-box; display:inline-block}


#main p.total {margin-top:1vw;  }
 


/*이벤트플러스 옵션 상품리스트*/

div.product_box_wrap {width:100%; display:inline-block; margin-top:-3.6vw; margin-bottom:3.6vw;  border-bottom:1px solid #ddd;   }
div.product_box {width:100% ;  display:flex; flex-wrap:wrap;   }
div.product_box div {width:50%; display:flex; align-items:center;  box-sizing:border-box;  border-bottom:1px solid #ddd;  }
#main div.product_box div {margin-bottom:-1px}
div.product_box div img {width:60%; height:auto }
div.product_box p { font-size:1.2rem; font-weight:400; line-height:1.2em; color:#444}
div.product_box p b {font-size:1.1rem; color:#111; font-family: 'NEXON Lv1 Gothic OTF'; letter-spacing:1px; font-weight:600; width:100%; display:inline-block; padding-top:10px}
div.product_box p span {font-size:.83rem; color:#999; font-weight:300; font-family: 'NEXON Lv1 Gothic OTF'; letter-spacing:1px;  text-decoration:line-through; }


.right_wrap  div.product_box div {width:100%; border-bottom:1px solid #ddd; margin-bottom:-1px}
.right_wrap div.product_box div:nth-child(2n) {border-left:none}
.right_wrap  div.product_box:last-child {border-bottom:none; border-left:none; margin-bottom:0;  }
.right_wrap div.product_box div img {width:55%}

.right_wrap .box h3 {padding-left:5px}
 


/*푸터*/

footer {width:100%; display:inline-block; border-top:1px solid #333;  color:rgba(255,255,255,.6); font-size:.88rem; line-height:1.8em; box-sizing:border-box;font-weight:300 ; margin-top:3vw }

footer .footer_wrap {background-color:#111; padding:4.7vw 0 5.2vw 0; width:100%; display:inline-block}

footer ul.sns li {display:inline-block; padding:10px 30px 5px 0; }
footer ul.sns li img {height:33px}

footer span.footer_line {width:80px;   text-align:Center;  display:inline-block}


footer div.in {width:90%; max-width:1500px; box-sizing:border-box; padding:0 3%; display:flex; margin:0 auto;  }
footer div.in div {width:60%; display:inline-block; box-sizing:border-box; padding-right:5%;  font-size:1rem}
footer div.in dl {width:20%; font-size:1rem}
footer div.in dt {font-weight:500; padding-bottom:5px; color:rgba(255,255,255,.6); }
footer div.in dl ul li  {padding-bottom:5px;  }
footer div.in div a {color:rgba(255,255,255,.6) !important; padding-right:10px;  display:inline-block; padding-top:2.6vw;   }
footer div.in div h5 {color:rgba(255,255,255,.6) !important;  display:inline-block;  padding-bottom:10px; font-size:1.05rem; font-weight:500}

/*이미지 오버 이미지체인지*/

.imgDiv {width: 100%;}
.imgDiv img {width: 100%; position: absolute; left:0; min-height:100%; top:0; }
.imgDiv > .funny {opacity: 0; transition:opacity 1s}
.imgDiv:hover > .funny {opacity: 1;}


.imgDiv2 {width: 100%; display:inline-block; padding-bottom:100%;  position: relative; line-height:0; box-sizing:border-box;}
.imgDiv2 img {  width: 100%; height:100%;  position: absolute; left:0; top:0  }
.imgDiv2 > .funny {opacity: 0; transition: opacity 1s}
.imgDiv2:hover > .funny {opacity: 1;}