@charset "utf-8";
:root{
    --count: 1;
}
.sub3_ .swiper-button-next, .sub3_ .swiper-button-prev{color:#fff; top:0; left:auto; right:auto; bottom:auto; height:auto; margin-top: 0;}

.sub3_ .swiper-button-next{ justify-content: flex-start; cursor: url(../img/right-arrow.png),auto; right:0;}
.sub3_ .swiper-button-prev{ justify-content: flex-start; cursor: url(../img/left-arrow.png),auto; left:0;}

.sub3_ .swiper-button-next:after, .sub3_ .swiper-button-prev:after{display: none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));}
header{width: 100%; height: 100px; top:0; left:50%; opacity:0; background:rgba(0,0,0,.3);transform:translate(-50%, 0); transition: all .6s ease; position: fixed; z-index: 999999; opacity:1;}
section{padding: 130px 0;scroll-behavior: smooth;}
section.p40{padding: 40px 0;}
.container { width: 1400px; margin: auto; position: relative; height: auto;}
.container.fw_container { width: 100%; }

#section1{}
#section1 .bg{width:100%; height: 71vh; background:url(../img/sub3/1/image1.jpg) 50% 40% no-repeat; background-size: cover;}
#section1 .title_con{width: 100%; position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); text-shadow: 0 1px 2px rgba(0,0,0,.6);}
#section1 .title_con h4{ color:#fff; font-size: 16px;}
#section1 .title_con h2{ color:#fff; font-size: 50px; margin-top: 20px; font-weight: 500; letter-spacing: 4px;}

#section2 .container > div{margin-bottom:60px;}
#section2 .container > div:nth-child(3){margin-bottom:0px;}
#section2 .five_con{margin:0 auto; width: 600px; display: flex; justify-content: space-between; }
#section2 .five_con .contents{width: 20%; min-width: 148px; aspect-ratio: 1/ 1; border-radius: 20px; overflow: hidden;}
#section2 .five_con .contents:hover a{opacity: 1;}
#section2 .five_con .contents.contents1{ background:url(../img/sub3/1/image3.jpg) 50% no-repeat; background-size: cover;}
#section2 .five_con .contents.contents2{ background:url(../img/sub3/2/image1.jpg) 50% no-repeat; background-size: cover;}
#section2 .five_con .contents.contents3{ background:url(../img/sub3/3/image6.jpg) 50% no-repeat; background-size: cover;}

#section2 .five_con .contents a{position: relative; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; background:rgba(0,0,0,.4); transition: all .3s ease; opacity: 0; }
#section2 .five_con .contents a i{color: #fff; font-size: 40px; }

/*

 마우스커서 
#section3 .sub3_swiper_1{ cursor: none !important; }
#section4 .sub3_swiper_2{ cursor: none !important; }
#section5 .sub3_swiper_3{ cursor: none !important; }
#section6 .sub3_swiper_4{ cursor: none !important; }
#section7 .sub3_swiper_5{ cursor: none !important; }
*/

/*
#section3 .sub3_swiper_1 .swiper-slide-active{ cursor: url("../img/left-arrow.png") 15 30, auto ; }
#section4 .sub3_swiper_2 .swiper-slide-active{ cursor: url("../img/left-arrow.png") 15 30, auto ; }
#section5 .sub3_swiper_3 .swiper-slide-active{ cursor: url("../img/left-arrow.png") 15 30, auto ; }
#section6 .sub3_swiper_4 .swiper-slide-active{ cursor: url("../img/left-arrow.png") 15 30, auto ; }
#section7 .sub3_swiper_5 .swiper-slide-active{ cursor: url("../img/left-arrow.png") 15 30, auto ; }
#section3 .sub3_swiper_1 .swiper-slide-next{ cursor: url("../img/right-arrow.png") 15 30, auto ; }
#section4 .sub3_swiper_2 .swiper-slide-next{ cursor: url("../img/right-arrow.png") 15 30, auto ; }
#section5 .sub3_swiper_3 .swiper-slide-next{ cursor: url("../img/right-arrow.png") 15 30, auto ; }
#section6 .sub3_swiper_4 .swiper-slide-next{ cursor: url("../img/right-arrow.png") 15 30, auto ; }
#section7 .sub3_swiper_5 .swiper-slide-next{ cursor: url("../img/right-arrow.png") 15 30, auto ; }
*/
.sub3_{position: relative;}
.container .text.pl{padding-left: 100px;}
#section3 .container{display: flex; }
#section3 .sub3_swiper_1{width:900px; aspect-ratio: 900 / 467; overflow:hidden; z-index:9; }
#section3 .sub3_.sub3_swiper_1 .swiper-button-next{width: 150px; aspect-ratio: 150 / 467; }
#section3 .sub3_.sub3_swiper_1 .swiper-button-prev{width: 700px; aspect-ratio: 700 / 467; }
#section3 .sub3_swiper_1 .swiper-wrapper{width: 100%; height: 100%;}
#section3 .sub3_swiper_1 .swiper-slide{width: 100%; height: 100%;}
#section3 .sub3_swiper_1 .swiper-slide.s1{ background:url(../img/sub3/1/image1.jpg) 50% no-repeat; background-size:cover;}
#section3 .sub3_swiper_1 .swiper-slide.s2{ background:url(../img/sub3/1/image2.jpg) 60% no-repeat; background-size:180%;}
#section3 .sub3_swiper_1 .swiper-slide.s3{ background:url(../img/sub3/1/image3.jpg) 50% no-repeat; background-size:cover;}
#section3 .sub3_swiper_1 .swiper-slide.s4{ background:url(../img/sub3/1/image4.jpg) 50% no-repeat; background-size:cover;}
#section3 .text{width: 100%; max-width: 500px; padding-top: 50px; position:relative;}
#section3 .text h5{font-size: 14px; margin-bottom: 20px;}
#section3 .text h2{font-size: 24px; margin-bottom: 30px; position: relative;}
#section3 .text h2:after{content: ''; position:absolute; width: 200vw; height:2px; background:#eaeaea; left:0; bottom: -15px; transform: translateX(-50%); }
#section3 .text p{font-size: 14px; line-height: 2.1em;}
#section3 .text p.br{margin-bottom: 30px;}
#section3 .text p.lh{line-height: 1.4em;}
#section3 .text p.tail{line-height: 1.4em; position: absolute; bottom:0; right: 0; text-align: right; padding:0 25px 15px;}

#section4 .container{display: flex; }
#section4 .sub3_swiper_2{width:900px; aspect-ratio: 900 / 467; overflow:hidden; z-index:9;}
#section4 .sub3_.sub3_swiper_2 .swiper-button-next{width: 150px; aspect-ratio: 150 / 467; }
#section4 .sub3_.sub3_swiper_2 .swiper-button-prev{width: 700px; aspect-ratio: 700 / 467; }
#section4 .sub3_swiper_2 .swiper-wrapper{width: 100%; height: 100%;}
#section4 .sub3_swiper_2 .swiper-slide{width: 100%; height: 100%;}
#section4 .sub3_swiper_2 .swiper-slide.s1{ background:url(../img/sub3/2/image1.jpg) 50% no-repeat; background-size:cover;}
#section4 .sub3_swiper_2 .swiper-slide.s2{ background:url(../img/sub3/2/image2.jpg) 50% no-repeat; background-size:cover;}
#section4 .sub3_swiper_2 .swiper-slide.s3{ background:url(../img/sub3/2/image3.jpg) 50% no-repeat; background-size:cover;}
#section4 .text{width: 100%; max-width: 500px; padding-top: 50px; position:relative;}
#section4 .text h5{font-size: 14px; margin-bottom: 20px;}
#section4 .text h2{font-size: 24px; margin-bottom: 30px; position: relative;}
#section4 .text h2:after{content: ''; position:absolute; width: 200vw; height:2px; background:#eaeaea; left:0; bottom: -15px; transform: translateX(-50%); }
#section4 .text p{font-size: 14px; line-height: 2.1em;}
#section4 .text p.br{margin-bottom: 30px;}
#section4 .text p.lh{line-height: 1.4em;}
#section4 .text p.tail{line-height: 1.4em; position: absolute; bottom:0; right: 0; text-align: right; padding:0 25px 15px;}

#section5 .container{display: flex; }
#section5 .sub3_swiper_3{width:900px; aspect-ratio: 900 / 467; overflow:hidden; z-index:9;}
#section5 .sub3_.sub3_swiper_3 .swiper-button-next{width: 150px; aspect-ratio: 150 / 467; }
#section5 .sub3_.sub3_swiper_3 .swiper-button-prev{width: 700px; aspect-ratio: 700 / 467; }
#section5 .sub3_swiper_3 .swiper-wrapper{width: 100%; height: 100%;}
#section5 .sub3_swiper_3 .swiper-slide{width: 100%; height: 100%;}
#section5 .sub3_swiper_3 .swiper-slide.s1{ background:url(../img/sub3/3/image1.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s2{ background:url(../img/sub3/3/image2.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s3{ background:url(../img/sub3/3/image3.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s4{ background:url(../img/sub3/3/image4.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s5{ background:url(../img/sub3/3/image5.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s6{ background:url(../img/sub3/3/image6.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s7{ background:url(../img/sub3/3/image7.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s8{ background:url(../img/sub3/3/image8.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s9{ background:url(../img/sub3/3/image9.jpg) 50% no-repeat; background-size:cover;}
#section5 .sub3_swiper_3 .swiper-slide.s10{ background:url(../img/sub3/3/image10.jpg) 50% no-repeat; background-size:cover;}
#section5 .text{width: 100%; max-width: 500px; padding-top: 50px; position:relative;}
#section5 .text h5{font-size: 14px; margin-bottom: 20px;}
#section5 .text h2{font-size: 24px; margin-bottom: 30px; position: relative;}
#section5 .text h2:after{content: ''; position:absolute; width: 200vw; height:2px; background:#eaeaea; left:0; bottom: -15px; transform: translateX(-50%); }
#section5 .text p{font-size: 14px; line-height: 2.1em;}
#section5 .text p.br{margin-bottom: 30px;}
#section5 .text p.lh{line-height: 1.4em;}
#section5 .text p.tail{line-height: 1.4em; position: absolute; bottom:0; right: 0; text-align: right; padding:0 25px 15px;}


@media screen and (min-width:1px) and (max-width:1400px){
    .container{width:100%; padding:0 20px;}
    .container.fw_container{padding:0px;}
    
    
    
}

@media screen and (min-width:1px) and (max-width:1200px){
    #section3 .text{padding-top: 10px; }
    #section4 .text{padding-top: 10px; }
    #section5 .text{padding-top: 10px; }

    
    #section3 .text p.tail{ padding:0 25px 10px;}
    #section4 .text p.tail{ padding:0 25px 10px;}
    #section5 .text p.tail{ padding:0 25px 10px;}

    
    #section3 .text p.br{margin-bottom: 20px;}
    #section4 .text p.br{margin-bottom: 20px;}
    #section5 .text p.br{margin-bottom: 20px;}

}


@media screen and (min-width:1px) and (max-width:1024px){
    .container{width:100%; padding:0 20px;}
    #section2 .five_con{ justify-content: space-around;}
    
    #section3 .container{ flex-direction: column;}
    #section4 .container{ flex-direction: column-reverse;}
    #section5 .container{ flex-direction: column;}

    
    #section3 .sub3_swiper_1{width:100%; aspect-ratio: 900 / 600; }
    #section4 .sub3_swiper_2{width:100%; aspect-ratio: 900 / 600; }
    #section5 .sub3_swiper_3{width:100%; aspect-ratio: 900 / 600; }

    
    #section3 .text{ width: 100%; padding-left:0; max-width: none;}
    #section4 .text{ width: 100%; padding-left:0; max-width: none;}
    #section5 .text{ width: 100%; padding-left:0; max-width: none;}

    
    #section3 .text p.tail{bottom: auto; top:0;padding:0; padding-top:62px;}
    #section4 .text p.tail{bottom: auto; top:0;padding:0; padding-top:62px;}
    #section5 .text p.tail{bottom: auto; top:0;padding:0; padding-top:62px;}

    
    .sub3_ .swiper-button-prev{ cursor:auto;}
    .sub3_ .swiper-button-next{ cursor:pointer;}
    
    #section3 .sub3_.sub3_swiper_1 .swiper-button-next{ display: none;}
    #section4 .sub3_.sub3_swiper_2 .swiper-button-next{ display: none;}
    #section5 .sub3_.sub3_swiper_3 .swiper-button-next{ display: none;}

    #section3 .sub3_.sub3_swiper_1 .swiper-button-prev{width:40px; height: 100%; aspect-ratio:auto; }
    #section4 .sub3_.sub3_swiper_2 .swiper-button-prev{width:40px; height: 100%; aspect-ratio:auto; }
    #section5 .sub3_.sub3_swiper_3 .swiper-button-prev{width:40px; height: 100%; aspect-ratio:auto; }


    .sub3_ .swiper-button-prev:after{display: block; padding-left:10px;}
    .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{content:'prev' !important; font-size: 32px !important;}
}
@media screen and (min-width:1px) and (max-width:880px){
    #section2 .five_con .contents{width: 20%; max-width: none; min-width: 100px; border-radius: 16px;}
}

@media screen and (min-width:1px) and (max-width:560px){
    .text h2{font-size: 22px !important;}
    .text p.tail{font-size: 10px !important;}
    #section2 .container{padding:0 10px;}
    #section2 .five_con { width: 100%; }
    #section2 .five_con .contents{ min-width: 64px; border-radius: 12px;}
    #section2 .five_con .contents a i{color: #fff; font-size: 30px; }
}