body{font-family:'Noto Sans KR','Apple Gothic','MalgunGothic','Open Sans',sans-serif; font-size:14px;}
#mainwrap, #swrap{width:100%; overflow: hidden; min-width: 320px;}
header{position: absolute; top: 0; left: 0; z-index: 9; width:100%; height:90px; background:rgba(0,0,0,0.1); transition: all 0.5s 0.2s; }
header:hover{background:rgba(255,255,255,0.8); transition: all 0.5s 0s; }
header #logo{position: absolute; top: 25px; left: 60px; z-index:3;}
header #logo h1{font-size: 0px; background-image: url(../images/logo.png);background-size: 195px 38px; background-position: center; background-repeat: no-repeat; width: 310px; height: 40px;transition: all 0.7s 0.2s; }   
header:hover #logo h1{background-image: url(../images/logo_color.png); transition: all 0.7s 0s; }
header .lang{ position: absolute; top: 32px; right: 120px;  border: 1px solid rgba(255,255,255,0.4);z-index:9;}
header:hover .lang{border: 1px solid rgba(0,0,0,0.4);}
header .lang a{color: #fff;font-weight: 400; font-size: 16px; line-height: 1.2; padding: 3px 20px 5px;}
header:hover .lang a{color:#333;}
header #menu{position: relative;border-bottom: 1px solid rgba(255,255,255,0.3);}
header #menu .menu .wrap, header #menu .menuBox .wrap{width:800px;}
header #menu .menu ul{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0px;}
header #menu .menu ul li{}
header #menu .menu ul li a{line-height: 90px;font-size: 16px;color: #fff; transition: color 0.7s 0.2s; }
header:hover  #menu .menu ul li a{color:#333; transition: color 0.7s 0s;}
header #menu .menuBox{position: absolute;top: 100%;left: 0%;width: 100%;z-index: 9;background-color: rgba(255,255,255,0.8);background-image: url(../images/header_line.png);background-repeat: no-repeat;background-size: 100% 2px;max-height: 0px;overflow: hidden;transition: max-height .5s;}
header #menu:hover .menuBox{max-height: 1000px;}
header #menu .menuBox{}
header #menu .menuBox .grid{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-gap: 0px;margin: 15px 0px 20px;}
header #menu .menuBox .grid ul{}
header #menu .menuBox .grid ul li{width: 100%;}
header #menu .menuBox .grid ul li a{line-height: 30px; color:#555;}

header .mobile.sidemenu{position: absolute; top: 0; right: 0;display: block !important; height:90px;}
header .mobile{}
header .mobile .button{position: absolute; width: 40px;height: 40px;top: 50%;right: 60px;transform: translateY(-50%);cursor: pointer; z-index:9;}
header .mobile .button span{position: absolute;width: 26px;height: 2px;background-color: #fff;top: 50%;left: 50%;transform: translate(-50%,-50%);transition: all 0.7s 0.2s; }
header:hover .mobile .button span{background-color: #333;transition: all 0.7s 0s; }
header .mobile .button span:nth-child(1){transform: translate(-50%,-50%) translateY(-8px);}
header .mobile .button span:nth-child(3){transform: translate(-50%,-50%) translateY(8px);}
header .mobile .menuSide{position: fixed;top: 0px;right: 0px;width: 240px;height: 100%;z-index: 999;background-color: white;transform: translateX(120%);transition: transform 1s;}
header .mobile.view .menuSide{transform: translateX(0%);}
header .mobile .menuSide .close{position: absolute;top: 0px;left: -50px;width: 40px;height: 40px;cursor: pointer;}
header .mobile .menuSide .close span{width: 30px;height: 2px;background-color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
header .mobile .menuSide .close span:nth-child(1){transform: translate(-50%,-50%) rotate(45deg);}
header .mobile .menuSide .close span:nth-child(2){transform: translate(-50%,-50%) rotate(-45deg);}
header .mobile .menuSide .logo{width: 100%;height: 80px;background-image: url(../images/logo_color.png);background-size: 200px auto;background-repeat: no-repeat;background-position: center;}
header .mobile .menuSide .menu{background-image: url(../images/header_line.png);background-repeat: no-repeat;background-size: 100% 2px;}
header .mobile .menuSide .menu > li{width: 100%;cursor: pointer;}
header .mobile .menuSide .menu > li > span{display: inline-block;width: 100%;line-height: 50px;text-align: left;padding: 0px 20px;border-bottom: 1px solid #cecece;font-size: 16px;}
header .mobile .menuSide .menu > li > ol{background-color: #f5f5f5;max-height: 0px;overflow: hidden;transition: max-height .5s;}       
header .mobile .menuSide .menu > li.view > ol{max-height: 500px;}
header .mobile .menuSide .menu > li > ol li{width: 100%;}
header .mobile .menuSide .menu > li > ol li a{line-height: 40px;width: 100%;text-align: left;padding: 0px 20px;font-size: 14px;}
header .mobile .menuBG{position: fixed;z-index: 998;top: 0px;left: 0px;width: 100%;height: 100%;background-color: #000c;transform: translateX(100%);opacity: 0;transition: opacity 1s 0s, transform 0s 1s;}
header .mobile.view .menuBG{opacity: 1;transform: translateX(0%);transition: opacity 1s 0s, transform 0s 0s;}


/* 슬라이드 */
main #home{}
main #home .circlew{width:1400px; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); z-index: 9;}
main #home .circle{width:550px; height: 550px; position: absolute; right:0%; top: 50%; transform: translateY(-50%);}
main #home .circle .circle1{animation-name:spinCircle; animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:linear;}
main #home .circle .circle1,
main #home .circle .circle2{position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%);}
main #home .scrolldown{position: absolute; left:50%; bottom: 70px; transform: translateX(-50%);z-index: 9;}
main #home .slide{}
main #home .slide .swiper-slide{width: 100%;height: 100vh; min-height:500px;background-position: center;background-repeat: no-repeat;background-size: cover; transition:height .5s;}               
main #home .slide .swiper-slide .box{width: 1400px;height: 300px;position: absolute;top:50%;left: 50%;transform: translate(-50%, -50%);}
main #home .slide .swiper-slide .box .title{position: absolute;top:48%; left: 0%;width: 100%;transform: translateY(-50%);transition:font-size .5s;text-align: left;color: #fff;}
main #home .slide .swiper-slide .box .title .name{font-size: 33px;font-weight: 100;transform: translateY(40px);opacity: 0;transition:font-size .5s;}
main #home .slide .swiper-slide .box .title .sub{font-size: 56px;letter-spacing: -1px;font-weight: 600;margin-top: 15px;transform: translateY(40px);opacity: 0;transition: font-size .5s;}
main #home .slide .swiper-slide.swiper-slide-active .box .title .name{animation: up .5s linear 0s 1;animation-fill-mode: forwards;text-shadow: 3px 3px 20px rgb(12 39 70 / 80%);}
main #home .slide .swiper-slide.swiper-slide-active .box .title .sub{animation: up .5s linear .2s 1;animation-fill-mode: forwards;     text-shadow: 3px 3px 80px rgb(0 0 0 / 90%);}  
main #home .slide .swiper-slide.p1{background-image: url(../images/main_visual2.jpg);}
main #home .slide .swiper-slide.p2{background-image: url(../images/main_visual5.jpg);}      
main #home .slide .swiper-slide.p3{background-image: url(../images/main_visual.jpg);}      
main #home .slide .swiper-pagination{top: 50%;left: 50%;width: 1400px;margin: 0 auto;transform: translate(-50%, -50%) translateY(180px);bottom: auto;text-align: left;}
main #home .slide .swiper-pagination-bullet{opacity: 0.5; background-color: transparent;width: 13px;height: 13px;border: 3px solid #fff;margin: 0;margin-right: 20px;}
main #home .slide .swiper-pagination-bullet-active{opacity: 1; }
/* 슬라이드 */



@keyframes up{            
0%{
	transform: translateY(40px);
	opacity: 0;
}
100%{
	transform: translateY(0px);
	opacity: 1;
}
} 



/* 섹션박스 */
main .section{min-height: 500px;background-position: center;background-repeat: no-repeat;background-size: cover;padding: 80px 0; overflow:hidden;}
main .section .wrap{opacity: 0;transform: translateY(60px);transition: all 1s 0s;}
main .section.view .wrap{opacity: 1;transform: translateY(0px);}
main .section .con{margin-top: 30px; opacity: 0; transform: translateY(50px); transition: all 1s .4s;}
main .section.view .con{opacity: 1; transform: translateY(0px);}
main .section .wrap > .title{margin: 40px 0 20px;}
main .section .wrap > .title .name{font-size: 56px;font-weight: bold;margin-top: 10px;color:#000;}
main .section .wrap > .title .sub{color: #666; margin-top: 16px; font-size:16px;}
main .section .list{margin-top: 40px; display: inline-grid; width: 100%;grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; }
main .section .list li{background-color: white; position: relative; padding-bottom: 70px; opacity: 0;transform: translateY(50px); transition: all 1s; text-align: left;}
main .section .list li:nth-child(1){transition: all 1s 0s;}
main .section .list li:nth-child(2){transition: all 1s .2s;}
main .section .list li:nth-child(3){transition: all 1s .4s;}
main .section .list li:nth-child(4){transition: all 1s .6s;}
main .section.view .list li{opacity: 1;transform: translateY(0px);}
main .section .list li img{}
main .section .list li .text{text-align: left; max-width: 350px;}
main .section .list li .button{width: 120px;line-height: 34px;color: #3995e2;text-align: center; margin-top: 40px; background-color: #fff;border: 1px solid white;border-radius: 20px;border: 1px solid #3995e2;transition: all .5s;}
main .section .list li .button:hover{color:#fff;background-color: #3995e2;}
main .section .list li .name{font-size: 22px;text-align: left;color: #444;margin-top:30px;}
main .section .list li .subject{font-size: 16px;text-align: left;color: #666;margin-top:20px;}
main .section .info{display: inline-grid;width: 100%;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-gap: 4px;margin-top: 40px;}
main .section .info li{background-color: white;padding: 50px 0;border:1px solid white;opacity: 0;transform: translateY(50px);transition: all 1s;}
main .section .info li:nth-child(1){transition: all 1s 0s;}
main .section .info li:nth-child(2){transition: all 1s .2s;}
main .section .info li:nth-child(3){transition: all 1s .4s;}
main .section .info li:nth-child(4){transition: all 1s .6s;}
main .section .info li:nth-child(5){transition: all 1s .8s;}
main .section.view .info li{opacity: 1;transform: translateY(0px);}
main .section .info li:hover{border-color: black;}
main .section .info li .flex{flex-direction: column;}
main .section .info li img{}
main .section .info li .subject{margin-top: 15px;font-size: 18px;font-weight: bold;} 



main #page01{}
main #page01 .title .name{color:#000;}
main #page02{height: 670px;  background-image: url(../images/sec2_bg.jpg);}
main #page02.section .title .name{font-size: 42px; color:#fff; text-shadow: 3px 3px 20px rgb(12 39 70 / 80%); font-weight: 100;opacity: 0; transform: translateY(50px); transition: all 1s 0s;}
main #page02.section.view .title .name{opacity: 1; transform: translateY(0px);}


main #page03.section{position: relative; height: 1080px; padding:100px;}
main #page03 .wrap{position: relative; background-size: cover;height: 800px; background-image: url(../images/sec3_bg.jpg); background-repeat: no-repeat; padding: 0; padding:150px 100px 0; width: 100%;}
main .section .hand{position: absolute; right: -50px; opacity: 0;transition: all 1s 1s;}
main .section.view .hand{position: absolute;right: 0;opacity:1;}
main #page03 .wrap > .title{position: relative; z-index: 2;  text-align: left;}
main #page03 .wrap > .title .name{color:#fff;}
main #page03 .wrap > .title .sub{color:#fff;font-size: 24px; font-weight: 200; opacity: .7; text-shadow: 4px 5px 20px rgb(0 0 0 / 90%);}
main #page03 .list{grid-gap:0px;position: absolute;left: 0;bottom:0px;padding-left:220px;}
main #page03 .list li{padding:70px;text-align: left;}
main #page03 .list li .subject{}
main #page03 .list li .name{margin-top: 0;}
main #page03 .list li:first-child{background-color: #216122;background-image: url(../images/sec03_listbg.png);background-position: -150px -30px; background-repeat: no-repeat; }
main #page03 .list li:first-child .subject{color:#fff;}
main #page03 .list li:first-child .button{color:#65b07e;background-color: white;border-color: white;}
main #page03 .list li:first-child .button:hover{color:white;background-color: #65b07e;}

main #page04{background-color: #f3f3f3; margin-top:200px; padding-bottom:150px;}
main #page04.section .con{margin-top:60px;text-align: left; display:grid; grid-template-columns: 55% 1fr;grid-gap: 40px; height: 550px;}
main #page04.section .con .con1{display:grid; grid-template-columns: 1fr 1fr; color: #fff;}
main #page04.section .con .con2{display:grid; grid-template-columns: 1fr 1fr;grid-gap: 20px;}
main #page04.section .con .con1 .con1_b1{background-image: url(../images/sec4_bg1.jpg); background-repeat: no-repeat; background-size: cover;}
main #page04.section .con .con1 .con1_b2{background-image: url(../images/sec4_bg2.jpg); background-repeat: no-repeat; background-size: cover;}
main #page04.section .con .name{font-size: 50px; font-weight: 600; color: #fff;}
main #page04.section .con .con1 .name{margin-top: 20px;}
main #page04.section .con .sub{font-size: 15px; margin-top: 20px;color: #fff;}
main #page04.section .con .btn{margin-top:30px;}
main #page04.section .con .con2 .conbox{border: 8px solid transparent; box-shadow: 3px 3px 10px rgba(0,0,0,0.1); transition: border .5s; background-color: #fff;}
main #page04.section .con .con2 .conbox:hover{border:8px solid #2552ae;}
main #page04.section .con .con2 .name{font-size: 24px; font-weight: 200;color:#555;}
main #page04.section .con .con2 .name span{display: block; font-weight: 600;}
main #page04.section .con .con2 .sub{color:#222;}
main #page04.section .con .conbox {position: relative;}
main #page04.section .con .text{position: absolute;bottom: 50px;left: 50px;}




/* FOOTER */
#footer {position:relative; margin-top: 100px; z-index:50; background:#222}
#footer .topbtn{position: absolute; right:80px; bottom:40px; cursor: pointer; z-index: 2;}
#footer .inner {margin:0 auto; padding:0 20px; width:1460px; max-width:100%}
#footer .inner .footTop {overflow:hidden; padding:70px 0 17px; border-bottom:1px solid #373737}
#footer .inner .footTop .logo {float:left; width:307px; height:38px; text-indent:-9999px; background:url("../images/logo.png") no-repeat 0 0;opacity: 0.4; margin-right:20px;}
#footer .inner .footTop .util{float: left;}
#footer .inner .footTop .util ul {overflow:hidden}
#footer .inner .footTop .util ul li {float:left; padding:0 15px}
#footer .inner .footTop .util ul li a {display:block; line-height:40px;font-weight:200; font-size:15px; color:#fff; letter-spacing:-0.03em; opacity:.6;}
#footer .inner .footTop .util ul li a strong {font-weight:400; color:#fff}
#footer .inner .footBot {position:relative; padding:24px 0 72px; text-align: left;}
#footer .inner .footBot address {overflow:hidden;font-style:normal;}
#footer .inner .footBot address span {float:left; line-height:26px; font-size:14px; color:#83857e}
#footer .inner .footBot address span + span {position:relative; padding-left:10px; margin-left:9px}
#footer .inner .footBot address span + span:before {display:block; content:""; position:absolute; top:7px; left:0; width:1px; height:11px; background:#999}
#footer .inner .footBot .copy {margin-bottom:20px;line-height:26px;font-size:14px;color:#83857e;}


.footerSns {float:right;}
.footerSns li{display:inline-block; margin-left:15px; vertical-align:middle}
.footerSns li:first-child{margin-left:0}
.footerSns li a{display:block; width:35px; height:35px; line-height:35px; text-align:center;}
.footerSns li a i{font-size: 24px; color:#fffa;}


@keyframes spinCircle {
	from {
		transform:translate(-50%, -50%) rotate(0);
	}
	to {
		transform:translate(-50%, -50%) rotate(360deg);
	}
}



/* 팝업관련 */
.dpl { position:absolute; margin:0px; padding:0px; visibility:hidden; background-color: #808080; border:1px solid #333333; overflow:hidden; }
.dpl img { margin:0px; padding:0px; }
.dpl .dplTitle { height:30px; background:#333333; padding: 5px 0; cursor:move; }
.dpl .dplTitle span { font-size:13px; letter-spacing:-1px; color:#FFFFFF; }

.dpl .dplContents { vertical-align:top; padding:0px; margin:0px; overflow:hidden; }

.dpl .dplFooter { height:30px; background:#000000; overflow:hidden; }
.dpl .dplFooter .dplCookieClose { float:left; display:inline-block; height:25px; text-align:left; padding-top:5px; padding-left:10px; overflow:hidden; }
.dpl .dplFooter .dplCookieClose label { font-size:11px; letter-spacing:-1px; color:#FFFFFF; cursor:pointer; }
.dpl .dplFooter .dplClose { float:right; display:inline-block; line-height:23px; text-align:right; padding-top:10px; padding-right:10px; margin-top:-5px; overflow:hidden; }
.dpl .dplFooter .dplClose span { font-size:11px; letter-spacing:-1px; color:#FFFFFF; cursor:pointer; }



@media (max-width:1600px) {

	main .section.view .hand{right:-30px; bottom:50px;}
	main .section.view .hand img{width:70%;}
	
}


@media (max-width:1500px) {
	header #logo{left:20px;}
	header .lang{right: 80px;}
	header .mobile .button{right:20px;}
	header #menu .menu .wrap, header #menu .menuBox .wrap{width:600px;}
	header #menu .pc, header #menu .menuBox .wrap{margin-left:100px;}
	
	main #home .slide .swiper-slide .box,
	main #home .circlew{width:100%;}
    main #home .slide .swiper-slide .box .title{left:20px;}
		main #home .slide .swiper-pagination{width:100%;}
    
	main #page03 .wrap{padding: 100px 100px 0;}
	main #page03.section{height: 1000px; padding:100px 50px;}
	main #page03 .list{padding-left: 140px;}
	main #page03 .list li{padding: 40px;}
	
	main #page04.section .con .text {position: absolute;bottom: 30px;left: 30px;}	
    
    #footer .topbtn{right: 20px;}
	
}

@media (max-width:1400px) {
	
	main .section .wrap{padding:0 20px;}    
    main #home .slide .swiper-slide .box .title .name{font-size: 26px;}
    main #home .slide .swiper-slide .box .title .sub{font-size: 42px;}

		main #home .circle{right:0px;}
    main #home .circle img{width:80%;}
    
    main #page02.section .title .name{font-size: 32px;}
    
    main #page03.section{height: auto;}
    main #page03 .list {position: relative; bottom: auto; left: auto; padding-left:0px; margin-top: -200px;}
    
    main #page04{margin-top: 80px;}
	main #page04.section .con{height: auto; grid-template-columns: 1fr;}
	main #page04.section .con .text{position: relative; bottom:auto; left:auto; padding:80px 30px 50px;}
	
}

@media (max-width:1000px) {
	
header #menu{border: 0px;}
main .section .list{grid-template-columns: 1fr 1fr;	width: 90%;}
main .section .info{grid-template-columns: 1fr;width: 80%;}
main .section .info li{padding: 10px 0;}
main .section .info li .flex{flex-direction: row;justify-content: center;}
main .section .info li .subject{margin-left: 30px;}

main .section .wrap > .title .name{font-size: 42px;}
main .section .hand{display: none;}

main #page02.section .title .name{font-size:24px;}
main #page02.section .title .con img{width:60%;} 
    
main #page03 .wrap {height: auto; padding:60px 60px 200px;}  
main #page03 .wrap > .title .sub{font-size: 18px;}

main #page03 .list{margin-top: -150px;}    
main #page03 .list li{border: 1px solid #eee; margin-top:-1px; margin-left:-1px;}
main #page03 .list li:first-child{border: none;}
    
#footer .inner .footTop .logo,
#footer .inner .footTop .util,
.footerSns{float:none; text-align: left; margin-bottom:10px;}
    
}


@media (max-width:800px) {

main #home .slide .swiper-slide{height: 700px;}
main #home .slide .swiper-slide .box .title .sub {font-size: 30px; }
main #home .circle{width: 220px; height: 220px;}


main .section .list{width: 100%;}
main #page03 .wrap{padding:40px 40px 60px;}
main #page03 .list{ margin-top: 0; margin-left:1px;}


}



@media (max-width:600px) {
header #logo h1{background-size: 240px auto; background-position: left center;}
header .lang { right: 65px;}
main #home .slide .swiper-slide{height: 500px;}
main #home .slide .swiper-slide .box{height: 260px;}
main #home .slide .swiper-slide .box .title .name{font-size: 14px;}
main #home .slide .swiper-slide .box .title .sub{font-size: 30px;}
.circlew{display:none;}

main .section{min-height:auto; padding: 40px 0;}

main .section .wrap > .title .name {font-size:26px;}

main .section .list li .name {font-size: 18px; margin-top: 20px;}
main .section .list li .subject{font-size: 14px; margin-top: 10px;}
main .section .list li .button{margin-top: 20px;}

main #page01.section .list li{padding-bottom:30px;}

main #page02 {height: auto; padding:60px 20px;}
main #page02.section .title .name {font-size: 18px;}



main #page03.section{padding:20px;}
main #page03 .list li {padding: 20px;}
main #page03 .wrap > .title .sub {font-size: 14px;}
main #page03 .list li:first-child{padding:30px 20px;}
main #page03 .list li:first-child img{width:100px;}
main #page04.section .con .con1 .con1_b1, main #page04.section .con .con1 .con1_b2{padding-top:20px;}
main #page04{padding-bottom:100px;}
main #page04.section .con .con1{ grid-template-columns: 1fr;}
main #page04.section .con .text{padding: 20px;}
main #page04.section .con .name {font-size: 34px;}
main #page04.section .con .con2 .name {font-size: 20px;}
main #page04.section .con .sub{font-size: 14px;}



#footer .inner .footBot address span{display:block; float:none; margin:0; padding:0;}
#footer .inner .footBot address span + span{margin:0; padding:0;}
#footer .inner .footBot address span + span:before{display:none;}



}





@media (max-width:480px) {
header #logo h1{background-size: 170px auto;}
header .lang a{ font-size: 13px;  padding: 3px 10px 5px;}

main #home .slide .swiper-slide .box .title .sub {font-size: 24px;}

main .section{padding: 0;}
main #page02 {h padding:40px 20px;}
main #page04.section .con .con2, main #page03 .list, main #page01 .list{ grid-template-columns: 1fr;}
main #page04.section .con {margin-top: 40px;}

#footer .inner .footBot{padding: 24px 0 40px;}
#footer .inner .footTop .util ul li { padding: 0 8px;}
#footer .inner .footBot .copy{font-size: 12px;}
#footer .topbtn{width: 50px;}
}