.main_wrapper{display: block; width:100%; background-color:#2f70a8; font-size: 20px; color:#333;line-height:1.6em; letter-spacing:.5px; }
.contain{ display:block;max-width:1200px; margin: 0 auto; background-color: #fea3b2;padding-bottom:100px;}
h1{text-indent: 100%;white-space: nowrap;overflow: hidden; height: 0;}
.visual{ display: block; max-width:1200px; margin: 0 auto; background-image: url(/images/event/2017/goldentripod/main_visual_01.gif); height:700px; background-repeat: no-repeat;background-size: contain; }

.flow {display:block; width: 80%; margin: 0 auto; color: #fff;}
.flow ul { text-align:center; overflow: hidden; margin-top:20px; width: 100%;}
.flow ul li{ display: inline-block; width: 160px; height: 160px; border-radius: 50%; float: left; margin:17px; background-color: #2f70a8; border:8px solid #ffd93f; padding:15px;font-size:24px; font-weight:600;line-height:1.3em; position: relative; color: #fff;}
.flow ul li:before{ content: ""; display: block; width: 40px; height: 8px; float: right; background-color:#ffd93f; position: absolute;right:-45px; top:95px;}
.flow ul li i , .map ul li i{display: block; font-size:35px; margin-top: 20px; margin-bottom: 10px;  color: #ffd93f;}
.flow ul li:last-child:before{ display: none;}

.description{display:block; width: 80%; margin: 0 auto; background-color: #2f70a8; border:8px solid #ffd93f; padding:60px; box-sizing: border-box;color: #fff; border-radius:50px; position: relative;margin-top: 20px; }

.description h2{ color: #ffd93f; font-size: 24px;}
.description ul li{list-style-type: decimal; list-style-position: outside; margin-left: 20px;}

.part01 ,.part02{ display: block; width:40%;float: left; margin-bottom: 20px;}
.part01{ width:55%; margin-right: 20px;}
.part03{display:block; clear: both; padding-top: 30px;}
.part03 ul li{font-size: 16px; line-height: 1.6em; margin-bottom: 10px;}
.description a{ display: block; width:50%; height: 60px; text-align: center; line-height: 60px; font-size: 24px; color: #ffd93f; font-weight: 600;border:8px solid #ffd93f;border-radius:50px;position: absolute; left: 50%; margin-left: -25%; bottom:-40px; background-color: #2f70a8;}
.description a:hover{background-color: #ffd93f; color:#333; }

.map{max-width: 1200px;  background-image: url(/images/event/2017/goldentripod/map_02.gif); height: 816px; position: relative; background-size: contain;background-repeat: no-repeat;}
.number{ display:inline-block; width:auto ; font-weight: 600; margin-left: 90px;padding-top: 20px;box-sizing: border-box;font-size:26px; }
.map ul li{ display: inline-block; width: 200px; height: 200px; border-radius: 50%; float: left; margin:17px; background-color: #2f70a8; border:8px solid #ffd93f; padding:15px;font-size:19px; font-weight:600;line-height:1.4em; position:absolute; color: #fff;text-align: center;}
.map ul li:nth-child(5) {color:#ffd93f;}
.map ul li:nth-child(5) p{font-size:35px; margin-top:80px;}
.map ul li a{ display: block; width:65%; height: 35px; margin: 0 auto; background-color: #00b900; border-radius:20px; margin-top: 15px; line-height: 35px; }
.map ul li:nth-child(1) a{ line-height: 40px;}
.map ul li:nth-child(2) a , .map ul li:nth-child(4) a{ background-color: #4080ff; }
.map ul li:nth-child(2) a { line-height: 28px; }
.map ul li:nth-child(4) a { color: #fff }
.map ul li:nth-child(3) a {background-color: #ffd93f; color: #2a73a8; }
.map ul li:nth-child(3) span {text-decoration: underline; color:#ffd93f;}
.map ul li:nth-child(3) span:hover{cursor: pointer; color: #333;}
.map ul li a:hover{background-color: #029002;}
.map ul li:nth-child(3) a:hover{ background-color: #f7a82a; color: #333; }
.map ul li:nth-child(2) a:hover , .map ul li:nth-child(4) a:hover{ background-color: #2353b1;}
.map ul li:nth-child(1){ left: 150px;top: 100px;}
.map ul li:nth-child(2){ left: 450px;top: 100px;}
.map ul li:nth-child(3){ left: 750px;top: 100px;}
.map ul li:nth-child(4){ left: 660px;top: 410px;}
.map ul li:nth-child(5){ left: 300px;top: 410px;}
.map ul li:nth-child(5):hover{background-color: #ffd93f;color:#333; cursor: pointer;}

@media (max-width: 1024px) {
.visual{  height:588px;  }    
.flow {display:block; width:96%; margin: 0 auto; color: #fff;}    
.description{display:block; width: 95%;}
.map{height: 680px; }
.map ul li:nth-child(1){ left: 100px;top: 80px;}
.map ul li:nth-child(2){ left: 400px;top: 80px;}
.map ul li:nth-child(3){ left: 700px;top: 80px;}
.map ul li:nth-child(4){ left: 600px;top: 350px;}
.map ul li:nth-child(5){ left: 250px;top: 350px;}
}


@media (max-width: 768px) {
    .visual{  height:438px;  } 
    .flow ul li{  margin:20px;}
    .flow {display:block; width: 70%; margin: 0 auto; color: #fff;}
    .flow ul li:before{ width: 48px;right:-48px; }
    .description{display:block; width: 80%;}
    .part01 , .part02{  width: 100%;}
    .part02{ margin-top: 20px;}
    .number{  margin-left: 40px;padding-top:10px; }
    .map ul li{  width: 190px; height: 190px;  margin:20px 12px;  padding:10px;font-size:18px; position:static; }
    .map ul li a{margin-top: 10px;}
    .map{height: 580px; }
    .number{ font-size:20px; }
    
}

@media (max-width: 660px) {
    .visual{ background-image: url(/images/event/2017/goldentripod/main_visual_600.gif);height: 540px; }
     .flow { width:73%;} 
     .flow ul li{  margin:10px;}
     .description{padding: 40px;}
     .flow ul li:before{display: none;}
     .map { background-repeat: repeat;}
     .map ul li{margin:10px 30px; padding:15px; font-weight:600;  }
     .map{height:845px; }
    }

@media (max-width: 480px) {
     .visual{ height: 401px; }
      .flow {width:95%; }  
      .flow ul li{  margin:6px;}
      .flow ul li:before{display: none;}
      .description{display:block; width: 90%;}
      .map {background-image: url(/images/event/2017/goldentripod/map_600.gif); background-repeat: repeat; height: 1400px;}
      .map ul li{ width: 200px; height: 200px;margin:10px 100px;  }
  
}
    
@media (max-width:414px) {
      .visual{ height: 330px; }
      .flow {width:57%; } 
      .map ul li{ margin:10px 60px;  }
      .number{ padding-top:0px; margin-left:15px; } 
    
}    

@media (max-width:375px) {
      .visual{ height: 296px; }
      .flow {width:64%; } 
      .map ul li{ margin:10px 50px; }
      
    
}

@media (max-width: 320px) {
       .visual{ height: 262px; }
       .flow {width:72%; }
       .flow ul li{ padding:15px;font-size:22px; font-weight:600;line-height:1.4em; }
       .description{width: 90%;  padding:30px; }
       .part01 ,.part02{ font-size: 16px; line-height: 1.6em;}
       .map ul li{ margin:10px 30px;  }
       .number{ font-size: 16px;  }     
    
}