@charset "utf-8";


/****************************  
         페이지 타이틀 
***************************/

.section-Title {width:100%; margin:0 auto; text-align:center; padding:0px 0 0px 0px;}
.section-Title .Title-warp {width:100%; margin:0 auto; text-align:center; overflow:hidden; padding:0px;}
.section-Title .title {width:100%; margin:0 auto; text-align:center; font-size:2rem;font-weight:400;  padding:0px 0px 30px 0; line-height:35px;}
.section-Title .title2 {width:100%; margin:0 auto; text-align:center; font-size:2.2rem;font-weight:500;  padding:0px 0px 30px 0; line-height:35px;}
.section-Title .text2 {width:100%; margin:0 auto; text-align:center; padding:20px 0 20px 0px; line-height: 25px ;font-size: 1.7rem;font-weight: 400;}
.section-Title .text3 {width:100%; margin:0 auto; text-align:center; padding:0px 0 20px 0px; line-height: 25px ;font-size: 1.3rem; font-weight: 400;}
.section-Title .white {color:#fff}

.section-Title .Tline {width:500px; height:2px; margin:0 auto; padding: 0 0px 0 0;text-align:center;background:#ededed}
.section-Title .Bline {margin:0 0 50px 0}
.section-Title .Bline2 {margin:0 0 0px 0}
.section-Title .x-line {width:60px; height:3px; margin:0 auto; text-align:center;background-color: #2fa7d1;}
.section-Title .y-line {width:2px; height:40px; margin:0 auto; text-align:center;background-color: #2fa7d1;}






/************************** 
   Section2  Service
*************************/

.Service a { color: #5c646d;}
.Service .service_box {overflow: hidden; padding: 30px 20px 40px 20px; border: 1px solid rgba(0, 0, 0, 0.1) ; 
  -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; position: relative; text-align:center}

.Service .title-wrap {width: 100%; }
.Service .title-wrap  { width: 100%; padding:30px 0 30px 0}
.Service .title-wrap h2 { font-size: 2rem; font-weight:500; }
.Service .title-wrap p.Stitle { font-size: 1.3rem; font-weight:500; margin:30px 0 30px 0; line-height:30px}
.Service img.img-size { width: 90%; padding:30px 0 60px 0;}

.Service .service_box .ico { font-size: 2rem; opacity: 0.9; color: #fff; }
.Service .service_box h3 { font-size: 1.5rem; margin: 20px 0 20px 0;}
.Service .service_box p { font-size: 0.9rem; line-height:20px}

.Service .icon-warp {position: relative; width:100%;overflow:hidden;}
.Service .icon { width: 80px;  height: 80px;  margin: 0 auto; 
    -moz-transition: all 0.3s ease;   -o-transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;   transition: all 0.3s ease;   -webkit-border-radius: 50%;   -moz-border-radius: 50%;
    -ms-border-radius: 50%;   border-radius: 50%; }

.Service .service_box .bg-overlay{ 
  -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%);
  -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; opacity: 0;}



/************************** 
     Section3 advantage
*************************/



.advantage .box { padding: 0px 0px 0px 0px; position: relative; background:#ffffff;border: 1px solid #ebebeb; }
.advantage .space {min-height:1px; padding: 0 20px 0 20px;}

.advantage .icon {line-height: 1.3; position: relative;  margin: 0 auto; width: 130px; height: 130px;background: #f2f6f8;
    -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}

.advantage .icon:after { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
      content: '';   border: 2px solid rgba(255, 255, 255, 1);
      -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%;  border-radius: 50%; }

.advantage .icon span {font-size: 40px;}

.advantage .box .text-warp {width:100%;height:100%; padding: 30px 15px 50px 15px; text-align:center}
.advantage .text-warp h2.title {font-size:1.2rem; font-weight:400; margin:0px 0 20px 0;}
.advantage .text-warp p {font-size:0.9rem; line-height:20px; }

.advantage .img-box {position: relative;margin:0 auto; text-align:center; padding:0 0 0px 0; width: 100%; height:180px}
.advantage .img-box img {width: 100%; }


/************************** 
     slogan
**************************/

#Slogan.section {padding:120px 0 120px 0}
#Slogan {position: relative; }
#Slogan i {font-size: 2rem; }
#Slogan img {width:35px; height:auto; }
#Slogan p.img {padding:0px 0 0px 0; }
#Slogan h3.tit {margin: 10px 0px 10px 0; padding: 0px; font-size: 2rem; line-height: 45px;font-weight: 500;  color:#ffffff;}
#Slogan p.txt {margin: 30px 0px 0px 0; padding: 0px; font-size: 1rem; font-weight: 300; color:#fff9f3; line-height: 1.5;}


#Slogan .heading {width:100%;color: #fff;position: relative;	z-index: 1; margin:0 auto; text-align:center}
#Slogan .heading h1{color: #ffffff;font-weight: 700;font-size: 62px;text-transform: uppercase;}
#Slogan .heading p {	font-size: 18px;	padding: 20px 0px;}
#Slogan .heading h3 {font-size: 2rem; color: #ffffff;font-weight: 500;}
#Slogan .heading h3 .text-slider {font-size: 2rem; color: #ffffff;font-weight: 500;}


#Slogan .home-text-wrapper {position:relative;display: table; width: 100%; height: 100%;text-align: center; z-index: 2;}
#Slogan .text-slider-items {display: none;}
/**** 서브페이지 슬라이드 텍스트 위치 조정*********/
.visual-sub #home .home-text-wrapper {display: table; width: 100%; height: 100%;  position: absolute;top: -100px;right: 0; left: 0; bottom: 0; text-align: center; z-index: 2;}





/************************** 
     footer slogan
**************************/

#Slogan2.section {padding:60px 0 60px 0}
#Slogan2 {position: relative; }
#Slogan2  h3.tit { padding: 0px 0 40px 0;font-size: 2.5rem; font-weight: 500; line-height:50px;color: #fff; }
#Slogan2  p { padding: 0px 0 70px 0; line-height: 25px;font-size: 1.1rem; font-weight: 300;color: #fff; }
#Slogan2 .button { width:100%; }


/************************** 
     slogan
**************************/
#Slogan3.section {padding:100px 0 100px 0}
#Slogan3 {position: relative; }
#Slogan3 h3 {font-size:2rem; color:#fff; line-height:55px;}
#Slogan3 p {font-size:1.2rem; color:#fff}
#Slogan3 img {width:100%;}



/************************** 
          footer 
**************************/
#footer .footer-top { background: #253135; padding: 30px 0; }
#footer .footer-top .logo {width:23%;  color: #69818c; }
#footer .footer-top .logo img { width:80%; }
#footer .footer-top .copy {width:77%;  color: #69818c; font-size: 14px; }
#footer .footer-top .copy p {line-height: 1.7; margin: 8px 0 0 0; color: #647482; }
#footer .footer-bottom {padding: 43px 0; background: #2c383d; }
#footer .footer-hr { border-color: #fff; margin: 40px 0 55px; opacity: .10; }
#footer .info-con { padding: 15px; }
#footer .info-con .title {font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 35px; color: #fff; }
#footer .info-con .Links li {width: 50%;  padding: 0 15px 0 0;   float: left; margin-bottom: 18px; }
#footer .info-con a {color: #8798a0; }
#footer .info-con a:hover, .widget-footer .menu li a:focus {color: #647482; }
#footer .info-con.cmenu-1col .menu li {width: 100%; }
#footer .info-con p { margin-bottom: 20px; line-height: 1.7; padding: 0 0px 0 0; color: #8798a0; }
#footer .info-con .fsocial { padding: 0 15px 0 0; display: table; }
#footer .info-con .fsocial li { float: left; margin-right: 22px; font-size: 17px; }
#footer .info-con .fsocial li:last-child { margin-right: 0; }
#footer .info-con .fsocial li a {color: #8798a0; }
#footer .info-con .fsocial li a:hover, .fsocial li a:focus {color: #FFF; }
#footer .info li {width: 100%; line-height: 25px; margin-bottom: 10px;color: #8798a0;}
#footer .info li .icon {width:5%;float: left;margin-right:10px;}
#footer .info li .text {width:90%;float: left;margin-bottom: 10px;}
#footer .info i {margin-right:10px;}


/************************** 
          폼메일 팝업창
**************************/
.layer {left: 0px; top: 0px; width: 100%; height: 100%; display: none; position: fixed; z-index: 999; _position: absolute;}
.layer .bg {background: rgb(0, 0, 0); left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; opacity: 0.8;}
.layer .pop-layer {	display: block;}
#layer2 {overflow-y : auto; height:83%;  z-index:1004}
.pop-layer {border: 5px solid rgb(255, 255, 255); border-image: none; left: 50%; top: 13%; width: 710px; height: auto; display: none; position: absolute; z-index: 10; background-color: rgb(255, 255, 255);}


/******* POP-layer / contact us  폼메일 ***************/
.pop-layer .pop-container {	padding: 5px 15px 50px 15px; overflow: hidden;}
.pop-layer p {color: rgb(102, 102, 102); line-height: 25px;}
.pop-layer .tit-warp {margin:0 auto; text-align:center;padding:50px 0 20px 0; width: 95%;  overflow: hidden; border-bottom-color: rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: solid; }
.pop-layer .tit { width: 30%; float:left; margin:0 auto; text-align: left;  font-size: 1.8rem; font-weight: 700; }
.pop-layer .text {width:70%;height:100%; margin:0 auto; text-align:left; padding:0px 0 0 0; float:left;color:rgb(102, 102, 102); font-size: 0.8rem; }
.pop-layer .btn-r {top: 0px; right: 0px; position: absolute;}



.from-mail {width:100%; height: 100%; padding:0 0 0px 0;  margin:0 auto; text-align:center; }

.from-mail .pop-mail {width:100%; margin:0 auto;text-align:center;}
.from-mail .mail-container {width:100%; margin:0 auto; padding:0px; text-align:center;}


.from-mail .policy-warp {width:100%; text-align:center;padding:0px 0 0px 0;}
.from-mail .policy {margin:0 auto; text-align:center; width: 90%; background: rgb(250, 250, 250); 
padding: 15px; border: 1px solid rgb(204, 204, 204); border-image: none; height: 150px; color: rgb(102, 102, 102); line-height: 20px; 
font-size: 13px; overflow-y: scroll; text-align:left;}



.from-mail .agree {text-align: right; margin: 10px 60px 10px 0;}
.from-mail .agree span {font-size: 10px; margin: 10px 0px 0px 0;}
.from-mail .agree2 {text-align: right; margin: 10px 60px 10px 0;}
.from-mail .agree2 span {font-size: 10px; margin: 10px 0px 0px 0;}


.from-mail textarea { margin: 0px 0px 0px 0; padding: 8px; width: calc(100% - 10px);max-height:350px; min-height:180px;max-width: calc(100% - 10px);min-width: calc(100% - 10px);}
.from-mail textarea {border: 1px solid #eaeaea; border-image: none; background-color:#f5f5f4;border-radius:.25rem}
.from-mail textarea:hover {background-color: #ffffff;}
.from-mail textarea:focus {border-color: #d1d1d1;  background-color: #ffffff;}

.from-mail input.chk {width: 20px; margin:0 10px 0 0}



.from-mail input { margin: 0px 0px 0 0; padding: 0px 10px 0px 60px; width: calc(100% - 10px); height: 100%;}
.from-mail input {box-shadow: none;background-color:#f5f5f4;border: 1px solid #eaeaea;background-repeat: no-repeat;border-radius:.25rem}
.from-mail input:hover { background-color: #ffffff;}
.from-mail input:focus { border-color: #d1d1d1;  background-color: #ffffff;}
.from-mail input:focusout { border-color: #d1d1d1;  background-color: red;}



.from-mail .m-warp1 {width:40%; height:100%; margin:0 auto; padding:0;}
.from-mail .m-warp2 {width:5%; height:100%; margin:0 auto;padding:10px 0 0 0; font-size:20px;}
.from-mail .m-warp3 {width:55%; height:100%; margin:0 auto;padding:0; }

.from-mail input.mail1 {  width: calc(100% - 10px); height: 100%;}
.from-mail input.mail2 {  width: calc(100% - 10px); height: 100%; padding: 0px 0px 0px 20px;}

.from-mail .btn-warp {	margin: 30px 0px 0px; overflow:hidden; text-align: center; }

.from-mail div.input-icons {position: relative;  width: 90%;   height: 65px;   padding:20px 0px 0 0; margin:0 auto;}
.from-mail div.textarea {position: relative;  width: 90%;    padding:20px 0px 0 0; margin:0 auto;}
.input-icons i { position: absolute; height: 45px; left:5px; padding: 13px 0 0 13px; color:#ffffff;  font-size:1.2rem; min-width: 45px; text-align: left; border-radius:.25rem} 



.from-mail input[type=checkbox] { display: none; }
.from-mail input[type=checkbox] + label{
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 35px;  
    margin-right: 0px;  
    font-size: 13px;
}
.from-mail input[type=checkbox]+ label:before {     
    content: "";  
    display: inline-block;  
    width: 20px;  
    height: 20px;  
    margin-right: 10px;  
    position: absolute;  
    left: 0;  
    bottom: 1px;  
    background-color: #f0f0f0;  
    border-radius: 2px; 
	border: 1px solid #dddddd;
   /* box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  */
}
.from-mail input[type=checkbox]:checked + label:before { 
    content: "\2713";  /* 체크모양 */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 18px; 
    font-weight:800; 
    color: #fff;  
    background:#2f87c1;
    text-align: center;  
    line-height: 18px;  
} 



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





/************************** 
     slogan
**************************/

#Slogan.section {padding:80px 0 80px 0}
#Slogan {position: relative; }
#Slogan i {font-size: 2rem; }
#Slogan img {width:35px; height:auto; }
#Slogan p.img {padding:0px 0 0px 0; }
#Slogan h3.tit {margin: 20px 0px 30px 0; padding: 0px; font-size: 2.5rem; line-height: 50px;font-weight: 500;  color:#ffffff;}
#Slogan p.txt {margin: 30px 0px 0px 0; padding: 0px; font-size: 1.3rem; font-weight: 300; color:#fff9f3; line-height: 1.5;}
#Slogan iframe {transition: opacity 500ms ease-in-out;transition-delay: 250ms;}

/************************** 
     footer slogan
**************************/

#Slogan2.section {padding:60px 0 60px 0}
#Slogan2 {position: relative; }
#Slogan2  h3.tit { padding: 0px 0 40px 0;font-size: 3rem; font-weight: bold; line-height:60px;color: #fff; }
#Slogan2  p { padding: 0px 0 70px 0; line-height: 25px;font-size: 1.1rem; font-weight: 300;color: #fff; }
#Slogan2 .button { width:100%; }


/************************** 
     slogan
**************************/
#Slogan3.section {padding:80px 0 80px 0}
#Slogan3 {position: relative; }
#Slogan3 h3 {font-size:3rem; color:#fff; line-height:60px;}
#Slogan3 p {font-size:1.2rem; color:#fff}
#Slogan3 img {width:100%;}


}




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


/************************** 
     Section1 about
*************************/

.content-04 .pr-50 {padding:0 20px 0 0;}
.content-04 p.small-title { margin-bottom: 10px; font-weight:400; color:#838383; }
.content-04 h1 { font-size: 2rem; line-height:40px; margin-bottom: 40px;}
.content-04 h1.title2 {font-size: 2rem; margin-bottom: 25px; line-height:35px;} /* sub page title */
.content-04 .image-warp   { position: relative;  width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px} 
.content-04 .l-image { margin-top: 90px; }
.content-04 .img { margin-bottom: 30px; }
.content-04 .slider-box {position: relative; width:100%; height: 100%;}
.content-04 img {width:100%; height: 100%;}




/************************** 
     Section3 advantage
*************************/
.advantage .col-md-3 {-ms-flex:0 0 50%;        flex:0 0 50%;        max-width:50%}
.advantage .col-md-3:nth-child(3) {margin:20px 0 0 0}
.advantage .col-md-3:nth-child(4) {margin:20px 0 0 0}
.advantage .box { padding: 30px 10px 30px 10px; position: relative; background:#ffffff}
.advantage .space {min-height:1px; padding: 0 10px 0 10px;}

.advantage .icon {line-height: 1.3; position: relative;  margin: 0 auto; width: 130px; height: 130px;background: #f2f6f8;
    -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}

.advantage .icon:after { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
      content: '';   border: 2px solid rgba(255, 255, 255, 1);
      -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%;  border-radius: 50%; }

.advantage .icon span {font-size: 40px;}

.advantage .box .text-warp {width:100%;height:100%; padding: 0px 0px 0px 0px; text-align:center}
.advantage .text-warp h2.title {font-size:1.2rem; font-weight:400; margin:10px 0 20px 0;}
.advantage .text-warp p {font-size:0.9rem; line-height:20px; }

.advantage .img-box {position: relative;margin:0 auto; text-align:center; padding:0 0 20px 0; width: 90%; }
.advantage .img-box img {width: 100%; }





/************************** 
     slogan
**************************/

#Slogan.section {padding:60px 0 60px 0}
#Slogan {position: relative; }
#Slogan i {font-size: 2rem; }
#Slogan img {width:35px; height:auto; }
#Slogan p.img {padding:0px 0 0px 0; }
#Slogan h3.tit {margin: 20px 0px 30px 0; padding: 0px; font-size: 2rem; line-height: 50px;font-weight: 500;  color:#ffffff;}
#Slogan p.txt {margin: 30px 0px 0px 0; padding: 0px; font-size: 1rem; font-weight: 300; color:#fff9f3; line-height: 1.5;}


/************************** 
     footer slogan
**************************/

#Slogan2.section {padding:40px 0 40px 0}
#Slogan2 {position: relative; }
#Slogan2  h3.tit { padding: 0px 0 30px 0;font-size: 2.5rem; font-weight: bold; line-height:60px;color: #fff; }
#Slogan2  p { padding: 0px 0 50px 0; line-height: 25px;font-size: 1rem; font-weight: 300;color: #fff; }
#Slogan2 .button { width:100%; }


/************************** 
     slogan
**************************/
#Slogan3.section {padding:60px 0 60px 0}
#Slogan3 {position: relative; }
#Slogan3 h3 {font-size:2.4rem; color:#fff; line-height:55px;}
#Slogan3 p {font-size:1rem; color:#fff}
#Slogan3 img {width:100%;}





/************************** 
          footer 
**************************/
#footer .footer-top { background: #253135; padding: 20px 0; }
#footer .footer-top .logo {width:35%;  color: #69818c; }
#footer .footer-top .logo img { width:80%; }
#footer .footer-top .copy {width:65%;  color: #69818c; font-size: 14px; }
#footer .footer-top .copy p {line-height: 1.7; margin: 10px 0 0 0; color: #647482; }
#footer .footer-bottom {padding: 20px 0; background: #2c383d; }
#footer .footer-hr { border-color: #fff; margin: 40px 0 55px; opacity: .10; }
#footer .info-con { padding: 15px; text-align:left}
#footer .info-con .title {font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 25px; color: #fff; }
#footer .info-con .Links li {width: 50%;  padding: 0 15px 0 0;   float: left; margin-bottom: 18px; }
#footer .info-con a {color: #8798a0; }
#footer .info-con a:hover, .widget-footer .menu li a:focus {color: #647482; }
#footer .info-con.cmenu-1col .menu li {width: 100%; }
#footer .info-con p { margin-bottom: 20px; line-height: 1.7; padding: 0 0px 0 0; color: #8798a0; }
#footer .info-con .fsocial { padding: 0 15px 0 0; display: table; }
#footer .info-con .fsocial li { float: left; margin-right: 22px; font-size: 17px; }
#footer .info-con .fsocial li:last-child { margin-right: 0; }
#footer .info-con .fsocial li a {color: #8798a0; }
#footer .info-con .fsocial li a:hover, .fsocial li a:focus {color: #FFF; }
#footer .info li {width: 100%; line-height: 25px; margin-bottom: 10px;color: #8798a0;}
#footer .info li .icon {width:5%;float: left;margin-right:10px;}
#footer .info li .text {width:90%;float: left;margin-bottom: 10px;}
#footer .info i {margin-right:10px;}



/******* POP-layer / contact us  폼메일 ***************/
.from-mail .mail-container {width:90%; margin:0 auto; padding:0px; text-align:center; overflow:hidden; }

}




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




/************************** 
     Section1 about
*************************/
.content-04 .pr-50 {padding:0 0px 0 0;}
.content-04 .con {text-align:center}



/************************** 
     slogan
**************************/

#Slogan.section {padding:60px 0 60px 0}
#Slogan {position: relative; }
#Slogan i {font-size: 2rem; }
#Slogan img {width:35px; height:auto; }
#Slogan p.img {padding:0px 0 0px 0; }
#Slogan h3.tit {margin: 20px 0px 30px 0; padding: 0px; font-size: 2rem; line-height: 50px;font-weight: 500;  color:#ffffff;}
#Slogan p.txt {margin: 30px 0px 0px 0; padding: 0px; font-size: 1rem; font-weight: 300; color:#fff9f3; line-height: 1.5;}


/************************** 
     footer slogan
**************************/

#Slogan2.section {padding:40px 0 40px 0}
#Slogan2 {position: relative; }
#Slogan2  h3.tit { padding: 0px 0 30px 0;font-size: 2.5rem; font-weight: bold; line-height:60px;color: #fff; }
#Slogan2  p { padding: 0px 0 50px 0; line-height: 25px;font-size: 1rem; font-weight: 300;color: #fff; }
#Slogan2 .button { width:100%; }


/************************** 
     slogan
**************************/
#Slogan3.section {padding:60px 0 60px 0}
#Slogan3 {position: relative; }
#Slogan3 h3 {font-size:2.4rem; color:#fff; line-height:55px;}
#Slogan3 p {font-size:1rem; color:#fff}
#Slogan3 img {width:100%;}



/************************** 
          footer 
**************************/
#footer .footer-top { background: #253135; padding: 20px 0; }
#footer .footer-top .logo {width:35%;  color: #69818c; }
#footer .footer-top .logo img { width:80%; }
#footer .footer-top .copy {width:65%;  color: #69818c; font-size: 14px; }
#footer .footer-top .copy p {line-height: 1.7; margin: 5px 0 0 0; color: #647482; }
#footer .footer-bottom {padding: 20px 0; background: #2c383d; }
#footer .footer-hr { border-color: #fff; margin: 40px 0 55px; opacity: .10; }
#footer .info-con { padding: 15px; }
#footer .info-con .title {font-size: 16px; font-weight: 600; margin-top: 0; margin-bottom: 25px; color: #fff; }
#footer .info-con .Links li {width: 50%;  padding: 0 15px 0 0;   float: left; margin-bottom: 18px; }
#footer .info-con a {color: #8798a0; }
#footer .info-con a:hover, .widget-footer .menu li a:focus {color: #647482; }
#footer .info-con.cmenu-1col .menu li {width: 100%; }
#footer .info-con p { margin-bottom: 20px; line-height: 1.7; padding: 0 0px 0 0; color: #8798a0; }
#footer .info-con .fsocial { padding: 0 15px 0 0; display: table; }
#footer .info-con .fsocial li { float: left; margin-right: 22px; font-size: 17px; }
#footer .info-con .fsocial li:last-child { margin-right: 0; }
#footer .info-con .fsocial li a {color: #8798a0; }
#footer .info-con .fsocial li a:hover, .fsocial li a:focus {color: #FFF; }
#footer .info li {width: 100%; line-height: 25px; margin-bottom: 10px;color: #8798a0;}
#footer .info li .icon {width:5%;float: left;margin-right:10px;}
#footer .info li .text {width:90%;float: left;margin-bottom: 10px;}
#footer .info i {margin-right:10px;}




}




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


/****************************  
         페이지 타이틀 
***************************/

.section-Title {width:100%; margin:0 auto; text-align:center; padding:0px 0 0px 0px;}
.section-Title .Title-warp {width:100%; margin:0 auto; text-align:center; overflow:hidden; padding:0px;}
.section-Title .title {width:100%; margin:0 auto; text-align:center; font-size:1.8rem;font-weight:500;  padding:0px 0px 15px 0; line-height:35px;}
.section-Title .title2 {width:100%; margin:0 auto; text-align:center; font-size:0.1rem;font-weight:500;  padding:0px 0px 30px 0; line-height:35px;}
.section-Title .text2 {width:100%; margin:0 auto; text-align:center; padding:20px 0 20px 0px; line-height: 25px ;font-size: 1.7rem;font-weight: 400;}
.section-Title .text3 {width:100%; margin:0 auto; text-align:center; padding:0px 0 20px 0px; line-height: 25px ;font-size: 1rem; font-weight: 400;}
.section-Title .white {color:#fff}

.section-Title .Tline {width:500px; height:2px; margin:0 auto; padding: 0 0px 0 0;text-align:center;background:#ededed}
.section-Title .Bline {margin:0 0 15px 0}
.section-Title .Bline2 {margin:0 0 0px 0}
.section-Title .x-line {width:60px; height:3px; margin:0 auto; text-align:center;background-color: #2fa7d1;}
.section-Title .y-line {width:2px; height:40px; margin:0 auto; text-align:center;background-color: #2fa7d1;}


/************************** 
     Section1 about
*************************/

.content-04 .pr-50 {padding:0;}
.content-04 .con  { text-align:center}
.content-04 p.small-title { margin-bottom: 10px; font-weight:400; color:#838383; }
.content-04 h1 { font-size: 2rem; line-height:40px; margin-bottom: 40px;}
.content-04 h1.title2 {font-size: 2rem; margin-bottom: 25px; line-height:35px;} /* sub page title */
.content-04 .image-warp   { position: relative;  width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px} 
.content-04 .l-image { margin-top: 90px; }
.content-04 .img { margin-bottom: 30px; }
.content-04 .slider-box {position: relative; width:100%; height: 100%;}
.content-04 img {width:100%; height: 100%;}






/************************** 
   Section2  case-count
*************************/
.case-count {padding:50px 0; margin:0 auto; text-align:center;}
.case-count .stat-count {width:70%; margin:0 auto; text-align:center;}
.case-count .stat-count .num {float:left; width:75%;}


.case-count .col-md-4 { position:relative; margin:0 0 40px 0}
.case-count .col-md-4:last-child {margin:0 0 0px 0}


.case-count .line {border-radius: 50%;height: 8px;width: 8px;display: inline-block; margin-top: 20px;position: relative;background:#fff}
.case-count .line::before {content: '';position: absolute;left: 15px;height: 2px;width: 100px;bottom: 3px; background:#fff}
.case-count .line::after {content: '';	position: absolute;	right: 15px;height: 2px;width: 100px;bottom: 3px;background:#fff}

.case-count .stat-count span { font-family: 'Libre Caslon Text', serif; font-size: 2.8rem; font-weight:500; line-height: 1; padding: 0; margin: 0;color: #ffffff;}
.case-count .stat-count span.counter {padding:0 0 0 10px }

.case-count .stat-count .num-text {float:left; width:25%;text-align:left; font-size: 1.4rem; line-height: 1; padding: 0; margin: 0;color: #ffffff;}
.case-count .stat-count .num-text p {margin:25px 0 0 10px; font-size:1.3rem;font-weight:500; color:#838383;}
.case-count .stat-count .num-text p.t2 {margin:25px 0 0 0px; font-size:1.3rem;font-weight:500; color:#838383;}


.case-count .text-warp {width:90%;margin:0 auto; text-align:center;}
.case-count .text-warp h3 {padding: 20px 0 20px 0;margin: 0; line-height: 1; font-size: 1.2rem; color:#ffffff;}
.case-count .text-warp h3 i {  padding-right: 10px; border-right: 1px solid #fff; margin-right: 10px;color:#01bacf;}
.case-count .text-warp p {  padding: 0;   margin: 0;  color: #ffffff;}




/************************** 
     Section4 Services
*************************/

.Services .col-md-4 {margin:0 0 20px 0}

.Services .box {  position: relative; background: #fff;  padding: 40px 20px 20px 20px;  margin: 0;
   border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
  -webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.04);
  -webkit-transition: all 300ms linear 0s;
  -o-transition: all 300ms linear 0s;
  transition: all 300ms linear 0s;}
.Services .box:before {content: '';display: block; position: absolute;top: 0; right: 0; left: 0; bottom: 0;
    background: url("img/pattern2.png") no-repeat center center; opacity: 0; 
	-webkit-transition: all 300ms linear 0s;
    -o-transition: all 300ms linear 0s;
    transition: all 300ms linear 0s;}
.Services .box:hover:before, .Services .box:focus:before { opacity: 0.00; }

.Services .info {padding:0px 0 0px 0;}
.Services .info, .Services .button{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);
transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1)}


.Services .box:hover .info {padding:0px 0 0px 0;-webkit-transform:translate3d(0,0%,0);-moz-transform:translate3d(0,0%,0);
transform:translate3d(0,0%,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1);}

.Services .box:hover .button {padding:0px 0 0px 0;-webkit-transform:translate3d(0,0%,0);-moz-transform:translate3d(0,0%,0);
transform:translate3d(0,0%,0);transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.7,1,.7,1);}



.Services .button {margin:20px 0 20px 0; -webkit-transition: all 0ms linear 0s;  -o-transition: all 0ms linear 0s;  transition: all 0ms linear 0s;opacity: 1;}
.Services .box:hover .button { -webkit-transition: all 0ms linear 0s; -o-transition: all 0ms linear 0s; transition: all 0ms linear 0s;opacity: 1;}
.Services .img-box {position: relative;margin:0 auto; text-align:center; padding:0 0 40px 0; width: 85%; }
.Services .box:hover img {transform: scale(1.0); }





/************************** 
     Section3 advantage
*************************/
.advantage .col-md-3 {-ms-flex:0 0 100%;        flex:0 0 100%;        max-width:100%}

.advantage .col-md-3:nth-child(1) {margin:0px 0 0 0}
.advantage .col-md-3:nth-child(2) {margin:30px 0 0 0}
.advantage .col-md-3:nth-child(3) {margin:30px 0 0 0}
.advantage .col-md-3:nth-child(4) {margin:30px 0 0 0}

.advantage .box { padding: 30px 10px 30px 10px; position: relative; background:#ffffff}
.advantage .space {min-height:1px; padding: 0 10px 0 10px;}

.advantage .icon {line-height: 1.3; position: relative;  margin: 0 auto; width: 130px; height: 130px;background: #f2f6f8;
    -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}

.advantage .icon:after { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
      content: '';   border: 2px solid rgba(255, 255, 255, 1);
      -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%;  border-radius: 50%; }

.advantage .icon span {font-size: 40px;}

.advantage .box .text-warp {width:100%;height:100%; padding: 30px 0px 0px 0px; text-align:center}
.advantage .text-warp h2.title {font-size:1.4rem; font-weight:400; margin:10px 0 20px 0;}
.advantage .text-warp p {font-size:0.9rem; line-height:20px; }

.advantage .img-box {position: relative;margin:0 auto; text-align:center; padding:0 0 20px 0; width: 90%; }
.advantage .img-box img {width: 100%; }







/************************** 
     slogan
**************************/

#Slogan.section {padding:40px 0 40px 0}
#Slogan {position: relative; }
#Slogan i {font-size: 1.8rem; }
#Slogan img {width:35px; height:auto; }
#Slogan p.img {padding:0px 0 0px 0; }
#Slogan h3.tit {margin: 10px 0px 20px 0; padding: 0px; font-size: 1.5rem; line-height: 40px;font-weight: 500;  color:#ffffff;}
#Slogan p.txt {margin: 30px 0px 0px 0; padding: 0px; font-size: 1rem; font-weight: 300; color:#fff9f3; line-height: 1.4;}


/************************** 
     footer slogan
**************************/

#Slogan2.section {padding:40px 0 40px 0}
#Slogan2 {position: relative; }
#Slogan2  h3.tit { padding: 0px 0 20px 0;font-size: 1.6rem; font-weight: bold; line-height:35px;color: #fff; }
#Slogan2  p { padding: 0px 0 50px 0; line-height: 25px;font-size: 1rem; font-weight: 300;color: #fff; }
#Slogan2 .button { width:100%; }


/************************** 
     slogan
**************************/
#Slogan3.section {padding:40px 0 40px 0}
#Slogan3 {position: relative; }
#Slogan3 h3 {font-size:2.8rem; color:#fff; line-height:55px;}
#Slogan3 p {font-size:1rem; color:#fff}
#Slogan3 img {width:100%;}




/************************** 
          footer 
**************************/
#footer .footer-top { background: #253135; padding: 20px 0; }
#footer .footer-top .logo {width:100%;  color: #69818c; }
#footer .footer-top .logo img { width:55%; }
#footer .footer-top .copy {width:100%;  color: #69818c; font-size: 0.9rem; }
#footer .footer-top .copy p {line-height: 1.7; margin: 8px 0 0 0; color: #647482; }
#footer .footer-bottom {padding: 10px 0; background: #2c383d; }

#footer .info-con { padding: 15px; }
#footer .info-con .title {font-size: 1.2rem; font-weight: 600; margin-top: 0; margin-bottom: 20px; color: #fff; }
#footer .info-con .Links li {width: 50%;  padding: 0 15px 0 0;   float: left; margin-bottom: 18px; }
#footer .info-con a {color: #8798a0; }
#footer .info-con a:hover, .widget-footer .menu li a:focus {color: #647482; }
#footer .info-con.cmenu-1col .menu li {width: 100%; }
#footer .info-con p { margin-bottom: 20px; line-height: 1.7; padding: 0 0px 0 0; color: #8798a0; }

#footer .info li {width: 100%; line-height: 25px; margin-bottom: 8px;color: #8798a0;}
#footer .info li .icon {width:5%;float: left;margin-right:10px;}
#footer .info li .text {width:90%;float: left;margin-bottom: 10px;}
#footer .info i {margin-right:10px;}







/******* 폼메일 팝업창 ***************/
.layer {left: 0px; top: 0px; width: 100%; height: 100%; display: none; position: fixed; z-index: 999; _position: absolute;}
.layer .bg {background: rgb(0, 0, 0); left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; opacity: 0.8;}
.layer .pop-layer {	display: block;}
#layer2 {overflow-y : auto; height:100%;  z-index:1004}
.pop-layer {border: 5px solid rgb(255, 255, 255); border-image: none; left: 50%; top: 0%; width: 100%; height: auto; display: none; position: absolute; z-index: 10; background-color: rgb(255, 255, 255);}
.pop-layer .pop-container {	padding: 5px 5px 60px 5px; overflow: hidden;}
.pop-layer p {color: rgb(102, 102, 102); line-height: 25px;}
.pop-layer .tit-warp {margin:0 auto; text-align:center;padding:100px 0 10px 0; width: 95%;  overflow: hidden; border-bottom-color: rgb(221, 221, 221); border-bottom-width: 1px; border-bottom-style: solid; }
.pop-layer .tit { width: 100%; float:left; margin:0 auto; text-align: center;  font-size: 1.8rem; font-weight: 700; }
.pop-layer .text {width:100%;height:100%; margin:0 auto; text-align:center; padding:20px 0 10px 0; float:left;color:rgb(102, 102, 102); font-size: 0.9rem; line-height:20px}


.from-mail .policy {margin:0 auto; text-align:center; margin:20px 0 0 0; width: 100%; background: rgb(250, 250, 250); padding: 15px; border: 1px solid rgb(204, 204, 204); 
border-image: none; height: 150px; color: rgb(102, 102, 102); line-height: 20px; font-size: 12px; overflow-y: scroll; text-align:left;}

.from-mail .info {width:100%; margin:0 auto; text-align:center; font-size:18px; padding:30px 0 10px 0; line-height:20px;}
.from-mail .agree2 {text-align: right; margin: 10px 30px 30px 0;}
.from-mail .agree2 span {font-size: 12px; margin: 10px 0px 0px 0;}
.from-mail .m-warp1 {width:45%; height:100%; margin:0 auto; padding:0;}
.from-mail .m-warp2 {width:7%; height:100%; margin:0 auto;padding:10px 0px 0 0px; font-size:16px;text-align:center}
.from-mail .m-warp3 {width:48%; height:100%; margin:0 auto;padding:0; }
.from-mail input { margin: 0px 0px 0 0; padding: 0px 10px 0px 50px; width: calc(100% - 0px); height: 100%; font-size: 14px;}
.from-mail .btn-warp {	margin: 30px 0px 50px; text-align: center;}

.from-mail textarea { margin: 0px 0px 0px 0; padding: 8px; width: calc(100% - 10px);max-height:350px; min-height:180px;
max-width: calc(100% - 10px);min-width: calc(100% - 10px);}




.from-mail div.input-icons {position: relative;  width: 100%;   height: 55px;   padding:15px 0px 0 0; margin:0 auto; }
.from-mail div.textarea {position: relative;  width: 100%;    padding:20px 0px 0 0; margin:0 auto;}
.input-icons i { position: absolute; left:0px;height: 40px;  padding: 12px 0 0px 12px; color:#ffffff;  font-size:1.1rem; min-width: 40px; text-align: left; } 



.from-mail input.mail1 {  width: calc(100% - 0px); height: 100%;}
.from-mail input.mail2 {  width: calc(100% - 0px); height: 100%; padding: 0px 0px 0px 20px;}


/******* contact us  폼메일 ***************/

.from-mail .mail-container {width:100%; margin:0 auto; padding:0px; text-align:center; overflow:hidden; }

}