@charset "utf-8";
.centerwrap{  width:80%;max-width:1200px;  margin:0 auto;}
.show400{display:none!important;}
.btn{cursor: pointer;}
.cutwrap{position:relative;}
.blockwrap{position:relative;}
.centerwrap{width:1280px;}
/* padding */
.p1{padding:1vw 0;}
.pu1{padding:1vw 0 0 0;}
.pu2f{padding:2vw 0 0 0!important;}
.p2{padding:2vw 0;}
.pu2{padding:2vw 0 0 0;}
.p3{padding:2vw 0;}
.p32{padding:3vw 0 2vw 0;}
.p4{padding:4vw 0;}
.p5{padding:5vw 0;}
.pb2{padding:2vw;}
.stepwrap{font-size:16px;line-height:24px;color:#666;}
.stepwrap h1{font-size:30px;line-height:50px;}
.stepwrap h4{font-size:20px;line-height:30px;}
.iconwrap{position: relative;padding:20px 0;height:340px;}
.selectwrap{position: relative;padding:20px 0;}
.selectwrap .selectline{font-size:16px;line-height:30px;color:#444;}
.selectwrap .selectline span{display:inline-block;}
.selectwrap .selectline span:first-child{width:30px;}
.selectwrap .selectline span:second-child{width:calc(90% - 30px);}
.selectwrap input[type=text]{width:300px;max-width:95%;border:1px solid #ccc;font-size:16px;line-height:28px;}
#formblock2{display:none;}
.iconselect{margin:0 3%;width:26%;cursor:pointer;display:inline-block;transition: all 1s;}
.iconselect1 img{animation: iconmove 6s 1s 30;}
.iconselect2 img{animation: iconmove 6s 3s 30;}
.iconselect3 img{animation: iconmove 6s 5s 30;}
.iconselect img{width:100%;}
.iconselect.offselect{opacity:0.3;}
.largeiconbox{position: relative;margin:0 auto;text-align:center;}
.largeiconwrap{position: relative;width:60vw;height:60vw;}
.iconwrap1{background:url(../img/iconlarge1.png);width:100%;height:100%;}
.iconwrap2{background:url(../img/iconlarge2.png);width:100%;height:100%;}
.iconwrap3{background:url(../img/iconlarge3.png);width:100%;height:100%;}
#formerr{padding:10px 0;font-size:16px;line-height:24px;color:#cc6644;}

/* cut 2 */
.iframbg{position: relative;opacity:0;}
.iframbg img{width:100%;z-index:0;}
.iframsqure{position:absolute;z-index:1;top:0;left:0;width:100%;background:rgba(200,200,200,0.1);}
.iframsqure img{width:100%;opacity:0;}
.iframes1{width:61.29%;height:50.97%;top:25.11%;left:20.97%;}

#iframe{
  position: relative;
  width:100%;
  height:auto;
  margin:20px 0;
}
#canvas{
  position: absolute;
  z-index:2;
  width:100%;
  height:100%;
  top:-2px;
  left:-2px;
/*  background:rgba(255,245,245,0.4);*/
  border:1px solid #ccc;
}
.btnbox{position:relative;text-align:center;}
.btns{display:inline-block; padding:3px 15px;margin:10px;font-size:20px;color:#fff;background:#44CC44;cursor: pointer;}
#clearbutton{background:#cc9900;}
#submitbutton{background:#006688;}
.backbutton{background:#CC4444;}

#sendmailbox{padding:20px 0;}

/* form */
.formwrap{position:relative;padding:1vw 0;}
.formline{position:relative;min-height:30px;margin:0 0 18px 0;}
.formline span{display:inline-block;float:left;font-size:16px;color:#444;}
.formline span:nth-child(1){width:22%;text-align:right;margin-right:2%;}
.formline span:nth-child(2){width:76%;}
.formline input[type=text]{font-size:15px;line-height:30px;height:30px;width:60%;padding:0 2%;background:#fff;border:1px solid #999;color:#444;border-collapse:collapse;}
.formline select{font-size:15px;line-height:30px;height:30px;width:20%;text-align:right;padding:0 2%;background:#fff;border:1px solid #999;color:#444;border-collapse:collapse;}
.formline input.s{width:13%;text-align:right;}
.formline select.l{width:60%;}
.formline select.s{width:13%;}
.formline input[type=text].s{width:26%;}
.formline textarea{font-size:15px;line-height:30px;height:100px;width:60%;border:1px solid #999;padding:0 2%;color:#444;border-collapse:collapse;}
.formline textarea.s{height:50px;}
.formline input[type=file]{border:none;padding:0;width:60%;height:30px;}
.formline input[type=image]{width:auto;border:none;height:auto;padding:0 2%;max-width:50%;}
.fromnote{font-size:16px;line-height:24px;color:#de4c2d;}
.fromnote.typ2{padding:0 40px;}
.formline span.formfilenote{font-size:14px;line-height:24px;color:#666;}
.formline span.formfilenote a{color:#6699ff;}
.formline span.line{display:block;width:60%;margin-bottom:5px;}
.formline span.line span:nth-child(1){width:28%;text-align:left;margin-right:2%;}
.formline span.line span:nth-child(2){width:20%;text-align:right;margin-right:2%;}
.formline span.line span:nth-child(2) input{text-align:right;padding:0 10%;width:70%;}
.formline span.line span:nth-child(3){width:22%;text-align:left;margin-right:2%;}
.formline span.line span.formfilenote{width:100%;color:#f00;}

@keyframes iconmove{
    0%{      margin-top:0;    }
    7%{      margin-top:-5px;    }
    14%{      margin-top:5px;    }
    21%{      margin-top:-5px;    }
    28%{      margin-top:5px;    }
    35%{      margin-top:-5px;    }
    43%{      margin-top:5px;    }
    49%{      margin-top:0;    }

}
@media screen and (max-width: 979px) {
  .centerwrap{  width:90%;  margin:0 auto;}
  .iconwrap{height:30vw;}
}