158 lines
13 KiB
CSS
158 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 {*zoom:1; width:1200px; margin:0 auto;}
|
|
.contain:after {content:" "; display:block; clear:both;}
|
|
|
|
/* header */
|
|
#header {position:relative; z-index:10000; background:#fff;}
|
|
#header .contain {position:relative; z-index:5;}
|
|
.util {position:absolute; right:0; top:50%; margin-top:-13px;}
|
|
.util ul {*zoom:1;}
|
|
.util ul:after {content:''; display:block; clear:both;}
|
|
.util ul li {float:left; position:relative;}
|
|
.util ul li:after {content:" "; position:absolute; top:8px; left:0; width:1px; height:11px; background:#c9c9c9;}
|
|
.util ul li:first-child::after {display:none;}
|
|
.util ul li a {display:block; padding:0 8px; color:#666; font-size:12px; font-weight:200; line-height:26px; letter-spacing:0; text-decoration:none;}
|
|
.sitelogo {position:absolute; top:50%; left:0; z-index:10; margin-top:-13.5px;}
|
|
#gnb {margin-left:230px;}
|
|
#gnb:after {content:" "; display:block; clear:both;}
|
|
#gnb > ul {*zoom:1; float:left;}
|
|
#gnb > ul:after {content:" "; display:block; clear:both;}
|
|
#gnb > ul > li {position:relative; float:left; margin-left:110px;}
|
|
#gnb > ul > li:first-child {margin-left:0;}
|
|
#gnb > ul > li > a:after {content:" "; position:absolute; bottom:0; left:50%; width:0; height:3px; background:transparent; transition:all 0.2s ease-in-out;}
|
|
#gnb > ul > li > a {position:relative; display:block; color:#3d3d3d; font-size:18px; font-weight:500; line-height:100px; text-decoration:none;}
|
|
#gnb > ul > li.hover > a,
|
|
#gnb > ul > li.active > a {color:#79a340;}
|
|
#gnb > ul > li.active > a:after,
|
|
#gnb > ul > li.hover > a:after {left:0; width:100%; background:#79a340;}
|
|
#gnb .submenu {display:none; position:absolute; top:100px; left:50%; width:130px; margin-left:-65px;}
|
|
#gnb .submenu ul {padding:14px 0;}
|
|
#gnb .submenu ul li a {display:block; padding:3px 8px; color:#555; font-size:14px; font-weight:300; line-height:23px; letter-spacing:-.02em; text-decoration:none; text-align:center;}
|
|
#gnb .submenu ul li.active a,
|
|
#gnb .submenu ul li a:hover {color:#79a340;}
|
|
.submenu_bg {display:none; position:absolute; top:100px; left:0; width:100%; height:0; background:rgba(255, 255, 255, .9); border-bottom:1px solid #ddd;}
|
|
|
|
/* main */
|
|
.visual-section {position:relative; min-width:1200px; height:380px; overflow:hidden;}
|
|
.visual-section .inner {position:absolute; left:50%; top:0; width:1920px; height:380px; margin-left:-960px;}
|
|
.visual-section .bx-wrapper .bx-controls-direction a {width:52px; height:97px; margin-top:-48.5px;}
|
|
.visual-section .bx-wrapper .bx-prev {background:url("../images/main/main_prev.png") 0 0 no-repeat; left:275px;}
|
|
.visual-section .bx-wrapper .bx-next {background:url("../images/main/main_next.png") 0 0 no-repeat; right:275px;}
|
|
.visual-section .bx-wrapper .bx-pager {width:100%; top:inherit; bottom:33px; text-align:center;}
|
|
.visual-section .bx-wrapper .bx-pager.bx-default-pager a {width:13px; height:13px; background:transparent; border:2px solid #fff; border-radius:50%; box-sizing:border-box; margin:0 3px;}
|
|
.visual-section .bx-wrapper .bx-pager.bx-default-pager a.active {width:13px; background:#fff;}
|
|
|
|
.info-section {margin-bottom:50px;}
|
|
.info-section .contain {padding:30px 0 0;}
|
|
.info-section .head {margin-bottom:35px;}
|
|
.info-section .head h2 {position:relative; padding-top:20px; font-size:26px; font-weight:500; line-height:1; color:#303030; text-align:center;}
|
|
.info-section .head h2:after {content:''; position:absolute; left:50%; top:0; margin-left:-20px; display:block; width:40px; height:3px; background:#356145;}
|
|
.info-section .table {margin-bottom:85px;}
|
|
.info-section .table table {width:100%; border-collapse:collapse; border:1px solid #ccc;}
|
|
.info-section .table table th {background:#343434; padding:18px 0; font-size:18px; font-weight:500; line-height:25px; color:#fff; border:1px solid #4f4f4f; text-align:center;}
|
|
.info-section .table table td {background:#fff; padding:18px 0; font-size:15px; font-weight:300; line-height:25px; border:1px solid #ccc; text-align:center;}
|
|
.info-section .table table td span {font-weight:500; color:#79a340;}
|
|
.info-section .table table td.bg1 {background:#f4f4f4;}
|
|
.info-section .link {*zoom:1;}
|
|
.info-section .link:after {content:''; display:block; clear:both;}
|
|
.info-section .link > div {position:relative; float:left; width:50%; box-sizing:border-box;}
|
|
.info-section .link > div a {display:block; height:270px; padding:60px 0 0 80px; text-decoration:none;}
|
|
.info-section .link > div h3 {font-size:25px; font-weight:500; line-height:1; margin-bottom:20px;}
|
|
.info-section .link > div p {font-size:15px; font-weight:300; line-height:22px; margin-bottom:35px;}
|
|
.info-section .link > div .btn {width:90px; height:30px; padding:0 9px; font-size:12px; font-weight:400; line-height:28px; box-sizing:border-box; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
|
|
.info-section .link > div .btn span {font-family:"Nanum Gothic"; float:right;}
|
|
.info-section .link .left {background:url("../images/main/mCon_img1.png") 0 0 no-repeat; color:#fff;}
|
|
.info-section .link .left .btn {border:1px solid #fff; color:#fff;}
|
|
.info-section .link .left a:hover .btn {background:#fff; border-color:#202020; color:#202020;}
|
|
.info-section .link .right {background:url("../images/main/mCon_img2.png") 0 0 no-repeat; }
|
|
.info-section .link .right h3 {color:#202020;}
|
|
.info-section .link .right .btn {border:1px solid #202020; color:#202020;}
|
|
.info-section .link .right a:hover .btn {background:#fff; border-color:#202020; color:#202020;}
|
|
|
|
.service-section {margin-bottom:80px;}
|
|
.service-section .head {margin-bottom:40px;}
|
|
.service-section .head h2 {position:relative; padding-top:20px; font-size:26px; font-weight:500; line-height:1; color:#303030; text-align:center;}
|
|
.service-section .head h2:after {content:''; position:absolute; left:50%; top:0; margin-left:-20px; display:block; width:40px; height:3px; background:#356145;}
|
|
.service-section .con ul {*zoom:1; margin:0 -14px;}
|
|
.service-section .con ul:after {content:''; display:block; clear:both;}
|
|
.service-section .con ul li {float:left; width:25%; padding:0 14px; box-sizing:border-box;}
|
|
.service-section .con ul li a {display:block; height:305px; padding:25px 0 0 0; border:1px solid #e0e0e0; box-sizing:border-box; text-align:center; text-decoration:none;}
|
|
.service-section .con ul li a .icon {display:inline-block; vertical-align:top; height:86px; margin-bottom:35px;}
|
|
.service-section .con ul li a .icon img {position:relative; top:50%; -webkit-transform:translate(0, -50%); transform:translate(0, -50%);}
|
|
.service-section .con ul li a h3 {font-size:19px; font-weight:500; line-height:1; color:#303030; margin-bottom:15px;}
|
|
.service-section .con ul li a p {font-size:14px; font-weight:300; line-height:22px; color:#5d5d5d; margin-bottom:25px;}
|
|
.service-section .con ul li a .btn {width:115px; height:30px; border:1px solid #dfdfdf; margin:0 auto; font-size:13px; font-weight:300; line-height:28px; color:#898989; text-align:center; box-sizing:border-box; border-radius:30px; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
|
|
.service-section .con ul li a .btn span {margin-left:3px;}
|
|
.service-section .con ul li a:hover .btn {background:#79a340; border-color:#79a340; color:#fff;}
|
|
|
|
.comm-section {margin-bottom:40px;}
|
|
.comm-section .con {float:left; position:relative; width:400px; height:200px; padding:13px 20px 0; border-left:1px solid #ddd; box-sizing:border-box;}
|
|
.comm-section .con h2 {font-size:18px; font-weight:500; line-height:1; color:#202020; margin-bottom:15px;}
|
|
.comm-section .con .more {position:absolute; right:20px; top:17px; font-size:13px; font-weight:400; line-height:15px; color:#717171;}
|
|
.comm-section .con .more span {font-family:"Nanum Gothic"; font-size:10px; font-weight:bold; margin-left:8px; float:right;}
|
|
.comm-section .con1 ul li {position:relative; padding:0 75px 0 13px; font-size:14px; font-weight:300; line-height:30px; color:#575757;}
|
|
.comm-section .con1 ul li:after {content:''; position:absolute; left:0; top:13px; display:block; width:5px; height:5px; background:#c1c0c0; border-radius:50%;}
|
|
.comm-section .con1 ul li a {display:inline-block; vertical-align:top; max-width:calc(100% - 25px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
|
|
.comm-section .con1 ul li img {vertical-align:middle; margin-left:3px;}
|
|
.comm-section .con1 ul li span {position:absolute; right:0; top:0;}
|
|
.comm-section .con2 {}
|
|
.comm-section .con2 ul li {position:relative; padding:0 75px 0 13px; font-size:14px; font-weight:300; line-height:30px; color:#575757;}
|
|
.comm-section .con2 ul li:after {content:''; position:absolute; left:0; top:13px; display:block; width:5px; height:5px; background:#c1c0c0; border-radius:50%;}
|
|
.comm-section .con2 ul li a {display:inline-block; vertical-align:top; max-width:calc(100% - 25px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
|
|
.comm-section .con2 ul li img {vertical-align:middle; margin-left:3px;}
|
|
.comm-section .con2 ul li span {position:absolute; right:0; top:0;}
|
|
.comm-section .con3 {border-right:1px solid #ddd;}
|
|
.comm-section .con3 p {background:url("../images/main/mCon_icon5.png") 0 50% no-repeat; margin-top:45px; padding:10px 0 10px 120px; font-size:16px; font-weight:300; line-height:35px; color:#4d4d4d;}
|
|
.comm-section .con3 p span {font-weight:500; color:#333333;}
|
|
|
|
.costomer-section {position:relative; min-width:1200px; height:260px; overflow:hidden;}
|
|
.costomer-section .inner {position:absolute; left:50%; top:0; margin-left:-960px; width:1920px; height:260px;}
|
|
|
|
.banner-section .contain {padding:44px 0;}
|
|
.banner-section .bx-wrapper .bx-controls-direction a {width:20px; height:44px; margin-top:-22px;}
|
|
.banner-section .bx-wrapper .bx-prev {background:url("../images/main/mCon_prev.png") 0 0 no-repeat; left:-40px;}
|
|
.banner-section .bx-wrapper .bx-next {background:url("../images/main/mCon_next.png") 0 0 no-repeat; right:-40px;}
|
|
|
|
/* sub */
|
|
.path-wrap {position:relative; background:#efefef; border-bottom:1px solid #ddd; z-index:50;}
|
|
.path-wrap .inner {*zoom:1; margin:0 5%;}
|
|
.path-wrap .inner:after {content:" "; display:block; clear:both;}
|
|
.path-wrap .home {float:left; background:#356346;}
|
|
.path-wrap .home a {display:block; width:49px; height:49px; font-size:0; line-height:0; text-indent:-999em; background:url("../images/common/home.png") 50% 50% no-repeat; overflow:hidden;}
|
|
.path-wrap .path {float:left; position:relative; min-width:230px; border-right:1px solid #ddd; z-index:50;}
|
|
.path-wrap .path > a {display:block; position:relative; height:49px; padding:0 30px 0 20px; color:#555; font-size:16px; line-height:49px; background:url("../images/common/path_down.png") 91% 50% no-repeat; text-decoration:none; transition:none;}
|
|
.path-wrap .path ul {display:none; position:absolute; top:49px; left:-1px; right:-1px; background:#444; z-index:50;}
|
|
.path-wrap .path ul li {border-top:1px solid #555;}
|
|
.path-wrap .path ul li:first-child {border-top:0;}
|
|
.path-wrap .path ul li a {display:block; padding:15px 10px 15px 20px; color:#bababa; font-size:15px; line-height:19px; text-decoration:none;}
|
|
.path-wrap .path ul li a:hover {color:#fff; background:#333;}
|
|
|
|
.sub #container {overflow:hidden;}
|
|
#contArea {width:1200px; margin:0 auto;}
|
|
.sub-visual {position:relative; min-width:1200px; height:300px; overflow:hidden;}
|
|
.sub-visual img {position:absolute; left:50%; top:0; max-width:1920px; height:300px; margin-left:-960px;}
|
|
.sub-title {position:relative; margin-bottom:55px; padding-top:50px; border-bottom:1px solid #cbcbcb;}
|
|
.sub-title h2 {color:#444; font-size:30px; font-weight:500; line-height:1; letter-spacing:-.01em; padding-bottom:50px; text-align:center;}
|
|
.real-cont {min-height:350px; _height:350px; padding:0 0 60px 0;}
|
|
|
|
|
|
/* footer */
|
|
#footer {}
|
|
#footer .foot-link {background:#343434;}
|
|
#footer .foot-link ul {*zoom:1; margin-left:1px; margin-right:-4px;}
|
|
#footer .foot-link ul:after {content:''; display:block; clear:both;}
|
|
#footer .foot-link ul li {float:left; width:20%; box-sizing:border-box; margin-left:-1px; border-right:1px solid #898989; border-left:1px solid #898989; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out;}
|
|
#footer .foot-link ul li:first-child {}
|
|
#footer .foot-link ul li a {display:block; font-size:16px; font-weight:400; line-height:48px; color:#ddd; text-align:center; text-decoration:none;}
|
|
#footer .foot-link ul li:hover {position:relative; z-index:5; border-color:#fff;}
|
|
#footer .foot-link ul li:hover a {background:#fff; color:#343434;}
|
|
#footer .foot-info {background:#f0f0f0;}
|
|
#footer .foot-info .contain {padding:40px 0; font-size:14px; font-weight:400; line-height:25px; color:#787878;}
|
|
#footer address {font-style:normal;}
|
|
#footer .bar {margin:0 11px;} |