/* written by jdm */

h2.tit, h2.tit a {font-size:22px;}
body.xs h2.tit, body.xs h2.tit a {font-size:16px;}

#mainVisual {position:relative;}
#mainVisual .mainSlider {}
#mainVisual .mainSlider li {}
#mainVisual .mainSlider li a {display:block;}
#mainVisual .mainSlider .bg {display:block;height:270px;background-position:center center !important;background-size:cover !important}
#mainVisual #slider-prev {position:absolute;top: 50%;left:15px;}
#mainVisual #slider-next {position:absolute;top: 50%;right:15px;}
#mainVisual .bx-prev {position: absolute;top:50%;left:15px;margin-top: -17px;outline: 0;width:18px;height:35px;text-indent: -9999px;z-index: 996;background:url("../images/main/btn_main_prev.png") no-repeat 0 center;}
#mainVisual .bx-next {position: absolute;top:50%;right:15px;margin-top: -17px;outline: 0;width:18px;height:35px;text-indent: -9999px;z-index: 996;background:url("../images/main/btn_main_next.png") no-repeat right center;}
body.xs #mainVisual .bx-prev {left:5px;}
body.xs #mainVisual .bx-next {right:5px;}
/*32 61 -30*/
/*25 48 -24*/
#mainVisual aside.mainLink {position:absolute;bottom:0;left:0;width:100%;background:#051436;opacity: 0.7;filter: alpha(opacity=70);}
#mainVisual aside.mainLink nav {max-width:686px;margin:0 auto;padding:10px 0 5px}
#mainVisual aside.mainLink nav ul {width:100%;margin-bottom:0;}
#mainVisual aside.mainLink nav ul:after {content:""; display:block; clear:both;}
#mainVisual aside.mainLink nav ul li {float:left;width:25%;text-align:center;}
#mainVisual aside.mainLink nav ul li a {display:block;}
#mainVisual aside.mainLink nav ul li a span {display:block;color:#fff;margin-top:5px;}

body.xs #mainVisual aside.mainLink nav ul li a img {width:20px;}
body.xs #mainVisual aside.mainLink nav ul li a span {font-size:12px;}


#whatsOn {background:#f4f4f4;}
#whatsOn .whatsOnSlider li a {position:relative;display:block;max-width:330px}
#whatsOn .whatsOnSlider li a:hover {text-decoration:none}
#whatsOn .whatsOnSlider li a:hover .over {display:block;}
#whatsOn .whatsOnSlider li a:hover .over:after,
#whatsOn .whatsOnSlider li a:focus .over:after,
#whatsOn .whatsOnSlider li a:active .over:after{content: '';display: block;position: absolute;width: 100%;height: 210px;top: 0;left: 0;background-image: url('../images/common/icon_plus.png');background-repeat: no-repeat;background-position: center;background-size: 37px auto;background-color: rgba(0,0,0,.73);}
#whatsOn .bx-wrapper .bx-pager {display:none !important;}
#whatsOn .desc {background:#fff;max-width:330px}
#whatsOn .desc dl {padding:15px 23px}
#whatsOn .desc dl dt {font-size:20px;font-weight:normal;letter-spacing:-1px;height:56px;overflow:hidden}
#whatsOn .desc dl dd {font-size:16px;color:#8e8e8e;}
#whatsOn .whatsOnSlider li a:hover .desc, whatsOn .whatsOnSlider li a:focus .desc {background:#000;}
#whatsOn .whatsOnSlider li a:hover .desc, whatsOn .whatsOnSlider li a:focus .desc {color:#fff;}
body.xs #whatsOn {;}
body.xs #whatsOn .desc dl {padding:10px 5px}
body.xs #whatsOn .desc dl dt {font-size:12px;height:50px;}
body.xs #whatsOn .desc dl dd {font-size:11px;}

body.sm #whatsOn .whatsOnSlider li a:hover .over:after,#whatsOn .whatsOnSlider li a:focus .over:after,#whatsOn .whatsOnSlider li a:active .over:after {height:151px;}
body.md #whatsOn .whatsOnSlider li a:hover .over:after,#whatsOn .whatsOnSlider li a:focus .over:after,#whatsOn .whatsOnSlider li a:active .over:after {height:151px;}
body.lg #whatsOn .whatsOnSlider li a:hover .over:after,#whatsOn .whatsOnSlider li a:focus .over:after,#whatsOn .whatsOnSlider li a:active .over:after {height:179px;}

#mainEx {margin-bottom:90px;}
body.xs #mainEx {margin-bottom:50px;}
#mainEx .notice {margin-bottom:30px;}
#mainEx .notice .tabMenu {position:relative;width:100%;border-bottom:2px solid #000;}
#mainEx .notice .tabMenu:after {content:""; display:block; clear:both;}
#mainEx .notice .tabMenu .tabH {float:left;}
/*#mainEx .notice .tabMenu .tabH:first-child:after {position:absolute;top:20px;left:74px;width:1px;height:14px;background:#d5d5d5;content:"";}*/
/*#mainEx .notice .tabMenu .tabH h2 {width:auto;min-width:100px}*/
#mainEx .notice .tabMenu .tabH .tit {padding-right:40px;}
#mainEx .notice .tabMenu .tabH h2 a {display:block;font-size:14px;color:#8e8e8e;}
#mainEx .notice .tabMenu .tabH h2 a:hover {text-decoration:none}
#mainEx .notice .tabMenu .tabH.on {background:#fff;}
#mainEx .notice .tabMenu .tabH.on a {color:#333333;text-decoration:none}
#mainEx .notice .tabMenu .tabH a.btnMore {display:none;position:absolute;top:12px;right:0}
#mainEx .notice .tabMenu .tabH.on a.btnMore {display:block;}
#mainEx .notice .tabCon {padding:10px 5px;border-bottom:1px solid #d5d5d5;}
#mainEx .notice .tabCon ul {margin-bottom:0;}
#mainEx .notice .tabCon li {position:relative;line-height:1.9;width:100%;}
#mainEx .notice .tabCon li:before {position:absolute;top:13px;left:0;width:3px;height:3px;-webkit-border-radius:3px;border-radius:3px;background:#d5d5d5;content:"";}
#mainEx .notice .tabCon li a {display:inline-block;width:80%;color:#8e8e8e;padding-left:10px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
#mainEx .notice .tabCon li span.date {position:absolute;top:2px;right:5px;display:inline-block;text-align:right;font-size:12px;color:#8e8e8e;}

body.xs #mainEx .notice .tabMenu .tabH a.btnMore {top:15px}
body.xs #mainEx .notice .tabMenu .tabH a.btnMore img {width:13px;}
body.xs #mainEx .notice .tabCon li {line-height:1.6;}

#mainEx .calendar {margin-bottom:30px;padding-top:10px;}
body.xs #mainEx .calendar {display:none;}

#mainEx .achActive {}
body.xs #mainEx .achActive {position:relative}
body.xs #mainEx .achActive a.btnMore {position:absolute;top:15px;right:15px}
body.xs #mainEx .achActive img {width:100%;}

#mainEx .newsletter {margin-bottom:30px;}
#mainEx .newsletter .inner {background:#f4f4f4;padding:40px 50px}
#mainEx .newsletter .confirm:after {content:""; display:block; clear:both;}
#mainEx .newsletter .confirm .input_txt {width:80%;border:1px solid #d5d5d5;font-size:14px;padding:10px;-webkit-border-radius:0;border-radius:0}
#mainEx .newsletter .confirm a {float:right;width:20%;display:inline-block;background:#535353;color:#fff;padding:11px 15px;text-align:center;}
#mainEx .newsletter ul {}
#mainEx .newsletter ul:after {content:""; display:block; clear:both;}
#mainEx .newsletter ul li {float:left;width:49%;text-align:center;margin-bottom:10px;}
#mainEx .newsletter ul li.last {float:right;}
#mainEx .newsletter ul li a {display:block;font-size:14px;color:#d1272e;border:1px solid #d1272e;padding:5px 5px;background:#fff;}
#mainEx .newsletter ul li.last a {color:#fff;border:1px solid #535353;background:#535353;}


body.xs #mainEx .newsletter .inner {padding:5px 20px 10px}
body.xs #mainEx .newsletter .confirm .input_txt {font-size:12px;}
body.xs #mainEx .newsletter .confirm a {padding:11px 13px;font-size:12px;}
body.xs #mainEx .newsletter span.small {letter-spacing:-1px;}
/*body.xs #mainEx .newsletter ul li a {font-size:12px;}*/

body.sm #mainEx .newsletter .inner {padding:29px 28px 38px}
body.sm #mainEx .newsletter span.small {display:block;margin-top:5px;}
body.sm #mainEx .newsletter .confirm a {padding:11px 0}

body.md #mainEx .newsletter .inner {padding:21px 28px 31px}
body.md #mainEx .newsletter span.small {display:block;margin-top:5px;}
body.md #mainEx .newsletter .confirm a {padding:11px 0}

#mainEx .mainBanner {}
#mainEx .mainBanner:after {content:""; display:block; clear:both;}
#mainEx .mainBanner .banBox {position:relative;width:48%;float:left;box-sizing: border-box;border:1px solid #dddddd;min-height:78px;margin-bottom:20px;}
#mainEx .mainBanner .banBox:nth-child(2n+1) {margin-right:4%;}
#mainEx .mainBanner .banBox .inner {display:block;padding:0px 25px}
#mainEx .mainBanner .banBox h2.tit span {display:block;font-size:13px;color:#9a9a9a;margin-top:5px;}
#mainEx .mainBanner .banBox .img {position:absolute;top:10px;right:10px}
/*body.xs #mainEx .mainBanner .banBox {margin-bottom:10px;}*/
body.xs #mainEx .mainBanner .banBox h2.tit span {font-size:11px;letter-spacing:-1px;}
body.xs #mainEx .mainBanner .banBox .img img {width:25px;}
body.xs #mainEx .mainBanner .banBox .inner {padding:0px 15px}

body.sm #mainEx .mainBanner .banBox .inner h2.tit {font-size:16px;}
body.sm #mainEx .mainBanner .banBox .img img {width:30px;}
body.md #mainEx .mainBanner .banBox .img img {width:34px;}
body.md #mainEx .mainBanner .banBox h2.tit span {font-size:12px;letter-spacing:-1px;}


#mainEx .photoBoxWrap {position:relative;width:100%;margin:0 auto;}
#mainEx .photoBoxWrap h2.tit {margin-top:5px;}
#mainEx .photoBoxWrap .row {margin:0}
#mainEx .photoBoxWrap #photo-prev {position:absolute;top:0;right:30px;}
#mainEx .photoBoxWrap #photo-next {position:absolute;top:0;right:0;}
#mainEx .photoBoxWrap #photo-prev a {display:block;width:30px;height:30px;background:url("../images/main/photo_controls.png") no-repeat 0 0;background-position:0 0;text-indent: -9999px;z-index: 996;}
#mainEx .photoBoxWrap #photo-next a {display:block;width:30px;height:30px;background:url("../images/main/photo_controls.png") no-repeat 0 0;background-position:-30px 0;text-indent: -9999px;z-index: 996;}
#mainEx .photoBox {padding:0 !important}
#mainEx .photoBox a {position:relative;display:block;}
#mainEx .photoBox a img {width:100%}
#mainEx .photoBox a .desc {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background:#000;opacity: 0}
#mainEx .photoBox a .desc p {color:#fff;font-size:18px;text-align:center;padding-top:40%;}
#mainEx .photoBox a .desc p span.small {display:block;color:#8e8e8e;font-size:15px;}
#mainEx .photoBox a:hover .desc, #mainEx .photoBox a:focus .desc {-webkit-transition:all ease-in-out 0.5s;transition:all ease-in-out 0.5s;opacity:.8;}

body.xs #mainEx .photoBoxWrap #photo-prev {position:absolute;top:0;right:20px;}
body.xs #mainEx .photoBoxWrap #photo-prev a {width:20px;height:20px;background-size:cover}
body.xs #mainEx .photoBoxWrap #photo-next a {width:20px;height:20px;background-size:cover;background-position:-20px 0}
body.xs #mainEx .photoBox a .desc p {font-size:14px;}
body.xs #mainEx .photoBox a .desc p span.small {font-size:12px;}
body.md #mainEx .photoBox a .desc p {font-size:14px;}
body.md #mainEx .photoBox a .desc p span.small {font-size:12px;}

/* date */
.sche-on-red,.ui-widget-content .sche-on-red,.ui-widget-header .sche-on-red {background: #d1272e;color:#fff;}
.sche-on-blue,.ui-widget-content .sche-on-blue,.ui-widget-header .sche-on-blue {background: #4773d8;color:#fff;}
.sche-on-select,.ui-widget-content .sche-on-select,.ui-widget-header .sche-on-select {background: #d1272e;color:#fff;}


@media (min-width: 768px) {
	h2.tit {margin-bottom:18px;}
	#mainVisual .mainSlider .bg {height:200px;}
	#whatsOn {padding-top:27px;padding-bottom:50px;}
	#whatsOn .desc dl {margin-bottom:0;min-height:108px}
	#mainEx .notice {padding-top:27px;}
	/*#mainEx .notice .tabMenu .tabH h2 {width:150px;}*/
	#mainEx .notice .tabMenu .tabH .tit{padding-right:40px;}
	#mainEx .notice .tabMenu .tabH h2 a {font-size:22px;}
	/*#mainEx .notice .tabMenu .tabH:first-child:after {left:108px;height:20px;}*/
	#mainEx .notice .tabMenu .tabH a.btnMore {top:22px}
	#mainEx .notice .tabCon {padding:15px 0px 5px}
	#mainEx .notice .tabCon ul {margin-bottom:0;}

	#mainEx .achActive {position:relative;margin-bottom:30px;}
	#mainEx .achActive a.btnMore {position:absolute;top:20px;right:15px}
	#mainEx .achActive .img {position:relative;}
	#mainEx .achActive .img a {display:block;}
	#mainEx .achActive .img a img {width:100%}
	#mainEx .achActive .img a span.bg {position:absolute;bottom:0;left:0;display:block;width:100%;opacity: 0.9;filter: alpha(opacity=90);background:#0e1509;padding:10px 0}
	#mainEx .achActive .img a span.txt {display:block;text-align:center;font-size:15px;color:#fff;}
	
	.divpop #popimg {height:400px !important;}
}

@media (min-width: 992px) {
	#mainVisual .mainSlider .bg {height:230px;}
	#mainVisual aside.mainLink nav {padding:12px 0 10px}
	
	.divpop #popimg {height:550px !important;}
}

@media (min-width: 1200px) {
	#mainVisual .mainSlider .bg {height:300px;}
	#mainVisual .bx-prev {margin-top: -49px;width:52px;height:98px;}
	#mainVisual .bx-next {margin-top: -49px;width:52px;height:98px;}
	#mainEx .calendar {padding-top:37px;}
	#mainEx .achActive {padding-top:27px;}
	#mainEx .achActive a.btnMore {top:46px}
	#mainEx .newsletter .inner {padding:23px 50px 31px}
	#mainEx .newsletter ul li a {padding:12px 0px;font-size:17px;}
	
	.divpop #popimg {height:600px !important;}
}

@media (min-width: 1430px) {
	#mainVisual .mainSlider .bg {height:451px;}
	#mainVisual aside.mainLink nav {padding:24px 0 18px}
	#whatsOn .bx-wrapper .bx-prev {left:-50px !important}
	#whatsOn .bx-wrapper .bx-next {right:-50px !important}
	#mainEx .mainBanner .banBox .img {top:18px;right:18px}
	
	.divpop #popimg {height:650px !important;}
}

@media (max-width: 767px) {
	#mainVisual {display:none !important;}
	
	.divpop {left:10% !important;}
	.divpop #popimg {height:400px !important;}
}