*{box-sizing: border-box; font-family:'Noto Sans SC', sans-serif;}
:root{
    --red: #db011a !important;
    --redHover: #be0117 !important;
    --gray: #666666 !important;
    --defult: #333333 !important;
    --gradient: linear-gradient(150deg, #db011a, #402ab1) !important;
}
@keyframes twinkle {
    from {background: #eb0c3d;}
    to {background: orange;}
}



body{padding-top: 5.65rem; color: var(--defult);}
h1, .h1{font-size: 2rem; font-weight: bold;}
h2, .h2{color: var(--defult); font-size: 1.5rem;}
li{list-style: none;}
a{color: var(--defult);}
a:hover{color: var(--red) !important; text-decoration: none;}
button{padding: 0; border: none; background: unset; outline: none;}
button:focus{outline: none;}
.font-2rem{font-size: 2rem;}
.font-big{font-size: 1.5rem;}
.font-m{font-size: 1.2rem;}
.font-small{font-size: 0.9rem;}
.bg-danger{background: var(--red) !important;}
.bg-black{background: #111;}
.bg-gradient{background: var(--gradient) !important;}
.bg-light{background: #f3f3f3 !important;}
.text-danger{color: var(--red) !important;}
.text-blue{color: #402ab1;}
.text-purple{color: #bb4ff3;}
.text-pink{color: #ff1360;}
.text-green{color: #A2EA6A;}
.text-gray{color: var(--gray) !important;}
.text-ccc{color: #ccc !important;}
.text-defult{color: var(--defult);}
.text-shadow{text-shadow: 0 1px 8px rgba(0,0,0,10%);}
.shadow{box-shadow: 0 0.06rem 0.5rem rgba(0,0,0, 0.25) !important;}
.btn-md{padding: 0.5rem 1.5rem; border-radius: 30px;}
.btn-black{background: #111}
.btn-danger{background: var(--red); border-color: var(--red); color: var(--red);}
.btn-danger:hover{background: var(--redHover); border-color: var(--redHover);}
.btn-blue{background: #482ec5;}
.btn-purple{background: #a834e4;}
.btn-pink{background: #e51c5e;}
.btn-green{background: #219226;}
.btn-green:hover{background: #26A52B;}
.btn-white{background: #fff;}
.btn-white:hover {background: #ddd;}
.btn-line-black{border: 1px solid #333;}
.btn-lg{padding: 0.8rem 3.5rem; border-radius: 30px;}
.clear-both{clear: both;}
.px-25{padding-left: 2.5rem !important; padding-right: 2.5rem !important;}
.rounded{border-radius: 30px !important;}
.border-gray{border-color: #BDC0C4 !important;}
.border-danger{border: 1px solid var(--red);}
.border-lg-right-0 {border-right: 0 !important;}
.mb-72 {margin-bottom: 72px;}

/*<br class="br">*/
.br{display: none;}
.br-lg{display: block !important}
.br-md{display: none;}
.br-sm{display: none;}

@keyframes twinkle{
    from{background: #4420af;}
    to{background: var(--red);}
}

@media (min-width: 1024px){
    .container{max-width: 1280px;}
}

/*header & footer*/
header.w-100 {width: 102% !important; margin-top: -2px; margin-left: -1px;}
.logo{width: 200px;}
.navbar-light .navbar-nav .nav-link{color: #333; font-weight: 500;}
.nav-justified .nav-item, .nav-justified>.nav-link {flex-basis: unset;}
.nav-link{padding: 1rem 1rem; line-height: 2.5rem;}
.navbar-nav .active {color: var(--red) !important;}
.dropdown:hover .dropdown-menu{display: block !important; position: absolute !important; margin-top: -4px;}
.dropdown-item .nav-link{padding: 0;}
.dropdown-item:active{background-color: unset;}
.show{display: inline-block !important;}

.nav-justified .nav-item{text-align: left;}
.nav-justified .nav-item a .badge {display: inline-block; margin-left: 4px; padding: 3px 5px; border: 0 !important; border-radius: 0; background: var(--red); color: #fff; font-weight: normal; animation: twinkle infinite .7s;}
.dropdown-toggle::after{position: absolute; left: 70%; top: 44%;}
.dropdown-menu{border: 0;}
.dropdown-menu .dropdown-item .nav-link{color: #666;}
.dropdown-menu .dropdown-item .nav-link::before{content: '-'; margin-right: 8px;}

footer, footer div{background: #111; *zoom: 1;}
footer::after, footer div::after{content: ''; display: block; clear: both;}

/*main content*/
.main .carousel-inner{height: 740px;}
.carousel-item .mobile_bnr{display: none;}
.main .carousel-item [class*="_bnr"] {position: relative;}
.main .carousel-item [class*="_bnr"] img {position: absolute; left: 50%; transform: translate(-50%,0);}
.carousel-caption{bottom: 30%;} /*main carousel*/
.carousel-caption h1{font-size: 3.5rem; word-break: keep-all;}
.carousel-caption button a:hover{color: #fff !important;}
.carousel-caption p {line-height: 2.5rem; word-break: keep-all;}
 
.container01 div ul li:first-child::after{content: unset;}
.container01 #con06.active, #con05.active, #con04.active, #con03.active, #con02.active, #con01.active, #con00.active {display: flex !important;}
.container01 div ul li button a:hover{color: #fff !important;}
.container01 .text-contents p .coreThread {margin-right: 9%;}

.container02{height: 460px; background:#a4a6b3 url(/img/main02.jpg) no-repeat; }
.container02 .container{position: relative;}
.container02 .absolute-box{position: absolute; top: 64px; width: 440px; height: 440px;}
.container03{*zoom: 1;}
.container03::after{content: ''; display: block; clear: both;}
.container03 .number-display{position: relative; width: 640px;}
.container03 .number-display::after{content: ''; position: absolute; top: 50%; width: 100%; border-top: 1px solid #dfdfdf;}
.container03 .number-display::before{content: ''; position: absolute; left: 50%; height: 100%; border-left: 1px solid #dfdfdf;}
.container03 .number-display ul li{margin-right: -3px;}

.container04{position: relative; height: 500px; background: linear-gradient(256deg, #e90f0f 20%, #3a0c6d); overflow: hidden;}
.container04::after{content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 0px solid transparent; border-left: 800px solid rgba(245, 245, 245, 0.3); border-bottom: 120px solid transparent;}
.container04::before{content: ''; position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-top: 120px solid transparent; border-right: 800px solid rgba(245, 245, 245, 0.3); border-bottom: 0px splid transparent;}
.container04 .container ul li div img{margin-top: -4px;}

/*sub*/
.sub .m-banner{display: none;}
.sub .carousel-caption{right: 26%; left: 26%; bottom: 18%;}
.sub .container .carousel-caption{right: 34%; bottom: 28%; left: 34%;}
.sub .abicon{position: absolute; top: 8%; right:10%;}

.server div .tab li{position: relative; cursor: pointer; }
.server div .tab li::before{content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #ccc;}
.server div .tab li button{width: 170px; height: 90px; background: #333; border-right: .5px solid #666; color: white;}
.server div .tab li:last-child button{border-right: 0;}
.server div .tab li button.active, .server div .tab li button:hover {background: var(--red); color: white;}

.d-none.active{display: block !important;}
.text-caption{position: relative;}
.text-caption h5 {display: flex; align-items: center;}
.text-caption h5 span {margin-right: 1rem; padding: 0.25rem 0.5rem; color: #fff; font-size: 12px;}
.text-caption h5 span.fujisu {background: deeppink;}
.text-caption h5 span.hp {background: rgb(96, 165, 250); }
.text-caption h5 span.dell {background: rgb(59, 130, 246)}
.text-caption h5 span.lenovo {background: rgb(239, 68, 68)}
.text-caption .badge-area {position: absolute; top: 0; right: 0px;}
.text-caption .b-first {background: var(--blue) !important;}
.text-caption .badge { width: 70px; height: 30px; background: var(--red); border-radius: 0px; line-height: 20px; font-size: 1rem; font-weight: normal; color: white; animation: twinkle infinite .7s;}
.text-caption .discount {position: relative; display: inline-block; padding-top: 6px; color: #aaa; font-size: 1.5rem;}
.text-caption .discount::after{content: ""; display: block; position: absolute; top: 25px; width: 85px; height: 2px; background-color:#555 !important}
.text-caption .discount-price {display: inline-block; padding: 0 0  0.75rem 0.5rem; margin: 0; font-weight: 700;}
.text-caption.text-event p:first-child {margin-top: -8px !important;}
.text-contents {height: 100%;}
.text-contents p{display: inline-block; width: 100%;}
.text-contents p span{margin-right: 15.2%;}
.text-contents p .coreThread{margin-right: 9%;}
.text-contents P .pSSD{margin-right: 3.6%;}
.text-contents p .pip{margin-right: 20.3%;}
.text-contents p .os{margin-right: 18.2%;}
.caption-box{display: flex; flex-direction: column; justify-content: space-between; width: 30%;}
.caption-box div button:hover{background: var(--gradient); color: var(--white) !important;}
.caption-box div button:hover a{color: var(--white) !important;}
.sale{position: absolute; top: 0; right: 0;}

.gpu .text-contents p.twoline{position:relative; margin-bottom: 2rem;}
.gpu .text-contents p .long-text{position: absolute; margin-right: 0;}

.taiwan .carousel-caption{bottom: 10%;}
.taiwan .carousel-caption h1 span{font-size: 2.6rem; font-weight: 500;}
.taiwan .carousel-caption a button{margin-top: 3rem;}
.taiwan .caption-box:not(.taiwan .caption-box:last-child){background: white;}
.taiwan .text-contents p span{margin-right: 7.2%;}
.taiwan .text-contents p .pip{margin-right: 11.8%;}
.taiwan .text-contents p:first-child{position: relative; margin-bottom: 2rem;}
.taiwan .text-contents p .long-text{position: absolute; left: 21.6%; margin-right: 0;}
.weAdvantages ul li h2{position: relative;}
.weAdvantages ul li h2 span{color:var(--gray); font-size: 1.2rem; margin-left: .4rem;}
.weAdvantages ul li h2 em{position: absolute; left: -42px; top: -6px; color: white; font-size: 2rem; font-weight: bold; font-style: unset; z-index: 22;}
.weAdvantages ul li h2 em::before{content: 'â– '; position:inherit; color: var(--red); font-size: 3rem; z-index: -1; transform: translate(-30%, -18%);}

/* event-page */
.event h1 {font-size: 38px;}
.event ul {display: flex; flex-wrap: wrap; flex-direction: column; align-content: center;}
.event .event-list {display: flex; justify-content: space-evenly; margin-bottom: 9rem; border-radius: 15px; box-shadow: 5px 5px 15px #eee;}
.event ul li .event-top p span{display: inline-block; min-width: 60px; border: 1px solid var(--red); }
.event .icon {width: 55px; padding:2px 5px; margin: 7px 0; background: var(--red); color: #fff; animation: twinkle infinite 1s;}
.event ul li button:hover{background: var(--gradient); color: #fff !important;}
.event .event-cont {display: flex; flex-direction: column; justify-content: center; margin-right: 3rem; width: 450px; }
.event .event-cont .cont-wrap {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin-top: 1.75rem;}
.event .event-cont .cont-wrap p {margin-bottom: 1.5rem;}
.event .event-cont .cont-wrap .p-flex {display: flex; align-items: center; height: 24px; }
.event .price-line {height: 1px; width: 100%; background-color: #ccc;}
.event .price p {padding: 10px 0; text-align: right; font-size: 32px; }
.event-button {margin-bottom: 2.25rem;}
.event-button button {width: 100%; height: 40px; background-color: #FF5C00; color: #fff; font-weight: 900; border-radius: 10px;}
.event-bnr {left:20% !important;}
.event-bnr h1 {font-size: 3rem; text-align: left; font-weight: bold; color: #333;}
.event-bnr p {font-size:1.25rem; text-align: left; color: #FF8C4B;}
.event-bnr span {color: #FF5C00}
.event-bnr .event-title-line {background-color: #ccc; width: 62%; height:1px;}

.aboutBox ul{width: 100%; margin:20px; margin-left: 10px; border-left: 2px solid #ea0000;}
.aboutBox ul li{position: relative;}
.aboutBox ul li::before{content: ""; position: absolute; top: 10px; left: -23px; display: block; width: 12px; height: 12px; border: 3px solid var(--red); border-radius: 50%; background: #fff; box-shadow: 0 0 5px var(--redHover);}
.aboutBox ul li p{position: relative; padding-left: 50px;}
.aboutBox ul li p span{position: absolute; left: 0; color: var(--red); font-size: 1.2em; font-weight: bold;}

.colo .container .line-li button{box-sizing: border-box;}
.colo .container .line-li:hover .line-hover, .line-li:hover .line-hover{background: #333; color: white !important; border: 1px solid transparent;}
.colo .container .line-li:hover a{color: unset !important;}
.colo .container ul li div a .text-danger{margin: 9px 0;}

.partner .number{margin-bottom: 0; font-size: 3rem;}

.endpoint .carousel-inner img{width: 100%; height: 500px;}
.endpoint  ul li p:first-child{height: 250px;}

.managed {position: relative;}
.managed img{position: absolute; top: 0; left: 0; z-index: -1;}
.managed h1{line-height: 10rem;}

.firewall .firewallImg {width: 46%;}

.cdp ul li .mb-272, .ip ul li .mb-272 {margin-bottom: 2.64rem !important;}
.cdp ul li .py-035{padding-top: 0.35rem !important; padding-bottom: 0.35rem !important;}
.cdp ul li .line-li:hover .line-hover, .line-li:hover .line-hover{background: #333; color: white !important; border: 1px solid transparent;}

.ip div div ul li{position: relative;}
.ip div div ul li::after{content: 'â–¼'; position:absolute; left: 48.3%; top: 89%; color: #666; }
.ip div div ul li:last-child::after{content: unset;}
.ip div div img{height: 500px;}


/* ddos */
.sub-container { width: 100%; position: relative;}
.sub-container .sub-cont-group {width: 100%; margin: auto;}
.sub-container .sub-cont-group .sub-area {margin: auto; padding-top: 5rem; padding-bottom: 5rem; }
.ddos-banner {bottom: 25%; width: 550px; margin: auto;}
.sub .ddos-bnr h1 {font-size: 70px;}
.sub .ddos-bnr p {font-size: 26px;}

.bnr-con-group {display: flex; margin: auto; width: 1200px; height: 350px; border: 1px solid #D4D4D8;}
.bnr-con-box {padding: 30px 34px 55px 35px; width: 25%; border-right: 1px solid #D4D4D8;}
.bnr-con-box:last-child {border-right:0;}
.bnr-con-box .box-top {text-align: center; width: 21px; border-bottom: 1px solid #333;}
.bnr-con-box .box-con {position: relative; margin-top: 8px;}
.bnr-con-box .box-con p {font-weight: 400; font-size: 18px; line-height: 26px;}
.bnr-con-box .box-con p span {color: white; padding: 1px; background: #00487c;}
.bnr-con-box .box-con img {position: absolute; right: 10px; top: 140px;}

.sub-area-bottom {text-align: center;}
.ddos-merit {position: relative; padding-bottom: 100px; background: #F8F9FB;}
.ddos-merit .merit-lock {position: absolute; right:7%; top: 55%; mix-blend-mode: overlay; z-index: 0;}
.ddos-merit h2 {margin-top: 30px; margin-bottom: 75px; padding-top: 70px; font-size: 35px; font-weight: 700; font-family: 'Spoqa Han Sans Neo';}
.ddos-merit h2 span {padding: 1px; background: #00487C; font-weight: 500; color: white;}
.ddos-merit-box {position: sticky; margin: auto; background: white; margin-top: 75px; padding: 35px 10px; width: 60%; border-radius: 17px;}
.ddos-merit-box ul {display: flex; flex-wrap: wrap; padding: 0;}
.ddos-merit-box ul li {display: flex; align-items: center; padding-left: 2.75rem; margin: 14px 0; width: 50%;text-align: left;}
.ddos-merit-box ul li img {margin-right: 0.5rem;}
.ddos-merit-box ul li p {margin: 0; font-weight: 400; font-size: 16px; font-family: 'Spoqa Han Sans Neo';}

.ddos-icons {position: relative; width: 70%; margin: auto; padding: 70px 0; text-align: center;}
.ddos-icons ul {display: flex; justify-content: space-around; padding: 0;}
.ddos-icons ul li {width: 160px; margin: 0 10px;}
.ddos-icons ul img {margin: auto; padding-bottom: 2.25rem}
.ddos-icons ul h3 {padding-bottom: 10px; font-weight: 700;}
.ddos-icons ul p {font-size: 15px;}

.ddos-cloudflare-bnr {background: url('/img/ddos-cloudflare.png') center no-repeat; background-size: cover; height: 454px;}
.ddos-cloudflare-bnr .sub-area-bottom p {padding: 190px 100px 0 140px; color: white; text-align: left; line-height: 2.5rem; font-size: 22px; font-style: normal; }

.sub-consulting-group {margin: auto; width: 100%;}
.sub-consulting-group .consulting-area {margin: auto; padding: 5rem 0; width: 1280px;}
.ddos-consulting {position: relative; padding: 50px 0 100px 0;}
.consulting-img {background: url('/img/ddos-consulting.png') no-repeat; background-size: cover; height: 325px;}
.ddos-consulting img {margin:auto;}
.ddos-consulting .ddos-consulting-info {position: absolute; top: 125px; right: 230px; text-align: left;}
.ddos-consulting .ddos-consulting-info h4 {padding-bottom: 1rem; font-weight: 700; font-size: 1.25rem;}
.ddos-consulting .ddos-consulting-info p {margin: 0;}

/* aside */
aside{position: relative;}
.web-aside{position: fixed; top: 24%; right: 1%; width: 80px; z-index: 9999;}
.web-aside .aside-menu, .web-aside .aside-gotop{border-radius: 30px; font-size: .9rem; overflow: visible;}
.web-aside a img{width: 40px;}
.web-aside .aside-qq-trigger, .web-aside .aside-t-trigger{display: block; color: inherit;}
.web-aside .aside-qq-trigger img{width: 40px;}
.web-aside .aside-gotop a img{width: 34px;}
.web-aside .aside-chat a:hover article{display: block !important;}
.web-aside .aside-chat a article{position: fixed; top: 44.2%; right: 6%;}
.web-aside .aside-chat a article img{width: 120px;}
.web-aside .aside-qq{position: relative;}
.web-aside .aside-qq .aside-qq-popup{position: absolute; right: 92px; top: 50%; transform: translateY(-50%); background: #fff; color: #333; padding: 10px 14px; border-radius: 10px; display: none; min-width: 220px; z-index: 10000; text-align: left;}
.web-aside .aside-qq .aside-qq-popup a{display: block !important; color: #333; padding: 6px 0; width: 100%;}
.web-aside .aside-qq .aside-qq-popup a + a{margin-top: 6px; border-top: 1px solid #e2e2e2; padding-top: 6px;}
.web-aside .aside-qq .aside-qq-popup .popup-line{display: block !important; font-size: 0.9rem; white-space: nowrap;}
.web-aside .aside-qq:hover .aside-qq-popup, .web-aside .aside-qq:focus-within .aside-qq-popup{display: block !important;}
.web-aside .aside-qq.is-open .aside-qq-popup{display: block !important;}
.web-aside .aside-t{position: relative;}
.web-aside .aside-t-trigger img{width: 40px;}
.web-aside .aside-t .aside-t-popup{position: absolute; right: 92px; top: 50%; transform: translateY(-50%); background: #fff; color: #333; padding: 10px 14px; border-radius: 10px; display: none; min-width: 220px; z-index: 10000; text-align: left;}
.web-aside .aside-t .aside-t-popup a{display: block !important; color: #333; padding: 6px 0; width: 100%;}
.web-aside .aside-t .aside-t-popup a + a{border-top: 1px solid #e2e2e2;}
.web-aside .aside-t .aside-t-popup .popup-line{display: block !important; font-size: 0.9rem; white-space: nowrap;}
.web-aside .aside-t:hover .aside-t-popup, .web-aside .aside-t:focus-within .aside-t-popup{display: block !important;}
.web-aside .aside-t.is-open .aside-t-popup{display: block !important;}