@charset "utf-8";

*{box-sizing: border-box;}

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

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

/*sec1*/

#sec1{width:100%;height:450px;box-sizing: border-box;overflow: hidden;}
#sec1 .sec1_in{height:100%;width:100%;background: url(../img/main/image6.jpg)no-repeat 50% 50%;background-size: cover;position: relative;}
#sec1 .sec1_in:after{content: '';width:100%;height:100%;position: absolute;left:0;top:0;background: #000;opacity: .2;}

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

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

/*sec2*/

#sec2{width:100%;overflow: hidden;}
#sec2 .sec2_in{width:100%;height:969px;box-sizing: border-box;padding-top:112px;position: relative;}
#sec2 .sec2_in .tit{margin:0 auto 0;width:1000px;}
#sec2 .sec2_in .tit h2{font-size:14px;letter-spacing: 2px;margin-bottom:55px;}
#sec2 .sec2_in .tit h3{font-size:32px;font-family: 'NanumSquare'; font-weight: bold;padding-bottom:20px;}

#sec2 .sec2_in .box_shadow{width:1130px;height:600px;position: absolute;left:50%;transform: translateX(-50%);top:261px;}
#sec2 .sec2_in .box_shadow .sha{width:715px;height:520px;position: absolute;top:0px;z-index: 15;box-sizing: border-box;right:65px;box-shadow: 0 30px 50px rgba(0,0,0,.2);}

#sec2 .sec2_in .sec2_slider{width:1000px;margin:15px auto 0;position: relative;height:550px;box-sizing: border-box; }

#sec2 .sec2_in .sec2_slider .swiper-wrapper{ position: relative; left:285px;top:0px;right:15px;bottom:0;box-sizing: border-box;width:715px;height:550px;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img1{background: url(../img/sub6/1.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img2{background: url(../img/sub6/2.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img3{background: url(../img/sub6/3.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img4{background: url(../img/sub6/4.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img5{background: url(../img/sub6/5.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img6{background: url(../img/sub6/6.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img7{background: url(../img/sub6/7.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img8{background: url(../img/sub6/8.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img9{background: url(../img/sub6/9.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img10{background: url(../img/sub6/10.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img11{background: url(../img/sub6/11.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img12{background: url(../img/sub6/12.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img13{background: url(../img/sub6/13.jpg)no-repeat 50% 50%;background-size: cover;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .img14{background: url(../img/sub6/14.jpg)no-repeat 50% 50%;background-size: cover;}

#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide{position: relative;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .cover{position: absolute;left:0;top:0;width:715px;height:100%;background: #000;opacity: .3;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt{color:#fff;text-align: center;position: absolute;width:715px;left:0;top:0;height:100%; padding: 0px 25px;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt h2{line-height:30px;font-size:30px;font-family: 'Noto serif KR';margin:110px 0 260px;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt p{line-height:30px;font-family: 'Noto sans KR';font-size:14px;}

#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a{margin:35px auto 0;border:1px solid #fff;width:170px;height:48px;line-height:48px;text-align: center;display: block;font-size:11px;color:#fff;letter-spacing: 1px;position: relative;transition: all .5s ease;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a:after{content: '';width:22px;height:1px;background: #fff;position: absolute;left:-11px;top:36px;transition: all .5s ease;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a:before{content: '';width:22px;height:1px;background: #fff;position: absolute;right:-11px;top:36px;transition: all .5s ease;}

#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a:hover{color:#000;background: #fff;border:1px solid #000;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a:hover:before{background: #000;}
#sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt a:hover:after{background: #000;}

#sec2 .sec2_in .sec2_slider .sec2_pagi{left:0;border:1px solid #ccc;width:198px;height:520px;top:0;transform: translate(0);margin-top:15px;box-sizing: border-box;box-shadow: 5px 5px 10px rgba(0,0,0,.2);}
#sec2 .sec2_in .sec2_slider .sec2_pagi .swiper-pagination-bullet{height:36px;border-radius: 0;margin:0;color:#7e7d7d;background: #fff;transition: all .5s ease;}
#sec2 .sec2_in .sec2_slider .sec2_pagi .swiper-pagination-bullet-active{color:#111;padding-left:10px;position: relative;}
#sec2 .sec2_in .sec2_slider .sec2_pagi .swiper-pagination-bulletㄴ:before{content: '';position: absolute;top:5px;left:0;border-top:5px solid #111;border-right:5px solid transparent;opacity: 0;transition: all .5s ease;}
#sec2 .sec2_in .sec2_slider .sec2_pagi .swiper-pagination-bullet-active:before{content: '';position: absolute;top:5px;left:0;border-top:5px solid #111;border-right:5px solid transparent;opacity: 1;}

#sec2 .sec2_in .sec2_slider .sec2_pagi span{position: absolute;font-size:14px;font-family: 'Noto sans KR';background: #fff;height:36px;width:100%;opacity: 1;}

#sec2 .sec2_in .sec2_slider .sec2_pagi span:hover:before{opacity: 1;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:hover{padding-left:10px;}

#sec2 .sec2_in .sec2_slider .sec2_pagi span:first-child{left:-1px;top:-18px;width:100px}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(2){left:-1px;top:18px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(3){left:-1px;top:54px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(4){left:-1px;top:90px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(5){left:-1px;top:126px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(6){left:-1px;top:162px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(7){left:-1px;top:198px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(8){left:-1px;top:234px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(9){left:-1px;top:270px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(10){left:-1px;top:306px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(11){left:-1px;top:342px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(12){left:-1px;top:378px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(13){left:-1px;top:414px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(14){left:-1px;top:450px;}

#sec2 .sec2_in .sec2_slider .sec2_pagi span:after{width:100%;line-height:36px;text-align: left;display: block;letter-spacing: .5px;}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:first-child:after{content: '향일암';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(2):after{content: '오동도';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(3):after{content: '돌산공원';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(4):after{content: '방죽포해수욕장';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(5):after{content: '무술목전적지';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(6):after{content: '화양면드라이브코스';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(7):after{content: '용문사';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(8):after{content: '여수진남관(여수10경)';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(9):after{content: '여수세계엑스포박람회장';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(10):after{content: '금오산';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(11):after{content: '거북선모형체험관';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(12):after{content: '돌산유람선선착장';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(13):after{content: '돌산대교';}
#sec2 .sec2_in .sec2_slider .sec2_pagi span:nth-child(14):after{content: '만성리검은모래해변';}

#sec2 .sec2_prev { color: #fff; top: 50%; left: 30px; }
#sec2 .sec2_next { color: #fff; top: 50%; right: 30px;  }

@media (max-width:1340px){
    #sec2 .sec2_in{width:100%;height:auto;margin-bottom:80px;}
    #sec2 .sec2_in .box_shadow{display: none;}
    #sec2 .sec2_in{padding-top:90px;}
    #sec2 .sec2_in .tit{width:100%;padding:0 15px;}
    #sec2 .sec2_in .sec2_slider{width:100%;}
    #sec2 .sec2_in .sec2_slider .sec2_pagi{background: #fff;left:15px;width:20%;}
    #sec2 .sec2_in .sec2_slider .swiper-wrapper{width:75%;position: absolute;left:auto;}
    #sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .cover{width:100%;}
    #sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt{width:100%;}
    
}

/*태블릿 화면*/
@media (max-width:1240px){
    #wrap{width:100%;}

}
/*모바일*/
@media (max-width:767px){
    #sec1{height:40vh;}
    #sec1 .sec1_in .tit{width:80%;}
    
    #sec2 .sec2_in{padding:80px 15px 0;margin-bottom:60px;}
    #sec2 .sec2_in .tit{padding:0;}
    #sec2 .sec2_in .tit h2{font-size:13px;letter-spacing: 3px;margin-bottom:35px;}
    #sec2 .sec2_in .tit h3{font-size:26px;padding-bottom:15px;}

    #sec2 .sec2_in .sec2_slider .sec2_pagi{display: none;}
    #sec2 .sec2_in .sec2_slider .swiper-wrapper{width:100%;left:0;right:0;}
    #sec2 .sec2_in .sec2_slider{width:100%;height:430px;margin:0;}
    
    #sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt h2{margin:35% 0 15%;font-size:24px;}
    #sec2 .sec2_in .sec2_slider .swiper-wrapper .swiper-slide .txt p{font-size:13px;line-height:22px;padding:0;}
}

@media (max-width:680px){

    #sec2 .sec2_prev { color: #fff; top: 68%; left: 30px; }
    #sec2 .sec2_next { color: #fff; top: 68%; right: 30px;  }

}