@charset "utf-8";

main
.main{position:relative;}
.main > img{width:100%;}

.main01 > .tit{position:absolute; right:0; top:50%; transform:translate(0, -50%); width:50%;}
.main01 > .tit > div{width:fit-content; text-align:center;}
.main01 > .tit > div > h2 > img{width:90%;}
.main01 > .tit > div > .time{position:relative; width:80%; margin:4px auto 0;}
.main01 > .tit > div > .time::before{content:""; display:block; width:10px; height:26px; background:#171717; border-radius:10px 10px 0 0; position:relative; left:10%; }
.main01 > .tit > div > .time::after{content:""; display:block; width:10px; height:26px; background:#171717; border-radius:10px 10px 0 0; position:absolute; top:0;; right:10%; }
.main01 > .tit > div > .time > div{display:flex; justify-content:center; align-items:center; width:100%; background:#171717;url('/images/main/timer.png')no-repeat left 4% center; background-size:10%; background:linear-gradient(45deg, #191e6c, #924282, #186bbe); border-radius:15px; border:5px solid #fff; padding:12px 10px 8px; font-family: 'Giants-Bold'; color:#ff9b1b; font-size:42px;}
.main01 > .tit > div > .time > div > .ico{margin-right:20px;}
.main01 > .tit > div > .time > div > .ico > img{height:40px;}
.main01 > .tit > div > .time > div > h5{color:#fff; margin-right:20px; font-size:36px; }

.application{background:linear-gradient(45deg, #191e6c, #8b4080); padding:80px 0; text-align:center;}
.application > h3{font-size:76px; color:#fff; font-weight:700;}
.application > p{font-size:45px; color:#bcdffa; font-weight:700;}

.racepack{/*background:linear-gradient(45deg, #191e6c, #8b4080);*/ background:#151e6b; padding:80px 0; text-align:center;}
.racepack > .tit{margin-bottom:80px;}
.racepack > ul{display:flex; justify-content:center; }
.racepack > ul > li{margin-right:10%;}
.racepack > ul > li:last-child{margin-right:0;}
.racepack > ul > li > .ico{background:linear-gradient(45deg, #191e6c, #924282, #186bbe); padding:60px; align-content:center; border-radius:20px; overflow:hidden; box-shadow:0 0 20px rgba(4,225,252,.5);}
.racepack > ul > li > .ico > img{max-height:200px; filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(216deg) brightness(95%) contrast(113%);}
.racepack > ul > li > p{margin-top:30px; font-size:34px; color:#fff;}
.racepack > .packBtn{margin-top:60px;}
.racepack > .packBtn > a{background:#3751d0; display:inline-block; padding:15px 34px; border-radius:10px; font-size:20px; font-weight:700; color:#fff;}

.host{background:#171717; padding:80px 0;}
.host > div{display:flex; justify-content:space-between; }
.host > div > div > ul > li{display:flex; margin-bottom:40px;}
.host > div > div > ul > li > h4{display:inline-block; min-width:40px; margin:5px 30px 0 0; color:#fff; font-size:20px;}
.host > div > div > ul > li > ol{display:inline-block;}
.host > div > div > ul > li > ol > li{display:inline-block; margin-right:16px;}
.host > div > div > ul > li > ol > li:last-child{margin-right:0;}

.mainCouse{background:linear-gradient(45deg, #191e6c, #8b4080);; padding:80px 0; text-align:center;}
.mainCouse > div{position:relative; width:70%; min-width:1200px; margin:0 auto;}
.mainCouse > div > .tit{margin-bottom:40px;}
.mainCouse > div > .tit > h3{font-size:56px; color:#fff;}
.mainCouse > div > .imgBtn{margin-bottom:40px;}
.mainCouse > div > .imgBtn > .swiper-pagination-bullet{background:none; width:auto; height:auto; padding:10px 20px; margin:0 10px; border:1px solid #fff; border-radius:50px; font-size:20px; color:#fff;}
.mainCouse > div > .imgBtn > .swiper-pagination-bullet-active{background:#3751d0; border-color:#3751d0; font-weight:700;} 
.mainCouse > div > .imgWrap{background:#fff; border-radius:20px; padding:40px; box-shadow:0 0 5px 5px rgba(0,0,0,.15); overflow:hidden;}
.mainCouse > div > .imgWrap > div > div{border-radius:10px; overflow:hidden; border:1px solid #ddd; box-sizing:border-box;}
.mainCouse > div > .imgWrap > a{display:block; background:#3751d0; padding:16px 0; border-radius:10px; margin-top:30px; color:#fff; font-weight:700; font-size:20px;}

.mainCouse > div > .arrow{position:absolute; top:50%; transform:translate(0, 100%); z-index:5;}
.mainCouse > div > .arrow.prev{left:0; margin-left:-120px;}
.mainCouse > div > .arrow.next{right:0; margin-right:-120px;}
.mainCouse > div > .arrow > a{display:block;}
.mainCouse > div > .arrow > a > img{width:60px; filter: invert(100%) sepia(8%) saturate(31%) hue-rotate(333deg) brightness(108%) contrast(107%); opacity:.5;}
.mainCouse > div > .arrow.next > a > img{transform:rotate(180deg);}
.mainCouse > div > .arrow > a:hover > img{opacity:1;}

.imgPageWrap{background:linear-gradient(45deg, #191e6c, #171717); position:relative; padding:80px 0;}
.imgPageWrap > .imgPage{text-align:center; max-width:1080px;}
.imgPageWrap > .imgPage > h3{margin:0; margin-bottom:60px; font-size:56px; font-weight:bold; color:#fff; }
.imgPageWrap > .imgPage > p{ margin-bottom:26px; color:#fff; font-size:20px; font-weight:300;}
.imgPageWrap > .imgPage > ul{}
.imgPageWrap > .imgPage > ul > li{cursor:pointer;}
.imgPageWrap > .imgPage > ul > li > img{width:100%;}
.imgPageWrap > .imgPage > ul > li.img01 > img ,
.imgPageWrap > .imgPage > ul > li.img25 > img{width:50%;}

.imgPageWrap > .imgPage > ul > li > div{display:none;}

.imgPageWrap > .imgPageBic{position:fixed; left:50%; top:50%; transform:translate(-50%, -50%);  z-index:99;} 
.imgPageWrap > .imgPageBic > li{height:98vh; display:none; padding:0;}
.imgPageWrap > .imgPageBic > li.on{display:flex;}
.imgPageWrap > .imgPageBic > li > img{height:100%; margin:0 auto; }
.imgPageWrap > .imgPageBic > li > a{position:absolute; right:20px; top:20px; font-size:24px; font-weight:bold; font-family: 'GmarketSans'; color:#333;}
.imgPageWrap > .imgPageBg{position:fixed; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,.5); z-index:98;}

.imgPageWrap > .arrow{position:absolute; top:50%; transform:translate(0, 100%); z-index:5;}
.imgPageWrap > .arrow.prev{left:50%; margin-left:-700px;}
.imgPageWrap > .arrow.next{right:50%; margin-right:-700px;}
.imgPageWrap > .arrow > a{display:block;}
.imgPageWrap > .arrow > a > img{width:60px; filter:invert(100%) sepia(0%) saturate(7500%) hue-rotate(308deg) brightness(106%) contrast(114%); opacity:.5;}
.imgPageWrap > .arrow.next > a > img{transform:rotate(180deg);}
.imgPageWrap > .arrow > a:hover > img{opacity:1;}

@media (max-width:1200px) {
	.main01 > .tit > div{width:80%;}
	.main01 > .tit > div > .time{width:100%;}
	.main01 > .tit > div > .time::before{width:4px; height:10px;}
	.main01 > .tit > div > .time::after{width:4px; height:10px;}
	.main01 > .tit > div > .time > div{width:100%; font-size:.9rem; border:2px solid #fff; border-radius:5px; padding:4px;}
	.main01 > .tit > div > .time > div > .ico{margin-right:6px;}
	.main01 > .tit > div > .time > div > .ico > img{height:.9rem;}
	.main01 > .tit > div > .time > div > h5{font-size:.8rem; margin-right:5px;}

	.application{padding:30px 0;}
	.application > h3{font-size:1.2rem;}
	.application > p{font-size:1rem;}
	
	.racepack{width:100%; padding:30px 3%; box-sizing:border-box;}
	.racepack > .tit{margin-bottom:30px;}
	.racepack > .tit > img{height:30px;}
	.racepack > ul > li > .ico{width:fit-content; margin:0 auto; padding:16px;}
	.racepack > ul > li > .ico > img{max-height:60px;}
	.racepack > ul > li > p{font-size:1rem;}
	.racepack > .packBtn{margin-top:20px;}
	.racepack > .packBtn > a{padding:10px 24px; border-radius:5px; font-size:1rem;}
	
	.host{width:100%; padding:50px 3% 20px; box-sizing:border-box; }
	.host > div{flex-wrap:wrap;}
	.host > div > div > ul > li{margin-bottom:20px;}
	.host > div > div > ul > li > h4{font-size:1rem;}
	.host > div > div > ul > li > ol > li{margin-right:0;}
	.host > div > div > ul > li > ol > li > img{height:26px;}

	.mainCouse{width:100%; padding:50px 3% 50px; box-sizing:border-box; }
	.mainCouse > div{width:100%; min-width:0;}
	.mainCouse > div > .tit{margin-bottom:20px;}
	.mainCouse > div > .tit > h3{font-size:2rem;}
	.mainCouse > div > .imgBtn{margin-bottom:20px;}
	.mainCouse > div > .imgBtn > .swiper-pagination-bullet{margin:0 5px; font-size:1rem;}
	.mainCouse > div > .imgWrap{padding:20px; border-radius:10px;}
	.mainCouse > div > .imgWrap > div > div{border-radius:10px;}
	.mainCouse > div > .imgWrap > a{padding:10px 0; margin-top:12px; font-size:1.1rem;}

	.mainCouse > div > .arrow{display:none;}

	.imgPageWrap{width:100%; padding:50px 3% 50px; box-sizing:border-box; overflow:hidden; }
	.imgPageWrap > .imgPage > h3{margin-bottom:30px; font-size:2rem;}
	.imgPageWrap > .imgPage > h3 > span{display:block; font-size:1.4rem;}
	.imgPageWrap > .imgPage > p{margin-bottom:10px; font-size:1rem;}

	.imgPageWrap > .imgPage > ul > li > div{display:block; position:absolute; top:50%; right:5%; transform:translate(0, -50%);}
	.imgPageWrap > .imgPage > ul > li > div > img{height:30px; transform:rotate(180deg);}
	.imgPageWrap > .imgPage > ul > li > div > span{color:#fff; font-weight:500; vertical-align:middle; font-size:.8rem;}

	.imgPageWrap > .imgPageBic{ width:96%;}
	.imgPageWrap > .imgPageBic > li{height:auto; margin:0 auto;}
	.imgPageWrap > .imgPageBic > li > img{height:auto; width:100%;}
	.imgPageWrap > .imgPageBic > li.imgPageBic01 > img,
	.imgPageWrap > .imgPageBic > li.imgPageBic25 > img{width:50%;}

	.imgPageWrap > .arrow{display:none;}
}