/* BASIC css start */
/*sec1*/
#sec1{margin-bottom: 100px}
#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>ul>li[aria-label='1 / 4'] .txt_area p{}
#sec1 .swiper>ul>li[aria-label='1 / 4'] .txt_area p.big{}
#sec1 .swiper>ul>li[aria-label='1 / 4'] .txt_area p.sub{}
/* more 색깔변경하는곳 [시작]*/
#sec1 .swiper>ul>li[aria-label='1 / 4'] .txt_area a.more{}
#sec1 .swiper>ul>li[aria-label='1 / 4'] .txt_area a.more:hover{}
/*more 색깔변경하는곳 [종료]*/

#sec1 .swiper>ul>li[aria-label='2 / 4'] .txt_area p{}
#sec1 .swiper>ul>li[aria-label='2 / 4'] .txt_area p.big{}
#sec1 .swiper>ul>li[aria-label='2 / 4'] .txt_area p.sub{}
/*more 색깔변경하는곳 [시작]*/
#sec1 .swiper>ul>li[aria-label='2 / 4'] .txt_area a.more{}
#sec1 .swiper>ul>li[aria-label='2 / 4'] .txt_area a.more:hover{}
/*more 색깔변경하는곳 [종료]*/

#sec1 .swiper>ul>li[aria-label='3 / 4'] .txt_area p{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='3 / 4'] .txt_area p.big{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='3 / 4'] .txt_area p.sub{color:#FFFFFF;}
/*more 색깔변경하는곳 [시작]*/
#sec1 .swiper>ul>li[aria-label='3 / 4'] .txt_area a.more{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='3 / 4'] .txt_area a.more:hover{color:#FFFFFF;}
/*more 색깔변경하는곳 [종료]*/

#sec1 .swiper>ul>li[aria-label='4 / 4'] .txt_area p{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='4 / 4'] .txt_area p.big{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='4 / 4'] .txt_area p.sub{color:#FFFFFF;}
/*more 색깔변경하는곳 [시작]*/
#sec1 .swiper>ul>li[aria-label='4 / 4'] .txt_area a.more{color:#FFFFFF;}
#sec1 .swiper>ul>li[aria-label='4 / 4'] .txt_area a.more:hover{color:#FFFFFF;}
/*more 색깔변경하는곳 [종료]*/


#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;}
/*sec2*/
#sec2{}
#sec2 .sec_inner{}
#sec2 .sec_inner{}
#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{}
#sec2 .sec_inner .swiper>ul>li{display: flex; flex-direction: column; gap: 10px; align-items: center;}
#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;}

/*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:nowrap}
#sec8 .sec_inner .sec8_cate ul li{width: -webkit-fill-available;}
#sec8 .sec_inner .sec8_cate ul li a{overflow:hidden; display:block; width:100%;background-color: #eeeeee; border-radius: 40px; padding: 11px 39px; 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%;
}
/*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: 130px;}
.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; }
.section h2 + .subtit{
    margin-bottom: 40px;
    font-family: "Pretendard Variable", Pretendard, sans-serif;
    padding: 7px 0 0;
    font-size: 19px;
    color: #959595;}

.section .txt_area p.sub{color: #000; line-height: 1.6;font-weight: 500;transition: all .5s;font-size: 17px; }
.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 :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%; } }


/* power_review */
#power_review{position:relative;
    margin-bottom: 50px !IMPORTANT;}
#power_review .sec_inner{
    position: relative;}
#power_review h2{}

#power_review .power_review_review{position:relative;}
#power_review .power_review_review>div.swiper{width: 100%; padding-bottom:50px;}
#power_review .power_review_review>div.swiper>ul{width: 100%; }
#power_review .power_review_review>div.swiper>ul>li{display:flex;overflow:hidden; flex-direction:column; height:auto; border:1px solid #f6f3f1;border-radius:9px;box-shadow: 0 0 15px #e3dad459; margin-top:20px; margin-bottom:20px }
#power_review .li_review .rv_main{ width: 100%; }
#power_review .li_review .rv_main .thumb{width:100%; aspect-ratio: 1/1;/*eight:300px; overflow:hidden;*/ position: relative;}
#power_review .li_review .rv_main .thumb .score{
    position: absolute;
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 5px 7px;
    border-radius: 5px;
    top: 8px;
    left: 8px;}
#power_review .li_review .rv_main .thumb a{display: block; width: 100%; height: 100%;}
#power_review .li_review .rv_main .thumb a img{width: 100%; height: 100%; object-fit: cover;}
#power_review .li_review .rv_main .rv_main_cont{margin:20px 0; /*border-bottom:1px solid #f6f3f1; padding-bottom:20px;*/}
#power_review .li_review .rv_main .rv_main_cont .rv_name{
    font-size: 1.2em;
    color: #000;
    font-weight: 500;}
    
#power_review .li_review .rv_main .rv_main_cont .rv_cont{
    padding-top: 10px;
    font-size: 11px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #b4b4b4;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;}

#power_review .swiper-button-prev{background:none; position: absolute; top: 50%; left: 0; transform: translate(-80px, -50%); z-index: 2;}
#power_review .swiper-button-next{background:none; position: absolute; top: 50%; right: 0; transform: translate(80px, -50%); z-index: 2;}

#power_review .sec_next::after,
#power_review .sec_prev::after{font-size: 34px !important}

#power_review .sec_prev:not(.swiper-button-disabled):hover,
#power_review .sec_next:not(.swiper-button-disabled):hover{color:#000 !important}

#power_review .li_review .rv_main .rv_main_cont .rv_info{display:flex; align-items:center; justify-content:space-between;}
#power_review .li_review .rv_main .rv_main_cont .rv_info span{color:#727272}
#power_review .li_review .rv_main .rv_main_cont .rv_info span.date{}
#power_review .li_review .rv_main .rv_main_cont .rv_info span.rv_user{}
#power_review .li_review .rv_mini{flex-grow:1; width: 100%; display: flex; align-items: center; justify-content: left; gap:15px;padding:20px }
#power_review .li_review .rv_mini .mini_thumb{width: 50px; height: 50px; border-radius: 50%; display: inline-block; border: 1px solid #f2f2f2; overflow: hidden;}
#power_review .li_review .rv_mini .mini_thumb a{display: block;width: 100%; height: 100%;}
#power_review .li_review .rv_mini .mini_thumb a img{width: 100%; height: 100%; object-fit: cover;}
#power_review .li_review .rv_mini ul { display:flex; flex-direction:column; gap:8px;}
#power_review .li_review .rv_mini ul li {font-family: 'Noto Sans KR', sans-serif;font-size: 13px; color: #000;}
#power_review .li_review .rv_mini ul li:nth-child(2){display:flex; align-items:center ; gap:10px; }
#power_review .li_review .rv_mini ul li span {font-family: 'Pretendard', sans-serif; margin-right:10px;display:flex; align-items:center; color:#95745f; font-size:14px; font-weight:600 }
#power_review .li_review .rv_mini ul li span:nth-child(2) img{margin-top:-1px}
#power_review .li_review .rv_mini ul li span img{display:inline-block; margin-right:4px;}
#power_review .swiper-pagination{position: unset !important;}

/* BASIC css end */