/* BASIC css start */
/*sec1*/
#sec1{margin-bottom: 50px}
#sec1 .swiper{}
#sec1 .swiper>ul{}
#sec1 .swiper>ul>li{width: 1200px;}
#sec1 .swiper>ul>li>a{display:block; width:100%}
#sec1 .swiper>ul>li>a>img{width: 100%;}
#sec1 .swiper {overflow: hidden;}
#sec1 .swiper .btn_wrap{padding: 30px; position: absolute; z-index: 4; bottom: 0; right: 50%; transform: translateX(600px); width: max-content;display: flex; align-items: center; gap: 12px;}
#sec1 .swiper .btn_wrap>*{}
#sec1 .swiper .btn_wrap>ul{background-color: rgba(0,0,0,.4);display: flex; align-items: center; gap: 20px; padding: 10px 17px; border-radius: 25px;}
#sec1 .swiper .btn_wrap>ul li{}
#sec1 .swiper .btn_wrap>ul li>div:has(img){display: flex; align-items: center; justify-content: center;}
#sec1 .swiper .btn_wrap>ul li .swiper_prev{cursor: pointer; }
#sec1 .swiper .btn_wrap>ul li .swiper_prev img{}
#sec1 .swiper .btn_wrap>ul li .swiper-pagination{position: unset;color: #fff;font-size: 15px;display: flex; align-items: center; gap: 1px;}
#sec1 .swiper .btn_wrap>ul li .swiper-pagination span{display: inline-block; font-size: 18px;}
#sec1 .swiper .btn_wrap>ul li .swiper_next{cursor: pointer; }
#sec1 .swiper .btn_wrap>ul li .swiper_next img{}
#sec1 .swiper .btn_wrap .control{}
#sec1 .swiper .btn_wrap .control a{cursor: pointer; display: flex;transition: all .1s; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%;background-color: rgba(0,0,0,.4);}
#sec1 .swiper .btn_wrap .control a.clicked{opacity: .5;}
#sec1 .swiper .btn_wrap .control a img{}
#sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(0px); opacity: 1;}
#sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(0px); opacity: 1;}
#sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; top: 50%; transform: translateY(-50%); width: 100%;padding-left: 230px;}
#sec1 .swiper ul li .txt_area>*{transform: translateY(-25px);}
#sec1 .swiper ul li .txt_area p{opacity: 0; line-height: 1.3;}
#sec1 .swiper ul li .txt_area p.big{transition: all .5s;transition-delay: .35s;margin-bottom: 20px;}
#sec1 .swiper ul li .txt_area p.sub{  font-weight: 400; transition: all .5s; margin-bottom: 50px; transition-delay: .57s;}
#sec1 .swiper ul li .txt_area a.more{opacity: 0; transition-delay: .7s; }
#sec1 .swiper ul li .txt_area a.more:hover{background-color: #000;color: #fff;}

/* ½½¶óÀÌµå ¹Ù±ù À̹ÌÁö ÀÜ»ó °¡¸®±â */
#sec1 .swiper {
  overflow: hidden;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ½½¶óÀÌµå °íÁ¤ ³Êºñ ¹× Áß¾Ó Á¤·Ä */
#sec1 .swiper-slide {
  width: 1200px !important;
  flex-shrink: 0;
}

/*sec2*/
#sec2{}
#sec2 .sec_inner{}
#sec2 .sec_inner{width: fit-content;}
#sec2 .sec_inner .sec2_tit{display: flex; align-items: center; justify-content: space-between;margin-bottom: 20px;}
#sec2 .sec_inner .sec2_tit h2{margin-bottom: 0;}
#sec2 .sec_inner .sec2_tit .nav_wrap{display: flex; align-items: center;gap: 15px;}
#sec2 .sec_inner .sec2_tit .nav_wrap>*{}
#sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-next{}
#sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-prev{}
#sec2 .sec_inner .swiper{}
#sec2 .sec_inner .swiper>ul{
    margin: 0 auto;
    text-align: center;
}
#sec2 .sec_inner .swiper>ul>li{display: flex;flex-direction: column;gap: 10px;align-items: center;width: 132.5px!important;}
#sec2 .sec_inner .swiper>ul>li>a{display: flex;width: 100%;transition: all .1s; overflow: hidden;border-radius: 50%; border:2px solid transparent}
#sec2 .sec_inner .swiper>ul>li>a:hover{border-color:var(--main-color)}
#sec2 .sec_inner .swiper>ul>li:hover>p{color:var(--main-color)}
#sec2 .sec_inner .swiper>ul>li>a>img{width: 100%;transition: all .1s;}
#sec2 .sec_inner .swiper>ul>li>p{text-align: center;color: #000;font-size: 16px; font-weight: 600;}
/*sec3*/
#sec3 .sec_inner{position:relative;}
#sec3 .sec_inner .swiper-button-prev{position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2;}
#sec3 .sec_inner .swiper-button-next{position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2;}
#sec3 .sec_inner .sec3_cont .swiper{padding-bottom:30px;}
/*sec4*/
#sec4{}
#sec4 .sec_inner{}
#sec4 .sec_inner ul{display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 20px;}
#sec4 .sec_inner ul li{position: relative;flex-grow: 1;}
#sec4 .sec_inner ul li>a{display: block;width: 100%;}
#sec4 .sec_inner ul li>a>img{width: 100%;}
#sec4 .sec_inner ul li .txt_area{position: absolute; top: 61%;transform: translateY(-50%);  left: 40px;  max-width: 80%  }
#sec4 .sec_inner ul li .txt_area p{opacity: 0;}
#sec4 .sec_inner ul li .txt_area p.big{font-size: 34px; font-weight: 700; margin-bottom: 10px;transition-delay: .1s;}
#sec4 .sec_inner ul li .txt_area p.sub{font-size: 16px;line-height:1.4; margin-bottom: 10px;transition-delay: .27s;}
#sec4 .sec_inner ul li .txt_area a.more{font-size: 12px;opacity: 0; transition-delay: .48s; position:relative; }

#sec4.act .sec_inner ul li .txt_area p{transform: translateY(-25px); opacity: 1;}
#sec4.act .sec_inner ul li .txt_area a.more{transform: translateY(-25px); opacity: 1;}





/*ŸÀÓ¼¼ÀÏ*/
.timesale {
	padding: 20px 0px;
	text-align: left;
	width: 1200px !important;
    display: table;
    margin: 80px auto;
    overflow: hidden;
}

.timesale h2 {
	font-size: 32px;
	font-weight: 800;
	letter-spacing: 0px;
    color: var(--main-color);
}
.timesale h2 img {
	padding-right: 15px;
    filter: opacity(0.5) drop-shadow(0 0 0 red);
}
.timesale p {
	color: #000;
}

.timesale p.another_price{
    font-size: 20px;
    margin-top: -18px;
    color: red;}

.timesale p.subtit {
	font-size: 17px;
	padding-top: 20px;
	line-height: 1.7;
	color: #727272;
}
.timesale p.subtit font {
	font-size: 22px;
	color: #aaa;
	display: block;
	margin-bottom: -15px;
}
.timesale ul.prd-list {
	font-size: 16px;
	line-height: 1.8;
	padding-top: 80px;
	display: table;
    text-align: left;
}
.timesale ul.prd-list li {
	display: block;
	margin-bottom: 20px;
}
.timesale ul.prd-list li a {
	color: #000;
	width: 100% !important;
	background: #e7e7e7;
	text-align: center;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 300;
	border-radius: 30px;
}
.timesale ul.prd-list li.swiper-slide-thumb-active {
}
.timesale ul.prd-list li.swiper-slide-thumb-active a {
    background: var(--main-color);
    color: #fff !important;
}
.timesale .info {
	position: relative;
	text-align: left;
	margin-top: 25px;
}
.timesale .info .pct {
    color: var(--main-color);
    font-size: 20px;
    font-weight: bold;
    bottom: 14px;
    font-family: 'Lato';
    display: inline-block;
    margin-right: 10px;
}
.timesale .info p.prd-name {
	color: #000;
    font-size: 18px;
    font-weight: normal;
}
.timesale .info p.prd-subname {
    color: #939393;
    padding-top: 8px;
    font-size: 14px;
    padding-bottom: 9px;
    font-weight: normal;
}

.timesale .info p.soldout{
    font-size: 20px;
    font-weight: 100;
    color: #ff0000;}

.timesale .l-side {
	display: inline-block;
	vertical-align: top;
}
.timesale .r-side {
	display: inline-block;
	vertical-align: top;
	padding-top: 18px;    
    _padding-bottom: 13px;
}

.timesale .left {
    width: 310px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

.timesale .right {
    float: right;
	width: 798px;
	vertical-align: top;
	display: inline-block;
    overflow: hidden;
}

.timesale .right .prod {
}
.timesale .right .prod .thumb {
	position: relative;
}
.timesale .right .prod .thumb .buy_btn {
    background-color: var(--main-color);
    position: absolute;
    right: 0;
    bottom: 0;
    height: 60px;
    width: 200px;
    line-height: 60px;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    color: #fff;
    font-weight: 800;
}

.timesale .right .prod .thumb a {
	display: block;
	height: 327px;
	overflow: hidden;
}
.timesale .right .prod .thumb a img {
	height: 100%;
}
.timesale .right .prod #timer {
    font-family: 'NanumSquare', sans-serif !important;
	text-align: left;
	text-indent: 20px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.5);
	height: 60px;
	line-height: 60px;
	width: 100%;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.timesale em {
	font-size: 20px;
	font-weight: normal;
	color: #000
}
#timer em {
	color: #fff !important;
	font-weight: 500;
	font-size: 17px;
}
#displayTimeSale {
	display: inline-block;
}
#displayTimeSale .time {
	font-size: 24px !important;
	margin-left: -10px;
}
.timesale p.prd-price {
	font-size: 21px;
	display: inline-block;
}

.timesale p.prd-price em {
	font-weight: normal;
	padding: 0 2px;
}
.timesale p.prd-consumer {
    padding-right: 6px;
    display: inline-block;
    color: #919191;
    font-size: 24px;
    margin-left: 5px;
    margin-top: 0;
}
.timesale p.dc {
    color: var(--main-color);
    display: inline-block;
    font-size: 40px;
    letter-spacing: -1px;
    font-weight: 800;
    _float: right;
}




/*sec6*/
#sec6{}
#sec6 .sec_inner{position:relative;}
#sec6 .sec_inner .sec6_cont .swiper{}
#sec6 .sec_inner .sec6_cont .swiper ul{}
#sec6 .sec_inner .sec6_cont .swiper ul li{}
#sec6 .sec_inner .sec6_cont .swiper ul li a{display: block; width: 100%;overflow:hidden;}
#sec6 .sec_inner .sec6_cont .swiper ul li a img{width: 100%; transition:transform .3s}
#sec6 .sec_inner .sec6_cont .swiper ul li a:hover>img{transform:scale(1.16) rotate(5deg)}
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area{padding:20px 0}
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p{transition: all .3s;}
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.big{color: #161616; font-size: 22px; margin-bottom:10px}
#sec6 .sec_inner .sec6_cont .swiper ul li:hover .txt_area p.big{color: #000; padding-left: 21px; position:relative;}
#sec6 .sec_inner .sec6_cont .swiper ul li:hover .txt_area p.big::before{content: "¢®©¡";font-size:17px; display: inline-block; position: absolute; left: 0;transition: all .5s; top:50%; transform:translateY(-50%)}
#sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 16px;line-height:1.4}
#sec6 .sec_inner .swiper-button-prev{position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2;}
#sec6 .sec_inner .swiper-button-next{position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2;}
/*sec7*/
#sec7{}
#sec7 .sec_inner{}
#sec7 .sec_inner .sec7_cont{display: flex; justify-content: space-between;gap: 20px;}
#sec7 .sec_inner .sec7_cont>div{flex-grow: 1; height:490px}
#sec7 .sec_inner .sec7_cont .banner_area{position:relative;flex-grow:1;}
#sec7 .sec_inner .sec7_cont .banner_area>a{display: block;width: 100%;}
#sec7 .sec_inner .sec7_cont .banner_area>a img{width: 100%;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area{position: absolute; top: 57%;transform: translateY(-50%);  left: 40px;  max-width: 80%  }
#sec7 .sec_inner .sec7_cont .banner_area .txt_area>*{color: #fff; opacity:0}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big{font-size: 34px; font-weight: 700; margin-bottom: 12px;transition-delay: .1s;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub{font-size: 16px;line-height:1.5; margin-bottom: 28px;transition-delay: .37s;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area a{border-color:#fff;transition-delay: .58s;  position:relative;}
#sec7 .sec_inner .sec7_cont .banner_area .txt_area a.btn_more>span{background-color:#fff}
#sec7.act .sec_inner .sec7_cont .banner_area .txt_area p{transform: translateY(-25px); opacity: 1;}
#sec7.act .sec_inner .sec7_cont .banner_area .txt_area a.more{transform: translateY(-25px); opacity: 1;}
#sec7 .sec_inner .sec7_cont .item_area{width:480px;}
#sec7 .sec_inner .sec7_cont .item_area .swiper{height:100%}
#sec7 .sec_inner .sec7_cont .item_area ul{height:100%; overflow-y:auto; display:flex; flex-wrap:wrap;}
#sec7 .sec_inner .sec7_cont .item_area ul>li{display: flex; flex-wrap: nowrap; align-items: center; width:100%; padding:10px 0; height:calc(100% / 3)}
#sec7 .sec_inner .sec7_cont .item_area ul>li:first-child{padding-top:0}
#sec7 .sec_inner .sec7_cont .item_area ul>li:nth-child(2){padding:7px 0; margin:5px 0}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb{width:150px;height:100%}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a{height: 100%;}
#sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img{height: 100%;object-fit: cover;}
#sec7 .sec_inner .sec7_cont .item_area ul>li .info{width:70%; padding:0 20px 0 20px; height:100%; }

/* sec8 */
#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner h2{}
#sec8 .sec_inner .sec8_cate{margin-bottom: 45px;}
#sec8 .sec_inner .sec8_cate ul{display:flex; gap:15px; flex-wrap:wrap}
#sec8 .sec_inner .sec8_cate ul li{}
#sec8 .sec_inner .sec8_cate ul li a{overflow:hidden; display:block; width:100%;background-color: #eeeeee; border-radius: 40px; padding: 11px 45px; text-align:center; color:#555555;position:relative; font-size: 17px; font-weight: 500; display:block; transition:all .3s}
#sec8 .sec_inner .sec8_cate ul li.on>a{ color: #fff;background-color: var(--main-color);}
#sec8 .sec_inner .sec8_cate ul li a:hover{ color: #fff;background-color: transparent}
#sec8 .sec8_prd{}
#sec8 .sec8_prd>div{display: none; position:relative;opacity:0; transition:opacity .5s}
#sec8 .sec8_prd>div.show{display: block;}
#sec8 .sec8_prd>div.act{opacity:1}
#sec8 .sec_inner .sec8_cate ul li a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background-color:var(--main-color);
  transition: all 0.3s ease;
}
#sec8 .sec_inner .sec8_cate ul li a:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}


/*tv*/
#tv{}
#tv .sec_inner{}
#tv .sec_inner .tv_wrap{}
#tv .sec_inner ul{
    display: flex;
    justify-content: space-between;}
    
#tv .sec_inner ul li{
}
}
#tv .sec_inner ul li iframe{}
#tv .sec_inner ul li.fl{}
#tv .sec_inner ul li.fr{}


/*sec9*/
#sec9 .sec_inner h2{display: flex; align-items: center; gap: 16px;}
#sec9 .sec_inner h2 span{display: inline-block;color: #999999; font-size: 18px; font-weight: 500;}

.section,.section :is(*){box-sizing: border-box;font-family: "Pretendard Variable", Pretendard, sans-serif;}
.section:not(#sec1){margin-bottom: 100px;}
.section .sec_inner{width: 1200px;margin: 0 auto;}
.section h2{font-size:32px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 500; margin-bottom: 40px;}
.section .txt_area p.sub{color: #000; line-height: 1.6;font-weight: 500;transition: all .5s;font-size: 28px; }
.section .txt_area p.big{ color: #000; font-weight: 500;line-height: 1.3; transition: all .5s;font-size: 48px; }
.section .txt_area a.more{display: inline-block; font-size: 12px; transition: transform .4s, opacity .4s;border: 1px solid #000;color: #000; margin-top: 8px;font-weight: 600;padding:6px 15px; }
.section .txt_area a.more01{ width:auto; display: inline-block; font-size: 13px; transition: transform .4s, opacity .4s;border: 1px solid #ffffff;color: #ffffff; margin-top: 8px;font-weight: 600;padding:5px 15px; }
.section :is(.sec_next,.sec_prev){position: unset;color: #000;width: 40px; background-color: #ddd; height: 40px; border-radius: 50%; margin-top: 0; transition:all .1s}
.section :is(.sec_next,.sec_prev)::after{font-size: 14px;}
.section :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover{background-color:var(--main-color);color:#fff}
.section .swiper-pagination-bullet-active{background-color:var(--main-color)}
.section a.btn_more{ color: #fff; font-size: 15px; border: 1px solid #fff; position: relative; display: flex; align-items: center; justify-content: center; -webkit-font-smoothing: antialiased; }
.section a.btn_more>span{ display: block; position: absolute; background-color: #000; }
.section .btn_more .span_index_one {width: 1px; left: 0; bottom: 0; }
.section .btn_more .span_index_two {  height: 1px; left: 0; top: 0; }
.section .btn_more .span_index_three {  width: 1px;  right: 0; top: 0; }
.section .btn_more .span_index_four { height: 1px;  right: 0; bottom: 0; }
.section .btn_more:hover { border-color: transparent !important; }  
.section .btn_more:hover .span_index_one { -webkit-animation: move1 1500ms infinite ease; animation: move1 1500ms infinite ease; }  
.section .btn_more:hover .span_index_two { -webkit-animation: move2 1500ms infinite ease; animation: move2 1500ms infinite ease; }  
.section .btn_more:hover .span_index_three { -webkit-animation: move3 1500ms infinite ease; animation: move3 1500ms infinite ease; }  
.section .btn_more:hover .span_index_four { -webkit-animation: move4 1500ms infinite ease; animation: move4 1500ms infinite ease; }
@-webkit-keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } }
@keyframes move1 { 0% { height: 100%; bottom: 0; } 54% { height: 0; bottom: 100%; } 55% { height: 0; bottom: 0; } 100% { height: 100%; bottom: 0; } } 
@-webkit-keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } 
@keyframes move2 { 0% { width: 0; left: 0; } 50% { width: 100%; left: 0; } 100% { width: 0; left: 100%; } } 
@-webkit-keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 100%; } 55% { height: 0; top: 0; } 100% { height: 100%; top: 0; } }
@keyframes move3 { 0% { height: 100%; top: 0; } 54% { height: 0; top: 100%; } 55% { height: 0; top: 0; } 100% { height: 100%; top: 0; } } 
@-webkit-keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } } 
@keyframes move4 { 0% { width: 0; right: 0; } 55% { width: 100%; right: 0; } 100% { width: 0; right: 100%; } }




/* BASIC css end */