142 lines
9.4 KiB
CSS
142 lines
9.4 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 {*zoom:1; width:1200px; margin:0 auto;}
|
|
.contain:after {content:" "; display:block; clear:both;}
|
|
|
|
body.bg {background:#222}
|
|
#wrapper {background:#fff;}
|
|
|
|
/* header */
|
|
#header {height:135px; background:url('../images/common/bg_top.gif') 0 0 repeat-x;}
|
|
#header .contain {position:relative; z-index:999;}
|
|
#header .logo {position:absolute; top:75px; left:0; z-index:999}
|
|
#header .top-bar {height:45px;}
|
|
#header .util {position:absolute; top:0; right:-20px}
|
|
#header .util li {float:left; position:relative; padding:0 20px; color:#303030; vertical-align:middle; font-size:14px; line-height:45px;}
|
|
#header .util li:first-child:after {display:none;}
|
|
#header .util li:after {content:"";position:absolute; top:50%; margin-top:-6px; left:0; width:1px; height:12px; background:#d2d2d2;}
|
|
#header .util li strong {font-size:15px; font-weight:500; color:#30539f; padding-right:10px;}
|
|
#header .util li img {vertical-align:middle; padding-right:10px;}
|
|
|
|
#gnb {*zoom:1; margin-right:-80px;}
|
|
#gnb:after {content:" "; display:block; clear:both;}
|
|
#gnb > ul {float:right;}
|
|
#gnb > ul > li {float:left; position:relative; text-align:center;font-size:19px; line-height:90px; padding:0 80px; font-weight:500;}
|
|
#gnb > ul > li:first-child:after {display:none;}
|
|
#gnb > ul > li:after {content:"";position:absolute; top:50%; margin-top:-5px; left:0; width:1px; height:10px; background:#d2d2d2;}
|
|
#gnb > ul > li > a {display:block; color:#454545;}
|
|
#gnb > ul > li.active > a {color:#3a5ba3;}
|
|
#gnb .submenu {display:none; position:absolute; top:90px; left:0; width:100%; z-index:102}
|
|
#gnb .submenu ul {float:none;}
|
|
#gnb .submenu ul li {float:none; font-size:16px; line-height:60px; text-align:center; padding:0;font-weight:500;}
|
|
#gnb .submenu ul li a {display:block; color:#454545; background:#f3f3f4;}
|
|
#gnb .submenu ul li a:hover,
|
|
#gnb .submenu ul li.on a {color:#fff; background:#3a5ba3}
|
|
/* #gnb ul li.m1 div.submenu {left:10px;} */
|
|
|
|
|
|
/* main */
|
|
.main-visual {position:relative; width:100%; height:500px; overflow:hidden;}
|
|
.main-visual .inner {position:absolute; top:0; left:50%; width:1920px; height:500px; margin-left:-960px; z-index:10}
|
|
.main-visual .bx-wrapper .bx-pager {position:absolute; bottom:160px; left:0; width:100%; z-index:100; text-align:center; }
|
|
.main-visual .bx-wrapper .bx-pager .bx-pager-item,
|
|
.main-visual .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display:inline-block;*zoom: 1; *display: inline; vertical-align:middle; }
|
|
.main-visual .bx-wrapper .bx-pager.bx-default-pager a {background:transparent; border:2px solid #fff; width:8px; height:8px; text-indent: -9999px; display:block; margin:0 4px; outline: 0; border-radius:50%;overflow:hidden;}
|
|
.main-visual .bx-wrapper .bx-pager.bx-default-pager a:hover,
|
|
.main-visual .bx-wrapper .bx-pager.bx-default-pager a.active {background:#fff;}
|
|
|
|
|
|
.main-bnr {*zoom:1;width:1200px; position:relative; margin:-120px auto 60px; z-index:12}
|
|
.main-bnr ul:after {content:" "; display:block; clear:both;}
|
|
.main-bnr ul li {float:left; width:33.333%; height:180px; background-repeat:no-repeat; background-position:40px 50%;}
|
|
.main-bnr ul li.bg1 {background-color:#41adde; background-image:url('../images/main/icon1.png');}
|
|
.main-bnr ul li.bg2 {background-color:#0280c9; background-image:url('../images/main/icon2.png');}
|
|
.main-bnr ul li.bg3 {background-color:#30539f; background-image:url('../images/main/icon3.png');}
|
|
.main-bnr ul li .info {padding-left:180px; display:table; height:180px; color:#fff}
|
|
.main-bnr ul li .info dl {width:100%; display:table-cell; vertical-align:middle;}
|
|
.main-bnr ul li .info dl dt {font-size:18px; line-height:1.7em; font-weight:500; margin-bottom:10px;}
|
|
.main-bnr ul li .info dl dd {font-size:15px; line-height:1.7em;}
|
|
|
|
.main-title {text-align:center; margin-bottom:40px;}
|
|
.main-title h2 {font-size:28px; line-height:1.6em; font-weight:700; color:#333;}
|
|
.main-title p {color:#656565; font-size:17px;line-height:1.6em;}
|
|
|
|
.main-price {margin:0 -10px 80px; overflow:hidden;}
|
|
.main-price:after{content:"";display:block;clear:both;}
|
|
.main-price .col {float:left; width:50%; padding:0 10px; box-sizing:border-box; margin-bottom:20px;}
|
|
.main-price .col:nth-child(2n+1) {clear:left;}
|
|
.main-table.type2 table thead th {background:#0280c9}
|
|
.main-table table {width:100%; border-collapse:collapse; border-spacing:0px;}
|
|
.main-table table thead th {padding:9px 10px; height:35px; font-size:22px; font-weight:500; line-height:22px; color:#fff; background:#30539f}
|
|
.main-table table tbody th {padding:9px 10px; height:35px; font-size:16px; font-weight:500; line-height:22px; color:#333; border-bottom:1px solid #d6d6d6; background:#eaeef4;}
|
|
.main-table table tbody td {padding:9px 20px; color:#2c2c2c; font-size:16px; line-height:22px; border-bottom:1px solid #d6d6d6; background:#f8f8f8}
|
|
.main-table table tbody th.none,.main-table table tbody td.none {border-bottom:0}
|
|
.main-table .f-back {background-color:#e62b2b; color:#fff; }
|
|
.main-table strong {font-weight:500}
|
|
|
|
.main-service {background:url('../images/main/bg_bnr.jpg') 50% 0 no-repeat; width:100%; height:330px;}
|
|
.main-service .col {float:left; width:50%; height:330px; display:table; text-align:center;}
|
|
.main-service .col .link {width:600px; height:330px; display:table-cell; vertical-align:middle; color:#fff;}
|
|
.main-service .col .link dl dt {font-size:30px; line-height:1.4em; font-weight:500; margin-bottom:5px;}
|
|
.main-service .col .link dl dd {font-size:17px; line-height:1.4em; margin-bottom:20px;}
|
|
.main-service .col .link .more {font-size:15px; line-height:1.4em; opacity:.8}
|
|
.main-service .col .link .more .arrow {margin:0 3px;position:relative;border: solid #ddd;border-width: 0 2px 2px 0;transform: rotate(-45deg);display: inline-block;padding: 3px;}
|
|
.main-service .col a {display:block;}
|
|
|
|
.main-notice {background:#f5f5f5; padding:60px 0;}
|
|
.main-notice .title {float:left; width:511px; height:276px; color:#fff; background:url('../images/main/bg_notice.gif') 0 0 no-repeat;}
|
|
.main-notice .title dl {padding:50px}
|
|
.main-notice .title dl dt {font-size:32px; line-height:1.4em; font-weight:500; margin-bottom:5px;}
|
|
.main-notice .title dl dd {font-size:16px; line-height:1.4em; color:#cbcfd9;}
|
|
.main-notice .list {float:left; width:688px; height:276px; background:#fff; border:1px solid #ddd; border-left:0; box-sizing:border-box;}
|
|
.main-notice .list ul {padding:15px 40px 0;}
|
|
.main-notice .list ul li {font-size:16px; line-height:49px; height:49px; border-bottom:1px solid #ddd; position:relative;}
|
|
.main-notice .list ul li:last-child {border-bottom:0}
|
|
.main-notice .list ul li a {display:inline-block; width:500px; height:49px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
|
|
.main-notice .list span {position:absolute; top:0; right:0; font-size:14px; color:#959595;}
|
|
|
|
/* sub page */
|
|
#sub #container {*zoom:1; width:1200px; margin:0 auto; overflow:hidden;}
|
|
#sub #container:after {content:" "; display:block; clear:both;}
|
|
|
|
.sub-visual {position:relative; height:290px; overflow:hidden;}
|
|
.sub-visual .inner {position:absolute; top:0; left:50%; width:1920px; height:290px; margin-left:-960px;}
|
|
|
|
#lnb {float:left; width:250px;}
|
|
#lnb .titlebox {width:250px; height:169px; display:table; background:#f3f5f9; border:1px solid #dce2ec; border-top:0; box-sizing:border-box;}
|
|
#lnb .title {position:relative;color:#30539f; font-size:25px; line-height:50px; font-weight:700; text-align:center; width:210px; height:100px; padding-top:13px; display:table-cell; vertical-align:middle;}
|
|
#lnb .title:after{content:""; position:absolute; top:70px; left:50%; margin-left:-10px; width:20px; height:3px; background:#333333;}
|
|
.lnb {margin-bottom:50px;}
|
|
.lnb ul li {font-size:17px; line-height:60px; border-bottom:1px solid #ececec; transition:none;}
|
|
.lnb ul li a {display:block; color:#4d4d4d; padding-left:24px;}
|
|
.lnb ul li a:hover,
|
|
.lnb ul li.on a {color:#fff; background:url('../images/common/menu_on.gif') 0 0 no-repeat;}
|
|
|
|
.lnb-bnr .col {margin-bottom:8px; line-height:0}
|
|
|
|
#contArea {float:right; width:900px; overflow:hidden;}
|
|
|
|
.sub-title {position:relative; height:109px; border-bottom:1px solid #dfdfdf; margin-bottom:60px;}
|
|
.sub-title h2 {color:#2c2c2c; font-size:27px; line-height:30px; font-weight:500; padding-top:45px;}
|
|
.sub-title .path {position:absolute; top:60px; right:0; color:#ccc; font-size:14px; line-height:18px;}
|
|
.sub-title .path .home {position:relative; display:inline-block;zoom:1;*display:inline; vertical-align:top; margin:-0.2em 0 0 0; width:8px; height:18px; font-size:0; line-height:0; text-indent:-9999px; background:url('../images/common/home.gif') 50% 50% no-repeat;}
|
|
.sub-title .path .arrow {margin:0 3px;position:relative;top:-2px;border: solid #ccc;border-width: 0 1px 1px 0;transform: rotate(-45deg);display: inline-block;padding: 3px;}
|
|
|
|
|
|
.real-cont {min-height:450px; _height:450px; padding:0 0 100px;}
|
|
|
|
|
|
/* footer */
|
|
#footer {clear:both; padding:60px 0; background:#222;}
|
|
#footer address {font-style:normal;}
|
|
#footer .contain {position:relative;}
|
|
#footer .bar {display:inline-block; background:#fff; vertical-align:middle; width:1px; height:10px; margin:0 10px;}
|
|
.foot-logo {position:absolute; top:10px; left:0;}
|
|
.foot-info {color:#fff; font-size:14px; line-height:22px; padding:0 0 0 240px; font-weight:300; opacity:.6;}
|
|
|
|
.quick-top {position:fixed; bottom:185px; right:30px; z-index:100} |