@charset "utf-8";

/*section 1 start*/

#sec1{ width:100%; height:100vh; position: relative; overflow: hidden; }
#sec1 > img { position: absolute; z-index: 101; bottom: -1px; width: 100%;}

#sec1 > .title { position: absolute; top: 50%; left: 50%; z-index: 101; text-align: center; transform: translate(-50%,-50%);}

#sec1 > .title > h1 { display: inline-block; margin: 0px; color: rgba(255, 255, 255, 1); font-family: 'Dancing Script'; font-weight: normal; font-size: 108px; }
#sec1 > .title > h3 { margin: 0px; color: #fff; font-family: 'Open Sans'; font-weight: 300; font-size: 16px;}

#sec1 .sec1_slider {width:100%; height:100%; }
#sec1 .sec1_slider .swiper-slide {width:100%;height:100%;}

#sec1 .sec1_slider .swiper-slide.img1{background: url(../img/main/image1.jpg) no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img1 video { width: 100%; }
#sec1 .sec1_slider .swiper-slide.img2{background: url(../img/main/image2.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img3{background: url(../img/main/image3.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img4{background: url(../img/main/image4.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img5{background: url(../img/main/image5.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img6{background: url(../img/main/image6.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img7{background: url(../img/main/image7.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img8{background: url(../img/main/image8.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img9{background: url(../img/main/image9.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img10{background: url(../img/main/image10.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img11{background: url(../img/main/image11.jpg)no-repeat 50% 50%;background-size: cover;}
#sec1 .sec1_slider .swiper-slide.img12{background: url(../img/main/image12.jpg)no-repeat 50% 50%;background-size: cover;}

.sec1_slider .swiper-navi-wrapper > div { position: relative; width: 100%; height: 100%; }

.sec1-prev { content: ''; position: absolute; top: 50%; left: 40px; transform: translateY(-50%); width: 28px; height: 28px; background: url(../img/arrow.png); }
.sec1-next { content: ''; position: absolute; top: 50%; right: 40px; transform: rotateY(180deg) translateY(-50%); width: 28px; height: 28px; background: url(../img/arrow.png); }

.sec1-next { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.insertBefore(document.createElement("i"), this.firstChild).className = "next-after", this.firstChild.innerHTML = '>' ) }

.sec1_pagi { left: 50%; bottom: 36%; transform: translateX(-50%); }

.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .sec1_pagi {
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    letter-spacing: 1;
    font-size: 14px;
    color: #FFF;
}


/*section 1 end*/

section div .subject { padding-top: 70px; }
section div .subject h2 { position: relative; max-width: 100%; margin: 20px auto 40px; padding: 0; font-family: 'Dancing Script'; font-size: 72px;  }
section div .subject h2 p { position: absolute; bottom: -20px; margin: 0px; width: 100%; font-size: 14px; letter-spacing: 22; text-align: center ; }
section div .subject > p { font-size: 12px; line-height: 22px; }

/*section 2 start*/

#sec2 { padding: 0px 20px; width:100%; height: 1000px; overflow: hidden; } 
#sec2 .sec2-in { position: relative; margin: 0px auto; max-width: 1250px; text-align: center; }

#sec2 .sec2-in .sec2_slider { margin: 60px auto; max-width: 1080; height: 500px; background: #EAEAEA; }

#sec2 .sec2_slider .swiper-slide { position: relative; }
#sec2 .sec2_slider .swiper-slide.img1{background: url(../img/sub2/1/image0.jpg) no-repeat 0% 50%;background-size: contain;}
#sec2 .sec2_slider .swiper-slide.img2{background: url(../img/sub2/2/image0.jpg) no-repeat 0% 50%;background-size: contain;}
#sec2 .sec2_slider .swiper-slide.img7{background: url(../img/sub2/7/image3.jpg) no-repeat 0% 50%;background-size: contain;}
#sec2 .sec2_slider .swiper-slide.img3{background: url(../img/sub2/3/image0.jpg) no-repeat 0% 50%;background-size: contain;}
#sec2 .sec2_slider .swiper-slide.img4{background: url(../img/sub2/4/image0.jpg) no-repeat 0% 50%; background-size: contain; }
#sec2 .sec2_slider .swiper-slide.img5{background: url(../img/sub2/5/image0.jpg) no-repeat 0% 50%; background-size: contain; }
#sec2 .sec2_slider .swiper-slide.img6{background: url(../img/sub2/6/image0.jpg) no-repeat 0% 50%; background-size: contain; }

#sec2 .sec2_slider .swiper-slide > div { position: relative; float: right; width: 50%; height: 100%; background: #f4f4f4; }
#sec2 .sec2_slider .swiper-slide > div > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 100px; }
#sec2 .sec2_slider .swiper-slide > div > div > h3 { margin: 0px 0px 20px; font-family: 'Dancing Script'; font-size: 32px; }
#sec2 .sec2_slider .swiper-slide > div > div > p { margin: 0; font-size: 12px; line-height: 24px; }
#sec2 .sec2_slider .swiper-slide > div > a { position: absolute; bottom: 100px; right: 100px; height: 20px; }
#sec2 .sec2_slider .swiper-slide > div > a > p { position: relative; text-align: right; font-size: 12px; padding-bottom: 3px; border-bottom: 2px dotted #768cb7;}

.sec2_slider .swiper-navi-wrapper > div { position: absolute; width: 100%; height: 100%; }

.sec2-prev { content: ''; position: absolute; top: 615px; left: 0px; width: 29px; height: 29px; background: url(../img/arrow2.png); }
.sec2-prev:hover { background: url(../img/arrow2-hover.png); }

.sec2-next { content: ''; position: absolute; top: 615px; right: 0px; transform: rotateY(180deg); width: 29px; height: 29px; background: url(../img/arrow2.png); }
.sec2-next:hover { background: url(../img/arrow2-hover.png); }

.sec2_pagi { left: 50%; bottom: -80px; transform: translateX(-50%); }

/*section 2 end*/
/*section 3 start*/

#sec3 { position: relative; width: 100%; height: 700px; max-height: 100vh; }
#sec3 img { position: absolute; }
#sec3 img:nth-of-type(1) { top: -1px; transform: rotateX(180deg); width: 100%; }
#sec3 img:nth-of-type(2) { bottom: -1px; width: 100%; }

#sec3 .sec3-in { width: 100%; height: 100%; background: url(../img/main/image9.jpg) no-repeat; background-position: 50% 50%; background-size: cover; text-align: center; }

#sec3 .sec3-in .text-box { position: relative; position: relative; width: 100%; height: 100%; }
#sec3 .sec3-in .text-box div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#sec3 .sec3-in .text-box h3 { margin: 0; font-family: 'Nanum Myeongjo'; font-size: 32px; }
#sec3 .sec3-in .text-box p { margin: 10px 0px 0px; font-size: 14px; }

/*section 3 end*/
/*section 4 start*/

#sec4{ padding: 0px 10px; width:100%; height: auto; overflow: hidden; background: url(../img/background.jpg) no-repeat bottom; background-position: 100% 100.1%; background-size: 100%; } 
#sec4 .sec4-in { margin: 0px auto; max-width: 1080px; text-align: center; }

#sec4 .sec4-in .subject { padding: 70px 10px 0px; }

#sec4 .sec4-in .timeline { position: relative; padding-bottom: 100px; width: 100%; overflow: hidden; }
#sec4 .sec4-in .timeline .top { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; background: #f4f4f4; border-radius: 50%; }
#sec4 .sec4-in .timeline .top::before { content: ''; position: absolute; top: 4px; left: 54%; transform: translateX(-4px); width: 7px; height: 7px; background: #a2b2d0; border-radius: 50%; }

#sec4 .sec4-in .timeline .bottom { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 15px; height: 15px; background: #f4f4f4; border-radius: 50%; }
#sec4 .sec4-in .timeline .bottom::before { content: ''; position: absolute; bottom: 4px; left: 54%; transform: translateX(-4px); width: 7px; height: 7px; background: #a2b2d0; border-radius: 50%; }

#sec4 .sec4-in .timeline .content { position: relative; width: 100%; height: 100%; }
#sec4 .sec4-in .timeline::before { content: ''; position: absolute; top: 53%; left: 50%; transform: translate(-50%, -50%); width: 3px; height: 98%; background: #f4f4f4; }

#sec4 .sec4-in .timeline .content > div { position: relative; width: 50%; height: auto; padding-top: 0px; }
#sec4 .sec4-in .timeline .content > div:nth-child(1) { padding-top: 80px; }
#sec4 .sec4-in .timeline .content > div:nth-child(n+2) { padding-top: 40px; }

#sec4 .sec4-in .timeline .content > div:nth-child(2) { margin-top: 350px; }

#sec4 .sec4-in .timeline .content > div:nth-child(odd) { float: left; }
#sec4 .sec4-in .timeline .content > div:nth-child(even) { float: right; }
#sec4 .sec4-in .timeline .content > div:nth-child(even) > div { float: right; }
#sec4 .sec4-in .timeline .content > div:last-child { margin-top: 0px; }

#sec4 .sec4-in .timeline .content > div:nth-child(odd) > .circle { position: absolute; right: -35px; z-index: 100; width: 70px; height: 70px; background: #f4f4f4; border-radius: 50%; }
#sec4 .sec4-in .timeline .content > div:nth-child(even) > .circle { position: absolute; z-index: 100; left: -35px; width: 70px; height: 70px; background: #f4f4f4; border-radius: 50%; }

#sec4 .sec4-in .timeline .content > div:nth-child(1) > .circle { top: 110px; }
#sec4 .sec4-in .timeline .content > div:nth-child(2) > .circle { top: 110px; }
#sec4 .sec4-in .timeline .content > div:nth-child(3) > .circle { top: 110px; }
#sec4 .sec4-in .timeline .content > div:nth-child(4) > .circle { top: 110px; }
#sec4 .sec4-in .timeline .content > div:nth-child(5) > .circle { top: 110px; }

#sec4 .sec4-in .timeline .content > div > .circle:hover img { transform: rotate(360deg); }
#sec4 .sec4-in .timeline .content > div > .circle > img { padding: 19px 20px; }

#sec4 .sec4-in .timeline .content > div:nth-child(odd) > div .triangle { content: ''; position: absolute; top: 92px; right: -10px; transform: rotate(45deg); width: 20px; height: 20px; border: 2px solid #e9ecf3; border-left-color: #FFF; border-bottom-color: #FFF; background: #FFF; }
#sec4 .sec4-in .timeline .content > div:nth-child(even) > div .triangle { content: ''; position: absolute; top: 92px; left: -10px; transform: rotate(225deg); width: 20px; height: 20px; border: 2px solid #e9ecf3; border-left-color: #FFF; border-bottom-color: #FFF; background: #FFF; }

#sec4 .sec4-in .timeline .content > div > div:hover { background: #f4f4f4; }
#sec4 .sec4-in .timeline .content > div > div:hover .triangle { background: #f4f4f4; border-left-color: #f4f4f4; border-bottom-color: #f4f4f4; }


#sec4 .sec4-in .timeline .content > div > div:nth-child(2) { position: relative; width: 80%; border: 2px solid #e9ecf3; padding: 8% 5%; }

#sec4 .sec4-in .timeline .content > div > div > h3 { margin: 0px 0px 5px; font-family: 'Dancing Script'; font-size: 42px; }
#sec4 .sec4-in .timeline .content > div > div > p { margin: 0px; font-size: 12px; line-height: 24px; }
#sec4 .sec4-in .timeline .content > div > div > p:nth-of-type(1) { color: #768cb7; }

#sec4 .sec4-in .timeline .content > div > div > .image { width: 100%%; margin: 32px auto; overflow: hidden; } 
#sec4 .sec4-in .timeline .content > div > div > .image > img { width: 100%; }

#sec4 .sec4-in .timeline .content > div > div:hover .image img { transform: scale(1.2);}

#sec4 .sec4-in .timeline .content > div > div > .link { width: 60px; height: 20px; margin: 30px auto 0px; border-bottom: 2px dotted #a6b3ce; }
#sec4 .sec4-in .timeline .content > div > div > .link > a { width: 60px; height: 20px; font-size: 12px; }


#sec4 .sec4-in .info { padding: 0px 10px; margin-top: 100px; width: 100%; height: 900px; }
#sec4 .sec4-in .info .subject { padding-top: 0px; }
#sec4 .sec4-in .info .link { margin: 30px auto; width: 154px; height: 40px; background: #a2b2d0; }
#sec4 .sec4-in .info .link a { padding: 15px 47px; font-size: 12px; color: #FFF; line-height: 40px; font-weight: 600; }

/*section 4 end*/
/*section 5 start*/

#sec5 { padding: 0px 20px; position: relative; width: 100%; height: 1000px; overflow: hidden; background: #f4f4f4; }
#sec5 .sec5-in { margin: 0px auto; max-width: 1080px; width: 100%; text-align: center; }

#sec5 .sec5-in .travel { margin-top: 60px; position: relative; width: 100%; height: 536px; }
#sec5 .sec5-in .travel .place { position: absolute; padding: 15px; }

.place:nth-child(1) { top: 0; left: 0; max-width: 267px; width: 100%; height: 267px; background: url(../img/sub6/9.jpg) no-repeat 100%; background-size: cover; }
.place:nth-child(2) { top: 0; left: 271px; max-width: 267px; width: 100%; height: 267px; background: url(../img/sub6/4.jpg) no-repeat; background-size: cover; }
.place:nth-child(3) { top: 0; left: 542px; max-width: 267px; width: 100%; height: 267px; background: url(../img/sub6/5.jpg) no-repeat right; background-size: cover; }
.place:nth-child(4) { top: 0; left: 813px; max-width: 267px; width: 100%; height: 538px; background: url(../img/sub6/6.jpg) no-repeat center; background-size: cover; }
.place:nth-child(5) { top: 271px; left: 0; max-width: 537px; width: 100%; height: 267px; background: url(../img/sub6/1.jpg) no-repeat; background-size: cover; }
.place:nth-child(6) { top: 271px; left: 542px; max-width: 267px; width: 100%; height: 267px; background: url(../img/sub6/2.jpg) no-repeat ; background-size: cover; }

#sec5 .sec5-in .travel .place:hover > div > div { opacity: 1; }

#sec5 .sec5-in .travel .place > div { position: relative; width: 100%; height: 100%; }
#sec5 .sec5-in .travel .place > div > div { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.9); opacity: 0; }
#sec5 .sec5-in .travel .place > div > div > div { position: absolute; top: 43%; left: 50%; transform: translate(-50%); width: 100%; height: 100%;}
#sec5 .sec5-in .travel .place > div > div > div > h3 { margin: 0; font-family: 'Nanum Myeongjo'; }
#sec5 .sec5-in .travel .place > div > div > div > a {  font-size: 12px; line-height: 24px; color: #768cb7; }

#footer > img { position: absolute; top: -1px; z-index: 100; width: 100%; }


@media (max-width: 1200px) {
    
    .sec2-prev { top: 905px; }
    .sec2-next { top: 905px; }
    
}

@media (max-width: 1120px) {
    
    #sec5 { height: 1380px; }

    #sec5 .sec5-in { margin: 0px auto; max-width: 1080px; text-align: center; }

    #sec5 .sec5-in .travel { margin-top: 60px; position: relative; width: 100%; height: 906px; }
    #sec5 .sec5-in .travel .place { position: absolute; padding: 15px; }

    .place:nth-child(1) { top: 0; left: 0; max-width: 32%; width: 100%; height: 32%; background: url(../img/sub6/9.jpg) no-repeat 100%; background-size: cover; }
    .place:nth-child(2) { top: 0; left: 34%; max-width: 32%; width: 100%; height: 32%; background: url(../img/sub6/4.jpg) no-repeat; background-size: cover; }
    .place:nth-child(3) { top: 0; left: 68%; max-width: 32%; width: 100%; height: 32%; background: url(../img/sub6/5.jpg) no-repeat; background-size: cover; }
    .place:nth-child(4) { top: 68%; left: 0%; max-width: 100%; width: 100%; height: 32%; background: url(../img/sub6/6.jpg) no-repeat; background-size: cover; }
    .place:nth-child(5) { top: 34%; left: 0%; max-width: 66%; width: 100%; height: 32%; background: url(../img/sub6/1.jpg) no-repeat; background-size: cover; }
    .place:nth-child(6) { top: 34%; left: 68%; max-width: 32%; width: 100%; height: 32%; background: url(../img/sub6/2.jpg) no-repeat ; background-size: cover; }
    
    
    #sec5 .sec5-in .travel .place { padding: 0px; overflow: hidden; }
    #sec5 .sec5-in .travel .place > div > div { top: auto; bottom: 0px; width: 101%; height: 120px; background: linear-gradient(to top,  rgba(255,255,255,1) 0%, rgba(255,255,255,.8) 40%, rgba(255,255,255,.5) 70%, rgba(255,255,255,0) 100%); opacity: 1; transform: translate(-50%,0%); }
    #sec5 .sec5-in .travel .place > div > div > div { top: auto; bottom: 0px; height: 100%; transform: translate(-50%,0%);}
    #sec5 .sec5-in .travel .place > div > div > div > h3 { color: #545354; margin-top: 60px; }
    
} 


@media (max-width: 1020px) {
    
    #sec4 .sec4-in .info { height: 780px; }
    #sec4 .sec4-in .info img { max-width: 400px; width: 100%; }
    
}

@media (max-width: 998px) {
    
    #sec1{ height:70vh; }
    
    #sec1 > .title > h1 { font-size: 98px; }
    #sec1 > .title > h3 { font-size: 14px;}
    
    .sec1-next { right: 20px; }
    .sec1-prev { left: 20px; }
    
    section div .subject h2 { font-size: 58px; }
    
}


@media (max-width: 868px) {

    
    #sec5 .sec5-in { margin: 0px auto; max-width: 100%; text-align: center; }

    .place:nth-child(1) { top: 0; left: 0; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/9.jpg) no-repeat 100%; background-size: cover; }
    .place:nth-child(2) { top: 0; left: 51%; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/4.jpg) no-repeat; background-size: cover; }
    .place:nth-child(3) { top: 34%; left: 0%; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/5.jpg) no-repeat; background-size: cover; }
    .place:nth-child(4) { top: 68%; left: 51%; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/6.jpg) no-repeat; background-size: cover; }
    .place:nth-child(5) { top: 34%; left: 51%; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/1.jpg) no-repeat; background-size: cover; }
    .place:nth-child(6) { top: 68%; left: 0%; max-width: 49%; width: 100%; height: 32%; background: url(../img/sub6/2.jpg) no-repeat ; background-size: cover; }

    } 
    

@media (max-width: 768px) {
    
    #sec1 > .title > h1 { font-size: 58px; }
    #sec1 > .title > h3 { font-size: 12px; }
    
    section div .subject h2 { font-size: 42px;  }
    section div .subject h2 p { letter-spacing: 10; }
    
    .sec2-prev { top: 880px; }
    .sec2-next { top: 880px; }
    
    #sec3 .sec3-in .text-box h3 { font-size: 24px; }
    
    #sec4 .sec4-in .timeline .top { left: 35px; }
    #sec4 .sec4-in .timeline .bottom { left: 35px; }
    
    #sec4 .sec4-in .timeline .content > div { width: 100%; padding-top: 50px;}
    #sec4 .sec4-in .timeline .content > div:nth-child(1) { margin-top: 20px; }
    #sec4 .sec4-in .timeline .content > div:nth-child(odd),
    #sec4 .sec4-in .timeline .content > div:nth-child(even) { float: right; }
    #sec4 .sec4-in .timeline .content > div:nth-child(2),
    #sec4 .sec4-in .timeline .content > div:last-child { margin-top: 0px; }
    #sec4 .sec4-in .timeline .content > div > div { float: right; }
    
    #sec4 .sec4-in .timeline .content > div:nth-child(odd) > .circle,
    #sec4 .sec4-in .timeline .content > div:nth-child(even) > .circle { left: 0px; right: auto; }
    
    #sec4 .sec4-in .timeline .content > div:nth-child(1) > .circle { top: 120px; left: 0px; }
    #sec4 .sec4-in .timeline .content > div:nth-child(2) > .circle { top: 120px; left: 0px; }
    #sec4 .sec4-in .timeline .content > div:nth-child(3) > .circle { top: 110px; left: 0px; }
    
    #sec4 .sec4-in .timeline .content > div:nth-child(odd) > div .triangle,
    #sec4 .sec4-in .timeline .content > div:nth-child(even) > div .triangle { left: -10px; transform: rotate(225deg); }
    #sec4 .sec4-in .timeline::before { left: 35px; top: 51%; height: 97%; } 

    #sec4 .sec4-in .info { margin-top: 50px; }
}

@media (max-width: 728px) { 
    #sec4 .sec4-in .info { height: 740px; }
}

@media (max-width: 648px) { 
    
    #sec2 { height: 980px; }
    
    #sec2 .sec2-in .sec2_slider { height: 480px;}
    #sec2 .sec2_slider .swiper-slide.img1{background: url(../img/sub2/1/image0.jpg) no-repeat; background-position: 50% -100px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img2{background: url(../img/sub2/2/image0.jpg)no-repeat; background-position:50% -100px; background-size: cover;}
    #sec2 .sec2_slider .swiper-slide.img3{background: url(../img/sub2/3/image0.jpg)no-repeat; background-position:50% -50px; background-size: cover;}
    #sec2 .sec2_slider .swiper-slide.img4{background: url(../img/sub2/4/image0.jpg)no-repeat; background-position:50% -100px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img5{background: url(../img/sub2/5/image0.jpg)no-repeat; background-position:50% -100px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img6{background: url(../img/sub2/6/image0.jpg)no-repeat; background-position:50% -100px; background-size: cover; }
    
    #sec2 .sec2_slider .swiper-slide > div { position: absolute; bottom: 0; width: 100%; height: 29%;  }
    #sec2 .sec2_slider .swiper-slide > div > div { position: relative; top: 0 !important; left: auto; transform: none; width: auto; height: 10%; text-align: left; }
    #sec2 .sec2_slider .swiper-slide > div > div > h3 { margin: 20px 0px 0px 20px; font-size: 32px; line-height: 40px; }
    #sec2 .sec2_slider .swiper-slide > div > div > p { margin: 0px 0px 0px 20px; font-size: 11px; line-height: 22px; }
    #sec2 .sec2_slider .swiper-slide > div > div > p:nth-child(2) { margin-top: 10px; }

    #sec2 .sec2_slider .swiper-slide > div > div { top: 45%; }
    #sec2 .sec2_slider .swiper-slide > div > a { bottom: 40px; right: 20px; }
    
    .sec2_pagi { bottom: -60px; }
    
    .sec2-prev { top: 850px; }
    .sec2-next { top: 850px; }
}


@media (max-width: 621px) {
    
    #sec5 { height: 1960px; }

    #sec5 .sec5-in .travel { margin-top: 60px; position: relative; width: 100%; height: 1606px; }

    .place:nth-child(1) { top: 0%; left: 0; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/9.jpg) no-repeat 100%; background-size: cover; }
    .place:nth-child(2) { top: 16%; left: 0%; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/4.jpg) no-repeat; background-size: cover; }
    .place:nth-child(3) { top: 32%; left: 0%; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/5.jpg) no-repeat; background-size: cover; }
    .place:nth-child(4) { top: 48%; left: 0%; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/6.jpg) no-repeat; background-size: cover; }
    .place:nth-child(5) { top: 64%; left: 0%; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/1.jpg) no-repeat; background-size: cover; }
    .place:nth-child(6) { top: 80%; left: 0%; max-width: 100%; width: 100%; height: 15.4%; background: url(../img/sub6/2.jpg) no-repeat ; background-size: cover; }
    
}


@media (max-width: 520px) { 
    
    #sec4 .sec4-in .timeline .content::before { left: 15px; }
    
    #sec4 .sec4-in .timeline .top { left: 25px; }
    #sec4 .sec4-in .timeline .bottom { left: 25px; }
    
    #sec4 .sec4-in .timeline .content > div:nth-child(odd) > .circle,
    #sec4 .sec4-in .timeline .content > div:nth-child(even) > .circle { left: 0px; width: 50px; height: 50px; }
    
    #sec4 .sec4-in .timeline .content > div > .circle > img { padding: 12px 10px; width: 45px; }
    
    
    #sec4 .sec4-in .timeline .content > div:nth-child(odd) > div .triangle,
    #sec4 .sec4-in .timeline .content > div:nth-child(even) > div .triangle { top: 87px; left: -5; width: 10px; height: 10px; }
    
    
    
    #sec4 .sec4-in .timeline::before { top: 52%; left: 25px; height: 99%; } 
    

}

@media (max-width: 480px) {
    
    .sec1-prev { display: none; }
    .sec1-next { display: none; }
    
}


@media (max-width: 420px) {
    
    #sec4 .sec4-in .info { height: 720px; }
    section div .subject h2 { font-size: 32px; }
    
}


@media (max-width: 400px) {
    
    #sec2 { height: 820px; }
    
    #sec2 .sec2-in .sec2_slider { height: 320px;}
    #sec2 .sec2_slider .swiper-slide.img1{background: url(../img/sub2/2/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img2{background: url(../img/sub2/2/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover;}
    #sec2 .sec2_slider .swiper-slide.img3{background: url(../img/sub2/3/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover;}
    #sec2 .sec2_slider .swiper-slide.img4{background: url(../img/sub2/4/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img5{background: url(../img/sub2/5/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide.img6{background: url(../img/sub2/6/image0.jpg) no-repeat; background-position:50% -60px; background-size: cover; }
    #sec2 .sec2_slider .swiper-slide > div { position: absolute; bottom: 0; width: 100%; height: 22%;  }    
    
    #sec2 .sec2_slider .swiper-slide > div > div > h3 { margin: 20px 0px 0px 20px; font-size: 20px; line-height: 32px; }
    #sec2 .sec2_slider .swiper-slide > div > div > p { display: none; }
    #sec2 .sec2_slider .swiper-slide > div > a { right: 20px; bottom: 35px; }
    
    
    .sec2-prev { top: 690px; }
    .sec2-next { top: 690px; }
    
    #sec4 .sec4-in .info { height: 680px; }
    
}


@media (max-width: 360px) {
    #sec4 .sec4-in .info { height: 640px; }
}