@charset "utf-8";

/* .wrap .container { max-width: 1800px; width: 1600px; margin: 0 auto; } */
.wrap .container { margin: 0 auto; }
.wrap .s_container { width: 1300px; margin: 0 auto; }

/* header */
.wrap header .container { width: 100%; max-width: 1320px; }
header { z-index: 12; position: fixed; width: 100%; margin: 0 auto;background: transparent; }
header.sub { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
header.on { background: #202838; }
header.sub.on { border-bottom: none; }
header > .container { display: flex; align-items: center; justify-content: space-between; }
header .logo { display: flex; align-items: end; gap: 50px; }
header .logo > h1 { font-size: 0; width: 200px; height: 44px; background: url(../images/shinhwa_logo_wh.png) no-repeat center center / contain; cursor: pointer; }
header .menu { display: flex; align-items: center; gap: 145px;margin-right:-10px; }
header .menu > ul { display: flex; align-items: center; }
header .menu > ul > li {   }
header .menu > ul > li + li { margin-left:30px; }
header .menu > ul > li > a { font-size: 2rem; color: #fff; font-weight: 500; cursor: pointer; padding: 36px 10px; display: block; }
header .menu > ul > li > a.external_link::after { content: '';display: inline-block;width: 16px;height: 16px;background: url(../images/ico_external_link.png) no-repeat center 100%;vertical-align: middle;margin-left: 3px; }

header .mo_menu { display: none;align-items: center; }
header .mo_menu .mo_search { display: block;position: relative;margin-right: 10px; }
header .mo_menu .mo_search > button { font-size: 0; box-sizing: unset;width: 31px; height: 27px; }
header .mo_menu .mo_search > button::after { content: "\e97a";position: absolute;top: 50%;right: 0;transform: translate(0, -50%);color: #fff;font-family: "xeicon";font-size: 3rem }
header .mo_menu .btn_menu { display: inline-block; font-size: 0; box-sizing: unset; width: 27px; height: 27px; background: url(../images/icon_menu.png) no-repeat center center; background-size: contain; padding: 10px; cursor: pointer; }
header .mo_menu .btn_call { display: inline-block; font-size: 22px;color:#fff; box-sizing: unset; width: 27px; line-height: 27px; text-align: center;height: 27px; padding: 10px; cursor: pointer; overflow: hidden;}
header .mo_menu .btn_call::before { display: block;width: 27px; line-height: 28px; text-align: center;height: 27px;font-size:24px;overflow: hidden;}
/* .li_siteMap { font-size: 0; box-sizing: unset; width: 31px; height: 27px; background: url(../images/icon_menu.png) no-repeat center center; padding: 0 45px; position: absolute; right: 0; cursor: pointer; }
.li_siteMap.open { background: url(../images/icon_close.png) no-repeat center center; } */

header .dep2 { position: absolute; top: 100%; background: #fff; width: 111px; width: 250px; display: none; box-shadow: 2px 2px 5px 1px rgb(0 0 0 / 10%); }
header .dep2 a { display: block; padding: 0 24px; line-height: 50px; font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid #ddd; }
header .dep2 li:last-child a { border-bottom: 0; }
header .dep2 a:hover { background: #202838; color: #fff; }

/* .siteMap { position: absolute; top: 108px; background: rgba(0,0,0,0.8); width: 100%; padding: 45px 100px; display: none; }
.siteMap.open { display: block; }
.siteMap > ul { display: table; width: 100%; }
.siteMap > ul > li { width: 20%; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 0 30px; display: table-cell; }
.siteMap > ul > li:last-child { border-right: 0; }
.siteMap > ul > li a { color: #fff; }
.siteMap > ul > li > a { display: block; padding: 0px 0px; font-size: 24px; height: 40px; line-height: 40px; font-weight: 400; }
.siteMap > ul > li > .site_map_dep2 { position: relative; display: block; width: auto; padding: 0px 0px; margin-top: 15px; }
.siteMap > ul > li > .site_map_dep2 > li > a { display: block; line-height: 20px; padding: 5px 0px; font-size: 15px; text-align: left; color: #fff; position: relative; } */

header .search_box > .search { display: block;position: relative;width: 200px;height: 40px;line-height: 40px;border-bottom: 1px solid #fff; }
header .search_box > .search input { color: #fff;font-size: 1.6rem;position: absolute;top: 0;left: 0;height: inherit;width: calc(100% - 24px); }
header .search_box > .search input::placeholder { color: #fff; }
header .search_box > .search > button { display: block;position: absolute;right: 0;top: 0;width: 24px;height: inherit;cursor: pointer;font-size: 0; }
header .search_box > .search > button::after { content: "\e97a";position: absolute;top: 50%;right: 0;transform: translate(0, -50%);color: #fff;font-family: "xeicon";font-size: 2.0rem }



/*nav*/
nav { position: fixed; height: 100vh; background: #fff; z-index: 13; width: 100%; right: -100%; background: #fff; transition: all 0.4s; }
nav.on { right: 0; }
nav > .nav_top { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dcdce0; height: 78px; }
/* nav > .nav_top > a { padding: 14px 24px; font-size: 2rem; font-weight: 700; }
nav > .nav_top > a:after { content: '\e93f'; font-family: "xeicon"; display: inline-block; font-size: 1.8rem; margin-left: 2px; vertical-align: middle; margin-bottom: 2px; } */
nav > .nav_top > span { font-size: 0; box-sizing: unset; width: 31px; height: 27px; background: url(../images/icon_close.png) no-repeat center center; padding: 10px; cursor: pointer; filter: brightness(0); margin-left: auto; margin-right: 15px; }
/* nav > .nav_top > span:after { content: '\e921'; font-family: "xeicon"; color: #000; font-size: 3rem; padding: 14px 25px 14px 14px; cursor: pointer; font-style: normal; display: block; font-weight: 500; } */
nav > .nav_bottom { padding: 24px; padding-bottom: 150px; overflow-y: scroll; height: 100%;position: relative;}
nav > .nav_bottom > ul > li {  }
nav > .nav_bottom > ul > li > a { padding: 15px 0; display: block; font-weight: 700; position: relative; font-size: 2.3rem;cursor: pointer;}
nav > .nav_bottom > ul > li > a.item:after { content: '\e942'; font-family: "xeicon"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 2.3rem; }
nav > .nav_bottom > ul > li > a.item.on:after { content: '\e945'; }
nav > .nav_bottom ul.nav_dep2 { display: none; }
nav > .nav_bottom > ul > li > a.item.on + ul.nav_dep2 { display: block; }
nav > .nav_bottom ul.nav_dep2 > li {  }
nav > .nav_bottom ul.nav_dep2 > li > a { padding: 15px 0 15px 20px; display: block; font-size: 2.1rem; font-weight: 500; }
nav > .nav_bottom ul.nav_dep2 > li:last-child a { padding-bottom: 30px; }
nav > .nav_bottom ul.nav_dep3 > li > a { display: block; padding: 0 0 20px 10px; font-size: 1.5rem; font-weight: 500; }
nav > .nav_bottom ul.nav_dep3 > li > a::before { content: '-'; display: inline-block; margin-right: 5px; }

nav > .bottom { position: absolute;bottom:0;left:0px;right:0px;padding: 24px; text-align: center;font-size:0px;background: #eee;}
nav > .bottom > img { display:inline-block;width:40px;padding:0px;margin:0px; }
nav > .bottom > img + img { margin-left:10px; }


/* right paging */
.pagination { position: fixed; right: 0; top: 0; bottom: 0; width: 120px; padding: 40px 0; background: #202838; z-index: 5; box-shadow: -5px 0 5px 1px rgb(0 0 0 / 15%); }
.pagination ul { display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pagination ul > li { padding: 16px; cursor: pointer; }
.pagination ul > li > a { font-size: 0; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; display: block; }
.pagination ul > li.on > a { background: rgba(255, 255, 255, 1); position: relative; }
.pagination ul > li.on > a:after { content: ''; width: 28px; height: 28px; border: 1px solid #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pagination span { writing-mode: vertical-rl; font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); font-weight: 500; text-transform: uppercase; position: absolute; left: 50%; transform: translateX(-50%); bottom: 60px; }
.pagination span:after { content: '\e9b6'; color: rgba(255, 255, 255, 0.5); font-family: "xeicon"; transform: rotate(180deg); font-size: 2.3rem; display: inline-block; padding-bottom: 5px; }

.pagination .bottom { position: absolute;bottom:15px;left:0px;right:0px;font-size:0px;text-align: center;}
.pagination .bottom > img { display:inline-block;width:28px;padding:0px;margin:0px;opacity: 0.8;cursor: pointer;}
.pagination .bottom > img + img { margin-left:4px; }

/* footer */
/* footer { background: #394553; padding: 120px 0; }
footer > .container { display: flex; align-items: flex-start; justify-content: space-between; padding: 0 30px; }
footer > .container > div { width: 50%; }
footer .left > img { margin-bottom: 40px; }
footer .left > ul { margin-top: 100px; }
footer .left > ul a { display: inline-block; font-size: 1.6rem; color: #c7cfdf; padding-top: 16px; }
footer .left > ul > li:first-child > a { padding-top: 0; }
footer .left > .bottom > span { display: block; font-size: 1.8rem; color: #c7cfdf; font-weight: 700; margin-bottom: 10px; }
footer .left > .bottom > b { display: block; font-size: 3.2rem; color: #fff; margin-bottom: 14px; }
footer .left > .bottom > p { font-size: 1.6rem; font-weight: 300; color: #7c8793; }
footer .right { display: flex; flex-direction: column; align-items: flex-start; gap: 60px; }
footer .right > .mid > b { display: block; font-size: 1.6rem; color: #c7cfdf; margin-bottom: 14px; }
footer .right > .mid > ul { margin-bottom: 14px; display: flex; align-items: center; }
footer .right > .mid > ul > li { font-size: 1.6rem; color: #7c8793; font-weight: 300; }
footer .right > .mid > ul > li:after { content: ''; width: 1px; height: 15px; background: #7c8793; margin: 0 12px 2px; display: inline-block; vertical-align: middle; }
footer .right > .mid > ul > li:last-child:after { display: none; }
footer .right > .mid > p { font-size: 1.6rem; color: #7c8793; font-weight: 300; }
footer .right > .bottom { display: flex; align-items: center; gap: 10px; }
footer .right > .bottom img { cursor: pointer; width: 18%; } */

/* footer { padding: 120px 0; } */
footer > .container { display: block;width: 100%; align-items: flex-start; justify-content: space-between; }
footer > .container .f_wrap { display: block;background: #333;padding: 40px; }
footer > .container .f_wrap .inner { display: block;max-width: 1320px;margin: 0 auto; }
footer > .container .f_wrap .inner .top { display: flex; }
footer > .container .f_wrap .inner .top > img { width: 14.5rem;height: 3.2rem;align-items: center; }
footer > .container .f_wrap .inner .top > a { display: block;margin-left: auto;font-size: 1.6rem;color: #fff; }
footer > .container .f_wrap .inner .mid { display: block;margin-top: 3rem;flex-wrap: wrap; }
footer > .container .f_wrap .inner .mid p { display: block;color: #999;font-size: 14px;-webkit-text-fill-color: #999; }
footer > .container .f_wrap .inner .mid p + p { margin-top: 8px; }
footer > .container .f_wrap .inner .mid p span { display: inline-block;color: #999;-webkit-text-fill-color: #999; }
footer > .container .f_wrap .inner .mid p span + span::before { content: '';width: 1px;height: 12px;background-color: #444;display: inline-block;margin: 0 8px 0 6px;vertical-align: -1px; }
footer > .container .f_wrap .inner .mid p:last-child { margin-top: 4rem;padding-top: 4rem;border-top: 1px solid #444; }



@media all and (max-width: 1400px) {
    footer > .container { padding: 0; }
}

@media all and (max-width: 1400px) {
    header .logo > h1 { width: 130px; }
    footer .right > .mid > ul { flex-direction: column; align-items: flex-start; gap: 14px; }
    footer .right > .mid > ul > li:after { display: none; }
}
@media all and (max-width: 940px) {
    .pagination { display: none; }
    header { padding-right: 0; padding: 15px 0; }
    header .menu > ul { display: none; }
    header .mo_menu { display: flex; }
    header .mo_menu .btn_menu { background-size: unset; }
    header .search_box { display: none; }
    footer > .container .f_wrap { padding: 40px 15px; }

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

    /* footer { padding: 60px 0; } */
    footer > .container { flex-direction: column; }
    footer > .container > div { width: 100%; }
    /* footer .left > img { width: 50%; }
    footer .left > ul { margin-top: 20px; display: flex; align-items: center; gap:20px; }
    footer .left > ul a { padding-top: 0; }
    footer .right { gap: 20px; }
    footer .right > .top > span { margin-bottom: 20px; }
    footer .right > .top > b { margin-bottom: 10px; } */
}
@media all and (max-width: 820px) {
    footer > .container .f_wrap .inner .top { flex-direction: column; }
    footer > .container .f_wrap .inner .top > a { margin: 3rem 0 0 0; }
    footer > .container > .left { border-bottom: 2px solid #7e8792; padding-bottom: 30px; margin-bottom: 30px; }
    footer > .container .f_wrap .inner .mid p span { display: block;margin-top: 8px; }
    footer > .container .f_wrap .inner .mid p span + span::before { display: none; }

}