/*General*/
html, body { background-color: #f7f7f7; overflow: auto; -webkit-overflow-scrolling: touch; font-family: arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important; }
body { margin: 0px; }
canvas { pointer-events: none; }
input:focus { background: #ffffde; border: 1px solid #d1cba8; }
td { vertical-align: top; }
hr { margin-top: 15px; margin-bottom: 15px; border: 0; height: 3px; background-image: linear-gradient(to right, rgba(4, 120, 53, 0), rgb(255, 133, 53), rgba(4, 120, 53, 0)); }
.rbtn01 { display: inline-block; width: 100%; padding: 0.9rem 1.4rem; margin: 0 0.3rem 0.3rem 0; border-radius: 0.15rem; box-sizing: border-box; text-decoration: none;/* text-transform: uppercase; */ font-weight: 800; color: #FFFFFF; background-color: #FFC107; box-shadow: inset 0 -0.6em 0 -0.35em rgba(0, 0, 0, 0.17); text-align: center; position: relative; border-width: 0px; border-style: unset; border-color: transparent; border-image: unset;/* line-height: 25px; */ cursor: pointer; font-size: 25px; font-family: arial, "Microsoft JhengHei", "微軟正黑體", sans-serif !important; }
.rbtn01:active { top: 0.1rem; }
.rbtn01:hover { background-color: #fdd356; }
input[type="radio"] { box-sizing: border-box; appearance: none; background: white; outline: 2px solid #ff8300; border: 3px solid white; width: 16px; height: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 10px; cursor: pointer; }
input[type='radio']:checked { background: #FF7000; }
input[value="MISS"] { margin-left: 20px; }
.mainContainer {/* margin-top: 10px; */height: auto; -webkit-box-shadow: 5px 5px 15px -5px rgba(96, 96, 96, 0.6); -moz-box-shadow: 5px 5px 15px -5px rgba(96, 96, 96, 0.6); box-shadow: 5px 5px 15px -5px rgba(96, 96, 96, 0.6); }
.centercontainer { width: 95%; margin: 0 auto; padding-top: 5px; font-size: 18px; line-height: 24px; }
.arrowNav { margin-bottom: -20px; margin-top: 10px; display: block; }
.mobile_arrowNav img { width: 100%; }
.notpassbtn { pointer-events: none; background-color: #a9a9a9; }
.inner { width: 1000px; margin: 0 auto; background-color: rgba(255, 255, 255, 0.2); }
select { width: 100%; height: 40px; font-size: 20px; line-height: 40px; }
span.redstar { padding-left: 3px; color: #f70808; font-size: 18px; }
.mobile_arrowNav { display: none; }
.intropopPart { width: 7%; float: left; height: 100%; font-size: 20px; line-height: 34px; float: left; margin: 20px 0px 0px 0px; }
.iframepopupOuterCon { height: 70%; }
.centerPlaceiframeCon { height: 100%; }
iframe.introiframe1 { width: 100%; height: 100%; border: 0px; }
.introquestionIcon { text-align: center; background-color: #ffb757; color: #ffffff; font-weight: 600; border-radius: 60px; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; cursor: pointer; }
.MC .intropopPart { display: none; }
.AT .intropopPart { display: none; }
.COMM .intropopPart { display: none; }
.MC .tabBtn_test_flow {display: none;}
.AT .tabBtn_test_flow {display: none;}
.COMM .tabBtn_test_flow {display: none;}
.COMM .isPC{
    display: none;
}


#AT_checkbox_list:not(.showDeclare) {
  display: none;
}
#AT_checkbox_list .showDeclare{
    display: block;
}

.GADC .tabBtn_test_flow {display: none;}
.GADC .tabBtn_exam_flow {display: none;}
.GADC .coupontag {display: none;}
.GADC .couponInput {display: none;}
.GADC .intropopPart { display: none; }
.corpBannerArea img {
    width: 100%;
}

.lesson_centre option:disabled {
  display: none;
}
.course_type option:disabled {
  display: none;
}

/*Element*/
.cardIcon { display: flex; justify-content: center; }
.submitBtn { padding: 48px 0px; z-index: 10; position: absolute; float: left; }

/*Function*/
.visible { display: block; }
.nonvisible { display: none; }
.AT_check{
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    margin: 0 8px 4px 0;
}
.AT_check:checked {
    background-color: #ff924b;
}

 .AT_check:checked::after {
    content: "";
    position: absolute;
    top: 2px; left: 4px; width: 4px; height: 8px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    border-color: white;
    border-style: solid;
}




/*Select Course*/
.sectinoBar { font-weight: bold; color: #FFF; text-shadow: 0px 1px 0px #000; padding: 0 0 0 10px; line-height: 40px; background: url(../image/itbg.png) top left repeat-x; background-size: contain; margin-top: 20px; font-size: 22px; height: 40px; }
.enrollment-style .rbtn01 input { display: block; width: 100%; height: 40px; background: url(../image/btn01.png) top center no-repeat; line-height: 40px; text-align: center; color: #FFF; text-shadow: 0px 2px 5px #000; border-width: 0px; border-style: none; border-color: #ffffff; border-image: none; cursor: pointer; }
.enrollment-style .rbtn01 input:hover { display: block; height: 40px; background: url(../image/btn01a.png) top center no-repeat; line-height: 40px; text-align: center; color: #FFF; text-decoration: underline; text-shadow: 0px 2px 5px #5b5b5b; }
.tag_type { font-size: 20px; line-height: 34px; width: 30%; float: left; text-align: left; margin: 20px 0px 0px 20px; }
.default_type { font-size: 20px; width: 80%; float: left; font-weight: 700; margin: 30px 0px 0px 0px; color: #013475; height: 36px; }
.select_type { font-size: 20px; width: 60%; float: left; margin: 15px 0px; }
.enrollment-style select { height: 36px; padding: 0 0 0 5px; font-size: 18px; border-radius: 6px; border: 1px solid #AAA; font-size: 18px; width: 120px; }
input[type=text] { font-size: 20px; height: 20px; background: #FFF; border: 1px solid #AAA; border-radius: 3px; width: 50%; padding: 8px 0px 8px 8px; }
.stepthreeExCon input[type=text] { height: 20px; }
.couponInput .errorMessageBox { width: 130px; padding-left: 140px; font-size: 16px; line-height: 38px; color: #ffffff; background-color: #f73d3d; border-radius: 3px; }
input.couponInputField { float: left; }
span.atredstar { color: red; margin-left: 3px; }
.select_type.st1 { color: #047835; font-weight: 600; margin: 20px 0px; }
.select_type.st0 { color: #047835; font-weight: 600; margin: 20px 0px; }
.previousStepBtn { width: 10%; float: left; height: 30px; position: absolute; padding: 5px 10px 10px 10px; }
.partTitle { width: 100%; float: left; color: #ffffff; font-size: 30px; font-weight: 800; text-align: center; height: 100%; line-height: 40px; }
.centerlogo {    /* text-align: center; */
width: 10rem; margin: 0 auto; padding-top: 0.4rem; }
.centerlogo img { width: 100%; }
.mockHeader.logoheader { text-align: center; background-color: #fff1e7; height: 50px; }
.pricetag {display: none;}

/*Step two*/
.subCourse { color: #d85600; font-size: 30px; font-weight: bold; margin: 15px 0px; text-shadow: 0px 1px 0px #ffaf7b; }
.tabContentFrame {    /* overflow: hidden; */
position: relative; border: 1px solid #9c9c9c; min-height: 300px; }
.tabContentFrame iframe { width: 100%; border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; border: 0;    /* overflow: hidden; */ }
.tabBtnSty { cursor: pointer; color: #757575; background-color: transparent; padding: 8px 10px; width: 250px; text-align: center; border-radius: 5px; float: left; margin: 8px 30px; border: 1px solid #a7a7a7; }
.tabBtnStyActive { color: #ffffff; background-color: #ff6500; border: 1px solid #ffe2ba; }
.tabContentinnerFrame { display: none; }
.frameBtnStyActive { display: block; }
.tabBtnContainer { height: 190px; }
.spanText { display: inline; font-size: 16px; color: #525252; text-shadow: 0px 1px 0px #000; padding: 0 0 0 0px; font-weight: 100; }
.oriListPrice { display: inline; font-size: 30px; text-decoration: line-through; color: #c7c7c7; }
.finalPrice { display: inline; font-size: 30px; }
.priceDiscount { display: inline; color: #d85600; font-size: 20px; font-weight: 800; }
.finalPrice { color: #d85655; font-weight: 600; padding-left: 10px; text-shadow: 0px 1px 0px #ff924b; font-size: 26px; }
.bottombarContainer { text-align: center; padding: 0px 0px 0px 0px; }
.discountTextDiv { padding-bottom: 1rem; color: blue; font-size: 1.5rem; }
.discountdivsubdiv { display: inline-block; color: red; font-size: 2rem; line-height: 2rem; border-radius: 0px; background: yellow; padding: 15px; margin-top: 0.5rem; font-weight: 500; border: 1px dashed red; }
.mockHeader { background-color: #ff924b; height: 40px;/* position: relative; */ }
.previousStepBtn img { height: 100%; }
.previousStepBtn a { height: 100%; }
.discountExterContainer { text-align: center; padding-bottom: 3px; }
.finalpriceExterContainer { text-align: center; }
.nextpage.rbtn01.nextShowContent { margin-top: 10px; }

/*stepthree*/
.placeHolder_tag { font-size: 20px; width: 40%; float: left; display: table-cell; vertical-align: middle;/* line-height: 100%; */ margin-top: 8px; }
.smallSubtitle { font-size: 14px; }
span.starRed { color: red; margin-left: 3px; }
.boxrow { display: table; width: 100%; margin: 15px 0 0 0; }
.rhscolumnele { font-size: 20px; width: 60%; float: left; }
.stepthree select { width: 240px; }
.stepthree input[type="text"] { width: 230px; }
.engName .placeHolder_tag, .gender.placeHolder_tag { margin: 0 0 0 0; }
div#captcha { width: 90px; float: left; }
input#cpatchaTextBox { float: left; width: 141px; font-size: 14px; }
.reloadCatpcha { cursor: pointer; font-weight: bold; background: #7b7b7b; color: #fff; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;    /* text-shadow: 2px 1px 1px rgba(150, 150, 150, 0.83); */ transition: transform 0.1s ease; padding: 1px 0px; margin: 0 auto; text-decoration: none; border: 0px solid #000; border-radius: 3px; font-size: 14px; }
.reloadCatpcha:hover { -webkit-filter: brightness(120%); filter: brightness(120%); text-decoration: underline; }
.catpchaBoxLower { width: 100px; text-align: center; margin-left: 90px; margin-top: -5px; float: left; }
.rhscacheupper { display: table; }
.addressDetails { margin-left: 40%; margin-top: 50px; width: 47%; }
.centerPlaceAddress { font-size: 16px; margin-bottom: 5px; }
span.validErrorMsg { width: 150px; padding: 0px 10px; font-size: 16px; line-height: 38px; color: #ffffff; background-color: #f73d3d;/* border-radius: 6px; */ display: inline-block; text-align: center; border-radius: 3px; }
.gender .placeHolder_tag { margin-top: 0px; }
.addressImg img { width: 100% }
.stepthreeExCon select { width: 52%; padding: 6px 0px 8px 8px; }
.centerPlaceAddressImage { width: 100%; }
.redremarkText { color: #ff1313; text-align: center; padding-top: 5px; font-size: 16px; }
.locationIcon { width: 28px; display: inline-block; line-height: 20px; padding-left: 10px; cursor: pointer; }
.locationIcon img { width: 100%; }
.shadepopup { position: absolute; width: 100%; height: 100%; z-index: 999; display: none; }
.shadeingblack { background-color: rgba(101, 101, 101, 0.6); width: 100%; height: 100%; position: absolute; }
.popupinnerContainer { background-color: #ffffff; width: 40%; text-align: center; margin: 0 auto; margin-top: 5%; padding: 1%; position: relative; }
.closbtn { width: 40px; height: 40px; font-size: 26px; line-height: 40px; cursor: pointer; position: absolute; top: -20px; right: -20px; background-color: #ffc355; color: #ffffff; border: 1px solid; }

/*Confirm*/
.celiaTable table {/* line-height: 25px; */border-top: 1px #ffcea4 solid; width: 100%; margin: 0px auto 0px auto; border-collapse: separate; border-spacing: 0px; border-color: #ffcea4; }
.celiaTable table td { font-weight: bold; background: #ff5e00; color: #ffffff; border-right: none;/* width: 110px; */ padding: 5px 5px 5px 10px; border-left: 1px #ffcea4 solid; border-bottom: 1px #ffcea4  solid; border-right: 1px #ffcea4 solid; font-size: 18px;/* border-spacing: 0px; *//* border-collapse: unset; */ }
.celiaTable table td.infodisplaytd { color: #666 !important; border-bottom: 1px solid #ffcea4 !important; background: #ffffff !important; font-weight: 100; width: 60%; }
.remarkCenter { width: 100%; text-align: center; font-size: 16px; margin-top: 10px; font-weight: 600; }
span.selectedCoursePriceShow { font-size: 18px !important; }
.field.cardPicColumn { margin: 10px 0 !important; }

/*Finish*/
.finishpage .successDiv .responseMessage { width: 100%; text-align: center; font-size: 35px; font-weight: 500; margin-top: 25px; margin-bottom: 25px; }

/*others*/
.maintainPage .bigMaintainText { font-weight: 100; color: #000; text-shadow: 0px 1px 0px #000; margin-top: 20px; text-align: center; width: 100%; font-size: 40px; line-height: 50px; }
.maintainPage .centerText { text-align: center; width: 100%; color: red; font-weight: 500; font-size: 100px; padding-bottom: 20px; }
.maintainPage .normalBtn.rbtn01 { margin-top: 30px; }
.maintainPage .centercontainer { line-height: normal; }
.maintainPage .normalBtn.rbtn01 a { text-decoration: none; color: #ffffff; }



/*Mobile*/
@media only screen and (max-width:840px) {
    body { overflow-y: hidden; height: 100%; }
    .mainContainer {    /* margin-top: 10px; */
    height: auto; -webkit-box-shadow: 0px 0px 0px 0px rgba(96, 96, 96, 0.6); -moz-box-shadow: 0px 0px 0px 0px rgba(96, 96, 96, 0.6); box-shadow: 0px 0px 0px 0px rgba(96, 96, 96, 0.6); }
    .phonehavenot { display: none; }
    .mockHeader { height: 2rem; }
    .partTitle { font-size: 1.4rem; line-height: 2.1rem; }
    .partTitlecorp2{ font-size: 0.7rem; }
    .closbtn img { width: 100%; }
    .mockHeader.logoheader { height: 2rem; }
    .centerlogo { padding-top: 0.1rem; width: 8rem; }
    .centercontainer { width: 95%; margin: 0 auto; padding-top: 0.3rem; font-size: 1rem; line-height: 1rem; }
    .arrowNav { display: none; }
    .inner { width: 100%; }
    select { width: 100%; height: 2rem; font-size: 1.1rem; line-height: 2rem; }
    .mobile_arrowNav { display: block; margin-top: 10px; margin-bottom: -20px; }
    .bannerArea img { width: 100%; }
    .subCourse { line-height: 1.3rem; font-size: 1.3rem; margin: 0.5rem 0px; }
    .tag_type { width: 40%; margin: 1rem 0px 0px 0px; font-size: 1.1rem; line-height: 2rem; height: 2rem; }
    .select_type { width: 50%; margin: 1rem 0px 0px 0px; font-size: 1.3rem; }
    .select_type.st0 { margin: 1rem 0px 0px 0px; }
    .select_type.st1 {    /* margin: 0px 0px; */
    margin: 1rem 0px 0px 0px; }
    .intropopPart { width: 10%; height: 100%; font-size: 1rem; line-height: 1rem; margin: 1.2rem 0px 0px 0px; }
    .introquestionIcon { text-align: center; background-color: #ffb757; color: #ffffff; font-weight: 600; border-radius: 2rem; width: 1.5rem; height: 1.5rem; line-height: 1.6rem; margin: 0 auto; cursor: pointer; }
    .default_type { width: 100%; }
    .tag_type.tt2 {/* margin: 1rem 0px 0px 0px; *//* width: 100%; */ }
    .default_type.st2 { width: 70%; }
    .sectinoBar { overflow: auto; background: url(../image/itbg.png) top left repeat; margin-top: 0.5rem; height: 2rem; line-height: 2rem; font-size: 1.2rem; }
    .placeHolder_tag { width: 40%; margin-bottom: 5px; font-size: 1rem; }
    .rhscolumnele { width: 58%; }
    .engName .placeHolder_tag, .gender.placeHolder_tag { margin: 0 0 5px 0; }
    .addressDetails { margin-left: 0; margin-top: 0; width: 100%; }
    .centerPlaceBox.rhscolumnele { margin-bottom: 10px; }
    .catpchaBoxLower { margin-left: 0px; width: 6rem; margin-top: 0rem; }
    section.container-lg { max-width: 85%; }
    main > .container-lg .cell { min-height: unset; }
    .celiaTable table { line-height: unset; }
    .celiaTable table td { width: 50%; }
    .celiaTable table td.infodisplaytd { padding: 4px; width: 50%; }
    .printBtnCon { display: none; }
    .sectionPart .tabContentFrame { overflow-y: scroll; -webkit-overflow-scrolling: touch; height: 15rem; }
    .rbtn01 { display: block; margin: 0.4rem auto; width: 100%; font-size: 1.3rem; padding: 0.7rem 1.4rem; }
    .finishpage .successDiv .responseMessage { line-height: 35px; }
    .finishpage .printBtn { display: none; }
    .mobile_indexfooter { height: unset; }
    .maintainPage .centerText { font-size: 4.8rem; }
    .stepthreeExCon select { width: 103%; padding: 0.1rem; }
    .maintainPage .bigMaintainText { font-size: 2rem; line-height: normal; }
    .maintainPage .bottombarButton { padding-bottom: 2rem; }
    .centerPlaceAddress { font-size: 0.9rem; padding-left: 40%; }
    .locationIcon { width: 1.3rem; line-height: 1rem; padding-left: 0.3rem; }
    input[type=text] { font-size: 1.1rem; height: 1.1rem; background: #FFF; border: 1px solid #AAA; border-radius: 3px; width: 50%; padding: 0.4rem 0px 0.4rem 0.3rem; }
    .previousStepBtn { width: 10%; height: 1.5rem; line-height: 1.5rem; padding: 0.3rem 0.3rem; }
    hr { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .lessonCentre { padding-bottom: 0.3rem; }
    .lessonLanguage { padding-bottom: 0.3rem; }
    .tabBtnContainer { height: auto; overflow: auto; padding-bottom: 0.3rem; }
    .tabBtnSty { padding: 0.5rem; width: 22%; margin: 0.3rem 0.6rem; height: 1rem; }
    .discountExterContainer { padding-top: 0.5rem; }
    .priceDiscount { font-size: 1.3rem; }
    .finalPrice { font-size: 1.6rem; }
    .finalpriceExterContainer { padding-top: 0.4rem; }
    .nextpage.rbtn01.nextShowContent { margin-top: 0.1rem; padding: 0.8rem 1.4rem; font-size: 1.5rem; }
    a { text-decoration: none; }
    /* .steptwoPage .bottombarContainer { text-align: center; padding: 0px 0px 0px 0px; position: fixed; background-color: #ffffff; width: 95%; margin: 0 auto; bottom: 0px; height: 6.5rem; border-top: 1px solid #000000; } */
    .stepthreeExCon input[type=text] { height: 1.2rem; width: 100%; }
    .rhscolumnele { font-size: 1rem; }
    input[type="radio"] { width: 0.8rem; height: 0.8rem; }
    .catpchaBoxUpper.rhscolumnele { width: 60%; }
    div#captcha { width: 40%; height: 2.4rem; }
    input#cpatchaTextBox { width: 56%; font-size: 0.7rem; }
    span.validErrorMsg { width: 93%; padding: 0px 5%; font-size: 0.9rem; line-height: 1.5rem; height: 1.5rem; border-radius: 3px; }
    .redremarkText { font-size: 0.9rem; }
    .popupinnerContainer { background-color: #ffffff; width: 95%; text-align: center; margin: 0 auto; margin-top: 30%; padding: 1%; position: relative; }
    .closbtn { width: 2rem; height: 2rem; font-size: 1.5rem; line-height: 2rem; cursor: pointer; position: absolute; top: -20px; right: -5px; background-color: #ffc355; color: #ffffff; border: 1px solid; }
    .celiaTable table td { font-size: 1rem; }
    .remarkCenter { font-size: 0.9rem; margin-top: 0.5rem; }
    main > .container-lg .example { padding: 5px 0px; }
    .field.cardPicColumn { margin: 5px 0 !important; }
    .field.cardPicColumn .cardIcon img { width: 55%; }
    .packagePriceRemark{padding-top: 1rem;}
}