/**
 * Header
 */
.sub-nav-bar{display:inline-block;width:100%;min-height:10px;float:left;background-color:#031f5e;color:#fff;border-top:1px solid #435784;border-bottom:1px solid #435784;}
.sub-nav-bar-container{display:block;width:100%;max-width:1200px;margin:0 auto;}
.sub-nav-bar-list ul li{position:relative;display:inline-block;float:left;}
.sub-nav-bar-list > ul > li > a{display:inline-block;padding:0 24px;/*border-left:1px solid #435784;*/}
.sub-nav-bar-list > ul > li:last-child > a{/*border-right:1px solid #435784;*/}
.sub-nav-bar-list > ul > li > a.hover{background-color:#0167cb;}
.sub-nav-bar-list > ul > li > a .sub-nav-bar-icon{font-size:2em;padding:10px 0;float:left;}
.sub-nav-bar-list > ul > li > a .sub-nav-bar-arrow-icon{font-family:'Material Icons';font-size:2em;padding:10px 0;float:right;transition:transform 0.2s;}
.sub-nav-bar-list > ul > li > a .sub-nav-bar-arrow-icon::before{content:'\e313';}
.sub-nav-bar-list > ul > li > a span{display:inline-block;padding:18px 12px;}
.sub-nav-bar-list > ul > li.hover .sub-nav-bar-arrow-icon{transform:rotate(180deg);}
.sub-nav-bar-list > ul > li.hover .sub-nav-bar-sub-list{display:inline-block;}
.sub-nav-bar-list .sub-nav-bar-rows{border-left:1px solid #435784;}
.sub-nav-bar-list .sub-nav-bar-rows:last-child{position:relative;background-color:#0167cb;border:none;}
.sub-nav-bar-list .sub-nav-bar-rows:last-child::after{content:"";position:absolute;top:-1px;left:0;width:100%;height:54px;border:1px solid #428ad0;box-sizing:border-box;}
/*.sub-nav-bar-list .sub-nav-bar-1depth{border-left:1px solid #435784;}
.sub-nav-bar-list .sub-nav-bar-2depth{position:relative;background-color:#0167cb;}
.sub-nav-bar-list .sub-nav-bar-2depth::after{content:"";position:absolute;top:-1px;left:0;width:100%;height:54px;border:1px solid #428ad0;box-sizing:border-box;}*/
.sub-nav-bar-sub-list{position:absolute;top:100%;left:0;z-index:1;display:none;width:100%;background-color:#fff;color:#000;}
.sub-nav-bar-sub-list ul,
.sub-nav-bar-sub-list li{display:inline-block;width:100%;float:left;}
.sub-nav-bar-sub-list a{display:inline-block;width:100%;padding:12px;box-sizing:border-box;}
.sub-nav-bar-sub-list a:hover{background-color:#ccc;}

.sub-nav-tab-container{display:block;width:100%;max-width:1200px;margin:4rem auto 0;}
.sub-nav-tab{display:inline-block;width:100%;float:left;}
.sub-nav-tab-list > ul{display:inline-block;width:100%;}
.sub-nav-tab-list > ul > li{position:relative;display:inline-block;width:16.666666%;float:left;}
.sub-nav-tab-list > ul > li::before{content:'';position:absolute;top:0;left:0;display:inline-block;float:left;width:calc(100% + 1px);height:calc(100% + 1px);border:1px solid #ccc;background-color:#f9f9f9;box-sizing:border-box;}
.sub-nav-tab-list > ul > li:nth-child(6n+6)::before{width:100%;}
.sub-nav-tab-list > ul > li.active::before{border:1px solid transparent;background-color:#0167cb;}
.sub-nav-tab-list > ul > li > a{position:relative;}
.sub-nav-tab-list > ul > li.active{color:#fff;font-weight:500;}
.sub-nav-tab-list > ul > li > a{display:inline-block;width:100%;padding:18px 0;text-align:center;}

.sub-list-tab-container{display:block;width:100%;max-width:1200px;margin:5em auto 0;}
.sub-list-tab{display:inline-block;width:100%;float:left;}
.sub-list-tab > ul{display:inline-block;width:100%;}
.sub-list-tab > ul > li{position:relative;display:inline-block;width:16.666666%;float:left;}
.sub-list-tab > ul > li::before{content:'';position:absolute;top:0;left:0;display:inline-block;float:left;width:calc(100% + 1px);height:calc(100% + 1px);border:1px solid #ccc;background-color:#f9f9f9;box-sizing:border-box;}
.sub-list-tab > ul > li:nth-child(6n+6)::before{width:100%;}
.sub-list-tab > ul > li.active::before{border:1px solid transparent;background-color:#0167cb;}
.sub-list-tab > ul > li > a{position:relative;}
.sub-list-tab > ul > li.active{color:#fff;font-weight:500;}
.sub-list-tab > ul > li > a{display:inline-block;width:100%;padding:18px 0;text-align:center;}

/**
 * Contents
 */
.layout-contents{display:block;width:100%;max-width:1200px;margin:0 auto;}
.layout-contents.w-800{max-width:800px;}

.sub-page-container{display:inline-block;width:100%;float:left;margin-top:4rem;}
.sub-page-title{text-align:center;}
.sub-page-title h3{font-size:2em;font-weight:500;}
.sub-page-title p{line-height:1.4em;}
.sub-page-contents{display:inline-block;width:100%;}
.sub-page-text{display:block;width:100%;max-width:1200px;margin:2% auto;}
.sub-page-text p{line-height:1.6em;white-space:pre-line;}
.sub-page-price-info .sub-page-price-info-contents{overflow-x:scroll;}
.sub-page-price-info-tabs .active{color:#0167cb;font-weight:500;}
.sub-page-price-info-tabs ul li{display:inline-block;padding:12px 8px;}
.sub-page-price-info-tabs ul li:first-child{padding-left:0;}
.sub-page-price-info-table{position:relative;width:100%;text-align:center;border-collapse:collapse;}
.sub-page-price-info-table::after{content:'';position:absolute;bottom:0;left:0;width:100%;border-bottom:1px solid #d8dadb;box-sizing:border-box;}
.sub-page-price-info-table p{display:inline-block;width:100%;line-height:1.6em;white-space:pre-line;}
.sub-page-price-info-table tr > th,
.sub-page-price-info-table tr > td{padding:18px 24px;border-top:1px solid #d8dadb;border-left:1px solid #d8dadb;border-right:1px solid #d8dadb;vertical-align:middle;}
.sub-page-price-info-table tr > th{font-weight:500;}
.sub-page-price-info-table tr > *:first-child{border-left:none;}
.sub-page-price-info-table tr > *:last-child{border-right:none;}
.sub-page-price-info-table thead{background-color:#f9f9f9;border-top:2px solid #0167cb;}
.sub-page-price-info-table thead tr > th,
.sub-page-price-info-table thead tr > td{border-bottom:none;}
.sub-page-price-info-table .sub-page-price-info-table-rowspan,
.sub-page-price-info-table .sub-page-price-info-table-rowspan *{height:0;padding:0;border:none;}
.sub-page-price-info-table .sub-page-price-info-table-rowspan .rowspan-show{border-top:1px solid #d8dadb;}
.sub-page-price-info-comments{margin-top:1%;line-height:1.4em;}
.sub-page-price-info-comments ul li{position:relative;padding-left:1em;}
.sub-page-price-info-comments ul li::before{content:'•';position:absolute;top:0;left:0;display:inline-block;margin-right:0.5em;vertical-align:top;}
.sub-page-price-info-comments p{display:inline;white-space:pre-line;}
.sub-page-details > section{display:inline-block;width:100%;margin:2em 0;}
.sub-page-details .sub-page-details-section-title{font-size:1.5em;text-align:center;margin-bottom:3%;}
.sub-page-details .sub-page-details-section-contents-box{padding:1.5%;border:5px solid #0167cb;}
.sub-page-details .sub-page-details-section-contents-box > *{margin-top:1em;}
.sub-page-details .sub-page-details-section-contents-box > *:first-child{margin-top:0;}
.sub-page-details .sub-page-details-section-contents-box p{white-space:pre-line;line-height:1.6em;}
.sub-page-details .sub-page-details-section-contents-box img{display:block;margin-left:auto;margin-right:auto;}
.sub-page-details .sub-page-details-section-contents-box-group .sub-page-details-section-contents-box-rows{display:inline-block;margin-top:4%;}
.sub-page-details .sub-page-details-section-contents-box-group .sub-page-details-section-contents-box-rows:first-child{margin-top:0;}
.sub-page-details .sub-page-details-section-contents-box-group .sub-page-details-section-contents-box-cols{position:relative;display:inline-block;background-color:#f2f2f2;padding:2%;line-height:1.6em;float:left;vertical-align:top;box-sizing:border-box;}
.sub-page-details .sub-page-details-section-contents-box-group .sub-page-details-section-contents-box-cols-container{position:relative;display:inline-block;width:100%;}
.sub-page-details .sub-page-details-section-contents-box-group.is-square .sub-page-details-section-contents-box-cols-container{min-height:212px;}
.sub-page-details .sub-page-details-section-contents-box-group .sub-page-details-section-contents-box-cols.bg-blue{background-color:#0167cb;color:#fff;}
.sub-page-details .sub-page-details-section-contents-box-cols-title{font-size:1.2em;font-weight:500;color:#0167cb;white-space:pre-line;}
.sub-page-details .sub-page-details-section-contents-box-cols.bg-blue .sub-page-details-section-contents-box-cols-title{color:#fff;font-size:1.5em;line-height:1.6em;}
.sub-page-details .sub-page-details-section-contents-box-cols-contents{font-size:1em;white-space:pre-line;word-break:keep-all;}
.sub-page-details .sub-page-details-section-contents-box-cols-buttons{display:table;width:110px;height:40px;box-sizing:border-box;}
.sub-page-details .sub-page-details-section-contents-box-cols-buttons.top-left{position:absolute;top:2%;left:2%;}
.sub-page-details .sub-page-details-section-contents-box-cols-buttons.top-right{position:absolute;top:2%;right:2%;}
.sub-page-details .sub-page-details-section-contents-box-cols-buttons.bottom-left{position:absolute;bottom:2%;left:2%;}
.sub-page-details .sub-page-details-section-contents-box-cols-buttons.bottom-right{position:absolute;bottom:2%;right:2%;}
.sub-page-details .sub-page-details-section-question-box{display:inline-block;width:100%;padding:2%;background-color:#f2f2f2;box-sizing:border-box;}
.sub-page-details .sub-page-details-section-question-box-thumbnail{display:inline-block;width:18%;margin:1% 2% 1% 0;float:left;background-color:#fff;}
.sub-page-details .sub-page-details-section-question-box-body{display:inline-block;width:52%;float:left;}
.sub-page-details .sub-page-details-section-question-box-title{font-size:1.5em;line-height:2em;font-weight:500;color:#0167cb;}
.sub-page-details .sub-page-details-section-question-box-contents{font-size:1em;line-height:1.6em;white-space:pre-line;}
.sub-page-details .sub-page-details-section-question-box-buttons{display:inline-block;width:auto;float:right;padding:1.5% 5%;font-size:1.4em;font-weight:500;vertical-align:top;}
.sub-page-idc-center-info-list{}
.sub-page-idc-center-info-rows{margin:1em 0;}
.sub-page-idc-center-info-cols{padding-right:2em;box-sizing:border-box;vertical-align:top;}
.sub-page-idc-center-info-cols h3{display:inline-block;width:auto;min-width:200px;line-height:1.2em;padding:0.8em;font-weight:400;background-color:#0167cb;color:#fff;box-sizing:border-box;}
.sub-page-idc-center-info-cols p{line-height:1.4em;margin-top:1em;}
.sub-page-idc-center-info-rows.style-thumbnail{background-color:#f2f2f2;color:#000;}
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols{padding:1em 1em;box-sizing:border-box;}
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols img{display:inline-block;width:40%;float:left;}
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols h3,
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols p{display:inline-block;width:60%;padding:0 1em;float:right;box-sizing:border-box;}
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols h3{min-width:initial;background-color:initial;color:initial;}
.sub-page-idc-center-info-rows.style-thumbnail .sub-page-idc-center-info-cols p{}
.sub-page-map{display:block;width:100%;}
.sub-page-map-container{display:inline-block;width:100%;height:500px;}

.sub-page-service-usage-left,
.sub-page-service-usage-right{vertical-align:middle;}
.sub-page-service-usage-chart{display:inline-block;width:100%;padding:1em 0;border:5px solid #0167cb;box-sizing:border-box;}
.sub-page-service-usage-chart #chart-service-usage{height:240px;}
.sub-page-service-usage-month-amount{display:inline-block;width:100%;margin-top:1em;padding:1em;background-color:#031f5e;color:#fff;box-sizing:border-box;}
.sub-page-service-usage-month-amount h3{font-size:1.4em;font-weight:400;}
.sub-page-service-usage-month-amount p{margin-top:1.4em;text-align:right;}
.sub-page-service-usage-month-amount p strong{font-size:3em;color:#fff000;}
.sub-page-dashboard-status .sub-page-dashboard-status-rows{display:inline-block;width:100%;padding:1.5em 0;border-bottom:1px solid #d8dadb;}
.sub-page-dashboard-status .sub-page-dashboard-status-rows:first-child{padding-top:0;}
.sub-page-dashboard-status .sub-page-dashboard-status-title{color:#0167cb;font-size:1.2em;font-weight:500;line-height:1.4em;}
.sub-page-dashboard-status .sub-page-dashboard-status-title h3{display:inline-block;}
.sub-page-dashboard-status .sub-page-dashboard-status-contents{display:inline-block;width:100%;margin-top:1em;line-height:1.4em;}
.sub-page-dashboard-status .sub-page-dashboard-status-contents ul li::before{content:'•';margin-right:0.4em;}
.sub-page-dashboard-status .icon-sub-page-dashboard-status-link{display:inline-block;font-size:1em;width:1.3em;height:1.3em;text-align:center;background-color:#0167cb;color:#fff;border-radius:100%;}
.sub-page-dashboard-status .icon-sub-page-dashboard-status-link::before{content:'\e315';font-family: "Material Icons";}

.sub-dns-register input{font-size:1.2em;font-weight:500;}
.sub-dns-register input[name=DOMAIN]{box-shadow:0 0 0 5px #0167cb inset;transition:box-shadow .2s;}
.sub-dns-register input[name=DOMAIN]:focus{box-shadow:0 0 0 5px #3f81ff inset;}

.sub-page-payment .list-container .list-body{border-bottom:none;}
.sub-payment-status .sub-payment-status-amount-box,
.sub-payment-status .sub-payment-status-apply-box{display:inline-block;width:50%;padding:1.4em;border:5px solid #0167cb;float:left;box-sizing:border-box;}
.sub-payment-status .sub-payment-status-amount-box{border-right-width:2.5px;}
.sub-payment-status .sub-payment-status-total-amount-box{display:inline-block;width:100%;padding:1.4em;text-align:right;background-color:#031f5e;color:#fff;box-sizing:border-box;}
.sub-payment-status .sub-payment-status-amount-box h3,
.sub-payment-status .sub-payment-status-amount-box p{display:inline-block;width:100%;font-size:1.4em;font-weight:400;}
.sub-payment-status .sub-payment-status-amount-box p{text-align:right;margin-top:2em;}
.sub-payment-status .sub-payment-status-amount-box p strong{color:#0167cb;font-size:2em;}
.sub-payment-status .sub-payment-status-apply-box{border-left-width:2.5px;background-color:#0167cb;color:#fff;}
.sub-payment-status .sub-payment-status-apply-box input[type=button].bg-white{margin-top:2.6em;color:#0167cb;box-shadow:0 0 0 0 transparent inset;}
.sub-payment-status .sub-payment-status-apply-box input[type=button].bg-white:active{background-color:#3f81ff;color:#fff;box-shadow:0 0 0 0 transparent inset;}
.sub-payment-status .sub-payment-status-total-amount-box p{font-size:2em;}
.sub-payment-status .sub-payment-status-total-amount-box p strong{font-weight:500;}
.sub-payment-status .sub-payment-status-total-amount-box p span{display:inline-block;font-size:0.5em;height:100%;}

.sub-page-login form .cols-6{vertical-align:middle;}
.sub-page-login form .form-group-contents .form-group-rows:last-child .form-group-fields{border-bottom:2px solid #0167cb;}
.sub-page-login-member-register{display:block;width:100%;max-width:800px;margin:0 auto;}
.sub-page-login-member-register .sub-page-login-member-register-box{display:inline-block;width:100%;padding:1.4em;background-color:#f2f2f2;box-sizing:border-box;}
.sub-page-login-member-register .sub-page-login-member-register-comment{width:75%;float:left;}
.sub-page-login-member-register .sub-page-login-member-register-comment h3{font-size:1.2em;font-weight:500;}
.sub-page-login-member-register .sub-page-login-member-register-comment p{font-size:0.9em;margin-top:1em;}
.sub-page-login-member-register .sub-page-login-member-register-link{width:25%;float:right;text-align:center;}
.sub-page-login-member-register .sub-page-login-member-register-link a{width:90%;}


/**
 * 1024 ~
 * 768 ~ 1024
 * ~ 768
 */

@media only screen and (max-width: 1300px) {
}

/**
 * xl & content max-width
 */
@media only screen and (max-width: 1200px) {
}

/**
 * lg
 */
@media only screen and (max-width:992px) {
    .sub-nav-tab-list > ul > li{width:20%;}
    .sub-nav-tab-list > ul > li:nth-child(6n+6)::before{width:calc(100% + 1px);}
    .sub-nav-tab-list > ul > li:nth-child(5n+5)::before{width:100%;}
}

/**
 * md
 */
@media only screen and (max-width:768px) {
    .sub-nav-tab-list > ul > li{width:25%;}
    .sub-nav-tab-list > ul > li:nth-child(5n+5)::before{width:calc(100% + 1px);}
    .sub-nav-tab-list > ul > li:nth-child(4n+4)::before{width:100%;}
}

/**
 * sm
 */
@media only screen and (max-width:576px) {
    .sub-nav-tab-list > ul > li{width:33.333333%;}
    .sub-nav-tab-list > ul > li:nth-child(4n+4)::before{width:calc(100% + 1px);}
    .sub-nav-tab-list > ul > li:nth-child(3n+3)::before{width:100%;}
}

/**
 * xs
 */
@media only screen and (max-width:414px) {
    .sub-nav-tab-list > ul > li{width:50%;}
    .sub-nav-tab-list > ul > li:nth-child(3n+3)::before{width:calc(100% + 1px);}
    .sub-nav-tab-list > ul > li:nth-child(2n+2)::before{width:100%;}

    .sub-nav-bar-list{display:none;}
    /*.sub-nav-bar-list .sub-nav-bar-1depth,
    .sub-nav-bar-list .sub-nav-bar-2depth{width:100%;}*/
}