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

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

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

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

/*sec-mobile*/

#mobile { display: none; margin: 80px 0px 0px; text-align: center; }
#mobile h2 { color: #333333; font-weight: 700;font-size:28px;line-height:36px;margin-bottom:0px; }
#mobile h3 { color: #333333; font-weight: 400;font-size:15px;line-height:36px;margin-bottom:8px; font-family: 'Noto Sans KR'; }
#mobile h4 { color: #333333; font-weight: 300;font-size:13px;line-height:22px;margin-bottom:8px; font-family: 'Noto Sans KR'; }

/*sec2*/

#sec2{margin:100px;padding:380px 150px;position: relative;}
#sec2 .sec2_in{width:1140px;padding:0 15px;margin:auto;}
#sec2 .sec2_in .txt_wrap{display: flex;justify-content: center;flex-wrap: wrap;margin:0 -15px;}
#sec2 .sec2_in .txt_wrap .txt{flex:0 0 40%;width:40%;position: absolute;right:10px;bottom:10px;min-width:358px;max-width:500px;}
#sec2 .sec2_in .txt_wrap .txt .txt_in{background:#fff;padding:40px;overflow: hidden;position: relative;box-sizing: border-box;color:#333;}
#sec2 .sec2_in .txt_wrap .txt .txt_in h2{font-weight: 700;font-size:30px;line-height:36px;margin-bottom:0px;}
#sec2 .sec2_in .txt_wrap .txt .txt_in h3{font-weight: 700;font-size:26px;line-height:36px;margin-bottom:8px;font-family: 'Poppins';}
#sec2 .sec2_in .txt_wrap .txt .txt_in h4{font-weight: 300;line-height:22px;margin-bottom:8px;opacity: .7;font-family: 'Noto Sans KR';font-size:15px;margin-bottom:16px;}
#sec2 .sec2_in .txt_wrap .txt .txt_in h4 .me{font-size:13px;line-height:16px;letter-spacing: -1px;}
#sec2 .sec2_in .txt_wrap .txt .txt_in h5{font-weight: 400;line-height:18px;font-family: 'Noto Sans KR';font-size:12px;}
#sec2 .sec2_in .txt_wrap .txt .txt_in a{margin-top:28px;display: inline-block;font-size:16px;font-weight: 700;font-family: 'Nanum Gothic';letter-spacing: 1px;color:#333;position: relative;}
#sec2 .sec2_in .txt_wrap .txt .txt_in a:after{content: '';width:36px;height:2px;margin-left:20px;background: #333;position: absolute;top:50%;margin-top:-2px;transition: all .4s ease-in-out;}
#sec2 .sec2_in .txt_wrap .txt .txt_in a:hover:after{width:72px;}

/*sec3*/

#sec3{margin:100px 0;padding:30px 0 0;position: relative;box-sizing: border-box;}
#sec3 .bgimg{background-position: left center;position: absolute;left:0;top:0;right:50%;bottom:0;background-size: cover;background-repeat: no-repeat;}
#sec3 .bgimg .cover{position: absolute;left:0;right:0;bottom:0;top:0;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);z-index: 3;}

#sec3 .sec3_in{position: relative;padding-left:calc((100% - 1140px) / 2 + 15px);display: flex;align-items:center;overflow: hidden;z-index: 10;}
#sec3 .sec3_in .tit{width:25%;box-sizing: border-box;z-index: 10;margin-top:-84px;color:#333333;padding-left:15px;}
#sec3 .sec3_in .tit h2{font-size:32px;font-weight: 700;line-height:1.2;margin-bottom:8px;color:#333333; font-family: 'NanumSquare';}
#sec3 .sec3_in .tit h3{color:#000;margin-bottom:16px;font-family: 'Cormorant Garamond';font-size:26px;font-weight: 500;}
#sec3 .sec3_in .tit h4{margin-top:48px;display: inline-block;font-weight: 700;color:#333333;letter-spacing: .5px;position: relative;cursor: auto;font-size:18px;}
#sec3 .sec3_in .tit h4:after{content: '';width:36px;height:2px;background: #333333;margin-left:20px;transition: all .4s ease-in-out;position: absolute;top:6px;}
#sec3 .sec3_in .tit h4:hover:after{width:72px;}

#sec3 .sec3_in .fa_wrap{width:75%;box-sizing: border-box;margin-top:0;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide{position: relative;box-sizing: border-box;padding:20px 0px 40px 20px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide{height:300px;box-sizing: border-box;background: #fff;border-radius: 5px;overflow: hidden;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a{display: block;width:100%;height:100%;}

#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a .cover{position: absolute;left:0;right:0;bottom:0;top:50%;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.4) 100%);z-index: 3;border-radius: 0 0 5px 5px;}

#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a .txt{position: absolute;padding:20px;color:#fff;bottom:0;left:0;right:0;z-index: 3;transition: all .4s ease-in-out;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a:hover .txt{transform: translateY(-30%);}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a .txt h2{color:#fff;font-size:16px;font-weight: 400;line-height:1.5;margin:0;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a .txt h3{color:#fff;font-size:22px;font-weight: 900;line-height:1.5;margin:0;opacity: 1;}

#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img1 a .img{background: url(../img/sub3/1/image2.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img2 a .img{background: url(../img/sub3/2/image1.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img3 a .img{background: url(../img/sub3/3/image3.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img4 a .img{background: url(../img/sub3/4/image1.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img5 a .img{background: url(../img/sub3/5/image2.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide.img6 a .img{background: url(../img/sub3/6/image2.jpg)no-repeat 50% 50%;width:100%;height:100%;background-size: cover;border-radius:5px;}

#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a .txt_up{position: absolute;color:#fff;padding:20px;bottom:0;left:0;right:0;z-index: 3;font-size:12px;opacity: 0;font-weight: 700;transform: translateY(400%);transition: all .4s ease-in-out;}
#sec3 .sec3_in .fa_wrap .fa_wrap_slide .swiper-slide a:hover .txt_up{opacity: 1;transform: translateY(0);}

#sec3 .sec3_in .arr_btn{text-align: center;box-sizing: border-box;}
#sec3 .sec3_in .arr_btn .fa_wrap_prev{width:32px;height:20px;margin-right:20px;display: inline-block;outline:none;cursor: pointer;background: url(../img/btn/prev.png)no-repeat 50% 50%;transition: all .4s ease-in-out;outline: none;}
#sec3 .sec3_in .arr_btn .fa_wrap_next{width:32px;height:20px;margin-left:20px;display: inline-block;outline:none;cursor: pointer;background: url(../img/btn/next.png)no-repeat 50% 50%;transition: all .4s ease-in-out;outline: none;}
.swiper-button-disabled{opacity: .5;}

@media (max-width:1340px){
    #sec2 .sec2_in{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{padding:350px 100px;margin:70px;}
    
    #sec3{margin: 70px 0;}
    #sec3 .bgimg{right:0;}
    
    #sec3 .sec3_in{padding-left:0;display: block;}
    #sec3 .sec3_in .tit{width:100%;margin:0;padding-left:15px;}
    #sec3 .sec3_in .tit h4{display: none;}
    
    #sec3 .sec3_in .fa_wrap{width:100%;}
    #sec3 .sec3_in .fa_wrap .fa_wrap_slide{padding:20px 15px;}
    
    #sec3 .sec3_in .arr_btn{margin-bottom:20px;}
    #sec3 .sec3_in .arr_btn .fa_wrap_prev{background: url(../img/btn/prev_on.png)no-repeat 50% 50%;}
    #sec3 .sec3_in .arr_btn .fa_wrap_next{background: url(../img/btn/next_on.png)no-repeat 50% 50%;}
    
}
/*모바일*/
@media (max-width:767px){
    #sec1{height:55vh;}
    #sec1 .sec1_slide .swiper-slide .tit{width:80%;}
    #sec1 .sec1_slide .swiper-slide .tit h2{font-size:26px;}
    #sec1 .sec1_slide .swiper-slide .tit h3{font-size:24px;}
    
    #mobile { display: block; }
    
    #sec2{margin:50px 15px;padding:50px 0 30px;box-sizing: border-box;}
    
    #sec2 .sec2_in .txt_wrap .txt{position: static;width:100%; height: 280px; flex:none;right:0;right:0;min-width:100%;}
    #sec2 .sec2_in .txt_wrap .txt .txt_in{box-sizing: border-box;background: none;padding:20px;color:#fff; }
    #sec2 .sec2_in .txt_wrap .txt .txt_in h2{display: none;}
    #sec2 .sec2_in .txt_wrap .txt .txt_in h3{display: none;}
    #sec2 .sec2_in .txt_wrap .txt .txt_in h4{display: none;}
    #sec2 .sec2_in .txt_wrap .txt .txt_in h4 .me{display: none;}
    #sec2 .sec2_in .txt_wrap .txt .txt_in a{display: none;}
    
    #sec3{margin:50px 0;padding:45px 0 0;}
    #sec3 .sec3_in .tit h2{font-size:20px;margin-bottom:4px;}
    #sec3 .sec3_in .tit h3{margin-bottom:8px;font-size:18px;}
    
}