@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

/* 공통속성 */
.container{width: 1090px; margin: 0 auto; height: inherit}
a{text-decoration: none; color: #eee}
/* ir 효과 */
.ir_so{overflow: hidden; width: 0; height: 0; position: absolute;line-height: 0; text-indent: -9999em;}
body{font-family: 'Nanum Gothic', sans-serif; background: #222;}

#wrap{width: 100%}
#header{position: fixed; width: 100%; z-index: 3; top: 0; left: 0}
.mobile-menu{
    width: 100%;
    height: 100vh;
    background:#141212;
    position: fixed;
    top: 0; left:-100%;
    z-index: 4;
}
.mobile-menu>div{
    padding: 0 30px;
    box-sizing: border-box;
}
.mobile-menu>div .mobile-modal-menu-bar{
    width:100%;
    height: 67px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-menu>div .mobile-modal-menu-bar .modal-logoBt-wrap{
    width: 30px;
    height: 30px;
}
.mobile-menu>div .mobile-modal-menu-bar .modal-logoBt-wrap a{display: block; width: 100%; height: 100%}
.mobile-menu>div .mobile-modal-menu-bar .modal-logoBt-wrap a img{width: 100%}
.mobile-menu>div .mobile-modal-menu-bar .modal-appBar-wrap{
    width: 22px;
    height: 16px;
}
.mobile-menu>div .mobile-modal-menu-bar .modal-appBar-wrap a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.mobile-menu>div .mobile-modal-menu-bar .modal-appBar-wrap a i{
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #fff;
    margin-top: -1px;
}
.mobile-menu>div .mobile-modal-menu-bar .modal-appBar-wrap a .appbar-line1{transform: rotate(45deg);}
.mobile-menu>div .mobile-modal-menu-bar .modal-appBar-wrap a .appbar-line2{transform: rotate(-45deg);}
.mobile-menu>div .mobile-modal-menu-list{width: 100%}
.mobile-menu>div .mobile-modal-menu-list ul{margin-top: 30px;}
.mobile-menu>div .mobile-modal-menu-list ul li{padding: 10px 0; border-bottom:1px solid rgba(255,255,255,.15);}
.mobile-menu>div .mobile-modal-menu-list ul li a{color: #eee}
.mobile-menu>div .mobile-modal-menu-footer{padding-top: 20px;}
.mobile-menu>div .mobile-modal-menu-footer p{
    font-size: 16px;
    line-height: 140%;
    color: rgba(255,255,255,.6);
    margin-bottom: 20px;
}

.mobile-menu>div .mobile-modal-menu-footer .mobile-modal-menu-footer-button button{background-color: #000; color:rgba(255,255,255,.6); padding: 5px 10px; display: inline-block;}
.mobile-menu>div .mobile-modal-menu-footer .mobile-modal-menu-footer-sns{margin-top: 20px;}
.mobile-menu>div .mobile-modal-menu-footer .mobile-modal-menu-footer-sns i{color: #eee}


#header{
    width: 100%;
}

.header-mobile-menu{
    display: none;
    width: 100%;
    position: relative;
    top: 0; 
    left:0
}
.header-mobile-menu .header-app-menu{
    
    width: 100%;
    height: 67px;
    border-bottom: 1px solid rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #a0b7bc;
    box-sizing: border-box;
    padding: 0 30px;
}
.header-mobile-menu .header-app-menu .app-bar-wrap{
    width: 30px;
    height: 30px;
    position: relative;
}
.header-mobile-menu .header-app-menu .app-bar-wrap a{
    display: block;
    width: 100%;
    height: 100%;
   
}
.header-mobile-menu .header-app-menu .app-bar-wrap a i{
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background:#000;
    left: 0
}
.header-mobile-menu .header-app-menu .app-bar-wrap a .appbar-line1{top:0;}
.header-mobile-menu .header-app-menu .app-bar-wrap a .appbar-line2{top:50%;}
.header-mobile-menu .header-app-menu .app-bar-wrap a .appbar-line3{top:100%;}
.header-mobile-menu .header-app-menu .app-search-wrap a .fa-search{
    color: #000;
    font-size: 20px;
}
#header>.container{position: relative;}
aside{position: absolute; right:0; top: 10px;}
aside span{position: relative; display: inline-block; text-align: center;}
aside span:not(:last-child):after{
    content: "";
    position: absolute;
    width: 1px;
    height: 12px;
    background: #eee;
    top: 3px; right: 0;
}
aside span a{color: #eee; padding: 0 20px}
aside span:last-child a{padding-right: 0}
.header-logoNav{
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav>span>a{color:#eee; font-size: 18px; padding: 0 10px}

/* main section1 */
#section1{position: relative; overflow: hidden;}
#section1>div{}
#section1>div .video{}
#section1>div .video video{width: 100%;}
#section1>div .m-again{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px;height: 200px; border-radius: 50%;background: rgba(110,116,117,.7); text-align: center;}
#section1>div .m-again .watchagain {display: flex; align-items: center; justify-content: center; height: 200px;}
#section1>div .m-next-setcion{position: absolute; bottom: 12%; left: 50%;transform: translateX(-50%);}
#section1>div .m-icon-footer{position: absolute; bottom: 0 ;width: 100%; height: 60px; padding: 0 80px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;background:rgb(63, 62, 62);}
#section1>div .m-icon-footer>div{}
#section1>div .m-icon-footer>div ul{display: flex; border-left: 1px solid #919191;}
#section1>div .m-icon-footer>div ul li{width: 60px; text-align: center; border-right: 1px solid #919191;height: 60px; align-items: center; display: flex; justify-content: center;}
#section1>div .m-icon-footer>div ul .addIconBtn {background: rgba(110,116,117,.7); color: #fff;}

#section2 {width: 100%;background-image: linear-gradient(to right,#384144, #384144 50%, #727b77 50%);}
#section2>div {}
#section2>div>ul {display: flex;}
#section2>div>ul>li {flex-basis: 50%;}
#section2>div>ul>li>div {padding: 70px 80px;}
#section2>div>ul>li>div>.section2-title {padding-bottom: 30px;}
#section2>div>ul>li>div>.section2-title h2 {font-size: 24px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.3);padding-bottom: 10px;font-weight: bold;}
#section2>div>ul>li>div>.section2-content {}
#section2>div>ul>li>div>.section2-content p {
    line-height: 140%;
    text-align: justify;
    font-size: 14px;
    color: rgba(255,255,255,.6);
}
nav>span:last-child>a {padding-right: 0;} 

#section3 {width: 100%; position: relative; background: #fff;padding: 100px 0; overflow: hidden;}
#section3>div {width: 100%;}
#section3>div h2 {text-align: center; font-size: 24px; color: #9f9999; margin-bottom: 50px;}
#section3>div .tranding-wrap{width: 100%; height: 362px;position: relative;}
#section3>div .tranding-wrap > ul{position: absolute; height: 100%; top: 0; left: 0; width: calc(290px*12);display: flex; flex-flow:row nowrap;}
#section3>div .tranding-wrap > ul > li{width: 290px; height: 100%;}
#section3>div .tranding-wrap > ul > li img {width: 100%; display: block;}

#section4 {width: 100%;}
.tabMenu {width: 100%; height: 52px; background: #2c3437;}
.tabMenu .container{
    display: flex;
    height: 52px;
    align-items: center;
    justify-content: center;
}
.tabMenu .container .filter-form .form-item input{display: none;}
.tabMenu .container .filter-form .form-item label{padding: 16px 24px; color: rgba(255,255,255,.5);}
.tabMenu .container .filter-form .form-item input:checked ~ label {background: #26494d;color: rgba(255,255,255,.8);}

.gallery .gallery-wrap {
    display: flex;
    flex-wrap: wrap;
    width:100%;
    overflow: hidden;
} 
.gallery .gallery-wrap li{
    flex-basis: 33.3333%;
    height: 600px;
    overflow: hidden;   
} 
.gallery .gallery-wrap li div{width: 100%; height: 100%;} 
.gallery .gallery-wrap li div a{
    display: block;
    width: 100%;
    position: relative;
    height: 100%;
} 
.gallery .gallery-wrap li div a .g-video video,
.gallery .gallery-wrap li div a:hover .g-video img {
    width: 105%;
    display: block;
    transform: scale(1);
    transition: .3s;
    height: 105%;
    object-fit: cover;
}
.gallery .gallery-wrap li div a:hover .g-video video,
.gallery .gallery-wrap li div a:hover .g-video img
{
    transform: scale(1.2);
}
.gallery .gallery-wrap li div a .g-video{
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
    height: 100%;
} 
.gallery .gallery-wrap li div a .g-color{
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0);
    transition: .3s;
} 
.gallery .gallery-wrap li div a:hover .g-color{
    background: rgba(0,0,0,0.7);
    transition: .3s;
} 
.gallery .gallery-wrap li div a .g-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    opacity: 0;
} 
.gallery .gallery-wrap li div a:hover .g-title {
    opacity: 1;
}
.gallery .gallery-wrap li div a .g-title > span{
    display: block;    
    padding-bottom: 20px;
    margin-top: 15px;
    opacity: 0;
} 
.gallery .gallery-wrap li div a:hover .g-title > span:nth-child(1){
    opacity: 1;
    transition: 0.3s;
} 
.gallery .gallery-wrap li div a:hover .g-title > span:nth-child(2){
    opacity: 1;
    transition: 0.5s;
}
.gallery .gallery-wrap li div a:hover .g-title > span:nth-child(3){
    opacity: 1;
    transition: 1.2s;
}
.gallery .gallery-wrap li div a .g-title > span > strong{
    font-weight: bold;
    font-size: 21px;
    color: #fff;
} 
.gallery .gallery-wrap li div a .g-title > span > b{
    color: #fff;
    font-size: 14px;
} 
.gallery .gallery-wrap li div a .g-title > span > b > .exploreBt{
    color: #fff;
} 
.loadMore {
    width: 100%;
    padding: 80px 0;
    text-align: center;
    background: #0d1d1f;

}
.loadMore .loadMoreBt{
    cursor: pointer;
    width: 200px;
    height: 45px;
    font-size: 18px;
    color: #dee4e3;
    background: #384243;
    border: 1px solid #5e686a;
}

.loadMore:hover .loadMoreBt{
    color: #384244;
    background: #dee4e3;
    border: 1px solid #dee4e3;
}

#footer {width: 100%; padding: 50px 0;}
.f-sitemap {width: 100%; padding-bottom: 60px;}
.f-sitemap>ul{display: flex;}
.f-sitemap>ul>li{flex-basis: 20%;}
.f-sitemap>ul>li>h4{padding-bottom: 10px;}
.f-sitemap>ul>li>h4 i{display: inline-block; width: 50px; height: 3px; background: #686868;}
.f-sitemap>ul>li>a{display: inline-block;padding-bottom: 30px;}
.f-sitemap>ul>li>.f-sub{width: 100%;}
.f-sitemap>ul>li>.f-sub ul{}
.f-sitemap>ul>li>.f-sub ul li{padding: 5px 0;}
.f-sitemap>ul>li>.f-sub ul li a{color: #888;}
#footer .container .f-sitemap{}
#footer .container .f-copyright-sns{display: flex; justify-content: space-between;}
#footer .container .f-copyright-sns .f-copyright{color: #fff;}
#footer .container .f-copyright-sns .f-copyright span{}
#footer .container .f-copyright-sns .f-copyright span a{}
#footer .container .f-copyright-sns .f-copyright span a i{}
#footer .container .f-copyright-sns .f-sns{}
#footer .container .f-copyright-sns .f-sns span{display: inline-block; margin: 0 10px;}
#footer .container .f-copyright-sns .f-sns span a{}
#footer .container .f-copyright-sns .f-sns span a i{}

@media screen and (max-width: 1108px) {
    .container{width: 100%;}
    #header>.container{width: 100%}
    .header-mobile-menu{
        display: block;
    }
    aside, .header-logoNav{display: none;}
    .gallery .gallery-wrap li{
        height: 300px;  
    } 
    .footer>.container {padding: 10px; box-sizing: border-box;}
    .f-copyright-sns {display: flex; flex-direction: column;}
    #footer .container .f-copyright-sns .f-sns span{padding: 20px 0;}
    #footer .container .f-copyright-sns .f-sns span:nth-child(1) {margin-left: 0;}
    .f-sitemap>ul>li>.f-sub {margin-bottom: 20px;}
    .f-sitemap>ul{display: flex; flex-direction: column;}
    .f-sitemap>ul>li{flex-basis: 100%;}
    .f-sitemap>ul>li>a{padding-bottom: 10px;}
    .f-sitemap>ul>li>.f-sub ul{display: flex;}
    .f-sitemap>ul>li>.f-sub ul li{padding: 0 8px 0 0;}

}