@charset "utf-8";


h2{width: 95%; max-width: 924px; margin: 0 auto; padding: 180px 0  5% 0;}

.world-top-bg{background:url(../img/common/cont-common-bg.jpg) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto; animation-name: fade-inanime; animation-duration: 2s;}

.read{width: 95%; max-width: 1407px; margin: 0 auto; color: #63607a; line-height:1.61; text-align: center; padding-bottom: 5%; font-size: 27px; font-weight: 600;}

.map-box{ width: 95%; max-width: 1407px; margin: 0 auto; text-align: left; background:url(../img/world/map.png) top center no-repeat; -moz-background-size:100% auto; background-size:100% auto;  position: relative; }

.map-main{ }
.map1{width: 20%; max-width: 254px; position: absolute; top:5%; left:35%;  text-align: center;}
.map2{width: 20%; max-width: 254px; position: absolute; top:30%; left:5%;  text-align: center;}
.map3{width: 20%; max-width: 254px; position: absolute; top:40%; right:10%;  text-align: center;}
.map4{width: 20%; max-width: 254px; position: absolute; top:45%; left:35%;  text-align: center;}
.map5{width: 20%; max-width: 254px; position: absolute; top:5%; right:10%;  text-align: center;}

@media only screen and (max-width: 700px){
.map3{width: 20%; max-width: 254px; position: absolute; top:50%; right:10%;  text-align: center;}
}


.map-icon{width: 25%; max-width: 40px; margin: 0 auto 5px auto; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-animation: updown 2s 1s ease-in-out infinite; animation: updown 2s 1s ease-in-out infinite; }
.map-sub-title{width: 80%; max-width: 212px; margin: 0 auto; padding: 5px 0 5% 0;}
.map-box a img:hover{filter: contrast(140%);}
.map-list{ width: 95%; max-width: 1000px; margin: 0 auto; padding: 10% 0;}
.map-list a img:hover{filter: contrast(140%);}
.map-list li{position: relative; margin-bottom: 3%;}
.ss-btn{width: 80%; max-width: 254px; margin: 0 auto; padding: 0.5% 0;}


.banner-new-icon {
    width: 20%;
    position: absolute;
    top: -10px;
    left: -10px;
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
}


/* ss ****************************************** */

.ss-title{font-size: 40px;}
.ss-box{color: #fff; width: 90%; max-width: 1500px; margin: 0 auto; padding: 10% 0; line-height:1.61; font-size: 18px; text-shadow:  #63607a 1px 1px 10px, #63607a -1px 1px 10px, #63607a 1px -1px 10px, #63607a -1px -1px 10px;}
.ss-box p{padding: 1% 0;}

.ss01-bg{background:url(../img/world/ss1-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss02-bg{background:url(../img/world/ss2-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss03-bg{background:url(../img/world/ss3-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss04-bg{background:url(../img/world/ss4-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss05-bg{background:url(../img/world/ss5-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss06-bg{background:url(../img/world/ss6-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss07-bg{background:url(../img/world/ss7-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss08-bg{background:url(../img/world/ss8-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }
.ss09-bg{background:url(../img/world/ss9-bg.jpg) #63607a right center no-repeat; background-attachment: fixed; -moz-background-size:100% auto; background-size:100% auto; }

@media only screen and (min-width: 701px) and (max-width: 1400px){
.ss01-bg{background:url(../img/world/ss1-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss02-bg{background:url(../img/world/ss2-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss03-bg{background:url(../img/world/ss3-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss04-bg{background:url(../img/world/ss4-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss05-bg{background:url(../img/world/ss5-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss06-bg{background:url(../img/world/ss6-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss07-bg{background:url(../img/world/ss7-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss08-bg{background:url(../img/world/ss8-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
.ss09-bg{background:url(../img/world/ss9-bg.jpg) #63607a right center no-repeat; background-attachment: fixed;}
}



.ss-end{padding-top: 5%;}

.gd-bg{
background: -moz-linear-gradient(left,  rgba(99,96,122,1) 0%, rgba(99,96,122,0) 59%);
background: -webkit-linear-gradient(left,  rgba(99,96,122,1) 0%,rgba(99,96,122,0) 59%);
background: linear-gradient(to right,  rgba(99,96,122,1) 0%,rgba(99,96,122,0) 59%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63607a', endColorstr='#0063607a',GradientType=1 );
}


/* footermenu */
.world-ss-list-menu{width: 95%; max-width: 800px; margin: 0 auto; padding: 5% 0; justify-content: center;}
.world-ss-list-menu li{width: 19.3%; padding:0.5px;}/* {width: 12.3%; padding:0.5px;} */
.world-ss-list-menu li a img:hover{filter: contrast(140%);}
.amazon-link{width: 100%; margin: 0 auto; background:#e43261; color: #fff;}
.bslog-box{width: 95%; margin: 0 auto; padding: 2.5% 0; text-align: center; font-size: 20px;}
.bslog-box dt{width: 50%;   padding: 2.5% 0;}
.bslog-box dd{width: 50%;}
.bslog-box dd a{width: 95%; display:block; background:#fff; padding: 5% 0; color: #e43261;}



.btn-top { width: 60%; max-width: 280px; margin: 0 auto; padding: 0 0 5% 0;}
.btn-top a img:hover{filter: contrast(140%);}





/* tooltip */
.noblock{ display: none;}
a.clicktooltip{ }
.tooltip{ margin: 0; padding: 5px; width: 250px; background-color:rgba(127,145,232,0.90);  color: #fff; min-height: 30px; top: 100px; left: 20px; position: absolute; text-shadow: none;}

a.clicktooltip{ background: url("../img/world/tips-icon.png") no-repeat right; padding-right: 17px; color: #ffff00;}
a.clicktooltip:visited { color: #ffff00; }
a.clicktooltip:hover {filter: contrast(140%); }
a.clicktooltip:active { color: #ffff00; }




#worldsslist{background:#fff;}





/* 700 ****************************************** */
@media screen and (max-width: 700px) {
h2 {padding-top:30%;}
.banner-new-icon { max-width: 25px;}
.map-list{ width: 90%; margin: 0 auto; padding: 10% 0 5% 0;}
.read{padding-bottom: 10%; font-size: 4vw;}

.ss-title{font-size: 5vw; padding-bottom: 5%; padding-top:10%;}

.ss-box{padding: 20% 0; line-height:1.61; font-size: 3vw;}
}

@media screen and (max-width: 750px) {
.ss01-bg{background:none;}
.ss01-bg::before {
  background: url(../img/world/ss1-bg-sp.jpg) top center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss02-bg{background:none;}
.ss02-bg::before {
  background: url(../img/world/ss2-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss03-bg{background:none;}
.ss03-bg::before {
  background: url(../img/world/ss3-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss04-bg{background:none;}
.ss04-bg::before {
  background: url(../img/world/ss4-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}


.ss05-bg{background:none;}
.ss05-bg::before {
  background: url(../img/world/ss5-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss06-bg{background:none;}
.ss06-bg::before {
  background: url(../img/world/ss6-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss07-bg{background:none;}
.ss07-bg::before {
  background: url(../img/world/ss7-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss08-bg{background:none;}
.ss08-bg::before {
  background: url(../img/world/ss8-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss09-bg{background:none;}
.ss09-bg::before {
  background: url(../img/world/ss9-bg-sp.jpg) bottom center no-repeat;
  background-size: cover;
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}

.ss-box p{padding: 2% 0;}

.world-ss-list-menu li{width: 32.5%; padding:0.5px;}
.bslog-box dt{width: 100%;  padding: 0; font-size: 3vw; padding-bottom: 3%;}
.bslog-box dd{width: 100%;}
.bslog-box dd a{width: 100%; display:block; background:#fff; padding: 5% 0; color: #e43261;}
}








@-webkit-keyframes updown {
	0% {

		transform: translate(0,-15px);
	}
	70% {

		transform: translate(0,0px);
	}
	100% {

		transform: translate(0,-15px);
	}
}
@keyframes updown {
	0% {

		transform: translate(0,-15px);
	}
	70% {

		transform: translate(0,0px);
	}
	100% {

		transform: translate(0,-15px);
	}
}



@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}