@charset "utf-8";

/*
font-family: 'Montserrat', sans-serif;
*/

/* 공통 */
#main .inner_bx {max-width: 1520px; width: calc(100% - 40px); margin: 0 auto; box-sizing: border-box;}

#main .ttl01 {position: relative; z-index: 1;}
#main .ttl01 .txt1 {font-family: 'Montserrat', sans-serif; font-size: 18px; color: #102768; font-weight: 700; position: relative; padding-left: 85px; margin-bottom: 23px;}
#main .ttl01 .txt1::before {content: ''; width: 70px; height: 2px; background-color: #102768; position: absolute; left: 0; top: 50%; margin-top: -1px;}
#main .ttl01 .txt2 {font-size: 46px; color: #111111; line-height: 67px; /*letter-spacing: -0.05em;*/ word-break: keep-all;}
#main .ttl01 .txt2 strong {font-weight: 700;}
#main .ttl01 .col2 {color: #fff;}
#main .ttl01 .col2::before {background-color: #fff;}

#main .btn01 {display: inline-block; width: 250px; box-sizing: border-box; border: 1px solid #fff; color: #fff; font-size:16px; font-weight: 700; padding: 0 40px 0 30px; border-radius: 35px;}
#main .btn01.col2 {background-color: #102768; border-color: #102768;}
#main .btn01 span {display: block; text-align: left; position: relative; line-height: 68px;}
#main .btn01 span::before {content: ''; width: 8px; height: 12px; background: url(../images/icon/arrow1.png) no-repeat center; position: absolute; right: 0; top: 50%; margin-top: -6px;}

#main .list01 {position: relative; z-index: 1;}
#main .list01 ul {display: flex; flex-flow: wrap;}
#main .list01 ul li {width: calc(25% - 39.75px); margin-right: 53px;}
#main .list01 ul li:last-child {margin-right: 0; margin-bottom: 0;}
#main .list01 ul li a {display: block; position: relative; height: 100%; background-color: #fff; overflow: hidden; border-radius: 20px 0 20px 0; padding: 68px 30px 45px; box-shadow: 10px 0px 20px rgba(17,17,17,0.1); box-sizing: border-box;}
#main .list01 .type {position: absolute; top: 0; left: 30px; background-color: #3fb2df; border-radius: 0 0 10px 10px; width: 60px; text-align: center; font-size: 16px; color: #ffffff; line-height: 26px; word-break: keep-all; padding: 14px 0 6px}
#main .list01 .subject {font-size: 20px; color: #222222; line-height: 30px; /*letter-spacing: -0.05em;*/ word-break: keep-all; font-weight: 700; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box; height: 60px;}
#main .list01 .txt {font-size: 16px; color: #666666; line-height: 26px; /*letter-spacing: -0.05em;*/ word-break: keep-all; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipss; display:-webkit-box; height: 104px; margin-top: 17px;}
#main .list01 .date {font-size: 15px; color: #aaaaaa; word-break: keep-all; margin-top: 27px;}
#main .list01 .no_data {padding: 120px 0; font-size: 18px; color: #d8d8d8; /*letter-spacing: -0.05em;*/ word-break: keep-all; text-align: center; box-shadow: 10px 0px 20px rgba(17,17,17,0.1); background-color: #fff; border-radius: 20px 0 20px 0;}

@-webkit-keyframes round1 {
	0% {
		transform: rotate(0deg) translate(0, 0);
	}
	50% {
		transform: rotate(180deg) translate(50px, -50px);
	}
	100% {
		transform: rotate(360deg) translate(0, 0)
	}
}
@-webkit-keyframes round2 {
	0% {
		transform: rotate(0deg) translate(0, 0);
	}
	50% {
		transform: rotate(180deg) translate(-30px, -30px);
	}
	100% {
		transform: rotate(360deg) translate(0, 0)
	}
}


/* sec1 */
#sec1 {position: relative; overflow: hidden;}
#sec1 .slide_bx {font-size: 0;}
#sec1 .img_bx {overflow: hidden;}
#sec1 .img_bx div {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center; transform: scale(1.2);}
#sec1 .con_bx.on .img_bx div {-webkit-transition: transform 3.5s; -moz-transition: transform 3.5s; transition: transform 3.5s; transform: scale(1);}
#sec1 .txt_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; display:flex; justify-content:center; align-items:center; table-layout:fixed;}
#sec1 .txt_bx .txt_w {width: calc(100% - 40px); max-width: 1200px;}
#sec1 .txt_bx .txt_w .txt1 {font-family: 'Montserrat', sans-serif; font-size: 70px; line-height: 80px; color: #ffffff; font-weight: 700; word-break: keep-all;}
#sec1 .txt_bx .txt_w .txt2 {font-size: 20px; line-height: 30px; color: #ffffff; /*letter-spacing: -0.05em;*/ word-break: keep-all; margin-top: 13px;}
#sec1 .txt_bx .txt_w .btm_bx {margin-top: 54px;}
#sec1 .page{ position:relative; display:inline-block; vertical-align:middle; margin-right:30px; padding:13px 0; width:60px; height:60px; border-radius:50%; box-sizing:border-box; text-align:center; }
#sec1 .page .circle_progress { position:absolute; left:0; top:0; transform: rotate(-90deg); }
#sec1 .page .frame, #sec1 .page .bar { fill: none; }
#sec1 .page .frame { stroke: rgba(255,255,255,.4); }
#sec1 .page .bar { stroke: rgba(255,255,255,.0); stroke-linecap: round; stroke-dasharray: 630; animation-play-state:paused;}
#sec1 .page .bar.on{ animation: stroke-ani 11s; stroke: #fff;}
#sec1 .page span {font-size: 14px; color: rgba(255,255,255,0.4); display: block; width: 26px; margin: 0 auto;}
#sec1 .page .now {text-align: left; color: #fff;}
#sec1 .page .total {text-align: right;}
#sec1 .page .dash {width: 30px; position: absolute; height: 1px; background: rgba(255,255,255,0.4); left: 50%; top: 50%; transform:translate(-50%, -50%) rotate(-45deg); -webkit-transform:translate(-50%, -50%) rotate(-45deg);}

@keyframes stroke-ani {
  from {
	stroke-dashoffset: 630;
  }
  to {
	stroke-dashoffset: 0;
  }
}
#sec1 .slick-dots {display: none!important;}
#sec1 .dot_bx {display: inline-block; vertical-align: middle; font-size: 0;}
#sec1 .dot_bx ul li {display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255,255,255,0.3); margin-right: 30px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; cursor: pointer;}
#sec1 .dot_bx ul li:last-child {margin-right: 0;}
#sec1 .dot_bx ul li.on {background-color: #fff;}

#sec1 .scroll_btn {display:inline-block; position:absolute; right:50px; bottom:55px; width:120px; height:120px; z-index:10; border-radius:50%; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s; background:transparent; }
#sec1 .scroll_btn:hover{ background:rgba(255,255,255,.2); }
#sec1 .scroll_btn:before{ content:''; position:absolute; left:50%; top:50%; margin-top:-9px; margin-left:-7px; width:14px; height:18px; background:url('../images/main/scroll_ar.png') no-repeat center bottom; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; }
#sec1 .scroll_btn:hover:before {background-position: center top;}
@-webkit-keyframes scrollAni {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg );}
}
@keyframes scrollAni {
  0% { transform: rotate( 0deg ); }
  100% { transform: rotate( 360deg );}
}
#sec1 .scroll_btn svg { fill: currentColor; height: auto; transform-origin: center; width: 100%; animation: scrollAni 20s linear infinite 0s; }
#sec1 .scroll_btn svg text{ font-size:8px; color:#fff; letter-spacing:.19em; }


/* sec2 */
#sec2 {padding: 176px 0 180px; overflow: hidden; position: relative;}
#sec2 .round1 {width: 1400px; height: 1400px; border-radius: 50%; box-sizing: border-box; background-image: linear-gradient(90deg, #f5f8fc, #0d71b7); opacity: 0.3; position: absolute; right: -300px; top: -540px; animation: round1 10s linear infinite;}
#sec2 .round1::before {content: ''; width: 880px; height: 880px; background-color: #fff; position: absolute; left: 260px; top: 260px; border-radius: 50%; box-sizing: border-box;}
#sec2 .con_bx {font-size: 0; margin-top: 90px; padding-bottom: 140px;}
#sec2 .con_bx .con_w {display: inline-block; position: relative; width: calc(33.333% - 66.666px); margin-right: 100px;}
#sec2 .con_bx .con_w:last-child {margin-right: 0; margin-bottom: 0;}
#sec2 .con_bx .con_w:nth-child(2) {top: 140px;}
#sec2 .con_bx .con_w:nth-child(3) {top: 40px;}
#sec2 .con_bx a {position: relative; overflow: hidden; height: 680px; border-radius: 40px 0 40px 0; display: block;}
#sec2 .con_bx .bg_bx {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
#sec2 .con_bx .txt_bx {position: absolute; z-index: 1; max-width: 340px; bottom: 70px; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); width: calc(100% - 30px); padding-bottom: 116px;}
#sec2 .con_bx .txt_bx strong {display: block; font-family: 'Montserrat', sans-serif; font-size: 46px; color: #ffffff; font-weight: 700;}
#sec2 .con_bx .txt_bx p {font-size: 18px; line-height: 28px; color: #ffffff; /*letter-spacing: -0.05em;*/ word-break: keep-all; margin-top: 23px;}
#sec2 .con_bx .txt_bx .btn {width: 60px; height: 60px; background: url(../images/icon/arrow1.png) no-repeat right 26px center #102768; border-radius: 30px; margin-top: 56px; position: absolute; bottom: 0; left: 0; overflow: hidden;}
#sec2 .con_bx .txt_bx .btn span {position: absolute; line-height: 60px; font-size: 16px; color: #fff; left: 30px; top: 0; opacity: 0;}


/* sec3 */
#sec3 {position: relative; overflow: hidden; padding: 116px 0 180px;}
#sec3 .bg_bx {position: absolute; width: 100%; height: 460px; background: url(../images/main/sec3_bg1.jpg) no-repeat right center; background-size: cover; position: absolute; left: 0; top: 0; overflow: hidden;}
#sec3 .bg_bx .round1 {position: absolute; width: 800px; height: 800px; background-image: linear-gradient(90deg, #102768, #01114b); border-radius: 50%; left: -200px; top: -420px; animation: round2 10s linear infinite;}
#sec3 .bg_bx .round1::before {content: ''; width: 480px; height: 480px; border-radius: 50%; background-color: #102768; position: absolute; left: 160px; top: 160px;}
#sec3 .btn_bx {position: absolute; right: 0; top: 28px;}
#sec3 .list01 {margin-top: 66px;}


/* sec4 */
#sec4 {position: relative; overflow: hidden; padding: 0 0 180px;}
#sec4 .con_bx {position: relative; overflow: hidden; height: 560px; display:flex; justify-content:center; align-items:center; table-layout:fixed; box-sizing: border-box; border-radius: 40px 0 40px 0;}
#sec4 .con_bx .bg_bx {background: url(../images/main/sec4_bg.jpg) no-repeat center; background-size: cover; position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#sec4 .con_bx .txt_bx {max-width: 1320px; width: calc(100% - 50px); position: relative; z-index: 1;}
#sec4 .btn_bx {margin-top: 66px;}


/* PC */
@media all and (min-width:1025px){
	/* 공통 */
	#main .btn01 {-webkit-transition: box-shadow 0.3s; -moz-transition: box-shadow 0.3s; transition: box-shadow 0.3s;}
	#main .btn01:hover {box-shadow: 0 0px 26px rgba(255,255,255,0.3);}
	#main .btn01.col2:hover {box-shadow: 0 0px 26px rgba(16,39,104,0.5);}
	#main .btn01 span::before {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
	#main .btn01:hover span::before {transform: translate(10px, 0);}
	
	#main .list01 ul li a {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
	#main .list01 ul li a:hover {transform: translate(0, -20px);}
	#main .list01 .subject {-webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s;}
	#main .list01 ul li a:hover .subject {color: #3fb2df;}
	
	
	/* sec2 */
	#sec2 .con_bx .con_w a {-webkit-transition: transform 0.3s, box-shadow 0.3s; -moz-transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;}
	#sec2 .con_bx .con_w a:hover {transform: translate(0, -30px);/* box-shadow: 1px 10px 30px rgba(17,17,17,0.2);*/}
	#sec2 .con_bx .bg_bx {-webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
	#sec2 .con_bx .con_w a:hover .bg_bx {transform: scale(1.1);}
	#sec2 .con_bx .txt_bx .btn {-webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s;}
	#sec2 .con_bx .txt_bx .btn span {-webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
	#sec2 .con_bx .con_w a:hover .txt_bx .btn {width: 100%;}
	#sec2 .con_bx .con_w a:hover .txt_bx .btn span {opacity: 1; transition-delay: 0.2s;}
}

@media all and (max-width:1280px){
	/* sec2 */
	#sec2 .con_bx .con_w {width: calc(33.333% - 20px); margin-right: 30px;}
	
	
	/* sec3 */
	#main .list01 ul li {width: calc(25% - 22.5px); margin-right: 30px;}
}

/* 태블릿&모바일 공통*/
@media all and (max-width:1024px){
	/* 공통 */
	#main .ttl01 .txt1 {margin-bottom: 10px; font-size: 15px; padding-left: 30px;}
	#main .ttl01 .txt1::before {width: 20px; height: 2px;}
	#main .ttl01 .txt2 {font-size: 25px; line-height: 35px;}
	#main .btn01 {width: 160px; font-size: 15px; padding: 0 20px;}
	#main .btn01 span {line-height: 43px;}
	
	#main .list01 ul li a {padding: 41px 25px 27px; border-radius: 10px 0 10px 0;}
	#main .list01 .type {padding: 7px 0 6px; font-size: 11px; line-height: 17px; width: 40px; left: 25px; border-radius: 0 0 5px 5px;}
	#main .list01 .subject {height: 46px; font-size: 18px; line-height: 23px;}
	#main .list01 .txt {margin-top: 9px;; height: 80px; font-size: 14px; line-height: 20px;}
	#main .list01 .date {margin-top: 14px; font-size: 12px;}
	
	#main .list01 .no_data {border-radius: 10px 0 10px 0; font-size: 14px; padding: 107px 0;}
	
	@-webkit-keyframes round1 {
		0% {
			transform: rotate(0deg) translate(0, 0);
		}
		50% {
			transform: rotate(180deg) translate(25px, -25px);
		}
		100% {
			transform: rotate(360deg) translate(0, 0)
		}
	}
	@-webkit-keyframes round2 {
		0% {
			transform: rotate(0deg) translate(0, 0);
		}
		50% {
			transform: rotate(180deg) translate(-15px, -15px);
		}
		100% {
			transform: rotate(360deg) translate(0, 0)
		}
	}
	
	
	
	/* sec1 */
	#sec1 .txt_bx .txt_w .txt1 {font-size: 35px; line-height: 40px;}
	#sec1 .txt_bx .txt_w .txt2 {font-size: 15px; line-height: 20px; margin-top: 16px; max-width: 320px;}
	#sec1 .txt_bx .txt_w .btm_bx {margin-top: 47px;}
	
	#sec1 .dot_bx {display: none!important;}
	#sec1 .scroll_btn {display: none!important;}
	
	
	
	/* sec2 */
	#sec2 {padding: 71px 0 75px;}
	#sec2 .round1 {width: 500px; height: 500px; right: -290px; top: -204px;}
	#sec2 .round1::before {width: 300px; height: 300px; left: 100px; top: 100px;}
	#sec2 .con_bx {margin-top: 45px; padding-bottom: 70px;}
	#sec2 .con_bx .con_w:nth-child(2) {top: 70px;}
	#sec2 .con_bx .con_w:nth-child(3) {top: 20px;}
	#sec2 .con_bx a {height: 340px; border-radius: 20px 0 20px 0;}
	#sec2 .con_bx .txt_bx {bottom: 30px; width: calc(100% - 50px); padding-bottom: 71px;}
	#sec2 .con_bx .txt_bx strong {font-size: 25px; line-height: 35px;}
	#sec2 .con_bx .txt_bx p {font-size: 15px; line-height: 20px; margin-top: 8px;}
	#sec2 .con_bx .txt_bx .btn {width: 45px; height: 45px; background-position: center;}
	
	
	
	/* sec3 */
	#sec3 {padding: 71px 0 75px;}
	#sec3 .bg_bx {height: 300px;}
	#sec3 .bg_bx .round1 {width: 400px; height: 400px; top: -250px; left: -160px;}
	#sec3 .bg_bx .round1::before {width: 240px; height: 240px; top: 80px; left: 80px;}
	#sec3 .btn_bx {top: 10px;}
	#sec3 .list01 {margin-top: 50px;}


	/* sec4 */
	#sec4 {padding: 0 0 75px;}
	#sec4 .con_bx {height: 340px; border-radius: 20px 0 20px 0;}
	#sec4 .btn_bx {margin-top: 24px;}
}

/* 모바일 */
@media all and (max-width:768px){
	/* 공통 */
	#main .list01 ul li:nth-child(n) {width: 100%; margin-right: 0; margin-bottom: 15px;}
	#main .list01 ul li:last-child {margin-bottom: 0;}
	
	
	
	/* sec2 */
	#sec2 .con_bx {padding-bottom: 0;}
	#sec2 .con_bx .con_w:nth-child(n) {width: 100%; margin-right: 0; top: 0; margin-bottom: 15px;}
	#sec2 .con_bx .con_w:last-child {margin-bottom: 0;}
	#sec2 .con_bx a {height: auto; padding-bottom: 106.25%;}
	#sec2 .con_bx .txt_bx {max-width: 100%;}
	
	
	
	/* sec3 */
	#sec3 .bg_bx {height: 380px; background: url(../images/main/sec3_bg1_m.jpg) no-repeat right center; background-size: cover;}
	#sec3 .btn_bx {top: auto; position: relative; margin-top: 24px;}
	#sec3 .btn_bx[data-aos=fade-up] {transform: translate3d(100px,0,0);}
	#sec3 .btn_bx.aos-animate[data-aos=fade-up] {transform: translateZ(0); transition-delay: .3s;}
	#sec3 .list01.aos-animate[data-aos=fade-up] {transition-delay: .3s;}


	/* sec4 */
	#sec4 .con_bx {height: auto; padding-bottom: 145.313%;}
	#sec4 .con_bx .bg_bx {background: url(../images/main/sec4_bg_m.jpg) no-repeat center; background-size: cover;}
	#sec4 .con_bx .txt_bx {position: absolute; left: 50%; transform:translate(-50%, 0%); -webkit-transform:translate(-50%, 0%); top: 0; height: 100%;}
	#main #sec4 .ttl01 {height: 100%; padding-top: 71px; box-sizing: border-box;}
	#sec4 .btn_bx {position: absolute; left: 0; bottom: 75px;}
}