@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;}

.sub-contain{*zoom:1; width:1200px; margin:0 auto;}
.sub-contain:after {content:" "; display:block; clear:both;}

/* header */
#header {position:absolute; top:0; left:0; width:100%; background:transparent; z-index:101; background-color:#fff;}
#header .contain {position:relative; height:90px; z-index:2;}
#header .contain:after{content:" "; display:block; clear:both;}
#header .sitelogo {position:absolute; top:50%; left:0; transform:translateY(-50%); z-index:5;}
#header .sitelogo a {display:inline-block;}

#header .search {display:flex; position:absolute; margin-top:28px; right:0; align-items:center;}
#header .search .tit {color:#183883; font-weight:700; line-height:22px; padding:0 15px; font-size:18px; letter-spacing:-0.04em; }
#header .search select {border-radius:5px; font-weight:300;}
#header .search .search-input {height:35px; margin:0 5px; border-radius:5px; }
#header .search .search-btn {font-size:14px; color:#fff; background-color:#183883; border:1px solid #183883; border-radius:5px; float:left; width:80px; height:35px; line-height:22px;letter-spacing:-0.03em;}

#gnb {position:relative; height:55px; width:100%; text-align:center; z-index:2; background-color:#183883;}
#gnb > ul {width:1200px; margin:0 auto;}
#gnb > ul:after {content:" "; display:block; clear:both;}
#gnb > ul > li {float:left; height:55px; z-index:1; position:relative; width:25%;letter-spacing:-0.04em;}
#gnb > ul > li:after {content:" "; position:absolute; width:1px; height:20px; top:17px; right:0; background-color:rgba(255,255,255,0.3);}
#gnb > ul > li:last-child:after {display:none;}
#gnb > ul > li > a {display:block; height:55px; position:relative; text-align:center; font-size:20px; line-height:53px; color:#fff; font-weight:500; z-index:1; letter-spacing: -0.04em;}
#gnb > ul > li.active > a,
#gnb > ul > li:hover > a {color:#ee9b11;}

#gnb .submenu {display:none; position:absolute;}
#gnb .submenu ul {display:flex;}
#gnb .submenu ul li {padding-right:40px;}
#gnb .submenu ul li:last-child {padding-right:0;}
#gnb .submenu ul li a {display:block; text-decoration:none; font-size:18px; line-height:65px; font-weight:300; letter-spacing:-0.04em; white-space:nowrap;} 
#gnb .submenu ul li.active a,
#gnb .submenu ul li:hover a {color:#ee9b11; text-decoration:underline;}
#gnb .m1 .submenu {left:10px;}
#gnb .m3 .submenu {left:20px;}
#gnb .m4 .submenu {left:45px;}

.submenu-bg {display:none; position:absolute; top:145px; left:0; width:100%; height:65px; background:#f9fafb;}

/* main */
#fp-nav {display:none;}
.main-visual {position:relative; width:100%; overflow:hidden; padding-top:145px;}
.main-visual .item {display:block; position:relative; height:720px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:cover; background-size:cover; overflow:hidden;}
.main-visual .item.ty2 {height:290px;}

.main-visual .slick-track {z-index:1;}
.main-visual .slick-dots {position:absolute; bottom:50px; left:0; width:100%; text-align:center; z-index:990;}
.main-visual .slick-dots li {position:relative; display:inline-block; padding:0 10px; border:0; background:transparent;}
.main-visual .slick-dots li button {position:relative; width:16px; height:16px; border-radius:50%; font-size:0; border:0; background:transparent; text-indent:-9999px;}
.main-visual .slick-dots li button:after {content:" "; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:16px; height:16px; border:2px solid #fff; border-radius:50%;}
.main-visual .slick-dots li.slick-active button:after {background:#fff;}

.main-visual .slick-arrow {position:absolute; top:50%; width:72px; height:72px; z-index:98; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%;}
.main-visual .slick-prev {left:187px; background-image:url("../images/main/bt_prev.png");}
.main-visual .slick-next {right:177px; background-image:url("../images/main/bt_next.png");}
.main-visual .slick-prev:hover {left:187px; background-image:url("../images/main/bt_prev2.png");}
.main-visual .slick-next:hover {right:177px; background-image:url("../images/main/bt_next2.png");}

.main-product {background:url('../images/main/visual2.jpg')100% 100% no-repeat; padding:48px 25px 130px; text-align:center;}
.main-product h2 {font-size:40px; font-weight:700; margin-bottom:30px; line-height:1.3em; letter-spacing:-0.03em;}
.main-product .items {display:flex; padding:0 -25px;}
.main-product .items li {position:relative; display:block; width:16.6666%; margin:0 25px; background-color:#fff;  border-radius:10px; z-index:1;}
.main-product .items li .item {position:relative; width:100%; display:block; padding:40px 40px 0; height:298px;}
.main-product .items li .item:after {content:""; position:absolute; top:0; left:0; border:1px solid #dfdfdf; border-radius:10px; width:100%; height:100%;}
.main-product .items li .item:hover:after {border:3px solid #325094;}
.main-product .items li p {font-size:18px; font-weight:500; padding-top:5px;}
.main-product .items li .img {position:relative; padding-bottom:100%; margin-bottom:10px; overflow:hidden;}
.main-product .items li .img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:contain;}
.main-product .slick-arrow {position:absolute; bottom:-94px; width:58px; height:58px; z-index:98; border:0; font-size:0; line-height:0; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%;}
.main-product .slick-prev {left:50%; margin-left:-69px; background-image:url("../images/main/pro_bt_prev.png");}
.main-product .slick-next {right:50%; margin-right:-68px; background-image:url("../images/main/pro_bt_next.png");}
.main-product .slick-prev:hover {background-image:url("../images/main/pro_bt_prev2.png");}
.main-product .slick-next:hover {background-image:url("../images/main/pro_bt_next2.png");}

.main-product.ty2 {padding:20px 0 40px; background-image:url('../images/main/mpBg.png'); background-size:cover; background-repeat:no-repeat;}
.mp-list {display:flex; flex-wrap:wrap; margin:0 -10px;}
.mp-list li {width:20%; padding:0 10px;}
.mp-list li:nth-child(-n+5) {margin-bottom:20px;}
.mp-list li .item {position:relative; width:100%; display:flex; flex-direction: column; justify-content: center; height:160px; background-color: #fff;}
.mp-list li .item:after {content:""; position:absolute; top:0; left:0; border:1px solid #dfdfdf; border-radius:10px; width:100%; height:100%;}
.mp-list li:hover .item:after {border:3px solid #325094;}
.mp-list li:hover .item p {color:#325094;}
.mp-list li .item .img-box {width:109px; margin:0 auto;}
.mp-list li .item .img {position:relative; padding-bottom:59.64%; overflow:hidden;}
.mp-list li .item .img img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.mp-list li .item p {font-size:20px; line-height:1.5em; font-weight:500; padding-top:8px;}



/* sub page */
.sub-visual {position:relative; display:table; table-layout:fixed; width:100%; margin-top:145px; height:170px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; z-index:1; background-size:cover;}
.sub-visual .cell {display:table-cell; vertical-align:middle; width:100%; height:100%;}
.sub-visual .in {text-align:center;}
.sub-visual h3 {position:relative; font-size:48px; line-height:1.3em; color:#fff; letter-spacing:-0.03em;}
.sub-visual p {font-size:18px; line-height:1.778em; letter-spacing:0.1em; color:#fff;}
.sub-visual.bg1 {background-image:url("../images/common/sv1.jpg");}
.sub-visual.bg2 {background-image:url("../images/common/sv2.jpg");}
.sub-visual.bg3 {background-image:url("../images/common/sv3.jpg");}
.sub-visual.bg4 {background-image:url("../images/common/sv4.jpg");}

.sub-contain {display:flex; padding-top:60px;}
.sub-contain #contArea {padding-left:85px;}
#lnb {position:relative; flex:1 1 205px; max-width:205px;} 
.lnb {position:relative; width:204px; background:#f4f4f4; overflow:hidden;}
.lnb h3 {font-size:30px; width:204px; height:101px; color:#fff; background-color:#183883; vertical-align:middle; display:table-cell; text-align:center;}
.lnb .txt {background-color:#cfd5e5; line-height:22px;}
.lnb .txt a {padding:5px 15px;}

.lnb > ul > li {line-height:1.4em; border:1px solid #dfdfdf; position:relative; margin-top:-1px;}
.lnb > ul > li > a {display:block; position:relative; color:#2c2c2c; padding:18px 20px;}
.lnb > ul > li > a:first-child {}
.lnb > ul > li:hover > a:after {content:" "; position:absolute; top:50%; right:20px; margin-top:-7px; width:8px; height:14px; background:url('../images/sub/lnb_arrow.png') 0 0 no-repeat; background-size:100% 100%;}
.lnb > ul > li.active {border:1px solid #ee9b11; font-weight:500;}
.lnb > ul > li.active > a {background:#ee9b11; color:#fff;}
.lnb > ul > li.active > a:after {display:none;}

.sub-contain .inquiry {width:204px; border:1px solid #dfdfdf; padding:20px 23px 15px 23px;  margin-top:20px;}
.sub-contain .inquiry h3 {color:#183883; font-weight:700; font-size:24px; position:relative; margin-bottom:25px; padding:12px 0 0 90px;}
.sub-contain .inquiry h3:before {content:""; position:absolute; width:53px; height:53px; top:0; left:26px;background: url('../images/sub/inquiry_icon.png')0 0 no-repeat;}
.sub-contain .inquiry .call {text-align:center; font-size:26px; font-weight:700; letter-spacing:-0.04em; color:#ee9b11; padding:5px 0;}
.sub-contain .inquiry .mail {text-align:center; font-size:14px; letter-spacing:-0.02em; color:#878787;}

#contArea {width:100%; max-width:1200px; margin:0 auto;}
#contArea.wide {max-width:none;}

.sub-title {position:relative;}
.sub-title h2 {position:relative; font-weight:700; padding:0 0 36px 40px; margin:35px 0; font-size:28px; color:#2c2c2c; border-bottom:1px solid #dfdfdf;}
.sub-title h2:before {content:""; position:absolute; top:0; left:0; width:30px; height:30px; background:url('../images/common/doc-tit.png')0 0 no-repeat;}
.sub-title .type2 {border-bottom:none; margin-bottom:0; padding:0 0 40px 40px;}
.sub-title .path {position:absolute; top:5px; right:0; color:#ababab; font-size:14px; line-height:1.3em; font-weight:300;}
.sub-title .path .home {position:relative; display:inline-block; height:20px; vertical-align:top; padding-left:20px; background:url('../images/sub/home_icon.png') 0 50% no-repeat;}
.sub-title .path img {vertical-align:top; margin-top:-.1em}
.sub-title .path strong {font-weight:300 !important; color:#505050;}
.sub-title .path .arrow {display:inline-block; position: relative; padding:0 27px;}
.sub-title .path .arrow.first {padding-right:0;}
.sub-title .path .arrow.first:after {display:none;}
.sub-title .path .arrow:before {content:""; position:absolute; width:7px; height:10px; top:5px; left:10px; background: url('../images/sub/arrow_icon.png')0 0 no-repeat;}
.sub-title .path .arrow:after {content:""; position:absolute; width:7px; height:10px; top:5px; right:8px; background: url('../images/sub/arrow_icon.png')0 0 no-repeat;}

.real-cont {min-height:800px; _height:350px; padding-bottom:120px;}

/* footer */
#footer {padding:36px 0; position:relative; width:100%; background:#fafafa; line-height:1.517em; letter-spacing:-0.06em; border-top:2px solid #284280;}
#footer .contain {position:relative;}
.foot-logo {position:absolute; z-index:5;}

.foot-link {position:absolute; right:0; letter-spacing:-0.03em;}
.foot-link ul {position:relative;}
.foot-link ul li{position:relative; color:#284280; display:inline-block;}
.foot-link ul li:first-child {margin-right:35px;}
.foot-link ul li:first-child:after {content:""; position:absolute; top:4px; right:-20px; width:1px; height:14px; background-color:#284280;}
.foot-link ul li a {display:block; font-size:16px; color:#284280; line-height:22px;}

.foot-info {padding-left:300px;	color:#284280; line-height:22px;}
.foot-info address {font-style:normal; font-size:14px; font-weight:300; padding-top:8px;}
.foot-info address span {margin-right:10px; display:inline-block; color:#505050; line-height:22px;}
.foot-info address .copy {color:#878787; margin-top:10px; font-weight:200;}