* {margin:0; padding:0;}
html {font-size:10px; font-family: 'NanumBarunGothic';}
html, body {/*letter-spacing:-1px;*/}
html, body, img, p {margin:0; padding:0;}
a {text-decoration:none; color:#000;}
li {list-style:none;}
img {display:block;}

@font-face {
	font-family:'nexonlight';
    src: url('../font/nexon-light.woff') format('truetype');
}
@font-face {
	font-family:'nexonbold';
    src: url('../font/nexon-bold.woff') format('truetype');
}
@font-face {
	font-family:'nexongothic';
    src: url('../font/nexon-gothic.woff') format('truetype');
}
@font-face {
	font-family:'NanumBarunGothic';
    src: url('../font/NanumBarunGothic.woff') format('truetype');
}
@font-face {
	font-family:'NanumBarunGothicBold';
    src: url('../font/NanumBarunGothicBold.woff') format('truetype');
}

@font-face {
	font-family:'nanum_1';
    src: url('../font/nanum_1.ttf') format('truetype');
}

@font-face {
	font-family:'nanum_2';
    src: url('../font/nanum_2.ttf') format('truetype');
}


.m {display:none;}


/***** header *****/
.header {background:#f9f9f9;}
.hd {width:1200px; margin:0 auto; padding:2rem 0; display:flex; justify-content:space-between; align-items: center;}
.hd-logo {width:18%;}
.hd-logo img {width:100%;}

.inner {width:50%;}
.hd-menu {display: flex; justify-content: space-between;}
.hd-menu li {}
.hd-menu li a {font-size:2rem;}


/***** main *****/
.full {width:100%; position:relative; overflow: hidden;}
.full .main-bn {width:100%; display:block;}

.main-conbox {position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); letter-spacing: 1px;}
.main-conbox::after {content:''; background-image:url('../img/main_element.png'); width:13rem; height:11rem; background-repeat:no-repeat; background-size:contain; position:absolute; top:1.5rem; right:-6rem; /*transform: translate(0,-50%);*/}

.main-conbox p {color:#fff; text-shadow:3px 3px 5px #777; font-size:5rem; text-align:center; /*letter-spacing: -2px;*/ font-weight: bold; line-height:9rem;}
.main-conbox p:last-child {background-color:#000; padding:0 2rem; text-shadow:none; font-size:6rem;}


/***** footer *****/
.footer {padding:5rem 0; background: #333; box-sizing: border-box;}
.footer .info {width: 1200px; margin: 0 auto; color: #eee; font-size: 1.5rem; line-height: 3rem;}







/***** sub *****/
.wrap {width:1200px; margin:12rem auto;}
.sub_layout {display:flex;}
.fix_left {display:flex; flex-direction:column; margin-right:15rem; position: relative;}
.fix_left .gray_box {background: #777; height: 10rem;}
.fix_left .tit {position: absolute; top: 50px; left: 50px; width: 100%; height: 721px; padding:10rem 0 0 5rem; box-sizing: border-box; background-color:rgba(49, 27, 214, 0.8); color:#fff; border-radius: 26px; font-size: 3rem; letter-spacing:0;}

.fix_left .tit .num {font-size: 7rem; font-family: fantasy; margin-bottom:1rem;}
.fix_left .tit .lport {font-family: serif;}
.fix_left .tit .sub_menu {font-weight:bold; letter-spacing:2px;}

.fix_con {width:100%; margin-top:8rem;}


/***** 1_연혁 *****/
.fix_con .tit_element {letter-spacing:1rem; font-size: 2.4rem; font-weight: lighter; font-family: auto;}
.fix_con .history {border: 15px solid #311bd6; border-left: 0; margin-top:2rem; padding:7rem 0;}
.fix_con .history p {display:flex; align-items:center; margin-bottom:6rem;}
.fix_con .history p:last-child {margin-bottom:0;}
.fix_con .history p span {font-size:1.8rem;}
.fix_con .history p span:first-child {margin-right:3rem; color:#311bd6; font-size:4.4rem; font-family:'nexonbold'; letter-spacing:-2px;}
.fix_con .history p span:last-child {line-height:2.8rem;}


/***** 2_사업영역 *****/
.fix_con .business .box {margin-bottom:8rem;}
.fix_con .business .box:last-child {margin-bottom:0;}
.fix_con .business .box .tit {font-size: 2.8rem; font-family:'nexonbold';}
.fix_con .business .box .sub_tit {margin: 2rem 0; font-size: 2.8rem; color:#333; font-weight:bold; font-family:'nanum_2';}
.fix_con .business .box .con {line-height: 2.9rem; font-size:1.7rem; color:#555;}


/***** 3_CI *****/
.fix_con .ci .box {margin-bottom:3rem;}
.fix_con .ci .box .sub_tit {letter-spacing:0;}
.fix_con .ci .ci_box {display: flex; justify-content: space-between; font-size:1.5rem;}
.fix_con .ci .ci_box .ci_img {display: flex; flex-direction: column; align-items: center;}
.fix_con .ci .ci_box .ci_img img {margin-bottom:1rem;}


/***** 4_오시는길 *****/
.location .mapbox {border:1px solid #000; margin-bottom:4rem;}
.location .add {font-size:1.7rem;}
.location .add .tit {font-size:2.6rem; color:#333; margin-bottom:1rem; font-family:'nexonbold'; letter-spacing:0;}
.location .add .sub {line-height: 2.8rem;}



@media only screen and (max-width: 1600px) {
html {font-size:9px;}
}


@media only screen and (max-width: 1200px) {
.pc {display:none;}
.m {display:block;}
.hd {width: 100%; padding: 2rem 3rem; box-sizing: border-box;}
.footer {width: 100%; padding: 3rem 3rem;}
.footer .info {width:100%;}

.main-conbox {width:80%;}

.wrap {margin-top:0; width:100%;}
.sub_layout {flex-direction: column;}
.fix_left {margin-right: 0;}
.fix_left .tit {width:20%; height:20rem; padding:5rem; top:15%; left:5%; box-sizing:inherit;}
.fix_left img {width:100%;}
.fix_con {width:90%; margin:16rem auto 0;}

.fix_con .ci .ci_box {justify-content: center;}
.fix_con .ci .ci_box .ci_img:first-child {margin-right: 3rem;}

.location .mapbox {width: 100%; max-width: 733px; margin: 0 auto 5rem;}
.location .mapbox img {width:100%;}

}




@media only screen and (max-width: 960px) {
html {font-size:8px;}

.full {background-image: url('../img/main_img.jpg'); height: 74vh; background-size: cover; background-position: center center;}
.full .main-bn {display:none;}

}




@media only screen and (max-width:800px) {

.main-conbox {width:90%;}
.main-conbox p {font-size:3.2rem; line-height:5.5rem;}
.main-conbox p:last-child {font-size:3.4rem;}
.main-conbox::after {top: 0rem; right: -4rem;}
.main-conbox::after {width:10rem;}

.fix_con .tit_element {font-size:1.8rem;}

.fix_con .ci .ci_box {width: 100%; margin: 0 auto; justify-content: space-between;}
.fix_con .ci .ci_box .ci_img {width:48%; margin-right:0;}
.fix_con .ci .ci_box .ci_img img {width:100%;}

}



@media only screen and (max-width:720px) {

.hd-logo {width:22%;}
.inner {width:70%;}
/*
.main-conbox p {font-size:2rem; line-height:6rem;}
.main-conbox p:last-child {font-size:3rem;}
*/
.fix_left .tit {font-size:2rem; height: auto; padding: 4rem;}
.fix_left .tit .num {font-size:5rem;}

}