@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');



@keyframes ball-y {
    0% { -webkit-transform: translateY(-10%); -webkit-animation-timing-function: ease-in; }
    28% { -webkit-transform: translateY(-10%); -webkit-animation-timing-function: ease-in; }
    56% { -webkit-transform: translateY(-10%); -webkit-animation-timing-function: ease-in; }
    84% { -webkit-transform: translateY(-10%); -webkit-animation-timing-function: ease-in; }
    14%, 42%, 75% , 100% { -webkit-transform: translateY(0px); -webkit-animation-timing-function: ease-out; }
}

@keyframes scale {
    0%  {opacity: 0.7;}
    25% {opacity: 0.6;}
    50% {opacity: 0.5;}
    75% {opacity: 0.6;}
    100% {opacity: 0.7;}
}

@keyframes bounce {
    0% {opacity: 0;transform: translateY(-100px);}
    50% {opacity: 1; transform: translateY(10px);}
    80% {transform: translateY(-10px);}
    100% {transform: translateY(0);}
}
@keyframes bounce2 {
	0% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
	50% {top: 140px;
		height: 140px;
		-webkit-animation-timing-function: ease-out;
	}
	55% {top: 160px; height: 120px; 
		-webkit-animation-timing-function: ease-in;}
	65% {top: 120px; height: 140px; 
		-webkit-animation-timing-function: ease-out;}
	95% {
		top: 0;		
		-webkit-animation-timing-function: ease-in;
	}
	100% {top: 0;
		-webkit-animation-timing-function: ease-in;
	}
}
@keyframes pulsate {
    0% {
      transform: scale(0.1, 0.1);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1.2, 1.2);
      opacity: 0;
    }
  }
@keyframes balloon1 {
    0%,100%{ transform:translateY(0) rotate(-6deg);}
    50%{ transform:translateY(-20px) rotate(8deg); }
}
@keyframes balloon2 {
    0%,100%{ transform:translateY(0) rotate(6deg);}
    50%{ transform:translateY(-30px) rotate(-8deg); }
}
@keyframes balloon3 {
    0%,100%{ transform:translate(0, -10px) rotate(6deg);}
    50%{ transform:translate(-20px, 30px) rotate(-8deg); }
}
@keyframes balloon4 {
    0%{transform: rotate(0deg);}
    50%{transform: rotate(-2deg);}
    100%{transform: rotate(0deg);}
}

* {margin: 0; padding: 0; list-style-type: none; box-sizing: border-box;}
html {position: relative; width: 100%; height: 100%; overflow-x: hidden;}
body {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; font-family: 'Open Sans', 'Noto Sans KR', sans-serif; }
a {text-decoration: none; color: #333;}
button {border: none; background-color: transparent;}

i {font-style: normal;}



.ff-jalnan {font-family: 'yg-jalnan'!important;}
.ff-godo { font-family: 'Godo'!important;}
.ff-osans { font-family: 'Open Sans'!important;}
.ff-noto{ font-family:'Noto Sans KR'!important;}



/* mobile first */
.wrap {position: relative; width: 100%;}
.text-skyblue {color: #118ad9 !important;}
.text-green{color: #6fae0e !important; font-weight:800;}
.text-blue{color: #00397f !important;  font-weight:800;}







/* section.se01 */
.main-slider {position: absolute !important; width: 100%; height: 75%; z-index:1 !important; top:0 !important;overflow: hidden;}

.main-slider .swiper1 { top: 0; left: 0; width: 100%; overflow: hidden;}
.main-slider .swiper1 .main_img {top: 50px; right: -40px; display: block; width: 140%; transition: 5s;}
.main-slider .swiper1 .swiper-slide-active img {transform: scale(0.95);}  

.main-slider .swiper2 {position: absolute; top: 0; left: 5%; width: 90%; margin-top: 180px; padding-bottom: 25px; z-index: 1; line-height: 1.3;}
.swiper-wrapper{position: relative;}
.swiper-wrapper .fade_logo{
       z-index: 99999;
    position: absolute;
    top: 23%;
    right: 8.4%;
    width: 28%;
    transition: all .4s;
    animation: fade 4.8s infinite
}
@keyframes fade{
    0%{opacity: 1}
    100%{opacity: 0; transform: scale(0.94)}
}
/*.btn-stop {width: 10px; height: 10px; background: url(/portal/img/main/icon-stop.svg) no-repeat center; cursor:pointer;}
.btn-stop.on {background-image: url(/portal/img/main/icon-play.svg);}
*/
.swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite 
{top: auto; bottom:0; left: 45%; width: 55%; height: 8px; border-radius: 60px; background: #e5e5e5; transform: translateX(-50%); overflow: hidden;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #118ad9; border-radius: 60px;}
.swiper-pagination2 {display: none;}
.slider-num {position: absolute; bottom: 11px; left: 45%; width: 67%; font-size: 1.4rem; font-weight: 600; transform: translateX(-50%);}
.slider-num .number-left {position: absolute; left: 0;}
.slider-num .number-right {position: absolute; right: 0;}

.m_contA {margin:-1px 0px 0 0;position: absolute !important; width:100%;  padding-top:180px;z-index:100 !important;background: url(/img/main/m_cover.png) no-repeat center 35px;background-size:100%; }
	.m_container {position:relative; margin:0 auto;  max-width:1380px; width:100%;  padding:0 10px 0 10px; overflow: hidden;}
	.m_container_s{position: relative;  width:43%;  }
	.m_slogan {}
	.m_slogan h3 {font-size:2em;font-weight: 700; text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}

	
	.m_search_cont{position: relative;  margin-top:40px;width:100%; }
	.m_search_cont .search-wrap{padding:15px 0px 0 0;width:100%; }
	.m_search_cont .search-wrap .search-text {padding:0 80px 0 0px;   float:left;}
	.m_mn_ser01_wrap {float:left; width:100%;  overflow:hidden;  height:70px;}
	.m_mn_ser02_wrap { float:left; width:100%;   height:70px;}
	.m_search_cont .search-text .form-control { background: #f5f5f5; height:60px; width:100%;}
	.m_search_cont #searchForm + .search-btn {margin-top:0;}
	.m_search_cont  .search-btn + #searchForm {}
	.m_search_cont #searchForm +  .search-btn {}
	.m_search_cont .m_mn_ser01 {padding:0 80px 0 0px; width:100%; float:left;}
	.m_search_cont .m_mn_ser01 ul {width:100%;  float:left;}
	.m_search_cont .m_mn_ser01 ul li {float:left; width:25%;}
	.m_search_cont .m_mn_ser01 ul li select {width:95%;}
	.m_search_cont #ssido, .m_search_cont #sgu, .m_search_cont #stype, .m_search_cont #spro { background: #f5f5f5; box-shadow:none; width:calc(95.9%);font-size: 1.6rem;}
	.m_search_cont .m_mn_ser01 select{margin-right:3px;}
	.m_search_cont .m_mn_ser01 + .search-btn { position: relative; right:5px; top:-60px;}
	.m_mn_ser02_wrap .search-btn { position: relative; right:5px; top:-60px;}

	.search-list {position: relative;  margin-top:40px;width:100%; height:150px; box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.2); border-radius: 10px;}
	.m_search-list_btn {top: 20%; }
	.search-list .swiper-button-next:after, .search-list.pc .swiper-button-prev:after{display:none; width:0; height:0;}
	.search-list .swiper-button-next {top: 20%; left:50%; margin-left:20px; width: 40px; height: 40px; background: #fff url('/img/common/right-arrow-b.svg') no-repeat center/70%;  transition: 0.4s;}
	.search-list .swiper-button-prev {top: 20%; left:50%; margin-left:-40px;width: 40px; height: 40px; background: #fff url('/img/common/left-arrow-b.svg') no-repeat center/70%;  transition: 0.4s;}
	.search-list.pc   .swiper-container, .m_ad_info_img {height: 140px; line-height: 15; text-align:center; overflow:hidden;}
	.m_ad_info_img img{vertical-align:top; height:auto; width:85%; max-width:400px;margin-top:35px;}

	.main-scroll {display: block;position:relative; left: 50%;transform: translateX(-50%);width: 100%;height: 100px; text-align: center; margin-top:50px;  }
	.main-scroll ul{display:block; width:100%; }
	.main-scroll li{display:inline-block;}
	.banner-slider {width:100%; margin:0;     background: #fff; }
	.banner-slider div{width:auto; min-width:40px; text-align:center;}
	.banner-slider img{width:auto;}
	.inner {width: 1200px; margin: 0 auto;overflow:hidden;}
	.header .top-bar {transition: 0.3s;}
    .header.on .top-bar {transform: translateY(-100%);}

	.area-detail {width:100%;}
    .banner-link-group {padding: 10px 30px; background: #fff; border:1px solid #000; }
    .banner-slider img {display: block; width: auto; height: auto; margin:0 auto;}
    .banner-button-next, .banner-button-prev {margin-top:-40px; width: 40px; height: 40px; background: #fff url('/img/common/left-arrow-b.svg') no-repeat center/70%; border-radius: 7px; box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.2); transition: 0.4s;}
    .banner-button-next {background-image: url('/img/common/right-arrow-b.svg'); right:3px;}
	.banner-button-prev {left:3px; }
    .banner-button-next:after, .banner-button-prev:after {content: none;}
    .banner-button-next:hover, .banner-button-next:active, 
	.banner-button-next:focus {background-color: #061e2d; background-image: url('/img/common/right-arrow.svg');}
    .banner-button-prev:hover, .banner-button-prev:active, 
	.banner-button-prev:focus {background-color: #061e2d; background-image:url('/img/common/left-arrow.svg');}



@media screen and (max-width: 900px){
	.wrap {margin-top:10px; }
	.m_contA { padding-top:120px;z-index:100 !important;background: url(/img/main/m_cover.png) no-repeat center 80px;background-size:100%; margin-top:-30px;}
	.m_container {position:relative; margin:0 auto;  max-width:900px; width:100%; padding:0 10px 0 10px;}
	.m_container_s{position: relative;  width:90%;  margin:0 auto;}
	.m_slogan {}
	.m_slogan h3 {font-size:1.3em;font-weight:700;}
	
	.m_search_cont{position: relative;  margin-top:30px;width:100%; }
	.m_search_cont .search-wrap{padding:15px 0px 0 0;width:100%; }
	.m_search_cont .search-wrap .search-text {padding:10px 0px 7px 0px;   float:none;}
	.m_mn_ser01_wrap {float:none; width:100%;  overflow:hidden;  height:auto;}
	.m_mn_ser02_wrap { float:none; width:100%;   height:auto;}
	.m_search_cont .search-text .form-control { background: #f5f5f5; height:60px; width:100%;}
	.m_search_cont #searchForm + .search-btn {margin-top:0;}
	.m_search_cont  .search-btn + #searchForm {}
	.m_search_cont #searchForm +  .search-btn {}
	.m_search_cont .m_mn_ser01 {padding:0 0px 0 0px; width:100%; float:none}
	.m_search_cont .m_mn_ser01 ul {width:100%;  float:none;}
	.m_search_cont .m_mn_ser01 ul li {float:none; width:100%;padding-bottom:5px;}
	.m_search_cont .m_mn_ser01 ul li select {width:100%;}
	.m_search_cont #ssido, .m_search_cont #sgu, .m_search_cont #stype, .m_search_cont #spro { background: #f5f5f5; box-shadow:none; width:calc(100%);font-size: 1.6rem;}
	.m_search_cont .m_mn_ser01 select{margin-right:3px;}
	.m_search_cont .m_mn_ser01 + .search-btn { position: relative; right:0px; top:0px;}
	.m_mn_ser02_wrap .search-btn { position: relative; right:0px; top:0px; }
	.m_mn_ser01_wrap #btnSearch{  color:#fff; background:#8fc43d; padding: 0rem 0.75rem;     line-height: 1.8; font-size: 1.9em;  width:100%; height:50px;}

	
	.main-scroll {display: block;position:relative; left: 50%;transform: translateX(-50%);width: 100%;height: 100px; text-align: center; margin-top:50px;  }
	.main-scroll ul{display:block; width:100%; }
	.main-scroll li{display:inline-block;}
	.banner-slider {width:100%; margin:0;     background: #fff; }
	.banner-slider div{width:auto; min-width:40px; text-align:center;}
	.banner-slider img{width:auto;}
	.inner {width:90%; margin: 0 auto;overflow:hidden;}
	.header .top-bar {transition: 0.3s;}
    .header.on .top-bar {transform: translateY(-100%);}

	.area-detail {width:100%;}
    .banner-link-group {padding: 10px 30px; background: #fff; border:1px solid #000; }
    .banner-slider img {display: block; width: auto; height: auto; margin:0 auto;}
    .banner-button-next, .banner-button-prev {margin-top:-20px; width: 40px; height: 40px; background: #fff url('/img/common/left-arrow-b.svg') no-repeat center/70%; border-radius: 7px; box-shadow: -1px 1px 5px 1px rgba(0,0,0,0.2); transition: 0.4s;}
    .banner-button-next {background-image: url('/img/common/right-arrow-b.svg'); right:3px;}
	.banner-button-prev {left:3px; }
    .banner-button-next:after, .banner-button-prev:after {content: none;}
    .banner-button-next:hover, .banner-button-next:active, 
	.banner-button-next:focus {background-color: #061e2d; background-image: url('/img/common/right-arrow.svg');}
    .banner-button-prev:hover, .banner-button-prev:active, 
	.banner-button-prev:focus {background-color: #061e2d; background-image:url('/img/common/left-arrow.svg');}



	.banner-slider{position:relative;}
    .pc {display: block;  margin: 0 auto;}
    .nav {display: none;}


}



/