@charset "EUC-JP";

/* --------------------------
* index
-------------------------- */

/* common */
.section {padding: 50px 100px 25px;position: relative;}
.section:before,.section:after {content:"";display:table;}
.section:after {clear:both;}.section {zoom:1;}
.section .inner {margin: 0 auto;max-width: 1600px;}
.section h1 {position: relative;}
.section h1 dl {margin-left: 10px;margin-right: 10px;text-align: left;padding-right: 150px;margin-bottom: 25px; }
.section h1 dl dt {margin: 0;padding: 0;float: left;font-size: 21px;font-weight: bold;margin-top: 10px;}
.section h1 dl dd {margin: 0;padding: 0;margin-left: 50px;padding-left: 150px;font-size: 14px;}
.section h1 dl dd span {font-weight: bold;display: block; color: #000;background-color: #ffef00; line-height: 1.6em;padding: 10px 25px;border-radius: 5px;-webkit-border-radius: 5px;}
.section h1 a {text-align: center;background-color: #fff;height: 30px;position: absolute; top:7px;right:0px;display: block;width: 130px;line-height: 30px; font-size: 12px;color: #000;border:1px solid #ddd;border-radius: 15px;-webkit-border-radius: 15px;transition:all .3s ease;-webkit-transition:all .3s ease;}
.section h1 a .fa {color: #1DACE0;font-size: 18px;margin-right: 10px;}
.section h1 a:hover {border: 1px solid #1DACE0;}
@media screen and (max-width: 767px) {
    .section {padding: 20px;position: relative;}
    .section h1 dl {margin: 0;padding: 0;margin-bottom: 20px;display: block;}
    .section h1 dl dt {display: block;margin: 20px 0;padding: 0;float: none;font-size: 21px;text-align: center;}
    .section h1 dl dd {display: block;margin: 0;padding: 0;font-size: 12px;}
    .section h1 dl dd span { font-size: 13px;font-weight: bold;margin: 0; display: block; color: #000;background-color: #ffef00; line-height: 1.4em;padding: 15px;border-radius: 5px;-webkit-border-radius: 5px;}
    .section h1 a {display: none;}
}

/* mainVisual */
#mainVisual.home { background-color: #eee; position: relative;display: block;width: 100%; height: 100%;background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
#mainVisual.home h1 {font-size: 36px;font-weight: bold;position: absolute; bottom: 75px; left: 75px;color: #fff; line-height:1.5em; }
#mainVisual.home .youtube {/*background-color: rgba(0,0,0,0.75);padding:10px;*/position: absolute;bottom: 50px;right: 50px; width: 350px;}
#mainVisual.home .youtube h2 {color: #fff; font-size: 13px;margin-bottom: 10px; text-align: right;}
#mainVisual.home.january{background-image: url(../images/index/01.jpg) ;}
#mainVisual.home.february {background-image: url(../images/index/02.jpg);}
#mainVisual.home.march {background-image: url(../images/index/03.jpg);}
#mainVisual.home.april {background-image: url(../images/index/04.jpg);}
#mainVisual.home.may {background-image: url(../images/index/05.jpg) ;}
#mainVisual.home.june {background-image: url(../images/index/06.jpg);}
#mainVisual.home.july {background-image: url(../images/index/07.jpg);}
#mainVisual.home.august {background-image: url(../images/index/08.jpg);}
#mainVisual.home.september {background-image: url(../images/index/09.jpg);}
#mainVisual.home.october {background-image: url(../images/index/10.jpg);}
#mainVisual.home.november {background-image: url(../images/index/11.jpg);}
#mainVisual.home.december {background-image: url(../images/index/12.jpg);}
@media screen and (max-width: 768px) {
    #mainVisual.home {height: 700px;}
}
@media screen and (max-width: 767px) {
    #mainVisual.home {height: 400px; background-image: url(../images/mainvisual/main_sp.jpg);}
    #mainVisual.home h1 {font-size: 18px;bottom:25px; left: 20px;line-height:1.5em; }
    #mainVisual.home.january{background-image: url(../images/index/01_sp.jpg) ;}
    #mainVisual.home.february {background-image: url(../images/index/02_sp.jpg);}
    #mainVisual.home.march {background-image: url(../images/index/03_sp.jpg);}
    #mainVisual.home.april {background-image: url(../images/index/04_sp.jpg);}
    #mainVisual.home.may {background-image: url(../images/index/05_sp.jpg) ;}
    #mainVisual.home.june {background-image: url(../images/index/06_sp.jpg);}
    #mainVisual.home.july {background-image: url(../images/index/07_sp.jpg);}
    #mainVisual.home.august {background-image: url(../images/index/08_sp.jpg);}
    #mainVisual.home.september {background-image: url(../images/index/09_sp.jpg);}
    #mainVisual.home.october {background-image: url(../images/index/10_sp.jpg);}
    #mainVisual.home.november {background-image: url(../images/index/11_sp.jpg);}
    #mainVisual.home.december {background-image: url(../images/index/12_sp.jpg);}
}

#emergency {background-color: #000;color: #fff;padding-top: 30px;}
#emergency .inner {position: relative;padding-left: 270px;}
#emergency .inner span {color:#000; text-align: center; background-color: #fff000; font-weight: bold; position:absolute; top: -7px; left: 0;display: block;padding: 5px 20px;border-radius: 20px;-webkit-border-radius: 20px;}
#emergency .inner span .fa {margin-right: 10px;}
@media screen and (max-width: 767px) {
    #emergency .inner {padding-left: 0px;}
    #emergency .inner span {position:relative; top: inherit; left: inherit;margin-bottom: 20px;}
}
/* event */
#event {background-color:#fff999;padding: 25px 100px 0;}
#event .inner {position: relative;padding: 0;}
#event a {color: #222;}
#event a:hover {color: #666;}
#event ul.tag {margin: 0;padding: 10px 0;font-size: 0;}
#event ul.tag li {margin-right: 5px;display: inline-block;font-size: 11px;line-height: 20px;padding: 0 10px;border-radius: 3px;-webkit-border-radius: 3px;}

#event ul.tag li.family {background-color:#e4007f;color: #fff;}
#event ul.tag li.nature {background-color:#32b16c;color: #fff;}
#event ul.tag li.music {background-color:#f19149;color: #fff;}
#event ul.tag li.photo {background-color:#00a0e9;color: #fff;}
#event ul.tag li.food {background-color:#601986;color: #fff;}
#event ul.tag li.photo {background-color:#fff100;color: #000;}
#event ul.tag li.sports {background-color:#81511c;color: #fff;}
#event ul.tag li.traditional {background-color:#0068b7;color: #fff;}

#event h2 {font-size: 16px; font-weight: bold;margin-bottom: 10px;line-height: 1.8em;}
#event .day {font-size: 13px;}
#event .place {font-size: 13px;}
#event figure img {border-radius: 7px;-webkit-border-radius: 7px;overflow: hidden;}
@media screen and (max-width: 767px) {
    #event {background-color:#fff999;padding: 25px 20px 0;}
    #event h1 dl dd {margin: 0;padding: 0;font-size: 14px;}
    #event h1 a {display: none;}
    #event ul {margin: 0;padding: 5px 0;font-size: 0;}
    #event h2 {font-size: 16px; font-weight: bold;margin-bottom: 10px;line-height: 1.8em;}
    #event .day {font-size: 13px;margin: 0; padding: 0;}
    #event .place {font-size: 13px;margin: 0; padding: 0;}
}

/* spot */
#spot {padding-bottom: 0;}
#spot .inner {position: relative;}
#spot h1 dl dd {margin: 0;padding: 0;margin-left: 50px;padding-left: 200px;font-size: 14px;}
#spot figure img {margin-bottom: 5px;border-radius: 5px;-webkit-border-radius: 5px;overflow: hidden;}
#spot a {color: #222;}
#spot a:hover {color: #666;}
@media screen and (max-width: 767px) {

}

/* refine */
#refine {padding-top: 140px;/*background-color: #F2F0E7;*/ background-color: rgba(29,172,224,0.25);margin-top: -130px;}
#refine .inner {display: block;}
#refine .inner .row {margin: 0 -10px;}
#refine .inner .block { width: 50%;height: auto;padding: 0 10px 25px; float: left;display: block;}
#refine .inner .block h2 {color: #000;text-align: center;font-weight: bold; font-size: 21px;margin-bottom:-45px; position: relative;z-index: 9;}
#refine .inner .block h2 span {background-color: #FFF;display: block; width: 220px; margin: 0 auto;}
#refine .inner .block .cat {margin: 0;padding: 60px 10px 10px 10px; position: relative;background-color: #fff;border: 2px solid #1DACE0;border-radius: 5px;-webkit-border-radius: 5px;}
#refine .inner .block .cat ul {margin: 0;padding: 0;font-size: 0;}
#refine .inner .block .cat ul li {width:33.33%;display:inline-block;height: 140px;}
#refine .inner .block .cat ul li a { position: relative;color: #fff;height: 138px;padding: 20px 0;margin: 1px;background-color:#1DACE0;display: block;font-size: 16px; text-align: center; font-weight: bold;transition:all .3s ease;-webkit-transition:all .3s ease;}
#refine .inner .block .cat ul li a span {text-align: center; line-height: 20px;width: 20px;height: 20px;font-size: 12px;background-color: #FFF;color: #1DACE0;display:inline-block;position: absolute; top: 10px;right: 10px; font-weight: normal;border-radius: 10px;-webkit-border-radius: 10px;font-family: 'Lato', sans-serif;font-weight: 400;}
#refine .inner .block .cat ul li a img {width: 60px; height: auto;display:block;margin:0 auto 10px;}
#refine .inner .block .cat ul li a:hover {opacity: 0.7;}
#refine .inner .block .areaMap {margin: 0;padding: 60px 10px 11px 10px; position: relative;background-color: #fff;border: 2px solid #1DACE0;border-radius: 5px;-webkit-border-radius: 5px;}
#refine .inner .block .areaMap .bgColor {background-color: #F2F0E7;height: 280px; position: relative; background-image: url(../images/spot/map.png); background-position: center; background-size: cover; background-repeat:  no-repeat; }
#refine .inner .block .areaMap .bgColor ul {position: relative; width: 100%; height: 100%;display: block;}
#refine .inner .block .areaMap .bgColor ul li {display: block; position: absolute;}
#refine .inner .block .areaMap .bgColor ul li:nth-child(1) {bottom: 40%; left: 5%;}
#refine .inner .block .areaMap .bgColor ul li:nth-child(2) {bottom: 12%; right: 25%;}
#refine .inner .block .areaMap .bgColor ul li:nth-child(3) {top: 40%; right: 5%;}
#refine .inner .block .areaMap .bgColor ul li:nth-child(4) {top: 10%; left: 35%}
#refine .inner .block .areaMap .bgColor ul li a {position: relative transition:all .3s ease;-webkit-transition:all .3s ease;font-size: 16px;color: #000;font-weight: bold;width: 160px;height: 35px;line-height: 33px; text-align: center;border:2px solid #1DACE0;display: block;background-color: #fff;border-radius: 16px;-webkit-border-radius: 16px; }
#refine .inner .block .areaMap .bgColor ul li a span {text-align: center; line-height: 20px;width: 20px;height: 20px;font-size: 12px;background-color: #1DACE0;color: #fff;display:inline-block;position: relative; font-weight: normal;border-radius: 10px;-webkit-border-radius: 10px; position: absolute;top: -10px; left: 15px;font-family: 'Lato', sans-serif;font-weight: 400;}
#refine .inner .block .areaMap .bgColor ul li a .fa {color: #1DACE0; font-size: 16px; position: absolute; top: 50%; line-height: 1em; right: 12px;margin-top: -9px;}
#refine .inner .block .areaMap .bgColor ul li a:hover {background-color: #1DACE0; color: #fff;}
#refine .inner .block .areaMap .bgColor ul li a:hover .fa {color: #fff;}
#refine .inner .block .areaMap .bgColor p {display: block; position: absolute; font-size: 12px; color: #000; font-weight: bold;line-height: 1em;}
#refine .inner .block .areaMap .bgColor .yoshida {top: 10px;left: 10px;}
#refine .inner .block .areaMap .bgColor .gotenba { bottom: 10px;left: 25%;}
#refine .inner .block .areaMap .bgColor .doshi { top: 10px; right:10px;}
@media screen and (max-width: 767px) {
    #spot h1 dl dd {margin: 0;padding: 0;font-size: 14px;}
    #refine {padding-top: 110px;margin-top: -112px;margin-bottom: 0;padding-bottom: 0;}
    #refine .inner {margin: 0px;padding: 0;display: block;}
    #refine .inner .block { width: 100%;height: auto;margin: 0px 0 25px;padding: 0px; float: none;display: block;}
    #refine .inner .block h2 {font-size: 18px;margin-bottom:-40px;}
    #refine .inner .block .cat {margin: 0;padding: 50px 10px 10px 10px;}
    #refine .inner .block .cat ul li {height: 87px;}
    #refine .inner .block .cat ul li a {color: #fff;height: 85px;padding: 15px 0 0;margin: 1px;background-color:#1DACE0;display: block;font-size: 12px;}
    #refine .inner .block .cat ul li a img {width: 35px; height: auto;display:block;margin:0 auto 5px;}
    #refine .inner .block .areaMap {margin: 0;padding: 50px 10px 10px 10px;}
    #refine .inner .block .areaMap .bgColor {height: 200px;}
    #refine .inner .block .areaMap .bgColor ul li a {font-size: 13px;width: 100px;}
    #refine .inner .block .areaMap .bgColor ul li a .fa {display: none;}
    #refine .inner .block .areaMap .bgColor ul li a:hover {background-color: #1DACE0; color: #fff;}
}

#holiday {display: block;padding: 0;}
#holiday ul {margin: 0;padding: 0;}
#holiday ul li {margin: 0;padding: 0;z-index: 9;width:33.3333%;height: 350px; float: left;display: block;font-size: 18px; text-align: center;transition:all .3s ease;-webkit-transition:all .3s ease;}
#holiday ul li a {margin: 0;padding: 0;z-index: 0;overflow: hidden;display: block;height: 350px; width: 100%; position: relative;background-position: center; background-size:cover; background-repeat: no-repeat;transition:all .3s ease;-webkit-transition:all .3s ease;}
#holiday ul li a::before {z-index: 9;position: absolute; top: 0;left: 0; content:''; width: 100%;height: 100%;display: block; background-color: rgba(0,0,0,0.5);transition:all .3s ease;-webkit-transition:all .3s ease;}
#holiday ul li:nth-child(1) a {background-image: url(../images/holiday/holiday_01.jpg);background-position: right center;}
#holiday ul li:nth-child(2) a {background-image: url(../images/holiday/holiday_02.jpg); }
#holiday ul li:nth-child(3) a {background-image: url(../images/holiday/holiday_03.jpg); }
#holiday ul li:nth-child(4) a {background-image: url(../images/holiday/holiday_04.jpg);background-position: right center;}
#holiday ul li:nth-child(5) a {background-image: url(../images/holiday/holiday_05.jpg); }
#holiday ul li:nth-child(6) a {background-image: url(../images/holiday/holiday_06.jpg); }
#holiday ul li a h2 {font-size: 12px; color: #fff; z-index: 19;position: relative;top: 38%;display: block; width: 100%;}
#holiday ul li a h2 span.en {display: block;text-align: center;font-family: 'Unica One', cursive; font-weight: 400;font-size:54px; line-height: 1em;letter-spacing: -2px;}
#holiday ul li a h2 span.desc { font-size: 14px;display: block;line-height: 1em;margin-bottom: 5px;color:#EF584C; font-weight: bold;}
#holiday ul li a .arrow {z-index: 19;height: 1px; width: 50%; display: block; position: absolute; left: -50%; bottom: 20%;background-color: #EF584C;transition:all .3s ease;-webkit-transition:all .3s ease;}
#holiday ul li a .arrow::before {content: '';height: 1px; width: 14px;transform: skewY(45deg);position: absolute; top: -7px; right: 0; background-color: #EF584C;}
#holiday ul li a:hover::before {background-color: rgba(0,0,0,0.8);}
#holiday ul li a:hover .arrow  {left: 0%;}
@media screen and (max-width: 767px) {
    #holiday ul li {width:50%;height: 180px;font-size: 13px;}
    #holiday ul li a {height: 180px;}
    #holiday ul li a h2 {font-size: 12px; color: #fff; z-index: 19;position: relative;top: 30%;display: block; width: 100%;}
    #holiday ul li a h2 span.en {font-size:26px; line-height: 1em;letter-spacing: -1px;}
    #holiday ul li a h2 span.desc { font-size: 12px;}
}

/* news */
#news {background-color:#faf8f8;}
#news .inner {padding: 25px 0!important;display: block; position: relative;}
#news .inner .link {height: 32px;position: absolute; top: 25px;right: 0px;display: block;width: 222px;}
#news .inner .link a {text-align: center;background-color: #fff;height: 30px;position: absolute; top: 5px;right: 0px;display: block;width: 220px;line-height: 28px; font-size: 12px;color: #000;border:1px solid #ddd;border-radius: 15px;-webkit-border-radius: 15px;transition:all .3s ease;-webkit-transition:all .3s ease;}
#news .inner .link a .fa {color: #1DACE0;font-size: 18px;margin-right: 10px;}
#news .inner .link a:hover {border: 1px solid #1DACE0;}

#news .tabs { display:block; overflow:hidden; clear:both; }
#news .tabs li {float:left; margin-right:5px;font-weight: bold;font-size: 18px;height: 50px!important; line-height: 50px!important;display:block; color:#1DACE0;border:1px solid #eee; border-bottom: none;text-decoration:none; background-color:#FFF; padding:0px 40px;border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;overflow: hidden;transition:all .3s ease;-webkit-transition:all .3s ease;}
#news .tabs li.active,
#news .tabs li:hover { color:#fff; background-color:#1DACE0;}
#news .tab_content {padding:0px; border-top:2px solid #1DACE0;background-color: #eee;height: 354px;overflow: hidden;}

#news .postList {background-color: #eee;display: block;height: 354px;overflow-y: scroll;}
#news .postList::-webkit-scrollbar{width: 5px;}
#news .postList::-webkit-scrollbar-track{background:#dddddd;}
#news .postList::-webkit-scrollbar-thumb{background:#1DACE0;}
#news .postList li {}
#news .postList li a {padding: 35px 50px 35px 0;overflow: hidden;margin-bottom: 1px;display: block;position: relative;font-size: 15px;background-color: #fff;transition:all .3s ease;-webkit-transition:all .3s ease;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;}
#news .postList li a .fa {color:#1DACE0;font-size: 24px;line-height: 1em; position: absolute; top: 50%; right: 25px; margin-top: -12px;}
#news .postList li a h3 {padding-left: 180px;font-size: 15px; color: #000;}
#news .postList li a .date {color:#1DACE0; height:auto;font-family: 'Lato', sans-serif;font-weight: 400; width: 150px;display: block; position: absolute; top: 35px; left: 50px;font-family: 'Lato', sans-serif;font-weight: 400;letter-spacing: 1px;}
#news .postList li a:hover {background-color:#f5f5f5;}
#news .postList li:last-child a {margin-bottom: 0;}
#news .postList.related li a h3 {padding-left: 200px;font-size: 15px; color: #000;}
#news .postList.related li a h3 span {margin-left:15px;color:#1DACE0;font-family: 'Lato', sans-serif;font-weight: 400;letter-spacing: 1px; font-size: 12px;}
#news .postList.related li a .source {background-color: #fff;letter-spacing: 0px;font-size: 11px;color:#1DACE0;text-align: center;height: 30px; line-height: 30px;width: 150px;display: block; position: absolute; top: 22px; left: 30px; border: 1px solid #1DACE0;border-radius: 15px;-webkit-border-radius: 15px;}

.tabs { display:block;font-size: 0;text-align:center;margin:0px!important;padding:0px!important;width: 100%;height:auto;}
.tabs > li {float: left;margin:0px;padding:0px;display:block;cursor: pointer;transition:all .3s ease;-webkit-transition:all .3s ease;}
.tabs > li p {padding: 0 5px; font-size: 10px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;text-align: left}
.tab_content {display: block;margin:0 0 25px;}
.tab_content .tab_inner {position: relative;display: none;margin: 0;padding:0;line-height: 0em; box-sizing: border-box; -webkit-box-sizing:border-box;}
.tab_content .tab_inner.active {display: block;}
@media screen and (max-width: 767px) {
    .tabs { display:block;  clear:both;font-size: 0;text-align:center;margin: 0px;padding: 0;height: 41px;}
    .tabs > li {margin:0 2px;padding:0px 10px;height: 20px;line-height: 20px; font-size: 11px;border-radius: 3px 3px 0 0;-webkit-border-radius: 3px 3px 0 0;}
}

#news .inner .block {padding-left: 400px;height:auto; position: relative;;margin: 50px auto 0;}
#news .inner .block .fbWrap {position: absolute; top: 0; left: 0;width: 350px; height:100%;}
#news .inner .block ul {}
#news .inner .block ul li {width: 50%; float: left;padding: 25px 15px;}
#news .inner .block ul li:nth-child(1) {background-color:#00a2e6;border-top-left-radius:5px;border-bottom-left-radius:5px; }
#news .inner .block ul li:nth-child(2) {background-color:#e86ba2;border-top-right-radius:5px;border-bottom-right-radius:5px;}
#news .inner .block ul li h2 {text-align: right; font-weight: bold; font-size: 16px;margin-bottom: 20px;color: #fff; position: relative;}
#news .inner .block ul li h2 span {font-family: 'Lato', sans-serif;font-weight: 400; font-size: 10px; display: block; line-height: 1em;margin-top: 7px; letter-spacing: 1px;}
#news .inner .block ul li h2 img {width: 70px; height: auto; position: absolute;top: -5px; left: -10px;}
#news .inner .block ul li .note {text-align: center;color: #fff; font-size: 14px;margin-bottom: 10px;}
#news .inner .block ul li .note a {color: #fff; text-decoration: underline;}
#news .inner .block ul li .note .fa { color: #ffef00;margin-right: 5px;}
#news .inner .block .livecam {display: block;}
#news .inner .block .livecam figure {margin: 0 0px 10px;}
#news .inner .block .livecam .btn.std {background-color: #fff!important;width: 100%!important;}
#news .inner .block .livecam .btn.std a span {margin: 0;padding: 0;font-size:15px; }
@media screen and (min-width: 1280px) {
    #news .inner .block ul li h2 {text-align: right; font-weight: bold; font-size: 24px;margin-bottom: 20px;color: #fff; position: relative;}
    #news .inner .block ul li h2 span {font-family: 'Lato', sans-serif;font-weight: 400; font-size: 10px; display: block; line-height: 1em;margin-top: 7px; letter-spacing: 1px;}
    #news .inner .block ul li {width: 50%; float: left;padding: 25px 35px;}
    #news .inner .block ul li h2 img {width: 70px; height: auto; position: absolute;top: -5px; left: -25px;}
}
@media screen and (max-width: 767px) {
    #news .inner {margin:0px; padding: 0px!important;display: block;}
    #news .inner .link {display: none;}
    
    #news .tabs { display:block; overflow:hidden; clear:both;height: 30px;}
    #news .tabs li {float:left; margin-right:5px;font-weight: normal;font-size: 12px;height: 30px!important; line-height: 30px!important;display:block; color:#1DACE0;border:1px solid #eee; border-bottom: none;text-decoration:none; background-color:#FFF; padding:0px 10px;border-radius: 5px 5px 0 0;-webkit-border-radius: 5px 5px 0 0;overflow: hidden;transition:all .3s ease;-webkit-transition:all .3s ease;}
    #news .tabs li.active,
    #news .tabs li:hover { color:#fff; background-color:#1DACE0;}
    
    #news .postList li {}
    #news .postList li a {padding: 15px 20px;padding-right: 40px;overflow: hidden;margin-bottom: 1px;display: block;height: auto; position: relative;font-size: 15px;background-color: #fff;transition:all .3s ease;-webkit-transition:all .3s ease;overflow: inherit;-o-text-overflow: inherit;-webkit-text-overflow: inherit;text-overflow: inherit;white-space: inherit;}
    #news .postList li a .fa {color:#1DACE0;font-size: 18px;right: 20px; margin-top: -9px;}
    #news .postList li a h3 {padding-left: 0px;font-size: 12px; color: #000;line-height: 1.6em;}
    #news .postList li a .date {margin-bottom: 10px;font-size: 11px;color:#1DACE0; line-height: 1em;padding: 0px;width: 100%;display: block; position: inherit; top: inherit; left: inherit;letter-spacing: 0.5px;}

    #news .postList.related li a h3 {padding-left: 0px;font-size: 13px; color: #000;}
    #news .postList.related li a h3 span {margin-left:15px;color:#1DACE0;font-family: 'Lato', sans-serif;font-weight: 400;letter-spacing: 1px; font-size: 12px;}
    #news .postList.related li a .source {margin-bottom: 10px;padding: 0 10px;font-size: 11px;height: 20px; line-height: 20px;width:auto;display:inline-block; position: inherit; top: inherit; left: inherit;border-radius: 10px;-webkit-border-radius: 10px;}

    #news .inner .block {min-width:auto;width: auto;padding-left: 0px; height: 0px; position: relative;;margin: 0px auto;}
    #news .inner .block .fbWrap {position: inherit; top: inherit; left: inherit;width:auto;display: block;height: 457px; margin: 25px auto; position: relative;}
    #news .inner .block ul {margin: 0 -20px!important;padding: 0!important; position: relative;}
    #news .inner .block ul li {width: 50%; float: left;padding: 10px 10px 15px;border-radius: 0!important;-webkit-border-radius: 0!important;}
    #news .inner .block ul li h2 {text-align: center; font-weight: bold; font-size: 13px;margin-bottom: 20px;color: #fff; position: relative;}
    #news .inner .block ul li h2 span {;margin-top: 0px; letter-spacing: 1px;}
    #news .inner .block ul li h2 img {width: 40px; height: auto; position: absolute;top: 45px; left: -5px;}
    #news .inner .block ul li .note {display: none;}
    #news .inner .block .livecam {display: block;margin: 0;padding: 0;}
    #news .inner .block .livecam figure {margin: 0 0px 10px;}
    #news .inner .block .livecam .btn.std {background-color: #fff!important;margin: 0 10px!important;width: auto!important; font-size: 14px;letter-spacing: 0; text-align: center;}
    #news .inner .block .livecam .btn.std .fa {display: none;}
    #news .inner .block .livecam .btn.std a {font-size: 13px!important;text-align: center;padding: 0;}
    #news .inner .block .livecam .btn.std a span {font-size: 13px;}
}
@media screen and (max-width: 320px) {
    #news .inner .block ul li h2 {font-size: 12px;}
    #news .inner .block ul li h2 span {letter-spacing: 0px;}
    #news .inner .block ul li h2 img {width: 35px; height: auto; position: absolute;top: 50px; left: -5px;}
}

/* sponsor */
#adArea {padding: 10px 100px 25px;background-color:#5fc2e6;}
#adArea .inner {max-width: 1600px; margin: 0 auto;}
#adArea h1 {height: 50px;line-height: 50px;z-index: 0;position: relative;color: #FFF;font-family: 'Lato', sans-serif;font-weight: 400;letter-spacing: 1px;text-align: center;display: block;font-size: 11px;margin-bottom: 10px;}
#adArea h1 span {height: 50px;line-height: 50px;background-color: #5fc2e6;display: block;z-index: 9;position: absolute; top: 0; left: 50%;width: 100px; text-align: center;margin-left: -50px;}
#adArea h1::before{z-index: 0;content:''; height: 1px;width: 100%; position: absolute; top: 50%;left: 0; background-color: #FFF;}
#adArea ul {text-align: left;font-size: 0;margin: 0 -10px;}
#adArea ul li {width: 20%;height: auto; display: inline-block;}
#adArea ul li a figure {padding: 0 10px;}
#adArea ul li a {}
#adArea ul li a:hover {}
@media screen and (max-width: 767px) {
    #adArea h1 {height: 40px;line-height: 40px;margin-bottom: 0px;}
    #adArea h1 span {height: 40px;line-height: 40px;}
    #adArea {padding: 5px 25px 20px;background-color:#5fc2e6;margin-top: -20px;position: relative;}
    #adArea ul li {width: 50%;height: auto; display: inline-block;}
    #adArea ul li a figure {padding: 5px;}
}

#banner {padding: 0 100px 50px;background-color:#faf8f8;}
#banner ul {font-size: 0;margin: 0 -10px;padding: 0;}
#banner ul li {display: inline-block; width: 20%;padding: 10px;}
#banner ul li a {}
@media screen and (max-width: 767px) {
    #banner {padding: 0 20px 40px;background-color:#faf8f8;}
    #banner ul {font-size: 0;margin: 0 -5px;padding: 0;}
    #banner ul li {display: inline-block; width: 50%;padding: 5px;}
    
}

/* --------------------------
 * swiper
-------------------------- */
.swiper-container {display: block;z-index: 1;position:relative;padding:0 0 50px;margin: 0 -10px;}
.swiper-container .swiper-slide {padding: 10px;width: 100%; height: auto;position: relative;display: block;}

.swiper-spot {display: block;z-index: 1;position:relative;padding:0 0px 50px;margin: 0;overflow: hidden;}
.swiper-spot .swiper-slide {width: 100%; height: auto;position: relative;display: block; text-align:center;}

.swiper-container .swiper-slide figure,
.swiper-spot .swiper-slide figure {margin-bottom: 5px;}

.inner .swiper-button-prev,
.inner .swiper-button-next {z-index: 999;color:#1DACE0;position: absolute;top: 37%;width: 50px;height: 50px;margin-top:0px;z-index: 9;cursor: pointer;background:none;border:none; outline: none;font-size: 36px;line-height: 49px;}
.inner .swiper-button-prev:hover,
.inner .swiper-button-next:hover {opacity: 0.5;}
.inner .swiper-button-prev {left:-75px;right: inherit;padding-left: 20px;}
.inner .swiper-button-next {right:-75px;left: inherit;text-align: right;padding-right: 20px;}

.inner .swiper-spot-button-prev,
.inner .swiper-spot-button-next {z-index: 999;color:#1DACE0;position: absolute;top: 37%;width: 50px;height: 50px;margin-top:0px;z-index: 9;cursor: pointer;background:none;border:none; outline: none;font-size: 36px;line-height: 49px;}
.inner .swiper-spot-button-prev:hover,
.inner .swiper-spot-button-next:hover {opacity: 0.5;}
.inner .swiper-spot-button-prev {left:-75px;right: inherit;padding-left: 20px;}
.inner .swiper-spot-button-next {right:-75px;left: inherit;text-align: right;padding-right: 20px;}

.swiper-pagination {position: absolute;text-align:center;z-index: 10;bottom: 25px!important;}
.swiper-pagination-bullet {width: 6px;height: 6px;display: inline-block;border-radius: 3px;background: #000;opacity: 0.2;margin: 0 10px!important;padding: 0px;}
.swiper-pagination-bullet-active {width: 6px;height: 6px;border-radius: 3px;position: relative;opacity: 1;background: #1DACE0;}
@media screen and (max-width: 767px) {
    .swiper-container {display: block;z-index: 1;position:relative;padding:0px;margin:0px -10px 20px;}
    .swiper-container .swiper-slide { width: 100%;height:auto; position: relative;display: block;}
    .inner .swiper-button-prev,
    .inner .swiper-button-next {position: absolute;top: 47%;color: #fff;font-size: 24px;z-index: 999;}
    .inner .swiper-button-prev {background-image:none;left: 0;}
    .inner .swiper-button-next {background-image:none;right:0;}
    .swiper-pagination {display:none;}

    .swiper-spot {display: block;z-index: 1;position:relative;padding:0 14px 25px;margin: 0;overflow: hidden;}
    .swiper-spot .swiper-slide figure {margin-bottom: 0px;}
    .swiper-spot h2 {font-size: 11px;letter-spacing:0px;overflow: hidden;-o-text-overflow: ellipsis;-webkit-text-overflow: ellipsis;text-overflow: ellipsis;white-space: nowrap;margin-bottom: 10px;}
    #spot .swiper-spot-button-prev,
    #spot .swiper-spot-button-next {top:55%;color: #1DACE0;}
    #spot .swiper-spot-button-prev {left: -30px;right: inherit;padding-left: 20px;}
    #spot .swiper-spot-button-next {right: -30px;left: inherit;text-align: right;padding-right: 20px;}
}