/* BASIC css start */
#contentWrapper{width:100% !important}

/* 섹션 공통 */
section{margin-bottom:100px; width:100%; }
section .sec_inner{width: 1860px; margin: 0 auto;}
section h2{font-family: 'Montserrat', serif;font-size: 48px; font-weight: 300;text-align: center;margin-bottom: 30px;}


/* sec1 */
#sec1{position: relative;}
#sec1 .swiper{width: 100%;}
#sec1 .swiper-wrapper{width: 100%; }
#sec1 .swiper-slide{ width: 100%; }
#sec1 .swiper-slide img{width:100%;}
#sec1 .swiper_btn_prev{ position:absolute; left:50% !important; top:50%; transform:translate(-850px,-50%); z-index:4; cursor:pointer}
#sec1 .swiper_btn_next{position:absolute; right:50%  !important; top:50%; transform:translate(850px,-50%);z-index:4; cursor:pointer}
#sec1 .swiper-pagination{transform:translateY(-10px)}
#sec1 .swiper-pagination-bullet{background-color:#fff !important; margin:0 6px; opacity:1 !important}
#sec1 .swiper-pagination-bullet-active{background-color:#000 !important; }


/* sec2 */
#sec2{}
#sec2 .sec_inner{background-color: #fff;}
#sec2 h2{}
#sec2 .sec2_cont{width: 100%;}
#sec2 .sec2_cont ul{width: 100%; display: flex; justify-content: space-between;}
#sec2 .sec2_cont ul li{width: 450px; height: auto;}
#sec2 .sec2_cont ul li>div{width: 100%;}
#sec2 .sec2_cont ul li .img_sec{height: 610px;}
#sec2 .sec2_cont ul li .img_sec a{display: block; width: 100%; height: 100%;}
#sec2 .sec2_cont ul li .img_sec a img{width: 100%;height: 100%; object-fit: cover;}
#sec2 .sec2_cont ul li .info_sec{padding:35px 30px; text-align: center;}
#sec2 .sec2_cont ul li .info_sec h3{font-family: 'Montserrat', serif; font-size: 21px; color: #000; margin-bottom: 20px;font-weight: 700;}
#sec2 .sec2_cont ul li .info_sec p{font-family: 'Noto Sans KR', sans-serif;font-weight: 400; font-size: 12px;color: #606060; line-height: 1.6;}


/* sec3 */
#sec3{}
#sec3 a{display: block; width: 100%;}
#sec3 a img{width: 100%;}


/* sec4 */
#sec4{}
#sec4 .sec_inner{position:relative;width:1760px}
#sec4 .swiper{}
#sec4 .swiper ul{}
#sec4 .swiper ul li{}
#sec4 .swiper_btn_prev{top: 50%; left: -45px; transform: translateY(-50%);position: absolute;z-index:10}
#sec4 .swiper_btn_next{top: 50%; right: -45px;transform: translateY(-50%);position: absolute;z-index:10}


/* sec5 */
#sec5{}
#sec5 h2{}
#sec5 .sec5_cont{width: 100%; min-width: 1860px;}
#sec5 .sec5_cont .swiper{}
#sec5 .sec5_cont .swiper ul{width: 100%;}
#sec5 .sec5_cont .swiper ul li{width: 940px; height: 600px; }
#sec5 .swiper-slide{transform: scale(.9);transition: all .4s;filter: brightness(.5);}
#sec5 .swiper-slide.swiper-slide-active{opacity: 1 !important; transform: scale(1);filter: brightness(1);}
#sec5 .swiper_btn_prev{position: absolute; top: 50%; transform: translate(-580px,-50%); left: 50%;z-index: 10;cursor: pointer;}
#sec5 .swiper_btn_next{position: absolute; top: 50%; transform: translate(580px,-50%); right: 50%;z-index: 10; cursor: pointer;}


/* sec6 */
#sec6{}
#sec6 ul{display: flex; justify-content: center}
#sec6 ul li{margin:0 10px;}
#sec6 ul li:first-child{margin-left:0 !important}
#sec6 ul li:last-child{margin-right:0 !important}


/* sec7 */
#sec7{}
#sec7 h2{}
#sec7 .sec7_ban{width: 100%;}
#sec7 .sec7_ban ul{width: 100%;}
#sec7 .sec7_ban ul li{width: 100%;}
#sec7 .sec7_ban ul li a{display: block;width: 100%;}
#sec7 .sec7_ban ul li a img{width: 100%;}
#sec7 .swiper-pagination-bullet{background-color:#000 !important;}


/* sec8 */
#sec8{}
#sec8 .sec_inner{}
#sec8 .sec_inner h2{}
#sec8 .sec8_cont{height: 865px; width: 100%;}
#sec8 .sec8_cont>div{float: left; height: 100%;}
#sec8 .sec8_cont .sec8_L{width: 650px;margin-right: 50px;}
#sec8 .sec8_cont .sec8_L .swiper{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a{display: block;width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper ul li a img{width: 100%;}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_prev{ position:absolute; top:50%; left: 20px; z-index:4; cursor:pointer}
#sec8 .sec8_cont .sec8_L .swiper .swiper_btn_next{position:absolute; top:50%; right: 20px; z-index:4; cursor:pointer}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination{transform:translateY(-5px)}
#sec8 .sec8_cont .sec8_L .swiper .swiper-pagination-bullet{background-color:#fff !important;margin:0 5px;}
#sec8 .sec8_cont .sec8_R{width: 1160px;}
#sec8 .sec8_cont .sec8_R ul{width: 100%; height: 100%;}
#sec8 .sec8_cont .sec8_R ul li{float: left;margin-right: 21px; height: 50%;}
#sec8 .sec8_cont .sec8_R ul li:nth-child(5n){margin-right: 0 !important;}

/* =========================
   sec8: 좌측(배너 슬라이더) + 우측(배너 2개)
   총 3개 고정
   ========================= */

#sec8 .sec8_cont{
  height: 865px;
  display: flex;
  gap: 50px;
  align-items: stretch;
}

/* float 구조 무력화 */
#sec8 .sec8_cont>div{
  float: none;
  height: 100%;
}

/* 좌측 배너 */
#sec8 .sec8_cont .sec8_L{
  width: 650px;
  margin-right: 0;
  flex: 0 0 650px;
}

/* 좌측 배너 슬라이더 높이 꽉 */
#sec8 .sec8_cont .sec8_L .swiper,
#sec8 .sec8_cont .sec8_L .swiper-wrapper,
#sec8 .sec8_cont .sec8_L .swiper-slide,
#sec8 .sec8_cont .sec8_L .swiper-slide a{
  height: 100%;
}

/* 좌측 배너 이미지 꽉 */
#sec8 .sec8_cont .sec8_L .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 우측 배너 2개 */
#sec8 .sec8_cont .sec8_R{
  flex: 1 1 auto;
  width: auto;
}

#sec8 .sec8_cont .sec8_R .sec8_banner_grid{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 21px;
}

/* 각 배너 카드 */
#sec8 .sec8_cont .sec8_R .sec8_banner_grid .banner_item{
  height: 100%;
}

#sec8 .sec8_cont .sec8_R .sec8_banner_grid .banner_item a{
  display: block;
  width: 100%;
  height: 100%;
}

#sec8 .sec8_cont .sec8_R .sec8_banner_grid .banner_item img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 배너는 꽉 차게 */
  display: block;
}


/* sec9*/
#sec9{}
#sec9 .sec9_ban{width: 100%;}
#sec9 .sec9_ban ul{width: 100%;}
#sec9 .sec9_ban ul li{width: 100%;}
#sec9 .sec9_ban ul li a{display: block;width: 100%;}
#sec9 .sec9_ban ul li a img{width: 100%;}
#sec9 .swiper .swiper-pagination-bullet{background-color:#fff !important;}


/* sec10 */
#sec10{}
#sec10 .sec_inner{position:relative;width:1760px}
#sec10 .swiper{}
#sec10 .swiper ul{}
#sec10 .swiper ul li{}
#sec10 .swiper_btn_prev{top: 50%; left: -45px; transform: translateY(-50%);position: absolute;z-index:10}
#sec10 .swiper_btn_next{top: 50%; right: -45px;transform: translateY(-50%);position: absolute;z-index:10}


/* sec11 */
#sec11{background-color: #FFFF8D;}
#sec11 .sec_inner{width: 1760px !important;}
#sec11 .sec_inner ul{width: 100%; display: flex; justify-content: space-between;padding: 70px 0;}
#sec11 .sec_inner ul li{display: inline-block;}
#sec11 .sec_inner ul li .photo{}
#sec11 .sec_inner ul li .photo a{}
#sec11 .sec_inner ul li .photo a img{}
#sec11 .sec_inner ul li .text{padding-top: 25px;}
#sec11 .sec_inner ul li .text h3{ font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700;color: #000;}
#sec11 .sec_inner ul li .text p{margin: 10px 0 30px;font-family: 'Noto Sans KR', sans-serif; font-size: 12px;color: #939393;}
#sec11 .sec_inner ul li .text .view{ font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; color: #686868; text-decoration: underline;}


/* sec12 */
#sec12{}
#sec12 .sec_inner{}
#sec12 .sec_inner>div{float: left;width: 905px;}
#sec12 .sec_inner>div:first-child{margin-right: 50px;}
#sec12 .sec_inner>div h2{text-align: left; line-height: 48px;position: relative;}
#sec12 .sec_inner>div h2 a{font-size: 14px; position: absolute; right: 0; top: 50%;font-family: 'Montserrat', sans-serif; transform: translateY(-50%);font-weight:500}
#sec12 .sec_inner>div h2 a span{display:inline-block; transform:translateY(-1.6px)}
#sec12 .sec_inner>div ul{}
#sec12 .sec_inner>div ul li{float: left;margin-right:15px}
#sec12 .sec_inner>div ul li:nth-child(4n){margin-right:0 !important}


/* sec13 */
#sec13{}
#sec13 h2{}
#sec13 .sec13_cate{}
#sec13 .sec13_cate ul{text-align: center;}
#sec13 .sec13_cate ul li{display: inline-block; margin: 0 15px;}
#sec13 .sec13_cate ul li a{border-bottom: 3px solid #fff; font-family: 'Montserrat', sans-serif; color:#bfbfbf; font-size: 18px; font-weight: 700; letter-spacing: -.3px;transition: color .5s, border-color .3s}
#sec13 .sec13_cate ul li.on>a{border-color:#000 !important;  color: #000 !important;}
#sec13 .sec13_prd{margin-top: 40px;}
#sec13 .sec13_prd>div{display: none;}
#sec13 .sec13_prd>div.show{display: block;}
#sec13 .sec13_prd>div .swiper{}
#sec13 .sec13_prd>div .swiper ul{}
#sec13 .sec13_prd>div .swiper ul li{width: 940px; height: 590px;}
#sec13 .sec13_prd>div .swiper ul li a{display: block;width: 100%; height: 100%;overflow:hidden}
#sec13 .sec13_prd>div .swiper ul li a img{width: 100%;  object-fit: cover;}
#sec13 .swiper-slide{transition: filter .5s;}
#sec13 .swiper-slide-duplicate,#sec13 .swiper-slide-prev, #sec13 .swiper-slide-next{filter: brightness(.5);}
#sec13 .swiper-slide-active{ filter: brightness(1);}





#sec13 .swiper_btn_prev{position: absolute; top: 50%; transform: translate(-570px,-50%); left: 50%;z-index: 10;cursor: pointer;}
#sec13 .swiper_btn_next{position: absolute; top: 50%; transform: translate(570px,-50%); right: 50%;z-index: 10; cursor: pointer;}


/* sec14 */
#sec14{margin-bottom:140px}
#sec14 .sec_inner{width: 1760px !important;}
#sec14 .sec_inner>div{float: left;}
#sec14 .sec14_L{width: 380px;}
#sec14 .sec14_L h2{text-align: left !important;line-height:1.1}
#sec14 .sec14_L p{font-family: 'Montserrat', sans-serif; font-size: 16px;color: #000; font-weight: 400; margin-top: 40px;}
#sec14 .sec14_R{width: 1380px;}

/* =========================
   PC: 전체 레이아웃 가로 밀림/중앙깨짐 방지 패치
   반드시 CSS 맨 아래에 추가
   ========================= */

/* 1) 가로 오버플로우 원천 차단(페이지 전체가 밀릴 때) */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#wrap, #contentWrapper{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 2) gnb_area의 min-width가 화면을 밀어버리는 문제 해결 */
.gnb_area{
  min-width: 0 !important;
  width: 100% !important;
  left: 0 !important;
}

/* 3) 헤더 내부 고정폭(1760px) -> 반응형으로 안전하게 */
#header .head_top_inner,
#header .head_bottom_inner{
  width: 100% !important;
  max-width: 1760px !important;
  margin: 0 auto !important;
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
}

/* 4) 고정 헤더(fix)에서 left:50% 트릭이 레이아웃을 흔들면, 그냥 0으로 고정 */
#header .head_bottom.fix{
  left: 0 !important;
  transform: none !important;
  width: 100% !important;
}






/* BASIC css end */