@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.content{padding: 2em 0 3em 0;}
.side.top{padding-top:0;}
#header{padding:0; transition:.3s; background:#fff;}
#header .page{padding:0; position:relative; max-width:98%;}
#header .page::after{content:""; display:block; clear: both; vertical-align: middle;}
#header.show{box-shadow: 0 5px 10px rgba(0,0,0,0.2);}

.logo img{padding-top:5px; padding-bottom:5px; margin-bottom:5px; transition:.3s;}
#header.show .logo img{padding-top:5px; padding-bottom:5px;}
.topfixbtn.show{display:block; animation-name: fade; animation-duration: .3s;}
.topfixbtn{width:50px; height:50px;  position:fixed; bottom:10%; right:2%; z-index: 300;  padding:3px; cursor: pointer; display:none;}
.topfixbtn::before{content:""; width:44px; height:44px; display:block; background:rgba(100,100,100,.6); border-radius:0.3em;}
.topfixbtn::after{content:""; width:20px; height:20px; display:block; border:3px solid rgba(255,255,255,0.7); border-bottom:0; border-right:0; position:absolute; top:62%; left:50%; transform:translate(-50%,-50%) rotate(45deg);}

/*--nav--*/
.syisnav{top:0%;}
.syisnav{text-align:right;}
.syisnav .nav a{color:#000; font-size:16px; padding:22px 1em; font-weight:bold;}
.syisnav .nav li:nth-last-of-type(1) a{color:#fff;}
.syisnav .nav li:nth-last-of-type(1) a::after{content:""; width:5em; height:2em; padding:3px 8px; border-radius:0.5em; background:#c01e2e; position:absolute; top:50%; left:50%; display: block; transform:translate(-50%,-50%); z-index: -1; transition:.2s;}
.syisnav .nav li:nth-last-of-type(1) a:hover::after{background:#d52132;}
.syisnav .nav li:nth-last-of-type(1) a::before{display:none;}
.syisnav .nav li:nth-last-of-type(2) a{color:#fff;}
.syisnav .nav li:nth-last-of-type(2) a::after{content:""; width:5em; height:2em; padding:3px 8px; border-radius:0.5em; background:#c01e2e; position:absolute; top:50%; left:50%; display: block; transform:translate(-50%,-50%); z-index: -1; transition:.2s;}
.syisnav .nav li:nth-last-of-type(2) a:hover::after{background:#d52132;}
.syisnav .nav li:nth-last-of-type(2) a::before{display:none;}
.syisnav .nav a::before{content:""; position:absolute; top:0; left:0;  width:100%; height:5px; background:#fff; border-radius:0 0 5px 5px; transition:.3s;}
.syisnav .nav a:hover::before{background:#c01e2e;}
/*--syistop--*/
.syistop.fixed{position:fixed; top:0; right:0;}
.syistop{font-size:13px; line-height: 1.2em; width:auto; z-index: 1000; white-space: nowrap; float:right;}
.syistop div.block{display:inline-block; padding:0 0 0 15px; position:relative; margin:0.3em 1em;}
.syistop div.block::before{content:""; width:10px; height:10px; position:absolute; top:0; left:0; background:linear-gradient(315deg,rgba(254,189,23,1) 50%,rgba(254,189,23,0) 50%);}
.syistop img{vertical-align:middle;}
.searcharea input{background:none; padding:2px 5px; width:8em; margin:0; vertical-align: middle; border:none;}
.syistop div.block.searcharea{background:#efefef; padding:0 5px;}
.syistop div.block.searcharea::before{display:none;}
/*subnav*/
#submenu{border:1px solid #ccc; border-top:none;}
.top #submenu{border:none;}
.subnav ul li a{font-weight:bold;}
.subnav ul li ul li a:hover{background:#efefef;}
.top .subnav ul li{padding:0.3em;}
.top .subnav ul li a{padding:0.6em 1em; border:1px solid #a7a4a5; position:relative; color:#616161; font-weight:bold;}
.top .subnav ul li a:hover{color:#000; background:#efefef;}
.top .subnav ul li a.hit:hover{border:1px solid #efefef;}
.top .subnav ul li a.hit{ border:1px solid #fcce01; background:#fcce01; color:#000;}
.top .subnav ul li a.hit:hover{ border:1px solid #fcce01; background:#fcce01; font-weight:bold; color:#000;}
/*--defaultimg use--*/
#defaultimg{position:relative;}
/*--list--*/
.list{padding:1.5em 0.8em;}
.list h3.subject{font-weight:normal; margin:0; padding:0.3em 0; line-height: 1.4em;}
.list .frm{display:block; padding:0; transition:.3s; position:relative;}
.list figure img{transition:.3s;}
.list .frm:hover img{transform:scale(1.05, 1.05);}
.list .frm:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list .frm:hover figure::before{opacity:1;}
.list figcaption{position:absolute; top:50%; left:50%; width:100%; height:auto; text-align: center; color:#fff;  z-index: 100; font-size: 14px; transition:.3s; transform:translate(-50%,-50%); line-height: 140%; opacity:0;}
.list .frm:hover figcaption{opacity:1;}
.list p.more{text-align:right; margin:0; font-size:12px;}
.list p.price{font-size:13px;}
/*--footer--*/
#footer{font-size:14px; line-height: 1.4em; color:#fff; background:#2b2b2b; word-break: break-all; padding:1.2rem; text-align: center;}
#footer p{margin:0;}
/*----------------default page use----------------*/
[class*="d-"]{padding:3em 0;}
.bgll{position:relative;}
.bgll::before{content:""; width:100%; height:100%; display:block; background:linear-gradient(90deg,rgba(242,242,242,0),rgba(242,242,242,1) 40%); transform:skewY(-10deg); position:absolute; top:60%; left:0; z-index: -1;}
.bgrr{position:relative;}
.bgrr::after{content:""; width:100%; height:100%; display:block; background:linear-gradient(90deg,rgba(242,242,242,1) 40%,rgba(242,242,242,0)); transform:skewY(-10deg); position:absolute; bottom:30%; left:0; z-index: -1;}
h2.dtit{font-size:260%; text-align:center; position:relative; padding-bottom:0.5em; letter-spacing:2px; vertical-align: middle; margin-bottom:1.5em; margin-top:0;}
h2.dtit::before{content:""; width:9em; height:1px; background:#cc0924; position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
h2.dtit::after{content:""; width:15px; height:15px; position:absolute; left:50%; bottom:0; background:linear-gradient(45deg,rgba(204,9,36,1) 50%,rgba(204,9,36,0) 50%); transform:translate(-50%,50%) rotate(135deg);}
h2.dtit span{background:#cc0924; border-radius:0.2em; display:inline-block; font-size:70%; color:#fff; padding:0.2em 0.8em; vertical-align: middle; transform:translateY(-4px); margin-right:0.5em;}

.morebig{transform:scale(1.02,1.02); margin-top:2em;}

.progress .list{padding:1em 2em; position:relative;}
.progress .ll{width:90px; height:auto; display: inline-block; vertical-align:bottom;}
.progress .rr{width:calc(100% - 90px); margin-left:0; font-size:180%; display: inline-block; color:#6b6b6b;  letter-spacing: 1px; position:relative; vertical-align: bottom;}
.progress .list::after{content:""; width:45px; height:45px; background:url(../images/arrow.png) no-repeat; position:absolute; top:5.5em; right:0; transform:translate(50%,-50%); background-size:contain; }
.progress .list:nth-of-type(4)::after{display:none;}
.progress .rr span{font-size:180%; font-weight:bold;}
.progress .rr h3{margin:0; color:#000; letter-spacing: 0px; font-size:87%;}
.progress .list img{transition:.3s; max-width:90%; height:auto; transform:translateY(5%);}
.progress .list section{font-size:13px; line-height: 180%; padding-top:1em; min-height:10em; opacity:0; transition:.5s; text-align: justify;}
.progress .list .frm{padding:15px; cursor: pointer;}
.progress .list .frm::before{content:""; width:5px; height:0%; background:linear-gradient(#c01e2e 110px,#8c1420 110px); position:absolute; top:0; left:0; transition:.8s;}
.progress .list .frm:hover::before{height:100%;}
.progress .list .frm:hover section{opacity:1;}
.list.env{padding:1.5em 1em;}
.list.env section{width:100%; padding:0.5em; text-align: center;}
.list.env figure{transform:skewX(-10deg);}
.list.env figure img{transform:skewX(10deg) scale(1.1,1.1);}
.list.env .frm:hover img{transform:skewX(10deg) scale(1.1,1.1);}
.d-5 .list{padding:1em 2em;}
.d-5 .list .frm{text-align:center; letter-spacing: 1px;}
.d-5 .list img{max-width:100px; height:auto;}
.d-5 .list figure{position:relative; overflow: visible;}
.d-5 .list figure::after{content:""; display:block; width:40%; height:100%; background:#f7f7f7; position:absolute; top:70%; left:50%; transform:skewY(-20deg); z-index: -1;}
.d-5 .list section{ line-height: 150%;}
.d-5 .list h3.subject{font-weight:bold; font-size:140%;}
.d-7 .list{padding:0 1em;}
.d-7 .list .frm{vertical-align: bottom;}
.d-7 .list p span{font-weight:bold;}
.d-7 .list.ll p{line-height:180%; margin-bottom:1.5em; margin-top:0; }
.d-7 .list.rr p{margin:0; padding-left:1em; line-height:180%; position:relative;}
.d-7 .list.rr p::before{content:""; width:5px; height:5px; background:#000; border-radius:100%; position:absolute; top:0.8em; left:5px;}
.d-7 .internslick{background:url(../images/intern-bg.jpg) no-repeat center; background-size:cover; padding:5% 10%; color:#fff; margin-top:2em;}
.d-7 h3.subject{font-weight:bold; margin-bottom:1em; position:relative; padding-bottom:0.5em;}
.d-7 h3.subject::before{content:""; width:4em; height:5px; background:rgba(204,9,36,1); position:absolute; bottom:0; left:1em;}
.d-7 .internslick .innerhtml{font-size:15px; line-height:180%; text-align: justify;}
.d-7 .internslick figure{width:36%; display:inline-block; vertical-align: bottom; padding:0; text-align: center;}
.d-7 .internslick .frm{vertical-align:bottom; display:inline-block;}
.d-7 .internslick section{width:60%; display:inline-block; vertical-align:bottom; padding:1em 0; margin-left:2%;}
.d-7 .internslick .list .frm:hover img{transform:scale(1, 1);}
.d-8 p{margin:0; padding-left:1em; line-height:180%; position:relative; font-weight:bold;}
.d-8 .info p::before{content:""; width:5px; height:5px; background:#000; border-radius:100%; position:absolute; top:0.8em; left:5px;}
.d-8 .info {text-align:center;}
.d-8 .info div{width:31em; display:inline-block;}
.d-8 .info .list{text-align:left; width:40%; display:inline-block; padding:0; margin:0 2.5%;}
.subtit{font-size:160%; text-align:center; position:relative;overflow: hidden;}
.subtit::before,.subtit::after{content:""; width:50%; height:1px; background:#c01e2e; position:absolute;}
.subtit::before{transform: translate(calc(-100% - 20px) , 11px);}
.subtit::after{transform: translate(20px , 11px);}
@media screen and (max-width:480px){
	.subtit::before,.subtit::after{
		height: 0;
	}
}
.subtit.w5::before{content:""; width:calc(50% - 5em);}
.subtit.w5::after{content:""; width:calc(50% - 5em);}
.subtit.w9::before{content:""; width:calc(50% - 9em);}
.subtit.w9::after{content:""; width:calc(50% - 9em);}
.list.block{padding:0em 1.8em;}
.list.block img{max-width:80%; height:auto;}
.list.block .frm{border-radius:1em; background:none; padding:0 1em; height:10em;}
.list.block h4.subject{font-size:130%; line-height:130%; width:calc(100% - 120px); padding-left:10px; display:inline-block; vertical-align:middle; margin:0; font-weight:400;}
.list.block figure{width:110px; height:auto; display:inline-block; vertical-align:middle;}

@media screen and (max-width:1286px){/*desktop*/
	.page{padding:0 3%;}
	.syisnav .nav a{font-size:15px;}
	.progress .list{padding:1em;}
	.progress .ll{width:70px;}
	.progress .rr{font-size:160%; width:calc(100% - 70px);}
	.progress .list::after{width:40px; height:40px; right:10px;}
	.list.block{padding:1em 0.5em;}
	.list.block .frm{padding:1em 0.5em; height:9em;}
	.list.block h4.subject{font-size:130%;}
}
@media screen and (max-width:1026px){/*desktop*/
.progress .rr::after{width:25px; height:25px; right:-45px;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	
	.logo{padding-left:1%;}
	
	.list.block .frm{height:7em;}
	.list.block figure{width:70px;}
	.list.block h4.subject{font-size:100%; width:calc(100% - 80px);}
	.list.env h3.subject{font-size:90%; margin:0; padding:0;}
	.progress .ll{width:100%;}
	.progress .rr{font-size:160%; width:100%;}
	.progress .list::after{top:7em; width:30px; height:30px;}
	.progress .list section{opacity:1;}
	.d-7 .internslick figure{vertical-align:top;}
}
@media screen and (max-width:767px){/*phone*/
	#header{box-shadow:0 5px 10px rgba(0,0,0,0.3);}
	#header .page{max-width:100%;}
	.logo img{padding-top:5px; padding-bottom:5px;}
	.syisnav .nav a::before{width:0;}
	.syisnav{transform:translateY(0);}
	.syisnav .nav a{color:#ccc; padding:0.5em 1em;}
	.syisnav .nav  li{ border-bottom:1px solid #666;}
	.syisnav .nav li:nth-last-of-type(1) a::after{width:100%;}
	.page{padding:0 3%;}
	
	.syistop{width:100%; text-align:center; border-radius:0; background:#fff;}
	.syistop a{padding-right:0px;}
	/*subnav*/
	.subnav ul li{padding:0;}
	.top .subnav ul li a{border:none; border-bottom:1px dotted #ccc; padding:0.3em 1em; text-align: left; font-weight:normal;}
	#footer{text-align:center;}
	h2.dtit{font-size:180%;}
	.morebig{transform:scale(1.02,1.02);}
	.progress .list:nth-of-type(1)::after{display:none;}
	.progress .list:nth-of-type(4)::after{display:block;}
	.progress .list::after{content:""; width:40px; height:40px; position:absolute; top:0px; right:50%; transform:translateX(50%) rotate(90deg);}
	.progress .ll{width:110px;}
	.progress .rr{width:calc(100% - 120px);}
	.progress .list section{opacity:1; min-height:auto;}
	.progress .list .frm::before{display:none;}
	.list.env{padding:0.3em;}
	.list.env section{padding:0.3em;}
	.list.env h3.subject{font-size:80%;}
	.d-5 .list{padding:1em 0.5em;}
	.d-5 .list h3.subject{font-weight:bold; font-size:100%;}
	.d-5 .list section{font-size:90%;}
	.d-7 .list{    padding: 0 1.5em;	}
	.d-7 .list.ll p{margin:auto;}
	.d-8 .info div{width:100%;}
	.d-8 .info .list{width:100%;}
	.d-7 .internslick{padding:1em;}
	.d-7 .internslick figure, .d-7 .internslick section{width:100%;}
	.d-7 .internslick section{margin-left:0%;}
	.subtit{font-size:130%;}
	.list.block{padding:1em 0em;}
	.list.block figure{width:100%;}
	.list.block h4.subject{width:100%;}
	.list.block .frm{height:auto;}
	
}
@media screen and (max-width:480px){/*phone*/
	.col-ms8{width: 66.66%;}
	.list.block figure{width:60px;}
	.list.block h4.subject{width:calc(100% - 70px);}
	.list.block{padding:0.3em; margin-left:50%; transform:translateX(-50%);}
	.list.block .frm{height:auto;}
}
.text-center{
	text-align: center;
}
.grid-row{
	display: flex;
	flex-direction: column;
}
.logo-icon{
	display: inline-flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
	padding: 20px;
}
.logo-icon > div{
	padding: 20px 15px 0 15px;
}
.logo-icon img{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
.css-filters-img img{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
}
#hotai-podcast p{
	padding: 0;
}

#hotai-podcast .tit{
	font-size: 20px;
	margin: 0em 0em 2em 0em;
}
@media screen and (max-width:767px){
	.d-block{
		display: block;
		padding: 0;
	}
	#hotai-podcast .text-color-g{
		color:#6B6B6B
	}
	#hotai-podcast .logo-icon div{
		padding: 10px;
	}
	#hotai-podcast .col-m2{
		width: 20%;
	}

	#hotai-podcast .tit{
		font-size: 15px;
		margin: 0;
	}
	.grid-row{
		flex-direction: column-reverse;
		padding: 20px;
	}
}
@media screen and (max-width:320px){
	.d-block{
		font-size: 13px;
	}
}