@charset "utf-8";






#m_contents {position:relative;  width:100%;}





.mvisual{ position:relative; width:100%; height:710px;  margin:0 auto; background:#111;}

.slider01 .slides {position:; zoom: 1;margin: 0; padding: 0;}
.slider01 .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.slider01 .slogan {position: absolute; z-index:111; top:220px; left:50%; margin-left:-235px;}
/* Direction Nav */
.slider01 .flex-direction-nav {display:none;}

/* Control Nav */
.slider01 .flex-control-nav {display:block;  position: relative;  text-align:center;  bottom:55px;}
.slider01 .flex-control-nav li {margin:0 4px; display:inline-block; width:14px;  .display:inline-block;zoom:1;#display:inline;}
.slider01 .flex-control-paging li a {width: 14px; height: 14px; display: block; background:#fff ;  cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.slider01 .flex-control-paging li a:hover { background:  #e81313;}
.slider01 .flex-control-paging li a.flex-active { background: #e81313;  cursor: default; }

.visual_bottom {position: absolute; width:100%; height:60px; top:650px; background:url(../images/main/line1.png) no-repeat bottom center; z-index:1111;}



/* clients */
.clients_wrap {position:relative;clear:both; background:url(../images/main/line2.jpg) no-repeat bottom center;}
.clients {position:relative;clear:both; width:1190px; margin:0 auto; padding:100px 0 120px 0; }
.clients h2 {color:#000;  font-size: 35px; font-family: 'Open Sans'; font-weight:700; line-height:50px; margin-bottom:50px; text-align:center;}

.slider02 {position:relative;}
.slider02 .slides {position:relative; zoom: 1;margin: 0; padding: 0;}
.slider02 .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.slider02 .slides > li ul {width:1070px; margin:0 auto;}
.slider02 .slides > li ul li {float:left; width:33%; text-align:center; margin:8px 0;}
.slider02 .slides > li ul li img {border:1px solid #dfdfdf;}

/* Direction Nav */
.slider02 .flex-direction-nav {}
.slider02 .flex-direction-nav a { display:block; position:absolute; top:60px;   width:60px; height:60px;text-indent:-5000px; z-index:100; opacity: 1; -webkit-transition: all .3s ease;}
.slider02 .flex-direction-nav .flex-next {right:0px !important;  background:url(../images/main/btn_next.jpg) no-repeat 0 0;}
.slider02 .flex-direction-nav .flex-prev {left:0px !important;  background:url(../images/main/btn_prev.jpg) no-repeat 0 0;}

/* Control Nav */
.slider02 .flex-control-nav {display:none;}


.dh_wrap0 {position:relative;clear:both; width:100%;  background:#e5004f url(../images/main/line3.jpg) no-repeat top center;}
.dh_wrap {position:relative;clear:both; width:1000px; margin:0 auto;  color:#fff; padding:120px 0 100px 0;}
.dh_wrap h2 {font-size: 35px; font-family: 'Open Sans'; font-weight:700; line-height:50px; margin-bottom:50px; text-align:center;}
.dh_wrap .dh {float:left; width:360px; height:130px; padding-left:140px;}
.dh_wrap .dh ul li {background:url(../images/main/icon_white.jpg) no-repeat 0 9px; padding-left:10px; margin:2px 0;}
.dh_wrap .bg1 {background:url(../images/main/icon01.jpg) no-repeat left top;}
.dh_wrap .bg2 {background:url(../images/main/icon02.jpg) no-repeat left top;}


.consult_wrap {position:relative;clear:both; width:100%; background:url(../images/main/consult_bg.jpg) no-repeat top center;}
.consult {position:relative;clear:both; width:1000px; margin:0 auto;  color:#fff; padding:150px 0 200px 0; }
.consult h2 {color:#fff;  font-size: 35px; font-family: 'NGB';  line-height:50px; margin-bottom:50px; text-align:center;}
.consult table {border-top:1px solid #555; border-bottom:1px solid #555;}
.consult table th{}
.consult table th, .consult table td { padding:10px 0; text-align:center;}
.consult table .a_left {text-align:left;  font-size:13px; line-height:25px;}
.consult table .a_left  textarea { font-family: 'NG'; padding:10px;}
button.btn_gray {padding:20px 50px; background:#e41351; color:#fff !important; font-size:19px; font-family: 'NGB'; margin-top:30px; cursor:pointer;}
.a_c {text-align:center;}
.a_right {text-align:right;}
.a_left {text-align:left;}
.f13 {font-size:13px;}

.portfolio_wrap {position:relative;clear:both;  width:100%; background:#efefef;}
.portfolio {position:relative;clear:both; width:1062px; margin:0 auto;  padding:50px 0 80px 0; }
.portfolio h2 {color:#000;  font-size: 35px; font-family: 'NGB';  line-height:50px; margin-bottom:50px; text-align:center;}
.portfolio .info {position:relative;clear:both; width:1000px; margin:0 auto;}
.portfolio .info ul li {float:left; width:31.333%; background:url(../images/main/icon_red.jpg) no-repeat 0 3px; padding-left:2%; line-height:20px; margin:10px 0;}

.portfolio_list {position:relative;clear:both; width:1062px; margin:0 auto; margin-top:30px;}
.portfolio_list ul li { position:relative;float:left; width:332px height:230px; margin:15px 11px;}


.portfolio_list .link {display:block; overflow:hidden}
.portfolio_list .dim {position:absolute; top:0; width:100%; height:100%}
.portfolio_list .dim:after {display:block; background-color:#000; opacity:0; width:100%; height:100%; content:''; -webkit-transition-duration:.3s; -moz-transition-duration:.3s; transition-duration:.3s}
.portfolio_list li:hover :after {opacity:.85}
.portfolio_list .name {position:absolute;display:block; top:50px;  width:100%; text-align:center; color:#fff; font-size:13px; opacity:0;}
.portfolio_list .name span {color:#e5004f;  font-size: 19px; font-family: 'NGB'; line-height:30px;}
.portfolio_list .name img {margin-top:25px;}
.portfolio_list li:hover .name {opacity:1}
.ad:hover .dim:after {opacity:.8}







/* mainpopup */
.mbanner {position:absolute; z-index:999; width:200px; height:310px;  left:50%; margin-left: 480px; top:120px; font-size: 18px; color:#fff; line-height:22px;}
.mbanner .bookmark {position:relative; height:50px;  line-height:50px;  font-family: 'NGB'; text-align:center;   background-color:#5f5f5f; opacity:0.8; -webkit-border-radius: 20px 0 0 0; -moz-border-radius: 20px 0 0 0; -o-border-radius: 20px 0 0 0; border-radius:20px 0 0 0; box-shadow: inset 0 0 3px rgba(0,0,0,0.8);}
.mbanner .bookmark img {margin:5px 0 -3px 2px;}
.mbanner .bookmark a {color:#fff;}
.mbanner .mobile {position:relative; height:105px; padding-top:25px;  text-align:center;   background-color:#e81313; }
.mbanner .mobile span {font-family: 'NGB';}
.mbanner .movie {position:relative; clear:both; height:105px; padding-top:25px;  text-align:center;   background-color:#000000; opacity:0.5; -webkit-border-radius: 0 0 20px 0; -moz-border-radius: 0 0 20px 0; -o-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; box-shadow: inset 0 0 3px rgba(0,0,0,0.8);}
.mbanner p {position:absolute; width:100px; color:#fff; font-size:14px; display:block; background:url(../images/popup/icon_arrow.png) no-repeat right; margin-top:10px; right:40px;}
.mpopup {position:absolute; width:450px; height:600px; left:50%; margin-lefT:-225px; top:100px; display:none; background:#fff; z-index:999;}
.mpopup .tit {height:50px; background:#e81313; font-size:22px; color:#fff; text-align:center; line-height:50px;}
.mpopup .con {height:500px; text-align:center; font-size:13px; color:#8e8e8e; line-height:18px;}
.mpopup .con ul li.txt {color:#2f2f2f; font-size:24px; line-height:30px; padding:30px 0 15px 0;}
.mpopup .con ul li.txt span {color:#e81313; font-family: 'NGB';}
.mpopup .con ul li.img {margin-top:20px;}
.mpopup .foot {position:relative; height:50px; background:#2f2f2f; color:#fff; line-height:50px; font-size:30px;font-family: 'NGEB'; text-align:center;}

.mpopup .foot img {position:absolute; right:0;}






/****************************** Animation ******************************/
.title { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.title-sub { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 100ms; transition:all 600ms ease 100ms; }
.btn-more, .main-business .horizon { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:opacity 600ms ease 200ms, -webkit-transform 600ms ease 200ms; transition:opacity 600ms ease 200ms, transform 600ms ease 200ms; }

.title.ani-visible, .title-sub.ani-visible, .btn-more.ani-visible, .main-business .horizon.ani-visible { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }

.rnd .list { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.rnd.ani-visible .list { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }
.main-content>div { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 200ms; transition:all 600ms ease 200ms; }
.main-content.ani-visible>div { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }

@keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@-webkit-keyframes aniswiper{0%{ left:100%; } 100%{ left:0; }}
@keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}
@-webkit-keyframes aniswiper-prev{0%{ right:100%; } 100%{ right:0; }}



.main-business { width:1400px; margin:0 auto; height:560px; padding:150px 0 50px 0; display:flex; }
.main-business>div { width:50%; height:100%; }
.main-business .left { position:relative; float:left; width:560px; }
.main-business .left .wrap { position:absolute; top:50%; left:20%; transform:translate(-15%,-50%); z-index:1; }
.main-business .left .wrap h3 { font-size:20px; color:#555; font-weight:900; letter-spacing:-0.3px; margin-bottom:30px; }
.main-business .horizon { width:760px; height:4px; margin:40px 0 100px 0; background-color:#034ea2; }
.main-business .left .wrap h1 { font-family:"Noto Sans KR"; font-size:60px; font-weight:900; color:#034ea2;}
.main-business .left .wrap p { width:600px; font-size:21px; color:#444;  font-weight:100; line-height:35px; letter-spacing:-0.05em; }
.main-business .btn-more { display:inline-block; margin-top:45px; font-family:"Noto Sans KR"; font-size:33px; font-weight:700; color:#136DE8; cursor:pointer; }
.main-business .right {float:right; width:810px; margin-left:30px;background-image: url("../images/main/img01.jpg"); background-repeat:no-repeat; background-size:cover; background-position:center; }