/* main header */
#header{background:linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.1), rgba(0,0,0,0));}
#header h1 a img.color{display:none;}
#header h1 a img.white{display:block;}
#header .gnb > li > a{color:#fff;}
#header .btn_menu{color:#fff;}
#header .btn_menu span{background:#fff;}


/* 섹션 공통 */
section .box_title h2{ font-size: 40px }
section .box_title p{ margin-top: 14px; font-size: 15px; color: #666; font-weight: 500; letter-spacing: normal }
@media (max-width: 1280px) {
  section[class*=area_]{ padding: 100px 0 }
  section .box_title h2{ font-size: 36px }
}
@media (max-width: 1080px) {
  section[class*=area_]{ padding: 80px 0 }
  section .box_title h2{ font-size: 32px }
}
@media (max-width: 767px) {
  section[class*=area_]{ padding: 60px 0 }
  section .box_title h2{ font-size: 28px }
}
@media (max-width: 500px) {
  section[class*=area_]{ padding: 50px 0 }
  section .box_title h2{ font-size: 24px }
}

/* 비주얼 */
.area_visual{ overflow: hidden; position: relative;  }
.area_visual .area_visual_slide{height:100vh;}
.area_visual .slide{height:100%; background: #eeefe9 50% / cover }
.area_visual .slide1{ background-image: url(../images/main/main_visual01.jpg) }
.area_visual .slide2{ background-image: url(../images/main/main_visual02.jpg) }
.area_visual .slide3{ background-image: url(../images/main/main_visual03.jpg) }
.area_visual .slide4{ background-image: url(../images/main/main_visual04.jpg) }
.area_visual .slide5{ background-image: url(../images/main/main_visual05.jpg) }

.area_visual .slide .inr{ height: 100% }
.area_visual .slide .box_title{ position: absolute; top: 35% }
.area_visual .slide p{ color: var(--color-point); font-size: 18px; font-weight: 500 }
.area_visual .slide h2{ margin: .31em 0 .18em; color: #37322a; font-size: 60px }
.area_visual .slide h3{ font-size: 24px }

.area_visual .slide2 h2,
.area_visual .slide3 h2 {color:#fff;}
 
 .area_visual .slide2 h3,
 .area_visual .slide3 h3 {color:#ddd;}


.area_visual .bx-controls{ position: absolute; inset: 88.39% 0 0; z-index: 60 }
.area_visual .bx-pager{ display: flex }
.area_visual .bx-pager-link{ display: block; position: relative; margin-right: 10px; width: 40px; height: 3px; background: #fff; opacity: .4; font-size: 0 }
.area_visual .bx-pager-link:before{ content: ''; position: absolute; inset: -10px 0; z-index: -1 }
.area_visual .bx-pager-link.active{ opacity: 1 }
.area_visual .scroll{ /*display: flex;*/ display:none; justify-content: flex-end; position: absolute; top: 0; left: 0; bottom: 0; width: 80px; background: #fff; font-size: 13px; color: #666; writing-mode: vertical-rl; z-index: 60 }
.area_visual .scroll span{ display: flex; align-items: center }
.area_visual .scroll span:after{ content: ''; display: block; margin-top: 20px; width: 1px; height: 120px; background: #b2b2b2 }
@media (max-width: 1280px) {
    .area_visual .slide p{font-size:14px;}
  .area_visual .slide h2{ font-size: 36px }
  .area_visual .slide h3{ font-size: 22px }
}
@media (max-width: 1080px) {
  .area_visual .slide h2{ font-size: 32px }
  .area_visual .slide h3{ font-size: 20px }
}
@media (max-width: 767px) {
  .area_visual .slide h2{ font-size: 24px }
  .area_visual .slide h3{ font-size: 18px }
}
@media (max-width: 500px) {
  .area_visual .slide h2{ font-size: 22px }
  .area_visual .slide h3{ font-size: 16px }
  
  .area_visual .slide2 {background-position:center right 20%; background-color:#000; background-repeat:no-repeat;}
  .area_visual .slide3 {background-position:center right 20%; background-color:#000; background-repeat:no-repeat;}
  .area_visual .slide4 {background-position:center right 20%; background-color:#dcdcd5; background-repeat:no-repeat;}
  .area_visual .slide5 {background-position:center right 20%; background-color:#e0dad4; background-repeat:no-repeat;}
  
  .area_visual .slide2:before {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; background:#000; opacity:.5;}
  .area_visual .slide3:before {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; background:#000; opacity:.5;}
  .area_visual .slide4:before {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; background:#dcdcd5; opacity:.5;}
  .area_visual .slide5:before {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; background:#e0dad4; opacity:.5;}
  
}

/* 공지사항 */
.area_notice{ padding: 113px 0 120px; word-break: break-all }
.area_notice ul{ display: flex; flex-wrap: wrap; column-gap: 80px; position: relative; margin-top: 55px }
.area_notice li{ width: calc( ( 100% - 160px ) / 3 ); position: relative; height: 284px; background: #f9fafa }
.area_notice li:hover{ background: #f5f0db }
.area_notice li.non_board_data{ background: transparent }
.area_notice li a{ display: block; padding: 55px 38px; height: 100%; box-sizing: border-box }
.area_notice li h3{ margin-bottom: 17px; line-height: 1.77 }
.area_notice li h3,
.area_notice li p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; font-weight: 500; letter-spacing: normal }
.area_notice li p{ color: #666; font-size: 15px; line-height: 1.6 }
.area_notice li span{ position: absolute; inset: 73.94% 0 0 38px; color: #c8a013; font-size: 14px; font-weight: 600; letter-spacing: normal }

@media (max-width: 1279px) {
  .area_notice li{ width: calc( ( 100% - 30px ) / 3 ); height: 260px }
  .area_notice li a{ padding: 25px 20px }
  .area_notice li span{ inset: 79.94% 0 0 20px }
}
@media (max-width: 1080px) {
  .area_notice ul{ margin-top: 35px }
  .area_notice li{ width: 100%; height: auto }
  .area_notice li + li{ margin-top: 15px }
  .area_notice li a{ padding-bottom: 70px }
}

/* 갤러리 */
.area_gallery{ overflow: hidden; padding: 108px 0 120px }
.area_gallery .inr{ display: flex }
.area_gallery .box_title{ flex: 0 0 468px; margin-right: 20px }
.area_gallery .controller{ position: relative; margin-top: 160px }
.area_gallery .controller.mo{ display: none; margin-top: 20px }
.area_gallery .prev a{ display: inline-block; width: 55px; height: 55px; background: url(../images/main/icon_prev2.png) no-repeat 50%, #c0c0c0; font-size: 0 }
.area_gallery .next a{ display: inline-block; margin-left: 40px; width: 55px; height: 55px; background: url(../images/main/icon_next2.png) no-repeat 50%, #c0c0c0; font-size: 0 }
.area_gallery .controller a:hover{ background-color: #262525 }
.area_gallery .bx-wrapper{ flex: 0 0 1400px }
.area_gallery .bx-wrapper a{ display: block }
.area_gallery .bx-wrapper a img{ width: 100%; height: 300px; object-fit: cover }
.area_gallery .bx-wrapper a h3{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-top: 21px; font-size: 17px; font-weight: 500; word-break: break-all }
@media (max-width: 1080px) {
  .area_gallery .inr{ display: block }
  .area_gallery .controller{ display: none }
  .area_gallery .controller.mo{ display: block }
  .area_gallery .bx-wrapper{ margin-top: 20px }
}

/* 커뮤니티 */
.area_community{ padding: 120px 0; background: #403a2f url(../images/main/img_community_bg.jpg) 50% / cover; color: #fff }
.area_community h2{ color:  var(--color-point); font-size: 30px }
.area_community a{ color: #fff }
.area_community .inr{ display: flex; justify-content: space-between }
.area_community .con1{ position: relative; width: calc( 95.57% - 425px ) }
.area_community .con1:before{ content: ''; position: absolute; inset: 0 0 0 13.47%; background: #0000001a }
.area_community .con1 li > div{ display: flex; position: relative; height: 500px; }
.area_community .con1 .box_img{ flex: 0 0 270px; display: flex; align-items: center; height: 100% }
.area_community .con1 .box_img img{ width: 100% }
.area_community .con1 img.mo{ display: none; float: left; margin: 0 15px 15px 0; max-width: 33%; max-height: 200px }
.area_community .con1 .box_txt{ position: relative; padding: 85px 41px 72px; box-sizing: border-box }
.area_community .con1 .box_txt h3{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 14px 0 17px; font-size: 22px; line-height: 1.6363; word-break: break-all }
.area_community .con1 .box_txt p{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.6 }
.area_community .con1 .controller{ display: flex; align-items: center; position: absolute; inset: 362px 0 100% 310px; z-index: 60 }
.area_community .con1 .controller .current,
.area_community .con1 .controller .total{ display: inline; font-size: 14px; font-weight: 600 }
.area_community .con1 .controller .bar{ position: relative; margin: 0 10px;  width: 120px; height: 3px; background: #ffffff33 }
.area_community .con1 .controller .bar:before{ content: ''; position: absolute; inset: 0 100% 0 0; background: #fff }
.area_community .con1 .controller .bar.ani:before{ animation: barAni 4s linear both }
@keyframes barAni {
  0%{ inset: 0 100% 0 0; }
  100%{ inset: 0 }
}
.area_community .con1 .controller .auto{ margin-left: 10px; font-size: 0 }
.area_community .con1 .controller .bx-start{ display: inline-block; width: 9px; height: 12px; background: url(../images/main/icon_strat2.png) no-repeat 50% }
.area_community .con1 .controller .bx-stop{ display: inline-block; width: 7px; height: 12px; background: url(../images/main/icon_stop2.png) no-repeat 50% }
.area_community .con1 .controller .bx-start.active,
.area_community .con1 .controller .bx-stop.active{ display: none }
.area_community .con2{ padding: 85px 41px 72px; width: 425px; background: #00000033; box-sizing: border-box }
.area_community .con2 ul{ margin-top: 18px }
.area_community .con2 li{ padding: 14px 18px; border: 1px solid #5f5b55; box-sizing: border-box }
.area_community .con2 li + li{ margin-top: 20px }
.area_community .con2 li:hover{ background: #5f5b55 }
.area_community .con2 li h3{ overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical }
.area_community .con2 li p{ margin-top: 11px; font-size: 14px; color: #aaa; text-align: right }
@media (max-width: 1279px) {
  .area_community .inr{ display: block}
  .area_community .con1{ width: 100% }
  .area_community .con2{ width: 100% }
  .area_community .con2 ul{ display: flex }
  .area_community .con2 li{ flex: 1 }
  .area_community .con2 li + li{ margin: 0 0 0 20px }
}
@media (max-width: 767px) {
  .area_community .con1 li > div{ height: auto }
  .area_community .con1 .box_txt{ padding: 15px 0 }
  .area_community .con1 .box_img{ display: none }
  .area_community .con1 img.mo{ display: inline }
  .area_community .con1 .box_txt p{ -webkit-line-clamp: 5 }
  .area_community .con1 .controller{ position: relative; padding-bottom: 30px; inset: auto; }
  .area_community .con2{ margin-top: 30px; padding: 40px 20px 20px }
  .area_community .con2 ul{ display: block }
  .area_community .con2 li + li{ margin: 20px 0 0 }
}

/* 하단 배너 */
.bottom_banner{ padding: 20px 0 21px }
.bottom_banner .inr{ overflow: hidden; display: flex; }
.bottom_banner .controller{ display: flex; justify-content: space-between; align-items: center; margin-right: 43px; flex: 0 0 auto; width: 167px; font-size: 0 }
.bottom_banner .prev a{ display: inline-block; width: 32px; height: 14px; background: url(../images/main/icon_prev.png) no-repeat 50% }
.bottom_banner .next a{ display: inline-block; width: 32px; height: 14px; background: url(../images/main/icon_next.png) no-repeat 50% }
.bottom_banner .bx-start{ display: inline-block; width: 12px; height: 14px; background: url(../images/main/icon_strat.png) no-repeat 50% }
.bottom_banner .bx-stop{ display: inline-block; width: 12px; height: 14px; background: url(../images/main/icon_stop.png) no-repeat 50% }
.bottom_banner .bx-start.active,
.bottom_banner .bx-stop.active{ display: none }
.bottom_banner .bx-wrapper{ flex: 0 0 1190px }
.bottom_banner_slide div{ display: flex; justify-content: center; align-items: center; height: 60px }
.bottom_banner_slide img{ width: 100%; height: 60px; object-fit: scale-down }
@media (max-width: 500px) {
  .bottom_banner .inr{ flex-direction: column-reverse; align-items: center }
  .bottom_banner .controller{ margin: 25px 0 0 }
  .bottom_banner .bx-wrapper{ flex: auto }
}