@charset "utf-8";

.sec {display:block;position:relative;}
.sec:after {display:block;visibility:hidden;clear:both;content:""}


.viz .swiper {position:relative;background:#222;}
.viz .swiper-slide {height:100vh;background:#222;transition:0.5s all;}
.viz .swiper-slide img {width:100%;height:100%;object-fit:cover;}
.viz .swiper-pagination {display:block;position:absolute;left:50%;top:50%;width:100%;max-width:var(--content-w);padding:0;z-index:9;
-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
transform:translate(-50%,0);
}

.viz .swiper-pagination-bullet {display:block;position:relative;float:left;width:45px;height:45px;margin:0 5px;padding:0;background-color:rgba(0,0,0,0);border-radius:50%;cursor:pointer;transition:0.3s;}
.viz .swiper-pagination-bullet span {position:absolute;left:50%;top:50%;color:#fff;transform:translate(-50%, -50%);}
.viz .swiper-pagination-bullet button {display:block;width:41px;height:41px;}

.viz .progress {transform:rotate(-90deg);}
.viz .circle-origin {
fill: transparent;
stroke: rgb(255, 255, 255);
stroke-width: 1;
stroke-linecap: round;
stroke-dasharray: 125.664px;
stroke-dashoffset: 125.664px;
}

.viz .swiper-pagination-bullet-active .circle-origin {animation: progress 5s;}

@keyframes progress {
0% {stroke-dashoffset: 125.664px;}
90% {stroke-dashoffset: 0;}
100% {stroke-dashoffset: -125.664px;}
}

.viz .content {display:block;position:absolute;left:50%;top:60%;width:100%;max-width:var(--content-w);padding:0;
-webkit-transform:translate(-50%,0);
-moz-transform:translate(-50%,0);
-ms-transform:translate(-50%,0);
-o-transform:translate(-50%,0);
transform:translate(-50%,0);
}
.viz .content p {display:block;margin:0 0 80px 0;color:#fff;font-size:16px;text-shadow:0 0 5px rgba(0,0,0,1);}
.viz .content h3 {display:inline-block;line-height:180%;text-shadow:0 0 5px rgba(0,0,0,1);}
.viz .content h3 div {color:#fff;font-size:60px;font-weight:500;text-align:justify;}
.viz .content h3 div:after {content: '';display:inline-block;width:100%;}
.viz .content h3 .sub {display:block;color:#fff;font-weight:500;font-size:18px;text-align:justify;}
.viz .content h3 .sub:after {content: '';display:inline-block;width:100%;}

.viz .scroll {display:block;position:absolute;right:40px;bottom:40px;color:#fff;font-size:10px;text-align:center;z-index:3;}
.viz .scroll div {width:16px;margin:0 auto 8px auto;}

.arrows {display:block;width:10px;height:10px;margin:0 0 2px 2px;border-right:solid 2px #fff;border-bottom:solid 2px #fff;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.arrows1, .arrows2, .arrows3 {
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
animation: mouse-scroll 1s infinite;
}

.arrows1 {
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
  
animation-direction: alternate;
animation-delay: alternate;
}

.arrows2 {
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
  
animation-delay: .2s;
animation-direction: alternate;
  
margin-top: -6px;
}

.arrows3 {
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
  
animation-delay: .3s;
animation-direction: alternate;
  
margin-top: -6px;
}

@-moz-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-o-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {
0% { opacity: 0;}
50% { opacity: .5;}
100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}


.sec01 {padding:120px 20px;background:#231816;}
.sec01 .content {display:block;position:relative;width:100%;max-width:var(--content-w);margin:0 auto;}
.sec01 .content:after {display:block;visibility:hidden;clear:both;content:""}

.sec01 .title {float:left;width:35%;}
.sec01 .title h2 {display:block;margin:0 0 18px 0;color:#fff;font-size:36px;font-weight:800;}
.sec01 .title p {margin:0 0 24px 0;color:#fff;line-height:140%;}
.sec01 .title a {color:#fff;font-weight:500;}
.sec01 .title a i {font-size:12px;vertical-align:baseline}
.sec01 .exhibi {float:left;position:relative;width:65%;}

.sec01 .swiper-nav {display:block;position:absolute;left:-60px;bottom:0;}
.sec01 .swiper-nav .swiper-pagination-exhi {display:inline-block;width:60px;color:#fff;font-size:16px;font-weight:400;}


.sec02 {display:block;position:relative;padding:60px 20px;background:url(../img/bg2.jpg) no-repeat 50% 50%;background-size:cover;}
.sec02 .content {display:block;position:relative;width:100%;max-width:var(--content-w);min-height:100vh;margin:0 auto;}
.sec02 .content:after {display:block;visibility:hidden;clear:both;content:""}

.sec02 .img {display:block;position:absolute;left:-40%;top:100%;width:100%;max-width:480px;z-index:3;
animation: rotate 30s linear infinite;
transform-origin: 50% 50%;
}
.sec02 .img img {width:100%;height:auto;}

.sec02 .slogon {display:block;float:left;position:sticky;top:50%;width:50%;margin:0;}
.sec02 .slogon:after {display:block;visibility:hidden;clear:both;content:""}
.sec02 .slogon h2 {display:block;float:left;margin:0 40px 0 0;color:#fff;font-size:60px;font-weight:900;line-height:80%;}
.sec02 .slogon p {display:block;float:left;color:#fff;font-size:20px;font-weight:400;line-height:140%;}


@keyframes rotate{
	100% {
		transform: rotate(360deg);
	}
}

.sec02 .grid {float:right;width:50%;}

#tiles {position:relative;margin:0;padding:0;list-style-type:none;}
#tiles:after {display:block;visibility:hidden;clear:both;content:""}
#tiles li {display:block;position:relative;float:left;width:50%;padding:5px;cursor:pointer;}
#tiles li:nth-child(2n) {top:60px;}
#tiles li a {display:block;position:relative;padding:5px;text-align:center;transition: all 1s;}
#tiles li a span {display:block;}
#tiles li img {display:block;width:100%;height:auto;}
#tiles li label {display:block;position:absolute;left:20px;bottom:30px;color:#fff;font-size:16px;font-weight:400;opacity:0;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}
#tiles li label .period {display:block;margin:8px 0 0 0;font-size:14px;font-weight:300;}
#tiles li:hover label {opacity:1;}


#tiles .forwardBorderTrain:before {
border-top: 5px solid #ff9535 !important;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}

#tiles .forwardBorderTrain .ui-border-element:after {
border-right: 5px solid #ff9535 !important;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}

#tiles .forwardBorderTrain:after {
border-bottom: 5px solid #ff9535 !important;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}

#tiles .forwardBorderTrain .ui-border-element:before {
border-left: 5px solid #ff9535 !important;
-webkit-transition-duration: 500ms;
-moz-transition-duration: 500ms;
-o-transition-duration: 500ms;
transition-duration: 500ms;
}


#cursor_div {position:fixed;left:0;top:0;pointer-events:none;z-index:9;} 
#cursor_div .inner_wrap {display:flex;justify-content:center; align-items:center;position:relative;width:100px;height:100px;background:rgba(0,0,0,0.8);border-radius:50px;transform: translate(-50%, -50%);transition: opacity .3s ease;opacity:0;} 
#cursor_div .inner_wrap.on {opacity:1;} 
#cursor_div .inner {display:inline-block;position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;text-align:center;border:solid 1px #999;border-radius:50%;} 
#cursor_div .inner i {color:#fff;font-size:20px;line-height:38px;}

#cursor_div svg {
	fill: currentColor;
	height: auto;
	max-width: 90vmin;
	transform-origin: center;
	width: 90%;
	animation: rotate 10s linear infinite;
	transform-origin: 50% 50%;
}

.sec03 {padding:80px 0;background:#fff;}
.recent_wrap {display:block;position:relative;width:100%;max-width:var(--content-w);margin:0 auto;}
.recent_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.recent_wrap ul.tab {float:left;width:20%;}
.recent_wrap ul.tab:after {display:block;visibility:hidden;clear:both;content:""}
.recent_wrap ul.tab li {display:block;margin:0 0 12px 0;}
.recent_wrap ul.tab li:last-child {margin:0;}
.recent_wrap ul.tab li a {display:block;color:#999;font-weight:500;}
.recent_wrap ul.tab li a.selected {color:#222;}

.recent_wrap ul.panel {float:left;width:80%;}
.recent_wrap ul.panel li {height:0;overflow:hidden;}
.recent_wrap ul.panel li.selected {height:auto;}

.recent_wrap a.more {display:block;position:absolute;left:0;top:130px;}
.recent_wrap a.more i {font-size:32px;
background: #E19034;
background: repeating-radial-gradient(circle farthest-corner at center center, #E19034 0%, #000000 50%, #000000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.sec03 .swiper-nav {margin:40px 0 0 0;padding:0 20px;text-align:center;}
.sec03 .swiper-nav .swiper-pagination,
.sec03 .swiper-nav .swiper-button {display:inline-block !important;top:0;position:relative;line-height:40px;cursor:pointer;vertical-align:top !important;}
.sec03 .swiper-nav .swiper-button.swiper-btn-next i,
.sec03 .swiper-nav .swiper-button.swiper-btn-prev i {color:#666;font-size:14px;}

.sec04 {padding:80px 0;background:#111;}

.swiper-wrapper {transition-timing-function: linear !important;}

.sec04 .swiper-nav {margin:40px 0 0 0;padding:0 20px;text-align:center;}
.sec04 .swiper-nav .swiper-sns-play,
.sec04 .swiper-nav .swiper-sns-pause,
.sec04 .swiper-nav .swiper-pagination,
.sec04 .swiper-nav .swiper-button {display:inline-block !important;top:0;position:relative;color:#fff;line-height:40px;cursor:pointer;vertical-align:top !important;}


.sec04 .swiper-nav .swiper-sns-play i,
.sec04 .swiper-nav .swiper-sns-pause i {font-size:18px;}

.sec04 .swiper-nav .swiper-button.swiper-btn-next i,
.sec04 .swiper-nav .swiper-button.swiper-btn-prev i {color:#666;font-size:14px;}

.sec04 .swiper-nav .swiper-pagination {margin:0 8px;color:#222;font-size:18px;}

.sec04 a {display:block;color:#fff;font-weight:400;}
.sec04 a img {width:100%;height:auto;}
.sec04 a.img {margin:0 0 20px 0;}
.sec04 a.subj {margin:0 0 8px 0;}
.sec04 a.sns .icon {display:inline-block;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.sec04 a.sns .icon i {font-size:16px;}




@media screen and (max-width:1180px) {
.viz .swiper-pagination {padding:0 20px;}

.viz .content {padding:0 20px;}


.sec02 .img {left:0;top:100%;width:80%;}


.sec03 {padding:80px 20px;}
}




@media screen and (max-width:980px) {
.viz .content p {margin:0 0 60px 0;font-size:14px;}
.viz .content h3 div {font-size:48px;}
.viz .content h3 .sub {font-size:16px;}


.sec01 {padding:120px 0px;}
.sec01 .title {float:none;width:auto;margin:0 0 40px 0;padding:0 20px;}
.sec01 .title h2 {margin:0 0 18px 0;font-size:30px;}
.sec01 .exhibi {float:none;width:auto;}

.sec01 .swiper-nav {position:relative;left:0;bottom:auto;margin:40px 0 0 0;}
.sec01 .swiper-nav .swiper-pagination-exhi {display:block;width:auto;padding:0 20px;}

.sec02 {padding:60px 20px 120px 20px;}
.sec02 .img {left:auto;right:0;top:0;width:60%;}
.sec02 .content {min-height:auto;}
.sec02 .slogon {float:none;position:relative;left:0;top:0;width:auto;padding:80px 0 40px 0;
-webkit-transform:translate(0,0);
-moz-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0);
}
.sec02 .slogon h2 {float:left;margin:0 40px 0 0;font-size:54px;}
.sec02 .slogon p {float:left;font-size:18px;}

.sec02 .grid {float:none;width:100%;}



.sec03 ul.tab {float:none;width:100%;margin:0 0 40px 0}
.sec03 ul.tab li {float:left;margin:0 24px 0 0;}
.sec03 ul.tab li:last-child {margin:0;}

.sec03 ul.panel {float:none;width:100%;}

.sec03 a.more {left:auto;right:0;top:0;}
}




@media screen and (max-width:480px) {
.viz .content p {margin:0 0 40px 0;font-size:13px;}
.viz .content h3 div {font-size:36px;}
.viz .content h3 .sub {font-size:14px;}


.sec02 .slogon h2 {float:none;margin:0 0 20px 0;font-size:36px;}
.sec02 .slogon p {float:none;font-size:16px;}
}