@charset 'utf-8';

.carousel { }
.carousel-control-next, .carousel-control-prev { display: none;}
.carousel .img-wrap { background-size: cover; background-position: center; background-repeat: no-repeat;}

#sub-visual-wrapper { position: absolute; left: 50%; top: calc(50% + 50px); transform: translate(-50%, -50%); z-index: 10; width: 100%; }
#sub-visual-wrapper .flex { flex-direction: column; justify-content: space-between;  }
#sub-visual-wrapper .flex .top {  padding-bottom: 14.4%;}
#sub-visual-wrapper .flex .top h2 { font-size: 24px; font-weight: 500; color: #fff; line-height: 1;  }
#sub-visual-wrapper .flex .top .page-nav {  display: flex; gap:30px; padding: 30px 0 0; margin: 0; line-height: 1;}
#sub-visual-wrapper .flex .top .page-nav li { list-style: none; position: relative;}
#sub-visual-wrapper .flex .top .page-nav li a { font-size: 16px; color: #fff; line-height: 1; font-weight: 300; }
#sub-visual-wrapper .flex .top .page-nav li a.home { display: inline-block; padding-left: 25px; background: url(/img/water/ico_home.png) no-repeat left center;}

#sub-visual-wrapper .flex .top .page-nav li:after { content:'\e940'; display: block; position: absolute; right: -22px; top:4px; font-family: xeicon!important; color: #fff; font-size: 14px; }
#sub-visual-wrapper .flex .top .page-nav li:last-of-type:after { display: none;}
#sub-visual-wrapper .flex .slogun { font-size: 75px; font-weight: 700; line-height: 1.5; color: #fff; word-break: keep-all;}

.carousel .scroll-down { position: absolute; right: 0; bottom:245px; transform: rotate(-90deg); transform-origin: right bottom; padding-left: 180px; color: #fff; font-weight: 500;}
.carousel .scroll-down:before { content:''; display: block; position: absolute; left: 0; top: 50%; width: 150px; height: 1px; background: #fff;  }



@media(max-width:1200px){
    #sub-visual-wrapper .flex .top { padding-bottom: 18%; }
    #sub-visual-wrapper .flex .slogun { font-size: 62px;}
}

@media(max-width:991px){
    #sub-visual-wrapper { left: 0; top: 80px; transform: none; height: calc(100% - 80px); }
    #sub-visual-wrapper .nt-container { height: 100%;}
    #sub-visual-wrapper .flex { height: 100%;}
    #sub-visual-wrapper .flex .top { padding:100px 0 0; }
    #sub-visual-wrapper .flex .top .page-nav { padding: 20px 0 0;}
    #sub-visual-wrapper .flex .slogun { padding: 0 0 80px; font-size: 52px;}
    .carousel .scroll-down { display: none;}
}

@media(max-width:768px){    
    #sub-visual-wrapper .flex .top { padding:70px 0 0; }
    #sub-visual-wrapper .flex .top .page-nav { padding: 15px 0 0;}
    #sub-visual-wrapper .flex .slogun { font-size: 40px;}    
}
@media(max-width:576px){    
    #sub-visual-wrapper .flex .top { padding:50px 0 0; }
    #sub-visual-wrapper .flex .top h2 { font-size: 20px;}
    #sub-visual-wrapper .flex .top .page-nav { padding: 10px 0 0; gap: 25px;}
    #sub-visual-wrapper .flex .top .page-nav li a { font-size: 13px;}
    #sub-visual-wrapper .flex .top .page-nav li a.home { padding-left: 20px; background-size: contain;}
    #sub-visual-wrapper .flex .top .page-nav li:after { right: -16px; font-size: 10px;}
    #sub-visual-wrapper .flex .slogun { padding: 0 0 70px; font-size: 32px;}    
    
        
}
@media(max-width:480px){
    #sub-visual-wrapper .flex .slogun { font-size: 28px;}    
}