/*
 * @서버/IDC
 * @Date : 2017-09-28
*/

.server-wrap .service-list {line-height: 30px}

.server-wrap .server-content {overflow: hidden}
.server-wrap .server-content li {float: left; width: 276px; height: 418px; margin-right: 4px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .server-content li:last-of-type {margin-right: 0}
.server-wrap .server-content dt {margin-bottom: 30px; text-align: center; font-size: 16px; color: #222; line-height:16px; letter-spacing:-.25px}
.server-wrap .server-content dd {position: relative; padding: 0 14px 4px 24px; line-height: 24px; word-break: keep-all}
.server-wrap .server-content dd::before {content: '·'; position: absolute; left: 14px;}
.server-wrap .server-content .indent {padding-left: 34px}
.server-wrap .server-content .indent::before {content: '-'; left: 24px}
.server-wrap .server-content [class^="content-img"] {height: 83px; margin: 30px auto; background-image:url("../../images/crebiz/server/server-common.png"); background-repeat:no-repeat; background-size:640px}
.server-wrap .server-content .content-img01 {width: 83px; background-position: 0 -365px}
.server-wrap .server-content .content-img02 {width: 83px; background-position: -87px -365px}
.server-wrap .server-content .content-img03 {width: 92px; background-position: -174px -365px}

.server-wrap .process {overflow:hidden; display:table; width:840px; margin:20px auto; padding:20px 0; background-color: #fbfbfb; border: 1px solid #efefef; border-radius: 2px}
.server-wrap .process-list {position:relative; display:table-cell; width:20%}
.server-wrap .process-list::after {content:''; position:absolute; top:22px; right:-12px; width:23px; height:32px; background-image:url("../../images/crebiz/common/process-next.png"); background-repeat:no-repeat}
.server-wrap .process-list:last-child::after {content:none}
.server-wrap .process-list [class^="process-img"] {width:76px; height:76px; margin:0 auto 21px; background-image:url("../../images/crebiz/server/server-common.png"); background-repeat:no-repeat; background-size:640px}
.server-wrap .process-img01 {background-position: 0 -285px}
.server-wrap .process-img02 {background-position: -80px -285px}
.server-wrap .process-img03 {background-position: -160px -285px}
.server-wrap .process-img04 {background-position: -240px -285px}
.server-wrap .process-img05 {background-position: -320px -285px}
.server-wrap .process-text {font-size: 14px; color:#222; font-weight: 400; text-align:center}

.server-wrap .server-info {overflow: hidden; margin: 0 -4px}
.server-wrap .server-info li {float: left; width: 163px; margin: 0 0 4px 4px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .server-info a {display: block; position: relative; padding-left: 14px; color:#666; line-height: 54px;}
.server-wrap .server-info a::after {content: ''; position: absolute; top: 50%; right: 10px; margin-top: -8px; width: 10px; height: 17px; background: url("../../images/crebiz/common/goto-link.png") no-repeat}
.server-wrap .server-info a:hover {text-decoration: none}

.server-wrap .service-recommand {overflow: hidden}
.server-wrap .service-recommand li {float: left; width: 205px; margin-right: 4px; padding: 30px 0; text-align: center; border: 1px solid #efefef; line-height: 24px; color: #222}
.server-wrap .service-recommand li:last-of-type {margin-right: 0}
.server-wrap .service-recommand .service-text {font-weight: 400}
.server-wrap .service-recommand [class^="service-img"] {height: 46px; margin: 23px auto 33px; background-image:url("../../images/crebiz/server/server-common.png"); background-repeat:no-repeat; background-size:640px; text-indent: -999em}
.server-wrap .service-recommand .service-img01 {width: 112px; background-position: 0 -236px}
.server-wrap .service-recommand .service-img02 {width: 122px; background-position: -116px -236px}
.server-wrap .service-recommand .service-img03 {width: 156px; background-position: -242px -236px}
.server-wrap .service-recommand .service-img04 {width: 146px; background-position: -402px -236px}
.server-wrap .service-recommand .btns {padding: 4px 27px}

.server-wrap .list-box {width: 100%; margin-top: 24px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .customer-list {overflow: hidden; margin: 30px 36px 0 36px}
.server-wrap .customer-list li {float: left; margin-right: 52px}
.server-wrap .customer-list li:nth-child(5n) {margin-right: 0}
.server-wrap .customer-list [class^="customer-logo"] {width: 112px; height: 43px; margin-bottom: 30px; background-image:url("../../images/crebiz/server/server-common.png"); background-repeat:no-repeat; background-size:640px; text-indent: -9999em}
.server-wrap .customer-list .customer-logo1 {background-position: 0 0}
.server-wrap .customer-list .customer-logo2 {background-position: -116px 0}
.server-wrap .customer-list .customer-logo3 {background-position: -232px 0}
.server-wrap .customer-list .customer-logo4 {background-position: -348px 0}
.server-wrap .customer-list .customer-logo5 {background-position: -464px 0}
.server-wrap .customer-list .customer-logo6 {background-position: 0 -47px}
.server-wrap .customer-list .customer-logo7 {background-position: -116px -47px}
.server-wrap .customer-list .customer-logo8 {background-position: -232px -47px}
.server-wrap .customer-list .customer-logo9 {background-position: -348px -47px}
.server-wrap .customer-list .customer-logo10 {background-position: -464px -47px}
.server-wrap .customer-list .customer-logo11 {background-position: 0 -94px}
.server-wrap .customer-list .customer-logo12 {background-position: -116px -94px}
.server-wrap .customer-list .customer-logo13 {background-position: -232px -94px}
.server-wrap .customer-list .customer-logo14 {background-position: -348px -94px}
.server-wrap .customer-list .customer-logo15 {background-position: -464px -94px}
.server-wrap .customer-list .customer-logo16 {background-position: 0 -141px}
.server-wrap .customer-list .customer-logo17 {background-position: -116px -141px}
.server-wrap .customer-list .customer-logo18 {background-position: -232px -141px}
.server-wrap .customer-list .customer-logo19 {background-position: -348px -141px}
.server-wrap .customer-list .customer-logo20 {background-position: -464px -141px}
.server-wrap .customer-list .customer-logo21 {background-position: 0 -188px}
.server-wrap .customer-list .customer-logo22 {background-position: -116px -188px}
.server-wrap .customer-list .customer-logo23 {background-position: -232px -188px}
.server-wrap .customer-list .customer-logo24 {background-position: -348px -188px}

.server-wrap .wrap-welcome {width: 840px; margin: 50px 0; padding: 30px 0; background-color: #fbfbfb; border: 1px solid #efefef; text-align: center}
.server-wrap .welcome-text {font-size: 14px; padding-bottom: 15px}
.server-wrap .wrap-welcome .btns {padding: 8px 38px; font-size: 16px; font-weight: 600}

.server-wrap .content-point {overflow: hidden; margin-right: -10px}
.server-wrap .content-point li {float: left; width: 386px; min-height: 209px; margin-right: 10px; margin-bottom: 10px; padding: 0 14px; background: #fbfbfb; border: 1px solid #efefef; }
.server-wrap .content-point .low-height {min-height: 152px}
.server-wrap .content-point .high-height {min-height: 302px}
.server-wrap .content-point .high-height2 {min-height: 344px}
.server-wrap .content-point .high-height3 {min-height: 273px}
.server-wrap .content-point .high-height4 {min-height: 242px}

.server-wrap .content-point .point-header {width: 100%; margin-top: 30px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e9e9e9; font-size: 20px; font-weight: 600; color: #222; text-align: center;}
.server-wrap .content-point .indent {position: relative; padding-left: 8px; line-height: 24px; margin-bottom: 4px; word-break: keep-all}
.server-wrap .content-point .indent::before {content: '·'; position: absolute; left: 0}

.server-wrap .product-spec {overflow: hidden; margin-top: 20px; margin-right: -4px}
.server-wrap .product-spec li {float: left; width: 248px; margin-right: 4px; padding: 0 14px 27px 14px; border: 1px solid #efefef}
.server-wrap .product-spec .spec-header {margin-top: 47px; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #222}
.server-wrap .product-spec .indent {position: relative; padding-left: 8px; line-height: 24px; word-break: keep-all}
.server-wrap .product-spec .indent::before {content: '·'; position: absolute; left: 0}
.server-wrap .product-spec [class^="spec-img"] {background-image:url("../../images/crebiz/server/server-spec.png"); background-repeat:no-repeat}
.server-wrap .product-spec .spec-img01 {width:208px; height:29px; margin: 111px auto 0; background-position: 0 0}
.server-wrap .product-spec .spec-img02 {width:188px; height:70px; margin: 70px auto 0; background-position: -218px 0}
.server-wrap .product-spec .spec-img03 {width:172px; height:91px; margin: 49px auto 0; background-position: -416px 0}
.server-wrap .product-spec .spec-img04 {width:190px; height:137px; margin: 37px auto 0; background-position: 0 -95px}
.server-wrap .product-spec .spec-img05 {width:166px; height:137px; margin: 37px auto 0; background-position: -200px -95px}
.server-wrap .product-spec .spec-img06 {width:147px; height:137px; margin: 37px auto 0; background-position: -376px -95px}

.server-wrap .warning {padding-left:24px}
.server-wrap .warning li {position:relative; margin-bottom:5px}
.server-wrap .warning li::before {position:absolute; top:0; left:-24px;}
.server-wrap .warning .num01::before {content:'01.'}
.server-wrap .warning .num02::before {content:'02.'}
.server-wrap .warning .num03::before {content:'03.'}
.server-wrap .warning .num04::before {content:'04.'}
.server-wrap .warning .num05::before {content:'05.'}

.server-wrap .caution {position:relative; padding-left: 14px}
.server-wrap .caution::before {content:'※'; position:absolute; left:0}

.server-wrap .guard-process {position: relative; overflow: hidden; width: 840px; height: 268px; margin: 30px 0; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .guard-process .guard-left01 {position: absolute; top: 20px; left: 38px; width: 130px; text-align: center}
.server-wrap .guard-process .guard-left02 {position: absolute; top: 144px; left: 38px; width: 130px; text-align: center}
.server-wrap .guard-process .guard-left01 p,
.server-wrap .guard-process .guard-left02 p {margin-top: 6px}
.server-wrap .guard-process .guard-center {position: absolute; top: 20px; left: 158px}
.server-wrap .guard-process .guard-center p {margin: 29px 0 0 112px}
.server-wrap .guard-process .guard-center02 {position: absolute; top: 20px; left: 158px}
.server-wrap .guard-process .guard-center02 .text-position01 {position: absolute; top: 155px; left: 103px}
.server-wrap .guard-process .guard-center02 .text-position02 {position: absolute; top: 155px; left: 310px}
.server-wrap .guard-process .guard-center02 .text-position03 {margin: 10px 0 0 127px}
.server-wrap .guard-process .guard-center03 {position: absolute; top: 36px; left: 158px}
.server-wrap .guard-process .guard-center03 .text-position01 {position: absolute; top: 50px; left: 42px}
.server-wrap .guard-process .guard-center03 .text-position02 {position: absolute; top: 175px; left: 42px}
.server-wrap .guard-process .guard-center03 .text-position03 {margin: 23px 0 0 158px}
.server-wrap .guard-process .guard-right {position: absolute; top: 20px; right: 48px}
.server-wrap .guard-process .guard-right p {margin-top: 31px; text-align: center;}
.server-wrap .guard-processlist {position: relative; overflow: hidden; width: 840px; height: 298px; margin: 30px 0; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .guard-processlist [class^="guard-list"] {float: left; margin-top: 29px; text-align: center;}
.server-wrap .guard-processlist [class^="guard-list"] p:first-of-type {margin-top: 28px}
.server-wrap .guard-processlist .guard-list01 {margin-left: 24px; margin-right: 41px}
.server-wrap .guard-processlist .guard-list02 {margin-right: 18px}
.server-wrap .guard-processlist .guard-list02 .guard-text {margin-left: -58px}
.server-wrap .guard-processlist .guard-list03 {margin-right: 13px}
.server-wrap .guard-processlist .guard-list03 .guard-text {margin-left: -69px}
.server-wrap .guard-processlist .guard-list04 {margin-right: 7px}
.server-wrap .guard-processlist .guard-list04 .guard-text {margin-left: -60px}

.server-wrap .service-point {overflow: hidden; margin-right: -4px}
.server-wrap .service-point li {float: left; width: 248px; height: 168px; padding: 0 14px; margin-right: 4px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .service-point .high-height {height: 260px}
.server-wrap .service-point .point-header {margin-top: 30px; margin-bottom: 20px; font-size: 16px; font-weight: 600; color: #222; text-align: center;}
.server-wrap .service-point .indent {position: relative; padding-left: 8px; line-height: 24px; word-break: keep-all}
.server-wrap .service-point .indent::before {content: '·'; position: absolute; left: 0}
.server-wrap .service-point .multiple {line-height: 30px; margin-bottom: 2px}

.server-wrap .guard-traffic {margin-bottom: 30px}
.server-wrap .guard-traffic dt {font-size: 16px; color: #222; font-weight: 600; line-height: 30px;}
.server-wrap .guard-traffic dd {font-weight: 300}

.server-wrap .anti-virusimg {margin-top: 30px; border: 1px solid #efefef}
.server-wrap .content-package {overflow: hidden; margin-right: -46px; text-align: center}
.server-wrap .content-package li {position: relative; float: left; width: 220px; height: 140px; padding: 0 14px; margin-right: 46px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .content-package li::after {content: ''; position: absolute; top: 50%; right: -40px; width: 30px; height: 30px; margin-top: -15px; background-image: url("../../images/crebiz/common/plus.png")}
.server-wrap .content-package li:last-of-type::after {content: none;}
.server-wrap .content-package .point-header {margin-top: 30px; margin-bottom: 20px; font-size: 16px; font-weight: 600; color: #222; text-align: center;}

.server-wrap .road-val {overflow: hidden; width: 840px; margin-bottom: 20px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .road-val01 {float: left; margin-top: 30px; margin-left: 56px; margin-bottom: 30px; text-align: center}
.server-wrap .road-val02 {float: right; margin-top: 30px; margin-right: 56px; margin-bottom: 30px; text-align: center}
.server-wrap .road-val p {margin-top: 25px; line-height: 24px}

.server-wrap .license-content {overflow: hidden; margin-top: 20px; margin-right: -4px; margin-bottom: 20px}
.server-wrap .license-content li {float: left; width: 248px; height: 362px; margin-right: 4px; padding: 0 14px; border: 1px solid #efefef; background-color: #fbfbfb}
.server-wrap .license-content [class^="license-img"] {width: 100px; height: 100px; margin: 30px auto; background-image:url("../../images/crebiz/server/server-common.png"); background-repeat:no-repeat}
.server-wrap .license-content .license-img01 {background-position: -270px -365px}
.server-wrap .license-content .license-img02 {background-position: -374px -365px}
.server-wrap .license-content .license-img03 {background-position: -478px -365px}
.server-wrap .license-content .license-header {margin-bottom: 20px; font-size: 16px; font-weight: 600; color: #222; text-align: center; line-height: 24px}
.server-wrap .license-content dd {line-height: 24px}

.server-wrap .idc-select {overflow: hidden; width: 842px; margin-top: 58px}
.server-wrap .idc-list {float: left; margin: 3px; padding-bottom: 20px}
.server-wrap .idc-list .thumnail-box {width: 414px; height: 307px; padding: 0; margin: 0; background-color: #fff; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; cursor: pointer;}
.server-wrap .idc-list .thumnail-box.active {position: relative; border-color: #00adbb; box-shadow: 0px 0px 0px 3px #00adbb; text-decoration: none}
.server-wrap .idc-list .thumnail-box.active::after {content: ""; display: block; position: absolute; background: transparent; width: 0; height: 0; border: 10px solid; border-color: transparent; border-top-color: #00adbb; bottom: -22px; left: 0; right: 0; margin-left: auto; margin-right: auto}
.server-wrap .idc-list .idc_img01 {width: 100%; height: 307px; text-indent: -9999em; background: url("../../images/crebiz/server/center01.png") no-repeat; background-size: cover}
.server-wrap .idc-list .idc_img02 {width: 100%; height: 307px; text-indent: -9999em; background: url("../../images/crebiz/server/center02.png") no-repeat; background-size: cover}
.server-wrap .idc-list .active .idc_img01 {background: url("../../images/crebiz/server/center01-active.png") no-repeat; background-size: cover}
.server-wrap .idc-list .active .idc_img02 {background: url("../../images/crebiz/server/center02-active.png") no-repeat; background-size: cover}

.server-wrap .content-level {overflow: hidden; width: 842px; height: 191px; margin-top: 20px; background: url("../../images/crebiz/common/level-cover.png") no-repeat}
.server-wrap .content-level li {float: left; height: 191px; padding-left: 14px;}
.server-wrap .content-level .level1 {width: 284px}
.server-wrap .content-level .level2 {width: 278px}
.server-wrap .content-level .level3 {width: 238px}
.server-wrap .content-level .level-header {margin-top: 30px; margin-bottom: 20px; font-size: 16px; font-weight: 600; color: #222; line-height: 24px}
.server-wrap .content-level .indent {position: relative; padding-left: 8px; line-height: 24px; word-break: keep-all}
.server-wrap .content-level .indent::before {content: '·'; position: absolute; left: 0}

.contents-wrap .tab-content {margin-bottom: 120px}