@charset "utf-8";

/* common Style */
*{box-sizing: border-box;}
body{position:relative;}
.clearfix {width:100%;}
.clearfix:after {content:"";display:block;visibility:hidden;clear:both;}
#body_layout{margin-top: -90px}
#mcont_txt{overflow: hidden;position: relative;width: 100%}
#mcont_txt *{font-family: 'ttum';word-break: keep-all;}
#mcont_txt .body_wrap{text-align: left}
#op_layout,
#op_layout.on{display:inline-block;}

/* 비주얼 */
#mvisual{position: relative;background: #0c76a0}
#mvisual .sliderBox{position:relative;width:100%;height:100%;}
#mvisual .sliderBox ul{position:relative;width:100%;height:100%;}
#mvisual .sliderBox ul li{overflow: hidden;position:relative;width:100%;height:1000px;background: url(/images/en/main/mvisual_bg01.jpg) no-repeat center center;background-size: cover;}
#mvisual .sliderBox ul li.n1{background: url(/images/en/main/mvisual_bg01.jpg) no-repeat 50% 50%;background-size: cover}
#mvisual .sliderBox ul li.n2{background: url(/images/en/main/mvisual_bg02.jpg) no-repeat 50% 50%;background-size: cover}
#mvisual .sliderBox ul li.n3{background: url(/images/en/main/mvisual_bg03.jpg) no-repeat 50% 50%;background-size: cover}
#mvisual .sliderBox ul li .mvisual_txt{position:relative;width:100%;margin-top: 170px;text-align: center;}
#mvisual .sliderBox ul li .mvisual_txt h2{font-size: 65px;font-family: 'nmj';font-weight: 600;line-height: 75px;text-align: center;color: #fff;letter-spacing: 0}
#mvisual .sliderBox ul li .mvisual_txt h2 span{display: block;width: 24%;margin: 20px auto 0;font-size: 16px;font-weight: normal;line-height: 25px;}
#mvisual .btn_area{position: relative;text-align: center; z-index:4;}
#mvisual .btn_area .paging{position: absolute;left: 0;bottom: 193px;width: 100%}
#mvisual .btn_area .paging a{display:inline-block;width:100px;height:111px;margin-left:34px;background:url(/images/en/main/main-ir.png) no-repeat;vertical-align:middle;font-size:0;}
#mvisual .btn_area .paging a.btn1{background-position: -257px -1px;margin-left:0;}
#mvisual .btn_area .paging a.btn2{background-position: -360px -1px;}
#mvisual .btn_area .paging a.btn3{background-position: -463px -1px;}
#mvisual .btn_area .paging a.btn4{background-position: -566px -1px;}
#mvisual .btn_area .paging a.btn5{background-position: -669px -1px;}
#mvisual .btn_area .paging a.btn6{background-position: -772px -1px;}
#mvisual .btn_area .paging a.btn7{background-position: -875px -1px;}
#mvisual .btn_area .paging a.btn8{background-position: -978px -1px;}
#mvisual .btn_area > button{display: block;position:absolute;right:50px;width: 63px;height: 63px;margin-bottom: 10px;background: url(/images/en/main/main-ir.png);border:1px solid #fff;}
#mvisual .btn_area > button.btn_prev{bottom:582px;background-position: 0 0;}
#mvisual .btn_area > button.btn_stop{bottom:510px;background-position: -64px 0;}
#mvisual .btn_area > button.btn_next{bottom:437px;background-position: -128px 0;}
#mvisual .btn_area > button.btn_play{bottom:510px;background-position: -192px 0;}
#mvisual .mvisual .btn_area > .paging{position: absolute;top:auto;bottom: 530px; width:auto; display:inline-block; left:50%; transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); -o-transform:translateX(-50%); -webkit-transform:translateX(-50%);}
#mvisual .btn_area > .paging button.btn_page{width: 15px;height: 15px;background: rgba(255,255,255,0.5);border-radius: 50%;font-size: 0;text-indent: -9999px;}
#mvisual .btn_area > .paging button.btn_page + .btn_page{margin-left: 15px}
#mvisual .btn_area > .paging button.btn_page.on{background: #fff;}


#mvisual .scroll_down{position:absolute;bottom:63px;left:50%;margin-left:-46px;width:91px;height:61px;vertical-align:middle;font-size: 14px;color: #fff;z-index: 3;}
#mvisual .scroll_down:before{content: '';display: block;width: 23px;height: 22px;margin: 0 auto 13px;background:url(/images/en/main/main-ir.png) no-repeat;background-position: 0 -65px}



/* 메인 콘텐츠1 Quick Service */
#mcont1{position: relative;background: #dfeaf0 url(/images/en/main/mcont1_bg.png)no-repeat bottom;background-size: cover;}
#mcont1:before{content: '';position: absolute;left: 0;top: 18px;width: 342px;height: 289px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: 0 -330px}
#mcont1:after{content: '';position: absolute;right: 0;bottom: 0px;width: 473px;height: 221px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: -345px -330px;z-index: 0}
#mcont1 .body_wrap{z-index: 1}
#mcont1 .mtitbox{position: absolute;left: 0;top: 100px}
#mcont1 .mtitbox h3{font-size: 70px;color: #16387d}
#mcont1 .mtitbox p{font-size: 22px;line-height: 30px;color: #454c65}
#mcont1 .servicebox{padding: 100px 0 175px 55%}
#mcont1 .servicebox .box{margin-top: -20px;opacity: 0;transition: all 0.6s ease-in-out 0.6s;-webkit-transition: all 0.6s ease-in-out 0.6s;}
#mcont1 .servicebox .box.action{margin-top: 0;opacity: 1;}
#mcont1 .servicebox #box1{transition-delay: 0s}
#mcont1 .servicebox #box2{transition-delay: 0.2s}
#mcont1 .servicebox #box3{transition-delay: 0.4s}  
#mcont1 .servicebox #box4{transition-delay: 0.6s}
#mcont1 .servicebox #box5{transition-delay: 0.8s}
#mcont1 .servicebox #box6{transition-delay: 1s}
#mcont1 .servicebox .box span{font-size: 22px;color: #fff;letter-spacing: 0}
#mcont1 .servicebox #box1{position: relative;margin-bottom: 25px;padding: 55px 25px 115px 55px;background: rgba(151,192,221,0.3) url(/images/en/main/mcont1_bg2.png) no-repeat;background-size: 100% 100%;color: #334f8d}
#mcont1 .servicebox #box1:before{content: '';position: absolute;left: -1px;bottom: -30px;width: 611px;height: 212px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: 0px -115px}
#mcont1 .servicebox #box1:after{content: '';position: absolute;top: -24px;right: 75px;width: 263px;height: 63px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: -615px -115px}
#mcont1 .servicebox #box1 strong{font-size: 32px;}
#mcont1 .servicebox #box1 p{font-size: 16px;margin-bottom: 40px;}
#mcont1 .servicebox #box1 a{position: relative;padding-right: 15px;border-bottom: 2px solid #234475;font-size: 15px;color: #101f58}
#mcont1 .servicebox #box1 a:after{content: '';position: absolute;right: 0;top: 7px;width: 10px;height: 10px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: 0 -90px}
#mcont1 .servicebox #box2{width: 550px;height: 330px;background:url(/images/en/main/mcont1_img1.jpg) 50% 50% no-repeat;background-size: cover;text-align: center;}
#mcont1 .servicebox #box2 a{display: block;overflow: hidden;position: relative;height: 100%;padding-top: 240px}
#mcont1 .servicebox #box2 a:before{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: rgba(255,255,255,0.3);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(2.9,2.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform: scale3d(2.9,2.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
#mcont1 .servicebox #box2 a:hover:before,
#mcont1 .servicebox #box2 a:focus:before{-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform: scale3d(2.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0)}
#mcont1 .servicebox #box3{position: absolute;left: 0;top: 310px;width: 55%;}
#mcont1 .servicebox #box3 .sbox{float: left;width: 46%;height: 310px;margin-right: 4%;text-align: center;}
#mcont1 .servicebox #box3 .sbox.sbox1{margin-top: 113px;background: url(/images/en/main/mcont1_img2.jpg) 50% 50% no-repeat;background-size: cover;}
#mcont1 .servicebox #box3 .sbox.sbox2{margin-bottom:4%;background: url(/images/en/main/mcont1_img3.jpg) 50% 50% no-repeat;background-size: cover;}
#mcont1 .servicebox #box3 .sbox.sbox3{background: url(/images/en/main/mcont1_img4.jpg) 50% 50% no-repeat;background-size: cover;}
#mcont1 .servicebox #box3 .sbox a{display: block;overflow: hidden;position: relative;height: 100%;padding-top: 235px}
#mcont1 .servicebox #box3 .sbox a:before{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;background: rgba(255,255,255,0.3);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(2.9,2.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);transform: scale3d(2.9,2.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);}
#mcont1 .servicebox #box3 .sbox a:hover:before,
#mcont1 .servicebox #box3 .sbox a:focus:before{-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);}

/* 메인 콘텐츠2 Sitemap */
#mcont2{position: relative;margin-top: -1px;padding-bottom: 71px;background: #dfeaf0 url(/images/en/main/mcont2_bg.png)no-repeat top;background-size: cover;}
#mcont2 .mtitbox{position: relative;margin-top: 105px}
#mcont2 .mtitbox:before{content: '';position: absolute;left: -155px;top: -100px;width: 289px;height: 217px;background: url(/images/en/main/main-ir.png) no-repeat;background-position: -820px -330px}
#mcont2 .mtitbox h3{float: left;font-size: 70px;color: #16387d}
#mcont2 .mtitbox p{float: right;margin-top: 40px;font-size: 22px;line-height: 30px;color: #45474b}
#mcont2 .sitebox{width: auto;margin: 25px 0 0 -5.5%;}
#mcont2 .sitebox > li{float: left;width: 19.5%;min-height: 230px;margin:0 0 45px 5.5%;}
#mcont2 .sitebox > li:nth-child(5),
#mcont2 .sitebox > li:nth-child(6){margin-bottom: 0}
#mcont2 .sitebox > li > a{display: block;padding: 6px 25px;border:1px solid #fff;background: rgba(0,0,0,0.05);}
#mcont2 .sitebox > li > a h3{font-size: 20px;font-weight: normal;color: #fff;}
#mcont2 .sitebox > li > ul{padding: 15px 0 0 30px}
#mcont2 .sitebox > li > ul li{position: relative;padding-left: 13px;font-size: 16px;color: #fff;}
#mcont2 .sitebox > li > ul li:before{content: '';position: absolute;left: 0;top: 11px;width: 6px;height: 2px;background: #fff;}
#mcont2 .copy_box{text-align: right;}
#mcont2 .copy_box p{display: inline-block;position: relative;font-size: 14px;color: #fff;line-height: 28px;letter-spacing: 0;vertical-align: bottom}
#mcont2 .copy_box p:after{content: '';position: absolute;top: -19px;right: 0;width: 38px;height: 2px;background: #fff;}
#mcont2 .copy_box strong{margin-left: 40px;font-size: 40px;color: #fff;line-height: 11px}

@media (max-width: 1359px){
  #body_layout{padding:0;}
  #mcont_txt .body_wrap{width:100%;padding:0px 60px 0 60px;}
  #mvisual .sliderBox ul li .mvisual_txt h2 span{width: 100%}
  #mcont1 .mtitbox{left: 60px}
  #mcont1 .servicebox{padding-left: 60%}
  #mcont1 .servicebox #box1{width: 432px}
  #mcont1 .servicebox #box1:before{bottom: -20px;width: 400px;height: 139px;background-position: -614px -180px}
  #mcont1 .servicebox #box2{width: 432px;height: 315px}
  #mcont1 .servicebox #box3{left: 60px;width: 54%}
  #mcont1 .servicebox #box3 .sbox{height: 260px}
  #mcont1 .servicebox #box3 .sbox a{padding-top: 175px}
}
@media (max-width: 1199px){
  #mvisual .sliderBox ul li .mvisual_txt{width: 75%;margin: 170px auto 0}
  #mvisual .sliderBox ul li .mvisual_txt h2{font-size: 60px}
  #mvisual .btn_area .paging a{width: 70px;height: 78px;margin-left: 10px}
  #mvisual .btn_area .paging a.btn1{background-position: -1080px -1px }
  #mvisual .btn_area .paging a.btn2{background-position: -1154px -1px;}
  #mvisual .btn_area .paging a.btn3{background-position: -1227px -1px;}
  #mvisual .btn_area .paging a.btn4{background-position: -1300px -1px;}
  #mvisual .btn_area .paging a.btn5{background-position: -1373px -1px;}
  #mvisual .btn_area .paging a.btn6{background-position: -1446px -1px;}
  #mvisual .btn_area .paging a.btn7{background-position: -1519px -1px;}
  #mvisual .btn_area .paging a.btn8{background-position: -1592px -1px;}
  #mcont1 .servicebox{padding-left: 61%}
  #mcont1 .servicebox #box1{width: 352px}
  #mcont1 .servicebox #box1:before{bottom: -14px;width: 300px;height: 104px;background-position: -1017px -180px}
  #mcont1 .servicebox #box2{width: 352px;}
  #mcont2 .mtitbox h3{float: none;}
  #mcont2 .mtitbox p{float: none;margin-top: 0}
  #mcont2 .sitebox > li{width: 27.8%}
}
@media (max-width: 1023px){
  #mvisual .sliderBox ul li{height: 700px}
  #mvisual .sliderBox ul li .mvisual_txt h2{font-size: 45px;line-height: 45px}
  #mvisual .mvisual .btn_area > .paging{bottom: 330px}
  #mvisual .btn_area .paging{bottom: 160px}
  #mvisual .btn_area > button{right: 35px;width: 50px;height: 50px;margin-bottom: auto}
  #mvisual .btn_area > button.btn_prev{bottom: 367px;background-position: -7px -7px;}
  #mvisual .btn_area > button.btn_stop{bottom: 310px;background-position: -71px -7px;}
  #mvisual .btn_area > button.btn_play{bottom: 310px;background-position: -197px -7px;}
  #mvisual .btn_area > button.btn_next{bottom: 253px;background-position: -133px -7px;}
  #mcont1:before{width: 180px;height: 152px;background-position: 0 -621px}
  #mcont1:after{width: 180px;height: 84px;background-position: -183px -621px}
  #mcont1 .mtitbox{position: relative;left: auto;}
  #mcont1 .mtitbox h3{font-size: 50px}
  #mcont1 .servicebox{padding:110px 0 565px 0}
  #mcont1 .servicebox .box,
  #mcont1 .servicebox #box1,
  #mcont1 .servicebox #box2{float: left;width: 48%;}
  #mcont1 .servicebox #box1{margin-top: 80px}
  #mcont1 .servicebox #box2{margin-left: 2%}
  #mcont1 .servicebox #box3{float: none;left: 50%;top: 576px;width: 620px;margin-left: -329px;}
  #mcont1 .servicebox #box3 .sbox{width: 47%;margin-left: 3%;margin-right: 0}
  /* #mcont1 .servicebox #box3 .sbox.sbox1{margin-top: 80px} */
  #mcont1 .servicebox #box3 .sbox.sbox2{margin-bottom: 20px}
  #mcont2 .mtitbox:before{left: -75px;top: -70px;width: 180px;height: 161px;background-position: -367px -621px}
  #mcont2 .mtitbox h3{font-size: 50px;}
  #mcont2 .sitebox > li{width: 44.5%}
}
@media (max-width: 767px){
  #top_layout .top_wrap .utile_wrap{right:40px;}
  #mcont_txt .body_wrap{padding:0px 20px 0 20px;}
  #mvisual .sliderBox ul li .mvisual_txt{width: 100%;padding:0 20px;}
  #mvisual .mvisual .btn_area{bottom: 190px}
  #mvisual .mvisual .btn_area > .paging{bottom: 140px}
  #mvisual .btn_area{position: absolute;bottom: 120px;width: 100%}
  #mvisual .btn_area .paging{position: static;margin: 10px auto 0;}
  #mvisual .btn_area .paging a{width: 50px;height: 56px;}
  #mvisual .btn_area .paging a.btn1{background-position: -1665px -1px;}
  #mvisual .btn_area .paging a.btn2{background-position: -1718px -1px;}
  #mvisual .btn_area .paging a.btn3{background-position: -1771px -1px;}
  #mvisual .btn_area .paging a.btn4{background-position: -1824px -1px;}
  #mvisual .btn_area .paging a.btn5{background-position: -1877px -1px;}
  #mvisual .btn_area .paging a.btn6{background-position: -1930px -1px;}
  #mvisual .btn_area .paging a.btn7{background-position: -1983px -1px;}
  #mvisual .btn_area .paging a.btn8{background-position: -2036px -1px;}
  #mvisual .btn_area > button{display: inline-block;position: static;width: 35px;height: 35px;}
  #mvisual .btn_area > button.btn_prev{background-position: -14px -14px}
  #mvisual .btn_area > button.btn_stop{background-position: -78px -14px}
  #mvisual .btn_area > button.btn_play{background-position: -204px -14px}
  #mvisual .btn_area > button.btn_next{background-position: -140px -14px}
  #mvisual .scroll_down{bottom: 30px}
  #mcont1 .mtitbox h3{font-size: 35px}
  #mcont1 .servicebox{padding-bottom: 0}
  #mcont1 .servicebox #box1{float: none;width: 100%}
  #mcont1 .servicebox #box1:before{bottom: -20px;width: 400px;height: 139px;background-position: -614px -180px;}
  #mcont1 .servicebox #box2{width: 49%;height: 260px;margin:0;}
  #mcont1 .servicebox #box2 a{padding-top: 175px}
  #mcont1 .servicebox #box3{position: static;width: 100%;margin: 0}
  #mcont1 .servicebox #box3 .sbox{width: 49%;margin: 2% 0 0 2%}
  #mcont1 .servicebox #box3 .sbox.sbox1{margin-top: 0}
  #mcont1 .servicebox #box3 .sbox.sbox2{margin: 2% 0 0}
  #mcont2 .mtitbox h3{font-size: 35px}
  #mcont2 .sitebox{margin-left: 0}
  #mcont2 .sitebox > li{width: 100%;min-height: auto;margin: 20px 0 0}
  #mcont2 .sitebox > li:nth-child(5), 
  #mcont2 .sitebox > li:nth-child(6){margin-bottom: 20px}
  #mcont2 .copy_box{margin-top: 45px;text-align: center;}
  #mcont2 .copy_box p{line-height: 14px}
  #mcont2 .copy_box p:after{display: none;}
  #mcont2 .copy_box strong{display: block;margin: 10px 0 0;line-height: 25px}
}
@media (max-width: 639px){
  #mvisual .sliderBox ul li .mvisual_txt h2{font-size: 30px;line-height: 30px}
  #mvisual .sliderBox ul li .mvisual_txt h2 span{margin-top: 30px;font-size: 16px;line-height: 20px}
  #mvisual .mvisual .btn_area{bottom: 240px}
  #mvisual .mvisual .btn_area > .paging {bottom: 70px;}
  #mvisual .btn_area{bottom:110px;}
  #mvisual .btn_area .paging{width:240px;}
  #mvisual .btn_area .paging button{margin-bottom: 5px}
  #mvisual .btn_area .paging a{margin-top:5px;}
  #mvisual .btn_area .paging a.btn5{margin-left:0;}
  #mcont1 .servicebox .box span{font-size: 18px;line-height: 18px}
  #mcont1 .servicebox #box1{margin-bottom: 20px;padding: 35px 35px 75px;}
  #mcont1 .servicebox #box1:before{bottom: -14px;width: 300px;height: 104px;background-position: -1017px -180px}
  #mcont1 .servicebox #box1:after{right: 0}
  #mcont1 .servicebox #box2{width: 100%;margin: 0 0 15px}
  #mcont1 .servicebox #box3 .sbox{width: 100%;margin: 0 0 15px}
  #mcont1 .servicebox #box3 .sbox.sbox2{margin: 0 0 15px}
}

@media (max-width: 380px){
  #top_layout .top_wrap .utile_wrap{right:0}
}