@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
* { font-family: 'Noto Sans TC'; }

body { margin: 0; padding: 0; background: repeat-x #FFF; }

.clear { clear: both; }
.wrapper { margin: 0 auto; }

.box-top {
    background: url(img/bg.png) top center no-repeat;
    background-size: auto 100%;
    text-align: center;
}
.box-top img { width: 100%; max-width: 1000px; display: block; margin: 0 auto; }

.box-middle { background: #f6f1e9; padding: 30px 0 50px 0; }
.signup_form { max-width: 1000px; margin: 0 auto; }

.try-txt { text-align: center; padding: 0 5%; }
.try-txt > img { width: 100%; max-width: 417px; }

.box-input { margin: 15px 0; }
.box-input > div:not(.clear) { float: left; }
.box-input > div:nth-child(1) {
    font-size: 16pt;
    color: #222;
    width: 162px;
    text-align: right;
    padding-right: 8px;
    /*background: url(img/grass.png) no-repeat 5% center;
    text-indent: 5%;*/
}
.box-input > div:nth-child(1) > img { width: 100%; }

.box-input > div:nth-child(2) { width: calc(100% - 190px); }

input[type=text], input[type=tel], input[type=email] {
    width: calc(100% - 20px);
    border: 1px solid #464646;
    padding: 2px 10px;
    margin-right: 20px;
    border-radius: 5px;
    font-size: 14pt;
    height: 45px;
    background-color: transparent;
}

select {
    width: 100%;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    background: url(../../img/arr_down.png) no-repeat right;
    border: 1px solid #464646;
    border-radius: 5px;
    margin-right: 20px;
    padding: 1px 10px;
    font-size: 14pt;
    height: 45px;
}
select::-ms-expand { display: none; }

.box-send { text-align: center; margin: 8px 0; }
.box-send > input[type=image] { width: 100%; max-width: 263px; }

.box-toeic { background: #e8dcc8; }
.box-toeic-link { display: none; }

.testimony { width: calc(100% - 40px); padding: 20px 20px; }
.testimony > div:nth-child(2) > div:nth-child(1) > h3 > a { color: #ea6390; font-size: 16pt; }
.testimony > div:nth-child(2) > div:nth-child(2) { color: #3f3b3a; }

.box-footer { background: #9fa0a0; padding-bottom: 10px; }

.footer-inner { margin: 0 auto; }
.footer-inner .f-logo { padding-top: 22px; }
.footer-inner .f-left { padding-top: 8px; padding-left: 15px; }
.footer-inner .f-left p { margin-top: 8px; }

.footer-inner .f-right { margin-top: 23px; margin-right: 25px; }
.footer-inner .f-right div { color: #a40000; font-size: 18px; font-weight: bold ;margin-bottom: 10px; }
.footer-inner .f-right p { color: #666; line-height: 25px; padding: 0 15px; }


@media only screen and (min-width: 640px) {
    .testimony > div:not(.clear) { float: left; }
    .testimony > div:nth-child(1) { width: 220px; text-align: center; }
    .testimony > div:nth-child(1) > img { width: 100%; }
    .testimony > div:nth-child(2) { width: calc(100% - 220px); }

    .testimony > div:nth-child(2) > div:nth-child(1) { border-bottom: 1px solid #90b47b; }
    .testimony > div:nth-child(2) > div:nth-child(1) > h3 { float: left; font-size: 16pt; }
    .testimony > div:nth-child(2) > div:nth-child(1) > p:not(.clear) { float: right; font-size: 14pt; }

    .footer-inner { padding: 0 20px; }
    .footer-inner .f-logo { float: left; }
    .footer-inner .f-left { float: left; padding-left: 15px; }
    .footer-inner .f-right { float: right; margin-right: 25px; }
    
}

@media only screen and (min-width: 920px) {
    .box-input { float: left; width: 32%; margin: 15px 0; }
    .box-input > div:nth-child(2) { width: calc(100% - 178px); }
    .box-send { text-align: right; float: left; width: 32%; }
}


@media only screen and (min-width: 1000px) {
    .box-top { background-size: auto; }

    .box-toeic { background: #e8dcc8; height: 462px; position: relative; }
    .box-toeic-inner { width: 920px; margin: 0 auto; position: relative; }
    .box-toeic-link { display: block; width: 1000px; position: absolute; left: 50%; transform: translateX(-50%); top: 80px; z-index: 1000; text-align: right; }
    
    .testimony { width: 75%; margin-left: 0; z-index: 10001; position: relative; }

    .footer-inner { width: 1000px; }
    .footer-inner .f-left { padding-left: 45px; }
}