@charset "utf-8";

/*******************************************
	Common Style
*******************************************/

#m_conts {overflow:hidden; background:url(../img/main/bak_pattern.svg) no-repeat center bottom; background-size: contain;}

.mainSection {position:relative; padding-left:1em; padding-right:1em;}

.mainSection h3 > * {display:block; line-height:1.4em;}
.mainSection h3 span {font-size:.8em; color:#E73656; letter-spacing:.05em;}
.mainSection h3 strong {font-family:'RiaSans',sans-serif; color:#17212D; font-size:2em; font-weight:600;}

@media all and  (max-width:1024px) {
	.mainSection h3 span {font-size:.667em; margin-bottom:.3em;}
	.mainSection h3 strong {font-size:1.33em;}	
}


/*******************************************
	Section : Visual
*******************************************/

.mainVisualWrap {display:flex; flex-direction:column; justify-content:center; height:100vh; min-height:45.4em;}
.mainVisualWrap .txt {margin-top:11.5em; font-family:'RiaSans',sans-serif; color:#fff; word-break:keep-all; text-shadow: 0 0 30px rgba(0, 0, 0, .7);}
.mainVisualWrap .txt h2 {margin-bottom:.5em;}
.mainVisualWrap .txt h2 strong {display:block; font-size:3em; line-height:1.4em; text-align:center;}
.mainVisualWrap .txt p {font-size:1.2em; text-align:center;} 

@media all and (max-width:1024px) {
	.mainVisualWrap {height:auto; min-height:0; padding-top:7.867em; padding-bottom:10.67em;}
	.mainVisualWrap .txt {margin-bottom:2.2em;}
	.mainVisualWrap .txt h2 strong {font-size:1.73em;}
	.mainVisualWrap .txt p {font-size:.8em;}		
}


.video-modal {display:none; position:absolute; top:-13em; left:50%; transform:translate(-50%, -50%); width:80%; max-width:800px; z-index:11;}
.video-modal .modal-content {padding:0; border-radius:1.5em; box-shadow:0 4px 8px rgba(0, 0, 0, 0.2); overflow:hidden;}
.video-modal .modal-content video {display:block; width:100%; height:auto;}
.video-modal .modal-close {position:absolute; top:-1.8em; right:2em; display:block; position:absolute; width:3em; height:3em; border-radius:100%; text-indent:-999px; overflow:hidden; box-shadow:0 1em 1.25em 0 rgba(17,43,98,.1); background:#fff; cursor: pointer;}
.video-modal .modal-close:before {content: ""; display: block; position: absolute; width: .8em; height: .8em; top: 50%; left: 50%; margin: -.4em 0 0 -.4em; background: url(../img/main/spr_main.svg) no-repeat -3em 0 / auto 8em; background-position: -2.8em -1.5em;}

@media (max-width:1024px) {
	.video-modal {top:-5em;}
	.video-modal .modal-close {font-size:.7em;}
}
@media (max-width:480px) {
	.video-modal .modal-close {font-size:.6em;}
}


.mainQuick {display:block; position:absolute; bottom:1em; left:0; width:100%;}
.mainQuick .control > * {display:block; position:absolute; top:50%; margin-top:-1.5em; width:3em; height:3em; border-radius:100%; text-indent:-999px; overflow:hidden; box-shadow:0 1em 1.25em 0 rgba(17,43,98,.1); background:#fff; z-index:2;}
.mainQuick .control > *:before {content:""; display:block; position:absolute; width:1em; height:1em; top:50%; left:50%; margin:-.5em 0 0 -.5em; background:url(../img/main/spr_main.svg) no-repeat -3em 0 / auto 8em;}
.mainQuick .control > *.prev {left:-1.5em;}
.mainQuick .control > *.next {right:-1.5em;}
.mainQuick .control > *.prev:before {background-position-x:-1.5em;}
.mainQuick .control > *.next:before {background-position-x:-4.5em;}
.mainQuick .control > *.prev:hover:before {background-position-x:-3em;}
.mainQuick .control > *.next:hover:before {background-position-x:-6em;}
.mainQuick .control > *.next {margin-left:-.5em;}


.mainQuick .slider .swiper-container{overflow:visible;}
.mainQuick .slider .swiper-slide {width:auto !important;}
.mainQuick .slider a {display:block; position:relative; border-radius:20px; padding:1.6em .5em .6em; z-index:0; width:9em;}
.mainQuick .slider a:before,
.mainQuick .slider a:after {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; transition:.3s background; -webkit-transition:.3s background;}
.mainQuick .slider a:before {border:30px solid transparent; border-image:url('../img/main/img_border_frame_off.png') 30 fill stretch; z-index:-1;}
.mainQuick .slider a:after {background:rgba(255,255,255,.1); backdrop-filter:blur(2px); border-radius:20px; z-index:-2; box-shadow:0 1.5em 2.5em 0 rgba(17,43,98,.05);}
.mainQuick .slider a:focus:before,
.mainQuick .slider a:hover:before {border-image:url('../img/main/img_border_frame_on.png') 30 fill stretch;}
.mainQuick .slider a:focus:after,
.mainQuick .slider a:hover:after {background:rgba(255,255,255,.4);}
.mainQuick .slider a i {display:block; position:relative; width:4em; height:4em; margin:0 auto .7em; background:url(../img/main/spr_quick_icons.svg) no-repeat 0 50% / auto 4em;}
.mainQuick .slider a i.ty2 {background-position-x:-4em;}
.mainQuick .slider a i.ty3 {background-position-x:-8em;}
.mainQuick .slider a i.ty4 {background-position-x:-12em;}
.mainQuick .slider a i.ty5 {background-position-x:-16em;}
.mainQuick .slider a i.ty6 {background-position-x:-20em;}
.mainQuick .slider a strong {display:flex; align-items:center; justify-content:center; text-align:center; color:#868FA1; font-size:.9em; line-height:1.3em; height:2.6em; font-weight:400;}
.mainQuick .slider a:focus strong,
.mainQuick .slider a:hover strong {color:#17212D; font-weight:700;}

@media all and (min-width:931px) {
	.mainQuick .control {display:none;}
	.mainQuick .swiper-wrapper {display:flex; width:100%; align-items:center; justify-content:center; transform:none !important; -webkit-transform:none !important;}
	.mainQuick .swiper-slide-duplicate {display:none;}
	.mainQuick .slider .swiper-slide {margin:0 1em !important;}
}

@media all and (max-width:1024px) {
	.mainQuick {left:2em; right:2em; width:auto;}
	.mainQuick .swiper-container {overflow:visible;}
	.mainQuick .slider a {width:6.348em; padding-top:1em;}
	.mainQuick .slider a i {font-size:.834em;}
}

@media all and (min-width:931px) and (max-width:1024px) {
	.mainQuick .slider .swiper-slide {margin:0 .5em !important;}
}

@media all and (max-width:640px) {
	.mainQuick {font-size:.9em;}
}

.mainVisual {position:absolute; top:0; left:0; right:0; bottom:3.9em; z-index:-1;}
.mainVisual:before {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:4em; background:url(../img/common/bak_visual.png) no-repeat bottom center / cover; z-index:5;}
.mainVisual:after {content:""; display:block; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:#fff; z-index:5;}
.mainVisual > div {position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 50% / cover; opacity:0; -webkit-animation:crossFade 20s infinite; animation:crossFade 20s infinite; z-index:0;}
.mainVisual .bak1 {background-image:url(../img/main/bak_visual01.jpg); -webkit-animation-delay:0s; animation-delay:0s;}
.mainVisual .bak2 {background-image:url(../img/main/bak_visual02.jpg); -webkit-animation-delay:-15s; animation-delay:-15s;}
.mainVisual .bak3 {background-image:url(../img/main/bak_visual03.jpg); -webkit-animation-delay:-10s; animation-delay:-10s;}
.mainVisual .bak4 {background-image:url(../img/main/bak_visual04.jpg); -webkit-animation-delay:-5s; animation-delay:-5s;}
.mainVisual .bak5 {background-image:url(../img/main/bak_visual05.jpg); -webkit-animation-delay:-5s; animation-delay:-5s;}
@media all and (max-width:870px) {.mainVisual:before {background:url(../img/common/bak_visual_ta.png) no-repeat center bottom;}}

@-webkit-keyframes crossFade {
	0%, 20% { opacity:1; z-index:2; }
	25% { opacity:0; z-index:2; }
	25.01%, 75% { opacity:0; z-index:0; }
	75.01%, 100% { opacity:1; z-index:1; }
}
@keyframes crossFade {
	0%, 20% { opacity:1; z-index:2; }
	25% { opacity:0; z-index:2; }
	25.01%, 75% { opacity:0; z-index:0; }
	75.01%, 100% { opacity:1; z-index:1; }
}

/*******************************************
	Section : Event
*******************************************/

.mainEventWrap {padding-top:3em; padding-bottom:5em;}
.mainEventWrap .inner:before {content:""; display:block; position:absolute; top:-6.2em; left:-10.5em; width:13.4em; height:13.1em; background:url(../img/main/bak_event.png) no-repeat 0 0 / contain;}
.mainEventWrap h3 strong {font-size:1.8em;}

@media all and (min-width:1025px) {
	.mainEventWrap .inner {display:flex; align-items:start; justify-content:space-between;}	
}
@media all and (max-width:1024px) {
	.mainEventWrap {padding-bottom:2.33em;}
	.mainEventWrap .inner:before {left:-2em; top:-2.73em;}
	.mainEventWrap h3 strong {font-size:1.3em;}
}

.mainSpecEvent {display:block; position:relative; width:35.15em; height:28em; margin-left:-3em; z-index:1; padding:6.5em 3em; flex-shrink:0;}

.mainSpecEvent .desc h3 {position:relative; flex-shrink:0;}
.mainSpecEvent .desc h3 span {position:absolute; left:0; top:-2em; color:#FFED86;}
.mainSpecEvent .desc h3 strong {color:#fff; margin-bottom:.5em;}
.mainSpecEvent .desc p {font-weight:500; margin-bottom:.5em}
.mainSpecEvent .date {position:relative; color:#fff; flex-shrink:0;}
.mainSpecEvent .date > * {display:block; line-height:1.5em;}
.mainSpecEvent .date strong {font-size:1.2em; padding-right:.33em;}
.mainSpecEvent .more{position: absolute; bottom: 3em; right: 3em; display: flex; align-items: center; justify-content: space-between; width: 8.5em; height: 2.5em; border-radius: 9em; padding: 0 1.1em 0 1.4em; border: 1px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .1); color: #fff;}
.mainSpecEvent .more:after{content: ""; display: block; position: relative; width: .6em; height: .6em; background: url(../img/main/ico_link.svg) no-repeat 50% 50% / contain;}
.mainSpecEvent .more span{line-height: 1.4em; font-size: .9em; font-weight: 600; white-space: nowrap;}
.mainSpecEvent .more:hover{border: 1px solid #E73656; background: #E73656; transition:.3s all; -webkit-transition:.3s all;}

.mainSpecEvent .bak {display:block; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:3em; overflow:hidden; z-index:-1;}
.mainSpecEvent .bak:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.1);}
.mainSpecEvent .bak img {display:block; position:absolute; width:100%; height:100%; object-fit:cover; z-index:-1;}


@media all and (max-width:1024px) {
	.mainSpecEvent {width:auto; margin:0; height:auto; padding: 4em 3em;}
	.mainSpecEvent .desc {margin-bottom:3.5em;}
	.mainSpecEvent .bak {border-radius:1.33em;}
	.mainSpecEvent .desc h3 strong {font-size:1.2em;}
	.mainSpecEvent .date strong {font-size:.93em; padding-right:0;}
	.mainSpecEvent .date span {font-size:.867em;}
	.mainSpecEvent .links {position:relative; left:auto; right:auto; bottom:auto; margin:0 -1.33em; padding:1.33em 1.73em 1.6em;}
	.mainSpecEvent .links strong {margin-bottom:1em;}
}

.mainEvent {display:flex; position:relative; justify-content:space-between; align-items:end; flex-wrap:wrap; margin:2.3em 0 0 1em; width:46em; z-index:0; padding:2.3em 3.5em 3.15em;}
.mainEvent:before {content:""; display:block; position:absolute; top:0; right:-3em; bottom:0; left:-9.3em; border-radius:3em; background:#F8F8FC; z-index:-1;}
.mainEvent .more {display:block; position:absolute; top:-1.5em; right:0; background:#17212D; border-radius:9em; width:3em; height:3em; text-indent:-999px; overflow:hidden;}
.mainEvent .more:before {content:""; display:block; position:absolute; top:50%; left:50%; margin:-.45em 0 0 -.45em; width:.9em; height:.9em; background:url(../img/main/spr_main.svg) no-repeat 0 -1.5em / auto 8em;}
.mainEvent .control {display:flex; align-items:center;}
.mainEvent .control select {display:block; position:relative; height:calc((34 / 24) * 1em); font-size:1.2em; padding-right:1.1em; font-weight:800; color:#17212D; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:transparent url(../img/main/ico_select.svg) no-repeat top 50% right 0 / 12px auto; border:0; cursor:pointer;}
.mainEvent .control select::-ms-expand {display:none;}
.mainEvent .control select + select {margin-left:1.2em;}
.mainEvent .list-box {display:block; position:relative; width:100%; margin-top:1.9em; height:19.5em;}
.mainEvent .list-box .scroll {height:100%;}
.mainEvent .list-box li + li {margin-top:1em;}
.mainEvent .list-box a {display:block; position:relative; z-index:0;}
.mainEvent .list-box a > * {display:block; position:relative; line-height:1.4em;}
.mainEvent .list-box a:before {content:""; display:block; position:absolute; top:.9em; height:1px; background:#DAE1EC; left:0; right:0; z-index:-1;}
.mainEvent .list-box a .cate {display:flex; align-items:center; justify-content:center; width:calc((102 / 18) * 1em); height:calc((35 / 18) * 1em); border-radius:9em; text-align:center; font-size:.9em; color:#fff; background:#333;}
.mainEvent .list-box a .cate.ty1 {background:#D72E65;}
.mainEvent .list-box a .cate.ty2 {background:#1462B3;}
.mainEvent .list-box a .cate.ty3 {background:#F4A11A;}
.mainEvent .list-box a .subj {display:block; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:1.1em; color:#000; margin:.68em 0; font-weight:600;}
.mainEvent .list-box a .date {display:flex; align-items:center; font-size:.8em; color:#ABB5C7; line-height:1.3em;}
.mainEvent .list-box a .date:before {content:""; display:block; position:relative; font-size:calc((20 / 16) * 1em); width:1em; height:1em; margin-right:.5em; background:url(../img/main/spr_main.svg) no-repeat 0 0 / auto 8em;}

.mainEvent .scroll.scroll-wrapper {position:relative; height:100%; overflow:visible !important;}
.mainEvent .scroll .scroll-element_outer,
.mainEvent .scroll .scroll-element_outer .scroll-element_size,
.mainEvent .scroll .scroll-element_track {width:100%; height:100%;}
.mainEvent .scroll .scroll-element.scroll-y {display:none; position:absolute; top:0; bottom:0; right:-3.5em; width:.4em; background:#EBEBF5; border-radius:9em;}
.mainEvent .scroll .scroll-element.scroll-y.scroll-scrolly_visible {display:block;}
.mainEvent .scroll .scroll-element.scroll-y .scroll-bar {display:block; position:absolute; left:0; right:0; bottom:0; background:#17212D; border-radius:9em; opacity:1;}
.mainEvent .scroll .scroll-element.scroll-x .scroll-element_outer {height:.2em; top:0; }
.mainEvent .scroll .scroll-element.scroll-y .scroll-element_outer {left:0; width:.2em; }

.mainEvent .no_data {display:flex; align-items:center; width:100%; height:18.5em; text-align:center; color:#4B5361; justify-content:center; flex-direction:column;}
.mainEvent .no_data:before {content:""; display:block; position:rleaitve; width:calc((155 / 18) * 1em); height:calc((63 / 18) * 1em); background:url(../img/common/img_no_data.png) no-repeat 50% 50%; background-size:contain; margin:0 auto 1em;}

@media all and (max-width:1024px) {
	.mainEvent {width:auto; margin:2.2em 0 0; padding:1.73em 0 2em;}
	.mainEvent:before {left:-1em; right:-1em; border-radius:0;}
	.mainEvent .more {font-size: 0.667em;}
	.mainEvent .control select {font-size:.93em;}
	.mainEvent .list-box {margin-top:1.5em;}
	.mainEvent .list-box,
	.mainEvent .scroll.scroll-wrapper {height:auto; max-height:16em;}
	.mainEvent .list-box ul {font-size: 0.8em;}
	.mainEvent .scroll .scroll-element.scroll-y.scroll-scrolly_visible {display:none;}
}


/*******************************************
	Section : Notice
*******************************************/

.mainBoardWrap .inner {position:static;}

.mainBoard {display:block; height:19em;}
.mainBoard .tabs {width:15.5em;}
.mainBoard .tabs h3 {margin-bottom:2.5em;}
.mainBoard .tabs li + li {margin-top:1.25em;}
.mainBoard .tabs button {display:block; position:relative; padding-left:2.5em;}
.mainBoard .tabs button strong {display:block; position:relative; font-size:1.2em; font-weight:600; font-family:'RiaSans',sans-serif; color:#ABB5C7;}
.mainBoard .tabs button.on strong {color:#17212D;}
.mainBoard .tabs li button .selected {width:1.2em; height:1.1em; top:50%; margin-top:calc(1.1em / -2); background:url(../img/main/spr_main.svg) no-repeat 0 -3.2em / auto 8em; z-index:0; opacity:1; text-indent:-999px;}
.mainBoard .tab-content {display:block; position:absolute; top:0; bottom:0; right:0; left:50%; margin-left:-24.5em;}
.mainBoard .tab-content .tab-con {position:relative; max-width:1450px;}
.mainBoard .tab-content .tab-con:before {content:""; display:block; position:absolute; top:0; bottom:0; right:0; width:11em; background:linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); z-index:2;}
@media all and (max-width:1640px) {
	.mainBoard .tab-content {left:16.5em; margin-left:0;}	
}

.mainBoard .control {display:flex; position:absolute; left:-15.5em; bottom:1.15em; align-items:center; width:12.7em;}
.mainBoard .control > * {display:block; position:relative; width:3em; height:3em; border-radius:100%; text-indent:-999px; overflow:hidden; box-shadow:0 1em 1.25em 0 rgba(17,43,98,.1); background:#fff;}
.mainBoard .control > *:before {content:""; display:block; position:absolute; width:1em; height:1em; top:50%; left:50%; margin:-.5em 0 0 -.5em; background:url(../img/main/spr_main.svg) no-repeat -3em 0 / auto 8em;}
.mainBoard .control > *.prev:before {background-position-x:-1.5em;}
.mainBoard .control > *.next:before {background-position-x:-4.5em;}
.mainBoard .control > *.prev:hover:before {background-position-x:-3em;}
.mainBoard .control > *.next:hover:before {background-position-x:-6em;}
.mainBoard .control > *.next {margin-left:-.5em;}
.mainBoard .control > *.more {background:#17212D; margin-left:.7em;}
.mainBoard .control > *.more:before {width:.9em; height:.9em; margin:-.45em 0 0 -.45em; background-position:0 -1.5em;}

.mainBoard .slider .cate {display:inline-block; position:relative; min-width:calc((102 / 18) * 1em); padding:0 calc((20 / 18) * 1em); line-height:calc((35 / 18) * 1em); font-size:.9em; text-align:center; border-radius:9em; color:#fff; font-weight:600; background:#ABB5C7; text-align:center;}
.mainBoard .slider .subj,
.mainBoard .slider .desc {display:block; overflow:hidden; word-break:break-word; text-overflow:ellipsis;}
.mainBoard .slider .subj {line-height:1.4em; height:2.8em; font-weight:600; font-size:1.1em; color:#000; margin:calc((15 / 22) * 1em) 0 calc((20 / 22) * 1em);}
.mainBoard .slider .desc {line-height:1.3em; height:2.6em; font-size:.8em; color:#7F899C;}
@supports (-webkit-line-clamp:2) {
	.mainBoard .slider .subj,
	.mainBoard .slider .desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
}
@media all and (-ms-high-contrast:none) {
	.mainBoard .slider .subj,
	.mainBoard .slider .desc {display:block;}
}
.mainBoard .slider .date {display:flex; align-items:center; font-size:.8em; color:#ABB5C7; line-height:1.3em; padding-top:2em; margin-top:2em; border-top:1px dashed #DAE1EC;}
.mainBoard .slider .date:before {content:""; display:block; font-size:calc((20 / 18) * 1em); width:1em; height:1em; background:url(../img/main/spr_main.svg) no-repeat 0 0 / auto 8em;}
.mainBoard .slider .more {display:block; position:absolute; right:0; bottom:0; width:3em; height:3em; border-radius:1em 0 1em 0; text-indent:-999px; overflow:hidden; background:#DAE1EC; transition:.3s all; -webkit-transition:.3s all;}
.mainBoard .slider .more:before {content:""; display:block; position:absolute; top:50%; left:50%; width:.7em; height:.7em; margin:-.35em 0 0 -.35em; background:url(../img/main/spr_main.svg) no-repeat -1.5em -1.5em / auto 8em;}
.mainBoard .slider .new {display:inline-block; vertical-align:middle; margin-left:.2em; font-size:calc((20 / 22) * 1em); width:1.4em; height:1.3em; background:url(../img/main/spr_main.svg) no-repeat -1.95em -3em / auto 8em; text-indent:-999px; overflow:hidden;}

.mainBoard .slider a:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:-1; background:#fff; border:1px solid #DAE1EC; border-radius:1em; transition:.3s all; -webkit-transition:.3s all;}
.mainBoard .slider a:hover:before,
.mainBoard .slider a:focus:before {border:3px solid #17212D; box-shadow:0 1em 1.25em 0 rgba(17,43,98,.1);}
.mainBoard .slider a:hover .more,
.mainBoard .slider a:focus .more {background:#17212D;}

.mainBoard .swiper-slide {width:18.5em; height:18.5em; overflow:visible;}
.mainBoard .swiper-slide a {display:block; position:relative; height:calc(100% - 2.4em); padding:1.5em; background:#fff; border-radius:1em; margin-top:2.4em; transition:.3s all; -webkit-transition:.3s all; z-index:0;}
.mainBoard .swiper-slide.swiper-slide-active a,
.mainBoard .swiper-slide.swiper-slide-next + .swiper-slide a,
.mainBoard .swiper-slide.swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide a {margin-top:0;}

.mainBoard .no_data {display:flex; align-items:center; width:100%; height:18.5em; text-align:center; color:#4B5361; justify-content:center; flex-direction:column; border:1px solid #DAE1EC; border-radius:1em;}
.mainBoard .no_data:before {content:""; display:block; position:rleaitve; width:calc((155 / 18) * 1em); height:calc((63 / 18) * 1em); background:url(../img/common/img_no_data.png) no-repeat 50% 50%; background-size:contain; margin:0 auto 1em;}


@media all and (max-width:1024px) {
	.mainBoard {height:auto;}
	.mainBoard .tabs {width:auto; margin-bottom:1.33em;}
	.mainBoard .tabs h3 {margin-bottom:1em;}
	.mainBoard .tabs ul {display:flex; align-items:center; font-size:0.73em;}
	.mainBoard .tabs li + li {margin:0 0 0 8px;}
	.mainBoard .tab-content {position:static; left:auto; margin:0;}
	.mainBoard .tab-content .tab-con {position:static;}
	.mainBoard .control {font-size:0.667em; justify-content:end; left:auto; right:0; bottom:auto; top:1.2em;}
	.mainBoard .tab-content .tab-con:before {width:22vw; top:5em;}
	.mainBoard .swiper-container {overflow:visible;}
	.mainBoard .swiper-slide {max-width:68vw; height:auto; font-size: 0.8125em;}
	.mainBoard .no_data {height:12em;}
	.mainBoard .slider .desc {display:block; white-space:nowrap;  -webkit-line-clamp:1; height:auto;}
}

/*******************************************
	Section : Introduction
*******************************************/

.mainIntroWrap {padding-top:3em; padding-bottom:5em;}
.mainIntroWrap .inner:before,
.mainIntroWrap .inner:after {content:""; display:block; position:absolute; z-index:-1;}
.mainIntroWrap .inner:before {top:-5.6em; left:-9.8em; width:17.55em; height:17.55em; background:url(../img/main/bak_intro.png) no-repeat 0 0 / contain;}
.mainIntroWrap .inner:after {top:-.8em; right:-4.85em; width:13.4em; height:13.1em; background:url(../img/main/bak_event.png) no-repeat 0 0 / contain;}
.mainIntroWrap ul {display:flex; justify-content:space-between;}
.mainIntroWrap li {display:flex; position:relative; height:23.5em; width:18.5em;}
.mainIntroWrap li a {display:flex; flex-direction:column; justify-content:end; width:100%; padding:2em 1.85em; border-radius:1em; overflow:hidden; background:no-repeat 50% 50% / cover; color:#fff; position:relative; z-index:0;}
.mainIntroWrap li a:before {content:""; display:block; position:absolute; left:0; right:0; bottom:0; height:10.5em; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%); z-index:-1;}
.mainIntroWrap li a:hover .desc,
.mainIntroWrap li a:focus .desc {max-height:8em;}
.mainIntroWrap li a:hover .more,
.mainIntroWrap li a:focus .more {background:#1462b3;}

.mainIntroWrap .flag {display:block; position:relative; width:3.8em; height:3.2em; margin-bottom:1em; text-indent:-999px; overflow:hidden; background:url(../img/main/spr_main.svg) no-repeat 0 -4.5em / auto 8em;}
.mainIntroWrap .subj {display:block; font-size:1.2em; line-height:1.4em; font-family:'RiaSans',sans-serif; font-weight:600;}
.mainIntroWrap .desc {display:block; position:relative; max-height:0; overflow:hidden; transition:.5s all; -webkit-transition:.5s all;}
.mainIntroWrap .desc span {display:block; line-height:1.3em; font-size:.7em; font-weight:400; word-break:keep-all; padding-top:1em;}
.mainIntroWrap .more {display:block; position:absolute; right:0; bottom:0; width:3em; height:3em; border-radius:1em 0 1em 0; text-indent:-999px; overflow:hidden; background:rgba(255,255,255,.1); transition:.3s all; -webkit-transition:.3s all;}
.mainIntroWrap .more:before {content:""; display:block; position:absolute; top:50%; left:50%; width:.7em; height:.7em; margin:-.35em 0 0 -.35em; background:url(../img/main/spr_main.svg) no-repeat -1.5em -1.5em / auto 8em;}

.mainIntroWrap li.ko {flex-grow:1;}
.mainIntroWrap li.cn,
.mainIntroWrap li.jp {flex-shrink:0;}
.mainIntroWrap li.cn {margin:0 2em;}
.mainIntroWrap li.ko a {background-image:url(../img/main/img_intro_ko.png);}
.mainIntroWrap li.ko .subj {font-size:1.5em;}
.mainIntroWrap li.cn a {background-image:url(../img/main/img_intro_cn_v.png);}
.mainIntroWrap li.jp a {background-image:url(../img/main/img_intro_jp_v.png);}
.mainIntroWrap li.cn .flag {background-position-x:-4.3em;}
.mainIntroWrap li.jp .flag {background-position-x:-8.6em;}

@media all and (min-width:641px) {
	.mainIntroWrap li.ko a {padding:2.5em 2.7em;}
}
@media all and (min-width:1025px) {
	.mainIntroWrap h3 {text-align:center; margin-bottom:2.75em;}
	.mainIntroWrap h3 span {font-size:.9em;}
	.mainIntroWrap h3 strong {font-size:2em;}	
}
@media all and (max-width:1024px) {
	.mainIntroWrap {padding-bottom:3em;}
	.mainIntroWrap h3 {margin-bottom:1.6em;}
	.mainIntroWrap ul {flex-wrap:wrap;}
	.mainIntroWrap li {width:48%; height:14em;}
	.mainIntroWrap li a {font-size:.727em;}
	.mainIntroWrap .desc span {font-size:1.1em;}
	.mainIntroWrap li.ko {width:100%; margin-bottom:1em;}
	.mainIntroWrap li.cn {margin:0;}
}
@media all and (max-width:640px) {
	.mainIntroWrap li {width:100%; margin-bottom:1em !important;}
	.mainIntroWrap li a {padding:1.667em;}
	.mainIntroWrap li.cn a {background-image:url(../img/main/img_intro_cn.png);}
	.mainIntroWrap li.jp a {background-image:url(../img/main/img_intro_jp.png);}
}