@charset "euc-kr";

body {font-family:'Montserrat','Arita-dotum-Medium','S-CoreDream-4Regular' sans-serif; min-width: 1000px;}
table {font-family:'Montserrat','Arita-dotum-Medium','S-CoreDream-4Regular' sans-serif;}
body{margin-top:80px}
#header{
    position: fixed;
    min-width:1024px;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    z-index: 100;
    background-color: #fff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .16);
  }
#header .top{width:auto; position:absolute; top:0; left:30px;}
#header .top h1 { text-align:center; padding-top:15px}
#header .top h1>a>img {width:160px;}
#header .menu_wrap {float: right; width: auto; padding-top:20px; height:100%;}
#header .menu .gnb li {float:left; width:220px;}
#header .menu .gnb li.last {width:220px;}
#header .menu .gnb li a {font-size:18px; color:#000; text-align:center; display:block; height:40px; line-height:38px; letter-spacing:-1px;}
#header .menu .sub ul {float:left;  width:220px; padding:8px 0;text-indent:80px; margin-right:0px; line-height:26px; height:100%;}
#header .menu .sub ul.sub4 {margin-left:110px;}
#header .menu .sub ul.sub7 {width:100px;}
#header .menu .sub a {font-size:15px; display:block; color:#FFFFFF; letter-spacing:-1px;}
.hd_logo{width:50px; top:20px; position:relative; z-index:10}

/* subVisual */
.sub0101 .subVisual,
.sub0102 .subVisual,
.sub0103 .subVisual,
.sub0104 .subVisual{background-image:url('../img/subBg01.png')}
.sub0201 .subVisual,
.sub0202 .subVisual,
.sub0203 .subVisual{background-image:url('../img/subBg03.png')}
.sub0401 .subVisual,
.sub0402 .subVisual{background-image:url('../img/subBg02.png')}
.subVisual{
  background-repeat:no-repeat;
  background-size:auto 100%;
  background-position:center;
  height:15.625vw;
  min-height:300px;
  text-align: center;
  box-sizing: border-box;
  position:relative;
  animation: fadein 10s
}

@keyframes fadein {
    from {
        background-size:auto 120%;
    }
    to {
        background-size:auto 100%;
    }
}

.subVisual #subTitle{
  padding-top:90px;
  font-size: 34px;
  color:#fff;
  display:block;
  font-family: 'S-CoreDream-5Medium';
}
.subVisual ul{display:inline-block;padding-top:35px}
.subVisual ul li{float:left;padding:0 18px}
.subVisual ul li a{border-bottom:1px solid transparent; color:#fff; font-size:17px}
.subVisual ul li a.on{color:#FFCE34; border-bottom:1px solid #FFCE34;    text-shadow: 1px 1px 0px rgb(0 0 0 / 50%);}

/* sub */
.subPage{background-image:url('../img/bottomImg.png'); background-repeat:no-repeat; background-position:98% 98%; background-size:auto}
.sub_wrap {overflow:hidden; width:100%; max-width:1000px; margin:0 auto;}
.sub_wrap .content {text-align:center; width:100%; padding:80px 0 120px}

/* sub0101 */
body.sub0101 .content h2{font-size:24px; font-family: 'S-CoreDream-5Medium'; padding-bottom:100px; position:relative;}
body.sub0101 .content h2:after{display:block; content:''; clear:both; width:1px; height:50px; position:absolute; top:60px; bottom:auto; left:0; right:0; margin:0 auto; background-color:#1f1f1f}
body.sub0101 .content p{font-family: 'S-CoreDream-4Regular';; font-size:16px; margin-bottom:20px}
body.sub0101 .content h4{font-size:18px; font-family: 'S-CoreDream-5Medium'; margin-top:50px}

/* sub0102*/


.business_section li:nth-child(1){
background-image:url('../img/sub0102_img01.jpg')}
.business_section li:nth-child(2){
background-image:url('../img/sub0102_img02.jpg')}
.business_section li:nth-child(3){
background-image:url('../img/sub0102_img03.jpg')}
.business_section li:nth-child(4){
background-image:url('../img/sub0102_img04.jpg')}
.business_section li .front:after{display:block; content:''; width:100%; height:100%; background-color:rgba(255, 255, 255, .54); position:absolute; top:0; left:0;z-index: -1}

.business_section li.card{width:calc(25% - 15px); margin:0 10px 0 0; /* box-shadow:0px 0px 8px rgb(0 0 0 / 10%)*/}
.business_section li:last-child{margin:0}
.business_section li .back dl{padding:0}
.business_section li .back dl dd{padding:20px}
.business_section li .back dl dd span{display:block; font-size:15px; padding:5px 0px; text-align:left}
.business_section li dl dt{width:100%; text-align:left; padding:10px; font-size:18px; background-color:#0058A9; color:#fff}
#main .sub_wrap .business_section .card .front h2{background-color:transparent; color:#1f1f1f; font-size:28px; float:left; width:auto; margin-top:60px; padding-left:20px}

/** card **/
.card {
	position: relative;
	display: inline-block;
	-webkit-transition: 0.6s;
	transition: 0.6s;
	text-align: center;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 23%;
	height: 260px;
	padding: 0;
	margin: 0.8%;
	margin-bottom: 18px;
  border-radius:50px 0 0 0;
}

.card .front, .card .back {
	height: inherit;
	width: inherit;
	overflow: hidden;
	position: absolute;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;

}
.card .front{border-radius:50px 0 0 0; overflow:hidden}
.card .back{border-radius: 0 50px 0 0}
.card .front:hover, .card .back:hover {
}

.card .front .click, .card .back .click {
	/* Add the Flip button */
	position: absolute;
  left:20px;
	bottom: 20px;
	cursor: pointer;
	width:30px; height:10px;
}
.card .front {
	z-index: 2;
}
.card .back {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
  background-color:#fff
}
.card.flip {
	/* CSS to make element flip on click */
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.card.flip .back{z-index: 3}

/* sub0103 */
body.sub0103 .sub_wrap{max-width:800px}
body.sub0103 .history_tab{overflow:hidden;padding:5px 0 40px 5px;}
body.sub0103 .history_tab li{background-color:#f8f8f8; margin-left:0; padding:12px 30px; margin-bottom:0; width:calc(25% - 9px); float:left; font-size: 16px;
    text-align: center; margin:3px 3px 0 0; float:left; border:1px solid #e5e5e5}
body.sub0103 .history_tab li:nth-child(4n){margin-right:0}
body.sub0103 .history_tab li.on{background: #0058a9; color:#fff}
body.sub0103 .history_tab li a {display:block;}
.history .history_list {padding: 40px 0; position: relative; border:1px solid #dddddd; border-width:1px 0; display:none}
.history .history_list a{display:inline-block; float:left; width:180px; color:#0058A9;font-family: 'S-CoreDream-6Bold'; font-size:22px; text-align:center}
.history .history_list ul{display:inline-block; width:calc(100% - 180px); text-align:left;padding-left:20px}
.history .history_list ul li{font-size:15px; line-height:2}

/* sub0104 */
body.sub0104 .sub_wrap{max-width:800px}
.sub0104 .root_daum_roughmap{margin:0 auto}
body.sub0104 .root_daum_roughmap .wrap_controllers .wrap_btn_roadview .txt{font-size:13px}
body.sub0104 .root_daum_roughmap .cont .section{margin:0}
.sub0104  .content .tit{
	margin-top: 0;
}
.section.section_address{display:none;}
.company_info{ padding: 20px 0; border-top:1px solid #f2f2f2}
.company_info > div{padding-bottom:10px;}
.sub0104 .company_info .tit{margin-top: 0;width: 70px;display: inline-block;vertical-align: top; font-size:14px}
.sub0104 .company_info ul li{font-size:14px; padding-bottom:8px}
.btn_reset, .btn_submit{
    background-color:#0058a9;
}

/* sub02 */
.board ul#bo_list li{width:calc(24% - 10px); margin-right:15px; float:left; border:0; margin-bottom:25px;}
.board ul#bo_list li:nth-child(4n){margin-right:0;}
.board ul#bo_list li p{text-align:left; margin-bottom:5px;}
.board ul#bo_list li p.td_date{font-size:12px; color:#888}
.board ul#bo_list li .img_wrap {position:relative; width:auto; height:150px; padding:5px;border:1px solid #eee;  text-align:center; margin-bottom:10px;; overflow:hidden;}
.board ul#bo_list li .img_wrap img{box-sizing: border-box; height: 100%; position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; width:auto}
.board ul#bo_list li:hover .img_wrap img{transform:scale(1.2); transition:all 1500ms }
.board ul#bo_list li .td_subject{
	text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal;
width:100%;
overflow:hidden;
font-size:17px; }




#main.subPage{}

#main {width:100%;}
#main .sub_wrap .lnb { float:left; width:200px; margin-top:25px;}

#main .sub_wrap .lnb h2 {background:#0058a9; font-size:24px; color:#ffce34; letter-spacing:-1px; padding:20px; height:85px;}
#main .sub_wrap .lnb h2 span {font-size:16px; margin-left:2px; margin-top:8px; display:block; letter-spacing:0; color:#fff}
#main .sub_wrap .lnb .lnb_menu, .contact_wrap{
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #0058a9;
  background-color: #fff;
}
#main .sub_wrap .lnb .lnb_menu li {border-bottom:1px solid #dddddd;}
#main .sub_wrap .lnb .lnb_menu li a {display:block; padding:14px 20px;}
#main .sub_wrap .lnb .lnb_menu li a.on {color:#0058a9}

#main .sub_wrap .lnb .lnb_menu #lnb_sub1 .lnb_sub1_1 {display:none;}

.contact{box-sizing:border-box;margin-top:15px;}
#main .sub_wrap .lnb .contact h2{font-weight:bold;padding: 16px; height:auto;}
.contact > span{display:block; font-size:16px; font-weight:bold; margin-top: 23px;}
.contact span.text-primary{
  font-size: 26px;
  margin-top: 10px;
  font-weight: bold;
  line-height: 1.2;
  color: #000;
  letter-spacing: -1.5px;
}
.contact em{font-weight:bold; margin-right:10px; padding-right:10px; padding-bottom: 5px; display: inline-block;}
.contact_wrap{padding:14px;}
.contact .btn_consult{    display: inline-block;
    margin-top: 15px;
    font-size: 16px;
    vertical-align: bottom;
    font-weight: bold;
    padding-top: 15px;}
.contact .btn_consult img{width: 45%;
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
.worktime{display:block; margin-top:15px; font-size:18px;}



#main .sub_wrap .content .location {text-align:right; position:absolute;}
#main .sub_wrap .content .location em {background:url(../img/location-home.svg) no-repeat 50% 50%; display:inline-block;
    width: 16px;
    vertical-align: top;
    height: 16px;
    margin-top: 1px;}
#main .sub_wrap .content .location span {background:url(../img/1415786276_icon-ios7-arrow-right-16.png) no-repeat 0% 1px; padding-left:15px;}


#main .sub_wrap .content .tit {margin-top:20px; overflow:hidden; font-size:18px;}
#main .sub_wrap .content .tit h2 {color:#424141; font-size:24px; float:left; letter-spacing:-1px; border-bottom:3px solid #424141; padding-bottom:20px;}
#main .sub_wrap .content .tit p {float:left; font-size:14px; letter-spacing:-1px; margin:10px 0 0 42px;}




#main .sub_wrap .content .txt {margin-top:25px; font-size:18px !important; color:#424141; position:relative;}
#main .sub_wrap .content .txt h2 {font-size:18px; height:28px; background-color:#e7435d; color:#FFF; width:156px; text-align:center;}
#main .sub_wrap .content .txt p {margin-top:20px; padding-bottom:20px; float:left;}
/*������ 2017.09.11*/
#main .sub_wrap .content .txt a .back_to_top {padding-top:5px; padding-left:4px; font-size:15px; color: #676767;}

#main .sub_wrap .content .txt2 {margin-top:20px; font-size:14px;}
#main .sub_wrap .content .txt2 h2 {background:url(../img/bullet1.png) no-repeat left 3px; color:#e7435d; font-size:18px; padding-left:30px; width:100%;}
#main .sub_wrap .content .txt2 span.tit2 { color:#444; font-size:16px; margin-left:-10px; display:block; margin-bottom:5px;}

#main .sub_wrap .content .txt2 ul {margin-top:10px; padding-left:20px;line-height:24px; }
#main .sub_wrap .content .txt2 p {margin-top:10px; padding-left:20px; line-height:24px; font-size:20px;}

#main .sub_wrap .content .txt2.txt3 ul {background:#eaeaea; padding:10px 0 10px 20px;}

#main .sub_wrap .content .txt2.txt3.sanhu {overflow:hidden;}
#main .sub_wrap .content .txt2.txt3.sanhu ul {float:left; letter-spacing:-1px; width:345px; margin-right:10px;}
#main .sub_wrap .content .txt2.txt3.sanhu ul h3 {font-weight:bold; background:#e7435d; display:inline; color:#FFF; height:18px;}

/*��ȸ�Ұ�*/
#main .content.introduce .txt4 p {background:#eaeaea; padding:10px 0 10px 20px;}
#main .content.introduce .txt4 p .tit2 {font-weight:bold; background:#e7435d; display:inline-block; color:#FFF; padding:0px 5px;}
#main .content.introduce .txt5 .tit {font-size:15px;}
#main .content.introduce .txt5 span {margin-left:10px;}

/*��ý���*/
#main .content.introduce .point p {background:none; border-bottom:1px dashed;}
#main .content.introduce .point p .tit2 {background:none; color:#45b6de;}

/*���İ���(���Ǻ�����)*/
#main .sub_wrap .content .txt h2.jiwon {width:190px;}

/*ȨŬ����*/
#main .content .txt2 .home {color:#000; font-weight:bold;}

/*�簡����*/
#main .sub_wrap .content .txt2.ready h2 {background:none; text-align:center; padding-left:0; margin-top:100px;}



#main .content.introduce .txt4 {position:relative;}
#main .content.introduce .txt4 .m_left {margin-left:77px;}
#main .content.introduce .txt4 .color {color:#e48243;}
#main .content.introduce .txt4 .color a {color:#e48243;}
#main .content.introduce .txt4 .price {position:absolute; right:30px; bottom:20px; height:58px; background:url(../img/price.png) no-repeat; text-align:right; font-size:18px;}
#main .content.introduce .txt4 .price span {display:block; margin-top:5px; margin-left:65px; color:#45b6de;}
#main .content.introduce .txt4 .dong {background:none; padding-top:0px; padding-right:10px;}

#main .content.introduce .txt6 {margin-top:30px;  border-bottom:1px solid #dddddd; padding-bottom:30px;}
#main .content.introduce .txt6 h2 {font-size:16px; font-weight:bold; background:#45b6de; display:inline; padding:1px 5px; color:#FFF;}
#main .content.introduce .txt6 p {text-align:center; margin-top:20px;}

/*����������*/
#main .sub_wrap .content .txt2.service {position:relative;}
#main .sub_wrap .content .txt2.service h2 {background:url(../img/number1.png) no-repeat; height:37px; line-height:45px; padding-left:45px; color:#45b6de;}
#main .sub_wrap .content .txt2.service h2.h02 {background:url(../img/number2.png) no-repeat;}
#main .sub_wrap .content .txt2.service h2.h03 {background:url(../img/number3.png) no-repeat;}
#main .sub_wrap .content .txt2.service h2.h04 {background:url(../img/number4.png) no-repeat;}
#main .sub_wrap .content .txt2.service h2.h05 {background:url(../img/number5.png) no-repeat;}
#main .sub_wrap .content .txt2.service ul {font-size:16px;}
#main .sub_wrap .content .txt2.service.last {margin-bottom:100px;}
#main .sub_wrap .content .txt2.service .service_btn {position:absolute; right:0; top:18px;}
#main .sub_wrap .content .txt2.service .jibu_btn {position:absolute; right:0; top:60px;}

/*faq*/
#main .sub_wrap .content .faq {margin-top:50px; border-top:1px solid #e9e9e9;}
#main .sub_wrap .content .faq .tit2 {border-bottom:1px solid #e9e9e9;}
#main .sub_wrap .content .faq h2 {font-size:16px; background:url(../img/cross.png) no-repeat 5px 50%; padding-left:25px;}
#main .sub_wrap .content .faq h2.on {background:url(../img/cross2.png) no-repeat 5px 50%;}
#main .sub_wrap .content .faq h2 a {display:block; padding:8px 0 10px;}
#main .sub_wrap .content .faq p {font-size:14px; line-height:24px; background:#e9e9e9; padding:10px 15px; display:none;}
#main .sub_wrap .content .faq .tit2:first-child p {display:block;}

/*ã�ƿ��ô±�*/
#main .sub_wrap .content .txt2 .map {margin-top:20px;}
#main .sub_wrap .content .txt2 h2.way {background:none; padding-left:0;}
#main .sub_wrap .content .txt2 p.address {color:#45b6de; font-size:15px;}

/* custom */
.mright2px { margin-right:2px; }
#header .menu {width:auto; float:right; height:100%}
#header .menu .gnb{display:flex; justify-content: center;}
#header .menu .sub{width:100%; height:136px; background-image:none; background-color:rgba(255,255,255,1); display: none; justify-content: center; box-shadow: 3px 8px 10px rgba(0,0,0,.1); z-index:100; position:relative; top:20px;}
#header .menu .sub ul li a{color:black; padding:2px 0; letter-spacing: -1.5px;  height:100%;}
#header .menu .sub ul li:hover a{color:white;}
.sub_wrap .lnb .lnb_menu li a.on{color:black; font-size: 18px;}
.sub_wrap .lnb h2{background:white; color: black; padding: 44px 0 0 15px; font-weight: 600;}
.sub_wrap{height:100%;}
.sub_wrap:after{display:block; content:''; clear:both;}

#main .sub_wrap .content .txt2{margin-top: 40px;}

ol,ul{overflow:visible;}


#main .sub_wrap .content .txt2{line-height: 1.8;}
#main .sub_wrap .lnb .lnb_menu li a{transition:all 0.6s ease; font-size:18px;}
#header .menu .sub ul{transition:all 0.4s ease; text-indent: 0;}
#header .menu .sub ul li a{transition:all 0.4s ease; text-align: center;}

#header .menu .sub ul li{text-align: center;}
#header .menu .sub ul li a{text-align: center;}


.up_btn{
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  width:40px; height:40px;
  position: fixed;
  bottom: 50px;
  right: 50px;
}

#header .menu .sub ul li a{color:black;}

#main .content.introduce .txt p{color: #0058a9; width:100%; font-size:30px; font-weight: bold; padding-bottom:0; float:none;}
#main .content.introduce .txt p.sign span{padding:2px 10px 2px; float:left;}
#main .content.introduce .txt p.sign .text-yellow{color: #ffce34;}







/**************************************************/

@media (max-width:1700px){
 #main .swiper-slide{background-size:auto 100%}
}

@media (max-width:1680px){
  .subVisual{min-height:0}
  .subVisual #subTitle {padding-top: 60px;font-size: 28px}
  .subVisual ul{padding-top:25px}
}

@media (max-width:1370px){}


@media (max-width: 1200px){
  #main {width: 90%; margin: 0 auto; }
  #main .sub_wrap .content .txt {    margin-top: 22px;}
  .business_section li { height: 230px;}
  .business_section li dl { padding: 25px;}
  .business_section li dl dt {margin-bottom: 15px; font-size: 40px; top: 30px;}
  .business_section li:hover dl dt{font-size:38px;}
  .business_section li dl dd { padding-top: 15px;}
  #bo_list th {min-width: 40px;}


}

@media (max-width: 1024px){
  .subVisual #subTitle {padding-top: 40px;font-size: 22px}
  .subVisual ul{padding-top:25px}
  .subVisual ul li a{font-size:15px}
}
