@charset "utf-8";
@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

body{background: #fbfbfa;font-family: 'Josefin Sans';-ms-overflow-style: none;scrollbar-width: none;}
body::-webkit-scrollbar {display: none;}

#wrap{float:right;width: calc(100% - 320px);}

#sec1{height:100vh;width:100%;transition: .5s;overflow:hidden;}
#sec1 .sec1_slide{height:100%;width:100%;}
 
#sec1 .sec1_slide .swiper-slide{background: #fff;position: relative;}

#sec1 .sec1_slide .swiper-slide .tit{position: absolute;left:50%;top:50%;z-index: 10;color:#fff;transform: translate(-50%,-50%);text-align: center;width:400px;padding:20px;opacity: 0;}
#sec1 .sec1_slide .swiper-slide .tit h2{font-size:36px;font-weight: 700;line-height:1.3em;opacity:.8;}
#sec1 .sec1_slide .swiper-slide .tit h3{font-size:18px;line-height:1.3em;font-weight: 700;letter-spacing: 2px;opacity:.8;}
#sec1 .sec1_slide .swiper-slide .tit span{position: absolute;width:100%;height:100%;left:0;top:0;}

#sec1 .sec1_slide .swiper-slide .tit .frame_1:before{content: '';display: block;position: absolute;left:0;top:0;width:20px;height:20px;opacity: 0.8;border-top:5px solid #fff;border-left:5px solid #fff;}
#sec1 .sec1_slide .swiper-slide .tit .frame_1:after{content: '';display: block;position: absolute;left:0;bottom:0;width:20px;height:20px;opacity: 0.8;border-bottom:5px solid #fff;border-left:5px solid #fff;}

#sec1 .sec1_slide .swiper-slide .tit .frame_2:before{content: '';display: block;position: absolute;right:0;top:0;width:20px;height:20px;opacity: 0.8;border-top:5px solid #fff;border-right:5px solid #fff;}
#sec1 .sec1_slide .swiper-slide .tit .frame_2:after{content: '';display: block;position: absolute;right:0;bottom:0;width:20px;height:20px;opacity: 0.8;border-bottom:5px solid #fff;border-right:5px solid #fff;}

@keyframes tit_top{
    0%{transform: translate(-50%,-10%);opacity: 0;}
    100%{opacity: 1;}
}

#sec1 .sec1_slide .swiper-slide-active .tit{animation: tit_top .5s .8s ease-in-out forwards;}


#sec1 .sec1_slide .img1{background: url(../img/sub1/image1.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img2{background: url(../img/sub1/image2.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img3{background: url(../img/sub1/image3.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img4{background: url(../img/sub1/image4.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img5{background: url(../img/sub1/image5.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img6{background: url(../img/sub1/image6.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img7{background: url(../img/sub1/image7.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slide .img8{background: url(../img/sub1/image8.jpg)no-repeat 50% 50%;background-size: cover;}

#sec1 .sec1_slide .sec1_pagi{left:auto;right:66px;color:#fff;font-size:24px;letter-spacing: 1px;width:auto;bottom:44px;line-height:42px;opacity: 0;transition: all .4s ease-in-out;}
#sec1 .sec1_slide .sec1_prev{left:auto;top:auto;bottom:44px;right:125px;width:44px;height:44px;opacity: 0;transition: all .4s ease-in-out;outline: none;}
#sec1 .sec1_slide .sec1_prev:after{display: none;}
#sec1 .sec1_slide .sec1_prev:before{content: '';width:15px;height:30px;background: url(../img/btn/prev_2.png)no-repeat 50% 50%;}
#sec1 .sec1_slide .sec1_next{left:auto;top:auto;bottom:44px;right:20px;width:44px;height:44px;opacity: 0;transition: all .4s ease-in-out;outline: none;}
#sec1 .sec1_slide .sec1_next:after{display: none;}
#sec1 .sec1_slide .sec1_next:before{content: '';width:15px;height:30px;background: url(../img/btn/next_2.png)no-repeat 50% 50%;}

#sec1 .sec1_slide:hover .sec1_pagi,#sec1 .sec1_slide:hover .sec1_prev,#sec1 .sec1_slide:hover .sec1_next{opacity: 1;}

#sec1 .sec1_slide .scroll_wrap{position: absolute;right:30px;bottom:12px;line-height:30px;margin-top:-15px;font-size:10px;font-weight: bold;z-index: 10;}
#sec1 .sec1_slide .scroll_wrap .box{width:20px;height:30px;float:left;border:2px solid rgba(255,255,255,1);border-radius: 5px;margin-right: 20px;}
#sec1 .sec1_slide .scroll_wrap .box .scr{width:2px;height:6px;background: #fff;position: relative;left:50%;top:6px;margin-left:-1px;border-radius: 25%;animation: scrollDown 1s ease-in-out infinite;}
#sec1 .sec1_slide .scroll_wrap span{position: relative;color:#fff;}
#sec1 .sec1_slide .scroll_wrap span:before{content: '';width:34px;height:2px;background: #fff;position: absolute;bottom:-5px;left:0;}
@keyframes scrollDown{
    0%{top:6px}
    100%{opacity: 0;top: 14px;}
}
/*sec2*/

#sec2{width:100%;}
#sec2 .sec2_in{position: relative;width:100%;height:100%;margin-bottom:100px;}
#sec2 .sec2_in .tit{text-align: center;color:#4e4e4e;width:800px;margin:60px auto 40px;}
#sec2 .sec2_in .tit h2{font-size:44px;line-height:2em;position: relative;margin-bottom:30px;}
#sec2 .sec2_in .tit h2:after{content: '';width:80px;height:1px;background: #5c7798;position: absolute;left:50%;bottom:0;margin-left:-40px;}
#sec2 .sec2_in .tit h3{font-family: 'NanumSquare';font-size:22px;letter-spacing: .5px;line-height:1.3em;margin-bottom:13px;}
#sec2 .sec2_in .tit h4{font-family: 'NanumSquare';font-size:28px;letter-spacing: 4.2px;line-height:.8em;margin-bottom:60px;position: relative;}
#sec2 .sec2_in .tit h4:after{content: '';width:20px;height:1px;position: absolute;left:50%;margin-left:-10px;bottom:-25px;;background: #5c7798;}
#sec2 .sec2_in .tit p{font-size:14px;line-height:23px;font-family: 'Noto Sans KR';font-weight: 300;letter-spacing: 1px;}

#sec2 .sec2_in .img{width:800px;margin:auto;}
#sec2 .sec2_in .img img{width:100%;}

/*태블릿 화면*/
@media (max-width:1240px){
    #wrap{width:100%;}
    
    #sec1 .sec1_slide .sec1_pagi, #sec1 .sec1_slide .sec1_prev, #sec1 .sec1_slide .sec1_next{opacity: 1}
    
    #sec2 .sec2_in{padding:0;margin-bottom:0px;}
    
    #sec2 .sec2_in .tit{width:100%;margin-bottom:0;margin-top:50px;}
    #sec2 .sec2_in .tit h2{font-size:32px;margin-bottom:15px;}
    #sec2 .sec2_in .tit h2:after{width:60px;margin-left:-30px;}
    #sec2 .sec2_in .tit h3{font-size:16px;margin-bottom:7px;}
    #sec2 .sec2_in .tit h4{font-size:20px;margin-bottom:30px;line-height:1.2em;}
    #sec2 .sec2_in .tit h4:after{bottom:-10px;}
    #sec2 .sec2_in .tit p { font-size: 13px; }
    
    #sec2 .sec2_in .img{width:100%;padding:10% 10%;}
    
}
/*모바일*/
@media (max-width:767px){
    #sec1{height:65vh;}
    #sec1 .sec1_slide .swiper-slide .tit{width:80%;}
    
}