@charset "utf-8";

#codeInputForm #inputBox {
    margin-bottom: 1em;
}

[class*= iOS6] #codeInputForm #inputBox,
[class^=iOS6] #codeInputForm #inputBox,
[class*= iOS7] #codeInputForm #inputBox,
[class^=iOS7] #codeInputForm #inputBox {
    font-size:0.8em;
}

[class*= iOS6] #codeInputForm #inputBox .pw_input,
[class^=iOS6] #codeInputForm #inputBox .pw_input,
[class*= iOS7] #codeInputForm #inputBox .pw_input,
[class^=iOS7] #codeInputForm #inputBox .pw_input {
    padding-top: 0.1em;
    padding-bottom: 0.1em;
}

#codeInputForm input[type="tel"] {
    text-align: center;
    max-width: 20em;
}

#codeInputForm input.space4[type="tel"] {
    text-align: center;
    width: 21%;
}

#codeInputForm .haihun {
    margin-left: 1%;
    margin-right: -0.8%;
}

#getItemBox {
    position: relative;
    width: 88%;
    margin: 0 auto;
}

.getItemImg {
    width: 100%;
}

#getItemBox .light {
    width: 100%;
    -webkit-transform-origin:50% 50%;
    vertical-align: bottom;
}

.anmFlag #getItemBox .light {
    -webkit-animation: light 1.2s infinite ease-in;
}

@-webkit-keyframes light {
    0%{-webkit-transform:scale(0) rotate(0);opacity: 1;}
    80%{-webkit-transform:scale(1.5) rotate(360deg);opacity: 1;}
    100%{-webkit-transform:scale(2) rotate(540deg);opacity: 0;}
}

#getItemBox .lightBox {
    position: absolute;
    top: 27%;
    left: 39%;
}

#getItemBox .lightBox:nth-of-type(1) {
    top: 38%;
    left: 45%;
    width: 10%;
    -webkit-transform:rotate(20deg);
}

#getItemBox .lightBox:nth-of-type(2) {
    top: 18%;
    left: 37%;
    width: 29%;
    -webkit-transform: rotate(28deg);
}

#getItemBox .lightBox:nth-of-type(3) {
    top: 37%;
    left: 43%;
    width: 15%;
    -webkit-transform: rotate(157deg);
}

#getItemBox .lightBox:nth-of-type(4) {
    top: 17%;
    left: 35%;
    width: 32%;
    -webkit-transform:rotate(210deg);
}

#getItemBox .lightBox:nth-of-type(5) {
    top: 25%;
    left: 31%;
    width: 34%;
    -webkit-transform: rotate(322deg);
}

#getItemBox .lightBox:nth-of-type(6) {
    top: 44%;
    left: 43%;
    width: 8%;
    -webkit-transform:rotate(350deg);
}

#getItemBox .lightBox:nth-of-type(7) {
    top: 21%;
    left: 40%;
    width: 23%;
    -webkit-transform: rotate(174deg);
}

#getItemBox .lightInBox {opacity: 0;}

.anmFlag #getItemBox .lightInBox {
    -webkit-animation: lightInBox 1.2s infinite ease-in;
}

@-webkit-keyframes lightInBox {
    0%{-webkit-transform:translate(0,0);opacity: 1;}
    100%{-webkit-transform:translate(500%,0);opacity: 1;}
}

#getItemBox .lightBox:nth-of-type(1) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(2) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(3) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(4) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(5) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(6) .lightInBox {
}

#getItemBox .lightBox:nth-of-type(7) .lightInBox {
}

#light01,
#getItemBox .lightBox:nth-of-type(1) .lightInBox {
    -webkit-animation-delay:0.5s !important;
    -webkit-animation-duration: 1.3s !important;
}

#light02,
#getItemBox .lightBox:nth-of-type(2) .lightInBox {
    -webkit-animation-delay: 0.0s !important;
    -webkit-animation-duration: 0.8s !important;
}

#light03,
#getItemBox .lightBox:nth-of-type(3) .lightInBox {
    -webkit-animation-delay: 0.6s !important;
    -webkit-animation-duration: 0.9s !important;
}

#light04,
#getItemBox .lightBox:nth-of-type(4) .lightInBox {
    -webkit-animation-delay: 1s !important;
    -webkit-animation-duration: 1.7s !important;
}

#light05,
#getItemBox .lightBox:nth-of-type(5) .lightInBox {
    -webkit-animation-delay: 2.1s !important;
    -webkit-animation-duration: 1.5s !important;
}

#light06,
#getItemBox .lightBox:nth-of-type(6) .lightInBox {
    -webkit-animation-delay: 2.8s !important;
    -webkit-animation-duration: 0.7s !important;
}

#light07,
#getItemBox .lightBox:nth-of-type(7) .lightInBox {
    -webkit-animation-delay: 3.3s !important;
    -webkit-animation-duration: 1s !important;
}