@charset "utf-8";

* {font-family: "NanumSquare";}

header { }
header > div {width: 1200px; margin: 0 auto;}
header > div:after {content: ""; display: block; clear: both;}
header h1 {float: left; padding: 30px 0; }
header h1 a {display: block; font-size: 0; background:url(../img/index_logo_1.png) no-repeat; width: 223px; height: 48px;}
header nav {float: right;}
header nav > ul:after {content: ""; display: block; clear: both;}
header nav > ul > li {position:relative; float: left;}
header nav > ul > li > a {position: relative; display: inline-block; line-height: 120px; font-size: 17px; color: #595757; padding:0 40px; transition: all .4s; font-weight: bold;}
header nav > ul > li > a.on {transform: scale(1.05); }
header nav > ul > li > a.on:after {content: ""; display: inline-block; position: absolute; left:50%; transform: translateX(-50%); bottom: 0px; border-width:10px; border-style:solid; border-color:transparent transparent #0c8388 transparent;}
header nav > ul > li ul {display: none; width: 100%; text-align: center; position: absolute; left: 50%; top: 145px; z-index: 60; transform: translateX(-50%);}
header nav > ul > li ul.on {display: block;}
header nav > ul > li ul li a {font-size: 15px; color: #fff; line-height: 35px; transition: all .4s; font-family: "Nanum Square"; letter-spacing: -2px;} 
header nav > ul > li ul li a:hover {color: #0c8388;}

footer {border-top: 1px solid #ededed; background: #f9f9f9; }
footer > div {width: 1200px; margin: 0 auto; padding:25px 0; text-align: center;}
footer > div h1 {display: inline-block; margin-bottom: 10px; font-size: 0; background: url(../img/index_logo_2.png) no-repeat; width: 152px; height: 33px;}
footer > div address {font-size: 13px; color: #333; line-height: 28px; font-weight: 500; font-style: normal;}
footer > div address span {display: inline-block; width: 1px; height: 10px; background:#333; margin: 0 4px; }

#menu {display: none; position: absolute; z-index: 50; width: 100%; height: 190px; background: url(../img/bg_index_menu.png) no-repeat rgba(0,0,0,0.05); border-top: 6px solid #0c8388;}
#menu > div {width: 1200px; margin: 0 auto;}

.visual {position: relative;}
.visual img {width: 100%; height: auto;}

.conti1 {background: #fff;}
.conti1 > div {width: 1200px; margin: 0 auto; text-align:center; padding: 80px 0;}
.conti1 > div h2 {display: inline-block; background:url(../img/index_logo_1.png) center no-repeat; width: 519px; height: 85px; font-size: 0; margin-bottom: 50px;}
.conti1 > div p {font-size: 17px; color: #333; line-height: 36px; }
.conti1 > div a {display: inline-block; font-size: 14px; color: #333; width: 148px; height: 44px; border:1px solid #0071af; line-height: 44px; margin-top: 50px; transition: all .5s;}
.conti1 > div a:hover {background: #0071af; color: #fff;}


.conti2 {background: url(../img/bg_index_conti2.png) center no-repeat; height: 400px; background-size: 100% 100%; background-attachment: fixed;}
.conti2 > div {width: 1200px; margin:0 auto; padding:100px 0;}
.conti2 > div ul {display: flex;}
.conti2 > div ul li {flex: 1; padding: 0 10px; }
.conti2 > div ul li a {position: relative; display: block; overflow: hidden;}
.conti2 > div ul li:first-child {padding-left: 0;}
.conti2 > div ul li:last-child {padding-right: 0;}
.conti2 > div ul li img {width: 100%; height: 100%; transition: all .4s;}
.conti2 > div ul li img:hover {transform: scale(1.05);}
.conti2 > div ul li a i {position: absolute; right: 10px; top: 10px; font-size: 0; display: inline-block; background:url(../img/ico_index_more.png) no-repeat; width: 34px; height: 34px;}

.conti3 {background: url(../img/bg_index_conti3.jpg) center no-repeat; text-align: center;}
.conti3 > div {width: 1200px; margin: 0 auto; padding: 80px 0;}
.conti3 > div h2 {position: relative; display: inline-block; font-size: 37px; color: #333;}
.conti3 > div h2:after {content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: #0a76ad; margin: 30px 0;}
.conti3 > div .map {padding-top: 75px; height: 470px;}
.conti3 > div .map iframe {width: 100%; height: 100%;}

.conti4 {background:#fff;}
.conti4 > div {width: 1200px; margin: 0 auto; padding:80px 0 60px;}
.conti4 > div ul {display: flex;}
.conti4 > div ul li {flex: 1; padding: 0 5px;}
.conti4 > div ul li a {display: block; position: relative;}
.conti4 > div ul li a .img {overflow: hidden;}
.conti4 > div ul li a .img img {width: 100%;height: 100%; transition: all .4s;}
.conti4 > div ul li a .img img:hover {transform: scale(1.05);}
.conti4 > div ul li a:hover p {transform: scale(1.1);}
.conti4 > div ul li a p {position: absolute; left: 80px; bottom: 20px; font-size: 18px; color: #fff; transition: all .4s;} 
.conti4 > div ul li a p:after {content: ""; display: inline-block; background: url(../img/ico_index_conti4.png) no-repeat; width: 29px; height: 9px; margin-left: 10px; position: relative; top: -3px;}