@charset "utf-8";
/* CSS Document */

/*** 
====================================================================
	Main
====================================================================
***/
.auto-container{
	max-width:1800px;
}

.mainzone  { position:relative; width:100%; overflow: hidden; padding:50px 0}
.mainzone .mv { height:750px; background: var(--thm-primary);}
.mainzone .mv .content {
	position: relative;
    height:100%;
}

.mainzone .mv .content .video-container {
	position: absolute;
	width:100%;
	height:100%;
	overflow: hidden;
	top:0;
	left:0;
	line-height: 0;
	z-index: 0;
}
.mainzone .mv .content .video-container:before {
    content:'';
    background: #000;
    opacity: .2;
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index: 0;
}
.mainzone .mv .content .video-container video {
	width: 100%;
    height: 100%;
}

.mainzone .mv .content .title{
    z-index: 1;
    position:absolute;
    top:50%;
    left:10%;
    transform: translateY(-50%);
}
.mainzone .mv .content .title img { height:80px;}
.mainzone .mv .content .title p { color:#fff; margin:20px 0 0 90px;  font-size: 1.1em }
.mainzone .mv .content .title p span { font-size: 1.03em; letter-spacing: 0; display: inline-block; margin-left:5px}
.mainzone .alim {height:420px; overflow: hidden; margin-left:30px; border:solid 1px #e5e5e5;}
.mainzone .alim .alimpan { position: relative}
.mainzone .alim .alimpan .mainAlimpan_slide .noContent{ width:493px; height:338px; background-color: #ddd; background-image: url("../images/logo.svg"); background-size: 40%; background-position: center center; background-repeat: no-repeat; background-blend-mode:luminosity; opacity: .3}
.mainzone .alim .alimpan h2{ font-size: 1.1em;  height:80px; line-height:1;  color:#222; font-weight: 500; padding:30px 30px 0}
.mainzone .alim .alimpan .pagenpause { position: absolute; top:25px; right:20px; display: flex;}
.mainzone .alim .alimpan .pagenpause .swiper-pagination { position: static; width:auto; margin-right:15px; font-size: .9em}
.mainzone .alim .alimpan .pagenpause .swiper-pagination .swiper-pagination-current { color:#222;}
.mainzone .alim .alimpan .pagenpause .swiper-button-prev { position: static;  margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center }
.mainzone .alim .alimpan .pagenpause .swiper-button-next { position: static; margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center}
.mainzone .alim .alimpan .pagenpause .swiper-button-prev i, .mainzone .alim .alimpan .pagenpause .swiper-button-next i { font-size: 12px; color:#000; width:100%; height:100%; text-align: center; line-height: 30px; vertical-align: top; }
.mainzone .alim .alimpan .pagenpause .swiper-button-prev:after, .mainzone .alim .alimpan .pagenpause .swiper-button-next:after { display: none}
.mainzone .alim .alimpan .pagenpause .pauseWrap { position:relative;width:32px; height:32px; margin:0 5px}
.mainzone .alim .alimpan .pagenpause .pauseWrap .swiper-button-play, .mainzone .alim .alimpan .pagenpause .pauseWrap .swiper-button-pause { position: absolute; margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center}
.mainzone .alim .alimpan .pagenpause .pauseWrap .swiper-button-play i, .mainzone .alim .alimpan .pagenpause .pauseWrap .swiper-button-pause i { font-size: 10px; color:#000; width:100%; height:100%; text-align: center; line-height: 30px; vertical-align: top; }

.mainzone .latestWrap {height:420px; margin-left:30px; border:solid 1px #e5e5e5;}
.mainzone .latestWrap .innerCon {  position: relative; height:50%; padding:30px;}
.mainzone .latestWrap .innerCon:nth-of-type(2) { border-top:solid 1px #e5e5e5}
.mainzone .latestWrap .innerCon h2{ font-size: 1.1em;  height:38px; line-height:1;  color:#222; font-weight: 500;}
.mainzone .latestWrap .innerCon .btn_more { position:absolute; top:23px ; right:30px;   width: 32px;  height: 32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0;}
.mainzone .latestWrap .innerCon .btn_more:after { content:'+'; width:100%; height:100%; font-size: 18px; text-align: center; color:#222; display:inline-block; line-height: 30px }
.mainzone .latestWrap .innerCon .btn_more:hover { background-color: #666; }
.mainzone .latestWrap .innerCon .btn_more:hover:after { color:#fff;}
.mainzone .latestWrap .innerCon ul.latestCon { padding:0}
.mainzone .latestWrap .innerCon ul.latestCon li { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 1; margin: 8px 0}
.mainzone .latestWrap .innerCon ul.latestCon li:last-child { margin-bottom:0}
.mainzone .latestWrap .innerCon ul.latestCon li span.cate { font-size:.77em; background-color: #ecfafb; color: #3d8d9a; display: inline-block; width: 70px; height: 30px; line-height: 30px; border-radius: 14px; text-align: center; margin-right:10px}
.mainzone .latestWrap .innerCon ul.latestCon li span.cate.col01 { background-color: #ecfafb; color: #3d8d9a;}
.mainzone .latestWrap .innerCon ul.latestCon li span.cate.col02 { background-color: #f0eef8; color: #5f4c9e;}
.mainzone .latestWrap .innerCon ul.latestCon li span.cate.col03 { background-color: #fff6d7; color: #96651f;}
.mainzone .latestWrap .innerCon ul.latestCon li span.cate.col04 { background-color: #e8f0fe; color: #5c6f92;}
.mainzone .latestWrap .innerCon ul.latestCon li a { font-size:.92em; color:#444}
.mainzone .latestWrap .innerCon ul.latestCon li a:hover { text-decoration: underline; color:#222; }
.mainzone .latestWrap .innerCon .noContent { width:100%;  line-height: 150px !important; text-align: center }

.mainzone .barogagi {height:300px;  margin-left:30px;  margin-top:30px; border:solid 1px #e5e5e5; position: relative }
.mainzone .barogagi  h2{ font-size: 1.1em;  height:80px; line-height:1;  color:#222; font-weight: 500; padding:30px 30px 0; border-bottom:solid 1px #e5e5e5}
.barogagi_slide { padding:40px; overflow: hidden }
.barogagi_slide .swiper-slide a{
    display: block;
	width: 160px;
	height: 140px;
	text-align: center;
	color: #000;
	font-weight: 500;
	word-break: keep-all;
    transition: all 0.3s ease-in;
}
.barogagi_slide div a:hover {
    
}
.barogagi_slide div a i { width:100%; height:70%; display: block; background-size: 40%; background-repeat: no-repeat; background-position: center 20px}
.barogagi_slide div a i.icon-shortcut0101{background-image: url("../images/icons/sc01.png")}
.barogagi_slide div a i.icon-shortcut0102{background-image: url("../images/icons/sc02.png")}
.barogagi_slide div a i.icon-shortcut0103{background-image: url("../images/icons/sc03.png")}
.barogagi_slide div a i.icon-shortcut0104{background-image: url("../images/icons/sc04.png")}
.barogagi_slide div a i.icon-shortcut0105{background-image: url("../images/icons/sc05.png")}
.barogagi_slide div a i.icon-shortcut0106{background-image: url("../images/icons/sc06.png")}
.barogagi_slide div a:hover [class^="icon-shortcut"] {
	transform:rotateY(360deg);
	transition-duration:.6s;
}
.barogagi_slide div span { font-size: .9em; font-weight: 400;}
.barogagi_slide .pagenpause { position: absolute; top:25px; right:20px; display: flex;}
.barogagi_slide .pagenpause .barogagi-pagination { position: static; width:auto; margin-right:15px; font-size: .9em}
.barogagi_slide .pagenpause .barogagi-pagination .barogagi-pagination-current { color:#222;}
.barogagi_slide .pagenpause .barogagi-button-prev { position: static;  margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center }
.barogagi_slide .pagenpause .barogagi-button-next { position: static; margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center}
.barogagi_slide .pagenpause .barogagi-button-prev i, .barogagi_slide .pagenpause .barogagi-button-next i { font-size: 12px; color:#000; width:100%; height:100%; text-align: center; line-height: 30px; vertical-align: top; }
.barogagi_slide .pagenpause .barogagi-button-prev:after, .barogagi_slide .pagenpause .barogagi-button-next:after { display: none}
.barogagi_slide .pagenpause .pauseWrap { position:relative;width:32px; height:32px; margin:0 5px}
.barogagi_slide .pagenpause .pauseWrap .barogagi-button-play, .barogagi_slide .pagenpause .pauseWrap .barogagi-button-pause { position: absolute; margin:0;  width:32px; height:32px; border-radius: 100%; border: 1px solid #dddddd; background-color: #ffffff; display: block; font-size: 0; text-align: center}
.barogagi_slide .pagenpause .pauseWrap .barogagi-button-play i, .barogagi_slide .pagenpause .pauseWrap .barogagi-button-pause i { font-size: 10px; color:#000; width:100%; height:100%; text-align: center; line-height: 30px; vertical-align: top; }




@media (min-width: 2400px) {

}
@media (min-width: 1280px) and (max-width: 1800px){
    .mainzone .mv { height:auto; max-height:98vh; overflow: hidden}
    .mainzone .mv .content .video-container { position: static}
    .mainzone .mv .content .video-container video { width:auto}
    
    .mainzone .alim  { height:auto}
    .mainzone .latestWrap   { height:auto}
    .mainzone .latestWrap .innerCon ul.latestCon li:last-child { display: none}
    .mainzone .barogagi { }
    .barogagi_slide { padding:40px 0 0;}

}
@media (min-width: 993px) and (max-width: 1279px){
    .mainzone { padding:0}
    .mainzone .mv .content .video-container video { height:auto}
    .mainzone .alim , .mainzone .latestWrap, .mainzone .barogagi{ margin-left:0;}
    .barogagi_slide .swiper-slide a { width:auto;}
    .barogagi_slide div a i {background-size:60px;}
    
}

@media (min-width: 768px) and (max-width: 992px){
    .mainzone  { padding: 0}
    .mainzone .mv { height:auto}
    .mainzone .mv .content .video-container { position: relative;}
    .mainzone .alim { margin:0; height:auto;}
    .mainzone .alim .alimpan h2 { font-size: 1em; padding:30px 30px 0}
    .mainzone .latestWrap { height:auto; margin:-1px 0 0 0}
    .mainzone .latestWrap .innerCon h2 { font-size: 1em}
    .mainzone .latestWrap .innerCon ul.latestCon li span.cate { font-size: .65em}
    .mainzone .latestWrap .innerCon ul.latestCon li a { font-size: .82em;}
    .mainzone .barogagi { height:auto; margin:-1px 0 0 0;}
    .barogagi_slide { padding:0; margin:30px 20px; overflow: hidden}
    .mainzone .barogagi h2 { font-size: 1em}
    .barogagi_slide .swiper-slide a { width:auto; height:90px; }
    .barogagi_slide div a i { background-size: 30%; background-position:  center }
    .barogagi_slide div span { font-size: .8em}
}
@media (max-width: 767px) {
    .mainzone  { padding: 0}
    .mainzone .mv { height:auto}
    .mainzone .mv .content .video-container { position: relative;}
    .mainzone .mv .content .title { left:12%;}
    .mainzone .mv .content .title img { height:50px;}
    .mainzone .mv .content .title p { margin:10px 0 0 55px; font-size:.75em}
    .mainzone .alim { margin:0; height:auto;}
    .mainzone .alim .alimpan h2 { font-size: 1em; padding:30px 30px 0}
    .mainzone .latestWrap { height:auto; margin:-1px 0 0 0}
    .mainzone .latestWrap .innerCon h2 { font-size: 1em}
    .mainzone .latestWrap .innerCon ul.latestCon li span.cate { font-size: .65em}
    .mainzone .latestWrap .innerCon ul.latestCon li a { font-size: .82em;}
    .mainzone .barogagi { height:auto; margin:-1px 0 0 0;}
    .barogagi_slide { padding:0; margin:30px 20px; overflow: hidden}
    .mainzone .barogagi h2 { font-size: 1em}
    .barogagi_slide .swiper-slide a { width:auto; height:90px; }
    .barogagi_slide div a i { background-size: 43%; background-position:  center }
    .barogagi_slide div span { font-size: .8em}
}