@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
    overflow: hidden
}

body {
    line-height: 1
}

#nav.top_section ul li a:hover {
    color: #000;
}

#nav a:hover {
    color: #636363;
}

ol,
ul {
    word-wrap: break-word;
    margin: 0 auto !important;
}

table ul li {
    list-style-type: decimal;
    padding: 0 !important;
    line-height: 150%;
}

body {
    -webkit-text-size-adjust: none
}

.owl-carousel .owl-stage-outer {
    overflow: visible !important;
}

body {
    -ms-overflow-style: scrollbar
}

table th {
    vertical-align: middle
}

html {
    box-sizing: border-box
}

*,
:after,
:before {
    box-sizing: inherit
}

body {
    /* font-family: FontAwesome, "Century Gothic", Arial, cwTeXYen, "Noto Sans TC", "微軟正黑體"; */
	 font-family: "FontAwesome", "Century Gothic", "Arial", "Noto Sans TC", "微軟正黑體";
    font-size: 15px;
    font-weight: 300;
}

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

    body,
    input,
    select,
    textarea {
        font-size: 14pt
    }
	
	table ul li {
    padding: 3px !important;
	}
}

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

    body,
    input,
    select,
    textarea {
        font-size: 12pt
    }
}

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

    body,
    input,
    select,
    textarea {
        font-size: 11pt
    }
}

textarea {
    width: 100%
}

a {
    text-decoration: none;
    color: inherit
}

a:hover {
    border-bottom-color: transparent
}

b,b1,
strong {
    font-weight: 700
}

p {
    margin: 0
}

.boxpc {
    display: none;
}

.boxmb {
    display: block;
}

p.content {
    text-align: justify
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    line-height: 1.5;
    margin: 0 0 .7em 0;
    letter-spacing: -.025em
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none
}

h1 {
    font-size: 2.5em;
    line-height: 1.2
}

h2 {
    font-size: 1.5em
}

h3 {
    font-size: 1.25em
}

h4 {
    font-size: 1.1em
}

h5 {
    font-size: .9em
}

h6 {
    font-size: .7em
}

@media screen and (max-width:736px) {
    h1 {
        font-size: 2em
    }
}

pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: .9em;
    margin: 0 0 2em 0
}

pre code {
    display: block;
    line-height: 1.75;
    padding: 1em 1.5em;
    overflow-x: auto
}

hr {
    border: 0;
    border-bottom: solid 1px;
    margin: 2em 0
}

hr.major {
    margin: 3em 0
}

.align-left {
    text-align: left
}

.align-center {
    text-align: center
}

.align-right {
    text-align: right
}

a:hover {
    color: #000
}

section.box1 {
    overflow: visible;
    padding: 1% 0 1% 0;
}

b1,
strong {
    color: #000;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff
}

hr {
    border-bottom-color: rgba(255, 255, 255, .35)
}

form {
    margin: 0 0 2em 0
}

.ph {
    display: block
}

.s_web {
    display: none
}

label {
    display: block;
    font-size: .9em;
    font-weight: 400;
    margin: 0 0 1em 0
}

::-webkit-input-placeholder {
    opacity: 1
}

:-moz-placeholder {
    opacity: 1
}

::-moz-placeholder {
    opacity: 1
}

:-ms-input-placeholder {
    opacity: 1
}

label {
    color: #fff
}

img {
    width: 100%
}

ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em
}

ol li {
    padding-left: .25em
}

dl {
    margin: 0 0 2em 0
}

dl dt {
    display: block;
    font-weight: 400;
    margin: 0 0 1em 0
}

dl dd {
    margin-left: 2em
}

dl dt {
    color: #fff
}

#header {
    padding: 5em 5em 1em 5em;
    text-align: center
}

#header h1 {
    margin: 0 0 .25em 0
}

#header p {
    font-size: 1.25em;
    letter-spacing: -.025em
}

.owl-theme .owl-dots {
    margin: 2% auto 2% auto;
}

#nav {
    background-color: #fff;
    color: #fff;
    position: absolute;
    width: 100%;
    background-color: #ea632a;
    border-top-left-radius: .25em;
    border-top-right-radius: .25em;
    cursor: default;
    text-align: center
}

#nav input,
#nav select,
#nav textarea {
    color: #636363
}

#nav a:hover {
    color: #636363
}

#nav b,
#nav strong {
    color: #636363
}

#nav h1,
#nav h2,
#nav h3,
#nav h4,
#nav h5,
#nav h6 {
    color: #636363
}

#nav blockquote {
    border-left-color: #ddd
}

#nav code {
    background: rgba(222, 222, 222, .25);
    border-color: #ddd
}

#nav hr {
    border-bottom-color: #ddd
}

#nav ul li a {
    padding: 0 0.7em 0 0.25em !important;
}

#nav ul li a div {
    padding: 0 0 0 0 !important;
}

@media screen and (min-width:480px) {
    #nav {
        text-align: right
    }
}

.btn-top {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #ea632a;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:active {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #ea632a;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:active:hover {
    background-color: #fff;
    color: #ea632a !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top:focus {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #ea632a;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:focus:hover {
    background-color: #fff;
    color: #ea632a !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top:hover {
    background-color: #fff;
    color: #ea632a !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-go-form {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 10;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px 0 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #ea632a;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    letter-spacing: .5px;
    font-weight: 400;
    font-size: 75%;
    font-family: "Noto Sans TC", "微軟正黑體";
    line-height: 1.2;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-go-form:hover {
    background-color: #fff;
    color: #ea632a !important;
    font-weight: 700;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top.cd-is-visible {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top.cd-fade-out {
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 90
}

.edm-wrapper-default {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.edm-wrapper {
    position: relative;
    margin: 0 auto
}

.secbox-sendForm {
    background: #286333;
    position: relative;
}

.secbox-sendForm table {
    margin-bottom: 1.5%;
    background: #fff;
    color: #000
}

.secbox-sendForm section {
    color: #000
}

.secbox-sendForm .red_word {
    margin-bottom: 1.5%;
    color: #000;
}

.sendform_bottom {
    color: #fff;
}

.send {
    margin-top: 3rem;
    cursor: pointer
}

.send a {
    border-radius: 5px;
    background: #eb5f2d;
    color: #fff;
    font-weight: 700;
    font-size: 140%
}

.send a:hover {
    background: #ea5824;
}

.bottom_text {
    color: #fff;
    margin: 0 auto;
    text-align: center;
}

.red {
    color: #b00e0c
}

.green {
    color: #1f9922
}

.total-container {
    width: 100%;
    height: 100%
}

title span {
    color: red
}

.head_pc {
    display: none
}

.head_mb {
    position: relative;
    display: block;
    margin: 0 auto 0 auto;
    width: 100%
}

.btn-logo {
    position: absolute;
    top: 9%;
    left: 6%;
    z-index: 2;
    display: block;
    margin: 0 auto;
    width: 40%;
    height: 9%;
    background: 0 0;
    text-align: center;
    cursor: pointer
}

.btn-logo a {
    display: inline-block;
    width: 100%;
    height: 100%
}

.btn-logo img {
    width: 70%
}

.head_mb img {
    width: 100%
}

.yellow {
    color: #ffcb00
}

.hide {
    display: none !important
}

.rice_word {
    right: 0;
    display: inline-block;
    text-align: right;
    color: #ffe600;
}

@media (min-width:0px) and (max-width:480px) {
    .overFlow-Center {
        width: 100%
    }

    .btn-logo {
        left: 3%;
        width: 30%;
        top: 5%;
        height: 9%;
        text-align: left;
    }

    .btn-logo img {
        width: 100%
    }

    .head_mb {
        margin: 5.5% auto -1% auto
    }

    .cell-hide {
        display: none
    }

    .flexBox {
        display: block
    }

    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        margin: 0 auto;
        padding: 8% 0;
        width: 95%
    }
}

@media (min-width:1070px) and (max-width:9999px) {
    .overFlow-Center {
        width: 100%
    }

    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        padding: 2% 0 5% 0;
        width: 80%
    }
}

@media only screen and (min-width:481px) {
    .head_mb {
        margin: 3.5% auto -1% auto;
    }

    .btn-top {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-top:active {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-top:focus {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-go-form {
        right: 15px;
        bottom: 10px;
        padding: 5px 0 15px 0;
        width: 40px;
        height: 40px;
        font-size: 70%
    }

    .head_pc {
        position: relative;
        display: none;
        background: url(../images/visual_banner_m.jpg) no-repeat top center;
        background-size: 100%
    }

    .head_mb {
        display: block
    }

    .btn-logo {
        position: absolute;
        top: 3%;
        left: 7%;
        z-index: 2;
        display: block;
        margin: 0;
        width: 35%;
        height: 7.5%;
        background: 0 0;
        text-align: left;
    }

    .btn-logo img {
        width: 100%;
    }
}

@media only screen and (min-width:500px) {
    .head_mb {
        margin: 4.5% auto -1% auto;
    }
}

@media only screen and (min-width:600px) {
    .head_mb {
        margin: 3.5% auto -1% auto;
    }
}

@media only screen and (min-width:700px) {
    .head_mb {
        margin: 3.2% auto -1% auto;
    }
}

@media only screen and (min-width:768px) {
    .boxpc {
        display: block;
    }

    .boxmb {
        display: none;
    }

    .btn-top {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-top:active {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-top:focus {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-go-form {
        right: 20px;
        bottom: 20px;
        padding: 9px 0 20px 0;
        width: 55px;
        height: 55px;
        font-size: 85%
    }

    .head_pc {
        position: relative;
        display: block;
        background: url(../images/visual_banner_p.jpg) no-repeat top center;
        background-size: 100%;
        margin: 0% auto 0% auto;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 2em;
        left: 4.5%;
        z-index: 2;
        display: block;
        margin: 2% auto -3em 0;
        width: 20%;
        height: 3em;
        background: 0 0;
        text-align: center
    }

    .owl-theme .owl-dots {
        margin: 0% auto 2% auto;
        display: block !important;
    }

    .btn-logo img {
        width: 100%
    }
}

@media only screen and (min-width:1024px) {
    .head_pc {
        margin: 0% auto 0% auto;
    }
}

@media only screen and (min-width:1100px) {
    .head_pc {
        position: relative;
        display: block;
        background: url(../images/visual_banner_p.jpg) no-repeat top center;
        background-size: 100%;
        margin: 0% auto 0% auto;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 4em;
        left: 0;
        z-index: 2;
        display: block;
        margin: 2% auto -6em auto;
        width: 14%;
        height: 6em;
        background: 0 0;
        text-align: center
    }
}

@media (min-width:481px) and (max-width:1024px) {
    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        margin: 0 auto;
        padding: 2% 0 1% 0;
        width: 90%
    }
}

@media only screen and (min-width:1024px) {
    .btn-logo {
        position: relative;
        top: 2.5em;
        left: 4%;
        z-index: 2;
        display: block;
        margin: 2% auto -4em 0;
        width: 20%;
        height: 4em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1100px) {
    .btn-logo {
        position: relative;
        top: 3em;
        left: 4.5%;
        z-index: 2;
        display: block;
        margin: 2% auto -4em 0;
        width: 20%;
        height: 4em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1600px) {
    .head_pc {
        position: relative;
        display: block;
        background: url(../images/visual_banner_p.jpg) no-repeat top center;
        background-size: 100%;
        margin: 0% auto 0% auto;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 3em;
        left: 4.5%;
        z-index: 2;
        display: block;
        margin: 2% auto -5em 0;
        width: 20%;
        height: 5em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1920px) {
    .head_pc {
        position: relative;
        display: block;
        background: url(../images/visual_banner_p.jpg) no-repeat top center;
        background-size: 100%;
        margin: 1% auto 0% auto;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 5em;
        left: 4.5%;
        z-index: 2;
        display: block;
        margin: 1% auto -7em 0;
        width: 20%;
        height: 7em;
        background: 0 0;
        text-align: center;
    }

    .secbox-sendForm table th {
        padding: 20px
    }

    .secbox-sendForm {
        font-size: 1.5em
    }

    .secbox-sendForm td {
        font-size: 1em;
        vertical-align: middle
    }

    select#toArea {
        font-size: 1em
    }

    select#take {
        font-size: 1em
    }

    .send a {
        padding: 1.5rem 3rem
    }

    .btn-go-form {
        font-size: 100%
    }

    #nav.top_section {
        font-size: 1.6em
    }

    input[type=radio] {
        padding: 10px 3px
    }

    input[type=email] {
        padding: 10px 3px
    }

    input[type=tel] {
        padding: 10px 3px
    }

    input[type=text] {
        padding: 10px 3px
    }

    textarea#ps {
        padding: 2% 0
    }
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #ffb01c !important;
    border: solid 1px #000;
}

.owl-theme .owl-dots .owl-dot span {
    background: #d4f5ff !important;
    border: solid 1px #000;
}

.total-container {
    width: 100%;
    height: 100%;
}

.webpc {
    display: none;
}

@media only screen and (min-width:768px) {
    .webpc {
        display: block
    }
}

.webmb {
    display: block;
}

@media only screen and (min-width:768px) {
    .webmb {
        display: none
    }
}

.secbox-1 {
    position: relative;
    background-color: #286333;
	margin: -0.5% auto;
}

.tit1 {
    width: 100%;
    margin: 1% auto 0% auto;
}

@media only screen and (min-width:768px) {
    .tit1 {
        width: 100%;
        margin: 0 auto;
    }
}

.tit_box {
    width: 100%;
    margin: 8% auto;
}

@media only screen and (min-width:768px) {
    .tit_box {
        width: 100%;
        margin: 2% auto 0% auto;
    }
}

.sub_text {
	width:90%;
	margin:3% auto;
	text-align:left;
	color:#ffffff;
	line-height: 140%;
	font-size: 125%;
}

@media only screen and (min-width:768px) {
    .sub_text {
        width: 100%;
        margin: 1% auto 3% auto;
		font-size: 115%;
    }
	.text1 {
		text-align:center;
	}

	.text2 {
		text-align:center;
	}
}

@media only screen and (min-width:1024px) {
	.sub_text {
		font-size: 145%;
    }
}

@media only screen and (min-width:1100px) {
	.sub_text {
		font-size: 165%;
    }
}

@media only screen and (min-width:1600px) {
	.sub_text {
		font-size: 200%;
    }
}

@media only screen and (min-width:1920px) {
	.sub_text {
		font-size: 300%;
    }
}

.sub_text span{
	color:#ffd400;
}

.text_box {
	width: 90%;
	text-align:justify;
	background-color:#e4ffc8;
	border-radius: 10px;
	line-height: 145%;
    font-weight: 500;
	color:#2d371e;
	margin: 0 auto 3% auto;
	padding: 3% 3% 3% 3%;
}
@media only screen and (min-width:768px) {
	.text_box {
		width:70%;
		font-size: 100%;
	}
}
@media only screen and (min-width:1024px) {
	.text_box {
		font-size: 130%;
	}
}
@media only screen and (min-width:1100px) {
	.text_box {
		font-size: 145%;
	}
}
@media only screen and (min-width:1600px) {
	.text_box {
		font-size: 160%;
	}
}
@media only screen and (min-width:1920px) {
	.text_box {
		font-size: 245%;
	}
}


.word {
	width:80%;
	margin:0 auto;
}


.sub_jsd {
	width:90%;
	text-align:justify;
	background-color:#ffffff;
	border-radius: 10px;
	line-height: 145%;
	color:#2d371e;
	margin: 0 auto 1% auto;
	padding: 3% 3% 3% 3%;
}



.sub_t2 {
	margin: 2% auto 3% auto;
    text-align: center;
	color:#363636;
	font-size: 130%;
}

@media only screen and (min-width:640px) {
	.sub_t2 {
		font-size: 230%;
	}
}

@media only screen and (min-width:768px) {
	.sub_t2 {
		font-size: 130%;
	}
}

.sub_t1 {
	margin: 2% auto 0 auto;
    text-align: center;
	color:#313131;
	font-weight:600;
	width: 100%;
	line-height: 130%;
	display: block;
    font-size: 160%;
}

@media only screen and (min-width:360px) {
	.sub_t1 {
		font-size: 175%;
	}
}

@media only screen and (min-width:410px) {
	.sub_t1 {
		font-size: 190%;
	}
}

@media only screen and (min-width:640px) {
	.sub_t1 {
		font-size: 290%;
	}
}


@media only screen and (min-width:768px) {
	.sub_jsd {
		width:70%;
	}
	.sub_t1 {
		font-size: 135%;
		line-height: 100%;
		text-align: end;
		width: 60%;
		display: inline-block;
	}
	.sub_t2 {
		font-size: 130%;
	}
}

@media only screen and (min-width:900px) {
	
	.sub_t1 {
		font-size: 155%;
	}
	.sub_t2 {
		font-size: 145%;
	}
}

@media only screen and (min-width:1024px) {
	.sub_t1 {
		font-size: 170%;
	}
	.sub_t2 {
		font-size: 165%;
	}
}

@media only screen and (min-width:1100px) {
	.sub_t1 {
		font-size: 205%;
	}
	.sub_t2 {
		font-size: 190%;
		margin: 2% auto;
	}
}

@media only screen and (min-width:1600px) {
	.sub_t1 {
		font-size: 245%;
	}
	.sub_t2 {
		font-size: 230%;
	}
}

@media only screen and (min-width:1920px) {
	.sub_t1 {
		font-size: 370%;
	}
	.sub_t2 {
		font-size: 330%;
	}
}

.df {
	display:inline-block;
	
}

.sub_t1.sd {
	display:inline-block;
	margin:0 auto;
	width: 100%;
}

@media only screen and (min-width:768px) {
	.sub_t1.sd {
		width: 32%;
	}
}

@media only screen and (min-width:820px) {
	.sub_t1.sd {
		width: 28%;
	}
}

@media only screen and (min-width:1024px) {
	.sub_t1.sd {
		width: 30%;
	}
}

@media only screen and (min-width:1100px) {
	.sub_t1.sd {
		width: 33%;
	}
}

@media only screen and (min-width:1200px) {
	.sub_t1.sd {
		width: 28%;
	}
}

@media only screen and (min-width:1366px) {
	.sub_t1.sd {
		width: 30%;
	}
}

.sub_t1 .t1 {
	color:#31a9ff;
}

.sub_t1 .t2 {
	color:#f69103;
}

.bottom_t {
	width:95%;
	text-align:center;
	color:#ffffff;
	line-height: 130%;
	margin: 4% auto 4.5% auto;
}


@media only screen and (min-width:768px) {
	.bottom_t {
		width:65%;
		text-align:right;
		margin: 0% auto 80px auto;
	}
}

@media only screen and (min-width:1920px) {
	.bottom_t {
		font-size:200%;
	}
}


.bottom_t span{
	position:absolute;
	right:14%;
}

@media only screen and (min-width:360px) {
	.bottom_t span{
		position:relative;
		right:10%;
	}
	
}

@media only screen and (min-width:375px) {
	.bottom_t span{
		position:relative;
		right:10%;
	}
	
}

@media only screen and (min-width:390px) {
	.bottom_t span{
		position:relative;
		right:10%;
	}
	
}

@media only screen and (min-width:410px) {
	.bottom_t span{
		position:relative;
		right:9%;
	}
	
}

@media only screen and (min-width:480px) {
	.bottom_t span{
		position:relative;
		right:8%;
	}
	
}

@media only screen and (min-width:640px) {
	.bottom_t span{
		position:relative;
		right:6%;
	}
	
}

@media only screen and (min-width:720px) {
	.bottom_t span{
		position:relative;
		right:5.2%;
	}
	
}

@media only screen and (min-width:768px) {
	.bottom_t span{
		position:relative;
		right:0%;
	}
	
}

.sub_t_j {
	margin: 0% auto;
    position: relative;
	max-width: fit-content;
    white-space: nowrap;
    overflow-x: auto;
}

.sub_t_j img{
	width:190%;
}

@media only screen and (min-width:768px) {
	.sub_t_j img{
		width:100%;
	}
	
}



.secbox-2 {
    position: relative;
    background: url(../images/bg.jpg) no-repeat top center;
	background-size: cover;
	margin: 0% auto;
	background-color: #f6f0d8;
}

@media only screen and (min-width:768px) {
	.secbox-2 {
		position: relative;
		background: url(../images/bg-1.jpg) no-repeat top center;
		background-size: 100%;
        padding-top: 80px;
		margin: 0% auto;
		background-color: #f6f0d8;
	}
}

.secbox-2 .subtext {
	width: 85%;
    text-align: left;
    margin: 0 auto 2% auto;
    font-size: 145%;
    line-height: 130%;
}

@media only screen and (min-width:768px) {
	.secbox-2 .subtext {
		width:75%;
		font-size:105%;
		text-align: center;
		line-height: 150%;
	}
}

@media only screen and (min-width:1024px) {
	.secbox-2 .subtext {
		font-size:140%;
	}
}

@media only screen and (min-width:1600px) {
	.secbox-2 .subtext {
		font-size:190%;
	}
}

@media only screen and (min-width:1920px) {
	.secbox-2 .subtext {
		font-size:285%;
	}
}


.secbox-2 .subtext span {
	color:#f50f07;
	font-weight:600;
	line-height:110%;
}

.secbox-2 .subtext span.color1 {
	color:#136500;
}

.button {
	background: url(../images/bg.jpg) repeat top center;
	background-size: cover;
	margin: 0% auto 0 auto;
	padding: 2% 0 1%;
}

@media only screen and (min-width:768px) {
	.button {
		padding: 7% 0 6%;
	}
}


@media only screen and (min-width:1024px) {
	.button {
		padding: 7% 0 0%;
	}
}

@media only screen and (min-width:1600px) {
	.button {
		padding: 11% 0 0%;
	}
}

.btn-1 {
	width:85%;
	margin:3% auto ;
	cursor:pointer;
}

@media only screen and (min-width:768px) {
	.btn-1 {
		width:40%;
		margin:7% auto 0 auto;
	}
	
}

@media only screen and (min-width:820px) {
	.btn-1 {
		margin:10% auto 0 auto;
	}
	
}


@media only screen and (min-width:1024px) {
	.btn-1 {
		margin:3% auto;
	}
	
}

.btn-1 img {
	width:100%;
}

.secbox-3 {
	background:#f6f0d8;
	margin: 0% auto -1% auto;
}


.secbox-3 .subject {
	position:relative;
	width:90%;
	border:solid 0px red;
	margin:0 auto 5% auto;
}

.secbox-3 .subject .head{
	/* border:solid 1px #000; */
	margin:4% -2% 5% auto;
	color:#312f30;
	font-weight: 600;
	text-align:center;
	padding:1% 0 1% 0;
	font-size:110%;
}

@media only screen and (min-width:360px) {
	.secbox-3 .subject .head{
		font-size:125%;
	}
}

@media only screen and (min-width:480px) {
	.secbox-3 .subject .head{
		font-size:155%;
	}
}

@media only screen and (min-width:720px) {
	.secbox-3 .subject .head{
		font-size:185%;
	}
}

@media only screen and (min-width:768px) {
	.secbox-3 .subject .head{
		margin:4% -2% 1% auto;
		font-size:130%;
	}
}

@media only screen and (min-width:1024px) {
	.secbox-3 .subject .head{
		font-size:165%;
	}
}

@media only screen and (min-width:1100px) {
	.secbox-3 .subject .head{
		font-size:200%;
	}
}

@media only screen and (min-width:1600px) {
	.secbox-3 .subject .head{
		font-size:235%;
	}
}

@media only screen and (min-width:1920px) {
	.secbox-3 .subject .head{
		font-size:360%;
	}
}


.secbox-3 .subject .head span{
	color:#0067ab;
}


.secbox-3 .subject .head .left{
	display:inline-block;
	width:45%;
}

.secbox-3 .subject .head .right{
	display:inline-block;
	width:45%;
}


.format_school {
	width:100%;
	margin:0 auto;
	text-align:center;
}
@media only screen and (min-width:768px) {
	.format_school {
		width:85%;
	}
	
}
@media only screen and (min-width:1024px) {
	.format_school {
		width:80%;
	}
	
}


.format_school td {
	border:none;
	text-align:center;
	font-size: 115%;
	vertical-align: middle;
}
@media only screen and (min-width:360px) {
	.format_school td{
		font-size: 135%;
	}
}
@media only screen and (min-width:768px) {
	.format_school td{
		font-size: 100%;
		padding: 1.5%;
	}
}
@media only screen and (min-width:1024px) {
	.format_school td{
		font-size: 125%;
	}
}
@media only screen and (min-width:1100px) {
	.format_school td{
		font-size: 135%;
	}
}
@media only screen and (min-width:1200px) {
	.format_school td{
		font-size: 140%;
	}
}
@media only screen and (min-width:1600px) {
	.format_school td{
		font-size: 170%;
	}
}
@media only screen and (min-width:1920px) {
	.format_school td{
		font-size: 250%;
	}
}

.format_school td span {
    font-size: 90%;
}


.format_school tr.head_table{
	background:#45634b;
	color:#fff;
	font-size: 105%;
}

.format_school tr.t1{
	border-bottom:solid 1.5px #757a5e;
}

.format_school tr.head_table .wth{
	width:29%;
}

@media only screen and (min-width:768px) {
	.format_school tr.head_table .wth{
		width:18%;
	}
}

.secbox-4 {
	background:#286333;
	margin: 0% auto -1% auto;
}

.secbox-4 .button {
	background:none;
	padding:0;
}

.secbox-4 .btn-2 {
	width:85%;
	margin:3% auto ;
	cursor:pointer;
}

@media only screen and (min-width:768px) {
	.secbox-4 .btn-2 {
		width:40%;
        padding-bottom: 80px;
	}
	
}

.secbox-4 .content1 {
	width:85%;
	color:#fff;
	margin: 3% auto 0 auto;
}

.secbox-4 .content1 span {
	color:#eddc00;
}

.secbox-4 .content1 .left{
	display:block;
	width:75%;
	margin: 5% auto 0 auto;
	vertical-align:middle;
}

.secbox-4 .content1 .right{
	display:block;
	vertical-align: top;
	width:100%;
	margin: 0 auto;
	text-align:justify;
	line-height:140%;
	font-size:125%;
}

.secbox-4 .content1 .left.webpc{
	display:none;
}

.secbox-4 .content1 .left.webmb{
	display:block;
}

@media only screen and (min-width:768px) {
	.secbox-4 .content1 .left.webpc{
		display:inline-block;
	}
	.secbox-4 .content1 .left{
		width:32%;
		margin: 0% auto;
	}
	.secbox-4 .content1 .left.webmb{
		display:none;
	}
	.secbox-4 .content1 .right{
		display:inline-block;
		font-size:85%;
		margin: 0 auto 0 2%;
		width:60%;
	}
	
}

@media only screen and (min-width:820px) {
	.secbox-4 .content1 .right{
		font-size:95%;
	}
	
}

@media only screen and (min-width:840px) {
	.secbox-4 .content1 .right{
		font-size:83%;
	}
	
}

@media only screen and (min-width:850px) {
	.secbox-4 .content1 .right{
		font-size:95%;
	}
	
}

@media only screen and (min-width:910px) {
	.secbox-4 .content1 .right{
		font-size:100%;
	}
	
}

@media only screen and (min-width:930px) {
	.secbox-4 .content1 .right{
		font-size:103%;
	}
	
}

@media only screen and (min-width:1024px) {
	.secbox-4 .content1 .right{
		font-size:115%;
	}
	
}

@media only screen and (min-width:1100px) {
	.secbox-4 .content1 .right{
		font-size:125%;
	}
	
}

@media only screen and (min-width:1280px) {
	.secbox-4 .content1 .right{
		font-size:145%;
	}
	
}

@media only screen and (min-width:1366px) {
	.secbox-4 .content1 .right{
		font-size:135%;
	}
	
}

@media only screen and (min-width:1400px) {
	.secbox-4 .content1 .right{
		font-size:140%;
	}
	
}

@media only screen and (min-width:1600px) {
	.secbox-4 .content1 .right{
		font-size:160%;
	}
	
}

@media only screen and (min-width:1920px) {
	.secbox-4 .content1 .right{
		font-size:235%;
	}
	
}


.secbox-4 .tit1 {
	margin: 5% auto 0 auto;
}
@media only screen and (min-width:768px) {
	.secbox-4 .tit1 {
		margin: 80px auto 0;
	}
}
	


.secbox-5 {
	background: url(../images/bg-1.jpg) no-repeat top center;
	background-size: contain;
	margin: 1% auto -1% auto;
	padding: 80px 0 30px;
	background-color: #f6f0d8;
}

.secbox-5 .tit1{
	margin:1% auto 2% auto;
}


.secbox-5 .button {
	background:none;
}

.secbox-5 .btn-3 {
	width:85%;
	margin:3% auto 3% auto;
	cursor:pointer;
}

@media only screen and (min-width:768px) {
	.secbox-5 .btn-3 {
		width:40%;
		margin:0% auto -5% auto;
	}
	
}

@media only screen and (min-width:1024px) {
	.secbox-5 .btn-3 {
		margin:0% auto 3% auto;
	}
	
}

@media only screen and (min-width:1600px) {
	.secbox-5 .btn-3 {
		margin:-4% auto 3% auto;
	}
	
}

.secbox-5 .exam_data {
	width:100%;
	margin:0 auto;
}

@media only screen and (min-width:768px) {
	.secbox-5 .exam_data {
		width:80%;
	}
	
}


.secbox-5 li {
	list-style-type: disc;
}

.secbox-5 .head_table {
	background:#45634b;
	color:#fff;
	font-size: 120%;
	font-weight:600;
}

.secbox-5 .head_table td{
	text-align:center;
	border: none;
}

.secbox-5 td.t1{
	text-align:center;
	vertical-align: middle;
	font-size: larger;
}

.secbox-5 td.t2{
	text-align:center;
	vertical-align: middle;
	font-size: larger;
}

.secbox-5 tr.back1{
	background:#ecf5e2;
}


.sdf {
	position:relative;
}

.secbox-5 .cont {
	max-width: fit-content;
    white-space: nowrap;
    overflow-x: auto;
	left: 5%;
	padding: 0 6% 0 0;
    position: relative;
	font-size: 105%;
}

@media only screen and (min-width:768px) {
	.secbox-5 .cont {
		max-width: none;
		white-space: unset;
		overflow-x: unset;
		left: 0%;
		padding: 0;
		position: relative;
		font-size:65%;
	}
}

@media only screen and (min-width:820px) {
	.secbox-5 .cont {
		font-size:70%;
	}
}

@media only screen and (min-width:840px) {
	.secbox-5 .cont {
		font-size:75%;
	}
}

@media only screen and (min-width:900px) {
	.secbox-5 .cont {
		font-size:80%;
	}
}


@media only screen and (min-width:1024px) {
	.secbox-5 .cont {
		font-size:85%;
	}
}

@media only screen and (min-width:1100px) {
	.secbox-5 .cont {
		font-size:95%;
	}
}

@media only screen and (min-width:1200px) {
	.secbox-5 .cont {
		font-size:110%;
	}
}

@media only screen and (min-width:1366px) {
	.secbox-5 .cont {
		font-size:95%;
	}
}

@media only screen and (min-width:1400px) {
	.secbox-5 .cont {
		font-size:100%;
	}
}


@media only screen and (min-width:1600px) {
	.secbox-5 .cont {
		font-size:115%;
	}
}

@media only screen and (min-width:1920px) {
	.secbox-5 .cont {
		font-size:190%;
	}
}

.nnote {
	width:95%;
	margin:0 auto 5% auto;
	font-size: 135%;
    text-align: center;
	color:#575143;
	font-weight: 600;
}

@media only screen and (min-width:480px) {
	.nnote {
		font-size: 170%;
	}
}

@media only screen and (min-width:720px) {
	.nnote {
		font-size: 200%;
	}
}

.nnote i {
	display:inline-block;
	vertical-align:middle;
}

.nnote div {
	display:inline-block;
	vertical-align:middle;
}

.cvf_b {
	vertical-align:middle;
}

.sdf_m {
	position: absolute;
    top: -15%;
    right: 0;
    width: 15%;
}

@media only screen and (min-width:1920px) {
	.sdf_m {
		top: -18%;
	}
}

.sdf_m_1 {
    top: -15%;
}

@media only screen and (min-width:1920px) {
	.sdf_m_1 {
		top: -15%;
	}
}

.sdf_m img {
	width:100%;
}

.exam_data td {
	padding: 19px;
	border:solid 1px #717d65;
}

@media only screen and (min-width:768px) {
	.exam_data td {
		padding: 10px;
	}
}

@media only screen and (min-width:900px) {
	.exam_data td {
		padding: 12px;
	}
}

@media only screen and (min-width:1024px) {
	.exam_data td {
		padding: 15px;
	}
	
}

@media only screen and (min-width:1100px) {
	.exam_data td {
		padding: 19px;
	}
	
}

@media only screen and (min-width:1920px) {
	.exam_data td {
		padding: 25px;
	}
	
}


.head_table td.start {
	border-left:solid 1px #717d65;
}

.head_table td.end {
	border-right:solid 1px #717d65;
}


.secbox-6 {
	background:#f6f0d8;
	margin: 0 auto -1% auto;
}

.secbox-6 .webpc{
	display:none;
}

@media only screen and (min-width:768px) {
    .secbox-6 {
        padding-bottom: 80px;
    }

	.secbox-6 .webpc{
		display:inline-block;
	}
}


.secbox-6 .sub {
	position:relative;
	color:#343730;
	width:70%;
	font-weight: 600;
	line-height: 150%;
	margin: 1% auto 3% auto;
	text-align: center;
	font-size:120%;
}

@media only screen and (min-width:360px) {
	.secbox-6 .sub {
		font-size:130%;
	}
	
}

@media only screen and (min-width:410px) {
	.secbox-6 .sub {
		font-size:150%;
	}
	
}

@media only screen and (min-width:500px) {
	.secbox-6 .sub {
		font-size:180%;
	}
	
}

@media only screen and (min-width:640px) {
	.secbox-6 .sub {
		font-size:220%;
	}
	
}


@media only screen and (min-width:768px) {
	.secbox-6 .sub {
		width:100%;
		line-height: 100%;
		font-size:140%;
	}
	
}
@media only screen and (min-width:900px) {
	.secbox-6 .sub {
		font-size:160%;
	}
	
}

@media only screen and (min-width:1024px) {
	.secbox-6 .sub {
		font-size:175%;
	}
	
}

@media only screen and (min-width:1100px) {
	.secbox-6 .sub {
		font-size:185%;
	}
	
}

@media only screen and (min-width:1200px) {
	.secbox-6 .sub {
		font-size:215%;
	}
	
}

@media only screen and (min-width:1366px) {
	.secbox-6 .sub {
		font-size:200%;
	}
	
}

@media only screen and (min-width:1400px) {
	.secbox-6 .sub {
		font-size:205%;
	}
	
}

@media only screen and (min-width:1600px) {
	.secbox-6 .sub {
		font-size:230%;
	}
	
}

@media only screen and (min-width:1920px) {
	.secbox-6 .sub {
		font-size:345%;
	}
	
}


.secbox-6 .box1 {
	width:90%;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	margin:0 auto;
	padding: 2% 1% 2% 1%;
	background:#d2e8b7;
	border-top: #6e7758;
	border-left: #6e7758;
	border-right: #6e7758;
	border:solid 1px #6e7758;
	border-bottom: none;
}

@media only screen and (min-width:768px) {
	.secbox-6 .box1 {
		padding: 2% 11% 2% 11%;
	}
}

.sdf_head {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	width: 35%;
}



@media only screen and (min-width:480px) {
	.sdf_head {
		width: 23%;
	}
}


@media only screen and (min-width:1200px) {
	.sdf_head {
		width: 20%;
	}
}


.secbox-6 .box1.color {
	background:#ffc679 !important;
	border-top: #936943;
	border-left: #936943;
	border-right: #936943;
	border:solid 1px #936943;
	border-bottom: none;
}

.secbox-6 .box2.color {
	background:#ffdbab !important;
	border-bottom: #936943;
    border-left: #936943;
    border-right: #936943;
    border: solid 1px #936943;
    border-top: none;
}


.sdf_text {
	width: 60%;
	position:relative;
	display:inline-block;
	vertical-align:bottom;
	color:#48494d;
	padding:4% 0 0 0;
	font-weight:600;
}

@media only screen and (min-width:480px) {
	.sdf_text {
		width: 75%;
	}
}

.sdf_text1 {
	width: 100%;
	position:relative;
	display:inline-block;
	vertical-align:text-top;
	color:#48494d;
	left:2%;
	font-size: 90%;
}

@media only screen and (min-width:320px) {
	.sdf_text1 {
		display:block;
		left:0%;
	}
}

@media only screen and (min-width:360px) {
	.sdf_text1 {
		font-size: 95%;
	}
}

@media only screen and (min-width:410px) {
	.sdf_text1 {
		font-size: 105%;
	}
}

@media only screen and (min-width:640px) {
	.sdf_text1 {
		font-size: 130%;
        padding: 2% 0 0 0;
	}
}

@media only screen and (min-width:768px) {
	.sdf_text1 {
		width: 75%;
		display:inline-block;
		left:2%;
		font-size:130%;
		padding: 0%;
	}
}

@media only screen and (min-width:1024px) {
	.sdf_text1 {
		font-size:160%;
	}
}

@media only screen and (min-width:1100px) {
	.sdf_text1 {
		font-size:180%;
	}
}

@media only screen and (min-width:1600px) {
	.sdf_text1 {
		font-size:210%;
	}
}

@media only screen and (min-width:1920px) {
	.sdf_text1 {
		font-size:310%;
	}
}




.sdf_name {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	color:#0a2c00;
	font-size:160%;
}

@media only screen and (min-width:640px) {
	.sdf_name {
		font-size:200%;
	}
}

@media only screen and (min-width:768px) {
	.sdf_name {
		font-size:180%;
	}
}
@media only screen and (min-width:1024px) {
	.sdf_name {
		font-size:200%;
	}
}

@media only screen and (min-width:1100px) {
	.sdf_name {
		font-size:250%;
	}
}

@media only screen and (min-width:1600px) {
	.sdf_name {
		font-size:300%;
	}
}

@media only screen and (min-width:1920px) {
	.sdf_name {
		font-size:400%;
	}
}

.sdf_name.color {
	color:#bf3c04;
}
.sdf_text {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	line-height: 140%;
	left: 2%;
}

@media only screen and (min-width:768px) {
	.sdf_text {
		line-height: 180%;
	}
}

@media only screen and (min-width:1920px) {
	.sdf_text {
		line-height: 280%;
	}
}


.text8 {
	display:inline-block;
	width:100%;
}


.dbc {
	display:none;
}

@media only screen and (min-width:1024px) {
	.dbc {
		display:block;
	}
}


.text7.color {
	color:#da3507;
}

.text7 {
	font-size:100%;
	padding: 3% 0 0% 0;
	color:#004700;
}

@media only screen and (min-width:360px) {
	.text7 {
		font-size:110%;
	}
}

@media only screen and (min-width:640px) {
	.text7 {
		font-size:140%;
	}
}

@media only screen and (min-width:768px) {
	.text7 {
		font-size:100%;
		padding: 0 0 0% 0;
	}
}

@media only screen and (min-width:820px) {
	.text7 {
		font-size:115%;
		padding: 0 0 0% 0;
	}
}

@media only screen and (min-width:1024px) {
	.text7 {
		font-size:135%;
	}
}

@media only screen and (min-width:1100px) {
	.text7 {
		font-size:150%;
		padding: 0 0 2% 0;
	}
}
@media only screen and (min-width:1200px) {
	.text7 {
		font-size:160%;
	}
}
@media only screen and (min-width:1600px) {
	.text7 {
		font-size:190%;
	}
}
@media only screen and (min-width:1920px) {
	.text7 {
		font-size:275%;
	}
}


.secbox-6 .box2 {
	width: 90%;
    font-weight: 500;
	margin:0 auto 3% auto;
	padding: 2% 3% 2% 3%;
	background:#edffd9 !important;
	line-height:160%;
	text-align:justify;
	color:#444c3d;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
	border-bottom: #6e7758;
	border-left: #6e7758;
	border-right: #6e7758;
	border:solid 1px #6e7758;
	border-top: none;
}


@media only screen and (min-width:640px) {
	.secbox-6 .box2 {
		font-size:130%;
	}
}
@media only screen and (min-width:768px) {
	.secbox-6 .box2 {
		padding: 2% 8% 2% 8%;
		line-height:140%;
		font-size:100%;
	}
}

@media only screen and (min-width:820px) {
	.secbox-6 .box2 {
		font-size:120%;
	}
}

@media only screen and (min-width:1024px) {
	.secbox-6 .box2 {
		font-size:130%;
	}
}


@media only screen and (min-width:1100px) {
	.secbox-6 .box2 {
		font-size:160%;
	}
}

@media only screen and (min-width:1200px) {
	.secbox-6 .box2 {
		padding: 2% 11% 2% 11%;
	}
}

@media only screen and (min-width:1600px) {
	.secbox-6 .box2 {
		font-size:190%;
	}
}

@media only screen and (min-width:1920px) {
	.secbox-6 .box2 {
		font-size:260%;
	}
}


.secbox-6 .box2 span{
	color:#fc0000;
	
}


.text_card {
	position:absolute;
	width:89%;
	top:17%;
	left:8%;
	font-size: 90%;
}

@media only screen and (min-width: 360px) {
	.text_card {
		font-size: 92%;
	}
}

@media only screen and (min-width: 410px) {
	.text_card {
		font-size: 105%;
	}
}

@media only screen and (min-width: 480px) {
	.text_card {
		font-size: 120%;
	}
}

@media only screen and (min-width: 640px) {
	.text_card {
		font-size: 155%;
	}
}

@media only screen and (min-width: 720px) {
	.text_card {
		font-size: 185%;
	}
}

@media only screen and (min-width: 768px) {
	.text_card {
		font-size: 60%;
	}
}

@media only screen and (min-width: 820px) {
	.text_card {
		font-size: 65%;
	}
}

@media only screen and (min-width: 900px) {
	.text_card {
		font-size: 75%;
	}
}

@media only screen and (min-width: 1024px) {
	.text_card {
		font-size: 82%;
	}
}

@media only screen and (min-width: 1100px) {
	.text_card {
		font-size: 90%;
	}
}


@media only screen and (min-width: 1200px) {
	.text_card {
		font-size: 105%;
	}
}

@media only screen and (min-width: 1366px) {
	.text_card {
		font-size: 95%;
	}
}

@media only screen and (min-width: 1400px) {
	.text_card {
		font-size: 100%;
	}
}

@media only screen and (min-width: 1600px) {
	.text_card {
		font-size: 110%;
	}
}

@media only screen and (min-width: 1920px) {
	.text_card {
		font-size: 165%;
	}
}


.te1 {
	color:#373737;
	font-weight: 800;
	line-height: 160%;
	font-size: larger;
}

@media only screen and (min-width: 768px) {
	.te1 {
		font-size: 130%;
	}
	
}

.te2 {
	color: #373737;
	line-height: 160%;
    font-weight: 500;
}

.te2 span {
	font-weight: 700;
	color:#035fd0;
}

.bre {
	margin:2% auto 5% auto;
}

.bre2 {
	margin:1% auto 2.5% auto;
}

.te2 .ssf {
	line-height:100%;
}

.te2_small {
	font-size:smaller;
}


#demos .owl-carousel .item {
    background: transparent !important;
    height: 11rem !important;
    padding: 0 !important;
}


@media only screen and (min-width: 320px) {
	#demos .owl-carousel .item {
		height: 22rem !important;
	}
}

@media only screen and (min-width: 360px) {
	#demos .owl-carousel .item {
		height: 25rem !important;
	}
}


@media only screen and (min-width: 410px) {
	#demos .owl-carousel .item {
		height: 28rem !important;
	}
}

@media only screen and (min-width: 480px) {
	#demos .owl-carousel .item {
		height: 32rem !important;
	}
}


@media only screen and (min-width: 500px) {
	#demos .owl-carousel .item {
		height: 37rem !important;
	}
}

@media only screen and (min-width: 640px) {
	#demos .owl-carousel .item {
		height: 45rem !important;
	}
}

@media only screen and (min-width: 720px) {
	#demos .owl-carousel .item {
		height: 50rem !important;
	}
}


.all {
    position: relative;
}

#demos {
    position: relative;
    width: 100%;
    top: 22%;
    left: 0%;
}

@media only screen and (min-width: 768px) {
    #demos {
        position: absolute;
        width: 57%;
        top: 0%;
        left: 23%;
        background: none;
    }
}

@media only screen and (min-width: 900px) {
    #demos {
        /* top: 25%; */
        top: 0%;
    }
}

#demos .owl-carousel {
    margin:0 auto !important;
}

.item {
    width: 70%;
    height: 100% !important;
    margin: 0 auto;
}

@media only screen and (min-width: 768px) {
    .item {
        width: 70%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1024px) {
    .item {
        width: 70%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1100px) {
    .item {
        width: 70%;
        margin: 0 auto;
    }
}

@media only screen and (min-width: 1200px) {
    .item {
        width: 70%;
        margin: 0 auto;
    }
}

.item .youtube {
    width: 100%;
    height: 59%;
}

@media only screen and (min-width: 390px) {
    .item .youtube {
        width: 100%;
        height: 65%;
    }
}

@media only screen and (min-width: 410px) {
    .item .youtube {
        width: 100%;
        height: 69%;
    }
}

@media only screen and (min-width: 480px) {
    .item .youtube {
        width: 100%;
        height: 81%;
    }
}

@media only screen and (min-width: 640px) {
    .item .youtube {
        width: 100%;
        height: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .item .youtube {
        width: 100%;
        height: 54%;
    }
}

@media only screen and (min-width: 1024px) {
    .item .youtube {
        width: 100%;
        height: 51%;
    }
}

@media only screen and (min-width: 1100px) {
    .item .youtube {
        width: 100%;
        height: 50%;
    }
}

.owl-carousel .owl-nav button.owl-prev {
    display: block;
    background: 0 0;
    color: #2e2f33 !important;
    border: none;
    position: absolute;
    padding: 0 !important;
    left: 2%;
    top: 35%;
    font: inherit;
    font-size: 370% !important;
    font-weight: 500;
}

@media only screen and (min-width:768px) {
    .owl-carousel .owl-nav button.owl-prev {
        left: 5%;
    }
}

.owl-carousel .owl-nav button.owl-next {
    display: block;
    background: 0 0;
    color: #2e2f33 !important;
    border: none;
    position: absolute;
    padding: 0 !important;
    right: 2%;
    top: 35%;
    font: inherit;
    font-size: 370% !important;
    font-weight: 500;
}

@media only screen and (min-width:768px) {
    .owl-carousel .owl-nav button.owl-next {
        right: 5%;
    }
}



/*翻牌*/
.allcards {
  position: relative;
  width: 65%;
  min-height: 300px;
  margin: 3% auto auto 0%; 
  padding: 0;
}

@media only screen and (min-width:360px) {
	.allcards {
		min-height: 330px;
	}
	
}

@media only screen and (min-width:768px) {
	.allcards {
		min-height: 460px;
	}
	
}

.allcards img{
  width:100%;		
}

.card_text {
 text-align:justify;
 font-size:180%;
 line-height: normal;
 width:75%;
 font-weight:100;
 margin:0 auto;
 color:#ffffff; 
}

.card_text1 {
 text-align:justify;
 font-size:180%;
 line-height: normal;
 width:81%;
 font-weight:100;
 margin:0 auto;
 color:#ffffff; 
}

.card_back_text {
 position:absolute;
 top:8%;
 left:18%;
 color:#000000;
 font-size:170%; 
 line-height:normal;
}

.card_back_text1 {
 position:absolute;
 top:8%;
 left:14%;
 color:#000000;
 font-size:170%; 
 line-height:normal;
}

.money_size {
 font-size:120%;
 text-align: center;
 font-weight: 600;
 margin:0 0 0 -16%;
}

.money_size1{
 font-size:120%;
 color:#ff2400;
 text-align: center;
 font-weight: 600;
 margin:0 0 0 -16%;
}

.money_size2{
 font-size:120%;
 text-align: center;
 font-weight: 600;
 margin:13% 0 0 -16%;
}

.money_size3{
 font-size:120%;
 color:#ff2400;
 text-align: center;
 font-weight: 600;
 margin:1% 0 0 -5%;
}


@media only screen and (min-width: 481px) {
  .allcards {
    display: flex;
    width: 85%;
    min-height: 220px;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .card_back_text {
	font-size:97%; 
  }
  .card_back_text1 {
	font-size:97%; 
  }
}

@media only screen and (min-width: 768px) {
  .allcards {
    width: 90%;
	min-height: 190px;
	margin:0 auto;
  }
  .card_back_text {
	font-size:100%; 
	top:6%;
	left:15%;	
  }
  .card_back_text1 {
	font-size:100%; 
	top:8%;
	left:10%;	
  }
}

@media only screen and (min-width: 895px) {
	.allcards {
        min-height: 245px;
	}
	
}
@media only screen and (min-width: 1024px) {
  .allcards {
    width: 90%;
    min-height: 290px;
	
  }
  .card_back_text {
	font-size:130%; 
  }
  .card_back_text1 {
	top:8%;
	font-size:130%; 
  }
  .sdfsdf > font {
	font-size:120%;
  }
}
@media only screen and (min-width: 1100px) {
  .allcards {
	width: 90% !important;
    min-height: 320px;
	
  }
  .card_back_text {
	font-size:170%; 
  }
  .card_back_text1 {
	font-size:170%; 
  }
}
@media only screen and (min-width: 1280px) {
  .allcards {
	width: 90% !important;
    min-height: 384px;
	
  }
 
}

@media only screen and (min-width: 1366px) {
  .allcards {
	width: 90% !important;
    min-height: 403px;
	
  }
 
}

@media only screen and (min-width: 1600px) {
  .allcards {
    min-height: 400px;
  }
  .card_back_text {
	font-size:210%; 
  }
  .card_back_text1 {
	font-size:210%; 
  }
}
@media only screen and (min-width: 1920px) {
  .allcards {
    min-height: 485px;
  }
  .card_back_text {
	font-size:250%; 
  }
  .card_back_text1 {
	font-size:250%; 
  }
}

.card {
  position: relative;
  width: 100%;
  min-height: 135px;
  margin: 0 1% 10px 1%;
}
@media only screen and (min-width: 768px) {
  .card {
    width: calc((100% - 25%) / 3);
    min-height: auto;
    margin: 0;
  }
}

.front-side {
  box-sizing: border-box;
  z-index: 4;
}

.back-side {
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  box-sizing: border-box;
  z-index: 4;
}

.card .front-side, .card .back-side {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  cursor: pointer;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition-duration: 1s, 1s;
  -moz-transition-duration: 1s, 1s;
  -ms-transition-duration: 1s, 1s;
  -o-transition-duration: 1s, 1s;
  transition-duration: 1s, 1s;
  box-sizing: border-box;
}

.flip .front-side {
  z-index: 4;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip .back-side {
  z-index: 4;
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.card-hand {
  position: absolute;
  bottom: -5%;
  right: -5%;
  width: 15%;
  color: #cccccc;
  font-size: 185%;
}
@media only screen and (min-width: 481px) {
  .card-hand {
    font-size: 135%;
  }
}
@media only screen and (min-width: 1024px) {
  .card-hand {
    font-size: 185%;
  }
}
@media only screen and (min-width: 1600px) {
  .card-hand {
    font-size: 190%;
  }
}
@media only screen and (min-width: 1920px) {
  .card-hand {
    font-size: 230%;
  }
}


.secbox-sendForm {
  color: #fff;
}

.secbox-sendForm .red_word {
  color: #fff;
  font-size: 90%;
  line-height: 1.2;
}
@media only screen and (min-width: 768px) {
  .secbox-sendForm .red_word {
    font-size: 100%;
  }
}

.secbox-sendForm #is_read {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}
.secbox-sendForm #personLawUrl {
  color: #ffe600;
  margin: 0 5px;
}
.secbox-sendForm #personLawUrl:hover {
  color: #ffa085;
}

.secbox-sendForm .joinForm {
  margin: 10px auto;
  color: #000;
  background-color: #fff;
}


.secbox-sendForm .send a {
  display: block;
  width: 150px;
  font-size: 110%;
  font-weight: 600;
  color: #fff;
  background-color: #eb5f2c;
  padding: 15px 0;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .secbox-sendForm .send a {
    width: 200px;
    font-size: 125%;
    padding: 25px 10px;
  }
}

.secbox-sendForm .send a:hover {
  color: #fff !important;
  background-color: #ebce2c;
  text-decoration: none;
}