@charset "UTF-8";
/* visual */
#mainVisual{position:relative; width:100%; height:600px; margin:0 auto; background:#222; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .swiper-container{width:100%; height:100%;}
#mainVisual .swiper-container .bg01{background:url('../images/main/main_visual_01.jpg') no-repeat right 50% center; background-size:cover;}
#mainVisual .swiper-container .bg02{background:url('../images/main/main_visual_02.jpg') no-repeat right 50% center; background-size:cover;}
#mainVisual .txtBox{position:absolute; width:100%;max-width:1200px; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; cursor:default;text-align:left;}
#mainVisual .txtBox span{display:block;font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; margin:0 auto; color:#fff;font-weight:300;font-size:2.875em; line-height:1.6;text-align:left;}
#mainVisual .txtBox span strong{font-weight:500;display:block;}
#mainVisual .bgBox{position:absolute; width:100%;height:100%;z-index:2;position:absolute;bottom:0;text-align:right;}
#mainVisual .bgBox .pager{position:relative;display:inline-block;vertical-align: middle;margin-top:20px;}
#mainVisual .bgBox .pager .swiper-pagination{position:initial;display:inline-block; text-align:center;padding:0;}
#mainVisual .bgBox .pager .swiper-pagination .swiper-pagination-current{font-weight:700;}
#mainVisual .bgBox .pager .swiper-pagination .swiper-pagination-bullet{border-radius:0;background:transparent;border:1px solid #fff;width:22px;height:4px;cursor:pointer;margin-right:10px;opacity:1;}
#mainVisual .bgBox .pager .swiper-pagination .swiper-pagination-bullet:last-child{margin-right:0;}
#mainVisual .bgBox .pager .swiper-pagination .swiper-pagination-bullet-active{background:#fff;}
#mainVisual .bgBox .control{position:absolute;width:100%;bottom:50%;}
#mainVisual .bgBox .control .swiper-button-next,#mainVisual .bgBox .control .swiper-button-prev{position:absolute;display:inline-block;width:20px;height:41px;opacity:0.5;transition:opacity .2s;}
#mainVisual .bgBox .control .swiper-button-next:hover,#mainVisual .bgBox .control .swiper-button-next:focus,#mainVisual .bgBox .control .swiper-button-prev:hover,#mainVisual .bgBox .control .swiper-button-prev:focus{opacity:0.8;}
#mainVisual .bgBox .control .swiper-button-prev{left:28px;background:url('../images/ico_prev.png') no-repeat center center;}
#mainVisual .bgBox .control .swiper-button-next{right:28px;background:url('../images/ico_next.png') no-repeat center center;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:transparent; box-sizing:border-box; z-index:1;}
#mainContents .con{position:relative; margin:0; padding:0; box-sizing:border-box;}
#mainContents .board{position:relative;}
#mainContents .board .boardTitle{font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:1.75em;font-weight:700;color:#333;}
#mainContents .board .boardTitle strong{color:#2b63b2;}
#mainContents .board a.moreBtn{position:absolute;top:4px;right:0;width:21px;height:21px;text-indent:-9999px;background:url('../images/ico_more.png') no-repeat center center;transform: rotate(0deg);transition:.2s;}
#mainContents .board a.moreBtn:hover{transform: rotate(90deg);}


#mainContents .area01{position:relative;padding:80px 0; box-sizing:border-box;}
#mainContents .area01:after{content:'';display:block;clear:both;}
#mainContents .area01 .board .boardList{margin-top:40px;}
#mainContents .area01 .board .boardList:after{content:'';display:block;clear:both;}
#mainContents .area01 .board .boardList li{float:left;width:31.3%;margin-right:3.05%;}
#mainContents .area01 .board .boardList li:last-child{margin-right:0;}
#mainContents .area01 .board .boardList li a{display:block;padding:30px 34px;min-height: 277px;border:1px solid #ddd;background:transparent;transition:all .3s ease;line-height:1.6;text-align:left;transform:translateY(0);transition:all .2s;}
#mainContents .area01 .board .boardList li a:after{content:'';display:block;clear:both;}
#mainContents .area01 .board .boardList li a:hover{background:#2b63b2 linear-gradient(-90deg, #1e4985, #2b63b2);border:none;box-shadow:0 0 18px rgba(38,89,161,.5);transform:translateY(-12px);}
#mainContents .area01 .board .boardList li a .listTitle{display: -webkit-box;font-size:1.25em;font-weight:700;overflow:hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;margin-bottom:14px;word-break:keep-all;}
#mainContents .area01 .board .boardList li a:hover .listTitle{color:#fff;}
#mainContents .area01 .board .boardList li a .listCon{display: -webkit-box;font-size:1.125em;color:#666;font-weight:400;overflow:hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow:ellipsis;margin-bottom:24px;word-break:keep-all;}
#mainContents .area01 .board .boardList li a:hover .listCon{color:#dae5f4;}
#mainContents .area01 .board .boardList li a .listDate{display:inline-block;color:#666;font-size:1.125em;line-height:1.4;font-weight:400;}
#mainContents .area01 .board .boardList li a:hover .listDate{color:#dae5f4;}


#mainContents .area02{position:relative;padding:0 0 80px; background:#fff;box-sizing:border-box;}
#mainContents .area02:after{content:'';display:block;clear:both;}
#mainContents .area02 .board .boardList{margin-top:40px;}
#mainContents .area02 .board .boardList:after{content:'';display:block;clear:both;}
#mainContents .area02 .board .boardList >  li{float:left;width:31.3%;margin-right:3.05%;}
#mainContents .area02 .board .boardList li:last-child{margin-right:0;}
#mainContents .area02 .board .boardList li a{display:block;padding:30px 34px;min-height:88px;border:1px solid #ddd;background:transparent;transition:all .3s ease;line-height:1.6;text-align:left;transform:translateY(0);transition:all .2s;}
#mainContents .area02 .board .boardList li a:after{content:'';display:block;clear:both;}
#mainContents .area02 .board .boardList li a:hover{box-shadow:0 0 18px rgba(224,224,224,.5);transform:translateY(-12px);}
#mainContents .area02 .board .boardList li a .layoutLeft{width:80px;}
#mainContents .area02 .board .boardList li a .layoutLeft .date{width:100%;text-align:Center;}
#mainContents .area02 .board .boardList li a .layoutLeft .date .month{background:#2b63b2;color:#fff;font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:1.25em;font-weight:700;padding:4px 0;}
#mainContents .area02 .board .boardList li a .layoutLeft .date .day{background:#e8e8e8;font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:1.25em;font-weight:700;padding:8px 0;}
#mainContents .area02 .board .boardList li a .layoutRight{width:calc(100% - 110px);margin-left:30px;}
#mainContents .area02 .board .boardList li a .layoutRight .date{color:#2b63b2;font-size:1.25em;font-weight:700;display:block;margin-bottom:0;}
#mainContents .area02 .board .boardList li a .layoutRight .txt{display: -webkit-box;color:#666;word-break:keep-all;overflow:hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;}


#mainContents .area03 {position:relative;padding:0 0 80px; box-sizing:border-box;}
#mainContents .area03:after{content:'';display:block;clear:both;}
#mainContents .area03 .boardTitle{font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:1.75em;font-weight:700;color:#333;}
#mainContents .area03 .boardTitle strong{color:#2b63b2;}
#mainContents .area03 .txtBox{position:relative;background:#e7f1ff;margin-top:40px;padding:30px 34px;}
#mainContents .area03 .txtBox a{display:block;}
#mainContents .area03 .txtBox:after{content:'';display:inline-block;position:absolute;bottom:-28%;right:34px;background:url('../images/main/main_con_img.png') no-repeat;width:263px;height:235px;background-size:100%;}
#mainContents .area03 .txtBox p{font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif; font-size:1.25em;font-weight:500;margin-bottom:15px;line-height:1.6;word-break:keep-all;}
#mainContents .area03 .moreBtn{color:#2b63b2;font-weight:600;}
#mainContents .area03 .moreBtn:after{content:'';display:inline-block;margin-left:10px;width:10px;height:10px;text-indent:-9999px;background:url('../images/ico_more.png') no-repeat center center;background-size:100%;transform: rotate(0deg);transition:.2s;}
#mainContents .area03 .moreBtn:hover:after{transform: rotate(90deg);}

#mainContents .area04{padding:80px 0;background:#2b63b2 linear-gradient(-90deg, #1e4985, #2b63b2);}
#mainContents .area04:after{content:'';display:block;clear:both;}
#mainContents .area04 .boardTitle{color:#fff;}
#mainContents .area04 .boardTitle strong{color:#c5feff;}
#mainContents .area04 .board .tab{float:right;margin-top:-23px;margin-right:28px;}
#mainContents .area04 .board .tab ul li{float:left;margin-right:22px;}
#mainContents .area04 .board .tab ul li .tabLink{font-family:'GmarketSans','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif;font-size:1.25em;color:#fff;background:transparent;cursor:pointer;}
#mainContents .area04 .board .tab ul li .tabLink.active{color:#c5feff;font-weight:700;}
#mainContents .area04 .board .tabCon .tabItem{clear:both; display:none; margin:0 auto;}
#mainContents .area04 .board .tabCon .tabItem.active{display:block;}
#mainContents .area04 .board .boardList{margin-top:40px;}
#mainContents .area04 .board .boardList:after{content:'';display:block;clear:both;}
#mainContents .area04 .board .boardList li{float:left;width:31.3%;margin-right:3.05%;}
#mainContents .area04 .board .boardList li:last-child{margin-right:0;}
#mainContents .area04 .board .boardList li a{display:block;padding:30px 34px;border:1px solid #fff;background:transparent;transition:all .3s ease;line-height:1.6;text-align:left;transform:translateY(0);transition:all .2s;}
#mainContents .area04 .board .boardList li a:after{content:'';display:block;clear:both;}
#mainContents .area04 .board .boardList li a:hover{background:#fff ;border-color:#fff;transform:translateY(-12px);}
#mainContents .area04 .board .boardList li a strong{display:block;color:#c5feff;font-size:1.125em;font-weight:700;margin-bottom:14px;}
#mainContents .area04 .board .boardList li a:hover strong{color:#2b63b2;}
#mainContents .area04 .board .boardList li a .listTitle{display: -webkit-box;font-size:1.25em;font-weight:700;color:#fff;overflow:hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-overflow:ellipsis;margin-bottom:14px;word-break:keep-all;}
#mainContents .area04 .board .boardList li a:hover .listTitle{color:#333;}
#mainContents .area04 .board .boardList li a .listCon{display: -webkit-box;font-size:1.125em;color:#dae5f4;font-weight:400;overflow:hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow:ellipsis;margin-bottom:24px;word-break:keep-all;}
#mainContents .area04 .board .boardList li a:hover .listCon{color:#666;}
#mainContents .area04 .board .boardList li a .listDate{display:inline-block;color:#dae5f4;font-size:1.125em;line-height:1.4;font-weight:400;}
#mainContents .area04 .board .boardList li a:hover .listDate{color:#666;}
#mainContents .area04 .board a.moreBtn{background:url('../images/ico_more_white.png') no-repeat center center;}

@media only screen and (max-width:1279px){
	#mainVisual .txtBox{max-width:960px;}
	#mainVisual .bgBox .control .swiper-button-prev{left:10px;}
	#mainVisual .bgBox .control .swiper-button-next{right:10px;}
	#mainContents{min-width:960px;}
	#mainContents .area01,#mainContents .area04{padding:70px 0;}
	#mainContents .area02,#mainContents .area03{padding:0 0 70px;}
	#mainContents .area01 .inner, #mainContents .area02 .inner{width:100%;}
}

@media only screen and (max-width:1023px){
	#mainVisual{height:500px;}
	#mainVisual .swiper-container{max-width:1023px;}
	#mainVisual .txtBox{}
	#mainVisual .txtBox span{font-size:2.5em;word-break: keep-all;padding:0 5%;}
	#mainVisual .txtBox .btnBox{margin-top:20px;}
	#mainVisual .bgBox{}
	#mainVisual .icoBox{bottom:10px;}
	#mainVisual .icoBox ul li{width:50%;}
	#mainVisual .icoBox ul li:nth-child(1),#mainVisual .icoBox ul li:nth-child(2){border-bottom:1px solid rgba(255,255,255,.2);}
	#mainVisual .icoBox ul li:nth-child(2){border-right:none;}
	#mainVisual .icoBox ul li a{padding:12px 0;}
	#mainVisual .icoBox ul li a .ico{width:60px;height:60px;margin:0 auto;}
	#mainVisual .icoBox ul li a span{font-size:1rem;}

	#mainContents{min-width:100%;}

	#mainContents .board .boardTitle{font-size:1.5em;}
	#mainContents .board a.moreBtn{top:0;right:6px;}
	#mainContents .area01 .board .boardList{margin-top:28px;}
	#mainContents .area01 .board .boardList li{width:32.5%;margin-right:0.83%;}
	#mainContents .area01 .board .boardList li a{padding:26px 30px;min-height:203px;}
	#mainContents .area01 .board .boardList li a:hover{transform: translateY(-8px);}

	#mainContents .area02 .board .boardList{margin-top:28px;}
	#mainContents .area02 .board .boardList >  li{width:32.5%;margin-right:0.83%;}
	#mainContents .area02 .board .boardList li a{padding:26px 30px;min-height:164px;}
	#mainContents .area02 .board .boardList li a:hover{transform: translateY(-8px);}
	#mainContents .area02 .board .boardList li a .layoutLeft{margin:0 auto 14px;}
	#mainContents .area02 .board .boardList li a .layoutLeft .date .month{font-size:1.125em;padding:3px 0;}
	#mainContents .area02 .board .boardList li a .layoutLeft .date .day{font-size:1.125em;padding:6px 0;}
	#mainContents .area02 .board .boardList li a .layoutRight{width:100%;margin-left:0;text-align:center;}

	#mainContents .area03 .boardTitle{font-size:1.5em;}
	#mainContents .area03 .txtBox{padding:26px 30px;margin-top:28px;}
	#mainContents .area03 .txtBox p{width:70%;}
	#mainContents .area03 .txtBox:after{width:28%;padding-bottom:26%;height:auto;right:30px;}

	#mainContents .area04 .board .tab ul li{margin-right:16px;}
	#mainContents .area04 .board .boardList{margin-top:28px;}
	#mainContents .area04 .board .boardList li{width:32.5%;margin-right:0.83%;}
	#mainContents .area04 .board .boardList li a{padding:26px 30px;;min-height:203px;}
	#mainContents .area04 .board .boardList li a:hover{transform: translateY(-8px);}
	
}

@media only screen and (max-width:768px){
	#mainVisual{height:400px;}
	#mainVisual .swiper-container{max-width:768px;}

	#mainVisual .txtBox span{font-size:2em;padding:0 2%;}
	#mainVisual .bgBox{}
	#mainVisual .bgBox .inner{min-width:auto;padding:0;}
	#mainVisual .bgBox .control{display:none;}
	#mainVisual .bgBox .pager{margin-top:2%;margin-right:2%}

	#mainContents .area01,#mainContents .area04{padding:60px 0;}
	#mainContents .area02,#mainContents .area03{padding:0 0 60px;}

	
	#mainContents .area01 .board .boardList{margin-top:24px;}
	#mainContents .area01 .board .boardList li{float:none;width:100%;margin-right:0;margin-bottom:18px;}
	#mainContents .area01 .board .boardList li:last-child{margin-bottom:0;}
	#mainContents .area01 .board .boardList li a{padding:24px 28px;min-height:auto;}
	#mainContents .area01 .board .boardList li a:hover{transform: none;}
	#mainContents .area01 .board .boardList li a .listTitle{margin-bottom:12px;}
	#mainContents .area01 .board .boardList li a .listCon{margin-bottom:20px;}

	#mainContents .area02 .board .boardList{margin-top:24px;}
	#mainContents .area02 .board .boardList >  li{float:none;width:100%;margin-right:0;margin-bottom:18px;}
	#mainContents .area02 .board .boardList li:last-child{margin-bottom:0;}
	#mainContents .area02 .board .boardList li a{padding:24px 28px;min-height:auto;}
	#mainContents .area02 .board .boardList li a:hover{transform: none;}
	#mainContents .area02 .board .boardList li a .layoutLeft{float:left;margin:0;width:70px;}
	#mainContents .area02 .board .boardList li a .layoutLeft .date .month{padding:4px 0;}
	#mainContents .area02 .board .boardList li a .layoutLeft .date .day{padding:8px 0;}
	#mainContents .area02 .board .boardList li a .layoutRight{float:right;width:calc(100% - 93px);margin-left:18px;text-align:left;}

	#mainContents .area03 .txtBox{padding:24px 28px;margin-top:24px;}
	#mainContents .area03 .txtBox:after{width:25%;padding-bottom:23%;right:24px;bottom:-14%;}
	#mainContents .area03 .txtBox p{font-size:1.125em;}

	#mainContents .area04 .board .tab{float:none;margin:24px 0;margin-right:0;}
	#mainContents .area04 .board .tab ul{text-align:Center;}
	#mainContents .area04 .board .tab ul li{float:none;display:inline-block;margin-right:0;}
	#mainContents .area04 .board .tab ul li .tabLink{padding:0 8px;}

	#mainContents .area04 .board .boardList{margin-top:24px;}
	#mainContents .area04 .board .boardList li{float:none;width:100%;margin-right:0;margin-bottom:18px;}
	#mainContents .area04 .board .boardList li:last-child{margin-bottom:0;}
	#mainContents .area04 .board .boardList li a{padding:24px 28px;min-height:auto;}
	#mainContents .area04 .board .boardList li a:hover{transform: none;}
	#mainContents .area04 .board .boardList li a strong{margin-bottom:12px;}
	#mainContents .area04 .board .boardList li a .listTitle{margin-bottom:12px;}
	#mainContents .area04 .board .boardList li a .listCon{margin-bottom:20px;}
	

}

@media only screen and (max-width:540px){
	#mainVisual{height:300px; margin:0 auto;}
	#mainVisual .swiper-container{max-width:540px;}
	#mainVisual .swiper-container .bg01{background-position:right 95% top;}
	#mainVisual .swiper-container .bg02{background-position:right 48% top;}
	#mainVisual .txtBox span{font-size:1.875em;}
	#mainVisual .txtBox span br{display:none;}
	#mainVisual .txtBox .btnBox a{font-size:0.875em;padding:9px 12px 11px;}
	#mainVisual .icoBox ul li a .ico{width:45px;height:45px;}
	#mainVisual .icoBox ul li a span{font-size:0.875em;}

	#mainContents .area01,#mainContents .area04{padding:50px 0;}
	#mainContents .area02,#mainContents .area03{padding:0 0 50px;}


	#mainContents .area01 .board .boardList{margin-top:20px;}
	#mainContents .area01 .board .boardList li a{padding:20px 24px;}

	#mainContents .area02 .board .boardList{margin-top:20px;}
	#mainContents .area02 .board .boardList li a{padding:20px 24px;}

	#mainContents .area03 .txtBox{padding:20px 24px;margin-top:20px;;}
	#mainContents .area03 .txtBox:after{display:none;}
	#mainContents .area03 .txtBox p{width:100%}


	#mainContents .area04 .board .tab{margin:20px 0;}
	#mainContents .area04 .board .tab ul li .tabLink{font-size:1.125em;}
	#mainContents .area04 .board .boardList{margin-top:20px;}

	#mainContents .area04 .board .boardList li a{padding:20px 24px;}

}