/***************** sec01 *****************/

#sec01 {padding: 0; position: relative; background-color: #888;width:100%;height:100vh;overflow: hidden;}
#sec01 .sec_con{ max-width:100%; width:100%; height:100%; padding:0; }
#sec01 .swiper-container{width:100%;height:100%;}

/***************** sec02 *****************/
.sec02 { position: relative; display:flex;margin:0 -15px;}
.sec02 .swiper-slide {width:33.33333333333333%;padding:0 15px;}
.sec02 .sec02-txt-wrap .sec02-txt { font-size:24px;font-weight:500; margin-top: 20px;text-align:center;}

.sec02_img {display: flex;align-items: center;justify-content: center;height: 100%;overflow: hidden;}

.sec02 .swiper-slide .hov-bg-wrap { position:relative; display: block; width: 100%; height: 100%; color: #333; }
.sec02 .swiper-slide .hov-bg-wrap .hov-bg { position: absolute; top: 0; width: 100%; height: 100%; background: rgb(33,33,33,0); z-index: 2; }
.sec02 .swiper-slide .hov-bg-wrap .hov-line { opacity: 0; position: absolute; top: 0; width: 100%; height: 100%; z-index: 3; }
.sec02 .swiper-slide .hov-bg-wrap .hov-line::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85px; height: 1px; background: #ffab00; }
.sec02 .swiper-slide .hov-bg-wrap .hov-line::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1px; height: 85px; background: #ffab00; }
.sec02 .swiper-slide .hov-bg-wrap:hover .hov-bg { display: block; background: rgb(0,0,0,0.7); transition:all .3s ease-in-out; }
.sec02 .swiper-slide .hov-bg-wrap:hover .hov-line { opacity: 1; transition:all .3s ease-in-out; }

.mini { font-size: 14px; color: #aaa; }

/***************** sec03 *****************/
#sec03{padding:0;}
#sec03 .sec_con{max-width:100%;padding:0;}
.sec03_pt_wrap{position: relative;width: 100%;height: 100%; min-height: 60vh;}
.sec03_pt {width: 50%;height:auto;overflow: hidden;}

.sec03_pt.pt_lf{background:#f4f4f4;padding:120px;}
.sec03_pt.pt_lf h1{font-size:60px;font-weight:800;margin-bottom:100px;width: 100%;max-width: 500px;}
.sec03_pt.pt_lf .txt_box {width: 100%;height: 100%;display: flex;flex-flow: column;align-items: flex-start;justify-content: space-between;}
.sec03_pt.pt_lf .txt_box h4{font-size:42px;margin-bottom:20px;font-weight:600;line-height:1.2;}
.sec03_pt.pt_lf .txt_box p{font-size:18px;margin-bottom:40px;font-weight:400;color:#666;width:100%;max-width: 400px;line-height:1.5;}

.sec03_pt.pt_rt{position:relative;}
#sec03_sli{height: 100%;}
.sec03_sli{background-size: cover;background-position: center;background-repeat: no-repeat;}
.sec03_sli.sli_01{background-image: url("../img/main/03-01.jpg");}
.sec03_sli.sli_02{background-image: url("../img/main/03-02.jpg");}

#sec03_page {position: absolute;display: flex;bottom: 30px;left: 50%;transform: translateX(-50%);}
#sec03_page .swiper-pagination-bullet{width:12px; height:12px; border: 2px solid #fff;margin: 0 5px; background: transparent; opacity: 1;}
#sec03_page .swiper-pagination-bullet:last-child{margin-right:0;}
#sec03_page .swiper-pagination-bullet:first-child{margin-left:0;}
#sec03_page .swiper-pagination-bullet-active{ background-color:#fff; }


/***************** sec04 *****************/

#sec04{overflow: hidden;position: relative;}
#sec04 .sec_con{max-width:100%;}

.sec04_pt_wrap {width: 100%;max-width:1680px;overflow: hidden;position: relative;height:auto;background:#050505;padding:0 15px;margin:0 auto;}
.sec04_pt_wrap:after{opacity: 0.15;content: '';transform: scale(1); width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('../img/main/04-00.jpg');background-position: center;background-size: cover;background-repeat: no-repeat; animation: scale 20s linear infinite;}
@keyframes scale { 50% {-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);} }

.sec04_txt {width: 100%;height: 98%;padding:90px 0; position: relative;z-index: 1;display: flex;flex-flow: column;align-items:center;justify-content: center;max-width: 900px;margin: 0 auto;text-align:center;}
.sec04_txt h2{font-size:48px;text-align:center;font-weight: 800;color: #fff;word-break: keep-all;transition-duration: 0.5s;letter-spacing: -0.05rem;}
.sec04_txt > p{font-size:24px;font-weight:400;color:#fff;word-break: keep-all;transition-duration: 0.5s;margin:23px auto 0;line-height:1.5;text-align:center;}

.sec04_btn{display:flex;justify-content:center;margin-top:60px;}
.sec04_pt {width: 100%;max-width: 280px;background: rgba(255,255,255,0.3);height: 256px;margin:0 15px;overflow: hidden;position:relative;transition:all 0.4s;}
.sec04_pt a{width:100%;height:100%;padding: 20px 30px;display: flex;align-items: center;justify-content: center;text-align: center;}
.sec04_pt img{margin:0 auto;}
.sec04_pt .on{display:none;}
.sec04_pt h4{font-size:24px;font-weight:600;color:#fff; margin:12px auto 14px;transition:all 0.4s;}
.sec04_pt p{font-size:16px;font-weight:400;color:#fff;word-break: keep-all;transition:all 0.4s;}
.sec04_pt span {position: absolute;bottom: -30px;font-size:30px;left: 50%;transform: translateX(-50%);}

.sec04_pt:hover{background:rgba(255,255,255,1);}
.sec04_pt:hover .on{display:block;}
.sec04_pt:hover .off{display:none;}
.sec04_pt:hover h4{color:#333;}
.sec04_pt:hover p{color:#333;margin-bottom:15px;}
.sec04_pt:hover span{position: relative;top: 0;left: 0;color: #000;}


/***************** sec05 *****************/

.sec05 { background: #f7f7f7; text-align: center; }
.sec05 .sec_con{max-width:1430px;}
.sec05 .sec05-board-wrap { width: 100%; table-layout:fixed; border-top: 1px solid #111; font-size: 1.8rem; font-weight: 500; margin: 70px 0 54px 0; }
.sec05 .sec05-board-wrap a { color: #333; width:100%;height:100%;padding:30px;display:block;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; transition:all .3s ease-in-out; }
.sec05 .sec05-board-wrap a:hover { color: #ffab00; transition:all .3s ease-in-out; }
.sec05 .sec05-board-wrap tr { border-bottom: 1px solid #cecece; display: flex; justify-content: space-between; align-items: center;}
.sec05 .sec05-board-wrap td { max-width: 85%;width: 100%; }
.sec05 .sec05-board-wrap td:last-child { max-width: 15%; min-width: 125px; color: #999; text-align:right; }

/* .sec05_jp{display:none !important;} */


/***************** sec06 *****************/
#sec06{}
.sec06 .swiper-line { border: 3px solid #ddd; }
.sec06 .swiper-line:hover { border: 3px solid #000;  transition:all .5s ease-in-out; }

.sec06_pt_wrap{margin-bottom:40px;}
.sec06_ban{ background-size:cover; background-position:0 50%; background-repeat:no-repeat; height:auto; min-height:176px; padding:40px 50px; width:35%; flex-grow:1; /*align-items:center;*/ position:relative; transition:1s width, 6s background-position; box-sizing:border-box; }
.sec06_ban:hover{ width:65%; background-position:100% 50%; }
/* .sec06_ban:after{ content:''; position:absolute; z-index:4; width:100%; height:100%; top:0; left:0; background-color:rgba(0,0,0,0.6); transition-duration:0.4s;} */
.ban_01{ background-color: #050505; }
.ban_02{ background-color: #ffab00; }
.sec06_ban_txt {width: 100%;position: relative;z-index:5;display: flex;align-items: center;justify-content: space-between;}
.sec06_ban_txt p{ font-size:24px; font-weight:500; color:#eee; word-break:keep-all; line-height: 1.5em; margin-top:20px;}
.sec06_ban:hover:after{background-color:rgba(0,0,0,0.4); }
.sec06_ban:hover .sec06_ban_txt div.line:after{ width:100%; }

.sec06_jp{padding-top:0 !important;}

@media screen and (max-width:1140px) {
    .sec03_pt.pt_lf{padding: 60px;}
}

@media screen and (max-width:990px) {
    /** sec02 **/
    .sec02 .sec02-txt-wrap .sec02-txt{font-size:18px;}

    /** sec03 **/
    .sec03_pt{width:100%;}
    .sec03_pt.pt_rt {min-height: 60vh;order: -1;}
    .sec03_pt.pt_lf h1{font-size:48px;margin-bottom:60px;}
    .sec03_pt.pt_lf .txt_box h4{font-size:36px;}

    /** sec05 **/
    .sec05 .sec05-board-wrap { margin: 30px 0 54px 0; }
    .sec05 .sec05-board-wrap td { font-size: 1.5rem;max-width: 100%;}
    .sec05 .sec05-board-wrap td a{padding:24px 15px;}
    .sec05 .sec05-board-wrap td:last-child {padding:0 15px;}

    /** sec06 **/
    .sec06_pt_wrap{ flex-direction:column; }
    .sec06_ban, .sec06_ban:hover{ width:100%; transition:0s width, 6s background-position }
    .sec06_ban_txt img {width: 80%;}
    .sec06_ban_txt p{font-size:18px;}
}

@media screen and (max-width:650px) {
    #sec01{height:70vh;}

    /** sec02 **/
    .sec02 {margin:0 -5px;}
    .sec02 .swiper-slide {padding:0 5px;}

    /** sec03 **/
    .sec03_pt.pt_lf{padding:70px 30px;}
    .sec03_pt.pt_rt {min-height:40vh;}
    .sec03_pt.pt_lf h1{font-size:40px; margin-bottom: 30px;}
    .sec03_pt.pt_lf .txt_box h4{font-size:26px;}
    .sec03_pt.pt_lf .txt_box p{font-size:16px;}

    /** sec04 **/
	#sec04 .sec_con { padding: 0; }
    .sec04_txt{padding:60px 0;}
    .sec04_txt h2{font-size:36px;}
    .sec04_txt > p{font-size:18px;}
    .sec04_pt{margin:0 5px;}

    /** sec05 **/
    .sec05 .sec05-board-wrap td:last-child{display:none;}

    /** sec06 **/
    .sec06_ban{padding:30px 20px; min-height: 130px;}
    .sec06_ban_txt img{width:70%;}
    .sec06_ban_txt p{margin-top:15px;}
}


@media screen and (max-width:510px) {
    /** sec02 **/
    .sec02{margin:0 auto;flex-flow: column;}
    .sec02 .swiper-slide{width:100%;padding:0;margin-bottom:20px;}
    .sec02 .swiper-slide:last-child{margin-bottom:0;}
    .sec02_img {max-height: 320px;}

    /** sec04 **/
    .sec04_btn{flex-flow: column;margin-top: 40px;}
    .sec04_pt{margin:0 auto;}
    .sec04_pt:first-child{margin-bottom:15px;}
    .sec04_txt > p{font-size:16px;}
}


/***************** 9.whitepaper *****************/
.bg--blue-gra { background: linear-gradient( to right, #ffab00, #e06666); }

.wp-flex-wrap { display: flex; justify-content: space-between; align-items: center; padding: 50px 30px; }
.wp-flex-wrap .wp-title { font-size: 3.5rem; line-height: 4rem; color: #fff; }
.wp-btn { display: flex; flex-direction: column; }
.wp-btn .wp-outline-white { border: 1px solid #fff; color: #fff; display: inline-block; font-weight: 800; text-align: center; vertical-align: middle; user-select: none; background-color: transparent; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-size: 1.25rem; padding: 16px 50px; border-radius: 50px; margin: 10px; }
.wp-btn .wp-outline-white:hover { background: #fff; color: #ffab00; text-decoration: none; }


@media (max-width: 1200px) {

}

@media (max-width: 768px) {
	.wp-flex-wrap { flex-direction: column; }
	.wp-flex-wrap .wp-title { font-size: 2rem; line-height: 2rem; margin-bottom: 30px; }
	.wp-outline-white { padding: 14px 40px; }
}