@charset "utf-8";

/* Mobile */
/*
.m_container header h1:before{background-position: center 0px;}
.m_container header h1 a{color: #fff;}
*/

.mvisual{position: relative;text-align: center;}
.mvis_btn{position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);z-index: 3;background: rgba(0,0,0,.5);border-radius: 30px;text-align: center;padding: 10px 0;min-width: 180px;box-sizing: border-box;}
.mvis_btn p{display: inline-block;font-family: GWedupower;color: #dfdfdf;font-size: 16px;vertical-align:baseline;}
.mvis_btn strong{color: #fff;}
.mvis_btn span{display: inline-block;width: 15px;height: 1px;background: #898989;margin: 5px 7px;font-size: 0;}
.mvis_btn button{width: 20px;height: 20px;padding: 0;margin: 0;font-size: 0;overflow: hidden;background: var(--btnbg) no-repeat;}
.mvis_btn button.prev{background-position: center -450px}
.mvis_btn button.stop{background-position: center -470px}
.mvis_btn button.play{background-position: center -490px}
.mvis_btn button.next{background-position: center -510px}
.mvis_list{height: 470px;overflow: hidden;}
.mvis_list li{float: left;width: 100%;background-size: cover;background-position: center 0;}
.mvis_list a{display: block;position: relative;height: 470px;color:#fff;}
.mvis_list a span{position:absolute;top:70%;left:50%;transform:translate(-50%, -50%);width:100%}
.mvis_list a strong{display:block;font-size:36px;font-family:GWedupower;margin:10px 0 0 0}


/* Tablet */
@media all and (min-width:768px) {
.mvis_list, .mvis_list li{height: 600px;}
.mvis_list a{height:600px}
.mvis_list a em{font-size:24px}
.mvis_list a strong{font-size:60px;margin:20px 0 0 0}

}

/* Desktop */
@media all and (min-width:1023px) {
/*
.m_container .gnb .tlink a, .m_container .gnb_list>li>a{color: #fff;}
.m_container .gnb_list>li.tsns>a:after, .m_container .gnb_list>li.lang>a:after{border-top-color: rgba(255,255,255,.8);}
.m_container nav>ul>li>a{color: #fff;}
.m_container nav.on>ul>li>a{color: #fff;}
.m_container nav>ul>li>a:hover:after, .m_container nav>ul>li>a:focus:after, .m_container nav>ul>li.on>a:after{background: #fff;}
.m_container .depth_boxcon>ul>li a{color: #fff;}
*/

.m_container header.on h1:before{background-position:center 0px;}
.m_container header.on h1 a{color: #fff;}

.m_container nav.on:before{background: rgba(0,0,0,0.5);}

.m_container .on .gnb .tlink a, .m_container .on .gnb_list>li>a{color: #fff;}
.m_container .on .gnb_list>li.tsns>a:after, .m_container .on .gnb_list>li.lang>a:after{border-top-color: rgba(255,255,255,.8);}
.m_container .on nav>ul>li>a{color: #fff;}
.m_container .on nav.on>ul>li>a{color: #fff;}
.m_container .on nav>ul>li>a:hover:after, .m_container .on nav>ul>li>a:focus:after, .m_container .on nav>ul>li.on>a:after{background: #fff;}
.m_container .depth_boxcon>ul>li a{color: #fff;}

.mvis_list, .mvis_list li{height: 970px;}
.mvis_list a{height:970px}
.mvis_list a em{font-size:40px}
.mvis_list a strong{font-size:100px;margin:40px 0 0 0}

	
/*dark*/
.m_container.dark header h1:before{background-position:center 0px;}
.m_container.dark header h1 a{color: #fff;}
@media all and (min-width:1023px) {
.m_container.dark .gnb .tlink a, .m_container.dark .gnb_list>li>a{color: #fff;}
.m_container.dark .gnb_list>li.tsns>a:after,
.m_container.dark .gnb_list>li>a:after{border-top-color: rgba(255,255,255,0.5);}
.m_container.dark nav>ul>li>a{color: #fff;}
}