@charset "utf-8";
/* CSS Document */
@import url(reset.css);
@import url("animate.min.css");

.warp{ width: 100vw; position: relative; overflow: hidden; margin: 0 auto; background:#FFF;}


.Header{ position: absolute; left: 0; top: 40px; width: 100%; z-index: 10; pointer-events: none;}
.Header .wCon{ display: flex; justify-content: space-between; align-items: center;}
.Header .Logo{ pointer-events: initial; }
.Header .Logo img{ filter: brightness(100) contrast(1);}

.Bbqh{ display: flex; }
.Bbqh li{ position: relative; border-radius: 10px; width: 150px; height: 50px; user-select: none; transition: all 0.3s; pointer-events: initial;}
.Bbqh li a{ display: flex; height: 100%; font-size: 18px; color: #FFF; justify-content: center; align-items: center; cursor: pointer; }
.Bbqh li.CN{ background-color: #1a2a99;}
.Bbqh li.EN{ background-color: #8bbb29; margin-left: 24px;}
.Bbqh li.EN a::after{ content: '+'; top: -5px; position: relative; }
.Bbqh li:hover{ transform: translateY(-3px); }


.Footer{ height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; background:url(../images/Guide_ico_2.png) no-repeat center bottom #1a2a99;}
.Footer p{ position: relative; text-align: center; font-size: 14px; color: #FFF; display: block; line-height: 1.5; padding: 3px 0;}
.Footer span{ white-space: nowrap; }
.Footer span + span{ margin-left: 0.5em; }

.Main{ height:calc(100vh - 100px); display: flex; justify-content: space-between; }

.Card{ position: relative; overflow: hidden; width: calc(100vw / 4); height: 100%; }
.Card .photo{ position: absolute; height: 100%; width: auto; min-width: 100%; object-fit: cover; top: 0; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.Card .Con{ display: flex; height: 100%; position: relative; flex-direction: column; align-items: center; justify-content: center; z-index: 2;}
.Card .Con .Text{ position: absolute; left: 60px; top:180px; transition: all 0.3s, transform 0.1s;}
.Card .Con .tit>h1{ font-size: 40px; color: #FFF; line-height: 1.5; font-weight: bold; white-space: nowrap;}
.Card .Con .tit>h2{ font-size: 43px; color: #FFF; line-height: 1; margin-top: 20px; font-weight: 100; white-space: nowrap; font-family: 'SourceHanSerifCN'; }
.Card .Con .tit>h2 font{ font-size: 70px; }
.Card .Con .tit>h3{ font-size: 24px; color: #FFF; line-height: 1; font-weight: 100; white-space: nowrap; font-family: 'SourceHanSerifCN'; text-align: justify; }


.Card .Con .desc{ display: none; margin: 45px 0px 0; font-size: 18px; color: #FFF; line-height: 1.5; position: relative; box-sizing: border-box; padding: 30px 60px; background-color: rgba(0,0,0,0.5); max-height: 33vh;overflow-y: auto; }
.Card .Con .desc p{ text-indent: 2em; line-height: 1.8; }
.Card .Con .num{ position: absolute; font-size: 36px; color: #FFF; user-select: none; left: 15px; bottom: 30px; }
.Card .Con .ico{ position: absolute; user-select: none; right: 15px; bottom: 37px; }
.Card .Con .ico img{ cursor: pointer; }
.Card .Con .ico h1{ position: absolute; font-size: 40px; color: #FFF; font-weight: bold; left: calc(50% - 20px); bottom: calc(100% + 30px); width: 40px; text-align: center; line-height: 1.1; box-sizing: border-box; text-shadow: 0px 1px 1px rgba(0,0,0,0.5); display: none; pointer-events: none;}

.Card .Con .close{ top: 110px; z-index: 9; width: 50px; height: 50px; display: none; transition: all 0.5s; cursor: pointer; background: url(../images/Guide_ico_5.png) no-repeat center; }
.Card .Con .close:hover{ transform: rotate(90deg);}

.Card .shadow{ position: absolute; left: 0; top: 0; z-index: 1; user-select: none; pointer-events: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); transition: background-color 0.3s;}
.Card:hover .shadow{ background-color: rgba(0,0,0,0.2);}

.Card.open .Con .num{ display: none;}
.Card.open .Con .Text{ max-width: calc(100% - 120px);}
/* .Card.open .desc[style="display: block;"]{ display: -webkit-box !important; } */
.Card.open .Con .ico.add img{ opacity: 0; }
.Card.open .Con .ico.add::before{ content: ''; display: block; position: absolute; pointer-events: none; width: 33px; height: 31px; left: 0; bottom: 0; background: url(../images/Guide_ico_4.png) no-repeat; }

.Card.open .shadow{ background-color: transparent;}
.Card.open .close{ display: block; }

.Card.close .Con .Text{ left: 50%; top: 50%; transform: translate(-50%, -50%);  }
.Card.close .Con .Text .tit h1{ display: none; }
.Card.close .Con .Text .tit h2{ font-size: 24px; }
.Card.close .Con .Text .tit h3{ font-size: 12px; }
.Card.close .Con .num{ display: none; }
.Card.close .Con .ico h1{ display: block; }
.Card.close .shadow{ background-color: rgba(0,0,0,0.4);}


.Card.c1:not(.open) .photo,
.Card.c2:not(.open) .photo{ left: auto; right: -50%; transform: none; }
.Card.c4 .photo{ left: 0; transform: none; }

@font-face {
    font-family: 'SourceHanSerifCN';
    src: url(../font/timesbd.ttf) format('truetype');
}

.Card:not(.close) .Con .tit>h1{ text-indent: 78px; position: relative; z-index: 1;}
.Card:not(.close) .Con .tit>h2{ position: relative; z-index: 0; text-indent: 78px;}
.Card:not(.close) .Con .tit>h2 font{ font-size: 0px; position: relative; z-index: 0;}
.Card:not(.close) .Con .tit>h2 font::after{ content: ''; display: inline-block; position: absolute; left: -78px; bottom: 0; width: 94px; height: 113px; }
.Card.c2 .Con .tit>h2 font::after{ background: url(../images/Guide_icoP_1.png) no-repeat; }
.Card.c1 .Con .tit>h2 font::after{ background: url(../images/Guide_icoP_2.png) no-repeat; }
.Card.c3 .Con .tit>h2 font::after{ background: url(../images/Guide_icoP_3.png) no-repeat; }
.Card.c4 .Con .tit>h2 font::after{ background: url(../images/Guide_icoP_4.png) no-repeat; }