@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
* {
    padding:0;
    margin:0;
    list-style:none;
    text-decoration:none;
}
.clearfix {
    display:block;
    clear:both;
}
.background {
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}


#main {
    width:100%;
    overflow:hidden;
}
.sec {
    width:100%;
    position:relative;
}
.slick-arrow{
    cursor: pointer;
}
.slick-list,
.slick-track{
    width:100%;height: 100%;
}
.slick-slide{
    position: relative;
}


#main .banner {
    width:100%;height:900px;
    position:relative;
}
#main .banner div {
    width:100%;height:100%;
}
#main .banner .bn {
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
#main .banner .bn::before {
    content:'';
    position:absolute;
    top:0;left:0; background-color:rgba(0, 0, 0, 0.3);
    width:100%;height:100%;
    z-index:1;
}
#main .banner .bn01 {
    background-image:url('../img/mainSlide1.png');
}
#main .banner .bn02 {
    background-image:url('../img/mainSlide2.jpg');
}
#main .banner .bn03 {
    background-image:url('../img/mainSlide3.jpg');
}
#main .banner .textBox {
    width:80%;
    height:100%;
    margin:0 auto;
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
	text-align:center;
	padding-bottom:15%;
    justify-content:end;
}
#main .banner  h1 {font-family:'Noto Serif KR'; font-weight:400;}
#main .banner  p { opacity:0.5;}
@keyframes mainActive01 {
    0% {transform:translateY(-30px);}
    100% {transform:translateY(0px);}
}
@keyframes mainActive02 {
    0% {transform:translateY(30px);}
    100% {transform:translateY(0px);}
}
#main .banner .textBox h1 {
   font-family:'Noto Serif KR'; font-weight:400; font-size:58px;
    line-height:1.1;
    color:#fff;
    overflow:hidden;
}
#main .banner .slick-active h1 {
    animation-name:mainActive01;
    animation-duration:0.6s;
}
#main .banner .textBox p {
	opacity:0.5;
    margin:35px 0 40px 0;
    font-family: 'Noto Sans KR';
    font-size:30px;
    font-weight:400;
    line-height:1.1;
    color:#fff;
    overflow:hidden;
}
#main .banner .slick-active .textBox p {
    animation-name:mainActive02;
    animation-duration:0.6s;
}
#main .banner .textBox a {
    display:block;
    width:200px;
    height:50px; line-height:50px;
    border:1px solid #fff;
    background-color:transparent;
    box-sizing:border-box;
    text-align:center;
    font-size:16px;
    font-weight:500;color:#fff;
    transition:all 0.6s;
}
#main .banner .textBox a:hover {
    box-shadow: 0 80px 0 0 rgba(0, 0, 0, 0.25) inset, 0 -80px 0 0 rgba(0, 66, 191, 0.747) inset;
    color: #fff;
    border: 1px solid transparent;
}
#main .banner .mainArrow {
    width:auto;
    height: auto;
    position:absolute;
    top: auto;
    bottom: 10%;
    left:50%; transform:translateX(-50%);
}
#main .banner .arrowBox {
    display:flex;
    flex-direction:row;
    align-items:center;
    margin-bottom:10px;
}
#main .banner .arrowBox li:nth-child(1) {
    margin-right:10px;
}
#main .banner .arrowBox .bnArrow{
    display: block;
    width:40px;
    height:40px;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height:40px;
    cursor: pointer;
    transition:all 0.6s;
}
#main .banner .arrowBox .bnArrow:hover {
    background-color:rgba(210, 105, 30, 0.5);
    border:none;
}
#main .banner .arrowBox .bnArrow i {
    font-size:1.2em;
    color:#fff;
}
#main .banner .slides-numbers {
    width:90px;
    margin-top:10px;
    text-align:center;
    font-size:1.2em;
    font-weight:400;color:#fff;
    display:inline-block;
}
#main .banner .slides-numbers .total {
    opacity:0.8;
}
@keyframes title{
    from{
        opacity: 0;
        transform: translateY(50px);
    }
    to{
        opacity: 3;
        transform: none;
    }
}
.main-title dd{
    color:#fff;
    font-size: 20px;
    opacity: 0;
}
.main-controll{
    width:200px;height: 50px;
    margin-top:50px;
    position: absolute;
    top:55%;;left:50%;transform: translate(-50%,-50%);
    display: flex;align-items: center;
    justify-content: space-between;
}
.main-controll .slick-arrow{
    color:#fff;
    font-size: 40px;;
}
.main-dots{
    position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);
    display: flex;
    width:65px;
    align-items: center;
    justify-content: space-around;
}
.main-controll button{
    border:none;
    font-size: 0;
    background-color: #ddd;
    width:23px;height: 8px;
    border-radius: 10px;
}
.main-controll .slick-active button{
    background-color: #fff;
}

@media screen and (max-width:1240px) {
    .site-map{
        display: none;
    }
    #main .banner {
        height:600px;
    }
    #main .banner .bn {
        padding:0 20px;
    }
    #main .banner .mainArrow {
        width:100%;
        left:0px;
        transform:none;
    }
    #main .banner .arrowBox {
        top:0;
        left:0px;
        right:0;
        transform:none;
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items:center;
    }
    #main .banner .arrowBox li {
        float:left;
    }
    #main .banner .arrowBox li:nth-child(1) {
        margin-bottom:0;
        margin-right:10px;
    }
    #main .banner .arrowBox li:nth-child(2) {
        margin-bottom:0;
    }
    #main .banner .slides-numbers {
        text-align:center;
        margin:0 auto;
    }
    #main .banner .textBox {
        width:100%;
        align-items:center;
		padding-bottom:20%;
    }
    #main .banner .textBox h1 {
        font-size:2.5em;
        text-align:center;
    }
    #main .banner .textBox p {
        font-size:1.2em;
    }
    #main .banner .arrowBox .bnArrow {
        width:55px;
        height:55px;
        line-height:50px;
    }
    #main .banner .textBox a {
        width:180px;height:45px; line-height:45px;
    }
}
@media screen and (max-width:700px) {
	
	#mainSec .mainTitle {font-size:35px !important}
	#main .banner .textBox {padding-bottom:40%;}
    .main-title dt{
        font-size: 45px;
		
    }
	#mainSec .sec1200{width:100% !important; }
	.location .mapInfo ol {width:90% !important; margin:0 auto !important;}
	.location .mapInfo ol li {width:100% !important; font-size:15px !important; }
	.location .mapInfo ol li .mapT {font-size:15px !important; margin:0 20px 0 5px; color:#000; font-weight:800; display:inline-block; width:100px;}
	.location .mapInfo ol li .mapST {font-size:25px !important; }

}

 



/* 메인*/
 
.swiper {width:100%; height:900px; position:relative;}
.slide1 {background: url("../img/mainSlide1.png") no-repeat center / cover; height:520px; text-align: center;  display:flex; }
.slide1 .slideTxt { position:absolute; top:60%; left:50%; transform:translate(-50%, -50%);}
.slide1 .slideTxt .mT1 {font-size:58px; font-family:'Noto Serif KR';  color:#fff; text-align:center;}
.slide1 .slideTxt .mT2 {font-size:30px; color:#acabaa; text-align:center;}

#mainSec {width: 100%; position:relative; padding:75px 0 75px 0 ;}
#mainSec .mainTitle {text-align: center; font-size:46px; font-weight:800; margin-bottom:60px;}
.inner_wrap{ max-width:1200px;   height: auto; position: relative; margin: 0 auto; z-index: 101; }
#mainSec .sec1200 {width:32%; margin-right:2%; height:540px; text-align:left; padding-left:20px; float:left;}
#mainSec .txt_wrap {padding-top:320px; text-transform:uppercase;}
#mainSec .title1 {font-size:32px; color:#d3a937; font-weight:800;  }
#mainSec .title2 {font-size:24px; color:#fff; font-weight:600;}
#mainSec .title3 {font-size:28px; color:#fff; font-weight:800; margin-top:70px;}
#mainSec .btnMoreW {  text-align:left; margin-top:20px;font-size:16px; color:#fff; border-radius:22px; width:150px; border:3px solid #fff; line-height:44px; height:44px; text-indent:20px}
#mainSec .btnMoreW:hover {background:#fff; color:#000;}
#mainSec .btnMoreW .btnI { width:8px; height:14px; background: url("../img/arrow.png") no-repeat center / cover;  margin:15px 20px 15px 0; float:right; display:inline-block;}
#mainSec .sec1 {background: url("../img/program1.png") no-repeat center / cover; }
#mainSec .sec2 {background: url("../img/program2.png") no-repeat center / cover; }
#mainSec .sec3 {background: url("../img/program3.png") no-repeat center / cover; margin-right:0;   }
#mainSec::after {content:""; clear:both; display:block;}

#mainSec .sec100 {background: url("../img/programbg.png") no-repeat center / cover; height:520px; text-align: center; }
#mainSec .sec100 .txt_wrap {padding-top:10% ; }
#mainSec .sec100 .btnMoreW {margin:20px  auto;}

.location .mapInfo ol { width:100%; border-bottom:1px solid #d4d4d4; line-height:200%; padding:30px 0 30px 0; list-style:none; }
.location .mapInfo ol::after {content:""; clear:both; display:block;}
.location .mapInfo ol li {width:50%; float:left; font-size:22px;  color:#d3a937; font-weight:600; line-height:35px; letter-spacing:-2px;}
.location .mapInfo ol li .mapT {font-size:20px; margin:0 20px 0 5px; color:#000; font-weight:800; display:inline-block; width:100px;}
.location .mapInfo ol li .mapST {font-size:38px; }

.mapMarker { padding:5px; text-align:center; font-size:12px; border-radius:10px;}