/*=================================section0=================================*/
.top_logo {position: absolute; left: 50px; top: 30px; z-index: 99;}
.top_logo .pc {display: block;}
.top_logo .mob {display: none;}

/*메인비주얼 슬라이드*/
.mainV {position: relative; width: 100%; height: 100%;}
.mainV_wrap {position: relative; width: 100%; height: 100%;}
.mainV_wrap div {height: 100%;}
.mainV_wrap .slick-arrow {position: absolute; top: 60%; width: 25px; height: 25px; color:#fff; font-size: 0; z-index: 99;}
.mainV_wrap .slick-arrow::after {display: block; font-family: 'FontAwesome';}
.mainV_wrap .slick-prev {left: calc(5% + 355px);}
.mainV_wrap .slick-prev::after {content: '\f104'; font-size: 24px;}
.mainV_wrap .slick-next {left: calc(5% + 455px);}
.mainV_wrap .slick-next::after {content: '\f105'; font-size: 24px;}

/*슬라이드 컨트롤박스*/
.controlBox {position:absolute; top: 60%; left: 5%; height: 25px; line-height: 27px;}
.barWrap { width: 300px; float: left; margin-top: 12px; margin-right: 20px; background: rgba(0,0,0,0.4); }
.pro-bar{ width:0; height:2px; background: #fff;}
.pro-ani{ animation: ease-in-out proBar 4s 1; /*슬라이드 타임과 동일하게*/ width:100%; }

@keyframes proBar{
	0%{width:0;}
	100%{width:100%;}
}
/* .mainV:hover .pro-bar{animation-play-state: paused;} 호버하면 애니메이션 멈춤*/
.controlBox .total {float: left; padding: 0 45px; font-weight: bold; font-family: 'Montserrat', sans-serif; color:#e2e2e2;}
.controlBox .total span {font-weight: bold; font-family: 'Montserrat', sans-serif;}
.controlBox .total span.now {color:#fff;}

/*재생멈춤*/
.playBtn {float: left; width: 25px; height: 25px; line-height: 25px; margin-right: 10px; font-size: 0; text-align: center;}
.playBtn button {width: 100%; height: 100%; text-align: center;}
.playBtn .play::before {display: block; content: '\f04b'; font-size: 16px; font-family: 'FontAwesome'; color:#fff;}
.playBtn .stop::before {display: block; content: '\f04c'; font-size: 16px; font-family: 'FontAwesome'; color:#fff;}

@media (max-width: 768px) {
	.mainV_wrap .slick-arrow {top: 60%;}
	.controlBox { top: 60%;}
}

/*타이핑효과*/
.typing-txt{display: none;}
.typing { display: inline-block; animation-name: cursor; animation-duration: 0.5s; animation-iteration-count: infinite; } 
@keyframes cursor{ 
	0%{border-right: 1px solid #fff} 
	50%{border-right: 1px solid #000} 
	100%{border-right: 1px solid #fff} 
}
/*-------*/
.mainVisual {position: relative; width: 100%; height: 100%;}
.mainVisual div.mainText {position: absolute; left: 5%; top:35%; height: auto; color:#fff; letter-spacing: 2px;}
.mainVisual div.mainText h2 {margin-bottom: 25px; font-weight: 500; font-size: 48px; line-height: 1.2; font-family: 'Nanum Square-b'; text-shadow:1px 1px 1px #555; animation: slide02 1s;}
.mainVisual div.mainText h4 {margin-bottom: 5px; font-weight: 400; font-size: 20px; font-family: 'Nanum Square-b'; text-shadow:1px 1px 1px #555; animation: slide01 1s;}

/*메인게시판*/
.mainBoard {width: 900px; height: 200px; position: absolute; bottom: 0; right: 90px; /* background:  rgba(0,0,0,0.15); */ overflow: hidden;}
.mainBoard p {float: left; width: 10%; height: 100%; padding-right: 25px; text-align: right;}
.mainBoard p span {display: block; width: 100%; height: 60px; color:#fff; opacity: 0.7; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 600;}
.mainBoard p a {display: block; width: 100%; height: calc(100% - 60px); color:#fff; font-size: 38px; font-family: 'Montserrat', sans-serif; font-weight: 100;}
.mainBoard p a:hover {color:#4c8bff;}
.mainBoard ul {float: left; width: 90%; height: 100%; overflow: hidden;}
.mainBoard ul li {float: left; width: 33.333%; height: 100%; border-left: 1px solid rgba(255,255,255,0.5); overflow: hidden;}
.mainBoard ul li a {display: block; width: 100%; height: 100%; padding: 0 30px; color:#fff; font-weight: 500; font-size: 15px; animation: slide01 1s; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
.mainBoard ul li a .bd_date {display: block; margin-top: 20px; font-weight: 400; text-align: right; opacity: 0; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s;}
.mainBoard ul li a:hover {padding-top: 20px;}
.mainBoard ul li a:hover .bd_date {opacity: 1;}

.mainVisual.V01 { background: url("/images/main/main_VS01.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover;}
.mainVisual.V01 div.mainText p.typing {margin-bottom: 25px; font-size: 58px; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.2;  text-shadow:1px 1px 1px #555;}
.mainVisual.V02 { background: url("/images/main/main_VS02.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover;}
.mainVisual.V03 { background: url("/images/main/main_VS03.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover;}
.mainVisual.V04 { background: url("/images/main/main_VS04.jpg") no-repeat center; -webkit-background-size: cover; background-size: cover;}

@keyframes slide01 {
	from { margin-left: 100px; opacity: 0; }
	to { margin-left: 0; opacity: 1; }
}
@keyframes slide02 {
	from { margin-left: 200px; opacity: 0; }
	to { margin-left: 0; opacity: 1; }
}

.scrollIcon {position: absolute; right: 20px; z-index: 9999; animation: scrollDown 0.4s alternate infinite;}

@keyframes scrollDown {
	0% { bottom: 35px; }
	100% { bottom: 40px; }
}

	

@media (max-width: 1180px) {
	.mainBoard {width: 768px; height: 180px;}
	.mainBoard p span { opacity: 1;}
}
@media (max-width: 1024px) {

	.mainVisual div.mainText {top:30%;}
	.mainVisual div.mainText h2 {font-size: 44px;}
	.mainVisual.V01 div.mainText p.typing {font-size: 54px;}
}

@media (max-width: 940px) {

	.mainVisual div.mainText {top:25%;}
	
}
@media (max-width: 890px) {
	.top_logo {position: absolute; left: 20px; top: 10px;}
	.top_logo .pc {display: none;}
	.top_logo .mob {display: block; width: 120px;}
	.scrollIcon {display: none;}

	.mainVisual div.mainText { top:25%;}
	.mainBoard {width: 100%; height: 150px; right: 0; padding: 0 30px 0 20px; bottom: 10px;}
}

@media (max-width: 768px) {

	.mainVisual div.mainText h2 {font-size: 40px;}
	.mainVisual.V01 div.mainText p.typing {font-size: 50px;}
	.mainVisual div.mainText h4 {font-family: 'Noto Sans KR', sans-serif; font-weight: 500; font-size: 16px;}

	.mainBoard {width: 100%; height: 150px; right: 0; padding: 0 30px 0 20px; bottom: 10px;}
	.mainBoard p {width: 60px; padding-right: 15px;}
	.mainBoard ul {width: calc(100% - 60px);}
	.mainBoard ul li {width: 100%; height: 50px; line-height: 50px;}
	.mainBoard ul li a {position: relative; padding: 0 100px 0 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.mainBoard ul li a .bd_date {position: absolute; right: 0; top: 0; margin-top: 0; opacity: 1; }
	.mainBoard ul li a:hover {padding-top: 0;}
	.mainBoard ul li a:hover .bd_date {opacity: 1;}
	
}
@media (max-width: 560px) {
	.top_logo img {width: 100px;}

	.mainVisual div.mainText h2 {font-size: 38px;}
	.mainVisual.V01 div.mainText p.typing {font-size: 48px;}
	.mainVisual div.mainText h4 { font-size: 16px;}

	/*메인비주얼 슬라이드*/
	.mainV_wrap .slick-arrow {position: absolute; top: 65%;}
	.mainV_wrap .slick-prev {left: auto; right: 105px;}
	.mainV_wrap .slick-prev::after {content: '\f104'; font-size: 22px;}
	.mainV_wrap .slick-next {left: auto; right: 15px;}
	.mainV_wrap .slick-next::after {content: '\f105'; font-size: 22px;}

	/*슬라이드 컨트롤박스*/
	.controlBox { width: 100%; top: 65%; left: 0; padding: 0 20px; background: rgba(0,0,0,0.2);}
	.barWrap { width: calc(100% - 155px); margin-top: 12px; margin-right: 15px;}
	.controlBox .total {width: 100px; height: 25px; line-height: 25px; padding: 0; text-align: center;}
	.playBtn { margin-right: 15px;}




	.mainBoard {width: 100%; height: 190px; right: 0; padding: 0 20px; bottom: 10px;}

	.mainBoard p {position: relative; float: left; width: 100%; height: 30px; line-height: 30px; padding-bottom: 10px; padding-right: 30px; text-align: left; border-bottom: 1px solid #fff;}
	.mainBoard p span {display: block; width: 100%; height: auto; font-size: 18px;}
	.mainBoard p span br {display: none;}
	.mainBoard p a {position: absolute; top: 0; right: 0; width: 30px; height: 30px; text-align: right;}
	.mainBoard p a:hover {color:#4c8bff;}

	.mainBoard ul {width: 100%;}
	.mainBoard ul li {width: 100%; height: 50px; line-height: 50px; border-left: none; padding-left: 0;}
	.mainBoard ul li a {position: relative; padding: 0 100px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
	.mainBoard ul li a .bd_date {position: absolute; right: 0; top: 0; margin-top: 0; opacity: 1; }
	.mainBoard ul li a:hover {padding-top: 0;}
	.mainBoard ul li a:hover .bd_date {opacity: 1;}
}

@media (max-width: 480px) {
	.mainVisual div.mainText h2 {font-size: 32px;}
	.mainVisual.V01 div.mainText p.typing {font-size: 40px;}
	.mainVisual div.mainText h4 { font-size: 15px;}
}

@media (max-width: 360px) {
	.mainVisual div.mainText h2 {font-size: 28px;}
	.mainVisual.V01 div.mainText p.typing {font-size: 38px;}
}


/*=================================section1=================================*/
.mainCon {width: 100%; height: calc(100% - 180px); overflow: hidden;}
.mainCon .mainCon_left {float: left; width: 50%; height: 100%; background: #f7f7f7;}
#mainSlide {width: 100%; height: 100%; margin: 0; padding: 0;}
#mainSlide div {height: 100%;}
#mainSlide .slideDiv {position: relative;}
#mainSlide .slideDiv .slideText {position: absolute; top: 12%; left: 10%; background:rgba(255,255,255,0.6); padding:30px; border-radius:5px;}
#mainSlide .slideDiv .slideText li {line-height: 1.2;}
#mainSlide .slideDiv .slideText li.slide_tit {font-size: 32px; font-weight: 400; color:#000;}
#mainSlide .slideDiv .slideText li.slide_date {margin: 20px 0 30px;font-size: 42px; font-weight: 700; color:#0a2c74;}
#mainSlide .slideDiv .slideText li.slide_info {font-size: 14px; font-weight: 400; color:#000; letter-spacing: 1px;}
#mainSlide .slick-dots {position: absolute;top:50px;bottom:auto;right: 50px;width: auto;}
#mainSlide .slick-dots li {float: left;width: 22px;height: 22px;margin: 0 5px;padding: 0;}
#mainSlide .slick-dots li:last-child {margin-right: 0;}
#mainSlide .slick-dots li button {width: 100%;height: 100%;padding: 0;background: #fff;border-radius: 50%;font-size: 0;color:transparent;}
#mainSlide .slick-dots li button:before {display: none;}
#mainSlide .slick-dots li.slick-active button {background: #4c8bff;}
.mainCon .mainCon_right {float: left; width: 50%; height: 100%; background: #f4f4f4;}
.mainCon .mainCon_right ul {width: 100%; height: 100%; overflow: hidden;}
.mainCon .mainCon_right ul li.main_box {float: left; width: 50%; height: 50%;}
.mainCon .mainCon_right ul li.main_box a {position: relative; display: block; width: 100%; height: 100%; padding: 10%;}
.mainCon .mainCon_right ul li.main_box.box1 a {background: #fff; color:#101010;}
.mainCon .mainCon_right ul li.main_box.box2 a {background: #0a2c74; color:#fff;}
.mainCon .mainCon_right ul li.main_box.box3 a {background: #5284ee; color:#fff;}
.mainCon .mainCon_right ul li.main_box.box4 a {background: #fff; color:#000; cursor: unset;}
.mainCon .mainCon_right ul li.main_box a:hover {background: #fd8204; color:#fff;}
.mainCon .mainCon_right ul li.main_box a:hover p {color:#fff; opacity: 1;}
.mainCon .mainCon_right ul li.main_box.box1 a:hover p {color:#fff; opacity: 1;}
.mainCon .mainCon_right ul li.main_box.box1 a:hover > div img.def {display: none;}
.mainCon .mainCon_right ul li.main_box.box1 a:hover > div img.hv {display: block;}
.mainCon .mainCon_right ul li.main_box.box4 a:hover {background: #fff;}
.mainCon .mainCon_right ul li.main_box.box4 a:hover > span {color:#000;}
.mainCon .mainCon_right ul li.main_box.box4 a:hover > h1 {color:#000;}

.mainCon .mainCon_right ul li.main_box a > span {font-family: 'Montserrat', sans-serif; font-weight: 600;}
.mainCon .mainCon_right ul li.main_box a > h2 {margin: 4% 0 6%; font-size: 26px; font-weight: 700; -ms-word-break: keep-all;
word-break: keep-all;}
.mainCon .mainCon_right ul li.main_box a > h1 {margin: 10% 0 0; font-size: 51px; font-family: 'Montserrat', sans-serif; font-weight: 700;}
.mainCon .mainCon_right ul li.main_box a > p {margin-bottom: 60px; font-size: 15px; opacity: 0.7;}

.mainCon .mainCon_right ul li.main_box a > div.iconArea {position: absolute; left: 50px; bottom: 35px; overflow: hidden;}
.mainCon .mainCon_right ul li.main_box a > div.iconArea img {float: left;}
.mainCon .mainCon_right ul li.main_box a > div.iconArea img.def {display: block;}
.mainCon .mainCon_right ul li.main_box a > div.iconArea img.hv {display: none;}
.mainCon .mainCon_right ul li.main_box.box4 a > div.iconArea {position: absolute; left: 50%; transform:translateX(-50%); width: 100%; padding: 0 10%;}
.mainCon .mainCon_right ul li.main_box.box4 a img {width: calc(100% - 290px); padding-top: 10px;}

.mainCon .mainCon_right ul li.main_box.box1 a > p {color:#5a5a5a; opacity: 1;}
.mainCon .mainCon_right ul li.main_box.box4 a > div > ul {
	float: left; display: inline-block; width: auto; margin-left: 15px;
}
.mainCon .mainCon_right ul li.main_box.box4 a > h1 br {display: none;}
.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li {font-size: 16px; font-weight: 400; color:#0a2c74;}
.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .hasTime {display: inline-block; width: 56px; margin-right: 30px; font-size: 15px;}
.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .orange {color:#ff8400; letter-spacing: 0.5px;}


@media (min-width: 1800px) {
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul {padding-top:10px;}
}
@media (max-width: 1620px) {
	.mainCon .mainCon_right ul li.main_box a > h1 {font-size: 46px;}
	.mainCon .mainCon_right ul li.main_box.box4 a img {display: none; width: 60px; padding-top: 0; padding-bottom: 5px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul {width: 100%; margin-left: 0;}
}
@media (max-width: 1450px) {
	.mainCon .mainCon_right ul li.main_box.box1 a > h2 {letter-spacing: -0.5px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {font-size: 44px;}
}
@media (max-width: 1400px) {
	.mainCon .mainCon_left {float: left; width: 45%; height: 100%; background: #f7f7f7;}
	.mainCon .mainCon_right {float: left; width: 55%; height: 100%; background: #f4f4f4;}
	#mainSlide .slideDiv .slideText {top:20%; left: 8%; padding:20px;}	
	#mainSlide .slideDiv .slideText li.slide_tit {font-size: 28px;}
	#mainSlide .slideDiv .slideText li.slide_date {font-size: 36px;}
}
@media (max-width: 1260px) {
	#mainSlide .slideDiv .slideText {top:20%; left: 5%;}
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {margin: 5% 0 0;}
	.mainCon .mainCon_right ul li.main_box a > div.iconArea img {height: 80px; width: auto;}
}
@media (max-width: 1180px) {
	.mainCon .mainCon_right ul li.main_box a > h1 {margin: 10px 0; font-size: 40px;}
	.mainCon .mainCon_right ul li.main_box a > h2 {margin: 10px 0 15px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .hasTime {margin-right: 20px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .orange {letter-spacing: -0.5px;}
	#mainSlide .slideDiv .slideText li.slide_tit {font-size: 22px;}
	#mainSlide .slideDiv .slideText li.slide_date {font-size: 30px;}
}

@media (max-width: 1024px) {
	.mainCon {height: 100%;}
	.mainCon footer {display: none;}
	.mainCon .mainCon_left {float: none; width: 100%; height: 40%; background: #f7f7f7;}
	.mainCon .mainCon_right {float: none; width: 100%; height: 60%; background: #f4f4f4;}
	#mainSlide .slideDiv .slideText {position: absolute; top: 50%; left: 50px; transform:translateY(-50%);}
	#mainSlide .slick-dots {
		top:auto;
		bottom: 30px;
		right: 50px;
	}
	.mainCon .mainCon_right ul li.main_box a {padding: 30px 20px;}
	.mainCon .mainCon_right ul li.main_box a > div.iconArea {position: absolute; left: auto; right: 30px; bottom: 30px; overflow: hidden;}
	.mainCon .mainCon_right ul li.main_box a > div.iconArea img {height: 80px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {margin: 2% 0 0;}
	.mainCon .mainCon_right ul li.main_box.box4 a img {display: block; width: auto; padding-top: 10px; padding-bottom: 0;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul {width: auto; margin-left: 25px;}
}
@media (max-width: 1024px) {
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {font-size: 42px;}
}
@media (max-width: 790px) {
	.mainCon .mainCon_right ul li.main_box a > div.iconArea img {height: 60px;}
	.mainCon .mainCon_right ul li.main_box.box4 a img {width: calc(100% - 240px); height: auto !important; }
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul {margin-left: 0px;}
	.mainCon .mainCon_right ul li.main_box.box4 a img {display: none}
	.mainCon .mainCon_right ul li.main_box.box4 a > div.iconArea {padding: 0 5%;}

}
@media (max-width: 640px) {
	.mainCon .mainCon_right ul li.main_box.box1 a > h2 {letter-spacing: -1px; font-size: 22px;}
}
@media (max-width: 620px) {
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {font-size: 38px;}
}
@media (max-width: 560px) {
	.mainCon .mainCon_left {float: none; width: 100%; height: 25%; background: #f7f7f7;}
	#mainSlide .slideDiv .slideText {left: 0px; border-radius:0;}
	#mainSlide .slideDiv .slideText li.slide_tit {font-size: 18px;}
	#mainSlide .slideDiv .slideText li.slide_date {margin: 10px 0 20px; font-size: 26px;}
	#mainSlide .slideDiv .slideText li.slide_info {padding: 3px 0;background: rgba(255,255,255,0.1);}
	#mainSlide .slick-dots {top:auto;bottom: 30px;right: 30px;}
	#mainSlide .slick-dots li {width: 16px; height: 16px;}

	.mainCon .mainCon_right {float: none; width: 100%; height: 75%; background: #f4f4f4;}
	.mainCon .mainCon_right ul li.main_box {width: 100%; height: 25%;}
	.mainCon .mainCon_right ul li.main_box a {padding: 12px 20px;}
	.mainCon .mainCon_right ul li.main_box a > span {font-size: 12px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {margin: 5px 0; font-size: 28px;}
	.mainCon .mainCon_right ul li.main_box a > h2 {margin: 5px 0; font-size: 20px; font-weight: 500;}
	.mainCon .mainCon_right ul li.main_box.box1 a > h2  {font-size: 20px;}
	.mainCon .mainCon_right ul li.main_box a > p {font-size: 13px;}
	.mainCon .mainCon_right ul li.main_box a > div.iconArea img {height: 40px;}
	/*.mainCon .mainCon_right ul li.main_box.box4 a > h1 br {display: block;}*/
	.mainCon .mainCon_right ul li.main_box.box4 a > div.iconArea {left: auto;  right: 0; bottom:auto; top:50%; width: auto; transform:translate(0,-50%); padding-right: 20px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div.iconArea img {display: none;}
}
@media (max-width: 450px) {
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 br {display: block;}
}
@media (max-width: 425px) {
	.mainCon .mainCon_right ul li.main_box a p {display: block;}
}
@media (max-width: 380px) {
	.mainCon .mainCon_left {float: none; width: 100%; height: 25%;}
	.mainCon .mainCon_right {float: none; width: 100%; height: 75%; background: #f4f4f4;}
	.mainCon .mainCon_right ul li.main_box a {padding: 5px 20px;}
	.mainCon .mainCon_right ul li.main_box a > h2 {font-size: 18px;}
	.mainCon .mainCon_right ul li.main_box.box1 a > h2  {font-size: 18px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > h1 {font-size: 20px}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li {font-size: 13px; font-weight: 400; color:#0a2c74;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .hasTime {display: inline-block; width: 56px; margin-right: 30px; font-size: 14px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li .orange {color:#ff8400; letter-spacing: -0.5px; font-size: 14px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div > ul li b {font-size: 13px;}
	.mainCon .mainCon_right ul li.main_box.box4 a > div.iconArea {top:auto; bottom: 15px; transform:none;}

}



/*=================================section2=================================*/
#section2 {height: auto !important;}
#section2 footer {display: none; }


@media (max-width: 1024px) {
	#section2 footer {display: block;}

}