@charset "utf-8";

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

/* header */
.wrap header .container { width: 100%; max-width: unset; padding-left: 30px; }
header { z-index: 6; position: fixed; width: 100%; margin: 0 auto; padding-right: 120px; 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 .left { display: flex; align-items: end; gap: 50px; margin-bottom: 10px; }
header .left > h1 { font-size: 0; width: 274px; height: 28px; background: url(../images/logo_white.png) no-repeat center center / contain; cursor: pointer; }
header .right { display: flex; align-items: center; gap: 145px; }
header .right > ul { display: flex; align-items: center; }
header .right > ul > li { }
header .right > ul > li > a { font-size: 2rem; color: #fff; font-weight: 500; cursor: pointer; padding: 44.5px 24px; display: block; }
header .right > i { display: none; font-size: 0; box-sizing: unset; width: 31px; height: 27px; background: url(../images/icon_menu.png) no-repeat center center; background-size: contain; padding: 10px; cursor: pointer; }
.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; }


/*nav*/
nav { position: fixed; height: 100vh; background: #fff; z-index: 11; width: 100%; right: -100%; background: #fff; z-index: 11; 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: calc(100vh - 166px);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.5rem; }
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.3rem; 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 { width:45% !important; }
footer .right { width:55% !important; }
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.8rem; 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:first-child {padding-left: 70px;position: relative;}
footer .right > .mid > ul > li > span { display:inline-block;vertical-align: bottom;color:#c7cfdf;font-weight: 500;width:70px;font-size: 1.6rem;position: absolute;top:0px;left:0px;}
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 > ul + ul { margin-top:-7px; }
footer .right > .mid > p { font-size: 15px; color: #7c8793; font-weight: 300; }
footer .right > .mid > span { font-size: 15px;line-height:20px; color: #7c8793; font-weight: 300;display:block;margin-top:20px; }
footer .right > .bottom { display: flex; align-items: center; gap: 10px; }
footer .right > .bottom img { cursor: pointer; width: 18%; }

.pop { display:block;position:fixed;top:0px;left:0px;z-index:10;will-change: transform, opacity;background-color:#fff;padding:0px; box-shadow: 2px 2px 5px 1px rgb(0 0 0 / 10%);}
.pop > img { display:block; }
.pop > img[onclick] { cursor:pointer; }
.pop > p { display:block;line-height:20px;padding:10px 15px;position: relative;background-color:#394553;}
.pop > p > label { position:relative; display:inline-block;margin-right:0px; padding-left:25px; height:20px; color:rgba(255,255,255,0.8); text-align:left; line-height:20px; vertical-align:middle; cursor:pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow:hidden; font-size:0px; }
.pop > p > label > input[type=checkbox] { display:none; }
.pop > p > label > input[type=checkbox] + span  { display:inline-block;line-height:20px;vertical-align:bottom;font-size:13px;margin-left:2px;  }
.pop > p > label > input[type=checkbox] + span:before { position:absolute; top:0px; left:0px; width:16px;height:16px; ;border-radius: 3px; border: 2px solid rgba(255,255,255,0.4); content: '';  }
.pop > p > label > input[type=checkbox]:checked + span  { color:#fff; -webkit-tap-highlight-color:transparent; }
.pop > p > label > input[type=checkbox]:checked + span:before {  background: #fff; font-size:16px;text-align:center;line-height:16px; font-family: 'xeicon' !important; display: inline-block; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#202838; content: "\e928"; }
.pop > p > a { position: absolute;top:8px;right:15px;background: #7c8793;color:#fff;font-weight: 600;display:block; border: 1px solid #7c8793;line-height: 22px;padding:0px 10px;font-size: 13px;cursor: pointer;}

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

@media all and (max-width: 1500px) {
    footer .right > .mid > ul { flex-direction: column; align-items: flex-start; gap: 14px; }
    footer .right > .mid > ul > li:after { display: none; }
	footer .right > .mid > ul > li { padding:0px !important; }
	footer .right > .mid > ul > li > span { display:block;position: relative;margin-bottom:12px;}
	footer .right > .mid > ul + ul { margin-top:25px; }
}
@media all and (max-width: 940px) {
    .pagination { display: none; }
    header { padding-right: 0; padding: 15px 0; }
    header .right > ul { display: none; }
    header .right > i { display: block; background-size: unset; }

	.pop { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important;width:70% !important; }
	.pop > img { width:100% !important;height:auto !important; }
}
@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) {
    header .left > h1 { width: 200px; }
    footer > .container > .left { border-bottom: 2px solid #7e8792; padding-bottom: 30px; margin-bottom: 30px; }
}

@media all and (max-width: 720px) {
    .pop { width:80% !important; }
}