@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; position:relative; width:8px; height:8px; margin:0 6px; background:#fff; border-radius:50%; opacity:1; vertical-align:middle; transition:0.3s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{opacity:.8;}
.swiper-pagination-bullet-active{width:12px; height:12px; opacity:1;}
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{}

.swiper-button-next, .swiper-button-prev{display:inline-block; position:absolute; width:11px; height:10px; top:0; left:auto; right:auto; margin:0; padding:0; transition:0.2s;}
.swiper-button-prev{background:url('../images/ico_arrow_left.png') no-repeat center;}
.swiper-button-next{background:url('../images/ico_arrow_right.png') no-repeat center;}
.swiper-button-prev:focus, .swiper-button-prev:hover{opacity:.6;}
.swiper-button-next:focus, .swiper-button-next:hover{opacity:.6;}

.swiper-button-play, .swiper-button-pause{display:none; width:6px; height:10px; margin-left:5px; font-size:0; vertical-align:middle; opacity:1; cursor:pointer; transition:0.2s;}
.swiper-button-play:focus, .swiper-button-pause:focus,
.swiper-button-play:hover, .swiper-button-pause:hover{opacity:.6;}
.swiper-button-play{background:url('../images/ico_play.png') no-repeat center;}
.swiper-button-pause{background:url('../images/ico_pause.png') no-repeat center;}
.swiper-button-play.active, .swiper-button-pause.active{display:inline-block;}

/* visual */
#mainVisual{position:relative; width:100%; min-width:1200px; height:100vh; max-height:960px; margin:0 auto; background:#000; overflow:hidden;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{height:100%; padding:0;}
#mainVisual .swiper-container{width:100%; height:100%; overflow:hidden;}
#mainVisual .swiper-container .bg01{background:#f7f7f7 url('../images/main/main_visual_01.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg02{background:#f7f7f7 url('../images/main/main_visual_02.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg03{background:#f7f7f7 url('../images/main/main_visual_03.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .bg04{background:#f7f7f7 url('../images/main/main_visual_04.jpg') no-repeat center / cover;}
#mainVisual .swiper-container .txtBox{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:-80px; transform:translateY(-50%); z-index:2;/* cursor:default;*/}
#mainVisual .swiper-container .txtBox p{font-size:1.125em; font-weight:200; text-align:left; letter-spacing:.3em;}
#mainVisual .swiper-container .txtBox p.ti{margin:0 auto 48px -.035em; font-size:5em; letter-spacing:-.035em;}

#mainVisual .bgBox{position:absolute; width:100%; padding:0 40px; right:0; bottom:50%; text-align:right;}
#mainVisual .bgBox .inner{width:100%; height:100%;}
#mainVisual .bgBox .pager{display:inline-block; line-height:0; writing-mode:vertical-lr;}
#mainVisual .bgBox .pager .swiper-pagination-bullet{margin:6px 0;}

#mainVisual .quick{display:inline-block; position:absolute; width:100%; top:50%; left:0; margin-top:126px; transform:translateY(-50%); z-index:2;}
#mainVisual .quick ul.link{display:inline-block; display:flex; flex-wrap:wrap;}
#mainVisual .quick ul.link li{position:relative;}
#mainVisual .quick ul.link li.link01{background:#13162a;}
#mainVisual .quick ul.link li.link02{background:#333a70;}
#mainVisual .quick ul.link li.link03{background:#5761b2;}
#mainVisual .quick ul.link li a{display:block; min-width:260px; padding:24px 28px; color:#fff; font-size:1.25em;}
#mainVisual .quick ul.link li a span{}
#mainVisual .quick ul.link li a span:after{content:''; display:inline-block; position:absolute ; width:11px; height:10px; top:50%; right:28px; margin-top:-5.5px; background:url('../images/ico_arrow_right.png') no-repeat center / 100%; vertical-align:middle; transition:.2s;}
#mainVisual .quick ul.link li a:focus span:after,
#mainVisual .quick ul.link li a:hover span:after{right:24px;}

/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1224px; margin:0 auto; padding:0; background:transparent; z-index:1;}
#mainContents .tabCon{clear:both; display:block; position:relative; margin:0 auto;}
#mainContents .tabCon .tabItem{clear:both; display:none; position:relative; margin:0 auto;}
#mainContents .tabCon .tabItem.active{display:block;}

#mainContents .area01,
#mainContents .area02,
#mainContents .area03{clear:both; position:relative; width:100%; overflow:hidden;}

#mainContents .area01{width:100%; height:120px; line-height:120px; margin-top:-120px;}
#mainContents .area01 .board.notice{display:inline-block; width:100%; height:100%; padding:0 80px; background:rgba(19,22,42,.5); border-radius:60px 60px 0 0;}
#mainContents .area01 .board.notice p{display:inline-block; color:#fff;}
#mainContents .area01 .board.notice p.boardTitle{float:left; width:124px; padding:0 28px 0 0; font-size:1.25em; font-weight:500; vertical-align:top;}
#mainContents .area01 .board.notice .bgBox{display:inline-block; width:60px; margin:0 80px 0 0; vertical-align:top;}
#mainContents .area01 .board.notice .bgBox .control{display:inline-block; width:100%; line-height:1;}
#mainContents .area01 .board.notice .bgBox .control > div{position:relative; float:left; margin:0 8px; vertical-align:middle;}
#mainContents .area01 .board.notice .bgBox .control > div:first-child{margin-left:0;}
#mainContents .area01 .board.notice .bgBox .control > div:last-child{margin-right:0;}
#mainContents .area01 .board.notice .swiper-container{display:inline-block; float:right; width:calc(100% - 264px); height:inherit; vertical-align:middle;}
#mainContents .area01 .board.notice .swiper-container ul.board{width:100%;}
#mainContents .area01 .board.notice .swiper-container ul.board li{display:block; width:100%;}
#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{color:#fff; font-size:1.125em; }
#mainContents .area01 .board.notice .swiper-container ul.board li a{display:inline-block; width:100%; line-height:1; color:#fff;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p{color:inherit; vertical-align:middle;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:84%; padding:0 60px 0 0; font-size:1.125em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{color:#e3e5f2; text-align:right; opacity:.8;}
#mainContents .area01 .board.notice .swiper-container ul.board li a:focus,
#mainContents .area01 .board.notice .swiper-container ul.board li a:hover{color:#ffe554;}


#mainContents .area02{padding:140px 0;}
#mainContents .area02 .eightconstituional{display:flex; flex-wrap:wrap; align-items:center;}
#mainContents .area02 .eightconstituional .txtW{width:33%; padding-right:40px;}
#mainContents .area02 .eightconstituional .txtW p{line-height:1.6; font-size:1.125em; font-weight:300; word-break:keep-all;}
#mainContents .area02 .eightconstituional .txtW p.ti{line-height:1; margin:0 auto 40px; font-size:2.5em; font-weight:200;}
#mainContents .area02 .eightconstituional ul{display:grid; grid-gap:1px; grid-template-columns:repeat(2,25%); grid-template-rows:50% 50%; grid-auto-flow:column; align-items:center; width:67%;}
#mainContents .area02 .eightconstituional ul li{position:relative;}
#mainContents .area02 .eightconstituional ul li.link01{background:#d6eecb;}
#mainContents .area02 .eightconstituional ul li.link02{background:#3e7033;}
#mainContents .area02 .eightconstituional ul li.link03{background:#ecdecb;}
#mainContents .area02 .eightconstituional ul li.link04{background:#705433;}
#mainContents .area02 .eightconstituional ul li.link05{background:#e3e0c8;}
#mainContents .area02 .eightconstituional ul li.link06{background:#5f5f57;}
#mainContents .area02 .eightconstituional ul li.link07{background:#c8dae3;}
#mainContents .area02 .eightconstituional ul li.link08{background:#405d83;}
#mainContents .area02 .eightconstituional ul li a{display:block; width:100%; padding:24px; font-size:1.25em; font-weight:300;}
#mainContents .area02 .eightconstituional ul li a.light{color:#13162a;}
#mainContents .area02 .eightconstituional ul li a.dark{color:#fff;}
#mainContents .area02 .eightconstituional ul li a span{display:inline-block;vertical-align:middle;line-height:1.4;}
#mainContents .area02 .eightconstituional ul li a span.hanja{margin-right:10px; font-family:'Noto Serif KR',serif; font-weight:700;}
#mainContents .area02 .eightconstituional ul li a span.eng{font-size:0.813em;display:block;margin-left:50px;}
#mainContents .area02 .eightconstituional ul li a:focus, #mainContents .area02 .eightconstituional ul li a:hover{}
#mainContents .area02 .eightconstituional ul li a:after{content:''; display:inline-block; position:absolute ; width:11px; height:10px; top:50%; right:28px; margin-top:-5.5px; vertical-align:middle; opacity:0; transition:.2s;}
#mainContents .area02 .eightconstituional ul li a.light:after{background:url('../images/ico_arrow_right_dark.png') no-repeat center / 100%;}
#mainContents .area02 .eightconstituional ul li a.dark:after{background:url('../images/ico_arrow_right.png') no-repeat center / 100%;}
#mainContents .area02 .eightconstituional ul li a:focus:after,
#mainContents .area02 .eightconstituional ul li a:hover:after{right:24px; opacity:1;}

#mainContents .area03{padding:1.2em 0; background:#cfd2e3;}
#mainContents .area03 ul.banner{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.2em; text-align:center;}
#mainContents .area03 ul.banner li{display:inline-block; flex:1;}
#mainContents .area03 ul.banner li a{display:block; background:#fff; border:1px solid transparent;}
#mainContents .area03 ul.banner li a img{width:100%; max-width:382px;}
#mainContents .area03 ul.banner li a:focus,
#mainContents .area03 ul.banner li a:hover{border-color:#5761b2;}

@media all and (max-width:1440px){
	#mainVisual .swiper-container .txtBox{margin-top:-60px;}
	#mainVisual .swiper-container .txtBox p{font-size:1.2vw;}
	#mainVisual .swiper-container .txtBox p.ti{margin:0 auto 40px -.035em; font-size:5.2vw;}
	#mainVisual .quick{margin-top:112px;}
	#mainVisual .quick ul.link li a{min-width:18vw;font-size: 1em;}

	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:80%;}
	#mainContents .area02 .eightconstituional .txtW{width:40%;}
	#mainContents .area02 .eightconstituional .txtW p.ti{margin:0 auto 28px; font-size:2.25em;}
	#mainContents .area02 .eightconstituional ul{width:60%;}
	#mainContents .area02 .eightconstituional ul li a{line-height:1.4;text-align:center;}
	#mainContents .area02 .eightconstituional ul li a:after{display:none;}
	#mainContents .area02 .eightconstituional ul li a span.hanja{display:block; margin-right:0;}
	#mainContents .area02 .eightconstituional ul li a span.eng{vertical-align:middle;margin-left:0;}
	
}

@media all and (max-width:1279px){
	#mainVisual{min-width:960px;}
	#mainVisual .swiper-container .txtBox{left:28px;}
	#mainVisual .swiper-container .txtBox p{font-size:1.4vw;}
	#mainVisual .quick{left:28px;}
	#mainVisual .quick ul.link li a{min-width:22vw; padding:20px 28px;}

	#mainContents{min-width:960px;}
	#mainContents .area01 .board.notice{padding:0 60px;}
	#mainContents .area01 .board.notice p.boardTitle{width:100px; padding:0 20px 0 0;}
	#mainContents .area01 .board.notice .bgBox{margin:0 60px 0 0;}
	#mainContents .area01 .board.notice .swiper-container{width:calc(100% - 220px);}

	#mainContents .area02{padding:100px 0;}
	#mainContents .area02 .eightconstituional .txtW{width:46%;}
	#mainContents .area02 .eightconstituional ul{width:54%;}
	#mainContents .area02 .eightconstituional ul li a{font-size:1.063em; }
	#mainContents .area02 .eightconstituional ul li a span.eng{font-size:0.875em;}
}

@media all and (max-width:1023px){
	#mainVisual{min-width:100%; height:calc(100vh - 72px);}
	#mainVisual .swiper-container .txtBox{margin-top:-100px;}
	#mainVisual .swiper-container .txtBox p{font-size:1.6vw;}
	#mainVisual .swiper-container .txtBox p.ti{margin:0 auto 28px; font-size:2.25em;}
	#mainVisual .quick{margin-top:20px;}
	#mainVisual .quick ul.link li a{min-width:28vw; padding:16px 24px; font-size:1em;}
	#mainVisual .quick ul.link li a span:after{right:24px;}
	#mainVisual .quick ul.link li a:focus span:after, #mainVisual .quick ul.link li a:hover span:after{right:20px;}

	#mainContents{min-width:100%;}
	#mainContents .area01 .board.notice{padding:0 40px;}
	#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{font-size:1.063em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:78%; font-size:1.063em;}
	#mainContents .area02{padding:80px 0;}
	#mainContents .area02 .eightconstituional .txtW{width:100%; margin:0 auto 40px;}
	#mainContents .area02 .eightconstituional .txtW p br{display:none;}
	#mainContents .area02 .eightconstituional ul{width:100%;}
	#mainContents .area02 .eightconstituional ul li a{padding:20px;}
}

@media all and (max-width:768px){
	#mainVisual{height:calc(100vh - 54px);}
	#mainVisual .swiper-container .txtBox{top:100px; left:20px; margin-top:0;}
	#mainVisual .swiper-container .txtBox p.ti{margin:0 auto 20px;}
	#mainVisual .bgBox{bottom:60%;}
	#mainVisual .quick{left:0; margin-top:0; padding:0 20px;}
	#mainVisual .quick .inner{min-width:100%;}
	#mainVisual .quick ul.link li{width:100%;}
	#mainVisual .quick ul.link li a{width:100%;}

	#mainContents .area01{height:120px; line-height:1;}
	#mainContents .area01 .inner{height:100%;}
	#mainContents .area01 .board.notice{padding:28px 32px; border-radius:32px 32px 0 0;}
	#mainContents .area01 .board.notice .bgBox{float:right; margin:0;}
	#mainContents .area01 .board.notice .swiper-container{clear:both; width:100%; margin-top:12px;}
	#mainContents .area01 .board.notice .swiper-container ul.board li.empty_li{font-size:.938em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p{line-height:1.2;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listTitle{width:100%; padding:0; font-size:.938em;}
	#mainContents .area01 .board.notice .swiper-container ul.board li a p.listDate{width:100%; padding:0; font-size:.813em;}
	#mainContents .area02{padding:40px 0;}
	#mainContents .area02 .eightconstituional .txtW p{font-size:1em;}
	#mainContents .area02 .eightconstituional .txtW p.ti{margin:0 auto 20px;}
	#mainContents .area02 .eightconstituional ul{grid-template-columns:repeat(4,50%); grid-template-rows:25% 25% 25% 25%;}
	#mainContents .area02 .eightconstituional ul li a{font-size:1em;}
	#mainContents .area03{padding:.75em 0;}
	#mainContents .area03 ul.banner{gap:.25em;}
}

@media all and (max-width:480px){
	#mainVisual{height:72vh; min-height:480px;}
	#mainVisual .swiper-container .txtBox p.ti{font-size:1.875em;}

	#mainContents .area02 .eightconstituional .txtW p.ti{font-size:1.875em;}
	#mainContents .area02 .eightconstituional ul li a{font-size:.938em;}
	#mainContents .area03 ul.banner li{flex:1 1 100%;}
}

@media all and (max-width:374px){
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}