/*************************
Temp_main
*************************/
html{overflow-x:hidden;}
/* body{background-color: #0a0a0a;} */
.m_o{display:none;}
.tempMain{height: 100vh; background: url('../img/temp_main/bg.jpg') no-repeat center / cover; position: relative;}
/*header*/
.tempMain .header{height: 160px; background-color: #0a0a0a; position: relative;}
.tempMain .header .mark{width: calc(100% - 40px); max-width:1800px; margin: 0 auto; position: relative; height: 100%;}
.tempMain .header .mark p{font-size: 0; height: 100%; float:left; width: 50%;}
.tempMain .header .mark p.mark_1{background: url('../img/temp_main/mark_1.png') no-repeat left center;}
.tempMain .header .mark p.mark_2{background: url('../img/temp_main/mark_2.png') no-repeat right center;}
.tempMain .header .logo{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.tempMain .header .logo a{display:block; width: 160px; height: 100%; background: url('../img/temp_main/toplogo.png') no-repeat center / 100%; margin: 0 auto; font-size: 0;}

/*content*/
.tempMain .content{position: relative; background: url('../img/temp_main/character.png') no-repeat center bottom / auto 100%; width: 100%; transition:background 0;}
.tempMain .content ul.linkList{position: absolute; width: calc(100% - 40px); max-width:1240px; left: 50%; top: 50%; transform:translate(-50%,-50%);}
.tempMain .content ul.linkList li{float:left; width: 40%;}
.tempMain .content ul.linkList li a{display:block; font-size: 0; transition:.2s;}
.tempMain .content ul.linkList li a img{filter: drop-shadow(0 20px 10px rgba(0,0,0,.3)); max-width:344px; width: 100%;}
.tempMain .content ul.linkList li a:hover{transform:translateY(-10px);}
.tempMain .content ul.linkList li.btn_2{float:right; text-align: right;}

/*footer*/
.tempMain .footer{font-size: 14px; text-align: center; padding: 0 20px; line-height: 60px; background-color: #0a0a0a; color: #4e4e4e; }


@media all and (max-width:1000px){
	.tempMain .header{height: 120px;}
	.tempMain .header .logo a{width: 120px;}
	.tempMain .header .mark p.mark_1{background-size:auto 45px;}
	.tempMain .header .mark p.mark_2{background-size:auto 32px;}
}

@media all and (max-width:600px){
	.tempMain .header{height: auto;}
	.tempMain .header .mark{border-bottom: solid 1px #232323; text-align: center; padding: 0 20px;}
	.tempMain .header .mark p{height: 70px; position: static;}
	.tempMain .header .mark p.mark_1{width: calc(40% - 15px); margin-right: 15px; background-position:center right;}
	.tempMain .header .mark p.mark_2{width: 60%; background-position:center left;}
	.tempMain .header .logo{position: static;}
	.tempMain .header .logo a{height: 100px;}

	.tempMain .content{background: url('../img/temp_main/character_m.png') no-repeat center bottom / auto 100%;}
	.tempMain .content ul.linkList{top: auto; transform:translateX(-50%); bottom: 20px;}
	.tempMain .content ul.linkList li{float:none; width: 100%; text-align: center; margin-bottom: 10px;}
	.tempMain .content ul.linkList li.btn_2{text-align: center; margin-bottom: 0;}
	.tempMain .content ul.linkList li a img{filter: drop-shadow(0 5px 0 rgba(0,0,0,.5));}

	.tempMain .footer{font-size: 13px; padding: 14px 10px; line-height: 1.2;}

	.m_x{display:none;}
	.m_o{display:block;}
}

@media all and (max-width:400px){
	.tempMain .header .mark p.mark_1,
	.tempMain .header .mark p.mark_2{background-size:100% auto; }
}

/* CLEARFIX */
.clearfix {*zoom:1;}
.clearfix:before, .clearfix:after {display:block; content: ''; line-height: 0;}
.clearfix:after {clear: both;}


/*************************
Font
*************************/
.temp_font{background-color: #fff;}
/*visual*/
.temp_font .visual{text-align: center; background: url('../img/temp_main/bg.jpg') no-repeat center / cover; position: relative; height: auto;}
.temp_font .visual img{width: 100%; max-width:1140px;}
.temp_font .visual img.m_o{max-width:450px; margin: 0 auto;}
.temp_font .visual .info{position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(16,16,16,.9); padding: 20px 0;}
.temp_font .visual .info ul{margin: 0 auto; max-width:450px; padding: 0 15px;}
.temp_font .visual .info ul li{color: rgba(255,255,255,.8); text-align: left; font-size: 12px; line-height: 1.5; overflow:hidden;}
.temp_font .visual .info ul li span,
.temp_font .visual .info ul li em{display:block; float:left; font-style:normal;}
.temp_font .visual .info ul li span{width: 100px;}
.temp_font .visual .info ul li em{width: calc(100% - 100px);}
/*content*/
.temp_font .content{width: calc(100% - 40px); max-width:1140px; margin: 0 auto; text-align: left; padding-top: 80px;}
.temp_font .content .download{text-align: center; margin-bottom: 80px;}
.temp_font .content .download a{display:inline-block; padding: 20px 40px; font-size: 20px; color: #fff; background-color: #cc2320; border-radius:99px; font-weight: 500; transition:.2s; box-shadow:0 5px 5px rgba(0,0,0,.08);}
.temp_font .content .download a:hover{background-color: #a81410;}
.temp_font .content .download a img{width: 100%; max-width:409px;}
.temp_font .content img.des{width: 100%; margin-top: 80px;}

.temp_font .featureWrap{margin-bottom: 90px;}
.temp_font .featureWrap .featureTxt h4{float:left; width: 20%; font-size: 21px; font-weight: bold;}
.temp_font .featureWrap .featureTxt .txtArea{float:left; width: 80%;}
.temp_font .featureWrap .featureTxt .txtArea p.main{padding-top: 20px; border-top: solid 1px #222; font-size: 15px; line-height: 1.5; font-weight: 400;}
.temp_font .featureWrap .featureTxt .txtArea p.main span{display:block; margin-top: 15px; color: #888;}
.temp_font .featureWrap .featureTxt ul.logos{background-color: #f8f8f8; margin-top: 20px; padding: 25px 40px;}
.temp_font .featureWrap .featureTxt ul.logos li{float:left; width: 20%;}
.temp_font .featureWrap .featureTxt ul.logos li a{display:block; height: 3vw; max-height:30px; background-repeat:no-repeat; background-position:center; background-size: auto 100%; font-size: 0;}
.temp_font .featureWrap .featureTxt ul.logos li.logo_1 a{background-image:url('../img/temp_main/logo_1.png');}
.temp_font .featureWrap .featureTxt ul.logos li.logo_2 a{background-image:url('../img/temp_main/logo_2.png');}
.temp_font .featureWrap .featureTxt ul.logos li.logo_3 a{background-image:url('../img/temp_main/logo_3.png');}
.temp_font .featureWrap .featureTxt ul.logos li.logo_4 a{background-image:url('../img/temp_main/logo_4.png');}
.temp_font .featureWrap .featureTxt ul.logos li.logo_5 a{background-image:url('../img/temp_main/logo_5.png');}

.temp_font .featureWrap .featureTxt table{border-top: solid 1px #222;}
.temp_font .featureWrap .featureTxt table th,
.temp_font .featureWrap .featureTxt table td{text-align: center; font-size: 14px; font-weight: 400; padding: 15px 10px; border-bottom: solid 1px #f0f0f0;}
.temp_font .featureWrap .featureTxt table th{background-color: #f8f8f8; font-weight: bold; padding: 20px 10px;}
.temp_font .featureWrap .featureTxt table td .o{color: #217fff;}
.temp_font .featureWrap .featureTxt table td .x{color: #ff2020;}

.temp_font .featureWrap .featureImg{margin-top: 40px;}
.temp_font .featureWrap .featureImg img{width: 100%;}
.temp_font .featureWrap .featureImg ul li{float:left; width: calc(33.3% - 13.3px); margin-right: 20px;}
.temp_font .featureWrap .featureImg ul li:nth-child(3n){margin-right: 0;}
/*footer*/
.temp_font .footer{font-size: 14px; text-align: center; padding: 0 20px; line-height: 60px; background-color: #0a0a0a; color: #4e4e4e; }
@media all and (max-width:815px){
	.temp_font .content{padding-top: 40px;}
	.temp_font .content .download{margin-bottom: 40px;}
	.temp_font .featureWrap .featureTxt h4{float:none; width: 100%; margin-bottom: 20px;}
	.temp_font .featureWrap .featureTxt .txtArea{float:none; width: 100%;}

	.temp_font .featureWrap .featureImg{margin-top: 20px;}
	.temp_font .featureWrap.feature_3 .featureImg{margin-top: 0;}
}
@media all and (max-width:600px){
	.temp_font .content{padding-top: 35px;}
	.temp_font .content a img{max-width:300px;}
	.temp_font .content img.des{margin-top: 35px;}
	.temp_font .featureWrap{margin-bottom: 50px;}
	.temp_font .featureWrap .featureTxt h4{font-size: 18px; margin-bottom: 15px;}
	.temp_font .featureWrap .featureTxt .txtArea p.main{padding-top: 15px; font-size: 14px;}
	.temp_font .featureWrap .featureTxt ul.logos{padding: 15px 20px;}
	.temp_font .featureWrap .featureImg ul li{margin-right: 5px; width: calc(33.3% - 3.3px);}
	.temp_font .featureWrap .featureTxt table th,
	.temp_font .featureWrap .featureTxt table td{font-size: 13px; line-height: 1.4; padding: 10px;}
	.temp_font .featureWrap .featureTxt table th{padding: 15px 10px;}

	.temp_font .footer{font-size: 13px; padding: 14px 10px; line-height: 1.2;}
}

@media all and (max-width:360px){
.temp_font .content .download a{display:block; padding: 16px 10px;font-size: 18px;}
}