﻿ @charset "UTF-8";
/*@import './Bootstrap-Grid.css';*/
@import url("/css/Fonts/nanumgothic.css");
 
* {
  padding: 0;
  margin: 0;
  -webkit-text-size-adjust:none;
}


html, body {
  height: 100%;
  font-family: 'Nanum Gothic',nunito,helveticaneue,helvetica neue,Helvetica,Arial,sans-serif;text-transform:none
  -webkit-font-smoothing: antialiased;
  color:#333;
}
textarea,input{ font-family: 'Nanum Gothic'}

a{text-decoration:none; color:#333; transition:all 0.3s;}
ul,li{list-style:none; margin:0px; padding:0px;}


.wrap{max-width:850px; margin:0 auto}


/*header*/
.navi{width:100%; height:50px; background:rgba(255,255,255,0.5); position:Relative}
.navi .logo{position:absolute; top:15px; left:10px;}
.navi .logo{color:#313131; font-size:18px; font-weight:bold; letter-spacing:-1px}
 ul.gnb{position:absolute; top:15px; right:80px;}
 ul.gnb li{float:left; margin:0px 5px;}
 ul.gnb li a{font-size:16px;}
 a.login-btn{display:block; width:65px; height:29px; border:1px solid #a2b8b9; font-size:14px; text-align:center; line-height:29px; position:absolute; top:10px; right:10px; border-radius:20px;}
 a.login-btn:hover{background:#a2b8b9; color:#fff}
.navi.sub-navi{ background:rgba(255,255,255,1)}


/*main*/
.container, .sections, .section {
  position: relative;
  text-align: center;
}
.section .con-box {
}

.section0 { background: url(/image/m-bg0.png) center center no-repeat #fff; background-size:cover}  
.section1{background: url(/image/m-bg1.png) center center no-repeat #fff; background-size:cover}
.section2 {background: #f2f2f2;}
.section3 {background: url(/image/m-bg3.png) center center no-repeat #fff; background-size:cover}
.section4 { background: url(/image/m-bg4.png) center center no-repeat #fff; background-size:cover}
.section5 { background: url(/image/m-bg5.png) center center no-repeat #fff; background-size:cover}
 
   

h1, h2, h3, h4{font-weight:100; color:#333; line-height:1.5em}
h3{font-size:18px; color:#4a4a4a}
h2{font-size:23px; font-weight:bold; line-height:1.3em; letter-spacing:-2px;}
h1{font-size:28px; font-weight:bold; line-height:1.3em; letter-spacing:-2px;}
h1 strong{color:#c73e42}

.section0{padding:40px 30px;}
.section0 h3{padding:0px 0px 20px;}
.section0 h1{padding-bottom:20px;}
.section0 .con-box  ul{display:table; margin:0 auto;}
.section0 .con-box  ul li{float:left; width:130px;  border-radius:20px; border:1px solid #b9bbaa; text-align:center; font-size:16px;margin:0px 5px;padding:10px 0px; 
background:rgba(255,255,255,0.6)}
.section0 .con-box  ul li strong{font-family: verdana !important; font-size:20px; position:Relative; top:2px;}


.section1{padding:40px 30px;}
.section1 ul{display:flex; flex-direction:row; flex-wrap:wrap;}
.section1 ul li{flex:1;  margin:5px;}
.section1 ul li .title{height:150px; background:#fff; border:1px solid #baddd7; border-bottom:0px;}
.section1 ul li .title p{font-weight:bold; font-size:15px; text-align:center; padding-top:15px; height:50px;}
.section1 ul li .title a{display:inline-block; width:114px; height:29px; border-radius:25px; text-align:center; line-height:29px; font-size:16px; border:1px solid #333; margin-bottom:5px;}
.section1 ul li .title a.bg{background:#333; color:#fff}
.section1 ul li .logo-area{height:auto; text-align:center;border:1px solid #baddd7; }
.section1 ul li .logo-area img{padding:15px; width:90px;}
.section1 ul li.color1 .logo-area{background:url(/image/x.png) center -50px no-repeat #e0d12f}
.section1 ul li.color2 .logo-area{background:url(/image/x.png) top center no-repeat #ba9c92}
.section1 ul li.color3 .logo-area{background:url(/image/x.png) top center no-repeat #ea99d4}
.section1 ul li.color4 .logo-area{background:url(/image/x.png) top center no-repeat #81a3e9}
.section1 ul li.color5 .logo-area{background:url(/image/x.png) top center no-repeat #72dbb0}
.section1 ul li.color1 .title a{ border:1px solid #e0d12f; color:#d2c31e}
.section1 ul li.color1 .title a.bg{background:#e0d12f; color:#fff}
.section1 ul li.color2 .title a{ border:1px solid #ba9c92; color:#ba9c92}
.section1 ul li.color2 .title a.bg{background:#ba9c92; color:#fff}
.section1 ul li.color3 .title a{ border:1px solid #ea99d4; color:#ea99d4}
.section1 ul li.color3 .title a.bg{background:#ea99d4; color:#fff}
.section1 ul li.color4 .title a{ border:1px solid #81a3e9; color:#81a3e9}
.section1 ul li.color4 .title a.bg{background:#81a3e9; color:#fff}
.section1 ul li.color5 .title a{ border:1px solid #72dbb0; color:#72dbb0}
.section1 ul li.color5 .title a.bg{background:#72dbb0; color:#fff}
.section1 ul li.ch-img img{width:100%; }

@media screen and (min-width:450px){
.section1 ul li.ch-img{display:none}
} 


.section2{padding:40px 30px;}
.section2 h2{padding-bottom:10px;}
.section2 h3{padding-bottom:20px;}
.section2 ul{display:flex; flex-direction:row; flex-wrap:wrap;}
.section2 ul li{flex:1;  margin:5px; }
.section2 ul li .img-area{width:150px; height:150px;  position:relative; margin:0 auto;margin-bottom:15px;}
.section2 ul li img{width:150px;}
.section2 ul li:first-child img{position:Relative; top:-10px;}
.section2 ul li p{font-weight:bold; font-size:16px; height:35px; }
.section2 ul li a{display:inline-block; width:114px; height:29px; border-radius:25px; text-align:center; line-height:29px; font-size:16px; border:1px solid #b8b8b8}



.section3{padding:40px 30px;}
.section3 ul{display:flex; flex-direction:row; flex-wrap:wrap;}
.section3 ul li{flex:1;  margin:5px;  }
.section3 ul li h3{padding-bottom:40px; font-weight:bold; color:#fff; background:url(/image/line.png) center 60px no-repeat}
.section3 ul li img{width:150px;}


.section4{padding:40px 30px;}
.section4 h2{padding-bottom:30px;}
.section4 h2 strong{color:#c73e42}
.section4 a{display:inline-block; width:200px; height:60px; border-radius:50px; text-align:center; line-height:60px; font-size:20px;background:#c73e42; color:#fff; font-weight:bold;
margin-bottom:100px;}


.section5{padding:40px 30px;}
.section5 h2{padding-bottom:30px;}
.section5 .contact-us{ }
.section5 .contact-us .field-area{width:100%; height:50px; box-sizing:border-box;border:1px solid #e1e1e1; background:#fff; padding-left:80px; position:Relative;}
.section5 .contact-us .field-area .title{width:80px; font-size:14px; font-weight:bold; border-right:1px solid #e1e1e1; height:28px;line-height:28px; text-align:left; 
position:absolute; left:10px; top:10px;}
.section5 .contact-us .field-area input{width:100%; padding:0px 29px; line-height:40px; height:40px; border:0px; font-size:14px;box-sizing:border-box;margin:0px;}
.section5 .contact-us textarea{width:100%; box-sizing:border-box;border:1px solid #e1e1e1; background:#fff;padding:10px; font-size:14px;margin-bottom:10px;}
.section5 input:focus, .section5 textarea:focus{outline:none; }
.section5 .half{width:50%; float:left;box-sizing:border-box;}
.section5 .pd{padding:5px;}
.section5 a{display:inline-block; width:100px; height:55px; border-radius:30px; text-align:center; line-height:55px; font-size:18px; color: #fff;font-weight:bold;margin:10px;}
.section5 a.btn1{background:#674654}
.section5 a.btn2{background:#898989}


.section6 {background: #86c1e0;}
.section6{padding:40px 30px;}
.section6 h2{padding-bottom:10px;}
.section6 h2{padding-bottom:10px;}
.section6 h3{padding-bottom:30px;}
.section6 ul{display:flex; flex-direction:row; flex-wrap:wrap;}
.section6 ul li{flex:1;  margin:5px; }
.section6 ul li .img-area{width:200px; position:relative; margin:0 auto;margin-bottom:15px;}
.section6 ul li img{width:200px;}
.section6 ul li:first-child img{position:Relative; top:-10px;}
.section6 ul li p{font-weight:bold; font-size:16px; height:35px; }
.section6 ul li a{display:inline-block; width:114px; height:29px; border-radius:25px; text-align:center; line-height:29px; font-size:16px; border:1px solid #b8b8b8}

.section7 {background: #86c1e0;}
.section7 {padding:40px 30px;}
.section7 h2{padding-bottom:10px;}
.section7 h3{padding-bottom:30px;}
.section7 ul{display:flex; flex-direction:row; flex-wrap:wrap;}
.section7 ul li{flex:1;  margin:5px; }
.section7 ul li .img-area{max-width:315px; position:relative; margin:0 auto;margin-bottom:15px;}
.section7 ul li img{max-width:315px;}
.section7 ul li:first-child img{position:Relative; top:-10px;}
.section7 ul li p{font-weight:bold; font-size:16px; height:35px; }
.section7 ul li a{display:inline-block; width:114px; height:29px; border-radius:25px; text-align:center; line-height:29px; font-size:16px; border:1px solid #b8b8b8}
@media screen and (max-width:450px){
.section6 h2{padding-right:50px;padding-left:50px;}
.section6 ul li .img-area{width:315px; position:relative; margin:0 auto;margin-bottom:15px;}
.section6 ul li img{width:315px;}
} 


/*quick*/
.quick{position:fixed; bottom:20px; right:15px;}
.quick a.quick-open{display:block; width:50px; height:50px;border-radius:50%; background:#c73e42; color:#fff; text-align:center; font-size:14px;}
.quick a.quick-open span{position:relative; top:8px;}

.quick-apply{position:fixed; top:0px; left:0px; width:100%; height:100%; background:rgba(0,0,0,0.7); display:none}
.quick-apply .con{position:absolute; bottom:20px; right:15px;}
.quick-apply .con ul{width:280px;}
.quick-apply .con ul li{padding-top:20px; position:Relative; height:50px;}
.quick-apply .con ul li div{float:left}
.quick-apply .con ul li a{float:right}
.quick-apply .con ul li a{display:block; width:50px; height:50px;border-radius:50%; background:#c73e42; color:#fff; text-align:center; font-size:14px;}
.quick-apply .con ul li a  span{position:relative; top:8px;}
.quick-apply .con ul li.style1 div{font-family: verdana !important; color:#ffca14; font-size:14px;}
.quick-apply .con ul li.style1 div strong{font-size:20px;}
.quick-apply .con ul li.style1 a{background:#ffca14}
.quick-apply .con ul li.style2 div{color:#fff; font-size:14px;}
.quick-apply .con ul li.style2 div input[type=text]{height:20px; line-height:20px; padding:5px; width:200px; margin-bottom:10px;}
.quick-apply .con ul li.style2 div label{display:block}
.quick-apply .con ul li.style2 div label input{position:relative; top:3px;}
.quick-apply .con ul li.style2 a{background:#00c1d2}
.quick-apply .con ul li.style3 a span{top:15px;}


.clear{clear:both}
.clear:after{content:""; display:block}
.fl{float:left}
.fr{float:right}



/*sub*/
.sub-title{padding:40px;position:relative}
.sub-title.bg01{background:url(/image/sub/sub-t01.png) center -80px no-repeat}
.sub-title.bg02{background:url(/image/sub/sub-t02.png) center -120px no-repeat}
.sub-title.bg03{background:url(/image/sub/sub-t03.png) center -80px no-repeat}
.sub-title h2{ position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); font-size:30px; font-weight:100}

.sub-menu{background:#449d9d; width:100%; }
.sub-menu ul{display:flex; flex-direction:row;}
.sub-menu ul li{width:20%; flex:1; align-self:center }
.sub-menu ul li a{color:#fff;position:relative; display:block; text-align:center; padding:10px 0px;}
.sub-menu ul li a img{position:relative; top:7px;}
.sub-menu ul li.active a{color:#fbd64e; }

.sub-container{padding:40px 30px}

.head-text{font-size:18px; text-align:center; line-height:1.3em; letter-spacing:-1px;}
.head-text span{background:#fdeaa6; border-radius:50px; padding:0px 5px;margin:0 auto}
.head-text img{padding-bottom:30px;}

/*서비스소개*/
ul.service-con{}
ul.service-con li{overflow:hidden; background:url(/image/sub/dot.png) bottom left repeat-x; padding:30px 0px;}
ul.service-con li{ text-align:center }
ul.service-con li .img-area{padding-bottom:10px;}
ul.service-con li .img-area img{width:200px;}
ul.service-con li .con-area{font-size:14px;}
ul.service-con li .con-area h3{padding-bottom:15px; font-weight:bold}
ul.service-con li .con-area .pd{padding-top:15px;}
ul.service-con li .con-area .pd img{width:100%; max-width:449px;}
ul.service-con li:last-child{background:none; padding-bottom:0px;}


@media screen and (min-width:450px){
ul.service-con .fl,ul.service-con .fr{flex:1;  margin:5px;align-self:center; width:100%; }
} 



.pay-area{background:url(/image/sub/dot.png) top left repeat-x; padding:30px 0px; margin-top:30px}
.pay-table{ margin:0 auto;}
.pay-table table{width:100%;border-collapse:collapse;}
.pay-table table td, .pay-table table th{border:1px solid #c1c1c1;padding:15px;}
.pay-table table th{background:#eee}
.pay-table table td{text-align:right}
.pay-table table td strong{font-family: verdana !important;}
.pay-area p{text-align:center; padding-bottom:10px; font-size:18px;}
.pay-area ul{display:table;margin:30px auto;position:Relative}
.pay-area ul li{float:left; width:80px;  position:Relative; margin:0px 10px; }
.pay-area ul li .img-area{width:80px; height:80px; margin-bottom:15px; position:relative}
.pay-area ul li img{position:absolute; bottom:0px; left:0px; width:100%; height:auto }
.pay-area ul li p{font-weight:bold; font-size:16px; height:35px; }
.pay-area ul li a{display:inline-block; width:114px; height:29px; border-radius:25px; text-align:center; line-height:29px; font-size:16px; border:1px solid #b8b8b8}
.pay-area ul li.ch-img{position:absolute; top:150px; left:-110px; z-index:-1}
.pay-area p.txt-left{text-align:left; font-size:16px; padding-top:15px; line-height:1.5em}


/*서브 하단*/
.sub-footer{width:100%;background:#585858;}
.sub-footer .copyright{padding:30px; font-size:12px; color:#fff; line-height:1.5em; position:Relative ; text-align:center}


.stick {
  margin-top: 0 !important;
  position: fixed;
  top: 80px;
  z-index: 10000;
}


/*고객센터*/
.cs-menu{padding:40px 0px;background:url(/image/sub/dot.png) bottom left repeat-x;  margin-bottom:40px;}
.cs-menu ul{display:flex; flex-direction:row;flex-wrap:wrap;}
.cs-menu ul li{flex:1; margin:5px; text-align:center; width:50%;}
.cs-menu ul li img{width:100px;padding-bottom:0px;}


.btn{display:block; height:37px; line-height:37px; width:144px; border:1px solid #c1c1c1; text-align:center; margin:0 auto; border-radius:20px; margin-top:10px;}

.sub-width{}

.small-title{text-align:Center; font-size:20px; height:50px; background:url(/image/sub/bl.png) bottom center no-repeat; font-weight:bold; margin-bottom:20px;}

.tab{margin-bottom:32px;}
.tab ul{display:flex; flex-direction:row;flex-wrap:wrap;}
.tab ul li{flex:1; margin:5px; text-align:center}
.tab ul li a{display:block; border:1px solid #c1c1c1; text-align:center; font-size:14px; padding:5px;}
.tab ul li.active a{background:#4c4949; color:#fff;}

.bbs-top{margin-bottom:15px;overflow:hidden; padding-top:10px}
.bbs-top .total{font-size:14px;}
.bbs-top .search{width:205px; border-bottom:1px solid #c1c1c1; position:Relative; top:-10px;}
.bbs-top .search input{width:175px;position:Relative; top:-5px; margin-right:10px; border:0px;}
.bbs-top .search input:focus{outline:none}


.accordion {border-top: 2px solid #c1c1c1;}
.accordion h3 {padding: 17px 17px 17px 54px; margin: 0;border-bottom: 1px solid #e0e0e0;cursor: pointer; font-size:16px; background:url(/image/sub/q-ico.png) left 8px no-repeat;}
.accordion h3:hover {background-color: #fcfcfc; }
.accordion p {background: #fcfcfc; margin: 0;padding: 17px 17px 17px  54px; border-bottom: 1px solid #e0e0e0; font-size:14px;}



/*회사소개*/
.about-con1{}
.about-con1 ul{}
.about-con1 ul li{padding:40px 0px;overflow:hidden; background:url(/image/sub/dot.png) bottom left repeat-x; text-align:center}
.about-con1 ul li:last-child{background:none}
.about-con1 ul li .img-area{padding-bottom:10px;}
.about-con1 ul li .img-area img{width:150px;}
.about-con1 ul li .con-area{font-size:14px; padding:0px 30px;}
.about-con1 ul li .con-area h3{font-weight:bold;padding-bottom:15px; }
.about-con1 ul li .con-area h3.color1{color:#ff5252}
.about-con1 ul li .con-area h3.color2{color:#00bcd4}
.about-con1 ul li .con-area h3.color3{color:#5d2999}
.about-con1 ul li .con-area p{font-size:14px; line-height:1.5em; }





.about-con2{background:#fbf7ea;padding:40px 0px;}
.about-con2 p{text-align:Center;font-size:18px; line-height:1.5em; font-weight:bold; margin-bottom:20px;padding:0px 50px;}
.about-con2 .con-area{padding:0px 30px;}
.about-con2 .con-area .img-area{ text-align:center}
.about-con2 .con-area .img-area img{width:300px;}
.about-con2 .con-area .history{margin-top:7px; height:380px; overflow-x:hidden; overflow-y:auto; padding:0px 20px 0px 60px ;}
.about-con2 .con-area ul {border-left:1px solid #dac9be;}
.about-con2 .con-area ul li{ background:url(/image/sub/bl2.png) left 5px no-repeat; padding-left:20px; padding-bottom:15px;  font-size:14px; font-weight:bold; position:relative; left:-5px;}
.about-con2 .con-area ul li:last-child{height:auto;}
.about-con2 .con-area ul li strong{position:absolute; left:-45px}

.about-con3{padding:40px 30px; }
.about-con3 p{text-align:Center;font-size:18px; line-height:1.5em; font-weight:bold; margin-bottom:20px;}
.about-con3 p span{display:block; color:#d9b11f;padding-top:15px}
.about-con3 ul{overflow:hidden}
.about-con3 ul li{float:left; width:100%; margin-bottom:10px;}
.about-con3 ul li img{width:100%;display:block;}
.about-con3 ul li .con-area{height:220px; text-align:center; color:#fff; font-size:14px; overflow:hidden}
.about-con3 ul li .con-area.color1{background:#ba9c92}
.about-con3 ul li .con-area.color2{background:#81a3e9}
.about-con3 ul li .con-area.color3{background:#6abe9c}
.about-con3 ul li .con-area.color4{background:#e094cb}
.about-con3 ul li .con-area.color5{background:#cec13a}
.about-con3 ul li .con-area.color6{background:#dc9d43}
.about-con3 ul li .con-area h4{font-weight:bold;text-align:center; padding-bottom:15px; font-size:16px; color:#fff; padding-top:25px;}
.about-con3 ul li .con-area span{display:block; text-align:center; padding-bottom:15px; margin:0px 20px; line-height:1.5em}

@media screen and (min-width:450px){
.about-con3 ul li{width:50%;margin-bottom:10px;}
} 



strong.fc_red{color:red}
.fs_14{font-size:14px;}

/*신청서*/
.apply-area{padding-bottom:40px;}
.apply-area .apply-area{}
.apply-area .apply{background:#fff; box-sizing:border-box}
.apply-area .apply h3{text-align:center; padding:20px 10px; font-weight:bold; font-size:18px;}
.apply-area .apply p{text-align:center;padding-bottom:10px;font-size:14px;}

.apply-area .apply ul{width:100%;border-top:1px solid #eee; margin-bottom:15px;}
.apply-area .apply ul li{border:1px solid #eee; border-top:0px;padding:15px; font-size:14px; vertical-align:middle; text-align:left}
.apply-area .apply ul li.title{border-bottom:0px;padding-bottom:0px; font-weight:bold}
.apply-area .apply input{vertical-align:middle}  
.apply-area .apply input[type=text]{height:30px; line-height:30px; padding:3px; margin-right:5px; width:100%; box-sizing:border-box}
.apply-area .apply select{height:30px; line-height:30px; padding:3px; margin-right:5px; box-sizing:border-box;vertical-align:middle}
.apply-area .apply .phone input[type=text]{width:80px;}
.apply-area .apply .mail input[type=text]{width:110px;}
.apply-area .apply input[type=checkbox]{margin-right:2px; cursor:pointer}
.apply-area .apply label{display:inline-block;margin-right:5px; margin-bottom:15px; cursor:pointer}
.apply-area .apply a{display:block; width:158px; height:55px; border-radius:30px; text-align:center; line-height:55px; font-size:18px; color: #fff;font-weight:bold;background:#c73e42;
margin:20px auto 0px}
.apply-area .apply textarea{width:100%; padding:5px; box-sizing:border-box}
.apply-area .apply-area .off-btn{position: absolute;top:0px; right:5px;display:inline-block; background:#333;padding:10px; color:#fff ; font-size:20px;}
 