@charset "utf-8";

/*body*/
body{background: #fff;}
.wrap{width:1280px; margin:0 auto;}
.header{width:100%; height:auto; margin-top:25px; }
.inner {width:1280px; height:auto; overflow:hidden;}
button {border:none; box-sizing:border-box;}

/*header*/
.header { width:1280px; position:absolute; top:0px; z-index:50; }
.header .logo{ margin-bottom:12px;}

.header .header_bar{height:55px; background-color:#16afb7; border-radius: 6px;}

.header .gnb {width:100%; }
.header .gnb {text-align: left; }
.header .gnb ul > li {padding:0 2%; }
.header .gnb > ul > li {display:inline-block; height:55px; font-weight:600; padding:0 4%; margin-right:-5px;}

.header .gnb ul > li > button {position:relative; color:#fff; display:block; width:100%; font-weight:600; height:100%; background-color:transparent;}
.header .gnb ul > li > button:hover {color:#f9f871;}
.header .gnb ul > li > button:after {content:""; display:block; width:100%; height:1px; background-color:#f9f871; position:absolute; top:42px; opacity:0;}
.header .gnb ul > li > button:hover:after {opacity:1;}
.header .gnb ul > li:last-child {margin-right:0;}

/* sub menu */
.header .btn_gnb {display:none; top:-25px;}
.header .gnb ul > li:hover > .gnb_sub {display:block;}
.header .gnb .gnb_sub {position:fixed; width:80%; height:auto; left:60%; top:142px; margin-left:-640px; text-align:left; background-repeat:no-repeat; background-position:left center; display:none;}
.header .gnb ul > li:nth-child(2) .gnb_sub{ left:69%; }
.header .gnb .gnb_program{ position: absolute; top:100px;}
.header .gnb .gnb_sub li a {color:#000; font-weight:600;}
.header .gnb .gnb_sub:before {content:""; display:block; position:fixed; width:1280px; height:5px; left:50%; top:100px; margin-left:-600px; }
.header .gnb .gnb_sub:after {content:""; clear:both; display:block;}
.header .gnb .gnb_sub .gnb_intro {float:left; width:34%; margin:20px 0 0 3%}
.header .gnb .gnb_sub .gnb_intro p {padding:0 0 15px 46%; font-size:20px; /*border-bottom:1px solid #222;*/}
.header .gnb .gnb_sub .gnb_intro span {display:block; margin:15px 0 0 46%; font-size:14px; font-weight:400; color:#666;}

.header .gnb .gnb_sub ul {float:left; width: 100%; padding-top:10px;}
.header .gnb .gnb_sub ul:after {content:""; clear:both; display:block;}
.header .gnb .gnb_sub ul li {float:left; height:auto; }
.header .gnb .gnb_sub ul li a {display:block; transition:.2s; padding:4px 6px;}
.header .gnb .gnb_sub ul li a:hover {transform:translateY(-1px); color:#fff; background:#16afb7; border-radius: 3px;}

.header .header_account {position:absolute; right:0; top:auto; width:640px;  text-align:right; line-height:3; margin-right: 20px}
.header .header_account a {display:inline-block; height:23px; line-height:1.2; font-size:14px; margin-left:20px;}

.header .header_account .header_hello{vertical-align: bottom;}

.header .header_account .header_member,
.header .header_account .header_market,
.header .header_account .header_logout{width:20px;}

.header .header_account .header_member{background:url(../../img/info_btn_white.svg) center center no-repeat; margin-top: 5px}
.header .header_account .header_market{background:url(../../img/cart_btn.png) center center no-repeat;}
.header .header_account .header_logout{background:url(../../img/logout_btn_white.svg) center center no-repeat;margin-top: 5px}

.header.on .header_account {display:none;}

/* main contents*/

main{ margin-top:165px; overflow:hidden; margin-bottom:30px; }
main .inner {overflow: hidden;}
main .inner h2{ font-size:18px; margin-bottom: 20px;}
main .inner h2 img{ padding:0 7px;}

.red_color{ color:#f07170; }
.green_color{ color: hsl(183, 88%, 33%); }
.gray_color{ color:#c3c3c3; }

.column_01{ float:left; width:235px; margin-right:20px; }

/* footer */
footer{width:100%; border-top:1px solid #b7b7b7; padding:20px 0;}
footer ul{ width:60%; margin:0 auto; overflow: hidden; }
footer ul li{ float:left; margin-right:3%; font-size:12px; text-align: center;}
footer ul li:last-child{ margin-right:0;}

/*Mobile*/ 
@media only screen and (max-width:1280px) {
    .wrap{overflow-y: auto;}        
}

@media all and (max-width:960px){

    .wrap{ width:100%; margin:2% auto 0;}

    /*layout*/
    .header { width:100%; top:0; }
    .header .logo img{ position:absolute; left:50%; top:-15px; transform: translateX(-50%); }
    .header .header_bar{ background-color: rgba(255,255,255,0); box-shadow:none; height:20px; border-bottom:1px solid #16afb7; border-radius: 0px;}

    .header .header_top {margin:0;}
    .header .inner {width:100%;}
    
    .header .gnb {width:70%; top:50px;}
    .header .btn_gnb { display:block; width:70px; height:50px; position:absolute; background:url(../../img/menu_btn.png) center center no-repeat; z-index: 60;}
    .header .btn_gnb.gnb_on { display:block; width:70px; height:50px; position:fixed; top:5px; background:url(../../img/close_btn.png) center center no-repeat; z-index: 60;}
    .header .btn_gnb span {display:block; color:#fff; font-size:15px; line-height:1; letter-spacing:1.2px;}
    .header .btn_gnb.gnb_on ~ .gnb {top:0; left:0; }
    .header .btn_gnb.gnb_on ~ .gnb:before {width:70%; top:50px; }
    .header .header_account .header_member{background:url(../../img/info_btn_m.png) center center no-repeat;}
    .header .header_account .header_market{background:url(../../img/cart_btn_m.png) center center no-repeat;}
    .header .header_account .header_logout{background:url(../../img/logout_btn_m.png) center center no-repeat;}

    footer ul{ width:90%;}
    footer ul li{ float:none; }
    
 	/*buttons*/
    .btn_large {width:260px; height:48px; font-size:16px;}    

    .header .gnb {position:fixed; top:70px; left:-100%; height:100%; text-align:left; background-color:#fff; transition:all 0.3s;}
    .header .gnb ul > li {display:block; padding:0; margin-right:0; height:auto;}
    .header .gnb ul > li > button {padding:16px 0 16px 30px; background-size:12px; color:#000; font-size:15px; text-align:left;}
    .header .gnb ul > li.on > button {border-left:4px solid #2E62AE;}
    .header .gnb ul > li > button:hover {border-bottom:1px solid #d5d5d5; color:#000;}
    .header .gnb ul > li > button:after {display:none;}


    .header .gnb .gnb_sub {position:static; display:block; background-image:none; height:auto; width:100%; margin:0; display:none;}
    .header .gnb .gnb_sub:before {display:none;}
    .header .gnb .gnb_sub .gnb_intro {display:none;}
    .header .gnb .gnb_sub ul {float:none; width:100%; margin:0;}
    .header .gnb .gnb_sub ul li {float:none; display:block; margin:0;}
    .header .gnb .gnb_sub ul li a {padding:11px 0 11px 44px;  font-size:14px;}
    .header .gnb .gnb_sub ul li a:hover {transform:none; color:#000; background-color:#ccc;}
    
    .header .btn_gnb.gnb_on ~ .gnb:before {content:""; display:block; position:fixed; width:50%; height:5px; right:2%; top:70px; z-index:50;}
    header .btn_gnb.gnb_on:after {content:""; display:block; width:30%; height:100%; background-color:rgba(0,0,0,.6); position:fixed; right:0; top:0; z-index:-1;}
    
    .header .gnb .gnb_sub {display:none;}
    .header .gnb ul > li:hover .gnb_sub {display:none;}
    .header .gnb ul > li.active .gnb_sub {display:block;}
    .header .gnb ul > li.active > button {background:#22bcad; color:#fff; padding-left:26px; border-top-right-radius: 8px;}

    .header .header_account:after {content:""; clear:both; display:block;}
    .header .header_account {position:static; margin-left:0; width:100%; text-align:center; background:#ededed; border-bottom-right-radius: 8px;} 

    .header .header_account a {display:block; float:left; height:40px; margin:0; color:#000; font-size:13px; color:#555; font-weight:600;}

    .header .header_account .header_hello{width:90%; height:20px; padding-left:10%; padding-top:22px;}
    .header .header_account .header_member,
    .header .header_account .header_market,
    .header .header_account .header_logout{margin-top:10px; padding-bottom:10px;}
    
    .header .header_account .header_member{width:33.3%;}
    .header .header_account .header_market {width:33.3%;}
    .header .header_account .header_logout{width:33.3%;}

    .header.on .header_account {display:block;}   

    main{ margin-top:80px; }
    main .inner{ width:100%; }
}
@media all and (max-width:560px){
    .header .logo img{ top:-12px; width:20%; }
}
@media all and (max-width:480px){
    .header .logo img{ top:-8px; width:20%; }
}
@media all and (max-width:390px){
    .header .logo img{ top:-7px; width:25%; }

}