/* BASIC css start */
#header{position:fixed !important; top:0; left:50%; transform:translateX(-50%); background:transparent !important;transition:background-color .2s}
#header.scroll{background-color:rgba(255,255,255,.88) !important; }
/* 섹션공통 */
.section{margin-bottom: 70px;}
.sec_inner{padding:0 5%}
.section h2{font-family: 'Montserrat', sans-serif; font-size: 17px; color: #000; font-weight: 700; margin-bottom: 30px; line-height: 1.3;}
.section h2:has(a){display: flex; justify-content: space-between; align-items: center;}
.section h2:has(a) a{color: #000;font-family: 'Montserrat', sans-serif; font-size: 11px;font-weight: 600; width:87px; text-align:center; line-height:28px; border:1px solid #000;}
.prd-more {text-align:center;}
.prd-more a {display:inline-block; color: #000;font-family: 'Montserrat', sans-serif; font-size: 11px;font-weight: 600; width:87px; text-align:center; line-height:28px; border:1px solid #000;}


/* sec1 */
#sec1{}
#sec1 .swiper{}
#sec1 .swiper ul{}
#sec1 .swiper ul li{position: relative;}
#sec1 .swiper ul li>a{display: block;width: 100%;}
#sec1 .swiper ul li>a>img{width: 100%;}
#sec1 .swiper ul li .txt_area{overflow: visible; position: absolute;  left: 0%; bottom: 0% ; width:100%; padding:0 7% 100px 5%; }
#sec1 .swiper ul li .txt_area p{ font-family: 'Montserrat', sans-serif; opacity: 0;} 
#sec1 .swiper ul li .txt_area.act p{transform: translateY(30px); opacity: 1;}
#sec1 .swiper ul li .txt_area.act a.more{transform: translateY(30px); opacity: 1;}
#sec1 .swiper ul li .txt_area p.big{font-size: 19px; color: #000; font-weight: 700;  transition: all .5s;line-height: 1.3; margin-bottom: 5px;}
#sec1 .swiper ul li .txt_area p.txt{font-size: 15px; color: #000; font-weight: 500;  transition: all .5s;line-height: 1.3; margin-bottom: 11px;}
#sec1 .swiper ul li .txt_area p.sub{color: #000; font-size: 13px; font-weight: 500; transition: all .4s; transition-delay: .25s; line-height: 1.6;}
#sec1 .swiper ul li .txt_area a.more{width:auto; font-family: 'Montserrat', sans-serif; transition: transform .4s, opacity .4s;display: inline-block;opacity: 0; transition-delay: .4s; border: 1px solid #000 ;padding:  5px 30px; color: #000; font-size: 10px; font-weight: 600; margin-top: 25px;}
#sec1 .swiper ul li .txt_area a.more:active{background-color: #000; color: #fff;}
#sec1 .swiper-pagination{width: auto; top: 50%; right: 5%;transform:translateY(-50%); bottom: unset; left: unset; z-index: 19; }
#sec1 .swiper-pagination-bullet{background-color: #000; display: block;margin: 9px 0;transform:scale(.8); opacity:var(--swiper-pagination-bullet-inactive-opacity, .4)}
#sec1 .swiper-pagination-bullet-active{opacity:1}
#sec1 .swiper_btn_next{position: absolute; bottom: 25px; z-index: 10; left: 50%; transform: translateX(-50%); cursor: pointer;}
#sec1 .swiper-button-disabled{opacity: .3;}
#sec1 .swiper_btn_next img{transform:scale(.66); transform-origin:center center}

/* sec2 */
#sec2{}
#sec2 .sec_inner{padding:0}
#sec2 .sec_inner h2{padding:0 5%}
#sec2 .sec_inner .sec2_cont{}
#sec2 .sec_inner .sec2_cont .swiper{ padding-left:5%;padding-bottom: 30px;}
#sec2 .sec_inner .sec2_cont .swiper ul{}
#sec2 .sec_inner .sec2_cont .swiper ul li{width:42%}
#sec2 .sec_inner .sec2_cont .swiper ul li>a{display: block; width: 100%;overflow:hidden;}
#sec2 .sec_inner .sec2_cont .swiper ul li>a>img{width: 100%; transition: all .3s;}
#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area{ padding: 15px 0;}
#sec2 .sec_inner .sec2_cont .swiper ul li .txt_area p.tit{text-align: center; font-size: 12px; color: #000; font-family: 'Montserrat', sans-serif; font-weight: 500;}

#sec2 .swiper-pagination{bottom: 0; top: unset; width:90%; left:5%}
#sec2 .swiper-pagination-progressbar{background-color: rgba(0,0,0,.05);}
#sec2 .swiper-pagination-progressbar-fill{background-color: #cfcfcf;}


/* sec3 */
#sec3{}
#sec3 .sec_inner{}
#sec3 .sec_inner h2{}
#sec3 .sec_inner h2 a{}
#sec3 .sec_inner .sec3_cont{}
#sec3 .sec_inner .sec3_cont ul{display: flex; flex-wrap:wrap; gap:20px 5%}
#sec3 .sec_inner .sec3_cont ul li a{display:block; width:100%}
#sec3 .sec_inner .sec3_cont ul li a img{width:100%}
#sec3 .sec_inner .sec3_cont ul li:nth-child(1){width:100%}

#sec3 .sec_inner .sec3_cont ul li:nth-child(1) .thumb img{}
#sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)){width:47.5%}
#sec3 .sec_inner .sec3_cont ul li:not(:nth-child(1)) .thumb img{}


/* sec4 */
#sec4 .sec_inner{padding:0}
#sec4 .sec_inner h2{ padding:0 5%; margin-bottom:20px}
#sec4 .sec_inner .sec4_cate{margin-bottom: 10px; padding:0 5%}
#sec4 .sec_inner .sec4_cate ul{display:flex; gap:8px;  flex-wrap:wrap; }
#sec4 .sec_inner .sec4_cate ul li{}
#sec4 .sec_inner .sec4_cate ul li a{display:block; width:100%;background-color: #f6f6f6; border-radius: 20px; padding: 8px 16px; text-align:center; font-family: 'Montserrat', sans-serif; color:#5a5a5a; font-size: 10px; font-weight: 500; display:block;}
#sec4 .sec_inner .sec4_cate ul li.on>a{ color: #fff;background-color: #000;}
#sec4 .sec_inner .sec4_cate ul li a:hover{background-color: #000; color: #fff;}

#sec4 .sec4_prd{}
#sec4 .sec4_prd>div{display: none; position:relative;}
#sec4 .sec4_prd>div ul{display:flex; flex-wrap:wrap; gap:20px 5%}
#sec4 .sec4_prd>div.show{display: block;}
#sec4 .sec4_prd>div ul li a{display:block; width:100%}
#sec4 .sec4_prd>div ul li a img{width:100%}
#sec4 .sec4_prd>div ul li:not(:first-child){width:47.5%}
#sec4 .sec4_prd>div ul li:is(:nth-child(2),:nth-child(4),:nth-child(6)){padding-left:5%}
#sec4 .sec4_prd>div ul li:is(:nth-child(3),:nth-child(5),:nth-child(7)){padding-right:5%}
#sec4 .sec4_prd>div ul li:nth-child(1){width:100%;margin-bottom:20px }
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner{padding: 10px 25px 55px;}
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner :is(*){color: #fff;font-family: 'Montserrat', sans-serif;}
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner h3{font-size: 25px; font-weight: 700;opacity: 0;  transition: all .4s;line-height: 1.3; margin-bottom: 10px;}
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner p.sub{font-size: 13px; font-weight: 400; opacity: 0; transition: all .4s; transition-delay: .2s; line-height: 1.6;}
#sec4 .sec4_prd>div ul li.sec4_cont_li .inner a{ font-family: 'Montserrat', sans-serif;opacity: 0;  transition: transform .4s, opacity .4s;display: inline-block;width:auto; transition-delay: .35s; border: 1px solid #fff ;padding:  5px 40px; color: #fff; font-size: 10px; font-weight: 400; margin-top: 25px;}
#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner h3{transform: translateY(20px); opacity: 1;}
#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner p{transform: translateY(20px); opacity: 1;}
#sec4 .sec4_prd>div.act ul li.sec4_cont_li .inner a{transform: translateY(20px); opacity: 1;}


/* 아래에서 각 영역의 텍스트박스 색상 변경이 가능합니다*/
#sec4 .sec4_prd>div:nth-child(1) ul li:nth-child(1){background-color: #abbac9;}
#sec4 .sec4_prd>div:nth-child(2) ul li:nth-child(1){background-color: salmon;}
#sec4 .sec4_prd>div:nth-child(3) ul li:nth-child(1){background-color: sandybrown;}
#sec4 .sec4_prd>div:nth-child(4) ul li:nth-child(1){background-color: teal;}
#sec4 .sec4_prd>div:nth-child(5) ul li:nth-child(1){background-color: thistle;}
#sec4 .sec4_prd>div:nth-child(6) ul li:nth-child(1){background-color: darkcyan;}
#sec4 .sec4_prd>div:nth-child(7) ul li:nth-child(1){background-color: cornflowerblue;}
#sec4 .sec4_prd>div:nth-child(8) ul li:nth-child(1){background-color: coral;}
#sec4 .sec4_prd>div:nth-child(9) ul li:nth-child(1){background-color: maroon;}
/* BASIC css end */