167 lines
13 KiB
CSS
167 lines
13 KiB
CSS
@charset "utf-8";
|
|
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */
|
|
|
|
#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
|
|
#skipToContent a:focus,
|
|
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}
|
|
|
|
.contain {width:1200px; position:relative; margin:0 auto;}
|
|
.contain:after {content:""; display:block; clear:both;}
|
|
.full {width:100%;}
|
|
|
|
#container {min-width:1200px; overflow:hidden;}
|
|
|
|
/* header */
|
|
#header {position:relative; width:100%; line-height:0; z-index:100;}
|
|
#header .contain {height:100px;}
|
|
#header .sitelogo {position:absolute; top:33px; left:0; z-index:10;}
|
|
|
|
#gnb {position:relative; z-index:2; text-align:right;}
|
|
#gnb > ul {display:inline-block;}
|
|
#gnb > ul:after {content:""; display:block; clear:both;}
|
|
#gnb > ul > li {float:left; position:relative; padding:0 35px;}
|
|
#gnb > ul > li:last-child {padding-right:0;}
|
|
#gnb > ul > li > a {display:block; color:#333; font-size:20px;line-height:100px;font-weight:500;letter-spacing:-.03em; -ms-word-break:break-all;word-break:break-all; white-space:nowrap; text-decoration:none; position:relative; transition: all 0.25s ease-in-out;}
|
|
#gnb > ul > li > a:hover, #gnb > ul > li.active > a {color:#0d81d1;}
|
|
#gnb .submenu {position:absolute; left:0; width:100%; height:0; overflow:hidden; z-index:1;}
|
|
#gnb .submenu > ul {padding:18px 0; text-align:center;}
|
|
#gnb .submenu > ul > li > a {display:block; padding:8px 0; color:#454545; line-height:24px;font-weight:400;letter-spacing:-.01em; text-decoration:none; transition: all 0.25s ease-in-out;}
|
|
#gnb .submenu > ul > li ul {margin-bottom:8px;}
|
|
#gnb .submenu > ul > li ul li a {display:block; font-size:14px;line-height:22px;font-weight:400;letter-spacing:-.01em; text-decoration:none; transition: all 0.25s ease-in-out;}
|
|
#gnb .submenu > ul > li a:hover {color:#0d81d1;}
|
|
.submenu-bg {position:absolute; display:none; width:100%; top:100px; left:0; height:0; background:#fff; opacity:.8;}
|
|
|
|
|
|
/* main */
|
|
.main-visual {position:relative; width:100%; height:700px; min-width:1200px; overflow:hidden;}
|
|
.main-visual .inner {position:absolute; top:0; left:50%; margin-left:-960px; width:1920px; height:100%;}
|
|
.main-visual .mainSlide {position:relative;z-index:5;}
|
|
.main-visual .visual-tt {position:absolute;z-index:10; top:50%;left:50%; width:100%;max-width:1200px; color:#fff; text-align:center; -ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
|
|
.main-visual .visual-tt h3 {font-size:55px;line-height:1.2em;letter-spacing:-.03em;}
|
|
.main-visual .visual-tt p {font-size:30px;line-height:1.6em;letter-spacing:-.03em; margin-top:10px;}
|
|
.main-visual .slick-arrow {position:absolute; width:33px; height:63px; margin-top:-31px; top:50%; border:0; outline:none; z-index:50; overflow:hidden; text-indent:-999em; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat;}
|
|
.main-visual .slick-prev {background-image:url("../images/main/slide_prev.png"); left: 50px;}
|
|
.main-visual .slick-next {background-image:url("../images/main/slide_next.png"); right:50px;}
|
|
.main-visual .slick-dots {position:absolute; bottom:80px; left:50%; -webkit-transform:translate(-50%, 0); transform:translate(-50%, 0); z-index:11;}
|
|
.main-visual .slick-dots li {display:inline-block; position:relative; margin:0 5px; border:0; background:transparent; line-height:0;}
|
|
.main-visual .slick-dots li button {position:relative; z-index:1; width:13px; height:13px; border-radius:13px; font-size:0; border:3px solid #fff; background:transparent; text-indent:-9999px; outline:0;}
|
|
.main-visual .slick-dots li.slick-active button {background:#fff; width:32px;}
|
|
|
|
.main-tit {margin-bottom:40px; text-align:center; font-size:35px;line-height:1.4em;font-weight:500; color:#454545;}
|
|
|
|
.main-s-host {padding:100px 0; text-align:center; overflow:hidden;}
|
|
.main-s-host .prod-tbl {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #0d81d1; text-align:center;}
|
|
.main-s-host .prod-tbl thead th {padding:17px 0; font-size:20px; font-weight:500; line-height:24px; color:#454545; border:1px solid #ddd; background:#f5f8fa;}
|
|
.main-s-host .prod-tbl tbody th {padding:17px 0; font-size:18px; font-weight:400; line-height:24px; color:#454545; border:1px solid #ddd;}
|
|
.main-s-host .prod-tbl tbody td {padding:17px 0; font-size:16px; font-weight:300; line-height:24px; color:#454545; border:1px solid #ddd;}
|
|
.main-s-host .prod-tbl th:first-child, .prod-tbl td:first-child {border-left:0;}
|
|
.main-s-host .prod-tbl th:last-child, .prod-tbl td:last-child {border-right:0;}
|
|
|
|
.main-w-host {overflow:hidden;}
|
|
.main-w-host .row {margin:0 -15px;}
|
|
.main-w-host .col {float:left; width:33.333333%; padding:0 15px;}
|
|
.main-w-host .col .txt {padding:28px; border:1px solid #ddd; border-top:0;}
|
|
.main-w-host .col h3 {font-size:20px;line-height:1.3em;font-weight:500; color:#454545; margin-bottom:6px;}
|
|
.main-w-host .col li {line-height:1.6em;}
|
|
|
|
.main-board {padding:100px 0;}
|
|
.main-board .row {margin:0 -7.5px;}
|
|
.main-board .row:after {content:""; display:block; clear:both;}
|
|
.main-board .col {position:relative; float:left; width:25%; padding:0 7.5px;}
|
|
.main-board .col:first-child {width:50%;}
|
|
.main-board .col h3 {font-size:22px; line-height:1.2em; font-weight:500;}
|
|
.main-board .noti {position:relative; height:295px; padding:25px 30px; border:1px solid #ddd;}
|
|
.main-board .noti h3 {position:relative; color:#454545; padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid #ddd;}
|
|
.main-board .noti h3:after {content:"";position:absolute;bottom:-1px;left:0; width:78px;height:3px; background:#0d81d1;}
|
|
.main-board .noti ul li a {position:relative; display:block; width:100%;}
|
|
.main-board .noti ul li a:before {content:""; display:inline-block; vertical-align:middle; margin:.1em 3px 0 0; width:5px; height:5px; border-radius:100%; background:#a7b7d5;}
|
|
.main-board .noti ul li a .title {display:inline-block; line-height:38px; font-weight:300; max-width:76%; vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
|
|
.main-board .noti ul li a .date {display:inline-block; line-height:38px; font-weight:200; color:#777; position:absolute; top:50%; right:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%);}
|
|
.main-board .noti ul li a img {vertical-align:middle;}
|
|
.main-board .noti ul li:hover .title {color:#000;}
|
|
.main-board .noti ul li:hover .date {color:#000;}
|
|
.main-board .noti .more-btn {position:absolute; display:block; z-index:2;top:25px;right:30px; font-size:0;line-height:0;}
|
|
.main-board .info-cs {height:295px; padding:25px 30px; background:#6caedb url('../images/main/ico_cs.png') calc(100% - 26px) calc(100% - 26px) no-repeat; color:#fff;}
|
|
.main-board .info-cs h3 {margin-bottom:28px;}
|
|
.main-board .info-cs p {font-size:18px; line-height:1.3em; margin-bottom:5px;}
|
|
.main-board .info-cs .num {font-size:35px;line-height:1.3em;font-weight:500;}
|
|
.main-board .info-cs .skype {margin-top:25px;}
|
|
.main-board .info-cs .skype img {vertical-align:middle; margin-right:5px;}
|
|
.main-board .info-cs .telegram {margin-top:10px;}
|
|
.main-board .info-cs .telegram img {vertical-align:middle; margin-right:5px;}
|
|
.main-board .info-ns {height:295px; padding:25px 30px; background:#0d81d1 url('../images/main/ico_sv.png') calc(100% - 26px) calc(100% - 26px) no-repeat; color:#fff;}
|
|
.main-board .info-ns h3 {margin-bottom:28px;}
|
|
.main-board .info-ns p {font-size:18px; line-height:1.5em; margin-bottom:5px;}
|
|
.main-board .info-ns .tt {float:left;clear:left; display:inline-block;text-align:center; width:50px; line-height:25px;font-weight:500;color:#454545; background:#efefef; border-radius:3px;}
|
|
.main-board .info-ns .txt {margin-left:60px; line-height:25px; color:#fff; margin-bottom:15px;}
|
|
|
|
.main-secu {padding:100px 0; text-align:center; background:#666 url('../images/main/bg_security.jpg') 50% 0 no-repeat;}
|
|
.main-secu .main-tit {color:#fff;}
|
|
.main-secu .row {max-width:850px; margin:0 auto;}
|
|
.main-secu .row:after {content:"";display:block;clear:both;}
|
|
.main-secu .col {float:left;width:33.333333%; color:#fff;}
|
|
.main-secu .col h3 {font-size:24px;line-height:1.3em; font-weight:500; margin-top:20px;}
|
|
.main-secu .col p {font-size:15px;line-height:1.6em; margin-top:8px;}
|
|
.main-secu .col .ico {display:block; width:150px;height:150px; margin:0 auto; background-position: 50% 0; background-repeat:no-repeat;}
|
|
.main-secu .col .ico1 {background-image: url('../images/main/ico_secu1.png');}
|
|
.main-secu .col .ico2 {background-image: url('../images/main/ico_secu2.png');}
|
|
.main-secu .col .ico3 {background-image: url('../images/main/ico_secu3.png');}
|
|
.main-secu .col a:hover .ico1 {background-image: url('../images/main/ico_secu1_on.png');}
|
|
.main-secu .col a:hover .ico2 {background-image: url('../images/main/ico_secu2_on.png');}
|
|
.main-secu .col a:hover .ico3 {background-image: url('../images/main/ico_secu3_on.png');}
|
|
|
|
.main-ptn {margin:100px 0; padding-top:40px; line-height:0; text-align:center; min-width:1200px; border-top:1px solid #ddd;}
|
|
.main-ptn ul {padding:0 44px;}
|
|
.main-ptn ul .slick-slide {padding:0 6px; outline:0;}
|
|
.main-ptn ul .slick-slide a {outline:0;}
|
|
.main-ptn ul .img {position:relative;}
|
|
.main-ptn ul .img:after {content:" ";position:absolute;top:0;left:0;width:100%;height:100%; border-radius:5px; border:1px solid rgba(0,0,0,.1);z-index:1;}
|
|
.main-ptn .slick-arrow {width:18px;height:31px;margin-top:-15px;display:block;background-color:transparent;background-position: 0 0;background-size:100%;border:0;position:absolute;top:50%;text-indent:-999em;overflow:hidden;z-index:1;}
|
|
.main-ptn .slick-prev {background-image:url('../images/main/ptn_prev.png'); left:0;}
|
|
.main-ptn .slick-next {background-image:url('../images/main/ptn_next.png'); right:0;}
|
|
|
|
|
|
/* sub */
|
|
#sub #contArea {width:1200px; margin:0 auto; padding-bottom:90px;}
|
|
#sub #contArea:after {content:""; display:block; clear:both;}
|
|
#sub #contArea.full {width:100%;}
|
|
|
|
.sub-visual {display:table; width:100%; height:300px; color:#fff; background-color:#eee; background-position:50% 50%; background-repeat:no-repeat; background-size:cover;}
|
|
.sub-visual .tit {display:table-cell;vertical-align:middle; text-align:center; width:100%; height:100%;}
|
|
.sub-visual h2 {font-size:30px;line-height:1.3em;font-weight:500; letter-spacing:-.03em;}
|
|
.sub-visual.bg1 {background-image:url("../images/common/sub_visual1.jpg");}
|
|
.sub-visual.bg2 {background-image:url("../images/common/sub_visual2.jpg");}
|
|
.sub-visual.bg3 {background-image:url("../images/common/sub_visual3.jpg");}
|
|
.sub-visual.bg4 {background-image:url("../images/common/sub_visual4.jpg");}
|
|
.sub-visual.bg5 {background-image:url("../images/common/sub_visual5.jpg");}
|
|
.sub-visual.bg6 {background-image:url("../images/common/sub_visual6.jpg");}
|
|
.sub-visual.bg-priv {background-image:url("../images/common/sub_visual_priv.jpg");}
|
|
|
|
.path-wrap {position:relative; width:100%; height:50px; z-index:2; background:#fff; border-bottom:1px solid #ddd;}
|
|
.path-wrap:after {content:""; display:block; clear:both;}
|
|
.path-wrap .home {float:left; position:relative; line-height:0; z-index:50;}
|
|
.path-wrap .home a {display:block; width:60px; line-height:50px; text-align:center; border-left:1px solid #ddd;border-right:1px solid #ddd;}
|
|
.path-wrap .home a img {vertical-align:middle; margin-top:-.1em;}
|
|
.path-wrap .path {float:left; position:relative; min-width:250px; z-index:50; border-right:1px solid #ddd;}
|
|
.path-wrap .path > a {display:block; position:relative; height:50px; padding:0 50px 0 20px; text-align:left; color:#686868; font-size:15px; line-height:50px; font-weight:400; background:url("../images/common/path_arrow.png") calc(100% - 20px) 50% no-repeat;}
|
|
.path-wrap .path.last {float:left; position:relative; z-index:50;}
|
|
.path-wrap .path ul {display:none; position:absolute; top:50px; left:-1px; width:calc(100% + 2px); background:#fff; z-index:50;}
|
|
.path-wrap .path ul li {border:1px solid #dfdfdf; border-top:0; transition:.2s ease-out;}
|
|
.path-wrap .path ul li a {display:block; padding:13px 50px 13px 20px; color:#808080; text-align:left; font-size:15px; line-height:20px; font-weight:300; transition:.2s ease-out;}
|
|
.path-wrap .path ul li:hover a {background:#107ada; color:#fff;}
|
|
|
|
.sub-title {margin:55px 0 50px; border-bottom:1px solid #ddd; text-align:center;}
|
|
.sub-title h2 {color:#454545; font-size:30px; line-height:1em; font-weight:500; letter-spacing:-.06em; padding-bottom:20px;}
|
|
|
|
.real-cont {min-height:350px;}
|
|
|
|
|
|
/* footer */
|
|
#footer {position:relative; text-align:center; padding:24px 0 40px; font-size:14px; line-height:24px; font-weight:200; letter-spacing:-.01em; color:#cfcdcd; background:#4c4c4c;}
|
|
#footer address {font-style:normal;}
|
|
#footer address span {display:inline-block; margin-right:10px;}
|
|
|
|
.foot-link {text-align:center; margin-bottom:10px;}
|
|
.foot-link ul {display:inline-block;}
|
|
.foot-link li {float:left; padding:0 10px;}
|
|
.foot-link li a {display:block; width:140px; font-size:14px;line-height:40px; color:#ebebeb; background:#373737; border-radius:5px;} |