.cp_box{
width: 100%;
max-width: 1000px;
margin: 0 auto;
background:url(/tokires/livedocumentary/img/cp/keywordcp/bg.gif);
padding-bottom: 10%;
}

.header{ background:url(/tokires/livedocumentary/img/cp/keywordcp/header.jpg) top center no-repeat; padding-top: 33%; -moz-background-size:100% auto; background-size:100% auto;  }
.header_banner{}
.header_banner_left{ width: 45%; float: left; text-align: center;}
.header_banner_right{ width: 49%; float: right; text-align: center;}

.lead{width: 95%; max-width: 800px; margin: 0 auto;}

.hs_box{ width: 95%; max-width: 800px; margin: 0 auto; }
.hs_left{ width: 50%; float: left;}
.hs_right{ width: 50%; float: left;}

.trs_info{width: 100%; max-width: 1000px; margin: 5% auto 0 auto; padding: 5% 0; background:url(/tokires/livedocumentary/img/cp/keywordcp/bg2.gif);}
.trs_info div{width: 95%; max-width: 847px; margin: 0 auto;}

.cp_info_box{width: 100%; max-width: 900px; margin: 5% auto 0 auto; padding: 0 0 5% 0; background:url(/tokires/livedocumentary/img/cp/keywordcp/bg3.gif);}

.cp_title_box{width: 95%; max-width: 850px; margin: 0 auto -25% auto; padding-top: 5%;}
.cp_info_box_in{width: 90%; margin: 0 auto; padding-top: 25%; color: #000; color: #9c8350; line-height:1.61;}

.cp_info dt{ width: 40%; float: left;}
.cp_info dd{ width: 55%; float: right; font-size: 18px;}


.cp_title1{width: 26%; float: left; padding-top: 4%;}
.cp_title2{width: 48%; float: left;}
.cp_title3{width: 26%; float: left; padding-top: 4%;}

.at_box{width: 90%; max-width: 800px; margin: 0 auto 0 auto; color: #9e8551; line-height:1.61; }
.at_box li{padding-bottom: 5px; text-indent: -10px; padding-left: 10px; }
.at_box div{padding-bottom: 5px; }

.btn_box{width: 90%; max-width: 800px; margin: 0 auto 0 auto; padding-bottom: 5%;}

.btn_point{width: 90%; max-width: 900px; margin: 5% auto 0 auto;}
.btn_point2{width: 90%; max-width: 900px; margin: 2% auto 0 auto;}
.btn_point li,
.btn_point2 li{width: 49%; float: left; padding: 0.5%;}

.gallery_title{width: 95%; max-width: 900px;  margin: 0 auto; border-bottom: solid 1px #fff; text-align: center; font-size: 30px; padding-bottom: 5px; padding-top: 32px;}

.cp_title{width: 95%; max-width: 800px;  margin: 0 auto; padding: 3% 0 3% 0;}
.cp_title p{font-size: 30px; text-align: center;}



.header_banner_right a:hover{filter:alpha(opacity=65); -moz-opacity:0.65; -khtml-opacity:0.65; opacity:0.65;}

.free_btn2{margin-top: 5px;}

#tenpobtn{ cursor: pointer; width: calc(100% - 20px); display: block; background:#4249f7; color: #fff; text-align: center; padding: 10px; font-size: 18px; margin-top: 5px;}
 
#tenpodata{
  background:#fff;
  padding: 5px;
  border: solid 1px #4249f7;
}

.red{color: #ff808c;}


    .purun {
      -webkit-animation: purun 0.8s linear 0s 1;
      animation: purun 0.8s linear 0s 1;
    }
    @-webkit-keyframes purun {
      0%   { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      40%  { -webkit-transform: scale(0.95, 1.2) translate(0%, -10%); }
      50%  { -webkit-transform: scale(1.1, 0.9) translate(0%, 5%); }
      60%  { -webkit-transform: scale(0.95, 1.05) translate(0%, -3%); }
      70%  { -webkit-transform: scale(1.05, 0.95) translate(0%, 3%); }
      80%  { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { -webkit-transform: scale(1.0, 1.0) translate(0%, 0%); }
    }
    @keyframes purun {
      0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
      40%  { transform: scale(0.95, 1.2) translate(0%, -10%); }
      50%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
      60%  { transform: scale(0.95, 1.05) translate(0%, -3%); }
      70%  { transform: scale(1.05, 0.95) translate(0%, 3%); }
      80%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
      100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
    }

.cp_gorl_box{width: 95%; max-width: 800px;  margin: 0 auto;}
.cp_gorl_left_box{ width: 32%; float: left;}
.cp_gorl_center_box{ width: 32%; float: left; padding: 0 2%;}
.cp_gorl_right_box{ width: 32%; float: left;}




@media screen and (max-width: 640px) {
.cp_title p{font-size: 7vw; text-align: center;}

.free_btn a{font-size: 4vw;}
.gallery_title{font-size: 6vw;}
}

@media screen and (max-width: 550px) {

.cp_info_box{width: 100%; max-width: 900px; margin: 5% auto 0 auto; padding: 0 0 5% 0; background:url(/tokires/livedocumentary/img/cp/keywordcp/bg3.gif);}

.cp_title_box{width: 95%; max-width: 850px; margin: 0 auto -25% auto; padding-top: 5%;}
.cp_info_box_in{width: 90%; margin: 0 auto; padding-top: 25%; color: #000; color: #9c8350; line-height:1.61;}


.cp_info dt{ width: 95%;  max-width: 200px; margin: 0 auto;  float: none; padding-bottom: 10px;}
.cp_info dd{ width: 100%; float: none; padding: 10px 0;}

}


@media screen and (max-width: 400px) {

.btn_point li, .btn_point2 li{width: 99%; float: left; padding: 0.5%;}
}








.cp_tw_icon_box{width: 95%; max-width: 850px; margin: 0 auto 0 auto; padding-top: 3%;}
.cp_tw_icon_box li{width: 30%; float: left; margin: 0 1.5%; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; overflow: hidden;}
.cp_talk_box{width: 50%; max-width: 400px; margin: 0 auto 0 auto;}
.tks{width: 95%; max-width: 590px; margin: 0 auto 0 auto; padding-top: 3%;}