@charset "UTF-8"; 

/* body.hidden { overflow-y: hidden; }  */
body{overflow-x:hidden;background:#000;word-break:all;}

#header{position:fixed;top:0;left:0;right:0;width:100%;height:7.5em;z-index:1000;background:rgba(0,0,0,0);font-size:16px;transition:.3s;}
#header.active{background:rgba(0,0,0,.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);}
#header.m-active{transform:translateY(0);}
#header.sub{background:#000}
#header.sub.active{background:rgba(0,0,0,.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);}

#header .header-wrap{display:flex;justify-content:space-between;position:relative;width:100%;height:100%;padding:0 2em;box-sizing:border-box;}
.header-wrap .logo span{display:block;}
.header-wrap .logo.fixing{transform:translate(0, 0);}
.header-wrap .hd-group{position:fixed;top:3em;right:2em;display:flex;justify-content: flex-end;color:#fff;font-family:'SamsungSharpSans';}
.header-wrap .logo{display:inline-block;}
.header-wrap .logo a{display:block;width:9.5em;height:4.2em;margin-top:1.5em;background:url(/images/layout/ssdc-logo.svg)0 50%/9.5em no-repeat;text-indent:-999em}

.hd-group nav{margin-right:7em;transition:all .2s;}
.hd-group ul{display:flex;}
.hd-group nav ul li{padding:0 1em;}
.hd-group nav ul li a{position:relative;display:block;font-size:1.125em;font-weight:700;;color:#fff;transition:.2s}
.hd-group nav ul li a:hover{color:#00b8e8}
.hd-group nav ul li a:after{display:block;position:absolute;content:'';left:50%;width:0%;height:1px;margin-top:3px;border-bottom:1px solid #00b8e8;transition:all .3s ease;}
.hd-group nav ul li a:hover:after {width:100%;left:0px;}

.hd-group .visit-count{margin-right:1em;font-size:1.125em;}
.hd-group .hd-lang{margin-right:1em;font-size:1.125em;}
.hd-group .hd-lang li{position:relative;}
.hd-group .hd-lang li:first-child:before{display:block;content:"";position:absolute;top:1px;right:0px;width:1px;height:.85em;background:#fff;}
.hd-group .hd-lang li a{padding:0 .5em;font-size:1em;font-weight:700;color:rgba(255,255,255,.7);transition:.2s}
.hd-group .hd-lang li a.on{color:#fff}
.hd-group .hd-lang li a.on:hover{color:#fff}
.hd-group .hd-lang li a:hover{color:#00b8e8}
.hd-group .login-btn{display:inline-block;margin-top:-.55em;padding:.55em 1.5em .45em;border-radius:30em;border:1px solid #fff;color:#fff;font-size:1em;font-weight:700;transition:.2s;}
.hd-group .login-btn:hover{border:1px solid #00b8e8;color:#00b8e8;}

.mobile-nav{display:none;position:fixed;top:0;right:0;z-index:1000}
.menu-trigger,.menu-trigger span {display: inline-block;transition: all .4s; box-sizing: border-box;}
.menu-trigger {position:fixed;top:1.7em;right:2em;width: 34px;height: 28px;z-index:1002}
.menu-trigger span {position: absolute;left: 0;width: 100%;height: 3px;background-color: #fff;border-radius: 2px;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 12px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
.menu-trigger.active-1 span:nth-of-type(1) {-webkit-transform: translateY (12px) rotate (-45deg);transform: translateY(12px) rotate(-45deg);}
.menu-trigger.active-1 span:nth-of-type(2) {opacity: 0;}
.menu-trigger.active-1 span:nth-of-type(3) {-webkit-transform: translateY(-12px) rotate(45deg);transform: translateY(-12px) rotate(45deg);}
/* .menu-trigger {display:none;} */

.m-nav-wrap{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;min-height:100vh;display:block;
  padding:5em 0;background:rgba(0,0,0,.8);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);z-index:1001;
  visibility:hidden;opacity:0;transition:.3s all ease-in;
  font-family:'SamsungSharpSans';text-align:center;overflow-y:auto;box-sizing:border-box}
.m-nav-wrap.show{visibility:visible;opacity:1;}
.m-nav-wrap .mobile-box{}
.m-nav-wrap .m-menu-list li a{display:block;margin:.75em auto;font-size:1.5em;color:#fff}
.m-nav-wrap .m-menu-list li a:hover{color:#00b8e8}
.m-nav-wrap .visit-count{display:inline-block;margin-top:1em;font-size:1.5em;color:#fff}
.m-nav-wrap .m-lang ul{display:flex;justify-content:center;margin:1em;}
.m-nav-wrap .m-lang ul li{margin:0 .5em;}
.m-nav-wrap .m-lang ul li a{font-size:1.5em;color:#fff;}
.m-nav-wrap .m-lang ul li a:hover{color:#00b8e8}
.m-nav-wrap .m-lang ul li:first-child{position:relative;}
.m-nav-wrap .m-lang ul li:first-child:after{position:absolute;top:2px;right:-8px;width:1px;height:1.3em;background:#fff;content:"";display:block;}
.m-nav-wrap .m-login a{display:inline-block;margin-top:2em;padding:.75em 2em;border-radius:20em;border:1px solid #fff;color:#fff!important;}


#footer{background:#000;padding:2em;}
#footer .ft-inner{}
#footer .ft-inner:after{display:block;content:"";clear:both;}
.ft-inner .ft-left{float:left;padding-top:.85em}
.ft-inner .ft-left span{font-size:.875em;font-weight:300;color:#fff;opacity:.5}
.ft-inner .ft-left > a{display:inline-block;margin-left:3em;font-size:.875em;font-weight:400;color:#fff;}
.ft-inner .ft-right{float:right;display:flex;}
.ft-inner .ft-right>a{display:inline-block;padding:.85em 2em;border-radius:5em;border:1px solid #fff;font-size:1em;font-weight:400;color:#fff}
.ft-link{position:relative;margin-left:1em;}
.ft-link > ul{display:none;position:absolute;left:0;right:0;bottom:3.15em;padding-top:.5em;border-bottom:1px solid rgba(255,255,255,.2);border-top-left-radius:25px;border-top-right-radius:25px;background:#000;z-index:13;}
.ft-link > ul a{display:block;padding:0 2em;font-size:0.938em;color:#fff;line-height:3;text-align:left;box-sizing:border-box;transition:all .2s}
.ft-link > ul a:hover,
.ft-link > ul a:focus{font-weight:500;color:#00b8e8}
.ft-link .pre{display:inline-block;padding:.85em 2em;border-radius:5em;border:1px solid #fff;font-size:1em;font-weight:400;color:#fff}
.ft-link .pre i{display:inline-block;margin-left:.5em;width:.563em;height:.8em;background:url(/images/icon/ico-ft-arrow.png)50%/.563em no-repeat}
.ft-link.on ul{border:1px solid #fff;border-bottom:1px solid #333;}
.ft-link.on > .pre{border-color:transparent;border-top-left-radius:0;border-top-right-radius:0;border:1px solid #fff;border-top:none;background:#000;transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s}
.ft-link.on > a{border-radius:25px}
.ft-link.on .pre i{transform: rotate(180deg);}