/* 레이아웃 */
#banner {position: relative;margin-top: 65px;}
#product {background-color: #f8f8f8;}
#technology {}
#aboutcompany  { width: 100%; background: url(../img/bg01.jpg) no-repeat center top; background-size: cover;}
#recent {}
#help {}

/* 가운데 영역 */
.container{position: relative; width: 1280px; margin: 0 auto; background: rgba(0, 0, 0, 0); }

/* 로우 영역 */
.row {padding: 0 28px;}

/* 배너 */

.banner_menu { overflow: hidden; position: absolute; left: 0; top: 20px; width: 100%; height: 100px; z-index: 10;}
.banner_menu a {color: #fff; font-size: 16px; transition: all 0.3s;}
.banner_menu a:hover {color: #c1c1c1;}
.banner_menu .bm_left {float: left;}
.banner_menu .bm_left ul {padding-top: 7px;}
.banner_menu .bm_left li { position: relative; display: inline; margin-right: 30px;}
.banner_menu .bm_left li.total { margin-right: 20px;}
.banner_menu .bm_left li.total a {font-size: 14px; padding: 3px 10px; display: inline-block;
    border:1px solid #fff; transition: all 0.3s ;
}
.banner_menu .bm_left li.total a:hover { color: #000; border-color: #000; background: #fff;
    transition: all 0.3s;
}
.banner_menu .bm_right {float: right; overflow: hidden;}
.banner_menu .bm_right ul {float: left;}
.banner_menu .bm_right ul:first-child {padding-top: 7px;}
.banner_menu .bm_right li { position: relative; display: inline; text-align: center; margin-right: 20px;}
.banner_menu .bm_right li.line { margin-right: 30px;}
.banner_menu .bm_right li.white {margin-right: 10px;}
.banner_menu .bm_right li.white a {width: 80px; background-color: #fff; color: #001e57;
    padding: 7px 30px 9px 30px; border: 1px solid #fff ; display: inline-block;
}
.banner_menu .bm_right li.navi {margin-right: 0;}
.banner_menu .bm_right li.navi a {width: 80px; background-color: #001e57; color: #fff;
    padding: 7px 30px 9px 30px; border: 1px solid #0d3b92 ; display: inline-block;}

.banner_menu li.line:after {content: ''; width: 1px; height: 14px;
    background: #fff; position: absolute; right: -18px;top: 2px;
}

/* 슬라이드 */
.slider { width: 100%; height: 600px; }
.slider .ss1 {background: url(../img/swiper01.jpg) no-repeat center center; background-size:cover ;}
.slider .ss2 {background: url(../img/swiper02.jpg) no-repeat center center; background-size:cover ;}
.slider .ss3 {background: url(../img/swiper03.jpg) no-repeat center center; background-size:cover ;}

.slider .swiper-slide h2 { position: relative; display: inline-block; font-size: 62px;
    line-height: 70px; color: #fff;margin-top: 200px;}
.slider .swiper-slide h2:after {content: ''; width: 100%; height: 1px;
    background: rgba(255, 255, 255, 0.3); position: absolute; bottom: -35px; }
.slider .swiper-slide h2 em {display:block; font-size: 59px;font-weight: 100;}
.slider .swiper-slide p {font-size: 27px; color: #fff; padding-top: 55px;}




/* 제품 */
.product {padding: 100px 0;}
.product .product_cate {margin-bottom: 60px;}
.product .product_cate ul {overflow: hidden; width: 848px; margin: 0 auto;}
.product .product_cate li {float: left; width: 210px; text-align: center; border: 1px solid #c4c4c4; margin-right: -1px;}
.product .product_cate li a { display: block; padding: 15px 0; font-size: 18px; color: #666; font-weight: 700; }
.product .product_cate li.active a {background: #666; color: #fff;}

.product .product_list {overflow: hidden; }
.product .product_list > div > div > div { float: left; width: 292px;  margin-right:18px; }
.product .product_list > div > div > div:last-child {margin-right: 0;}
.product .product_list > div > div > div .prod_img { position: relative; border: 1px solid #d9d9d9; border-bottom: 0;}
.product .product_list > div > div > div .prod_img  img {
    display: block;
}
.product .product_list > div > div .prod_img .label {
    position: absolute; top: 17px;left: 0;width: 50px;height: 50px;line-height: 50px;
    background-color: #001e57; text-align: center;
}
.product .product_list > div > div > div .prod_img .label strong {color: #fff;}
/*.product .product_list > div > div .prod_img .kgss { position: absolute; top: 17px;right: 17px;}*/

.product .product_list > div > div > div .infor {background: #fff; padding: 17px; border: 1px solid #d9d9d9;}
.product .product_list > div > div > div .infor h3 {color: #333; font-size: 18px; font-weight: 700; margin-top: 9px;margin-bottom: 20px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.product .product_list > div > div > div .infor h3 strong {}
.product .product_list > div > div > div .infor .infor_btn {overflow: hidden;}
.product .product_list > div > div > div .infor .infor_btn a {
    float: left; width: 49%; margin-right: 2%; text-align: center;
    background: #f2f2f2; font-size: 18px; padding: 15px 0; box-sizing: border-box;
}
.product .product_list > div > div > div .infor .infor_btn a:last-child {margin-right: 0;}

/* 테크놀로지 */
.technology {overflow: hidden; padding: 100px 0;}
.technology img {display: block;}
.technology h2 {font-size: 30px; font-weight: 500; text-transform: uppercase;}
.technology .tech_left { overflow: hidden; float: left; width: 66%; margin-right: 2%; }
.technology .tech_left .tech_box1 {float: left; width: 50%;}
.technology .tech_left .tech_box2 {float: left; width: 50%;}
.technology .tech_left .tech_slider{position: relative;}
.technology .tech_left .tech_slider em {position: absolute; bottom: 5px; right: 10px; font-size: 10px; color: rgba(255, 255, 255, 0.7); font-weight: 300;}
.technology .tech_right {float:left; width: 32%; }


/*어비웃 컴퍼니 */
.aboutcompany { padding: 100px 0; text-align: center; color:#fff ;}
.aboutcompany em {font-size: 24px; font-weight: 300;}
.aboutcompany h2 .thegas {font-size: 40px;}
.aboutcompany .desc {font-size: 24px;font-weight: 300; padding-bottom: 20px;
    background: url(../img/bg01_bar.png) no-repeat bottom center; background-size: 70%;}
.aboutcompany .about-box {overflow: hidden; padding: 20px 3% 0 3%;}
.aboutcompany .about-box > div { float: left; width: 27.333%; margin: 4% 3% 0 3%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3) ;
    padding: 24px 24px 48px 24px;
}
.aboutcompany .about-box > div:hover {background: rgba(0, 0, 0, 0.6);}
.aboutcompany .about-box > div a { position: relative; color: #fff; }
.aboutcompany .about-box > div a h3 {font-size: 24px;}
.aboutcompany .about-box > div a p {font-size: 24px; font-weight: 300;}
.aboutcompany .about-box > div a span { background: url(../img/icon_arrow.png) no-repeat center top; background-size: 70%;
     width: 68px; height: 18px; left: -35px; bottom:-24px;
}

/* 최근 프로젝트 */

.recent {padding: 100px 0; position: relative;}
.recent h3 { font-size: 30px;text-transform: uppercase;  font-weight: 500;margin-bottom: 20px;}
.recent .recent_left { position: relative; margin-right: 423px; height: 500px;
    background: #ccc url(../img/recent_bg.jpg) center center; background-size: cover;}
.recent .recent_left .play {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px;}
.recent .recent_left .play .st0 {fill: #fff; opacity: 0.3;}
.recent .recent_left .play .st1 {fill:#fff; }

.recent .recent_right {position: absolute; right: 0; top: 165px; padding: 34px; width: 400px; height: 500px; background: #f0f0f0; box-sizing: border-box;}
.recent .recent_right .work_title {font-size: 28px; margin-bottom: 0px; font-weight: 500;}
.recent .recent_right .work_date {font-size: 16px;}
.recent .recent_right .work_lebel {font-size: 16px;  margin: 20px 0;}
.recent .recent_right .work_desc {font-size: 14px; line-height: 24px; margin-bottom: 20px;}
.recent .recent_right .btn {overflow: hidden; margin-top: 2%; text-align: center;}
.recent .recent_right .btn a {float: left; width: 32.33333%; box-sizing: border-box; padding: 10px 0; display: block;
    margin-right: 2%; background-color: #fff; color: #000;border: 1px solid #000;
}

/* 헬프 */
.help { overflow: hidden; padding-top: 100px; padding-bottom: 200px;}
.help article { float: left; width: 32%; /*height: 350px;*/ margin-right: 2%;}
.help article > div {border: 1px solid #dbdbdb; height: 350px;}
.help article.help_box3 {margin-right: 0;}
.help article.help_box3 > div {border:0;}
.help article h3 {font-size: 30px; font-weight: 500; margin-bottom: 20px;}

/*공지사항*/
.notice { position: relative; padding: 17px;}
.notice ul {overflow: hidden;}
.notice ul li {float: left; text-align: center; margin-right: -1px;}
.notice ul li a {border: 1px solid #dbdbdb;font-size: 15px; color: #666;display: block;
    width: 80px; padding: 10px 20px; background: #f5f5f5;
}
.notice ul li.active a {background: #fff;}
.notice ul li ul {position: absolute; left: 17px; top:70px; width: 90%;}
.notice ul li ul li { width: 100%; box-sizing: border-box; text-align: left; padding: 15px; border-bottom: 1px solid #dbdbdb;}
.notice ul li ul li:last-child {border-bottom: 0;}
.notice ul li ul li dt {}
.notice ul li ul li dt em { color: #999;}
.notice ul li ul li dt .bar {position: relative; padding-right: 14px;}
.notice ul li ul li dt .bar:after { content: ''; position: absolute; right: 4px; top: 5px; width: 1px; height: 10px; background: #999;}
.notice ul li ul li dd {color:#777; padding-top: 3px;  }
.notice ul li ul li a {border: 0; padding: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 가스정보 */
.gimg {padding: 17px;}
.gimg ul li {position: relative; padding: 17px; border: 1px solid #d7d7d7;
    margin-bottom: 18px; min-height: 102px; box-sizing: border-box;
}
.gimg ul li span {position: absolute; left: 17px;top: 46px; }
.gimg ul li span img { width: 105px;}
.gimg ul li strong {display: block; font-size: 18px; color: #777; /*padding-left: 120px;*/}
.gimg ul li em {display: block;font-size: 14px; color: #777; font-weight: 300;  /*padding-left: 120px;*/ overflow: hidden;text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 40px; /* ie */
}

/* 고객센터 */
.service ul {overflow: hidden;}
.service li { position: relative; float: left; width: 50%; height: 193px; box-sizing: border-box;
    border: 1px solid #dfdfdf; text-align: center;}
.service li a {position: absolute;top:35px; left: 0; width: 100%; height: auto; }
.service li a span {display: block; }
.service li a span i {font-size: 70px; color: #777; margin-bottom: 10px;}
.service li a span:hover i {color: #001e57;}
.service li a strong { color: #777; font-size: 18px;height: 120px; margin: 20px auto;
    overflow: hidden;
}
.service li:nth-child(1) {border-right: 0; border-bottom: 0;}
.service li:nth-child(2) {border-bottom: 0;}
.service li:nth-child(3) {border-right: 0;}



/* 트레일러 */
.overlay {background: rgba(0,0,0,0.92); display: none; width: 100%; height: 100%;
    position: fixed; top: 0;left: 0;z-index: 10000;}
.modal {position: absolute;}
.modal_close {
    background: url(../img/close.svg) no-repeat; background-size: 32px 32px;
    border: 0; color: transparent;
    display: block; width: 32px; height: 32px; overflow: hidden;position: absolute;
    top: 24px; right: 24px; text-indent: 100%;}
body.modal_on {overflow: hidden;}


/* 미디어쿼리 */
@media (max-width: 1290px){

    #banner{margin-top: 54.5px;}

    .container{width: 100%;}

    .swiper-button-next, .swiper-button-prev {display: none;}

    .popup_layer .container {
        width: 100%;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, 0);
    }
    .popup_layer .row {
        margin: 0 25px;
    }

    .popup_layer .popup_cont > div dt {font-size: 24px;}
    .popup_layer .popup_cont > div dd {font-size: 16px;}
}

@media (max-width: 1024px){

    .row {padding: 0 24px;}
    .nav {display: none;}

    .banner_menu .bm_left ul{display: none;}
    .banner_menu .bm_right ul:first-child{display: none;}

    .help {padding-bottom: 0;}
    .help article {height: auto;}
    .help article.help_box1 {width: 49%; margin-right: 2%;}
    .help article.help_box2 {width: 49%; margin-right: 0;}
    .help article.help_box3 {width: 100%;}
    .help article.help_box3 h3 {display: none;}
    .help article.help_box3 {margin-top: 20px;}

    .service li {width: 25%;}
    .service li {border: 1px solid #dfdfdf;}

    .service li:nth-child(1) {border-right: 0; border-bottom: 1px solid #dfdfdf;}
    .service li:nth-child(2) {border-right: 0; border-bottom: 1px solid #dfdfdf;}
    .service li:nth-child(3) {border-right: 0;}




}

@media (max-width: 960px){
    .slider {height: 500px; }
    .slider .swiper-slide h2 {margin-top: 170px; line-height: 45px; font-size: 37px;}
    .slider .swiper-slide h2:after {bottom: -15px;}
    .slider .swiper-slide h2 em {font-size: 34px;}
    .slider .swiper-slide p {font-size: 16px; padding-top: 35px;}

    .popup_layer .popup_cont > div dt {font-size: 20px;}
    .popup_layer .popup_cont > div dd {font-size: 14px;}
    .popup_layer .popup_cont img {
        width: 250px;
        margin-bottom: 10px;
    }
    .popup_layer .popup_cont a.popup_close_btn img {
        width: 25px;
    }

    .product .product_cate ul {width: auto;}
    .product .product_cate li {width: 25%; box-sizing: border-box;}

    .aboutcompany {padding: 50px 0;}
    .aboutcompany .desc {background: none; padding-bottom:0}
    .aboutcompany .about-box {display: none;}

    .recent .recent_left {margin-right: 0; width: 100%; height: 400px;}
    .recent .recent_right { position: relative; top: 0; width: 100%; height: auto;}

    .help {padding-bottom: 0;}


}

@media (max-width: 768px){

    .row {padding: 0 16px;}

    .popup_layer {
        top:0;
        left:auto;
        right:-550px;
        z-index: 10000;
        width: 80%;
        height: 100%;
        background: #fff;
    }
    .popup_layer.on {right:-1px;}
    .popup_layer .row {margin:0; padding: 0;}
    .popup_layer .popup_cont { padding-left: 0;}
    .popup_layer .popup_cont h2{display: none;}

    .popup_layer .popup_cont a.popup_close_btn {top: 15px;right: 15px;}

    .popup_layer .popup_cont hr {display: none;}
    .popup_layer .popup_cont > div {overflow: hidden; width: 100%; border-bottom: 1px solid #3f51b5;}
    .popup_layer .popup_cont > div dt { position: relative; font-size: 16px; font-weight: 500; padding:10px 0 10px 25px ; margin: auto; }
    .popup_layer .popup_cont > div dt a {color:#001e57;}
    .popup_layer .popup_cont > div dt i {display: block; position: absolute; top: 12px; right: 15px;}
    .popup_layer .popup_cont > div dd {font-size: 14px;font-weight: 500; padding:5px 0 5px 30px ; margin: auto; background: #f8f8f8;}
    .popup_layer .popup_cont > div dd a { color:#3f51b5; }
    .popup_layer .popup_cont > div dl.m_none dd {display: none;}
    .popup_layer .popup_cont .dtline { border-top: 1px solid #3f51b5;}

    #product {background: none;}
    #product .row {background: #fff; margin: 24px 24px 0 24px;padding: 24px;}
    #product .ir_so {position: static; width: auto; height: auto; line-height: normal;
        text-indent: 0; font-size: 24px; font-weight: bold; padding-bottom: 20px;
    }
    .product {padding: 0;}
    .product .product_cate {margin-bottom: 30px;}
    .product .product_cate ul { position: relative; padding-bottom: 10px;}
    .product .product_cate ul:before {content: ''; position:absolute; z-index:1; left:0;
        bottom: 0; width: 100%; height: 2px; background: #e1e1e1;}
    .product .product_cate li { width: auto; border: 0;}
    .product .product_cate li a { position: relative; font-size: 18px; color: #666; font-weight: 400; padding: 0; margin-right: 25px;}
    .product .product_cate li.active a:before {content: ''; position: absolute; z-index: 2; left: 0;
        bottom: -10px; width: 100%; height: 2px; background: #666;
    }
    .product .product_cate li.active a {background: none; color: #666;}

    #technology .row {padding: 24px;}
    .technology {padding: 24px;background: #fff;}
    .technology h2 {font-size: 24px; margin-bottom: 10px;}
    .technology .tech_left {width: 100%;}
    .technology .tech_right {display: none;}

    #recent .row {padding: 0 24px;}
    .recent { margin-top: 24px; background: #fff; padding: 24px;}

    .recent h3 {font-size: 24px; font-weight: 500; height: 27px; margin-bottom: 20px;}
    .recent .recent_right {padding: 24px ;}
    .recent .recent_right .work_title { margin-bottom: 10px;}

    #help .row {padding: 0 24px;}

    .help {
        padding-top: 0;
    }
    .help article.help_box1 {padding: 24px; box-sizing: border-box; width: 100%; background: #fff; margin-right: 0; margin-top: 24px;}
    .help article.help_box2 {padding: 24px; box-sizing: border-box; width: 100%; background: #fff; margin-right: 0; margin-top: 24px;}
    .help article.help_box3 {width: 100%; background: #fff; margin-right: 0;  margin-top: 24px;margin-bottom: 24px;}
    .help article h3 {font-size: 24px; font-weight: 500; height: 27px; margin-bottom: 20px; }

    .help article.help_box3 h3 {display: none;}
    .help article.help_box3 > div {height: auto;}

    .service li {border: 0;}
    .service li:nth-child(1){border-bottom: 0;}
    .service li:nth-child(2){border-bottom: 0;}

}

@media (max-width: 600px){
    .slider {height: 400px;}
    .slider .swiper-slide h2 {margin-top: 140px; line-height: 30px; font-size: 24px;}
    .slider .swiper-slide h2:after {bottom: -10px;}
    .slider .swiper-slide h2 em {font-size: 20px;}
    .slider .swiper-slide p {font-size: 14px; padding-top: 20px;}

    .banner_menu {top:16px}
    .banner_menu .bm_right li.white a {font-size: 14px; padding: 3px 5px 5px 5px; color: #fff;
        background: rgba(0, 0, 0, 0.6);border-color:#fff ;}
    .banner_menu .bm_right li.navi a {font-size: 14px; padding: 3px 5px 5px 5px; color: #fff;
        background: rgba(0, 0, 0, 0.6);border-color:#fff}
    .swiper-pagination-bullet {width: 13px !important;height: 13px !important;}

    #product {background: none;}
    #product .container {position: relative;}
    #product .container:after {content:''; position: absolute; z-index: 20; top: 0;right: 0;width: 8px;height: 100%;
        background: #d9d7e0;
    }
    #product .row {margin: 8px;padding: 16px; margin-right: 0; padding-right: 0;}
    #product .row:after {content: ''; position: absolute; z-index: 20; top: 0;right: 0; width: 16px;height: 100%;background-color: #fff;}
    #product .ir_so {font-size: 18px;padding-bottom: 10px;}
    .product .product_cate {margin-bottom: 20px;}
    .product .product_cate ul {padding-bottom: 8px; white-space: nowrap; overflow-x: auto;}
    .product .product_cate li a {font-size: 14px; margin-right: 15px;}
    .product .product_cate li.active a:before {bottom: -8px;}
    .product .product_list {position: relative; z-index: 30;}
    .product .product_list > div > div > div .infor {padding: 5px;}
    .product .product_list > div > div > div .infor h3 { text-align: center; margin: 5px 0 10px; font-size: 15px;}
    .product .product_list > div > div > div .infor h3 strong{display: inline; font-size: 17px;
        color: #222; font-weight: 500;
    }
    .product .product_list > div > div > div .infor .infor_btn a { width: 52%; margin-left: 24%;
        display: block; margin-right: 0;padding: 5px; color: #777;margin-bottom: 5px; box-sizing: border-box;
        font-size: 14px;background: none; border: 1px solid #ddd;
    }
    .product .product_list > div > div > div .infor .infor_btn a:last-child {display: none;}

    #technology .row {padding: 0 8px 8px 8px;}
    .technology {padding: 16px}
    .technology h2 {font-size: 18px; margin-bottom: 10px;}

    .aboutcompany {padding: 18px 0;}
    .aboutcompany em {font-size: 18px;}
    .aboutcompany h2 .thegas { font-size: 28px;}
    .aboutcompany .desc {font-size: 18px; padding-bottom:0}

    #recent .row {padding: 0 8px;}
    .recent { margin-top: 8px; padding: 16px;}
    .recent h3 {font-size: 16px; margin-bottom: 10px;}
    .recent .recent_left { height: 300px;}
    .recent .recent_right {padding: 17px;}
    .recent .recent_right .work_title {font-size: 24px;}

    #help .row {padding: 0 8px;}
    .help { margin-top: 8px; }

    .help article.help_box1 {padding: 16px; margin-top: 0;}
    .help article.help_box2 {padding: 16px; margin-top: 8px;}
    .help article.help_box3 {margin-top: 8px; margin-bottom: 8px;}
    .help article h3 {font-size: 18px; margin-bottom: 10px;}

    .service li {width: 50%; }
    .service li:nth-child(1) {border-right: 1px solid #dfdfdf; border-bottom:1px solid #dfdfdf ;}
    .service li:nth-child(2) {border-bottom:1px solid #dfdfdf ;}
    .service li:nth-child(3) {border-right: 1px solid #dfdfdf;}

}

@media (max-width: 480px){

    #banner{margin-top: 48.92px;}

    .product .product_cate li a {margin-right: 9px;}

    .recent .recent_right .btn a {width: 50%;}

    .aboutcompany {padding: 18px 0;}
    .aboutcompany em {font-size: 16px;}
    .aboutcompany h2 .thegas { font-size: 24px;}
    .aboutcompany .desc {font-size: 16px; padding-bottom:0}

    .service li {height: 170px;}
    .service li a strong {font-size: 16px; font-weight: 500;}

}

@media (max-width: 320px){
    .help article > div {height: 300px;}
    .notice {padding: 8px;}
    .notice ul li ul {left: 8px; top: 56px;}
    .notice ul li.active a {padding: 10px 10px;}
    .notice ul li ul li {padding: 10px;}

    .gimg {padding: 6px;}
    .gimg ul li {margin-bottom: 8px;min-height: 90px;}
    .gimg ul li span img {width: 60px;}
    .gimg ul li strong {padding-left: 75px; font-size: 14px;}
    .gimg ul li em {padding-left: 75px; font-size: 12px;}
    .service li {height: 140px;}
    .service li a span i {font-size: 50px; }
    .service li a strong {font-size: 14px;}
}