@charset "utf-8";
@import url("common.css");
@import url("board.css");


/* Layout
*******************************/ 
header {width:100%;}


.headerWrap {width:100%; position: relative; background:#fff;}



footer {width:100%; clear: both; background:#1f1f1f; }

footer .f_link {position: relative; clear:both; background:#333;  }
footer .f_link ul li {float:left; width:33%; line-height:45px; text-align:center; background:url(../images/common/f_m_line.jpg) no-repeat left;}
footer .f_link ul li a {font-family: 'NGB'; display:block; color:#777;}


footer address {font-size:12px; color:#5d5d5d; padding:20px; line-height:19px;}
footer address span {color:#c9c9c9; font-family: 'NGB'; }

    .goTop { position: fixed; bottom: -90px; right:0; z-index: 88;}
    .goTop a {width:50px; height: 50px; color: #fff !important; line-height: 50px; text-align: center; display: block;  background: #e81313;}
   






/* Mobile Menu */
.mobileMenuCon {       
        position: fixed;
        width: 230px;
        height: 100%; background:#fff;
        top: 0;
        z-index: 9999;        
        overflow: auto;
        -webkit-overflow-scrolling: touch;    
    }
    .mobileMenuCon .menuTit { position: relative; height:50px;  background: #e81313;}
    .mobileMenuCon .menuTit button { color: #fff;}    
    .mobileMenuCon .menuTit .btn-mobile-login { font-size: 12px;  }
    .mobileMenuCon .menuTit .btn-mobile-login i { display: block; font-size: 18px; margin-bottom: 3px;}
    .mobileMenuCon .menuTit .btnClose { position: absolute; right: 0; top: 2px;}
    .mobileMenuCon .menuTit .btnClose i { font-size: 28px;}        
    .lnbmenu {}
    .mobilegnb {border-bottom: 1px solid #d9d9d9;}
    .mobilegnb a {font-family: 'NGB'; display: block;}
    .mobilegnb > li {}
    .mobilegnb > li > a { background: #fff; border-top: 1px solid #d9d9d9; font-size: 14px; padding: 10px 20px; color: #191919; font-family: 'NGB';}
    .mobilegnb > li:first-child > a {border-top:0;}
    .mobilegnb > li.active > a {}
    .mobilegnb > li > a i { 
        margin-right:5px;  
        color: #767a81;
        transition: all 0.2s ease-out 0s;
        -webkit-transition: all 0.2s ease-out 0s;
    }
    .mobilegnb > li > a i.rightico {float:right; margin:4px 0 0 0;}
    .mobilegnb > li.active > a i.rightico {
        color:#806c46;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);      
        transition: all 0.2s ease-in-out 0s;
        -webkit-transition: all 0.2s ease-in-out 0s;
    }    

    .mobilegnb > li > ul {border-top: 1px solid #596170;}
    .mobilegnb > li > ul > li > a { background: #282828;  border-bottom: 1px solid #474747; font-size:  13px; padding: 10px 20px; color: #bababa;}
	.mobilegnb > li > ul > li > a:hover {color:#5cb110;}


    .mobileUtil { padding:15px 20px; background: #fff; }
    .mobileUtil a {display: block; font-size: 13px; padding:3px 0; color:#666;position: relative;}
	.mobileUtil a:hover {color:#5cb110;}


    .site-overlay{display: none;}
    .pushy-active .site-overlay{
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background-color: rgba(0,0,0,0.7);
        -webkit-animation: fade 500ms; 
        -moz-animation: fade 500ms; 
        -o-animation: fade 500ms;
        animation: fade 500ms;
    }

    @keyframes fade{
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }

    @-moz-keyframes fade{
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }

    @-webkit-keyframes fade{
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }

    @-o-keyframes fade{
        0%   { opacity: 0; }
        100% { opacity: 1; }
    }

    .pushy-left{
        -webkit-transform: translate3d(-300px,0,0);
        -moz-transform: translate3d(-300px,0,0);
        -ms-transform: translate3d(-300px,0,0);
        -o-transform: translate3d(-300px,0,0);
        transform: translate3d(-300px,0,0);
    }

    .pushy-open{
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

    .pushy, #wrapper, .push{
        -webkit-transition: -webkit-transform .2s cubic-bezier(.16, .68, .43, .99);
        -moz-transition: -moz-transform .2s cubic-bezier(.16, .68, .43, .99);
        -o-transition: -o-transform .2s cubic-bezier(.16, .68, .43, .99);
        transition: transform .2s cubic-bezier(.16, .68, .43, .99);
    }


  
    .headerWrap .topUtil:before {
        content: '';
        width:100%;
        height: 1px;
        position: absolute;
        left: 0;
        top: 29px;
        background: #444; 
        
    }
    
    .headerWrap .topNav h1 { position:static; text-align: center; height: 90px; padding-top:15px;}
    .menu-btn { 
        display: block; 
        position: absolute; 
        left: 0; 
        top: 0px;
        color: #666; 
        background: #fff; 
        font-size: 40px; font-family: 'NGEB';
        border: 0; 

        line-height: 85px; 
        height: 60px;
        width: 60px;
    }    








.clear:after{content:"";height:0;font-size:0;visibility:hidden;display:block;clear:both;}
.clear{zoom:1;display:block;}

img {max-width:100%;}    


#wrapper {min-width:300px;}
.container {position:relative; clear:both;}




/* main contents */
.maincontents {position:relative; clear:both; }
.mvisual .slogan {position:absolute; z-index:99; width:100%;}
/* main */
.mvisual{ position:relative; overflow:hidden; width:100%;  background:#fff; }

.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 */

/* Direction Nav */
.slider01 .flex-direction-nav {display:none;}

/* Control Nav */
.slider01 .flex-control-nav {display:block;  position: relative;  text-align:center;  bottom:30px; z-index:999;}
.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:  #5cb110;}
.slider01 .flex-control-paging li a.flex-active { background: #5cb110;  cursor: default; }




#container {position:relative; clear:both; width:100%; }
#contents_wrap {position:relative; clear:both; }



#container h2 {color:#000; font-size:27px;  font-family: 'NGB'; line-height:30px; margin-bottom:20px;}


#clients_info {position:relative;  clear:both;  font-size:16px; color:#7d7d7a; line-height:24px;text-align:center; padding:20px 4% 50px 4%;}

.slider02 {width:100% !important; height:auto;margin: 0 auto; margin-top:45px;padding: 0;position: relative; zoom: 1; }
.slider02 .flex-viewport {max-height: 2000px;}
.slider02 .slides {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 li {float:left; width:48%;margin:1%; }
.slider02 .slides img {width: 100%; height:auto; display: block;border:1px solid #dfdfdf;}
/* Direction Nav */
.slider02 .flex-direction-nav {*height: 0;margin: 0; padding: 0; list-style: none; display:none;}
.slider02 .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(./bg_direction_nav.png) no-repeat 0 0; 
	position: absolute; top: 80%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 1; -webkit-transition: all .3s ease;}
.slider02 .flex-direction-nav .flex-next {background-position: 100% 0; right: 5px; }
.slider02 .flex-direction-nav .flex-prev {right: 29px;}

/* Control Nav */
.slider02 .flex-control-nav {width: 100%; position: absolute; top: -25px; text-align: right; margin: 0; padding: 0; list-style: none; font-size:0;.left:0;}
.slider02 .flex-control-nav li {margin: 0 3px; display: inline-block; zoom: 1; *display: inline;}
.slider02 .flex-control-paging li a {width: 8px; height: 8px; display: block; background: #b0b0b0; background: rgba(0,0,0,0.5); 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);}
.slider02 .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.slider02 .flex-control-paging li a.flex-active { background: #ff5a00;  cursor: default; }





.dh_wrap {position:relative;clear:both; width:100%;  background:#e81313;color:#fff; padding:40px 0;}
.dh_wrap h2 {color:#fff !important; font-size: 28px; font-family: 'Open Sans'; font-weight:700; line-height:30px; margin-bottom:40px; text-align:center;}
.dh_wrap .dh {position:relative;clear:both;  padding:100px 20px 0 20px; margin-top:50px;}
.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 center top;}
.dh_wrap .bg2 {background:url(../images/main/icon02.jpg) no-repeat center top;}


.consult{position:relative;clear:both; width:100%; background:url(../images/main/consult_bg.jpg) no-repeat  center; color:#fff; padding:50px 20px; }
.consult h2 {color:#000;  font-size: 28px; font-family: 'NGB';  line-height:30px; margin-bottom:30px; text-align:center;}
.consult table {border-top:1px solid #bbb; border-bottom:1px solid #bbb; }
.consult table th{color:#000;text-align:center;}
.consult table th, .consult table td { padding:5px 0; }
.consult table .a_left {text-align:left; color:#000; font-size:13px; line-height:25px;}
.consult table .a_left  textarea { font-family: 'NG'; padding:10px;}
button.btn_gray {padding:10px 35px; background:#3a3b3f; color:#fff !important; font-size:16px; font-family: 'NGB'; margin-top:15px; border:1px solid #dfdfdf;  border-radius:5px; 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; background:#fafafa; padding:50px 2.5%;}
#portfolio {position:relative;  clear:both;   text-align:center; color:#7d7d7a; font-size:16px;  line-height:24px;}
#portfolio .list ul {padding:10px;}
#portfolio .list ul li {float:left; width:45%;   margin:2.5%;}

#portfolio .list ul li a p {color:#666; font-size:16px;  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:15px 5px;}


#mboard {position:relative;  clear:both; }
#mboard .customer {position:relative;  clear:both; height:55px; }
#mboard .customer ul li { line-height:55px; font-size:19px; padding:0 3%;}
#mboard .customer ul li.call {background:#e81313; color:#fff; text-align:center;}
#mboard .customer ul li.call span {font-size:24px;color:#fff;  font-family: 'NGEB';}
#mboard .customer ul li.call a {color:#fff;}

.ml30 {margin-left:30px;}















/* sub contents */

.f_l {float:left;}
.f_r {float:right;}
.b1 {border:1px solid #dfdfdf;}
.alignL {text-align:left;}
.alignR {text-align:right;}
.alignC {text-align:center;}






#contents .li_round_n3 {position:relative; clear:both; padding-top:70px;  height:200px; background:url(../images/education/ed00.jpg) no-repeat;}
#contents .li_round_n3 ul li {float:left;width:250px; margin:0 12px; text-align:center; /*color:#fff; font-size:20px;*/}




.strok { border-top:2px solid #dfdfdf;}



#introduce01 {position:relative; clear:both;}

span {color:#6a6a6a; font-size:15px; line-height:22px; }


table, th, td {border-collapse:collapse;border-spacing:0;font-weight: normal;}

.con_table {position:relative; clear:both; border-top:2px solid #5cb010; border-right:1px solid #e6e6e6; margin-top:10px; text-align:left;}
.con_table th { color:#2a2a2a;  font-family:'NGB';  background:#f3f3f3;}
.con_table td.a_l {text-align:left;}
.con_table th, .con_table td {padding:10px 15px; border-bottom:1px solid #e6e6e6; border-left:1px solid #e6e6e6;}


#sub_tab {position:relative; clear:both; margin-bottom:30px;}
#sub_tab ul li {float:left; margin-right:5px;}
#sub_tab ul li a {background:#f8f8f8; padding:10px 20px; border:1px solid #dfdfdf;}
#sub_tab ul li a.on {background:#5cb110; color:#fff;font-family:'NGB'; border:1px solid #5cb110;}












#s_contents {position:relative; clear:both; width:100%;  padding:0 20px 70px 20px;}






.contents {position:relative; clear:both; margin-top:50px;}
.stitle {position:relative; clear:both; color:#282828; font-size:24px; font-family: 'NGEB'; line-height:30px; text-align:center; background:#fcfcfc;border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; padding:20px 0;}

#contents .con {clear:both; font-size:14px; line-height:22px;}



.icon_red {position:relative; clear:both; text-align:center; }
.icon_tit {position:relative; clear:both; background:url(../images/sub/icon_tit.jpg) no-repeat 0 3px; padding-left:25px; height:25px; color:#ec1f27;  font-size:22px; font-family: 'NGB'; line-height:25px;}
.bt1 {border-top:1px solid #dfdfdf; margin:60px 0;}
.tt_line {background:url(../images/sub/tt_line.jpg) no-repeat center bottom; padding-bottom:20px;}


#estimate {position:relative; clear:both; }
#estimate .policybox{border:1px solid #dfdfdf; padding:20px; margin-top:25px;}
#estimate .policybox textarea {width:100%; height:100px; padding:0; border:0; line-height:20px; font-size:13px; font-family: 'NG'; margin-top:20px;}
button.btn_ok {padding:15px 40px; background:#3a3b3f; color:#fff !important; font-size:16px; font-family: 'NGB'; margin-top:15px; border:1px solid #3a3b3f; margin:4px; cursor:pointer;}
button.btn_cancel {padding:15px 40px; background:#fff; color:#3a3b3f !important; font-size:16px; font-family: 'NGB'; margin-top:15px; border:1px solid #3a3b3f;  margin:4px; cursor:pointer;}
.icon_calendar {margin:0 0 -12px 5px;}



#introduce {position:relative; clear:both; text-align:center;}
#introduce h2 {height:40px; font-size: 25px; color:#222; font-family: 'Open Sans'; font-weight:600; line-height:25px;  text-align:center;}

#partner {position:relative; clear:both; }
#partner h2 { font-size: 25px; color:#222; font-family: 'Open Sans'; font-weight:600; line-height:25px;  text-align:center;}
#partner .list {position:relative; clear:both;}
#partner .list ul li {float:left; width:48%; margin:0 1% 20px 1%;}
#partner .list ul li img {border:1px solid #e3e3e3; width:100%;}
#partner .list ul li p {color:#777;  text-align:center; margin-top:5px;  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}


#map {position:relative; clear:both;  border-top:1px solid #dad3c2; border-bottom:1px solid #dad3c2; overflow:hidden;}
#map .frame {width:1920px; height:400px; margin-left:-960px;padding-left:50%;}


.portfolio_list {position:relative; clear:both;}
.portfolio_list ul li {clear:both; margin-bottom:40px;}
.portfolio_list ul li img {width:100%;}
.portfolio_list  p {margin-top:10px;}

#work {position:relative; clear:both; }
#work h2 { font-size: 25px; color:#222; font-family: 'Open Sans'; font-weight:600; line-height:25px;  text-align:center; letter-spacing:5px;}

#work1 {position:relative; clear:both; }
#work1 h2 { font-size: 20px; color:#222; font-family: 'NGB'; font-weight:600; line-height:25px;  text-align:center; padding-bottom:15px;}
#work1 .step {position:relative; clear:both;}
#work1 .step ul li {clear:both;  padding-left:100px; min-height:90px;  color:#888; font-size:14px; line-height:18px;}
#work1 .step ul li p {font-size:15px; color:#333; font-family: 'NGB'; line-height:40px; margin-top:25px;}
#work1 .step ul li.bg1 {background:url(../images/work1/02_r01.jpg) no-repeat top left;}
#work1 .step ul li.bg2 {background:url(../images/work1/02_r02.jpg) no-repeat top left;}
#work1 .step ul li.bg3 {background:url(../images/work1/02_r03.jpg) no-repeat top left;}
#work1 .step ul li.bg4 {background:url(../images/work1/02_r04.jpg) no-repeat top left;}
#work1 .step ul li.bg5 {background:url(../images/work1/02_r05.jpg) no-repeat top left;}
#work1 .step ul li.bg6 {background:url(../images/work1/02_r06.jpg) no-repeat top left;}
#work1 .step ul li.bg7 {background:url(../images/work1/02_r07.jpg) no-repeat top left;}
#work1 .step ul li.bg8 {background:url(../images/work1/02_r08.jpg) no-repeat top left;}
#work1 .step ul li.bg9 {background:url(../images/work1/02_r09.jpg) no-repeat top left;}
#work1 .step ul li.bg10 {background:url(../images/work1/02_r10.jpg) no-repeat top left;}
#work1 .step ul li.bg11 {background:url(../images/work1/02_r11.jpg) no-repeat top left;}
#work1 .step ul li.bg12 {background:url(../images/work1/02_r12.jpg) no-repeat top left;}
button.btn_ok2 {padding:15px 50px; background:#3a3b3f; color:#fff !important; font-size:16px; font-family: 'NGB'; margin-top:15px; border:1px solid #3a3b3f; margin:4px; cursor:pointer;}


#work2 {position:relative; clear:both; }
#work2 h2 { font-size: 20px; color:#222; font-family: 'Open Sans'; font-weight:600; line-height:25px;  text-align:center; }
#work2 table {border-top:1px solid #e3e3e3; border-right:1px solid #e3e3e3;}
#work2 table td {border-left:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; padding:15px;}
#work2 table td p {color:#222; font-size:18px; font-family: 'NGB'; margin-bottom:10px;}
#work2 table td p span {color:#e81313;}
#work2 table td ul li {font-size:14px; background:url(../images/work2/icon_gray.jpg) no-repeat  0 8px; padding-left:10px;}
#work2 .img {position:relative; clear:both;}
#work2 .txt {position:relative; clear:both;}
#work2 .txt  p {color:#222; font-size:18px; font-family: 'NGB'; margin:30px 0 10px 0;}
#work2 .txt  p span {color:#e81313;}
#work2 .txt  ul li {font-size:14px; background:url(../images/work2/icon_gray.jpg) no-repeat  0 8px; padding-left:10px;}



#estimate h2 {font-size: 25px; color:#222; font-family: 'Open Sans'; font-weight:600; line-height:25px;  text-align:center; letter-spacing:5px;}