@charset "utf-8";


/* main */
.main-visual {position:relative; overflow:hidden;}
.main-visual .slider_item {height:936px; position: relative; z-index:1;}

.main-visual .slider_item .background {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease;}
.main-visual .item iframe {position:absolute;top:50%;left:50%; object-fit:cover; object-position:0 0; transform:translate(-50%,-50%);  -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width: auto;height: auto; min-width:110%; min-height:110%; z-index:0;} 
.main-visual .content {position:absolute; top:50%; left:0; width:100%; color:#fff; transform:translateY(-50%); z-index:50;}
.main-visual .content .tit {font-size:100px; line-height:1.17em; font-weight:700; margin-bottom:10px;}
.main-visual .content p {font-size:22px; line-height:1.59em; font-weight:500;}
.main-visual .slick-arrow {width:20px;height:75px; font-size:0; line-height:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; z-index:50}
.main-visual .slick-prev {margin-right:20px;background-image:url('/html/_skin/public_html/images/main/slide_prev.png');}
.main-visual .slick-next {margin-left:20px;background-image:url('/html/_skin/public_html/images/main/slide_next.png');}
.main-visual .slick-arrow:hover {opacity:1;}
.main-visual .slick-arrow:focus {outline:0}
.main-visual .controler-wrap {position:absolute; bottom:200px; left:0; width:100%; z-index:2; }
.main-visual .controler-wrap .contain {display:flex; align-items:center;}
.main-visual .controler {margin-right:40px;}
.main-visual .controler .slider-play {display:none}
.main-visual .controler .slider-pause,
.main-visual .controler .slider-play {position:relative; width:75px; height:75px;  text-indent:-9999em; border:0; border-radius:100%;  background-repeat:no-repeat; background-position:50% 50%; background-color:transparent; z-index:5}
.main-visual .controler .slider-play:after,
.main-visual .controler .slider-pause:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; border-radius:100%;  border: 4px solid #fff; opacity:.3;}
.main-visual .controler .slider-pause .circle {position:absolute; top:0; left:0; width:100%; height:100%; stroke-dasharray: 500; stroke-dashoffset: 500; transform: rotate(-90deg); animation: ani 9s linear infinite;}
.main-visual .controler .slider-play {background-image:url('/html/_skin/public_html/images/main/bt_play.png')}
.main-visual .controler .slider-pause {background-image:url('/html/_skin/public_html/images/main/bt_pause.png')}
.main-visual .controler .slider-pause:focus,
.main-visual .controler .slider-play:focus {outline:0}
.main-visual .slick-counter {line-height:75px; display:flex; color:#fff; z-index:6}
.main-visual .slick-counter .totalall {font-weight:700;}
.main-visual .slick-counter .bar {padding:0 6px;}

.main_visual .slider_item a { font-size: 0; position: absolute; width: 100%; height: 100%; left:0; top:0; z-index: 3;} 


.animated {transition: all .5s ease;}
.main_visual [data-animation-in] {opacity: 0;animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;transition:1s;}

@keyframes zoomInImage {
  from {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
  to {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
}
.zoomInImage {animation-name: zoomInImage;}

@keyframes zoomOutImage {
  from {
    transform: scale3d(1, 1, 1);
	transition:1s;
  }
  to {
    transform: scale3d(1.1, 1.1, 1.1);
	transition:1s;
  }
}
.zoomOutImage {animation-name: zoomOutImage;transition:1s;}

@keyframes ani {
  0% {stroke-dashoffset: 500;}
  50% {stroke-dashoffset: 0;}
  100% {stroke-dashoffset: -500;}
}






.scroll {
	position:absolute; 
	bottom:45px; 
	right:30px;  
	width:12px; 
	height:132px;
	text-indent:-9999em;
	text-align:center;
	background:url('/html/_skin/public_html/images/main/scroll.png') 50% 100% no-repeat;
	background-size:contain;
	z-index:10;
	-webkit-animation: mainScroll .9s linear infinite alternate;
    -moz-animation: mainScroll .9s linear infinite alternate;
    -o-animation: mainScroll .9s linear infinite alternate;
    -ms-animation: mainScroll .9s linear infinite alternate;
    animation: mainScroll .9s linear infinite alternate;
	 
}

@keyframes mainScroll {from{bottom:45px;}to{bottom:55px;}}



.main-product {padding:160px 0; height:950px; background:#fff url('/html/_skin/public_html/images/main/bg_product.png') 0 0 no-repeat; overflow:hidden;}
.main-product .contain {position:relative;}
.main-product h2 {position:absolute; top:10px; left:30px; font-size:62px; line-height:1.3em; font-weight:700; letter-spacing:-.040em;}
.main-product .group {display:flex;}
.main-product .group .menu {width:300px; padding-top:190px;}
.main-product .group .menu ul {display:block;}
.main-product .group .menu ul li {width:auto; margin-bottom:15px;}
.main-product .group .menu ul li:last-child {margin-bottom:0;}
.main-product .group .menu ul li a {display:block; font-size:18px; line-height:1.4em;font-weight:700; color:#999; letter-spacing:-.025em;}
.main-product .group .menu ul li a span {position:relative; display:inline-block;}
.main-product .group .menu ul li a span:after {content:""; position:absolute; top:0; right:-40px; width:8px; height:8px; background:#408fce; border-radius:100%; opacity:0;}
.main-product .group .menu ul li.active a {color:#408fce}
.main-product .group .menu ul li.active a span:after {opacity:1;}
.main-product .group .contents {flex:1 1 auto; min-width:0; width:1%;}
.main-product .row {display:flex; position:relative; animation: slideText 0.8s ease-in; margin-left:0; margin-left:0;}
.main-product .info {width:44.8%; padding-right:90px; padding-top:180px;}
.main-product .info h3 {font-size:45px; line-height:1.4em; font-weight:700; margin-bottom:35px;}
.main-product .info .cnt {font-size:20px;line-height:1.5em; margin-bottom:30px; height:calc(1.5em * 1 * 8); -webkit-line-clamp:8; overflow:hidden; text-overflow:ellipsis; white-space:normal; display:-webkit-box;  -webkit-box-orient:vertical;}
.main-product .info .more a {display:inline-block; position:relative; width:162px; height:50px; border:1px solid #5b5b5b; padding:0 20px; font-size:16px; line-height:48px; color:#151515; font-weight:700;}
.main-product .info .more a:after {content:""; position:absolute; top:50%; margin-top:-5.5px; right:20px; width:22px; height:11px; background:url('/html/_skin/public_html/images/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-product .photo {width:55.2%; position:relative;}
.main-product .photo .thumb {position:relative; height:0; padding-bottom:100%; overflow:hidden;}
.main-product .photo .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.main-product .title {display:flex;align-items:center;pointer-events: none;}
.main-product .btns {width:240px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:5px 20px 30px;background:#fff;pointer-events: auto;}
.main-product .btns .bar {width:1px; height:15px; background:#dedede}
.main-product .btns .line {position:absolute; bottom:28px; left:50%; margin-left:-40%; width:80%;height:2px; background:#302222}
.main-product .tit {flex:1 1 auto; min-width:0; width:1%; padding:0 8rem 0 2rem; font-size:20px; line-height:1.4em; font-weight:700;}
.main-product .slide-prev,
.main-product .slide-next {width:90px; height:50px; border:0; background-color:transparent; background-repeat:no-repeat; background-size:15px}
.main-product .slide-prev {background-image:url('/html/_skin/public_html/images/main/bt_prev.png'); background-position:10% 50%;}
.main-product .slide-next {background-image:url('/html/_skin/public_html/images/main/bt_next.png'); background-position:90% 50%;}
.main-product .slick-arrow.slick-hidden {display:block; opacity:.1;}
.main-product .slick-arrow:focus{outline:0;}
.main-product .slides-numbers {position:absolute; bottom:30px; right:30px; font-size:20px; line-height:1.4em; opacity:.30;}
.main-product .slides-numbers .active {font-weight:700;}
.main-product.maketing .title {display:block;}
.main-product.maketing .tit {width:100%; padding:20px 20px; background:rgba(255,255,255,.4);}


@keyframes slideText {
  0% {
    opacity: 0;
    left: -50px;
  }
  100% {
    opacity: 1;
    left: 0px;
  }
 }

.main-product.maketing {background-image:url('/html/_skin/public_html/images/main/bg_maketing.png'); background-color:#def1ff;}
.main-product.maketing .btns {background:#def1ff}

.main-schedule {position:relative; padding:195px 0 125px; overflow:hidden;}
.main-schedule .komax {position:fixed; top:50%; left:0; width:100%;  text-align:center; z-index:-1}
.main-schedule .contain {display:flex;}
.main-schedule h2 {font-size:40px; line-height:1.3em; font-weight:700; margin-bottom:35px;}
.main-schedule .more {display:inline-block; position:absolute; top:25px; right:0; font-size:16px; line-height:1.4em; font-weight:700; padding-right:45px;}
.main-schedule .more:after {content:""; position:absolute; top:2px; right:0; width:22px; height:11px; background:url('/html/_skin/public_html/images/main/more.png') 50% 50% no-repeat; background-size:contain;}
.main-schedule .col {position:relative; padding-left:0; padding-right:0;}
.main-schedule .calendar-list {width:50%; padding-right:42px;} 
.main-schedule .calendar-list .group {display:flex;}
.main-schedule .calendar-list .calendar {width:71%; background:#e5f4ff; padding-bottom:10px;}
.main-schedule .calendar-list .calendar .head {position:relative; display:flex; align-items:center; justify-content:center; height:90px; text-align:center;}
.main-schedule .calendar-list .calendar .head span {font-size:30px; letter-spacing:-1px; line-height:1.3em; font-weight:700; margin:0 50px;}
.main-schedule .calendar-list .calendar .head .btn {width:15px; height:28px; background-position:50% 50%; background-repeat:no-repeat;}
.main-schedule .calendar-list .calendar .head .cal-prev {background-image:url('/html/_skin/public_html/images/main/cal_prev.png');}
.main-schedule .calendar-list .calendar .head .cal-next {background-image:url('/html/_skin/public_html/images/main/cal_next.png');}
.main-schedule .calendar-list .calendar .body {width:100%; padding:0 40px;}
.main-schedule .calendar-list .calendar .body table {width:100%; border-collapse:collapse; border-spacing:0px; font-size:15px;}
.main-schedule .calendar-list .calendar .body table thead th {border-bottom:1px solid #cee1f0; padding-bottom:15px;}
.main-schedule .calendar-list .calendar .body table tbody td {height:58px; vertical-align: middle;}
.main-schedule .calendar-list .calendar .body table tbody td .day {margin:0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:100%; font-size:14px; font-weight:700; line-height:1.4em;}
.main-schedule .calendar-list .calendar .body table tbody td.normal .day {color:#bababa}
.main-schedule .calendar-list .calendar .body table tbody td.sun .day {color:#df1f1f;}
.main-schedule .calendar-list .calendar .body table tbody td.week .day {color:#333;}
.main-schedule .calendar-list .calendar .body table tbody td.sat .day {color:#0e66b0;}
.main-schedule .calendar-list .calendar .body table tbody td.normal .day {color:#bababa;}
.main-schedule .calendar-list .calendar .body table tbody td.active .day {background:#003c68; color:#fff}
.main-schedule .calendar-list .calendar .body table tbody td.today .day {border:3px solid #003c68}
.main-schedule .calendar-list .calendar .body table tbody td.active-wide {background:#aad8f9;}
.main-schedule .calendar-list .calendar .body table tbody td.active-wide .day {color:#003c68}
.main-schedule .calendar-list .ex-list {width:29%; position:relative; background:#003c68;} 
.main-schedule .calendar-list .ex-list .title {background:#000; padding:22px;}
.main-schedule .calendar-list .ex-list .title h3 {color:#fff; font-size:25px; line-height:1.3em;font-weight:700;}
.main-schedule .calendar-list .ex-list .body {padding:25px 20px; color:#fff;}
.main-schedule .calendar-list .ex-list .box-scroll {height:300px; overflow:auto;}
.main-schedule .calendar-list .ex-list .box-scroll::-webkit-scrollbar {width:4px;}
.main-schedule .calendar-list .ex-list .box-scroll::-webkit-scrollbar-thumb {background:#fff;  border-radius:4px;}
.main-schedule .calendar-list .ex-list .box-scroll::-webkit-scrollbar-track {background:rgba(255, 255, 255, .10); }
.main-schedule .calendar-list .ex-list dl {margin-bottom:25px;}
.main-schedule .calendar-list .ex-list dl:last-child {margin-bottom:0;}
.main-schedule .calendar-list .ex-list dl dt {font-size:20px; line-height:1.3em;}
.main-schedule .calendar-list .ex-list dl dd {font-size:16px; line-height:1.3em;}
.main-schedule .an-record {width:50%;}
.main-schedule .an-record ul {display:flex; margin:0 -10px;}
.main-schedule .an-record ul li {width:50%; padding:0 10px;}
.main-schedule .an-record ul li a {display:block;}
.main-schedule .an-record ul li .thumb {position:relative; height:0; padding-bottom:98.8%; overflow:hidden;} 
.main-schedule .an-record ul li .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.main-schedule .an-record ul li .tit-box {background:#e5f4ff; padding:19px 25px;}
.main-schedule .an-record ul li .tit {font-size:20px; line-height:1.5em; height:calc(1.5em * 1 * 2); -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box;  -webkit-box-orient:vertical;}
.main-schedule .an-record ul li a:hover .thumb img {transform:translate(-50%,-50%) scale(1.04,1.04); -ms-transform:translate(-50%,-50%) scale(1.04,1.04); -webkit-transform:translate(-50%,-50%) scale(1.04,1.04);}



#_youtube-iframe-wrapper {display: flex;justify-content: center; align-items: center;width: 100%; position: absolute; height: 100%; background-color: #000;}
#_youtube-iframe { position: absolute;pointer-events: none;margin: 0 auto;height: 300vh;  width: 100vw;opacity: 0;}
.main_visual .slider_item.video.slick-current #_youtube-iframe { opacity: 1 !important; }

.main_visual {position:relative; overflow:hidden;}
.main_visual__slider {margin-bottom: 0 !important;}

.slider_item {
	 position: relative;
	 height: 100vh;
}

 .slider_item:not(:first-of-type) {
	 display: none;
}
 .slick-initialized .slider_item:not(:first-of-type) {
	 display: block;
}
 .slider_item__inner {
	 display: table;
	 color: #fff;
	 width: 100%;
	 height: 100%;
	 max-width: 1400px;
	 margin: 0 auto;
	 padding: 0 20px;
	 position:relative; z-index:2;
}

 .slider_item__inner .slider_item__inner__txtbox {
	 display: table-cell;
	 vertical-align: middle;
	 padding-bottom: 120px;
	 font-size: 0;
}
 .slider_item__inner .slider_item__inner__txtbox > * {
	 position: relative;
	 opacity: 0;
}
 .slider_item__inner .slider_item__inner__txtbox h2 {
	 font-size: 100px;
	 line-height:1.5em;
	 font-weight: 700;
}
 .slider_item__inner .slider_item__inner__txtbox h2 strong {
	 font-weight: 700;
}
 .slider_item__inner .slider_item__inner__txtbox p {
	 font-size: 20px;
	 font-weight: 400;
}
 
.main_visual .background {position:absolute;  top:0; left:0; width:100%; height:100%; object-fit:cover; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;  opacity: 1 !important; animation-duration: 3s; transition: all 1s ease; }
.main_visual .slick-arrow {width:20px;height:75px; font-size:0; line-height:0; border:0; background-color:transparent; background-repeat:no-repeat; background-position:50% 50%; z-index:50}
.main_visual .slick-prev {margin-right:20px;background-image:url('/html/_skin/public_html/images/main/slide_prev.png');}
.main_visual .slick-next {margin-left:20px;background-image:url('/html/_skin/public_html/images/main/slide_next.png');}
.main_visual .slick-arrow:hover {opacity:1;}
.main_visual .slick-arrow:focus {outline:0}
.main_visual .controler-wrap {position:absolute; bottom:200px; left:0; width:100%; z-index:2; }
.main_visual .controler-wrap .contain {display:flex; align-items:center;}
.main_visual .controler {width:75px; height:75px; margin-right:40px; position:relative;}
.main_visual .controler .slick-playback {position:absolute; top:0; left:0; width:75px; height:75px;  text-indent:-9999em; border:0; border-radius:100%;  background-color:transparent; z-index:5}
.main_visual .controler .slick-playback:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; background:url('/html/_skin/public_html/images/main/bt_pause.png') 50% 50% no-repeat;}
.main_visual .controler .slick-playback.play:after {background-image:url('/html/_skin/public_html/images/main/bt_play.png')}
.main_visual .controler .slick-playback:focus {outline:0}
.main_visual .controler .slider-progress {position:absolute;}
.main_visual .controler .slider-progress:after {content:""; position:absolute; top:0; left:0; width:75px; height:75px; border:4px solid #fff; border-radius:100%; opacity:.2;}
.main_visual .controler .slick-progress circle {fill: transparent; stroke: #fff;stroke-width: 4; }
.main_visual .slick-counter {line-height:75px; display:flex; color:#fff; z-index:6}
.main_visual .slick-counter .totalall {font-weight:700;}
.main_visual .slick-counter .bar {padding:0 6px;}