@charset "UTF-8";

/* main-common */
.section {padding: 80px 0 70px 0;}
.section-header {
    margin-bottom: 30px;
    text-align: center;
}
.section-header h3{display: inline-block;
    font-weight: 700; font-size: 3.5rem; line-height: 5rem;
    position: relative;
}
.section-header h3::after{content: "";
    width: 61px; height: 33px; margin: 0 10px 0 0 ;
    text-indent: -10000px;
    background-image: url(/asset/img/main-tit-esafe.png);background-size: contain; background-repeat: no-repeat; 
    position: absolute; left: -65px;top: 15px;
}
.section-header p{font-size: 1.6rem; color: #999;}
.section-header p span{color: #555;}


/*visual - S*/
.visual {
    width: 100%; 
    background: url(/asset//img/main-visual01.jpg) no-repeat center center; background-size: cover;
}
.visual img {width: 100%;}
.visual .swiper-slide {position: relative;}
.visual .swiper-slide div {
    color: #777777;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-600px, -50%);
}
.visual .swiper-slide div em {display: block;
    font-weight: 700; font-size: 5rem; color: #333333;
}
.visual .swiper-slide div span {font-weight: 700; color: #34568b;}
.visual .swiper-button-wrap {
    width: 1240px;height: 100px;  margin: 0 auto;
    position: absolute;left: 50%; top: 50%; z-index: 100;
    transform: translate(-50%, -50%);
}
.visual .swiper-button-wrap .swiper-button-prev {    position: absolute; left: -50px  ;top: 50%;}
.visual .swiper-button-wrap .swiper-button-next {    position: absolute; right: -50px  ;top: 50%;}

/*serviec - S*/
.service{}
.service ul{
    width: 100%; height: 298px;
    color: #fff; text-align: center;
}
.service ul li{float: left;
    width: 400px; height: 298px;
    background-color: #000;
    position: relative;
}
.service ul li + li {margin-left: 20px;}
.service ul li strong{
    width: 100%;
    font-weight: 700; font-size: 3.5rem;
    position: absolute; left: 0;top: 130px; z-index: 10;
    transition: all .3s;
}
.service .service-box{ opacity: 0;
    width: 100%;
    position: absolute; left: 0;top: 100px; z-index: 10;
    transition: all .5s;
}
.service .service-box::before{content: ""; display: block;
    width: 47px; height: 40px; margin: 0 auto 50px auto;
    background-repeat: no-repeat; background-position: center top;
}
.service li:nth-child(1) .service-box::before{background-image: url(/asset/img/main-service-icon01.png);}
.service li:nth-child(2) .service-box::before{background-image: url(/asset/img/main-service-icon02.png);}
.service li:nth-child(3) .service-box::before{background-image: url(/asset/img/main-service-icon03.png);}
.service .service-box p{
    margin-bottom: 30px;
    font-size: 1.4rem; color: #aaa;
}
.service .service-box a{display: block;
    width: 150px; height: 30px; margin: 0 auto; border: 1px solid #fff;
    font-size: 14px; line-height: 28px;
    transition: all .3s;
}
.service figure {opacity: 0.7;
    transition: all .9s;
}

.service ul li:hover strong{top: 110px;}
.service ul li:hover .service-box{ opacity: 1;
    top: 70px;
}
.service ul li:hover figure {opacity: 0.3;}
.service .service-box a:hover{
    color: #000;
    background-color: #fff;
} 


/*mov - S*/
.mov{
    width: 100%; 
	max-height: 660px;
    background-color: #f1f1f1;
	position: relative;
    clear: both;
}
.mov ul .w480{position: relative;
    clear: both;}

.mov .mov-tit-box {display: none;
    position: absolute; left: 670px; top: 0;
}
.mov .mov-tit-box h4{font-weight: 700; font-size: 3rem; line-height: 6rem; color: #34568b;}
.mov .mov-tit-box p{width: 400px;}
.mov li:nth-child(2) .mov-tit-box {display: none;}
.mov li:nth-child(3) .mov-tit-box {display: none;}

.mov figure{}
.mov figure figcaption{ opacity: 0.5; cursor: pointer;
    color: #34568b;
    position: absolute; top: 240px; 
    transition: all 0.3s;
}

.mov li:nth-child(1) figure figcaption {left: 670px;}
.mov li:nth-child(2) figure figcaption {left: 865px;}
.mov li:nth-child(3) figure figcaption {left: 1060px;}

.mov figure figcaption:hover {opacity: 1;}
.mov figure figcaption::before{content: ""; display: block;
    width: 180px; height: 115px; margin-bottom: 10px;
    border: 1px solid #000;
}
.mov li:nth-child(1) figure figcaption::before{background-image: url(/asset/img/main-mov-icon03.png);background-repeat: no-repeat;
    background-size: cover;     background-position: center;}
.mov li:nth-child(2) figure figcaption::before{background-image: url(/asset/img/main-mov-icon02.png);background-repeat: no-repeat;
    background-size: cover; background-position: center;}
.mov li:nth-child(3) figure figcaption::before{background-image: url(/asset/img/main-mov-icon01.png);background-repeat: no-repeat;
    background-size: cover; background-position: center;}
.mov figure iframe{display: none;
    width: 620px; height: 400px;
}

.mov li.on .mov-tit-box{display: block;}
.mov li.on figure figcaption{opacity: 1;}
.mov li.on figure iframe{display: block;
    width: 620px; height: 400px;
}

.mov li .youtube { opacity: 0.8; cursor: pointer;
    color: #34568b;
	position: absolute !important; top: 390px !important; width: 150px;
	background: url('/images/youtube.jpg') no-repeat;
	background-position: 0px 5px;
	text-indent: 32px;
}


.mov li:nth-child(1) .youtube { left: 670px !important;}
.mov li:nth-child(2) .youtube { left: 865px !important;}
.mov li:nth-child(3) .youtube { left: 1060px !important;}


/*course - S*/
.course{}
.course ul{width: 100%;}
.course ul li{ float: left;
    width: 190px; height: 260px; padding-top: 40px;border: 1px solid #999;
    color: #777; text-align: center;
    transition: all .3s;
}
.course ul li + li {margin-left: 20px;}
.course ul li::before{content: "";display: block;
    width: 70px; height: 70px; margin: 0 auto 20px auto;
}
.course ul li:nth-child(1)::before {background-image: url(/asset/img/main-course-icon01.png);}
.course ul li:nth-child(2)::before {background-image: url(/asset/img/main-course-icon02.png);}
.course ul li:nth-child(3)::before {background-image: url(/asset/img/main-course-icon03.png);}
.course ul li:nth-child(4)::before {background-image: url(/asset/img/main-course-icon04.png);}
.course ul li:nth-child(5)::before {background-image: url(/asset/img/main-course-icon05.png);}
.course ul li:nth-child(6)::before {background-image: url(/asset/img/main-course-icon06.png);}

.course ul li strong{display: block;
    margin-bottom: 30px;
    font-weight: 700; font-size: 2.5rem; 
}
.course ul li a{display: block;
    width: 100%; height: 30px;
    font-size: 1.4rem; line-height: 28px; color: #fff;
    background-color: #34568b;
    transition: all .3s;
}
.course ul li:hover {
    color: #34568b;
    box-shadow: 0 2px 7px rgba(0,0,0,0.2);
    transform: scale(1.05);
}
.course ul li a:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transform: scale(1.05);
}

/*news - S*/
.news{background-color: #f1f1f1;}
.news .news-wrap{width: 100%;}
.news .news-wrap > li{ float: left;
    width: 380px; height: 280px; padding: 30px 20px 30px 30px;
    background-color: #fff;
    position: relative;
    border-radius: 10px 10px 0 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.news .news-wrap > li + li {margin-left: 50px;}
.news .news-wrap > li::before{content: "";
    width: 82px; height: 82px;
    background-image: url(/asset/img/main-news-top.png);
    position: absolute; left: -30px; top: -30px; 
}
.news .news-wrap h4{
    margin-bottom: 10px;
    font-weight: 700; font-size: 2.5rem; line-height: 40px; color: #777;
}
.news .news-wrap h4 em{color: #34568b;}
.news .news-wrap ul{}
.news .news-wrap ul li{
    height: 40px; line-height: 40px;
    position: relative;
}
.news .news-wrap ul li::before{content: "";
    width: 6px;height: 6px;
    background-color: #34568b;
    position: absolute; left: 0; top: 18px;
}
.news .news-wrap ul li a{ float: left;
    width: 250px; padding-left: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news .news-wrap ul li span{float: right;
    font-size: 1.4rem; color: #999;
}
.news .news-wrap .news-more{
    width: 48px; height: 49px;
    text-indent: -10000px;
    background-image: url(/asset/img/main-news-more.png);
    position: absolute; right: -17px; top: 15px;
}
.news .news-wrap ul li:hover a {color: #f90}

.w480{ position: relative; }








/*--------------------------------------------------------------------------------------------------
반응형 1240
--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width:1240px){

    /* main-common */
    .section {margin-top:40px; padding: 30px 0;     position: relative;
    clear: both; }
    .section-header { margin-bottom: 20px;}
    .section-header h3{font-size: 2.5rem;}
    .section-header h3::after{
        width: 50px; height: 33px; 
        left: -50px;top: 15px;
    }
    .section-header p{font-size: 1.2rem;}

    /* visual - S */
    .visual { position: relative; top: -20px;}
    .visual img{ }
    .visual .swiper-slide{ }
    .visual .swiper-slide div {
        color: #777777;
        position: absolute; left: 50%; top: 50%;
        transform: translate(-100%, -50%);
    }
    .visual .swiper-slide div em {display: block;
        font-weight: 700; font-size: 2.5rem; color: #333333;
    }
    .visual .swiper-slide div p {display: none;}
    .visual .swiper-slide div span {font-weight: 700; color: #34568b;}
    .visual .swiper-button-wrap {
        width: 1240px;height: 100px;  margin: 0 auto;
        position: absolute;left: 50%; top: 50%; z-index: 100;
        transform: translate(-50%, -50%);
    }
    .visual .swiper-button-wrap .swiper-button-prev {    position: absolute; left: -50px  ;top: 50%;}
    .visual .swiper-button-wrap .swiper-button-next {    position: absolute; right: -50px  ;top: 50%;}
        
    /*serviec - S*/
    .service ul{overflow: hidden;
        width: 100%; height: 298px;
        color: #fff; text-align: center;
    }
    .service ul li{ width: 50%; height: 298px;}
    .service ul li + li {margin-left: 0}
    .service ul li:last-child {display: none;}
    .service ul li strong{ 
        font-size: 2rem;
        top: 130px;
    }
    .service .service-box{ opacity: 1;
        top: 70px; 
    }
    .service .service-box::before{content: ""; display: block;
        width: 47px; height: 40px; margin: 0 auto 50px auto;
        background-repeat: no-repeat; background-position: center top;
    }
    .service li:nth-child(1) .service-box::before{background-image: url(/asset/img/main-service-icon01.png);}
    .service li:nth-child(2) .service-box::before{background-image: url(/asset/img/main-service-icon02.png);}
    .service li:nth-child(3) .service-box::before{background-image: url(/asset/img/main-service-icon03.png);}
    .service .service-box p{
        margin-bottom: 30px;
        font-size: 1.2rem; color: #aaa;
    }
    .service .service-box a{display: block;
        width: 150px; height: 30px; margin: 0 auto; border: 1px solid #fff;
        font-size: 14px; line-height: 28px; color: #000;
        background-color: #fff;
        transition: all .3s;
    }
    .service figure {opacity: 0.3;
        width: 100%; height: 100%;
        transition: all .9s;
    }
    .service figure img {width: 100%; height: 100%; object-fit: cover; }
    .service ul li:hover strong{top: 130px;}

    /*mov - S*/
	.mov{ max-height:unset; /* min-height: 1100px; */}
    .mov .section-header {margin-bottom: 35px;}
    .mov ul { margin-bottom: 100px;}
    .mov ul li {  }
    .mov figure {width: 100%; }
    .mov figure figcaption{ 
        width: 30%;
        font-size: 1.3rem; text-align: center;
        position: absolute;
    }

    .mov li:nth-child(1) figure figcaption {left: 5%;    top: calc(100% + 10px);}
    .mov li:nth-child(2) figure figcaption {left: 35.5%;     top: calc(100% + 10px);}
    .mov li:nth-child(3) figure figcaption {left: 66%;     top: calc(100% + 10px);}
    .mov figure figcaption::before{ width:100%; height:180px; /* display: none; */}
    .mov figure iframe{display: none;
        width: 100%; height: 50vw;
    }

	.mov li:nth-child(1) .youtube {  display:none; left: 670px !important;}
	.mov li:nth-child(2) .youtube {  display:none; left: 865px !important;}
	.mov li:nth-child(3) .youtube {  display:none; left: 1060px !important;}

    .mov li.on .mov-tit-box{display: none}
    .mov li.on figure figcaption{opacity: 1;}
    .mov li.on figure iframe{display: block;
        width: 100%; height: 63vw;
    }

    /*course - S*/
    .course {position: relative;}
    .course ul {padding: 0 10px;}
    .course ul li{ width: calc( ( 100% - 20px ) / 3 ); height: 200px; margin-bottom: 20px; padding-top: 30px;}
    .course ul li + li {margin-left: 10px;}
    .course ul li:nth-child(4){margin-left: 0;}
    .course ul li::before{ margin: 0 auto 10px auto;}
    .course ul li strong{
        margin-bottom: 20px;
        font-size: 2rem; 
    }


    /*news - S*/
    .news{}
    .news .news-wrap{ padding: 0 20px;}
    .news .news-wrap > li{width: 100%; height: auto; padding: 20px 20px 10px 20px; margin-bottom: 40px;}
    .news .news-wrap > li + li {margin-left: 0px;}
    .news .news-wrap h4{
        margin-bottom: 10px;
        font-size: 1.8rem; line-height: 30px;
    }
    .news .news-wrap ul li{
        height: 30px; line-height: 30px;
        position: relative;
    }
    .news .news-wrap ul li::before{top: 12px;}
    .news .news-wrap ul li a{ 
        width: 70%; padding-left: 10px;
        font-size: 1.3rem;
    }
    .news .news-wrap ul li span{font-size: 1.3rem; }
}



@media only screen and (max-width:960px){
	/* .mov{ min-height:940px;} */
    .mov figure figcaption::before{ width:100%; height:140px;}
}

@media only screen and (max-width:800px){
	/* .mov{ min-height:850px;} */
    .mov figure figcaption::before{ width:100%; height:140px;}
}

@media only screen and (max-width:700px){
	/* .mov{ min-height:740px;} */
    .mov figure figcaption::before{ width:100%; height:100px;}
}

/*--------------------------------------------------------------------------------------------------
반응형
--------------------------------------------------------------------------------------------------*/

@media only screen and (max-width:480px){

    /* main-common */
    .section {padding: 30px 0; position:relative;}
    .section-header { margin-bottom: 20px;}
    .section-header h3{font-size: 2.5rem;}
    .section-header h3::after{
        width: 50px; height: 33px; 
        left: -50px;top: 15px;
    }
    .section-header p{font-size: 1.2rem;}

    /* visual - S */
    .visual { position: relative; top: -20px;}
    .visual img{ }
    .visual .swiper-slide{ }
    .visual .swiper-slide div {
        color: #777777;
        position: absolute; left: 50%; top: 50%;
        transform: translate(-100%, -50%);
    }
    .visual .swiper-slide div em {display: block;
        font-weight: 700; font-size: 2.5rem; color: #333333;
    }
    .visual .swiper-slide div p {display: none;}
    .visual .swiper-slide div span {font-weight: 700; color: #34568b;}
    .visual .swiper-button-wrap {
        width: 1240px;height: 100px;  margin: 0 auto;
        position: absolute;left: 50%; top: 50%; z-index: 100;
        transform: translate(-50%, -50%);
    }
    .visual .swiper-button-wrap .swiper-button-prev {    position: absolute; left: -50px  ;top: 50%;}
    .visual .swiper-button-wrap .swiper-button-next {    position: absolute; right: -50px  ;top: 50%;}
        
    /*serviec - S*/
    .service ul{overflow: hidden;
        width: 100%; height: 298px;
        color: #fff; text-align: center;
    }
    .service ul li{ width: 50%; height: 298px;}
    .service ul li + li {margin-left: 0}
    .service ul li:last-child {display: none;}
    .service ul li strong{ 
        font-size: 2rem;
        top: 130px;
    }
    .service .service-box{ opacity: 1;
        top: 70px; 
    }
    .service .service-box::before{content: ""; display: block;
        width: 47px; height: 40px; margin: 0 auto 50px auto;
        background-repeat: no-repeat; background-position: center top;
    }

    .service li:nth-child(1) .service-box::before{background-image: url(/asset/img/main-service-icon01.png);}
    .service li:nth-child(2) .service-box::before{background-image: url(/asset/img/main-service-icon02.png);}
    .service li:nth-child(3) .service-box::before{background-image: url(/asset/img/main-service-icon03.png);}

    .service .service-box p{
        margin-bottom: 30px;
        font-size: 1.2rem; color: #aaa;
    }
    .service .service-box a{display: block;
        width: 150px; height: 30px; margin: 0 auto; border: 1px solid #fff;
        font-size: 14px; line-height: 28px; color: #000;
        background-color: #fff;
        transition: all .3s;
    }
    .service figure {opacity: 0.3;
        width: 100%; height: 100%;
        transition: all .9s;
    }
    .service figure img {width: 100%; height: 100%; object-fit: cover; }
    .service ul li:hover strong{top: 130px;}

    /*mov - S*/
	.mov{ max-height:570px; }
    .mov .section-header {margin-bottom: 35px;}
    .mov .w480 { margin-bottom:4px;}
    .mov ul { margin-bottom: 0px;}
    .mov .w480 li {  }
    .mov figure {width: 100%; }
    .mov figure figcaption{ /* display:none; */
        width: 30%;
        font-size: 1.3rem; text-align: center;
        position: relative; 
    }
    .mov figure figcaption::before{ width:100%; height:80px; /* display: none; */}
    .mov .w480 li:nth-child(1) figure figcaption {left: 3%;}
    .mov .w480 li:nth-child(2) figure figcaption {left: 35%}
    .mov .w480 li:nth-child(3) figure figcaption {left: 67%;}
	.mov .w480 figure figcaption{ 
	opacity: 0.5; cursor: pointer;   color: #34568b;   position: absolute; top: 320px;  transition: all 0.3s;
	}

    /*course - S*/
	.course .section{ margin-top: 140px; }
    .course ul {padding: 0 10px;}
    .course ul li{ width: calc( ( 100% - 20px ) / 3 ); height: 200px; margin-bottom: 20px; padding-top: 30px;}
    .course ul li + li {margin-left: 10px;}
    .course ul li:nth-child(4){margin-left: 0;}
    .course ul li::before{ margin: 0 auto 10px auto;}
    .course ul li strong{
        margin-bottom: 20px;
        font-size: 2rem; 
    }


    /*news - S*/
    .news{}
    .news .news-wrap{ padding: 0 20px;}
    .news .news-wrap > li{width: 100%; height: auto; padding: 20px 20px 10px 20px; margin-bottom: 40px;}
    .news .news-wrap > li + li {margin-left: 0px;}
    .news .news-wrap h4{
        margin-bottom: 10px;
        font-size: 1.8rem; line-height: 30px;
    }
    .news .news-wrap ul li{
        height: 30px; line-height: 30px;
        position: relative;
    }
    .news .news-wrap ul li::before{top: 12px;}
    .news .news-wrap ul li a{ 
        width: 70%; padding-left: 10px;
        font-size: 1.3rem;
    }
    .news .news-wrap ul li span{font-size: 1.3rem; }


}