@charset "utf-8";

/*
  Project _ CSS Init
  FileName _ main.css - (신규 메인 영역)
  Author _ 쮸양~★
  Date _ 2024. 10. 09
  Last _ 
*/


body {overflow:hidden;}
#wrap {position:relative; width:100%;}
/******************************************************************************************************************************************
	mainVisual CSS (메인비주얼) - 쮸양~★
*******************************************************************************************************************************************/
#container_wrap {position: relative; display: inline-block; width: 100%;}

#mainVisualBox {overflow: hidden; position:relative; height:700px; padding:0px 0 0;text-align:center; }
/* TouchSlider 기본 시작 */
.sliderBox,
.sliderBox ul,
.sliderBox ul li{ width:100%; height:100%; padding:0; margin:0; display:inline-block;}
.sliderBox {overflow:hidden;}
.sliderBox ul{position:relative;}
.sliderBox ul li{ position:absolute; top:0; left:0;}
/* TouchSlider 기본 끝 */

.mvisual_wrap {position:absolute;left: 0;top:0;width: 100%;height:700px;}
.mvisual_wrap .sliderBox {height:700px !important;}
.mvisual_wrap .sliderBox ul {}
.mvisual_wrap .sliderBox ul li {}
.mvisual_wrap .sliderBox ul li .bg {position:relative;width:100%;height:100%;background-size: cover;background-position: center;}
.mvisual_wrap .sliderBox ul li .infoBox {position:absolute; z-index: 6; left:5%; top:250px; width:90%; /*transform: translateX(-50%);-webkit-transform: translateX(-50%);*/ box-sizing:border-box;}
.mvisual_wrap .sliderBox ul li .infoBox .txtImages {position:absolute; top: 0px; right: 0px; width: 759px; height:239px; display: block; background: url(../images/main/visual_txt01.png) no-repeat 0px 0px; background-size: contain; text-indent: -9999px;}
.mvisual_wrap .sliderBox ul li .infoBox > div {position:relative; width:100%; max-width:1400px; margin:0px auto; text-align:left; line-height:1.3; z-index: 10;}
.mvisual_wrap .sliderBox ul li .infoBox .titBox,
.mvisual_wrap .sliderBox ul li .infoBox .txtBox {margin-bottom:30px;}
.mvisual_wrap .sliderBox ul li .infoBox .titBox > span {display:block; font-size:2.3em; color:#fff; font-family:'sb-font','gong-light'; font-weight:400; text-shadow: 2px 2px 4px rgba(0,0,0,0.2);}
.mvisual_wrap .sliderBox ul li .infoBox .titBox .tit {font-size:3.5em; font-weight:500;}
.mvisual_wrap .sliderBox ul li .infoBox .txtBox > span {display:block; font-size:1.8em; color:#fff; font-family:'sb-font','gong-light'; font-weight:400; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); display:block;}
.mvisual_wrap .sliderBox ul li .infoBox .txt02 {}
.mvisual_wrap .sliderBox ul li .infoBox .txt03 {}

.mvisual_wrap .sliderBox ul li .infoBox .btnBox {vertical-align: middle;}
.mvisual_wrap .sliderBox ul li .infoBox .btnBox a {position:relative; display:inline-block; padding:10px 70px 10px 30px; line-height:31px; border:1px solid #fff; border-radius:50px; background:rgba(255,255,255,0.2); color:#fff; font-size:calc(0.8rem + 0.8vw); text-align:center; transition:all 0.3s; -webkit-transition:all 0.3s;}
.mvisual_wrap .sliderBox ul li .infoBox .btnBox a::after {content:""; position:absolute; top:50%; right:30px; margin-top:-13px; width:28px; height:26px; display:block; background:url(../images/newMain/mainVi_more.png) no-repeat 0px 0px; background-size:contain;}
.mvisual_wrap .sliderBox ul li .infoBox .btnBox a:hover,
.mvisual_wrap .sliderBox ul li .infoBox .btnBox a:focus {border:1px solid #163390; background:#163390; }

/* 컨트롤박스 */
.mvisual_wrap .controlBox1 {position:relative; bottom:100px; margin:0px auto; display:flex; z-index: 6; color:#fff; width: 100%; max-width:1400px; justify-content:flex-end; align-items:center; box-sizing:border-box;}
.mvisual_wrap .controlBox .paging {display:inline-block; margin-right:5px;}
.mvisual_wrap .controlBox .paging button {width:12px; height:12px; margin:0 5px; padding:0px 0px; border-radius:50%; border:1px solid #fff; font-size:0;}
.mvisual_wrap .controlBox .paging button.on {background:#fff;}
.mvisual_wrap .controlBox > button {z-index:10;}
.mvisual_wrap .controlBox1 > button {display:inline-block;position:relative;width:40px;height:40px;margin-right: 5px; border:1px solid #fff;border-radius:50%;font-size:0;} /* 시작/멈춤버튼 */

.mvisual_wrap .controlBox .total {display:inline-block; background:rgba(0,0,0,0.2); border-radius:50px; padding:5px 20px;}
.mvisual_wrap .controlBox .total span {display:inline-block; font-size:13px; color:#fff; font-weight:400;}
.mvisual_wrap .controlBox .total span.current {color:#fff; font-size:15px; font-weight:500;}
.mvisual_wrap .controlBox .total span.line {margin:0 4px 0 4px;}

/* 이전/다음버튼 */
.mvisual_wrap .controlBox2 > button {display:inline-block; position:absolute; width:90px; height:180px; background:rgba(0,0,0,0.5); vertical-align:middle; font-size:0; transition:all 0.3s; -webkit-transition:all 0.3s; border:none;}
.mvisual_wrap .controlBox2 > button:hover,
.mvisual_wrap .controlBox2 > button:focus {border:1px solid #20b0b0; background:#20b0b0 }
.mvisual_wrap .controlBox > button.btn_prev {border-radius:0px 200px 200px 0px; top:50%; left:0; margin-top:-47.5px;}
.mvisual_wrap .controlBox > button.btn_next {border-radius:200px 0px 0px 200px; top:50%; right:0; margin-top:-47.5px; }
.mvisual_wrap .controlBox2 > button span {display: none;opacity:0;z-index: -1;position: absolute;top: 0;width:185px;height:100%;padding: 25px 25px 0;background:rgba(50,64,64,.5);text-align:left;transition:all 0.3s;-webkit-transition:all 0.3s;}
.mvisual_wrap .controlBox2 > button.btn_prev span {left:94px}
.mvisual_wrap .controlBox2 > button.btn_next span {right:94px}
.mvisual_wrap .controlBox2 > button span em {display:block; font-size:13px; font-weight:bold; color:#fff; }
.mvisual_wrap .controlBox2 > button span b:after {display:block;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;content: attr(data-title);line-height: 1.3;color:#fff;font-size: 16px;font-weight: normal;text-overflow: ellipsis;white-space: normal;}
.mvisual_wrap .controlBox2 > button:hover span,
.mvisual_wrap .controlBox2 > button:focus span {display: block;opacity:1;}
.mvisual_wrap .controlBox > button:before,
.mvisual_wrap .controlBox > button:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.mvisual_wrap .controlBox > button.btn_prev:before,
.mvisual_wrap .controlBox > button.btn_next:before{width: 20px ;height: 20px ;border-width:2px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.mvisual_wrap .controlBox > button.btn_prev:before{right: -7px;border-width: 0 0 2px 2px;}
.mvisual_wrap .controlBox > button.btn_next:before{left: -7px;border-width: 2px 2px 0 0;}
.mvisual_wrap .controlBox > button.btn_stop:before{width:2px; height:12px; box-shadow: -2px 0 #fff, 2px 0 #fff;}
.mvisual_wrap .controlBox > button.btn_play:before{right: -3px;width: 0;height: 0;border-width: 5px 0 5px 8px;border-style: solid;border-color: transparent transparent transparent #fff;}

/* 컨트롤러 */
.mvisual_wrap .control {}
.mvisual_wrap .control .paging {display:inline-block;}
.mvisual_wrap .control .paging span {display:inline-block; font-size:17px; color:#242424 }
.mvisual_wrap .control .paging span.current {color:#087a9f;}
.mvisual_wrap .control .paging span.line {margin:0 8px 0 4px;}

#mainVisualBox .scroll {position: absolute; bottom:40px; left: 50%; transform: translateX(-50%); display: block; font-size: 14px; width:100px; height:100px; background:rgba(0,0,0,0.3); border-radius:100px; color: rgba(255,255,255,.5); z-index:0;}
#mainVisualBox .scroll::before {position: relative; top: 0; content: ''; display: block; width:37px; height:23px; background:url(../images/main/ic_hide.png) no-repeat 0px 0px; margin:15px auto; animation: scroll .5s ease-in-out infinite alternate;}

@keyframes scroll {
	100% {top:10px;}
}

/******************************************************************************************************************************************
	container CSS (메인컨텐츠) - 쮸양~★
*******************************************************************************************************************************************/
#container {position:relative; width:100%;}

.mainBoardBox {position:relative; width:100%; background: #fafafa; padding: 20px 0px;}
.mainBoardBox .mainBoard {position:relative; width:95%; max-width:1400px; margin:0px auto; display: flex;}
.mainBoardBox .mainBoard h2 {font-size: 1.6em; color: #111; width: 120px;}
.mainBoardBox .mainBoard .textList {width:calc(100% - 120px); padding-right: 120px; display: flex; justify-content:space-between;}
.mainBoardBox .mainBoard .textList .title {color:#111;}
.mainBoardBox .mainBoard .textList .txt_day {color: #959595;}
.mainBoardBox .mainBoard .more { position: absolute; right: 0px; top: 0px; display: block; width:80px; padding: 2px 10px; background: #ddd; color: #525252; border-radius: 30px;}

.mainBannerBox {position:relative; width:100%; background: #f7f7f7; padding: 30px 0px;}
.mainBanner {position:relative; width:95%; max-width: 1400px; margin:0px auto; display: flex; align-items:center;}
.mainBanner h2 {width:200px; font-size: 1.6em; color: #111;}
.mainBanner h2 .engTxt {font-size: 0.8em; color: #959595; display: block; margin-top: 10px;}
.mainBanner .listBox {display:flex; flex-wrap:wrap; width:calc(100% - 200px); align-items:center;}
.mainBanner .listBox li {width:calc(100% / 5 - 10px); margin: 0px 5px; padding:30px 30px; box-sizing:border-box; border-radius:30px 30px 30px 0px;}
.mainBanner .listBox li.mainBn01 { background:#6ebe24;}
.mainBanner .listBox li.mainBn02 {background:#01a88e;}
.mainBanner .listBox li.mainBn03 {background:#228fb5;}
.mainBanner .listBox li.mainBn04 {background:#5156a5;}
.mainBanner .listBox li.mainBn05 {background:#16809a;}
.mainBanner .listBox li a { position:relative; display:flex; flex-wrap:wrap; color:#fff;}
.mainBanner .listBox li h3 {font-weight:500; margin-bottom:15px; display: block; width: 100%; font-size:1.5em;}
.mainBanner .listBox li .stxt {margin-bottom:10px; width: 100%; display: block; color:rgba(255,255,255,0.5);}

/* 게시판리스트 */
.boardBox {position:relative; width:95%; max-width:1400px; margin:50px auto; display:flex; justify-content:space-between;}
.boardBox h2 {position:relative; font-size: 1.6em; color: #111; border-bottom:2px solid #ddd; padding-bottom:20px; margin-bottom:20px;}
.boardBox h2 a {position:absolute; right:0px; font-size:12px; padding-right:30px;}
.boardBox h2 a::before {width:20px; height:20px; position:absolute; right:0px; background:#000084; border-radius:50%; content:""; display:block;}
.boardBox h2 a::after {position:absolute; top:0px; right:0px; content:""; width:20px; height:20px; display:block; background:url(../images/main/ic_next.png) no-repeat center center; background-size:8px;}
.boardBox >div {width:calc(100% / 2 - 25px);}
.boardBox .boardList li { height:45px; line-height:44px; border-bottom:1px solid #ddd;}
.boardBox .boardList li a {display:flex;}
.boardBox .boardList li a .txt_num {width:50px; text-align:center;}
.boardBox .boardList li a .txt_title {width:calc(100% - 160px); padding:0px 10px; box-sizing:border-box;}
.boardBox .boardList li a .txt_title .txt_gray {color:#959595; margin-right:10px;}
.boardBox .boardList li a .txt_day {width:110px; text-align:center;}