/*main-slider*/
.home{background-color:#f8f8f8; }
.main-slide{ position:relative; width:100%; height:500px; margin:0 auto;}
.swiper-inner{margin-right:20px; margin:0 auto;}
.swiper-slide{position:relative; margin-top:2rem; text-align:center;}
.swiper-slide img{width: 100%; margin:0 auto;}
.swiper-button-next, .swiper-button-prev{display:none !important; --swiper-theme-color:#fff}
.swiper-button-next:hover, .swiper-button-prev:hover{color:#ccc}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:-50px;}
.swiper-pagination-bullet{background:#999 !important; width:33%; height:10px;}
.swiper-pagination-bullet-active{background:#fff !important}
.swiper-container {width: 100%; height: 100%; overflow: hidden;}
.swiper-slide h2,h3{display:block;}
.swiper-slide h2{color:#fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);}
.swiper-slide h3{font-size:2rem; color:#fff; margin-bottom:3rem;}
.swiper-slide .btn{padding:1rem 3rem; font-size:2rem;}
.swiper-slide .btn:hover{background-color:#2fbac6}
.swiper-slide.bnr1 h2{color:#2fbac6}
.swiper-slide.bnr1 h3{color:#999}
.swiper-slide { text-align: center; font-size: 18px;
/* Center slide text vertically */display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swiper-container .bnr1{background:url(../img/main_img01.png) no-repeat #f3f3f3 center; background-size: cover;}
.swiper-container .bnr2{background:url(../img/main_img02.png) no-repeat #f3f3f3 center; background-size: cover;}
.swiper-container .bnr3{background:url(../img/main_img03.png) no-repeat #f3f3f3 center; background-size: cover;}

.swiper-pointer-events{position:relative; overflow: hidden;}
:root{--swiper-theme-color:#15dff1 !important;}
.bg-video{position:absolute; top:0px; left:0px; width:100%; height:800px; z-index: 1; overflow:hidden;}
.bg-video div.bg{position:absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.3)}
.bg-video video{width:auto; height:500px} 
.swiper-slide div.text{z-index:999}

/*home*/
.home2{padding:5rem 0; background-color:#f8f8f8;}
.home2 div.flex{transform: translateY(300px); opacity: 0;  transition: 0.8s;}
.home2 div.flex div p{font-size:1.8rem; padding:1rem 0 2rem; line-height: 2.6rem;}
.home2 div.flex div li{padding:0.2rem 0; font-size:1.6rem; font-weight:100;font-family: 'Nanum Gothic', sans-serif;}
.home2 div.flex div{padding:2rem 3rem;}
.home2.on div.flex{transform: translateY(0px); opacity: 1;}
.home2 div.flex div.video-area{padding:0rem}
.home2 .video-area video{border-radius: 20px; border:2px solid #204478}

/*secrion*/
section:after{content:""; display:block; clear:both;}
section h2{font-size:3rem; padding:10px; text-align:Center; font-weight:100; color:#000;}
section h3{font-size:2.6rem; padding:0rem 0rem; text-align:Center; color:#204478}
section h4{font-size:2rem; margin-bottom:5px; text-align:Center;}
section h5{font-size:1.4rem; margin-bottom:5px;  text-align:Center;}
section {text-align:Center;}
section span.line{display:inline-block; margin:1rem auto 2rem; width:100px; height:5px; background-color:#2fbac6}

/*section1~3*/
.wrap-bg{ background-size:auto 100%}
.wrap-bg:after{content:""; display:block; clear:both;}
/*section1*/
.section1{padding:2rem 0; width: 100%; background-color:#fff; }
.section1 h5{font-size:1.6rem; color:#999;}
.section1 h3{font-size:2.2rem}
.section1 h3,.section1 p{ transform: translateY(300px);opacity: 0;  transition: 0.8s;}
.section1 div.flex div.box img{width:95px;}
.section1 div.flex{display:block;margin-top:5rem;}
.section1 div.flex div.box {flex-basis:33.3%; border:1px solid #ddd; margin:10px; padding:2rem; text-align:Center; background-color:#fff; transform: translateY(300px);opacity: 0;  transition: 0.8s;}
.section1 div.flex div.box:hover{border:1px solid #204478; box-shadow: 0px 5px 10px #477bc575;}
.section1.on div.flex div.box{transform: translateY(0px);opacity: 1;}
.section1.on h3,
.section1.on p{transform: translateY(0px);opacity: 1;}


/*section2*/
.section2{padding:5rem 0; background-color:#eee;}
.section2 .mySwiper{margin:0 2rem; transform: translateY(300px);opacity: 0; transition: 0.8s;}
.section2.on .mySwiper{transform: translateY(0px);opacity: 1;}
.section2 .swiper-slide{margin-top:3rem;}
.section2 ul.tabs li{flex-basis: 50%; padding:20px 0px; }
.section2_2 ul.flex{flex-wrap: wrap;}
.section2_2 ul.tabs2{margin-top:5rem;}
.section2_2 ul.tabs2 li{padding:20px 0px; }
.section2_2 ul.tabs2 li:nth-child(1){flex-basis: 30%;}
.section2_2 ul.tabs2 li:nth-child(2){flex-basis: 20%;}
.section2_2 ul.tabs2 li:nth-child(3){flex-basis: 50%;}
.section2_2{padding:5rem 0; background-color:#fff;}
.section2_3{padding:5rem 0; background:url(../img/section2_3bg1.png) no-repeat top #fff; background-size:auto 50%;}
.section2_3 h3,.section2_3 h5{color:#fff;}
.section2_3 h5{padding-bottom:2rem;}
.section2 h3,.section2_2 h3,.section2_3 h3{transform: translateY(300px);opacity: 0; transition: 0.8s;}
.section2 ul.tabs,.section2_2 ul.tabs2,.section2_3.on h5{transform: translateY(300px);opacity: 0; transition: 0.9s;}
.section2 .tab-content,.section2_2 .tab-content2,.section2_3 .tab-content2,.section2_3 .swiper{transform: translateY(300px);opacity: 0; transition: 1s;}
.section2.on h3,.section2_2.on h3,.section2_3.on h3,.section2.on ul.tabs,.section2_2.on ul.tabs2,.section2.on .tab-content,.section2_2.on .tab-content2,.section2_3.on h5,.section2_3.on .swiper{transform: translateY(0px);opacity: 1;}
.section2_3 .inner{transform: translateY(300px);opacity: 0; transition: 0.8s;}
.section2_3.on .inner{transform: translateY(0px);opacity: 1;}
#section2_tab1 div.swiper-pointer-events{margin-top:3rem; border:1px solid #ddd;  background-color:#fff;}
#section2_tab3 h4{margin-top:3rem;}
#section2_tab3 ul.flex li{flex-basis: 49%; text-align:Center;}
#section2_tab3 ul.flex li div.box{ border:1px solid #ddd;  margin-top:2rem; }
#section2_tab3 ul.flex a{display:block; text-align:Center;padding-bottom:3rem;}
#section2_tab3 ul.flex a p{color:#333; font-size:2rem}
#section2_tab3 ul.flex a:hover{color:#204478;}
#section2_tab3 ul.flex li div.box:hover{cursor: pointer; border:1px solid #204478; box-shadow: 0px 5px 10px #477bc575;}
#section2_tab3 div.flex {margin-top:2rem;}
#section2_tab3 div.flex div.item{flex-basis: 24%;}
#section2_tab3 div.flex div.item2{margin: 0;flex-basis: 60px; height: 60px; font-size: 1rem; line-height: 5rem; border: 1px solid #2fbac6;box-shadow: 0px 2px 5px #477bc575;border-radius: 140px;}
#section2_tab3 div.flex div.item2 img{width: 50px;margin-top: 0.4rem;}
#section2_tab5 div.flex{border:1px solid #ddd; padding:3rem 0;}
#section2_tab5 div.text-area{flex-basis: 50%;}
#section2_tab5 div.img-area{flex-basis: 45%;}
#section2_tab5 div.img-area img{width:60%;}
#section2_tab5 ul li{font-size:2rem; padding:0.5rem 0; text-align:left}
#section2_tab5 p{font-size:2rem; padding:0px; padding-bottom:2rem;}
#section2_pop1,#section2_pop2,#section2_pop3,#section2_pop4,#section2_pop5{width:300px;}
#section2_pop1 h2,#section2_pop2 h2,#section2_pop3 h2,#section2_pop4 h2,#section2_pop5 h2{font-size:2.4rem;}
#section2_pop1 p,#section2_pop2 p,#section2_pop3 p,#section2_pop4 p,#section2_pop5 p{padding-left:0px;}
#section2_pop1 img,#section2_pop2 img,#section2_pop3 img,#section2_pop4 img,#section2_pop5 img{width:250px; height:auto;}
/*section3*/
.section3{padding:5rem 0; background: #fff; }
.section3 h3{font-size:4rem;color:#000; text-align:center;}
.section3 p{padding-bottom:2rem; color:#333;}
.section3 .modal-popup p.text-left{padding:0px; padding-bottom:2rem;}
.section3 .swiper-slide {background-size: cover; background-position: center; }
.section3 .swiper-slide h3{ margin-bottom:0px; padding-bottom:1rem;}
.section3 .tabs{width:100%; margin:2rem auto;}
.section3 ul.tabs,
.section3 div.tab-content{transform: translateY(300px);opacity: 0;transition: 0.8s;}
.section3.on ul.tabs,
.section3.on div.tab-content{transform: translateY(0px);opacity: 1;}
.section2_3 li{font-size:1.6rem; padding:5px 0; color:#fff;}


/*tab*/
.tab-content{ display: none;  padding: 3rem 1rem;}
.tab-content.current{display: inherit;}
.tab-content div.swiper-slide{margin-top:0;}
.tab-content div.swiper-slide img{border-radius:10px;}
.tabs {display:flex; justify-content: center;}
.tabs li {font-size:1.4rem; cursor: pointer; text-align:center; border:1px solid #ddd; background-color:#fff; border-right:0px;}
.tabs li:last-child{border-right:1px solid #ddd}
.tabs li:hover{color:#204478; border:1px solid #204478}
.tabs li.current{color:#fff; background-color:#204478; border:1px solid #204478}
.tab-content2{ display: none; padding: 3rem 1rem;}
.tab-content2.current{display: inherit;}
.tab-content2 div.swiper-slide{margin-top:0;}
.tab-content2 div.swiper-slide img{border-radius:10px;}
.tabs2 {display:flex; justify-content: center;}
.tabs2 li {font-size:1.4rem; cursor: pointer; text-align:center; border:1px solid #ddd; background-color:#fff; border-right:0px;}
.tabs2 li:last-child{border-right:1px solid #ddd}
.tabs2 li:hover{color:#204478; border:1px solid #204478}
.tabs2 li.current{color:#fff; background-color:#204478; border:1px solid #204478}

/*section4*/
.section4{padding-top:5rem; background-color: #204478;}
.section4 h2{color:#fff}
.section4 div.text-area{padding:3rem;}
.section4 div.text-area a{color:#fff}
.section4 div.text-area p{color:#fff; line-height:3rem; font-size:1.6rem}
.section4 ul li{color:#fff; font-size:1.6rem; padding:0.5rem; text-align:left;}
.section4 ul {padding:2rem;}
.section4.on ul{transform: translateY(0px);opacity: 1;}
.section4 div.flex{ transform: translateY(300px);opacity: 0; transition: 0.8s;}
.section4.on div.flex{transform: translateY(0px); opacity: 1;}
.section4 div.flex div.map{width:100%; height:350px; overflow:hidden;}

/*section5*/
.section5{padding-top:2rem; background:url(../img/section5_bg.png) no-repeat top; background-size:cover;}
.section5 img{transform: translateY(300px);opacity: 0; transition: 0.8s;}
.section5.on img{transform: translateY(0px); opacity: 1;}
.section5_2{padding:2rem 0; background-color:#14081b;}
.section5_2 h3{color:#fff; font-size:3rem; padding-left:2rem}
.section5_2 div.swiper-slide{margin-top:0;}
.section5_2 div.swiper-slide img{margin:3rem auto}

/*section6*/
.section6{padding:2rem 0;text-align:center;}
.section6 img{width:80px;height:auto;}
.section6 h3{font-size:3rem; padding:2rem;}
.section6 p{line-height:2rem; padding-bottom:5rem}
/*btm section*/
.btm-section{background:url(../img/btm_secrion_bg.png) no-repeat bottom; background-size:auto 100%;}
.m_none{display:none !important}
.pc_none{display:block !important}

footer{text-align:Center;padding:5rem;}
footer p{padding-top:2rem; line-height:2rem;}
footer div.btm-line{padding:1rem 0rem 2rem; border-bottom:1px solid #ddd}
footer div.btm-line a{font-size:1.6rem; color:#333;}
footer div.btm-line a:hover{color:#15dff1;}
footer div.flex{display:block}
footer div.flex div{padding-left:1rem;}
footer div.flex div.text-right{text-align:left; padding-top:10px;}

.section2_tab1_content{display:flex; justify-content: space-between; flex-wrap: wrap;}
.section2_tab1_content li{flex-basis: 49% !important;padding:0px !important;}
.section2_tab1_content li a{display:block; color:#000;  font-weight:bold; margin-bottom:0.5rem; padding:1rem 0; height:120px; background-color:#fff; border:1px solid #ddd;}
.section2_tab1_content li a p{font-family:'NEXON Lv1 Gothic OTF', 'Noto Sans KR';}
.section2_tab1_content li a div.img{width:60% !important; margin:0 auto}
.section2_tab1_content li a:hover{color:#1e5096;border:1px solid #1e5096; box-shadow:0 1px 5px #0a54bd91}

.btn_youtube{font-size:1.6rem; color:#000; border-radius: 3px; padding:0.5rem 2rem; border:1px solid #ddd;}
.btn_youtube:hover{background-color:#eee;}
.btn_youtube img{width:120px; vertical-align: middle;}

@media screen and (min-width:1200px){
	.pc_none{display:none !important}
	.m_none{display:block !important}
	.swiper-inner{width:100%}
	/*main-slider*/
	.home{background-size:auto 100%;}
	.main-slide{padding-top:80px; height:800px;}
	.swiper-slide{margin-top:0; text-align:center;}
	.swiper-slide h2{font-size:8rem;}
	.swiper-slide h3{font-size:3rem;}

	.swiper-slide img{width: 100%; margin:0 auto; border-radius: 20px;}
	.swiper-button-next, .swiper-button-prev{display:block !important; color:#204478 !important; }
	.swiper-button-next:hover, .swiper-button-prev:hover{display:block !important;color:#15dff1 !important; }
	/*home2*/
	.home2 h2{padding-bottom:5rem}
	.home2 div.flex{padding:10rem 0 10rem; display:flex; padding:0 0 10rem; align-items: stretch;  justify-content: space-evenly; flex-wrap:wrap; }
	.home2 div.flex div{flex-basis:45%; text-align: left; padding:4rem; padding:0}
	.video-area{padding-bottom:1rem}
	/*section1~3*/
	.wrap-bg{background-size:100% auto}
	section h2{margin-top:5rem; font-size:5rem; background-position: center; background-size:50% auto;}
	section h3{font-size:4rem;padding:2rem 0rem;}
	section h4{font-size:3rem;}
	section h5{font-size:2rem;}
	section p{font-size:1.6rem; margin-top:1rem; line-height:2.6rem;}
	

	/*section1*/
	.section1{padding:6rem 0;}
	.section1 ul li{flex-basis:30%; margin-bottom:30px}
	.section1 ul li div.box{ padding:40px 10px;}
	.section1 ul li div.box:hover{border:1px solid #204478}
	.section1 div.flex{display:flex; justify-content: space-between;}
	.section1 div.flex div.left{flex-basis: 38%;}
	.section1 div.flex ul.right{flex-basis: 72%;}
	.section1 div.flex ul.right li{width:50%; float:left; margin:0px;}
	.section1 div.flex div.box {padding:0rem;}
	.section1 div.flex div.box img{width:120px;}
	/*section2*/
	.section2{padding:6rem 0;}
	.section2 ul li{flex-basis: 50%; padding:20px 0px; }
	.section2 .swiper-slide{margin-top:7rem;}
	.section2 .swiper-slide img,
	.section2_2 .swiper-slide img,
	.section2_3 .swiper-slide img{ display: block; width: 90%;}
	.section2_3{ background-size:100%;}
	.section2_3 li{font-size:1.6rem; padding:5px 0; color:#fff;}
	#section2_tab3 div.flex div.item2{margin:3rem 0; flex-basis: 140px; height:140px; font-size:1.6rem; line-height:1.5rem; border:1px solid #2fbac6; box-shadow: 0px 2px 5px #477bc575; border-radius: 140px;}
	#section2_tab3 div.flex div.item2 img{width:80px; margin-top:1rem;}

	/*section3*/
	.section3{padding:5rem 0;}
	.section3 div.form-box-wrap{margin-top:6rem; }
	.section3 div.swiper { width: 100%;padding-bottom: 50px; }
	.section3 div.swiper-slide { background-position: center; background-size: cover;}
	.section3 div.swiper-slide img { display: block; width: 80%;}
	.section3 .swiper-slide h3{ margin-bottom:0px; padding-bottom:1rem;}
	

	/*section4*/
	.section4{padding-top:10rem;}
	.section4 div.map{flex-basis: 50%;}
	.section4 div.form-area{flex-basis: 48%; padding-left:2rem;}
	.section4 div.flex{ flex-wrap: wrap;} 
	.section4 div.flex div.map{width:100%; height:500px;}
	.section4 ul {padding:0;}
	
	/*tab*/
	.tabs li {flex-basis: 25%; font-size:2rem;}
	.tabs2 li {flex-basis: 25%; font-size:2rem;}
	/*btm section*/
	.btm-section{background-size:100% auto;}
	.swiper-slide .btn{padding:2rem 3rem; font-size:3rem;}
	footer div.flex{display:flex;}
    footer div.flex div.text-right{text-align:left; padding-top:0px;}

	.section2_tab1_content{display:flex; justify-content: space-between; flex-wrap: wrap;}
	.section2_tab1_content li{flex-basis: 33% !important; padding:1rem;}
	.section2_tab1_content li a{display:block; height:250px; padding-top:1rem; background-color:#fff; border:1px solid #ddd;}
	.section2_tab1_content li a:hover{border:1px solid #1e5096; box-shadow:0 0 0 #0a54bd91}
}