@charset "utf-8";
body{font-family: 'Poppins';font-size:13.5px;}
#header .gnb > li.on:before{content: '';width:20px;height:2px;background: #8BBDFF;position: absolute;left:15px;bottom:10px;opacity: 1;transition: all .3s;}

/*sec1*/

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

#sec1 .sec1_in .tit{font-size:38px;color:#fff;font-family: 'Raleway';position: absolute;left:50%;top:56%;transform: translate(-50%,-0%);z-index: 1;opacity: .8;font-weight: 500;}

/*sec2*/

#sec4{width:100%;overflow: hidden;}
#sec4 .sec4_in{width:100%;height:969px;box-sizing: border-box;padding-top:112px;position: relative;}
#sec4 .sec4_in .tit{margin:0 auto 0;width:1200px;}
#sec4 .sec4_in .tit h2{font-size:14px;letter-spacing: 4px;margin-bottom:25px;}
#sec4 .sec4_in .tit h3{font-size:40px;font-family: 'Noto serif KR';font-weight: bold;padding-bottom:55px;}

#sec4 .sec4_in .box_shadow{width:1300px;height:600px;position: absolute;left:50%;transform: translateX(-50%);top:261px;}
#sec4 .sec4_in .box_shadow .sha{width:900px;height:550px;position: absolute;top:0px;z-index: 15;box-sizing: border-box;right:65px;box-shadow: 0 30px 50px rgba(0,0,0,.2);}

#sec4 .sec4_in .sec4_slider{width:1200px;margin:15px auto 0;position: relative;height:550px;box-sizing: border-box;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper{left:285px;top:0px;right:15px;bottom:0;box-sizing: border-box;width:900px;height:550px;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img1{background: url(../images/sub6/image1.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img2{background: url(../images/sub6/image2.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img3{background: url(../images/sub6/image3.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img4{background: url(../images/sub6/image4.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img5{background: url(../images/sub6/image5.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img6{background: url(../images/sub6/image6.png)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img7{background: url(../images/sub6/image7.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img8{background: url(../images/sub6/image8.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img9{background: url(../images/sub6/image9.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img10{background: url(../images/sub6/image10.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img11{background: url(../images/sub6/image11.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img12{background: url(../images/sub6/image12.png)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img13{background: url(../images/sub6/image13.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img14{background: url(../images/sub6/image14.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img15{background: url(../images/sub6/image15.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img16{background: url(../images/sub6/image16.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img17{background: url(../images/sub6/image17.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img18{background: url(../images/sub6/image18.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img19{background: url(../images/sub6/image19.jpg)no-repeat 50% 50%;background-size: cover;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .img20{background: url(../images/sub6/image20.jpg)no-repeat 50% 50%;background-size: cover;}

#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide{position: relative;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .cover{position: absolute;left:0;top:0;width:900px;height:100%;background: #000;opacity: .3;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt{color:#fff;text-align: center;position: absolute;width:900px;left:0;top:0;height:100%;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt h2{line-height:30px;font-size:30px;font-family: 'Noto serif KR';margin:110px 0 320px;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt p{line-height:30px;font-family: 'Noto sans KR';font-size:14px;}

#sec4 .sec4_in .sec4_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;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt a:after{content: '';width:22px;height:1px;background: #fff;position: absolute;left:-11px;top:24px;transition: all .5s ease;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt a:before{content: '';width:22px;height:1px;background: #fff;position: absolute;right:-11px;top:24px;transition: all .5s ease;}

#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt a:hover{color:#000;background: #fff;border:1px solid #000;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt a:hover:before{background: #000;}
#sec4 .sec4_in .sec4_slider .swiper-wrapper .swiper-slide .txt a:hover:after{background: #000;}

#sec4 .sec4_in .sec4_slider .sec4_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);}
#sec4 .sec4_in .sec4_slider .sec4_pagi .swiper-pagination-bullet{height:24px;border-radius: 0;margin:0;color:#7e7d7d;background: #fff;transition: all .5s ease;}
#sec4 .sec4_in .sec4_slider .sec4_pagi .swiper-pagination-bullet-active{color:#111;padding-left:10px;position: relative;}
#sec4 .sec4_in .sec4_slider .sec4_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;}
#sec4 .sec4_in .sec4_slider .sec4_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;}

#sec4 .sec4_in .sec4_slider .sec4_pagi span{position: absolute;font-size:14px;font-family: 'Noto sans KR';background: #fff;height:24px;width:110px;opacity: 1;}

#sec4 .sec4_in .sec4_slider .sec4_pagi span:hover:before{opacity: 1;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:hover{padding-left:10px;}

#sec4 .sec4_in .sec4_slider .sec4_pagi span:first-child{left:-1px;top:-12px;width:90px}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(2){left:-1px;top:12px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(3){left:-1px;top:36px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(4){left:-1px;top:60px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(5){left:-1px;top:84px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(6){left:-1px;top:108px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(7){left:-1px;top:132px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(8){left:-1px;top:156px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(9){left:-1px;top:180px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(10){left:-1px;top:204px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(11){left:-1px;top:228px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(12){left:-1px;top:252px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(13){left:-1px;top:276px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(14){left:-1px;top:300px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(15){left:-1px;top:324px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(16){left:-1px;top:348px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(17){left:-1px;top:372px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(18){left:-1px;top:396px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(19){left:-1px;top:420px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(20){left:-1px;top:444px;}

#sec4 .sec4_in .sec4_slider .sec4_pagi span:after{width:100%;line-height:24px;text-align: left;display: block;letter-spacing: .5px;}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:first-child:after{content: '설악해수욕장';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(2):after{content: '낙산사';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(3):after{content: '낙산해수욕장';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(4):after{content: '영금정,동명향';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(5):after{content: '아바이마을,갯배';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(6):after{content: '속초해수욕장';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(7):after{content: '대포항';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(8):after{content: '엑스포타워,공원';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(9):after{content: '설악산';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(10):after{content: '설악워터피아';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(11):after{content: '속초관광수산시장';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(12):after{content: '척산온천';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(13):after{content: '설악해맞이공원';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(14):after{content: '영랑호';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(15):after{content: '울산바위';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(16):after{content: '설악케이블카';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(17):after{content: '비선대';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(18):after{content: '물치항';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(19):after{content: '설악항';}
#sec4 .sec4_in .sec4_slider .sec4_pagi span:nth-child(20):after{content: '대관령양떼목장';}