html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
input {
    margin: 0;
    padding: 0;
    border: none;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

input[type="search"] {
    -webkit-appearance: none;
}

html,
body,
form,
fieldset,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
    -webkit-text-size-adjust: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: arial, sans-serif;
}

.loadmore-nodata {
    text-align: center;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

ins {
    text-decoration: none;
}

del {
    text-decoration: line-through;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

.newDesign-navigation .ds2-navigation-action-links a {
    line-height: 1.5rem;
}

.play-btn {
    width: 9%;
    padding: 5%;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}


/*loading*/

.loadPage {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 99999;
    display: block;
}

.loadPage .loadimg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}


/* .loadPage .loadimg svg {transform: rotate(-90deg);} */

.loadPage .loadimg svg circle {
    stroke-dasharray: 164 164;
    stroke-dashoffset: 0;
    transform: rotate(-90deg);
    transform-origin: center;
    stroke-width: 2px;
    stroke: #FFF;
    fill: none;
}

.loadPage .loadimg svg circle.circle-load-svg {
    stroke-dasharray: 0 164;
    stroke-width: 3px;
    stroke: #B11D23;
}

.loadPage .loadNum {
    line-height: 20px;
    font-size: 15px;
    color: #fff;
}


/*main*/

html,
body {
    /* height: 100vh; */
    width: 100%;
    background: #FFF;
    /* overflow:hidden; */
    letter-spacing: 3px;
    line-height: 1.8;
}

html,
body {
    /* overflow-x: hidden; */
    /* overflow-y: auto; */
}

.wrapper {
    font-family: Microsoft Yahei, simhei, arial, sans;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: 100%
}

* {
    font-family: Arial, "HarmonyOS Sans SC", "Noto Sans CJK SC", "Noto Sans", sans-serif;
}

a:link,
a:visited {
    text-decoration: none;
    color: #000;
}

a:hover {
    color: #000;
}

img {
    width: 100%;
    vertical-align: middle;
}

.pc {
    display: inline-block;
}

.mobi {
    display: none;
}

.sections {
    position: relative;
    width: 100%;
}

.center {
    text-align: center
}

.abso {
    position: absolute
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.bg {
    height: 100%;
    width: 100%;
    position: relative;
    background: url(../img/trans.gif) center center / cover no-repeat;
}

.pc {
    display: inline-block;
}

.mobi {
    display: none;
}


/* pointer-events: 取消它的鼠标事件，并指向它下面的元素。 */


/* mix-blend-mode: 设置图片元素与父容器背景（黄色）进行混合 */

.mouse {
    width: 16px;
    height: 16px;
    will-change: top, left;
    position: fixed;
    left: 200px;
    z-index: 10020;
    pointer-events: none;
    mix-blend-mode: difference;
    background-color: #B11D23;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
}

.wrap {
    position: relative;
    width: 100%;
    /* height: auto; */
    overflow: hidden;
}

.header {
    position: fixed;
    top: -100px;
    left: 0;
    width: 94vw;
    z-index: 9;
    height: 60px;
    padding: 0 3vw;
    /* box-shadow: 0 5px 6px rgba(0,0,0,0.2); */
    z-index: 9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    /* backdrop-filter: blur(0px); */
}

.header.global-blur {
    background: linear-gradient(253.94deg, rgba(255, 255, 255, 0.36) -42.84%, rgba(45, 45, 45, 0.24) 158.45%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    /* border-bottom: 1px solid #a0a0a0; */
}


/* .header.global-blur {background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2OSIgdmlld0JveD0iMCAwIDE5MjAgNjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfYl80Njk2XzI0NDUpIj48cmVjdCB3aWR0aD0iMTkyMCIgaGVpZ2h0PSI2OCIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzQ2OTZfMjQ0NSkiIGZpbGwtb3BhY2l0eT0iMC42Ii8+PHJlY3QgeD0iLTAuNSIgeT0iLTAuNSIgd2lkdGg9IjE5MjEiIGhlaWdodD0iNjkiIHN0cm9rZT0iIzE1MTUxNSIgc3Ryb2tlLW9wYWNpdHk9IjAuMSIvPjwvZz48ZGVmcz48ZmlsdGVyIGlkPSJmaWx0ZXIwX2JfNDY5Nl8yNDQ1IiB4PSItMjYiIHk9Ii0yNiIgd2lkdGg9IjE5NzIiIGhlaWdodD0iMTIwIiBmaWx0ZXJVbml0cz0idXNlclNwYWNlT25Vc2UiIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0ic1JHQiI+PGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0iMCIgcmVzdWx0PSJCYWNrZ3JvdW5kSW1hZ2VGaXgiLz48ZmVHYXVzc2lhbkJsdXIgaW49IkJhY2tncm91bmRJbWFnZUZpeCIgc3RkRGV2aWF0aW9uPSIxMi41Ii8+PGZlQ29tcG9zaXRlIGluMj0iU291cmNlQWxwaGEiIG9wZXJhdG9yPSJpbiIgcmVzdWx0PSJlZmZlY3QxX2JhY2tncm91bmRCbHVyXzQ2OTZfMjQ0NSIvPjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9iYWNrZ3JvdW5kQmx1cl80Njk2XzI0NDUiIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfNDY5Nl8yNDQ1IiB4MT0iMTAyMSIgeTE9Ii0yNDEiIHgyPSI5NDYuNzQ2IiB5Mj0iMzYyLjM2OSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IndoaXRlIiBzdG9wLW9wYWNpdHk9IjAuNiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzJEMkQyRCIgc3RvcC1vcGFjaXR5PSIwLjQiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=');border-bottom: 1px solid #e5e5e5;backdrop-filter: blur(20px);} */

.seres-container .header {
    top: 0;
}

.seres-container .loadPage {
    display: none;
}

.header .header-menu {
    width: 380px;
    height: 24px;
    position: relative;
    z-index: 12;
}

.header .header-menu a:link,
.header .header-menu a:visited {
    display: flex;
    width: 24px;
    height: 24px;
    align-items: center;
}

.header .header-menu span {
    position: relative;
    display: block;
    width: 30px;
    height: 2px;
    background: #000;
    transition: all 0.4s;
}

.header .header-menu span:before {
    position: absolute;
    content: "";
    top: -6px;
    left: 2px;
    width: 20px;
    height: 2px;
    background: #000;
    transition: all 0.4s;
}

.header .header-menu span:after {
    position: absolute;
    content: "";
    bottom: -6px;
    left: 2px;
    width: 20px;
    height: 2px;
    background: #000;
    transition: all 0.4s;
}

.header .header-logo img {
    width: auto;
    height: 40px;
}


/* .header .nav-btn:hover span { background:transparent;}
.header .nav-btn:hover span:before {width: 21px;transform:rotate(45deg);transform-origin: left top;top: -8px;}
.header .nav-btn:hover span:after {width: 21px;transform:rotate(-45deg);transform-origin: left bottom;} */

.header .nav-btn.close span {
    background: transparent;
}

.header .nav-btn.close span:before {
    width: 21px;
    transform: rotate(45deg);
    transform-origin: left top;
    top: -8px;
}

.header .nav-btn.close span:after {
    width: 21px;
    transform: rotate(-45deg);
    transform-origin: left bottom;
}

.header-nav {
    position: absolute;
    width: 25vw;
    height: calc(100vh - 60px);
    top: 0;
    left: -30vw;
    background: linear-gradient(167deg, #DDDDDD -8%, rgba(199, 198, 198, 0.9) 110%);
    z-index: 11;
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(20px);
}

.nav-mask {
    position: fixed;
    top: 68px;
    left: 0;
    width: 100%;
    height: calc(100vh - 68px);
    background: url(../img/trans.gif) 0 0 repeat;
    z-index: 7;
    display: none;
}

.nav-close:link,
.nav-close:visited {
    position: absolute;
    top: -46px;
    left: 3.6vw;
    width: 24px;
    height: 24px;
    background: transparent;
    z-index: 11;
    padding: 10px;
    display: none;
}

.nav-close:before {
    content: '';
    position: absolute;
    width: 2px;
    height: 24px;
    background: #84868A;
    transform: rotate(45deg);
    top: 0;
    left: 0;
}

.nav-close:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 24px;
    background: #84868A;
    transform: rotate(-45deg);
    top: 0;
    left: 0;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 5;
    width: auto;
    margin: 10% auto;
    gap: 3%;
    font-weight: 400;
}

.nav-list li {
    font-size: 1vw;
    padding: 3% 0;
    letter-spacing: 11px;
    width: 100%;
}

.nav-list li a:link,
.nav-list li a:visited {
    display: block;
    color: #000;
}

.nav-list li a:hover {
    color: #000;
}

.nav-list li.active a:link,
.nav-list li.active a:visited {
    color: #000000;
}

.nav-list li ol {
    margin: 3% auto auto;
    display: none;
}

.nav-list li ol li {
    font-size: 0.925vw;
    letter-spacing: 7px;
}

.nav-list li ol li a:link,
.nav-list li ol li a:visited {
    color: #838383;
}

.nav-list li.active ol li a:link,
.nav-list li.active ol li a:visited {
    color: #838383;
}

.nav-list li ol li a:hover,
.nav-list li.active ol li a:hover {
    color: #000;
}

.header-nav .share01 {
    position: relative;
    display: flex;
    width: 40%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    padding: 3% 0;
    flex: 0.5;
    letter-spacing: 11px;
}

.header-nav .share01 .lang {
    position: absolute;
    bottom: 90%;
    left: 0;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 1rem;
    font-size: 1vw;
}

.header-nav .share01 .lang .no-link {
    cursor: default;
}

.header-nav .share01 a:link,
.header-nav .share01 a:visited {
    position: relative;
}

.header-nav .share01 a:link span,
.header-nav .share01 a:visited span {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 200px;
    height: 200px;
    background: #FFF;
    padding: 10px 10px 35px;
    font-size: 14px;
    text-align: center;
    transform: translateX(-50%);
    letter-spacing: 4px;
}

.header-nav .share01 a:hover span {
    display: block;
}

.header-nav .share01 a:link span:after,
.header-nav .share01 a:visited span:after {
    content: "";
    position: absolute;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    bottom: -20px;
    left: 98px;
}

.header-search {
    display: flex;
    width: 380px;
    justify-content: flex-end;
    align-items: center;
    background: url(../img/trans.gif) 0 0 repeat;
}

.header-search .search-text {
    width: 240px;
    margin-right: 10px;
    text-align: right;
}

.header-search input {
    width: 0;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    color: #000;
    letter-spacing: 1px;
    background: transparent;
    /* margin-right: 10px; */
    transition: width 0.4s, border-color 0.4s;
}

.search-btn {
    width: 22px;
    padding: 0;
}

.header-search .search-box:hover input {
    width: 170px;
    border-color: #000;
}

.header-search .search-box.active input {
    width: 170px;
    border-color: #000;
}

.search-btn:link,
.search-btn:visited {
    display: inline-block;
    width: 22px;
}

.search-btn img {
    width: 22px;
    transition: all 0.4s;
}

.header-search .search-box:hover .search-btn img {
    width: 18px;
}

.btn-link:link,
.btn-link:visited {
    display: inline-flex;
    color: #FFF;
    border: 1px solid #FFF;
    padding: 0 2rem;
    font-size: 14px;
    font-weight: 300;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 2rem;
    align-items: center;
    letter-spacing: 5px;
}

.btn-link:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../img/arrow.svg") center/14px 10px no-repeat;
    margin-right: -16px;
    opacity: 0;
    filter: Alpha(opacity: 0);
    transition: all .4s;
}

.btn-link span {
    transition: margin 0.4s, padding 0.4s;
    margin-left: 0px;
}

.btn-link:hover {
    background: #FFF;
    color: #84868A;
    opacity: 0.95;
    filter: Alpha(opacity: 95);
}

.btn-link:hover span {
    margin-left: -4px;
    padding-right: 8px;
}

.btn-link:hover:after {
    margin-right: -20px;
    opacity: 1;
    filter: Alpha(opacity: 100);
}

.gray-btn-link:link,
.gray-btn-link:visited {
    display: inline-flex;
    color: #84868A;
    border: 1px solid #84868A;
    padding: 0 2rem;
    font-size: 14px;
    font-weight: 300;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 2rem;
    align-items: center;
    letter-spacing: 5px;
}

.gray-btn-link:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../img/arrow_b.svg") center/14px 10px no-repeat;
    margin-right: -16px;
    opacity: 0;
    filter: Alpha(opacity: 0);
    transition: all .4s;
}

.gray-btn-link span {
    transition: margin 0.4s, padding 0.4s;
    margin-left: 0px;
}

.gray-btn-link:hover {
    opacity: 0.95;
    filter: Alpha(opacity: 95);
}

.gray-btn-link:hover span {
    margin-left: -4px;
    padding-right: 8px;
}

.gray-btn-link:hover:after {
    margin-right: -20px;
    opacity: 0.85;
    filter: Alpha(opacity: 85);
}

.arrow01:link,
.arrow01:visited {
    width: 40px;
    height: 30px;
    display: block;
    position: relative;
    color: #666666;
    line-height: 30px;
    font-size: 15px;
    /* text-shadow: 0px 0px 2px #f1f2f1; */
}

.arrow01:before {
    position: absolute;
    right: 0px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #666666;
    border-bottom: 2px solid #666666;
    transform: rotate(45deg);
    content: '';
    text-shadow: 0px 0px 0px #f1f2f1;
}

.arrow01:hover {
    color: #48a0f8;
    text-shadow: none;
}

.arrow01:hover:before {
    border-color: #48a0f8;
    text-shadow: none;
}

.container {
    position: relative;
    width: 100%;
}

.sections h1 {
    font-size: 2.6vw;
    letter-spacing: 5px;
    position: relative;
}

.sections h2 {
    font-size: 2.2vw;
}

.sections h3 {
    font-size: 1.2vw;
    letter-spacing: 1px;
}

.section1 {
    height: 200vh;
    width: 100vw;
    background: #000;
    transform-origin: center top;
}

.bg01 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0;
    filter: Alpha(opacity: 0);
}

.sections canvas {
    width: 100%;
    height: calc(100vw * 1080 / 1920);
    position: absolute;
    left: 0;
    top: 50%!important;
    transform: translate(0, -50%)!important;
}

.section1 .canvas {
    position: absolute;
    width: 100%;
    height: calc(100vw * 1080 / 1920);
    top: 0;
    left: 0;
}

.section1 .text {
    position: absolute;
    top: 40vh;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 3vw;
    color: #FFF;
}

.section1 .text .title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    gap: 1vw;
}

.section1 .text .title span {
    opacity: 0;
    filter: Alpha(opacity: 0);
}

.section1 .text .desc {
    font-size: 1.1vw;
    margin-top: 1rem;
    opacity: 0;
    filter: Alpha(opacity: 0);
}

.section1 .text .btn {
    margin-top: 3rem;
    display: flex;
    width: 100%;
    justify-content: center;
    opacity: 0;
    filter: Alpha(opacity: 0);
}

.section2 {
    height: 450vh;
}

.section2 .canvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
}

.section2 .p_text {
    position: absolute;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    color: #FFF;
    text-align: center;
    opacity: 0;
    filter: Alpha(opacity: 0);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
}

.section2 .p_text .p1 {
    font-size: 1.4vw;
    letter-spacing: 5px;
}

.section2 .p_text .p2 {
    font-size: 3.1vw;
    letter-spacing: 1vw;
}

.section3 {
    height: auto;
    background: #FFF;
    padding-bottom: 15vh;
}

.section3 .head01 {
    padding: 5% 3% 3%;
    width: 94%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.section3 .head01 h2 {
    font-size: 2.6vw;
    letter-spacing: 3px;
}

.section3 .con01 {
    width: 94%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.section3 .con01 li {
    width: 33%;
}

.section3 .con01 .p1 {
    display: flex;
    width: 100%;
    overflow: hidden;
    height: calc(100vw *336 / 1920);
    position: relative;
    justify-content: center;
    align-items: center;
}

.section3 .con01 .p1,
.section3 .con01 .p1 img {
    transition: all 1.2s ease-out;
}

.section3 .con01 .p1:hover img {
    transform: scale(1.1);
}


/* .section3 .con01 .p1:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0);z-index: 2;} */


/* .section3 .con01 .p1:hover:before {background: rgba(0,0,0,0.2);} */

.section3 .con01 .p2 {
    display: block;
    padding: 1.4rem 0 0.3rem;
    color: #84868A;
}

.section3 .con01 .p3 {
    font-size: 1.3vw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
}

.section4 {
    height: auto;
    /* margin-top: -200vh; */
    z-index: 2;
    background: #FFF;
}

.section4 .con02 {
    position: relative;
    margin: auto auto auto;
    width: 100%;
    object-fit: cover;
    object-position: left top;
    -webkit-mask: left top / contain;
    mask: center top / contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100vw 100vh;
    mask-size: 100vw 100vh;
    -webkit-mask-position: left top;
    mask-position: left top;
    -webkit-mask-image: rgba(255, 255, 255, 1);
    mask-image: rgba(255, 255, 255, 1);
    mix-blend-mode: normal;
    clip-path: polygon(5% 10%, 95% 10%, 95% 90%, 5% 90%);
}

.section4 .con02 .text01 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 94%;
    opacity: 0;
    filter: Alpha(opacity: 0);
}

.section4 .con02 .text01 h2 {
    font-size: 2.6vw;
    color: #FFF;
    letter-spacing: 11px;
    padding-bottom: 5%;
}

.section4 .con02 .text01 .p2 {
    font-size: 1vw;
    color: #FFF;
    width: 33%;
    text-shadow: 5px 4px 5px rgba(0, 0, 0, 0.8);
}

.footer-nav {
    padding: 2rem 3% 0;
    width: 94%;
    background: #E7E9EB;
    display: flex;
    position: relative;
    justify-content: flex-start;
    font-weight: 400;
    font-size: 0.925vw;
    gap: 3px;
    letter-spacing: 1px;
}

.footer {
    padding: 4rem 3% 8rem;
    width: 94%;
    background: #E7E9EB;
    display: flex;
    position: relative;
    justify-content: space-between;
    font-weight: 300;
}

.footer .foot01 {
    width: calc(50% + 71px);
    font-size: 0.925vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer .foot01 .p1 {
    display: flex;
    gap: 4%;
    align-items: center;
    width: 80%;
}

.footer .foot01 .p2 {
    width: auto;
}

.footer .foot01 .p2 img {
    width: auto;
    height: 40px;
}

.footer .foot02 {
    width: 200px;
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-end;
}

.footer .foot02 a:link,
.footer .foot02 a:visited {
    position: relative;
}

.footer .foot02 a:link span,
.footer .foot02 a:visited span {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 44px;
    width: 200px;
    height: 200px;
    background: #FFF;
    padding: 10px 10px 35px;
    font-size: 14px;
    text-align: center;
    transform: translateX(-50%);
}

.footer .foot02 a:hover span {
    display: block;
}

.footer .foot02 a:link span:after,
.footer .foot02 a:visited span:after {
    content: "";
    position: absolute;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    bottom: -20px;
    left: 95px;
}

.footer .foot03 {
    width: 100%;
    position: absolute;
    bottom: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer .foot03 a:link,
.footer .foot03 a:visited {
    color: #A8A8A8;
    font-size: 12px;
    border-right: 1px solid #A8A8A8;
    padding: 0 1.5%;
    height: 14px;
    line-height: 1;
    overflow: hidden;
}

.footer .foot03 a:last-child:link,
.footer .foot03 a:last-child:visited {
    border-right: none;
}

.pin-spacer {
    overflow: hidden!important;
}

.bgz {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    opacity: 0.5;
    pointer-events: none;
    display: none;
}

.global-kv {
    position: relative;
    margin-top: 60px;
}

.global-kv .global-kv-text {
    position: absolute;
    top: 42%;
    left: 3.8vw;
    margin-left: 216px;
}

.global-kv .global-kv-text h1 {
    font-size: calc(100vw * 48 / 1920);
    color: #FFF;
    font-weight: 300;
    margin-left: -0.1vw;
}

.global-kv .global-kv-text:before {
    content: '';
    position: absolute;
    width: 12.5vw;
    height: 12.5vw;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQyIiBoZWlnaHQ9IjI0MiIgdmlld0JveD0iMCAwIDI0MiAyNDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTI0MSA4OFYxSDFWMjQxLjVIMjQxVjE0NyIgc3Ryb2tlPSJ3aGl0ZSIvPjwvc3ZnPg==');
    background-size: contain;
    top: 50%;
    transform: translateY(-50%);
    left: -5.8vw;
}

.global-kv .global-kv-text.two h1 {
    margin-left: 4.1vw;
}

.highlight {
    color: #B11D23!important;
}

@media only screen and (max-width: 1440px) {
    .header-nav {
        width: 260px;
        left: -260px;
    }
    .header-nav .share01 {
        width: 150px;
        gap: 10px;
    }
    .header-nav .share01 a:link span,
    .header-nav .share01 a:visited span {
        bottom: 40px;
        left: 60px;
        width: 150px;
        height: 150px;
        padding: 6px 6px 30px;
    }
    .header-nav .share01 a:link span:after,
    .header-nav .share01 a:link span:after {
        bottom: -18px;
        left: 15px;
    }
    .header-nav .share01 a:nth-child(2):link span,
    .header-nav .share01 a:nth-child(2):visited span {
        left: 69px;
    }
    .header-nav .share01 a:nth-child(3):link span,
    .header-nav .share01 a:nth-child(3):visited span {
        left: 30px;
    }
    .header-nav .share01 a:nth-child(3):link span:after,
    .header-nav .share01 a:nth-child(3):link span:after {
        left: 54px;
    }
    .header-nav .share01 a:nth-child(4):link span,
    .header-nav .share01 a:nth-child(4):visited span {
        left: -11px;
    }
    .header-nav .share01 a:nth-child(4):link span:after,
    .header-nav .share01 a:nth-child(4):link span:after {
        left: 95px;
    }
    .footer .foot02 a:link span,
    .footer .foot02 a:visited span {
        bottom: 44px;
        width: 180px;
        height: 180px;
        padding: 6px 6px 30px;
    }
    .footer .foot02 a:link span:after,
    .footer .foot02 a:visited span:after {
        bottom: -18px;
        left: 85px;
    }
}

@media only screen and (max-width: 1024px) and (orientation: portrait),only screen and (max-width: 768px) {
    .mobi {
        display: inline-block;
    }
    .pc {
        display: none!important;
    }
    .header {
        padding: 5px 12px;
        width: calc(100% - 24px);
        height: 44px;
        background: #FFF!important;
        -webkit-backdrop-filter: blur(0px)!important;
        backdrop-filter: blur(0px)!important;
    }
    .header .header-menu {
        width: 33%;
    }
    .header .header-search {
        width: 33%;
    }
    .header-search .search-text {
        width: auto;
        display: block;
    }
    .header .header-logo img {
        height: 26px;
    }
    .header-search input {
        font-size: 12px;
    }
    .header-search .search-box:hover input {
        width: calc(100% - 20px);
        padding: 2px 10px;
    }
    .header-search .search-box.active input {
        width: calc(100% - 20px);
        padding: 2px 10px;
        border-color: #000;
    }
    .sections canvas {
        height: calc(100vw * 1736 / 780);
    }
    .section1 .canvas {
        height: 100vh;
    }
    .section1 .text {
        font-size: 30px;
        top: 35vh;
        width: 70%;
    }
    .section1 .text .desc {
        font-size: 13px;
        margin-top: 1rem;
        text-align: left;
        font-weight: normal;
    }
    .section1 .text .btn {
        margin-top: 1rem;
    }
    .section2 {
        background: #000!important;
    }
    .section2 picture img {
        visibility: hidden;
    }
    .section2 canvas {
        height: 100vw;
        top: 0!important;
        transform: translate(0, 0)!important;
    }
    .section2 .c_shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vw;
        background: linear-gradient(to top, rgba(0, 0, 0, 1) -5%, rgba(0, 0, 0, 0) 20%);
        overflow: visible;
    }
    .section2 .p_text {
        width: 80%;
        top: auto;
        bottom: -30vh;
        transform: translate(-50%, -0%) scale(1);
        gap: 6px;
    }
    .section2 .p_text .p1 {
        font-size: 14px;
    }
    .section2 .p_text .p2 {
        font-size: 20px;
    }
    .section2 .p_text .p3 {
        margin-top: 6px;
    }
    .section3 {
        padding-bottom: 5vh;
    }
    .section3 .head01 {
        display: flex;
        justify-content: center;
    }
    .section3 .head01 h2 {
        font-size: 16px;
        letter-spacing: 4px;
    }
    .section3 .head01 .r01 {
        display: none;
    }
    .section3 .con01 {
        display: flex;
        flex-direction: column;
        width: 88%;
        align-items: center;
    }
    .section3 .con01 li {
        width: 100%;
    }
    .section3 .con01 .p1 {
        height: auto;
    }
    .section3 .con01 .p2 {
        padding: 0.8rem 0 0.3rem;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .section3 .con01 .p3 {
        font-size: 14px;
        letter-spacing: 1px;
    }
    .section3 .more_btn {
        margin-top: 2rem;
        text-align: center;
        width: 100%;
    }
    .section4 .con02 .text01 {
        display: flex;
        justify-content: center;
    }
    .section4 .con02 .text01 h2 {
        font-size: 18px;
        letter-spacing: 3px;
        text-align: center;
    }
    .section4 .con02 .text01 .p2 {
        display: none;
        font-size: 12px;
    }
    .section4 .c_shadow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 6%, rgba(0, 0, 0, 0) 60%);
    }
    .footer {
        flex-direction: column;
        padding: 3rem 0 8rem;
        width: 100%;
        gap: 3rem;
    }
    .footer .foot01 {
        width: 100%;
        font-size: 12px;
    }
    .footer .foot01 .p2 {
        display: none;
    }
    .footer .foot01 .p1 {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 2rem;
    }
    .footer .foot02 {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 170px;
        margin: auto;
        position: relative;
    }
    .footer .foot03 {
        width: 100%;
        left: 0%;
        display: inline-block;
        line-height: 1.2;
    }
    .footer .foot03 a:link,
    .footer .foot03 a:visited {
        font-size: 9px;
        padding: 0px 6px;
        line-height: 10px;
        letter-spacing: 1px;
        height: 10px;
        overflow: visible;
        display: inline-block;
    }
    .footer .foot03 a:link:nth-child(2),
    .footer .foot03 a:visited:nth-child(2) {
        border-right: none;
    }
    .btn-link:link,
    .btn-link:visited {
        padding: 2px 24px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .btn-link:link span,
    .btn-link:visited span {
        display: inline-block;
        text-indent: 3px;
        letter-spacing: 2px;
    }
    /* .btn-link:hover span {margin-left: auto;padding-right: 0;}
	.btn-link:hover:after {margin-right: -16px;opacity:1;filter:Alpha(opacity:100);display: none;} */
    .gray-btn-link:link,
    .gray-btn-link:visited {
        padding: 2px 24px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
    }
    .gray-btn-link:link span,
    .gray-btn-link:visited span {
        display: inline-block;
        text-indent: 3px;
        letter-spacing: 2px;
    }
    /* .gray-btn-link:hover span {margin-left: auto;padding-right: 0;}
	.gray-btn-link:hover:after {margin-right: -16px;opacity:1;filter:Alpha(opacity:100);} */
    .header-nav {
        width: 100%;
        left: -100%;
        backdrop-filter: blur(0px);
        background: #FFF;
    }
    .nav-list li {
        font-size: 18px;
        letter-spacing: 4px;
    }
    .header-nav .share01 {
        gap: 1.2rem;
        width: auto;
        padding-bottom: 1.2rem;
    }
    .nav-list li ol li {
        font-size: 16px;
        letter-spacing: 3px;
    }
    .header .header-menu span {
        width: 20px;
    }
    .header .header-menu span:before {
        width: 16px;
        top: -5px;
    }
    .header .header-menu span:after {
        width: 16px;
        bottom: -5px;
    }
    .header .nav-btn.close span:before {
        width: 18px;
        top: -7px;
    }
    .header .nav-btn.close span:after {
        width: 18px;
    }
    .header-nav .share01 .lang {
        font-size: 16px;
        letter-spacing: 4px;
        gap: 0.5rem;
    }
    /* .footer .foot02 a:hover span { display:none;} */
    .footer .foot02 a:link,
    .footer .foot02 a:visited {
        position: static;
    }
    .header-nav .share01 a:link span,
    .header-nav .share01 a:visited span {
        bottom: 44px;
        left: 60px;
        width: 150px;
        height: 150px;
        padding: 15px 15px 30px;
        background: #F0F0F0;
    }
    .header-nav .share01 a:link span:after,
    .header-nav .share01 a:link span:after {
        bottom: -20px;
        left: 26px;
        border-top: 10px solid #F0F0F0;
    }
    .header-nav .share01 a:nth-child(2):link span,
    .header-nav .share01 a:nth-child(2):visited span {
        left: 69px;
    }
    .header-nav .share01 a:nth-child(3):link span,
    .header-nav .share01 a:nth-child(3):visited span {
        left: 30px;
    }
    .header-nav .share01 a:nth-child(3):link span:after,
    .header-nav .share01 a:nth-child(3):link span:after {
        left: 66px;
    }
    .header-nav .share01 a:nth-child(4):link span,
    .header-nav .share01 a:nth-child(4):visited span {
        left: -11px;
    }
    .header-nav .share01 a:nth-child(4):link span:after,
    .header-nav .share01 a:nth-child(4):link span:after {
        left: 104px;
    }
    .footer-nav {
        display: none;
    }
    .footer .foot02 a:link span,
    .footer .foot02 a:visited span {
        bottom: 42px;
        width: 180px;
        height: 180px;
        padding: 6px 6px 30px;
    }
    .footer .foot02 a:link span:after,
    .footer .foot02 a:visited span:after {
        bottom: -18px;
        left: 15px;
    }
    .footer .foot02 a:nth-child(2):link span:after,
    .footer .foot02 a:nth-child(2):visited span:after {
        left: 60px;
    }
    .footer .foot02 a:nth-child(3):link span:after,
    .footer .foot02 a:nth-child(3):visited span:after {
        left: 110px;
    }
    .global-kv {
        margin-top: 54px;
    }
    .global-kv .global-kv-text {
        top: 30%;
        left: 10%;
        margin-left: auto;
        width: 80%;
        text-align: center;
    }
    .global-kv .global-kv-text:before {
        content: none;
    }
    .global-kv .global-kv-text h1 {
        font-size: 32px;
        letter-spacing: 3px;
        margin-left: auto;
    }
    .global-kv .global-kv-text.two h1 {
        margin-left: auto;
    }
}

.fixed-ipad .section2 .p_text {bottom: -18vh;}
.fixed-ipad .section3 .con01 { flex-direction: row; align-items: flex-start;}

.section1 img { top:50%; transform: translateY(-50%); position:absolute;}
.section1 .canvas { top:50%; transform: translateY(-50%);}
.section1 .section1-con {top: 0;left: 0;position:absolute;width: 100vw;height: 100vh;}
.section2 {background:#FFF;}
.section2 img { top:50%; transform: translateY(-50%); position:absolute;}

.fixed-pcmt .section2 .p_text {bottom: 0vh;}
.fixed-pcmt .section3 .con01 { flex-direction: row; align-items: flex-start;}


.header .header-menu a i {position:absolute;top:50%;transform: translateY(-50%);left: 30px;font-size: 15px;letter-spacing: 1px; font-style: normal;}
.header-search .search-box { position:relative; display:flex; justify-content: flex-end; align-items: center; background: url(../img/trans.gif) 0 0 repeat;}

.header-search .lang {white-space: nowrap;font-size: 15px;margin-top: 3px;margin-left: 12px;color:rgba(0, 0, 0, 0.25);display: flex;gap: 3px;letter-spacing: 1px;}
.header-search .lang a:link, .header-search .lang a:visited {color:rgba(0, 0, 0, 1);}

.header-search .lang .active:link, .header-search .lang .active:visited {color:rgba(0, 0, 0, 0.25);}

.history-content .history-list li.no-img {margin-bottom: 1vw;height: calc(100vw * 220 / 1920);}
.history-content .history-list li.no-img .a02 { height:20px;}


@media only screen and (max-width: 1024px) and (orientation: portrait),only screen and (max-width: 768px) {
    .header-search .lang {/* display: none; */}
    .history-content .history-list li.no-img {margin-bottom: 4rem;height: auto;}
}