@charset "utf-8";


/*************************************
	Common
*************************************/

#m_conts {font-size:20px;}
#m_conts .inner:after {content:""; display:block; clear:both;}
.mainSection {padding-left:20px !important; padding-right:20px !important; clear:both;}

@media all and (max-width:1024px){
	#m_conts {font-size:18px;}
}
@media all and (max-width:780px){
	#m_conts {font-size:17px;}
}
@media all and (max-width:640px){
	#m_conts {font-size:16px;}
	.mainSection {padding-left:10px !important; padding-right:10px !important;}
}
@media all and (max-width:480px){
	#m_conts {font-size:15px;}
}
@media all and (max-width:320px){
	#m_conts {font-size:14px;}
}

.btn-more {display:block; position:relative; font-size:.85em; text-align:left; padding:.76em 1.17em; width:8.8235em; box-sizing:border-box; border:1px solid #555; color:#333;}
.btn-more:after {content:""; display:block; position:absolute; width:10px; height:10px; top:50%; margin-top:-5px; right:1em; background:url(../img/main/spr_main.png) no-repeat -390px -63px; color:#555;}
.btn-more:hover {color:#fff !important; background:#555; border-color:#555;}
.btn-more:hover:after {background-position:-390px -42px !important;}

.btn-more.blue {border-color:#007dde; color:#007dde;}
.btn-more.blue:after {background-position:-390px 0px;}
.btn-more.blue:hover {background:#007dde;}

.btn-more.yellow {border-color:#ff9b0c; color:#ff9b0c;}
.btn-more.yellow:after {background-position:-390px -21px;}
.btn-more.yellow:hover {background:#ff9b0c;}

.btn-more.gray {border-color:#555; color:#fff; background:#555;}
.btn-more.gray:after {background-position:-390px -42px;}
.btn-more.gray:hover {background:#fff; color:#555 !important;}
.btn-more.gray:hover:after {background-position:-390px -63px !important;}


/*************************************
	Visual
*************************************/

.visualWrap {display:block; position:relative;}
.mainVisual {display:block; position:relative;}

.mainVisual .txt {display:block; position:relative; padding:175px 20px; text-align:center; color:#fff; z-index:1;}
.mainVisual .txt > * {display:block;}
.mainVisual .txt strong {padding:20px 0 0; font-size:70px; font-weight:800;}
.mainVisual .txt span {font-size:38px; font-weight:400;}

.mainVisual .slider {display:block; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;}
.mainVisual .slider .swiper-container,
.mainVisual .slider .swiper-wrapper,
.mainVisual .slider .swiper-slide {height:100%;}
.mainVisual .slider .swiper-slide {background:#fff;}
.mainVisual .slider .swiper-slide em {display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 50%; background-size:cover; z-index:0;}
.mainVisual .slider .swiper-slide strong {display:block; position:absolute; bottom:28px; right:50%; margin-right:-700px; z-index:1; color:#fff; font-size:20px; padding-left:110px;}
.mainVisual .slider .swiper-slide strong:before {content:""; display:block; position:absolute; left:0; top:50%; margin-top:-1px; height:1px; width:100px; background:#fff;}

.mainVisual .control .page {display:block; position:absolute; left:0; right:0; bottom:7px; text-align:center; z-index:50;}
.mainVisual .control .page > * {display:inline-block; vertical-align:middle;}
.mainVisual .control .pager .swiper-pagination-bullet {width:9px; height:9px; opacity:1; background:#fff; overflow:hidden; text-indent:-999px;}
.mainVisual .control .pager .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left:10px;}
.mainVisual .control .pager .swiper-pagination-bullet-active{background:none; border: 3px solid #fff; width:11px; height:11px;}
.mainVisual .control .page .stop,
.mainVisual .control .page .play {position:relative; width:30px; height:30px; text-indent:-999px; overflow:hidden;}
.mainVisual .control .page .stop:before,
.mainVisual .control .page .play:before {content:""; display:block; position:absolute; width:9px; height:10px; top:50%; left:50%; margin-top:-5px; margin-left:-4px; background:url(../img/main/spr_main.png) no-repeat 0 0;}
.mainVisual .control .page .stop:before {background-position:0 0;}
.mainVisual .control .page .play:before {background-position:-27px 0;}
.mainVisual .control .page .play {display:none;}
.mainVisual .control .direct button {display:block; position:absolute; top:50%; margin-top:-45px; width:63px; height:90px; z-index:50; overflow:hidden; text-indent:-999px; background:url(../img/main/spr_main.png) no-repeat -175px 0; }
.mainVisual .control .direct button.prev {left:50%; margin-left:-700px; transform-origin:0 50%; -webkit-transform-origin:0 50%;}
.mainVisual .control .direct button.next {right:50%; margin-right:-700px; background-position:-238px 0; transform-origin:100% 50%; -webkit-transform-origin:100% 50%;}

@media all and (max-width:1420px) {
	.mainVisual .slider .swiper-slide strong {right:10px; margin-right:0;}
	.mainVisual .control .direct button.prev {left:10px; margin-left:0px;}
	.mainVisual .control .direct button.next {right:10px; margin-right:0px;}
}
@media all and (max-width:1024px) {
	.mainVisual .txt {padding:120px 80px;}
	.mainVisual .txt strong {font-size:50px;}
	.mainVisual .txt span {font-size:25px;}
	.mainVisual .slider .swiper-slide strong {font-size:17px;}
	.mainVisual .control .direct button {transform:scale(.9); -webkit-transform:scale(.9);}
}
@media all and (max-width:640px) {
	.mainVisual .txt {padding:80px 60px 100px;}
	.mainVisual .txt strong {font-size:40px;}
	.mainVisual .txt span {font-size:20px;}
	.mainVisual .slider .swiper-slide strong {padding:0; left:10px; text-align:center; bottom:50px;}
	.mainVisual .slider .swiper-slide strong:before {display:none;}
	.mainVisual .control .direct button {transform:scale(.8); -webkit-transform:scale(.8);}
}
@media all and (max-width:420px) {
	.mainVisual .txt {padding:70px 50px 90px;}
	.mainVisual .txt strong {font-size:30px;}
	.mainVisual .txt span {font-size:16px;}
	.mainVisual .slider .swiper-slide strong {font-size:14px;}
	.mainVisual .control .direct button {transform:scale(.6); -webkit-transform:scale(.6);}
}


/*************************************
	Quick Link
*************************************/

.quickWrap {display:block; position:relative; padding:3.75em 0 2em;}
.quickWrap .tit {font-size:1.4em; color:#000000; margin-bottom:2em;}
.quickWrap .tit strong {font-weight:800;}

.mainQuick ul:after {content:""; display:block; clear:both;}
.mainQuick ul {margin:-6px;}
.mainQuick ul li {display:block; position:relative; width:25%; box-sizing:border-box; padding:6px; float:left;}
.mainQuick a {display:block; position:relative; border:1px solid #dddddd; padding:2em 1.75em 4.6em;}
.mainQuick a strong {display:block;font-size:1.8em;font-weight:800;color:#11285d;line-height:1.2;height:2.4em;text-align: left;}
.mainQuick a:before {content:""; display:block; position:absolute; right:2.5em; bottom:1.7em; width:72px; height:66px; background:url(../img/main/spr_main.png) no-repeat; transform-origin:100% 100%; -webkit-transform-origin:100% 100%;}
.mainQuick a:after {content:""; display:block; position:absolute; left:2em; bottom:2em; width:45px; height:13px; background:url(../img/main/spr_main.png) no-repeat 0 -34px; transform-origin:0% 100%; -webkit-transform-origin:0% 100%;}
.mainQuick a:hover {background:#11285d; border-color:#11285d;
	-webkit-box-shadow: 20px 20px 20px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 20px 20px 20px 0px rgba(0,0,0,0.15);
	box-shadow: 20px 20px 20px 0px rgba(0,0,0,0.15);
}
.mainQuick a:hover strong {color:#fff;}

.mainQuick a:hover:after {background-position:0 -65px;}
.mainQuick a.ty1:before {background-position:0px -256px;}
.mainQuick a.ty1:hover:before {background-position:-104px -256px;}
.mainQuick a.ty2:before {background-position:4px -108px;}
.mainQuick a.ty2:hover:before {background-position:-100px -108px;}
.mainQuick a.ty3:before {background-position:11px -182px;}
.mainQuick a.ty3:hover:before {background-position:-93px -182px;}
.mainQuick a.ty4:before {background-position:8px -334px;}
.mainQuick a.ty4:hover:before {background-position:-96px -334px;}

@media all and (max-width:1024px) {
	.mainQuick a:before {right:1.5em;}
}
@media all and (max-width:880px) {
	.mainQuick ul li {width:50%;}
}
@media all and (max-width:640px) {
	.mainQuick a:before,
	.mainQuick a:after {transform:scale(.8); -webkit-transform:scale(.8);}
}
@media all and (max-width:450px) {
	.mainQuick a:before,
	.mainQuick a:after {transform:scale(.7); -webkit-transform:scale(.7);}
}


/*************************************
	recomm Link
*************************************/

.recommWrap {position:relative; padding:6.9em 0 4.4em; margin-bottom:3.35em; z-index:1;}
.recommWrap .inner {z-index:0;}

.recommWrap .tit {max-width:400px; padding:2em 0 0; }
.recommWrap .tit > * {display:block;}
.recommWrap .tit strong {color:#007dde; font-weight:800; font-size:2.6em;}
.recommWrap .tit span {color:#333333; font-size:1em; padding-top:.8em; margin-bottom:2.3em;}

.recommWrap .inner {min-height:300px;}

.mainRecomm {position:absolute; top:6.9em; bottom:4.4em; right:0; left:50%; margin-left:-238px; z-index:0;}
.mainRecomm .acc {display:block; position:absolute;}
.mainRecomm .acc.img {z-index:1;}
.mainRecomm .acc.bak {z-index:-1;}
.mainRecomm .acc.img.ty1 {top:-3.4em; left:806px;}
.mainRecomm .acc.bak.ty1 {top:-6.85em; left:890px;}
.mainRecomm .acc.img.ty2 {bottom:-4.15em; left:415px;}
.mainRecomm .acc.bak.ty2 {bottom:-4.4em; left:257px;}

.mainRecomm .slider {position:relative; z-index:0;}
.mainRecomm .slider .swiper-slide {width:480px;}
.mainRecomm .slider .swiper-slide a {display:block; position:relative; padding-top:62.5%; background:url(../img/main/img_recomm1_off.jpg) no-repeat 0 0; background-size:cover;}
.mainRecomm .slider .swiper-slide a:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:0; background:url(../img/main/img_recomm1.jpg) no-repeat 0 0; background-size:cover; transition:.3s all; -webkit-transition:.3s all;}
.mainRecomm .slider .swiper-slide strong {display:block; position:absolute; font-size:1.5em; font-weight:800; color:#fff; left:0.625em; right:0.625em; bottom:1em; transform:translateY(20%); -webkit-transform:translateY(20%); opacity:0; transition:.3s all; -webkit-transition:.3s all;}
.mainRecomm .slider .swiper-slide.swiper-slide-active a:before,
.mainRecomm .slider .swiper-slide a:hover:before {width:100%;}
.mainRecomm .slider .swiper-slide.swiper-slide-active a strong,
.mainRecomm .slider .swiper-slide a:hover strong {transform:translateY(0); -webkit-transform:translateY(0); opacity:1;}

.mainRecomm .slider .swiper-slide a.recom1 {background-image:url(../img/main/img_recomm1_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom1:before {background-image:url(../img/main/img_recomm1.jpg);}
.mainRecomm .slider .swiper-slide a.recom2 {background-image:url(../img/main/img_recomm2_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom2:before {background-image:url(../img/main/img_recomm2.jpg);}
.mainRecomm .slider .swiper-slide a.recom3 {background-image:url(../img/main/img_recomm3_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom3:before {background-image:url(../img/main/img_recomm3.jpg);}
.mainRecomm .slider .swiper-slide a.recom4 {background-image:url(../img/main/img_recomm4_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom4:before {background-image:url(../img/main/img_recomm4.jpg);}
.mainRecomm .slider .swiper-slide a.recom5 {background-image:url(../img/main/img_recomm5_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom5:before {background-image:url(../img/main/img_recomm5.jpg);}
.mainRecomm .slider .swiper-slide a.recom6 {background-image:url(../img/main/img_recomm6_off.jpg);}
.mainRecomm .slider .swiper-slide a.recom6:before {background-image:url(../img/main/img_recomm6.jpg);}

.mainRecomm .control {position:absolute; left:0; bottom:-2.5em; z-index:5;}
.mainRecomm .control > * {display:block; position:relative; float:left; width:44px; height:27px; text-indent:-999px; overflow:hidden;}
.mainRecomm .control > *:before {content:""; display:block; position:absolute; width:8px; height:14px; top:50%; margin-top:-7px; background:url(../img/main/spr_main.png) no-repeat 0 0;}
.mainRecomm .control .prev:before {left:11px; background-position:-73px 0;}
.mainRecomm .control .next {border-left:1px solid #dddddd;}
.mainRecomm .control .next:before {right:11px; background-position:-130px 0;}

@media all and (max-width:1420px) {
	.mainRecomm {left:460px; margin-left:0;}	
}
@media all and (max-width:1024px) {
	.recommWrap {padding:2em 0 2em;}
	.recommWrap .tit {padding-top:0; max-width:100%;}
	.recommWrap .tit strong br {display:none;}
	.recommWrap .inner {min-height:0; padding-bottom:2em;}

	.mainRecomm .slider .swiper-slide {width:24em;}
	.mainRecomm {position:relative; left:auto; top:auto; bottom:auto; right:auto;}
	.mainRecomm .acc {transform:scale(.8); -webkit-transform:scale(.8);}
	.mainRecomm .acc.img.ty1 {left:auto; right:130px;}
	.mainRecomm .acc.bak.ty1 {left:auto; right:0;}
	.mainRecomm .acc.img.ty2 {left:130px;}
	.mainRecomm .acc.bak.ty2 {left:0;}
}
@media all and (max-width:640px) {
	.mainRecomm .acc {display:none;}
}
@media all and (max-width:480px) {
	.mainRecomm .slider .swiper-slide {width:20em;}
}
@media all and (max-width:380px) {
	.mainRecomm .slider .swiper-slide {width:18em;}
}



/*************************************
	festival Style
*************************************/

.festivalWrap {position:relative; z-index:0; padding:3.8em 0;}
.festivalWrap:before {content:""; display:block; position:absolute; left:0; top:-7.5em; width:22.1em; height:31.6em; background:url(../img/main/bak_acc_03.png) no-repeat 0 0; background-size:contain; z-index:-1;}

.mainFestival {position:relative; width:58.7em; float:right; max-width:100%;}
.mainFestival .thumb {position:relative; width:38.8em;}
.mainFestival .thumb img {max-width:100%;}
.mainFestival .con {position:absolute; top:0; right:0; bottom:0; left:38.8em; padding:2.3em .5em;}
.mainFestival .con .tit {font-size:2.6em; color:#ff9b0c; font-weight:800;}
.mainFestival .con .txt {color:#333333; padding:1em 0 2.2em; line-height:1.4;}

.festivalAcc {position:absolute; top:6.9em; bottom:4.4em; /* right:0; */ left:50%; margin-left:-238px; z-index:0;}
.festivalAcc .acc {display:block; position:absolute;}
.festivalAcc .acc.img {z-index:1;}
.festivalAcc .acc.img.ty1 {top:0.3em; left:-560px;}
.festivalAcc .acc.img.ty2 {bottom:3.5em; left:-390px;}
.festivalAcc .acc.img.ty3 {top:-2.5em; left:-310px;}

@media all and (max-width:1024px) {
	.festivalWrap {padding:2em 0 3em;}
	.mainFestival {width:auto; float:none;}
	.mainFestival .thumb {margin:0 -10px; width:auto; text-align:center;}
	.mainFestival .con {position:relative; left:auto; padding:0; text-align:center;}
	.mainFestival .con .tit br {display:none;}
	.mainFestival .con .btn-more.yellow {margin:0 auto;}
	
	.festivalAcc .acc.img.ty1 {top:12em; left:-210px;}
	.festivalAcc .acc.img.ty2 {bottom:12em; left:550px;}
	.festivalAcc .acc.img.ty3 {top:-5em; left:-230px;}
}

@media all and (max-width:900px) {
	.festivalAcc .acc {display:none;}
}


/*************************************
	tradition Style
*************************************/

.traditionWrap {position:relative; padding:4.75em 0 8.4em; background:url(../img/main/bak_tradition.jpg) no-repeat 50% 100%; background-size:cover;}
.traditionWrap .btn-more {margin:0 auto;}
.traditionWrap .tit {text-align:center;}
.traditionWrap .tit > * {display:block;}
.traditionWrap .tit strong {color:#000; font-size:2.6em; font-weight:800;}
.traditionWrap .tit span {color:#333333; font-size:.85em; padding-top:1.1em; margin-bottom:1.64em;} 


.mainTradition {margin:4.5em 0 0; text-align:center;}
.mainTradition ul {margin:0 -4px 0 -3px;}
.mainTradition li {display:block; position:relative; width:25%; float:left; padding:3px 4px 3px 3px;}
.mainTradition .tradi-item {display:block; position:relative; padding-top:126.454%; max-height:21.75em; overflow:hidden; background:no-repeat 50% 50%; background-size:cover; transition:.3s all; -webkit-transition:.3s all;}
.mainTradition .tradi-item strong {display:table; position:absolute; bottom:0; left:0; right:0; width:100%; height:50%; opacity:0; transform:translateY(10%); -webkit-transform:translateY(10%); transition:.3s all; -webkit-transition:.3s all;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}
.mainTradition .tradi-item strong span {display:table-cell; padding:0 1.25em 3.5em; color:#fff; vertical-align:bottom; background:url(../img/main/ico_link_arrow.png) no-repeat left 50% bottom 2em; background-size:1.85em auto;}
.mainTradition .tradi-item:hover {transform:translateY(-2.5em); -webkit-transform:translateY(-2.5em);
	-webkit-box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
	box-shadow: 20px 20px 30px 0px rgba(0,0,0,0.15);
}
.mainTradition .tradi-item:hover strong {transform:translateY(0); -webkit-transform:translateY(0); opacity:1;}

.mainTradition .tradi-item.ty1 {background-image:url(../img/main/bak_tradition_01.jpg);}
.mainTradition .tradi-item.ty2 {background-image:url(../img/main/bak_tradition_02.jpg);}
.mainTradition .tradi-item.ty3 {background-image:url(../img/main/bak_tradition_03.jpg);}
.mainTradition .tradi-item.ty4 {background-image:url(../img/main/bak_tradition_04.jpg);}

@media all and (max-width:1024px) {
	.traditionWrap {padding-top:5em;}
	.mainTradition {margin-top:3em;}
	.mainTradition li {width:50%;}
	.mainTradition .tradi-item {padding-top:80%;}
	.mainTradition .tradi-item strong{height:100%;}
}
@media all and (max-width:560px) {
	.mainTradition .tradi-item {padding-top:126.454%;}
}