/* reset swiper css */
.swiper-pagination {
  position: static;
  text-align: left;
  transition: none;
  transform: none;
  z-index: 1;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0;
  left: 0;
  width: auto;
}
.swiper-container{
  overflow: inherit;
}
.swiper-container-css-mode > .swiper-wrapper{scrollbar-width: none;}
.swiper-button-next, .swiper-button-prev{display: none;}

#main b{font-family: 'NEXON Lv1 Gothic OTF Bold'; vertical-align: baseline;}
#main #mv{height: 925px; margin-bottom: 120px; position: relative;}
#main #mv .swiper-container{height: 100%;}
#main #mv .swiper-container .swiper-wrapper{overflow: hidden;}
#main #mv .swiper-container .swiper-slide{background-repeat: no-repeat; background-size: cover;}
#main #mv .swiper-container .s01{background-image: url(../img/mv01.jpg)}
#main #mv .swiper-container .s02{background-image: url(../img/mv02.jpg)}
#main #mv .txt-wrap{position: absolute; transform: translateY(-50%); top: 50%; left: 150px; color: #fff;}
#main #mv .txt-wrap .tit{font-size: 40px; line-height: 1.2;}
#main #mv .txt-wrap .tit span{font-size: 24px; margin:15px 0 50px 0; display: block;}
#main #mv .txt-wrap p{font-size:16px; line-height: 1.2; font-family: 'NEXON Lv1 Gothic OTF Light';}
#main #mv .slide-utill-wrap{position: absolute; left: -50px; bottom: 100px;background-color: #fff; z-index: 10;}
#main #mv .slide-utill-wrap > div{display: inline-block; padding: 30px;}
#main #mv .slide-utill-wrap .swiper-pagination{background-color: #2b2c5c; color: #fff; font-weight: lighter;}
#main #mv .slide-utill-wrap .swiper-pagination .swiper-pagination-current{color: #fff33f; font-size: 20px; font-weight: bold;}
#main #mv .slide-utill-wrap .swiper-pagination .swiper-progress{margin: 0 3px;}
#main #mv .slide-utill-wrap .btn-wrap span{cursor: pointer;} 
#main #mv .slide-utill-wrap .btn-wrap .swiper-prev{background: url(../img/mv_prev.jpg)no-repeat left center;padding: 4px 0 2px 32px;}
#main #mv .slide-utill-wrap .btn-wrap .swiper-next{background: url(../img/mv_next.jpg)no-repeat right center;padding: 4px 32px 2px 0;}
#main #mv .slide-utill-wrap .btn-wrap .swiper-pause,
#main #mv .slide-utill-wrap .btn-wrap .swiper-play{color: rgba(245,255,255,0); width: 34px; height: 28px; display: inline-block}
#main #mv .slide-utill-wrap .btn-wrap .swiper-pause{background: url(../img/mv_pause.jpg)no-repeat center;}
#main #mv .slide-utill-wrap .btn-wrap .swiper-play{background: url(../img/mv_play.jpg)no-repeat center; display: none;}

#main #content{padding: 0 60px 300px 80px; position: relative;}
#main #content .move-element{position: absolute;}
#main #content .move-element01{width: 75px;height: 100px; background-image: url(../img/element.png);top:1000px; left: 80px;}
#main #content .move-element02{width: 72px;height: 67px; background-image: url(../img/element02.png); top: 200px; right: 100px;}

#main #content h2 span{background: url(../img/main_content_h2_icon.jpg)no-repeat; width: 34px; height: 135px; display: inline-block;}
#main #content h2{display: none;margin-bottom: 50px;}
#main #content h2 div{display: inline-block; font-size: 40px; color: #999; line-height: 1; margin-left: 10px;}
#main #content h2 div b{color: #000;}

#main .article{display: block; text-align: right;float: left; width: calc(33.333% - 130px); margin: 0 65px 0px 65px; height: 650px;}
#main .article .img-wrap{border-radius: 0 0 0 50px; margin-bottom: 30px; width: 100%;overflow: hidden; position: relative;;width: 100%; padding-top: 120%;background-size: cover; background-position: center;}
#main .article .img-wrap::before{position: absolute;width: 100%;height: 100%;border: 0px solid #385dbf;content: '';top: 0;left: 0;border-radius: 0 0 0 50px; transition: 0.3s;}
#main .article:hover .img-wrap::before{border: 20px solid #385dbf}
#main .article .sub-txt{margin-bottom: 10px;}
#main .article .sub-txt span{display: inline-block;border: 2px solid #000; color: #000; text-align: center;padding: 5px 10px 2px 10px; border-radius: 15px; position: relative;}
#main .article .sub-txt span::before{position: absolute; content: ""; display: block; background-color: #fff;width: 6px; height: 6px; right: 15px; bottom: -5px;}
#main .article .tit{color: #444e98; text-decoration: underline; margin-bottom: 15px;font-family: 'GmarketSansMedium';}
#main .article p{font-size: 21px; position: relative; display: inline-block;font-family: 'GmarketSansMedium';}
#main .article p b{font-family: 'GmarketSansBold';}
#main .article:hover p{color: #2541a7;}
#main .article p::before{content: '';position: absolute;display: block;background-color: #f9ff9b; height: 12px;width: 0%;z-index: -1;transform: translateY(12px); transition: 0.3s;}
#main .article:hover p::before{width: 100%;}

#main .article01 .img-wrap{background-image: url(../img/main-sec-img01.jpg)}
#main .article02 .img-wrap{background-image: url(../img/main-sec-img02.jpg)}
#main .article03 .img-wrap{background-image: url(../img/main-sec-img03.jpg)}
#main .article04 .img-wrap{background-image: url(../img/main-sec-img04.jpg)}
#main .article05 .img-wrap{background-image: url(../img/main-sec-img05.jpg)}
#main .article06 .img-wrap{background-image: url(../img/main-sec-img06.jpg)}
#main .article02 {transform: translateY(74px);} 
#main .article03 {transform: translateY(-30px);}
#main .article05 {transform: translateY(100px);}
#main .article06 {transform: translateY(30px)}

@media (max-width: 1500px){
    #main .article {margin-bottom: 60px;width: calc(33.333% - 80px);margin: 0 40px 80px 40px; height: 600px;}
    #main #content {padding: 0 30px 200px 50px;}
}

@media (max-width: 1200px){ 
  #main #mv {height: 700px; margin-bottom: 100px;}
  #main #mv .txt-wrap{left: 50px; top: 55%;}
  #main #mv .slide-utill-wrap{right: 0;left: auto;bottom: 0;}
  #main #mv .txt-wrap .tit{font-size: 35px;}
  #main #content {padding: 0 30px 200px 30px;}
  #main .article {width: calc(33.333% - 40px) ;margin: 0 20px 0px 20px; height: 570px;}
  #main .article p{font-size: 18px;}
}

@media (max-width: 960px){
    #main .article {height: 540px;}
} 

@media (max-width: 768px){
  #main #mv {height: 500px; margin-bottom: 50px;}
  #main #content {padding: 0 0px 20px 0px;}
  #main #mv .txt-wrap .tit{font-size: 24px; margin-bottom: 15px;}
  #main #mv .txt-wrap{left: 15px; top: 60%;}
  #main #mv .txt-wrap .tit span{font-size: 20px;}
  #main #mv .txt-wrap p{font-size: 15px; display: none;}
  #main #mv .slide-utill-wrap > div{padding: 20px;}
  #main #mv .slide-utill-wrap .btn-wrap .swiper-prev {padding: 20px 0 20px 30px;font-size: 0;}
  #main #mv .slide-utill-wrap .btn-wrap .swiper-next {padding: 20px 30px 20px 0px;font-size: 0;}
  #main #content h2{display: block; padding-left: 20px;}
  #main .article {height: auto;}
  #main .article .tit { height: 50px;}
  #main .article.article02{transform: translateY(-50px);}
  #main .article.article03{transform: translateY(0px);}
  #main .article.article04{transform: translateY(-50px);}
  #main .article.article05{transform: translateY(0px);}
  #main .article.article06{transform: translateY(-50px);}
  #main .article {width: calc(50% - 40px); margin: 0 20px 30px 20px;}
  #main .article p{display: none;}
  #main #content .move-element{display: none;}
}

@media (max-width: 460px){
    #main #mv {height: 400px;}
    #main #mv .txt-wrap .tit {font-size: 18px;margin-bottom: 10px;}
    #main .article .img-wrap::before {border-radius: 0 0 0 30px;}
    #main #mv .txt-wrap .tit span {font-size: 14px;margin: 10px 0 20px 0;}
    #main #mv .txt-wrap p {font-size: 12px;}
    #main #mv .slide-utill-wrap > div {padding: 15px;}
    #main #mv .slide-utill-wrap .btn-wrap .swiper-prev {padding: 20px 0 20px 20px;}
    #main #mv .slide-utill-wrap .btn-wrap .swiper-next {padding: 20px 20px 20px 0px;}
    #main #content h2 div {font-size: 30px;}
    #main .article {width: calc(50% - 20px);margin: 0 10px 30px 10px;}
    #main .article.article02{transform: translateY(-25px);}
    #main .article.article03{transform: translateY(0px);}
    #main .article.article04{transform: translateY(-25px);}
    #main .article.article05{transform: translateY(0px);}
    #main .article.article06{transform: translateY(-25px);}
    #main .article .img-wrap {border-radius: 0 0 0 30px; margin-bottom: 20px;}
    #main .article .sub-txt span{font-size: 14px;}
    #main .article .tit {line-height: 1;font-size: 15px;}

}

/*·¹À̾îÆ˾÷*/
    #layer_popup {  border:1px solid #666; text-align:center; position: absolute;z-index: 10000; top:50px;left:50px;     box-shadow: 0px 0px 8px rgb(0 0 0 / 40%);}
    #layer_popup .close div{float:left; text-align:right;}
    #layer_popup .close {text-align:right;background:#333;margin-top:-9px;padding: 5px;}
    #layer_popup #check{font-size:12px; font-family:'µ¸¿ò';     color: #fff; }
    #layer_popup #close{font-size:12px;     color: #fff;padding: 7px 20px 7px;vertical-align: middle; }
    #layer_popup #close a { color:#fff; }
	  
	
		
	@media all and (max-width:1300px) {
		#layer_popup {width:50%;}
	}

	@media all and (max-width:900px) {
	
		#layer_popup {width:90%;left:5%;}
		#layer_popup img {width:100%;}


	}