.inner {max-width: 1400px; width: 100%; margin: 0 auto;}

/* header */
#header {position: absolute; top: 0; left: 0; width: 100%; height: 100px; z-index: 100;}
#header .header_inner {position: relative; max-width: 1400px; width: 100%; height: 100%; margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, .2);}
#header .logo {position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: 0;}
#header .logo a {position: relative; display: inline-block; vertical-align: middle;}
#header .logo a img {height: 40px;}
#header .logo a img.wh {display: block;}
#header .logo a img.bk {display: none;}


/* header gnb */
.gnb {display: inline-block; width: 100%; text-align: center;}
.gnb > ul > li {position: relative; display: inline-block; margin: 0 20px;}
.gnb > ul > li > a {display: block; font-size: 18px; font-weight: 600; padding: 36px 0 37px; color: #fff;}

/* header util */
.util {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.util > ul > li {position: relative; display: inline-block; padding: 0 10px;}
.util > ul > li:after {content: '';position: absolute; top: 50%; right: 0; margin-top: -8px; background-color: rgba(255, 255, 255, .3); width: 1px; height: 16px;}
.util > ul > li:last-child:after {content: none;}
.util > ul > li:last-child{padding-right: 0;}
.util > ul > li > a {position: relative; display: block; font-size: 1rem; color: #fff;}

/* header sub white */
#header.wh {position: relative; background-color: #fff;}
#header.wh .logo a img.wh {display: none;}
#header.wh .logo a img.bk {display: block;}

#header.wh .gnb > ul > li > a {color: #333;}

#header.wh .util > ul > li:after {background-color: #eee;}
#header.wh .util > ul > li > a {color: #999;}

#header.wh .side_btn .menu_btn i {background-color: #0033c3;}


@media (min-width: 1025px) {
    /* header gnb depth */
    .gnb_depth {position: absolute; top: 100%; left: 50%; margin-left: -90px; width: 180px; background-color: rgba(255, 255, 255, .95); border-radius: 10px; transform: translateY(0); opacity: 0; visibility: hidden; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2); transition: all .35s; backdrop-filter: blur(5px); z-index: 100;}
    .gnb_depth > li + li {border-top: 1px solid #eee;}
    .gnb_depth > li > a {display: block; font-size: 16px; padding: 15px 10px; transition: all .3s;}
    .gnb_depth > li:hover > a {color: #0033c3 !important; margin-left: 10px;}

    /* header gnb hover depth */
    .gnb > ul > li:hover .gnb_depth {opacity: 1; visibility: visible; transform: translateY(-15px);}
}


.side_btn {display: block; position: relative; width: 80px; height: 80px; background: transparent; cursor: pointer; z-index: 999;}
.side_btn {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.side_btn .menu_btn {display: block; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; width: 16px; height: 16px;}
.side_btn .menu_btn i {position: absolute; display: block; width: 6px; height: 6px; background: #fff; transition: all .1s;}
.side_btn .menu_btn i:nth-child(1) {left: 0; top: 0;}
.side_btn .menu_btn i:nth-child(2) {right: 0; top: 0;}
.side_btn .menu_btn i:nth-child(3) {left: 0; bottom: 0;}
.side_btn .menu_btn i:nth-child(4) {right: 0; bottom: 0;}

/* sitemap */
.sitemap {position: fixed; top: 0; right: 0; width: 100%; height: 100%;}
.sitemap {opacity: 0; visibility: hidden;}
.sitemap_menu {position: absolute; top: 0; right: -100%; width: 35%; height: 100%; background-color: #000;  z-index: 900; transition: all .3s;}
.sitemap_menu .site_inner {display: table; width: 100%; height: 100%; padding: 0 60px;}
.sitemap_menu .site_table {display: table-cell; vertical-align: middle;}
.sitemap_menu .menu_item {display: block; z-index: 2;}
.sitemap_menu .menu_item a {position: relative; display: inline-block; padding: 15px 0; margin-bottom: 10px;}
.sitemap_menu .menu_item a:before {content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(0, 51, 195, .5); transition: all .3s; z-index: 1;}
.sitemap_menu .menu_item a:hover:before {width: 100%;}
.sitemap_menu .menu_item a b {position: relative; font-size: 20px; font-weight: 800; color: #3D63CC; margin-right: 20px; vertical-align: middle; z-index: 10;}
.sitemap_menu .menu_item a strong {position: relative; font-size: 32px; font-weight: 800; color: #fff; vertical-align: middle; z-index: 10;}

.sitemap .site_util {border: 1px solid rgba(255, 255, 255, .2); border-width: 1px 0 1px 0; padding: 20px 0;}
.sitemap .site_util ul li {display: block; margin: 10px 0;}
.sitemap .site_util ul li a {font-size: 1rem; color: #fff;}
.sitemap .site_info {padding: 20px 0;}
.sitemap .site_info ul li {display: block; font-size: 15px; color: #999;}
.sitemap .site_info ul li + li {display: inline-block; margin-right: 15px;}


/* sitemap menuopen */
.menu_open .sitemap {opacity: 1; visibility: visible;}
.menu_open .sitemap_menu {right: 0;}

.menu_open .side_btn {position: fixed; transform: none; top: 0;}
.menu_open .side_btn .menu_btn i:nth-child(1) {width: 100%; height: 3px; transform: rotate(45deg); top: 50%;}
.menu_open .side_btn .menu_btn i:nth-child(2) {width: 100%; height: 3px; transform: rotate(-45deg); top: 50%;}
.menu_open .side_btn .menu_btn i:nth-child(3),
.menu_open .side_btn .menu_btn i:nth-child(4) {display: none;}

/* .menu_open .sitemap_bg {opacity: 1; visibility: visible;} */

/* quick menu */
.quick_menu {position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 100;}
.quick_menu .quick_site {position: relative; display: block; width: 60px; height: 240px;}
.quick_menu .quick_site a {display: table; width: 100%; height: 100%; text-align: center;}
.quick_menu .quick_site:first-child a {background-color: #0033c3; border-radius: 10px 0 0 0;}
.quick_menu .quick_site:last-child a {background-color: #1c1e26; border-radius: 0 0 0 10px;}
.quick_menu .quick_site a span {display: table-cell; vertical-align: middle; color: #fff; font-size: 15px; font-weight: 600; writing-mode: vertical-rl;}

.quick_panel {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; margin: 0 auto; background-color: rgba(0, 0, 0, .6); overflow-x: hidden; overflow-y: auto;}
.quick_panel .depth_box {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); max-width: 1400px; margin: 0 auto; overflow: hidden; background-color: #fff; border-radius: 20px;}
.quick_panel .depth_box .tit {position: relative; display: block; background-color: #0033c3; text-align: center; font-family: 'GmarketSansMedium'; padding: 30px 0 25px;}
.quick_panel .depth_box .tit h3 {font-size: 24px; color: #fff; line-height: 1;}
.quick_panel .depth_box .tit .close {position: absolute; top: 50%; right: 20px; width: 40px; height: 40px; margin-top: -20px; background: url(/images/page/common/icon_close.png) no-repeat 50% 50%; background-size: 30px auto;}
.quick_panel .depth_menu {padding: 60px 60px; font-size: 0;}
.quick_panel .depth_menu li {display: inline-block; width: calc(25% - 30px); margin: 0 15px; padding: 15px 0; background: url(/images/page/common/icon_link.png) no-repeat right 50%; border-bottom: 1px solid #eee;}
.quick_panel .depth_menu li a {display: block; font-size: 18px; font-weight: 600;}
.quick_panel .depth_menu li a:hover {color: #0033c3; text-decoration: underline;}

/* 만족도조사 */
.research {width: 1400px; margin: 0 auto 150px;}
.research .research_box {border: 1px solid #ddd; padding: 25px 30px;}
.research .top {overflow: hidden; border-bottom: 1px solid #eee; padding-bottom: 15px; margin-bottom: 15px;}
.research .top p {float: left; font-size: 18px; font-weight: 600;}
.research .top .input_radio {float: right; text-align: right;}
.research .top .input_radio .radio label {margin-left: 10px;}
.research .bottom .input_txt {width: 100%;}
.research .bottom .input_txt input {width: calc(100% - 135px);}
.research .bottom .input_txt .btn {width: 120px; min-width: auto;}

/* footer */
#footer {position: relative; background-color: #1c1e26; padding: 60px 0 70px;}
#footer .foot_logo {opacity: .5; height: 40px;}
#footer .scroll_top {position: absolute; bottom: 0; right: 0; display: table; width: 80px; height: 80px; background-color: #0033c3; text-align: center; z-index: 10;}
#footer .scroll_top span {display: table-cell; vertical-align: middle; font-size: 18px; font-weight: 800; color: #fff; text-transform: uppercase;}
#footer .scroll_top span:before {content: ''; display: block; width: 16px; height: 16px; background: url(/images/page/main/icon_top_arw.png) no-repeat 50% 50%; background-size: 16px auto; margin: 0 auto;}

#footer .foot_top {border-bottom: 1px solid rgba(255, 255, 255, .2); padding-bottom: 40px;}
#footer .foot_top:after,
#footer .foot_bottom:after {content: ''; display: block; clear: both;}

#footer .foot_left {float: left; width: 50%;}
#footer .foot_info {margin-top: 30px;}
#footer .foot_info li {font-size: 1rem; color: #999; margin-right: 20px;}
#footer .foot_info li + li {display: inline-block;}

#footer .foot_right {float: right; width: 50%;}
.foot_family {position: relative; text-align: right;}
.family_site {position: relative; display: inline-block;}
.family_site + .family_site {margin-left: 20px;}
.family_site .family_btn {position: relative; background: #fff; width: 200px; height: 40px; text-align: left; color: #666; font-size: 14px; padding: 0 10px; letter-spacing: -0.05rem;}
.family_site .family_btn:after {content: ''; position: absolute; top: 50%; right: 10px; width: 0; height: 0; margin-top: -3px; border-top: 6px solid #ddd; border-left: 5px solid transparent; border-right: 5px solid transparent; transition: all .3s;}
.family_site ul {position: absolute; top: 50px; left: 0; display: none; width: 100%; max-height: 167px; overflow-y: auto; background: #f8fafb; position: absolute; z-index: 10; text-align: left;}
.family_site ul li {padding: 10px 10px; border-top: 1px solid #eee; font-size: 14px;}
.family_site ul li:first-child {border-top: 0;}
.family_site ul li a {color: #666; display: block;}
.family_site ul li a:hover {color: #0033c3;}
.family_site .family_btn.on:after {transform: rotate(180deg);}


#footer .foot_bottom {padding-top: 30px;}
#footer .copyright p {color: #fff; font-family: 'Play';}

#footer .foot_menu {margin-left: -12px; text-align: right;}
#footer .foot_menu li {position: relative; display: inline-block; padding: 0 12px;}
#footer .foot_menu li:after {content: ''; position: absolute; top: 50%; right: 0; margin-top: -2.5px; margin-right: -2.5px; width: 5px; height: 5px; border-radius: 50%; background-color: rgba(255, 255, 255, .3);}
#footer .foot_menu li:last-child:after {content: none;}
#footer .foot_menu li a {font-size: 1rem; color: #fff;}


@media (max-width: 1400px) {
    .inner {max-width: none; padding: 0 4%;}

    /* header */
    #header .header_inner {max-width: none; width: calc(100% - 8%);}

    /* header gnb */
    .gnb > ul > li > a {font-size: 1rem;}
    
    /* header util */
    .util {right: 5%;}

     /* 만족도조사 */
     .research {width: 100%; padding: 0 4%;} 
}

@media (max-width: 1200px) {
    /* header */
    #header .logo a img {height: 30px;}
    
    .gnb > ul > li > a {font-size: 1rem;}


    #footer .scroll_top {width: 60px; height: 60px; top: -30px;}
    #footer .scroll_top span {font-size: 1rem;}
}

@media (max-width: 1024px) {
    /* header */
    #header {height: 80px;}
    #header .gnb_wrap {display: none;}

    /* sitemap */
    .sitemap_menu {width: 50%;}
    .sitemap_menu .menu_item a strong {font-size: 24px;}
    
    .quick_menu {display: none;}

    /* 만족도조사 */
    .research .top p {float: none;}
    .research .top .input_radio {float: none; text-align: left; margin-top: 15px;}
}

@media (max-width: 768px) {
}

@media (max-width: 576px) {
    /* sitemap */
    .sitemap_menu {width: 80%;}
    .sitemap_menu .menu_item a strong {font-size: 20px;}

    /* 만족도조사 */
    .research .top p {font-size: 16px; background-position: 0 5px;}
    .research .research_box {padding: 20px 20px;}

    /* footer */
    #footer {padding: 50px 0 50px; text-align: center;}
    #footer .foot_left,
    #footer .foot_right {float: none; width: 100%;}
    #footer .foot_logo {height: 30px;}
    .foot_family {text-align: center; margin-top: 20px;}
    #footer .foot_menu {text-align: center; margin-top: 10px;}

}

@media (max-width: 420px) {
    /* sitemap */
    .sitemap_menu .site_inner {padding: 0 40px;}
    .sitemap_menu .menu_item a {padding: 10px 0;}
    .sitemap_menu .menu_item a b {font-size: 1rem;}
    .sitemap_menu .menu_item a strong {font-size: 17px;}

    /* 의견보내기 */
    .research .bottom .input_txt input {width: 100%; margin-bottom: 5px;}
    .research .bottom .input_txt .btn {width: 100%; margin: 0;}

    
}