@import url("common.css");

/* CI */
.ci_con .grd_box{position:relative; margin-top:40px}
.ci_con .grd_box dl{position:relative; margin-bottom:25px}
.ci_con .grd_box dl:last-child{margin-bottom:0}
.ci_con .grd_box dt{width:100%; height:60px}
.ci_con .grd_box dl.one dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#036eb8+0,171c61+100 */
background: #036eb8; /* Old browsers */
background: -moz-linear-gradient(left,  #036eb8 0%, #171c61 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #036eb8 0%,#171c61 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #036eb8 0%,#171c61 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#036eb8', endColorstr='#171c61',GradientType=1 ); /* IE6-9 */}
.ci_con .grd_box dl.two dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#37bef0+1,0097e0+100 */
background: #37bef0; /* Old browsers */
background: -moz-linear-gradient(left,  #37bef0 1%, #0097e0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #37bef0 1%,#0097e0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #37bef0 1%,#0097e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#37bef0', endColorstr='#0097e0',GradientType=1 ); /* IE6-9 */}
.ci_con .grd_box dl.three dt{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#00407b+1,02224d+100 */
background: #00407b; /* Old browsers */
background: -moz-linear-gradient(left,  #00407b 1%, #02224d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #00407b 1%,#02224d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #00407b 1%,#02224d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407b', endColorstr='#02224d',GradientType=1 ); /* IE6-9 */
}
.ci_con .grd_box dd{font-family: 'Montserrat', sans-serif; font-weight:500; margin-top:8px; color:#333}





/* CONTACT */
    .person_con2 {background:#f3f9ff; padding:100px 0;}
    .person_con2 .personList {position:relative; overflow:hidden;}
    .person_con2 .personList dl {float:left; display:table; margin:0 2.34375% 2.34375% 0; width:48.828125%; background:#fff; padding:4% 10%; }
    .person_con2 .personList dl:nth-child(2) ~ dl {margin-bottom:0}
    .person_con2 .personList dl:nth-child(2n+1) {clear:both}
    .person_con2 .personList dl:nth-child(2n) {margin-right:0}
    .person_con2 .personList dl:last-child {margin-right:0}
    .person_con2 .personList dt {display:table-cell; vertical-align:middle; box-sizing:border-box; width:75px}
    .person_con2 .personList dt img {}
    .person_con2 .personList dd {display:table-cell; vertical-align:middle; box-sizing:border-box; width:calc(100% - 75px); padding:0 0 0 8%}
    .person_con2 .personList dd h6 {font-weight:700; font-size:1.25rem; color:#333; line-height:1; margin:0 0 10px 0; letter-spacing:0;}
    .person_con2 .personList dd p {font-family:'Montserrat', 'Noto Sans KR', sans-serif; color:#777; font-weight:300; word-break:break-all}



/* MG-X */
.meps_con p.su_t{color:#777; margin-top:20px; line-height: 26px; letter-spacing:0;}
.mg_con{position:relative; overflow: hidden; background:#f3f9ff; padding:100px 0 130px 0}
.mg_con .sub_title{font-weight:700}
.mg_con img{max-width:100%}
.mg_con .one{position:relative; overflow: hidden;  float:left; width:62.65625%}
.mg_con .two{position:relative; overflow: hidden;  float:right; width:32.734375%;}
.mg_con dl{position:relative; overflow: hidden; display: table; width: fit-content; margin:20px auto 0 auto; }
.mg_con dt{text-align:center; color:#ed1f24; font-weight:700; font-size:1.25rem; letter-spacing:0; line-height:100%; margin-bottom:10px;}
.mg_con .box1{ float:left; position: relative;  overflow: hidden; width:54.1147132170%; margin-left:3.61596009975%}
.mg_con .box2{ float:left; position: relative;  overflow: hidden; width:39.6508728180%; margin-left:2.49376558604%}


/************* SERVICE *************/
/* service */
.service_con{position:relative; }
    .service_con .service_top{background:url('/eng/service/img/service_img01.jpg') center right no-repeat; background-size:cover; padding:100px 5.46875%; margin-bottom:30px;}
    .service_con .sub_txt a{position:relative; font-family:'Montserrat', 'Noto Sans KR', sans-serif; font-weight:500; display: inline-block; margin-left:5px; text-decoration: underline; transition: all 0.3s ease; -o-transition: all 0.3s ease;  -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
    .service_con .sub_txt a:hover{color:#21a5de  }
    .service_con .sub_txt a img{margin-right:5px; vertical-align: middle;}

.service_con .service_cbox{position:relative; margin-top:100px}
.service_con .service_cbox .sub_title{color:#21a5de; font-weight:700; margin-bottom:40px }
.service_con .service_cbox dl{margin-bottom:20px; display:table;border-radius:30px; width:100%; position: relative; overflow: hidden; border:1px solid #ddd; box-sizing:border-box; }
.service_con .service_cbox dl:last-child{margin-bottom:0}
.service_con .service_cbox dt{display:table-cell; width:360px;  position: relative; overflow: hidden; ;border-radius:30px 0 0 30px }
.service_con .service_cbox dd{display:table-cell; padding:20px 50px 20px 50px;  vertical-align: middle;}

.service_con2{position:relative; }
.service_con2 .mimg{display:none;}
.service_con2 .in{position:relative; background:url('/eng/service/img/service_bg2.jpg') left center no-repeat, #f3f9ff;}
.service_con2 .sub_title{font-weight:700; margin-bottom:30px}
.service_con2 .se_box{position:relative; overflow: hidden; max-width:1280px; margin:0 auto; padding:90px 0}
.service_con2 ul{position:relative; overflow: hidden; margin-left:45% }
.service_con2 li{position:relative; overflow: hidden; margin-bottom:15px; }
.service_con2 li:last-child{margin-bottom:0}
.service_con2 li .num{position:relative; overflow: hidden; float:left; font-weight:700; line-height:22px; color:#21a5de; font-family: 'Montserrat', sans-serif; width:30px}
.service_con2 li .tx{position:relative; overflow: hidden; float:left; color:#777;  line-height:22px;  letter-spacing:0; width: calc(100% - 30px);}



.se_ti{font-size:1.5rem; color:#37aee1; font-weight:700; font-family: 'Montserrat', sans-serif; line-height:28px; margin-bottom:5px}
.se_ti2{font-size:0.9375rem; font-weight:700; font-family: 'Montserrat', sans-serif; color:#333; line-height:18px; margin-bottom:20px}




/*******************************************************************************
    @media 1024px~1310px
*******************************************************************************/
@media all and (max-width:1310px){




/* CONTACT */
.person_con2 .personList dl{padding:4% 8%}


/************* SERVICE *************/
/* service */
.service_con2 .se_box{width:94%; }


}



/*******************************************************************************
    @media 980~1024px
*******************************************************************************/
@media all and (max-width:1024px){


/* CONTACT */
.person_con2 .personList dl{padding:4% 4%}



}



/*******************************************************************************
    @media 768~980px
*******************************************************************************/
@media all and (max-width:980px){


/************* service *************/
/* service */
.service_con .service_top{padding:5rem 5.46875%; background-position: 40%;}


.service_con .service_cbox dt{width:300px}
.service_con .service_cbox dd{padding:10px 30px 10px 30px}

.service_con2 .se_box{padding:0}
.service_con2 ul{margin:20px 0 100px 0}
.service_con2 .mimg{display:block;}
.service_con2 .sub_title{margin-bottom:30px}
.service_con2 .in{background:none;}


/* CONTACT */
    .person_con2 {padding:80px 0}
    .person_con2 .personList {}
    .person_con2 .personList dl {}
    .person_con2 .personList dt {}
    .person_con2 .personList dt img {}
    .person_con2 .personList dd {}
    .person_con2 .personList dd h6 {}
    .person_con2 .personList dd p {}



/* MG-X */
.mg_con{padding:80px 0 100px 0}



}



/*******************************************************************************
    @media 640~768px
*******************************************************************************/
@media all and (max-width:768px){


.dot p{line-height:20px}


/************* service *************/
/* service */
.service_con .service_cbox{margin-top:60px}
.service_con .service_cbox .sub_title{margin-bottom:25px}
.service_con .service_cbox dt{width:280px}
.service_con .service_cbox dd .dot p{word-break: break-all;}

.service_con2 li{margin-bottom:10px}


/* MG-X */
.mg_con .one{float:none; width:100%}
.mg_con .two{float:none; width:100%; margin-top:50px}
.mg_con .two img{width:100%}




}



/*******************************************************************************
    @media ~680px
*******************************************************************************/
@media all and (max-width:680px){ 

.dot p:before{top:7px}

/************* service *************/
/* service */
.service_con .service_cbox dl{display:block; }
.service_con .service_cbox dt{width:100%; display:block; border-radius: 30px 30px 0 0;}
.service_con .service_cbox dt img{width:100%}
.service_con .service_cbox dd{display:block; padding:20px 30px }

.service_con2 li{margin-bottom:6px}

.se_ti{line-height:24px}
.se_ti2{margin-bottom:15px}



/* CONTACT */
    .person_con2 {padding:60px 0}
    .person_con2 .personList {}
    .person_con2 .personList dl {padding:20px 15px; margin:0 0 10px 0; width:100%; margin-bottom:10px !important}
    .person_con2 .personList dl:last-child {margin-bottom:0 !important}
    .person_con2 .personList dt {width:45px; }
    .person_con2 .personList dd {width:calc(100% - 45px); padding-left:20px}
    .person_con2 .personList dd h6 {margin:0 0 5px 0; font-size:1.1rem}
    .person_con2 .personList dd p {font-weight:400}




/* MG-X */
.mg_con{padding:60px 0 80px 0}
.mg_con dt{line-height:20px; text-align:left; word-break: initial;}
.mg_con dl{display: block; width: auto;}

.mg_con .two{margin-top:30px}



}


/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){





/************* service *************/
/* service */
.service_con .service_top{padding: 30px 20px 210px 20px; margin-bottom:20px; text-align:center; background:url('/eng/service/img/service_img01_m.jpg') no-repeat; background-size: cover; }
.service_con .sub_txt a{margin-left:0}

.service_con .service_cbox .sub_title{margin-bottom:20px}
.service_con .service_cbox dl{border-radius:20px}
.service_con .service_cbox dt{border-radius:20px 20px 0 0}
.service_con .service_cbox dd{padding:20px}

.service_con2 ul{margin:20px 0 60px 0}
.service_con2 li .num{line-height:18px}
.service_con2 li .tx{line-height:18px;}



}


/*******************************************************************************
    @media ~400px
*******************************************************************************/
@media all and (max-width:400px){





}