/* 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-css-mode > .swiper-wrapper{scrollbar-width: none;}
.swiper-button-next, .swiper-button-prev{display: none;}
/* reset swiper css */

.main-wrapper {max-width: 1620px;margin-left: 15.5%;}

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


#content {padding: 0 100px 300px 130px;position: relative;}
#content .article-container{display: flex;flex-wrap: wrap;justify-content: space-between;}
#content .move-element{position: absolute;}
#content .move-element01{width: 75px;height: 100px; background-image: url(../img/element.png);top:1000px; left: 80px;}
#content .move-element02{width: 72px;height: 67px; background-image: url(../img/element02.png); top: 200px; right: 100px;}
#content h2 span{background: url(../img/main_content_h2_icon.jpg)no-repeat; width: 34px; height: 135px; display: inline-block;}
#content h2{display: none;margin-bottom: 50px;}
#content h2 div{display: inline-block; font-size: 40px; color: #999; line-height: 1; margin-left: 10px;}
#content h2 div b{color: #000;}

.article{display: block; text-align: right; width: calc(33.333% - 65px); margin-bottom: 2rem;}
.article .img-wrap{border-radius: 0 0 0 5rem; margin-bottom: 3rem; overflow: hidden; position: relative;}
.article .img-wrap img{width: 100%;}
.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;}
.article:hover .img-wrap::before{border: 20px solid #385dbf}
.article .sub-txt{margin-bottom: 10px;}
.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;}
.article .sub-txt span::before{position: absolute; content: ""; display: block; background-color: #fff;width: 6px; height: 6px; right: 15px; bottom: -5px;}
.article .tit{color: #444e98; text-decoration: underline; margin-bottom: 15px;font-family: 'GmarketSansMedium';}
.article p{font-size: 2.1rem; position: relative; display: inline-block;font-family: 'GmarketSansMedium';}
.article p b{font-family: 'GmarketSansBold';}
.article:hover p{color: #2541a7;}
.article p::before{content: '';position: absolute;display: block;background-color: #f9ff9b; height: 12px;width: 0%;z-index: -1;transform: translateY(12px); transition: 0.3s;}
.article:hover p::before{width: 100%;}

.article02 {transform: translateY(74px);} 
.article03 {transform: translateY(-30px);}
.article05 {transform: translateY(100px);}
.article06 {transform: translateY(30px)}



@media (max-width: 1440px){
    #content {padding: 0 50px 250px 50px}
    #mv {margin-bottom: 100px;}
    .article {width: calc(33.333% - 35px)}
}

@media (max-width: 1240px){ 
    .main-wrapper{margin-left: auto;}
    #mv {height: 600px}
    #mv .txt-wrap{left: 50px; top: 55%;}
    #mv .slide-utill-wrap{right: 0;left: auto;bottom: 0;}
    #mv .txt-wrap .tit{font-size: 3.2rem;}
    #mv .txt-wrap .sub-txt{font-size: 2.0rem;}
    #content {padding: 0 30px 200px 30px;}
    .article {width: calc(33.333% - 20px)}
}

@media (max-width: 768px){
    #mv {height: 500px; margin-bottom: 50px;}
    #mv .slide-utill-wrap > div{padding: 20px;}
    #mv .slide-utill-wrap .btn-wrap .swiper-prev {padding: 20px 0 20px 30px;font-size: 0;}
    #mv .slide-utill-wrap .btn-wrap .swiper-next {padding: 20px 30px 20px 0px;font-size: 0;}
    #mv .txt-wrap .tit{line-height: 1.2;font-size: 2.4rem;}
    #mv .txt-wrap .sub-txt{font-size: 1.8rem;}
    #mv .txt-wrap .sub-txt{margin-top: 20px;}
    #mv .txt-wrap {left: 20px;}

    #content { padding: 0 20px 100px 20px;} 
    #content h2{display: block; padding-left: 20px;}

    .article{margin-bottom: 30px;}
    .article .tit { height: auto; font-size: 18px; margin-bottom: 0;}
    .article.article02{transform: translateY(-50px);}
    .article.article03{transform: translateY(0px);}
    .article.article04{transform: translateY(-50px);}
    .article.article05{transform: translateY(0px);}
    .article.article06{transform: translateY(-50px);}
    .article {width: calc(50% - 10px)}
    .article p{display: none;}
    .article .img-wrap::before{display: none;}

    #content .move-element{display: none;}
}

@media (max-width: 480px){
    #mv {height: 400px;}
    #mv .slide-utill-wrap > div {padding: 10px;}
    #mv .slide-utill-wrap .btn-wrap .swiper-prev {padding: 20px 0 20px 20px;}
    #mv .slide-utill-wrap .btn-wrap .swiper-next {padding: 20px 20px 20px 0px;}
    #mv .slide-utill-wrap .btn-wrap .swiper-prev,
    #mv .slide-utill-wrap .btn-wrap .swiper-next{background-size: 15px;}

    #content { padding: 0 20px 100px 20px;}
    #content h2{padding-left: 0; margin-bottom: 20px;}
    #content h2 span{ width: 28px; height: 120px; background-size: contain;}
    #content h2 div {font-size: 30px;}

    .article.article02{transform: translateY(-25px);}
    .article.article03{transform: translateY(0px);}
    .article.article04{transform: translateY(-25px);}
    .article.article05{transform: translateY(0px);}
    .article.article06{transform: translateY(-25px);}
    .article .img-wrap {border-radius: 0 0 0 4rem; margin-bottom: 2rem;}
}

@media (max-width: 380px){
    #mv {height: 300px; margin-bottom: 60px;}
    #mv .txt-wrap{top: 62%;}
    #mv .txt-wrap .tit{font-size: 2.4rem; line-height: 1.6;}

    .article {width: calc(100% - 0px);}
    .article.article02{transform: inherit;}
    .article.article03{transform: inherit;}
    .article.article04{transform: inherit;}
    .article.article05{transform: inherit;}
    .article.article06{transform: inherit;}
}


#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%;}
}