@charset "utf-8";

html {font-size:20px;}
body {font-size:1rem;}

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

/* header */
header {position:fixed; width:100%; z-index:154;}
header:after { content:''; display:block; clear:both;}
header .gnbBtn {display:none;}

header .gnb {width:58.5rem; margin:0 auto; z-index:155;}

header .gnb h1 {float:left; padding:1.75rem 0;}
header .gnb h1 a {display:block;}

header .gnb .gnbArea {float:right;}
header .gnb .gnbMenu {z-index:150;}

header .gnb .gnbMenu .oneD {float:left; width:7.5rem; height:5.65rem; text-align:center;}
header .gnb .gnbMenu .oneD > a {position:relative; display:inline-block; /*width:7.5rem;*/ padding:2.2rem 0 2.25rem; font-size:0.8rem; font-weight:bold; color:#fff; transition:all 0.5s;}

/*main_maun css*/
header .gnb .gnbMenu .oneD > a:before,
header .gnb .gnbMenu .oneD > a:after {content:''; position:absolute; bottom:20%; width:100%; height:2px; background:#fff; transform:scaleX(0); transition:transform 0.5s; }
header .gnb .gnbMenu .oneD > a:before {left:0; transform-origin:left;}
header .gnb .gnbMenu .oneD > a:after {right:0; transform-origin:right;}
/*header .gnb .gnbMenu .oneD:hover > a, header .gnb .gnbMenu .oneD:focus {color:#145DAB;}*/
header .gnb .gnbMenu .oneD:hover > a:before, header .gnb .gnbMenu .oneD:hover > a:after {transform:scaleX(1);}
header .gnb .gnbMenu .oneD:hover > a:before {transform-origin:right;}
header .gnb .gnbMenu .oneD:hover > a:after {transform-origin:left;}

/* maun scroll css */
header.roll {background:#fff;}
header.roll .gnb .gnbMenu .oneD > a, header.roll .gnb .gnbMenu .oneD:focus {color:#333;}
header.roll .gnb .gnbMenu .oneD:hover > a, header.roll .gnb .gnbMenu .oneD:focus {color:#145DAB;}

header .gnb .gnbMenu .twoD {display:none; width:7.5rem; height:9.3rem; padding:0.5rem 0; z-index:155; background:#145DAB;}
header .gnb .gnbMenu .twoD a {display:block; text-align:center; font-size:0.7rem; color:#fff; line-height:1.5rem; /*padding-left:1rem;*/ transition:all 0.5s;}
header .gnb .gnbMenu .twoD a:hover, header .gnb .gnbMenu .twoD a:focus {color:#ffc000;}

.mGnbBg {display:none; width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; top:0; left:0; z-index:99998;}

.mGnbArea {display:none; width:13.6rem; height:100%; background:#00a0c6; position:absolute; top:0; right:-15rem; z-index:99999;}

.mGnbArea .gnbHead {overflow:hidden; background:#00809e; padding:0.8rem 0.75rem 0.85rem;}

.mGnbArea .gnbHead .close {width:0.65rem; height:0.65rem; float:right;}
.mGnbArea .gnbHead .close img {width:0.65rem; height:0.65rem; float:right;}

/*
header .right.on .close { position: absolute; right: 24px; top: 24px; width: 12px; height: 12px; color:transparent;}
header .right.on .close:before { content: ""; position: absolute; left:45%; top: 0; width: 1px; height: 100%; background: #5a5a5a; transform: rotate(45deg);}
header .right.on .close:after { content: ""; position: absolute; right:45%; top: 0; width: 1px; height: 100%; background: #5a5a5a; transform: rotate(-45deg);}
*/

.mGnbArea .gnbBody .oneD {display:block; font-size:0.8rem; font-weight:bold; color:#fff; padding:0.55rem 0.75rem; border-bottom:1px solid #4dbdd7; background:#00a0c6 url("../img/btn/mgnb_oneD.png") no-repeat 94% 50%; background-size:0.75rem 0.75rem;}
.mGnbArea .gnbBody .oneD.on {background:url("../img/btn/mgnb_oneD_on.png") no-repeat 94% 50%; background-size:0.75rem 0.75rem;}

.mGnbArea .gnbBody .twoD {display:block; font-size:0.7rem; color:#333; padding:0.4rem 0.25rem 0.45rem; border-bottom:1px solid #d9d9d9;}
.mGnbArea .gnbBody .twoD.on {font-weight:bold;}

.mGnbArea .gnbBody .twoDArea {padding:0.8rem 0.75rem 0.85rem; background:#fff; display:none;}
.mGnbArea .gnbBody .thrDArea {background:#f7f7f7; padding:0.45rem 0.6rem; border-bottom:1px solid #d9d9d9; display:none;}
.mGnbArea .gnbBody .thrDArea a {display:block; font-size:0.65rem; color:#777; line-height:1.3rem;}

/* top_img */
.top_img {width:100%;}
.top_img .inner {width:100%; text-align: center; padding:14.525rem 0; color:#fff;
                /* Center slide text vertically 
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;*/
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;}
.top_img .text h2 {font-size:4rem;}
.top_img .text p {font-size:1.2rem;}

/* question */
.question {background:url(../img/question_bg.jpg)no-repeat center center; background-size:cover;}

.question .inner {width:58.5rem; margin:0 auto; padding:4.2rem 0 4.2rem 0; text-align:center; color:#fff;}

.question .inner h2 {font-size:1.75rem; padding:0 0 1.5rem 0;}
.question .inner p {padding:0 0 2.2rem 0;}

.question .inner ul li {width:13rem; margin:0 auto; text-align:left; }
.question .inner ul li:first-child {padding:0 0 0.5rem 0;}
.question .inner ul li span {position:relative; padding-left:1.9rem; color:#fff; font-size:0.9rem;}

.question .inner ul li span:before {content: ""; position: absolute; left:0; top:0.05rem; width:1.6rem; height:1.35rem;}
.question .inner ul li:nth-child(1) span:before {background:url(../img/icon/tel_icon_w.png)no-repeat;}
.question .inner ul li:nth-child(2) span:before {background:url(../img/icon/mail_icon_w.png)no-repeat;}

/* footer */
footer {width:100%; background:#fff;}

footer .inner {width:58.5rem; margin:0 auto; padding:1.3rem 0; font-size:0.65rem; color:#747474;}
footer .inner:after {content:''; display:block; clear:both;}

footer .inner .left {float:left;}
/* footer .inner .left a {display:block; padding:0.2rem 1.8rem 0 0;} */

footer .inner .right {float:left;}
footer .inner .right .info {padding:0 0 1rem 0;}
footer .inner .right .info span {padding:0 0 0 1rem;}

@media (max-width:1186px ){
    
    header .gnb, footer .inner {width:100%;}
    .question .inner {width:90%;}
    
    /* header */
    header .gnb h1 {padding:1.5rem 0 1.5rem 1rem;}
    
    /* top_img */
    .top_img .inner {padding:9.775rem 0;}
    .top_img .text h2 {font-size:3rem;}
    .top_img .text p {font-size:1.2rem;}
    
    /* footer */
    /* footer .inner .left a {padding:0.2rem 1.8rem 0 1rem;} */
    footer .inner .left img {padding:0 0 0 1rem;}
}


@media ( min-width:0px ) and ( max-width:900px ){
    
    /* header*/
    header .gnb .gnbArea {display:none}
	header .gnb h1 {float:; margin:auto; text-align:center;}
/*
	header .gnbBtn {display:block; position:absolute; top:1.8rem; right:4%}
	header .gnbBtn img {width:100%}
*/
    header .gnbBtn {display:block; position:absolute; top:2.4rem; right:4%; width:1.6rem; height:0.7rem; border-top:2px solid #fff; border-bottom:2px solid #fff;}
    header .gnbBtn:before {content: ""; position:absolute; right:0; top:50%; width:100%; height:0.1rem; background:#fff; margin-top:-0.05rem;}
    /* scroll gnbBtn color */
    header.roll .gnbBtn {border-color:#145DAB;}
    header.roll .gnbBtn:before {background:#145DAB;}

    header .left {float:none; text-align:center;}
    header .left h1 {float:none;}  
    
    /* top_img */
    .top_img .inner {padding:6.475rem 0;}
    .top_img .text h2 {font-size:2rem;}
    .top_img .text p {font-size:1.2rem;}
    
    /* footer */
    footer .left img {display:none;}
    footer .inner .right {width:100%; text-align:center;}
   
}