212 lines
14 KiB
CSS
212 lines
14 KiB
CSS
@charset "utf-8";
|
|
/* doc.css는 디자인페이지 스타일을 정의합니다. */
|
|
|
|
.sub-tab {margin-bottom:30px;}
|
|
.sub-tab ul {*zoom:1;}
|
|
.sub-tab ul:after {content:" "; display:block; clear:both;}
|
|
.sub-tab ul li {float:left; background:#f4f5f6; box-sizing:border-box; border-left:1px solid #e5e5e5;}
|
|
.sub-tab ul li:first-child {border-left:0;}
|
|
.sub-tab ul li a {display:block; text-decoration:none; text-align:center; color:#5d5d5d; font-size:17px; font-weight:500; line-height:50px;}
|
|
.sub-tab ul li.active a {background:#456fc1; color:#fff;}
|
|
.sub-tab.col-2 ul li {width:50%;}
|
|
.sub-tab.col-4 ul li {width:25%;}
|
|
|
|
.con-tit {}
|
|
.con-txt {font-size:16px; font-weight:300; line-height:25px; color:#5d5d5d;}
|
|
|
|
.bul-list {}
|
|
.bul-list li {position:relative; font-size:15px; font-weight:300; line-height:26px; color:#555; padding-left:14px;}
|
|
.bul-list li:after {content:''; display:block; width:8px; height:8px; position:absolute; left:0; top:9px; background:#c8c8c8; -webkit-border-radius:50%; border-radius:50%;}
|
|
|
|
/* 사이트맵 */
|
|
.sitemap {overflow:hidden;}
|
|
.sitemap .row {*zoom:1; margin:0 -10px;}
|
|
.sitemap .row:after {content:" "; display:block; clear:both;}
|
|
.sitemap dl {float:left; width:20%; padding:0 10px; box-sizing:border-box;}
|
|
.sitemap dl dt {border:1px solid #ddd; padding:10px 0; background:#f4f4f4; line-height:1.3em; text-align:center; font-size:16px; font-weight:500; color:#333; margin:0 0 5px 0;}
|
|
.sitemap dl dd {border-bottom:1px dotted #ccc;}
|
|
.sitemap dl dd a {display:block; padding:9px 0 9px 26px; color:#4f4f4f; font-size:15px; line-height:22px; background:url("../images/sub/dot.gif") 10px 17px no-repeat;}
|
|
.sitemap dl dd ul {background:#f4f4f4; padding:8px 0;}
|
|
.sitemap dl dd ul li a {display:block; background:none; font-size:14px; font-weight:200; line-height:20px; padding:2px 0 2px 15px; text-decoration:none;}
|
|
|
|
/* 인사말 */
|
|
.greeting {padding:70px 0 50px; background:url("../images/sub/greeting02.png") 100% 0 no-repeat;}
|
|
.greeting .tit {margin-bottom:40px;}
|
|
.greeting .con-txt {margin-bottom:20px;}
|
|
|
|
/* 센터소개 */
|
|
.center-info {margin:0 -360px -60px;}
|
|
.center-info .section01 {padding:0 0 75px;}
|
|
.center-info .section01 .tit {text-align:center; margin-bottom:70px;}
|
|
.center-info .section01 .con ul {font-size:0; line-height:0; text-align:center;}
|
|
.center-info .section01 .con ul li {display:inline-block; vertical-align:top; margin-left:135px;}
|
|
.center-info .section01 .con ul li:first-child {margin-left:0;}
|
|
.center-info .section01 .con ul li .img {margin-bottom:15px;}
|
|
.center-info .section01 .con ul li .caption {display:inline-block; vertical-align:top; text-align:left;}
|
|
.center-info .section01 .con ul li .caption p {font-size:16px; font-weight:300; line-height:25px; color:#5d5d5d;}
|
|
.center-info .section02 {background:#f4f4f4 url("../images/sub/bg_arr.png") 50% 0 no-repeat; padding:0 0 20px;}
|
|
.center-info .section02 .head {padding:50px 0 35px; border-bottom:1px solid #ddd; margin-bottom:40px;}
|
|
.center-info .section02 .head h3 {font-size:30px; font-weight:500; line-height:1.4; color:#454545; text-align:center;}
|
|
.center-info .section02 .head h3 span {font-size:12px; font-weight:200; color:#787878; letter-spacing:0.3em;}
|
|
.center-info .section02 .p1 {font-size:20px; font-weight:500; line-height:26px; color:#787878; text-align:center; margin-bottom:35px;}
|
|
.center-info .section02 .con {overflow:hidden;}
|
|
.center-info .section02 .con ul {*zoom:1; margin:0 -25px;}
|
|
.center-info .section02 .con ul:after {content:''; display:block; clear:both;}
|
|
.center-info .section02 .con ul li {float:left; width:50%; padding:0 25px; margin-bottom:50px; box-sizing:border-box;}
|
|
.center-info .section02 .con ul li:nth-child(2n+1) {clear:left;}
|
|
.center-info .section02 .con ul li .img {margin-bottom:15px;}
|
|
.center-info .section03 .contain {height:411px; padding:125px 0 0; background:url("../images/sub/center_info09.png") 0 0 no-repeat; box-sizing:border-box;}
|
|
.center-info .section03 .contain .p1 {font-size:20px; font-weight:400; line-height:35px; color:#5d5d5d;}
|
|
.center-info .section03 .contain .p1 span {font-size:23px; font-weight:500; color:#4a7610;}
|
|
|
|
/* 개인정보보호 */
|
|
.privacy .top {position:relative; height:210px; margin-bottom:60px; background:#f0f0f0 url("../images/sub/privacy1.png") 70px 50% no-repeat; box-sizing:border-box; border-radius:9px;}
|
|
.privacy .top .pos {position:absolute; left:434px; top:50%; padding-left:60px; font-size:16px; font-weight:300; line-height:30px; color:#454545; border-left:1px solid #cdcdcd; -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
|
|
.privacy .con ul li {position:relative; padding-left:99px; margin-bottom:65px;}
|
|
.privacy .con ul li .num {position:absolute; left:0; top:0;}
|
|
.privacy .con ul li dl dt {font-size:18px; font-weight:500; line-height:26px; color:#333; margin-bottom:15px;}
|
|
.privacy .con ul li dl dd {font-size:16px; font-weight:300; line-height:25px; color:#5d5d5d}
|
|
.privacy .con ul li dl dd.num-list {padding-left:19px; text-indent:-19px;}
|
|
.privacy .con ul li dl dd.ex {margin:30px 0 0;}
|
|
.privacy .con ul li .req {color:#90ad60;}
|
|
.privacy .con ul li strong {font-weight:500; color:#454545;}
|
|
.privacy .con ul li .url {margin-left:35px;}
|
|
|
|
/* 개요 */
|
|
.summary {margin-bottom:-60px;}
|
|
.summary .head {margin-bottom:50px;}
|
|
.summary .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.summary .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.summary .head p span {color:#4a7610;}
|
|
.summary .img {text-align:center;}
|
|
.summary .section02 {position:relative; height:310px;}
|
|
.summary .section02 .inner {position:absolute; left:50%; top:0; margin-left:-960px; width:1920px; height:310px;}
|
|
|
|
/* 신청절차 */
|
|
.process {margin:0 -360px 0;}
|
|
.process .section01 {padding:0 0 90px;}
|
|
.process .section02 {background:#f4f4f4 url("../images/sub/bg_arr.png") 50% 0 no-repeat; padding:0 0 85px;}
|
|
.process .section02 .head {padding:50px 0 35px; border-bottom:1px solid #ddd; margin-bottom:40px;}
|
|
.process .section02 .head h3 {font-size:30px; font-weight:500; line-height:1.4; color:#454545; text-align:center;}
|
|
.process .section02 .head h3 span {font-size:12px; font-weight:200; color:#787878; letter-spacing:0.3em;}
|
|
.process .section02 .img {text-align:center;}
|
|
|
|
/* 제품안내 */
|
|
.product-info .table table {width:100%; border-collapse:collapse; border:1px solid #ccc;}
|
|
.product-info .table table th {background:#8d8d8d; padding:18px 0; font-size:18px; font-weight:400; line-height:25px; color:#fff; border:1px solid #ccc; text-align:center;}
|
|
.product-info .table table th:first-child {background:#555;;}
|
|
.product-info .table table td {background:#fff; padding:18px 0; font-size:15px; font-weight:300; line-height:25px; border:1px solid #ccc; text-align:center;}
|
|
.product-info .table table td span {font-weight:500; color:#79a340;}
|
|
.product-info .table table td.bg1 {background:#f4f4f4;}
|
|
|
|
/* 회선종류 */
|
|
.line-info .head {margin-bottom:70px;}
|
|
.line-info .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.line-info .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.line-info .head p span {color:#4a7610;}
|
|
|
|
/* 코로케이션 */
|
|
.colocation {margin:0 -360px -60px;}
|
|
.colocation .section01 {padding:0 0 60px;}
|
|
.colocation .section01 .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.colocation .section01 .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.colocation .section01 .head p span {color:#4a7610;}
|
|
.colocation .section02 {background:#f4f4f4;}
|
|
.colocation .section02 .contain {padding:70px 0;}
|
|
.colocation .section02 .row {*zoom:1;}
|
|
.colocation .section02 .row:after {content:''; display:block; clear:both;}
|
|
.colocation .section02 .row .img {float:left;}
|
|
.colocation .section02 .row .con {margin-left:360px; padding:10px 0 0 0;}
|
|
.colocation .section02 .row .con h3 {position:relative; padding-left:20px; font-size:22px; font-weight:500; line-height:26px; color:#333; margin-bottom:30px;}
|
|
.colocation .section02 .row .con h3:after {content:''; position:absolute; left:0; top:3px; display:block; width:5px; height:20px; background:#356346;}
|
|
.colocation .section02 .row .con p {font-size:16px; font-weight:300; line-height:25px; color:#5d5d5d; margin-bottom:25px;}
|
|
.colocation .section02 .row .con p span {font-weight:500; color:#454545;}
|
|
.colocation .section02 .row .con dl {margin-top:30px;}
|
|
.colocation .section02 .row .con dl:first-child {margin-top:0;}
|
|
.colocation .section02 .row .con dl dt {font-size:18px; font-weight:400; line-height:26px; color:#356346; margin-bottom:15px;}
|
|
.colocation .section02 .row .con dl dd {font-size:16px; font-weight:300; line-height:25px; color:#5d5d5d;}
|
|
.colocation .section02 .row .con dl dd span {font-weight:500; color:#454545;}
|
|
.colocation .section02 .row .con .circle {font-size:0; line-height:0;}
|
|
.colocation .section02 .row .con .circle > span {display:inline-block; vertical-align:top; margin-left:14px;}
|
|
.colocation .section02 .row .con .circle > span:first-child {margin-left:0;}
|
|
.colocation .section02 .row .con .circle > span > span {display:table-cell; vertical-align:middle; width:102px; height:102px; font-size:15px; font-weight:300; line-height:20px; color:#fff; text-align:center; border-radius:50%; letter-spacing:0;}
|
|
.colocation .section02 .row .con .circle > span:nth-child(1) > span {background:#89b450;}
|
|
.colocation .section02 .row .con .circle > span:nth-child(2) > span {background:#356346;}
|
|
.colocation .section02 .row .con .circle > span:nth-child(3) > span {background:#588fbd;}
|
|
.colocation .section02 .row2 {margin-top:50px;}
|
|
.colocation .section03 {background:#fff url("../images/sub/bg_arr.png") 50% 0 no-repeat; padding:0 0 85px;}
|
|
.colocation .section03 .head {padding:50px 0 35px; border-bottom:1px solid #ddd; margin-bottom:70px;}
|
|
.colocation .section03 .head h3 {font-size:30px; font-weight:500; line-height:1.4; color:#454545; text-align:center;}
|
|
.colocation .section03 .head h3 span {font-size:12px; font-weight:200; color:#787878; letter-spacing:0.3em;}
|
|
.colocation .section03 .img {text-align:center;}
|
|
.colocation .section04 {position:relative; height:280px;}
|
|
.colocation .section04 .inner {position:absolute; left:50%; top:0; margin-left:-960px; width:1920px; height:280px;}
|
|
|
|
/* VPN */
|
|
.vpn .head {margin-bottom:70px;}
|
|
.vpn .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.vpn .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.vpn .head p span {color:#4a7610;}
|
|
.vpn .img {text-align:center;}
|
|
|
|
/* 전용선 */
|
|
.tie-line {margin-bottom:-60px;}
|
|
.tie-line .head {margin-bottom:50px;}
|
|
.tie-line .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.tie-line .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.tie-line .head p span {color:#4a7610;}
|
|
.tie-line .img {text-align:center;}
|
|
.tie-line .section02 {position:relative; height:260px;}
|
|
.tie-line .section02 .inner {position:absolute; left:50%; top:0; margin-left:-960px; width:1920px; height:260px;}
|
|
|
|
/* 방화벽 */
|
|
.pyromania .head {margin-bottom:70px;}
|
|
.pyromania .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.pyromania .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.pyromania .head p span {color:#4a7610;}
|
|
.pyromania .img {text-align:center;}
|
|
|
|
/* 웹방화벽 */
|
|
.web-pyromania {margin:0 -360px -60px;}
|
|
.web-pyromania .section01 {padding:0 0 55px;}
|
|
.web-pyromania .section01 .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.web-pyromania .section01 .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.web-pyromania .section01 .head p span {color:#4a7610;}
|
|
.web-pyromania .section02 {background:#f4f4f4;}
|
|
.web-pyromania .section02 .contain {position:relative;}
|
|
.web-pyromania .section02 .img {float:left; padding:40px 60px;}
|
|
.web-pyromania .section02 .pos {position:absolute; top:50%; left:410px; -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
|
|
.web-pyromania .section02 .pos p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; padding:13px 0;}
|
|
.web-pyromania .section02 .pos p span {font-weight:500; color:#454545;}
|
|
.web-pyromania .section03 .contain {height:280px; padding:95px 0 0 60px; background:url("../images/sub/web_pyromania2.png") 100% 100% no-repeat; box-sizing:border-box;}
|
|
.web-pyromania .section03 .contain .p1 {font-size:16px; font-weight:400; line-height:28px; color:#5d5d5d; letter-spacing:0;}
|
|
.web-pyromania .section03 .contain .p1 span {font-size:20px; font-weight:500; color:#4a7610;}
|
|
|
|
/* 우회망 */
|
|
.detour .head {margin-bottom:70px;}
|
|
.detour .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.detour .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.detour .head p span {color:#4a7610;}
|
|
.detour .img {text-align:center;}
|
|
|
|
/* 도메인 구매대행 */
|
|
.substitution {margin:0 -360px;}
|
|
.substitution .section01 {padding:0 0 60px;}
|
|
.substitution .section01 .head h3 {font-size:25px; font-weight:500; line-height:30px; color:#333; margin-bottom:25px; text-align:center;}
|
|
.substitution .section01 .head p {font-size:16px; font-weight:300; line-height:26px; color:#5d5d5d; text-align:center;}
|
|
.substitution .section01 .head p span {color:#4a7610;}
|
|
.substitution .section02 {background:#f4f4f4;}
|
|
.substitution .section02 .contain {padding:60px 0;}
|
|
.substitution .section02 .row {*zoom:1;}
|
|
.substitution .section02 .row:after {content:''; display:block; clear:both;}
|
|
.substitution .section02 .row .img {float:left;}
|
|
.substitution .section02 .row .con {margin-left:410px; padding:10px 0 0 0;}
|
|
.substitution .section02 .row .con h3 {position:relative; padding-left:20px; font-size:22px; font-weight:500; line-height:26px; color:#333; margin-bottom:20px;}
|
|
.substitution .section02 .row .con h3:after {content:''; position:absolute; left:0; top:3px; display:block; width:5px; height:20px; background:#356346;}
|
|
.substitution .section02 .row .con ul li {font-size:16px; font-weight:300; line-height:33px; color:#5d5d5d;}
|
|
/* */
|
|
|
|
|
|
/* */
|
|
|