/* 共用 */
body { background:url("images/img_body.png")repeat left top; background-color:#f4f4f4; }
.title { color:#e8426c; }
.mh6,.mhpgn { height:60px; }
.bctop { height:40px; }
.nodata { text-align: center; margin-top:60px; }
.nodata .tit { font-size:2.25rem; color:#000; margin-bottom:10px; }
.nodata .cont { font-size:1.25rem; }

.topbnr { height:320px; background-color:#434655; }
.topbnr .title { color:#fff; font-size:3rem; }
.topbnr .subtitle { color:#fff; font-size:1.25rem; }

.MainArea { padding-top:60px; padding-bottom:100px; }

.IconCenter { display: inline-flex; justify-content: center; align-items: center; }

.Notice { color: #6c0012; font-size:0.875rem; }

.Bonus { color:#e8426c; font-size:3rem; }
.Bonus .material-icons { font-size: 2.75rem; }

.Bonus.sm { font-size:1rem; }
.Bonus.sm .material-icons { font-size:1.125rem; }

.Score { color:#00248d; }

.textColor1 { color:#007cff; }
.textColor2 { color:#fff; }
.textColor3 { color:#e8426c; }
.textColor4 { color:#000; }
.textColor5 { color:#474747; }

.textFont1 { font-size:1.5rem; }
.textFont2 { font-size:2rem; }
.textFont3 { font-size:1.25rem; }
.textFont4 { font-size:1.875rem; }

.textTitle1 { font-size:2.5rem; line-height:42px; }
.textTitle2 { font-size:2.375rem; line-height:40px; }
.textTitle3 { font-size:3rem; }
.textTitle4 { font-size:4rem; }

.textLine1 { line-height:32px; }
.textLine2 { line-height:40px; }
.textLine3 { line-height:48px; }

.textSpace1 { letter-spacing: 10px; }

.textBG1 { background-color:#f6e4e8; }
.textBG2 { background-color:#e8426c; }
.textBG2.op1 { background-color:rgba(232, 66, 108, 0.25); }
.textBG3 { background-color:#fff; }
.textBG4 { background-color:#434655; }
.textBG5 { background-color:#e595a9; }
.textBG6 { background-color:#d94267; }
.textBG7 { background-color:#f4f4f4; }
.textBG8 { background-color:#d9d8d8; }

.textBD1 { border:2px solid #e8426c; }
.textBD2 { border:1px solid #fff; }
.textBD1.nobb { border-bottom:none; }

.textArea1 { padding:80px 0px; }

.windowArrow { position: absolute; bottom:-32px; width:32px; height:32px; }
.windowArrow.left { left:0; }
.windowArrow.right { right:0; }
.triangle { width:0; height:0; border-style:solid; -webkit-filter: drop-shadow(0px 5px 3px rgba(0,0,0,.2)); filter:drop-shadow(0px 5px 3px rgba(0,0,0,.2)); }
.windowArrow.left .triangle { border-width:32px 32px 0 0; border-color:#fff transparent transparent transparent; }
.windowArrow.right .triangle { border-width:0 32px 32px 0; border-color:transparent #fff transparent transparent; }

.Layout { text-align:left; display: flex; }
.Layout .LayoutLeft { min-width:220px; flex:0 0 auto; }
.Layout .LayoutRight { margin-left:55px; flex-grow: 1; }
.Layout .title { font-size:1.5rem; margin-bottom:20px; }

/* 會員左側選單 */
.LeftBar li { padding:8px 30px; }
.LeftBar li a { display: flex; color:#434655; align-items: center; }
.LeftBar li a .name { font-size:1.25rem; padding-left:20px; }

.ClsArea { position: relative; }
.ClsArea .row { margin:0px -3px; }
.ClsArea .row > div { width:20%; padding:0px 3px 10px; }
.ClsArea .ClsItem { font-size:1rem; display: block; text-align:left; color:#434655; border-bottom:1px solid #434655; padding-bottom:10px; height:100%; }
.ClsArea .ClsItem:hover { color:#e8426c; border-bottom:1px solid #e8426c; }
.ClsArea .ClsItem.active { color:#007cff; border-bottom:3px solid #007cff; }

.ListArea { margin-top:60px; }
.ListArea .List { border-bottom:1px solid #c6c6c6; }
.ListArea .List.expired * { color:#ababab; }
.ListArea .List:nth-child(even) { background-color:rgba(242, 102, 143, 0.1); }
.ListArea .List .name a { font-size:1.25rem; color:#000; }
.ListArea .List .Bonus { font-size:1.125rem; white-space: nowrap; }
.ListArea .List .Bonus .material-icons { font-size:1.5rem; }
.ListArea .List .info { font-size:1rem; }
.ListArea .List .info .material-icons { font-size:1.125rem; }
.ListArea .List .act { color:#000; }
.ListArea .List .act .material-icons { font-size:1.25rem; }
.ListArea .List .BtnArea a { width:calc(50% - 0.75rem); }

.ListArea .List.File { color:#000; font-size:1.25rem; line-height:64px; }
.ListArea .List.File:hover { color:#fff; background-color:#007cff; }
.ListArea .List.File .material-icons.leftIcon { font-size:3rem; }
.ListArea .List.File .material-icons.rightIcon { font-size:2rem; }

.titleArea { border-top:1px solid #e8426c; border-bottom: 1px solid #e8426c; background-color:rgba(232, 66, 108, 0.1); color:#e8426c; padding:15px; text-align:center; }

.BottomPage { position: relative; height:80px; padding:28px 0px; font-size:1rem; }
.BottomPage a { color:#474747; }
.BottomPage a:hover { color:#e8426c; }

.BottomPage .pages { display: flex; justify-content: space-between; }
.BottomPage .pages a.nopage { visibility: hidden; }
.BottomPage .pages .page > div { display: inline-block; padding:0px 20px; }
.BottomPage .pages .page .active { color:#e8426c; }

.ShadowType1 { box-shadow: 0px 0px 5px #919191; }

/* 公版 標題描述 */
.publicArea { padding:40px 55px; }
.publicArea.BG1 { background-color:#fff; }
.publicArea .title { font-size:1.5rem; padding-bottom:20px; border-bottom:2px solid #555866; }
.publicArea .title.BB1 { border-bottom: 2px solid #e8426c; }
.publicArea .subtitle { text-align:left; color:#474747; }
.publicArea .content { margin-top:30px; width:100%; color:#000; line-height:35px; }

.TopBack a { font-size:1rem; color:#434655; }
.TopBack a:hover { color:#e8426c; }

.PicArea { width:450px; }

.EditContent { text-align: justify; }
.EditContent img { max-width:100%; height:auto !important; }

.Share .txt { font-size:0.875rem; }
.Share a { margin-left: 30px; }
.Share .lineImg .pic { display: inline-block; width:18px; height:18px; background:url("./images/icon_line.png") no-repeat center center; background-size:16px; }
/* .lineImg .pic:hover { background:url("./images/ico-line-o2.png") no-repeat center center; background-color:#edd544; background-size:16px; } */

/* icon */
.plink .icon { float:left; padding:6px 0px; display: flex; justify-content: flex-start; flex-wrap: wrap; }
.plink .icon .pic { width:32px; height:32px; background-color:#366607; color:#fff; text-align:center; padding:8px 0px; border-radius: 50px; margin-right:20px; }
.plink .icon .pic:hover { background-color:#edd544; color:#fff;  }
.plink.pshare .icon .pic { background-color:#262626; color:#fff; }
.plink.pshare .icon .pic:hover { background-color:#366607; color:#fff; }
.plink .icon .lineImg .pic { display: block; background:url("./images/ico-line-o2.png") no-repeat center center; background-size:16px; background-color:#366607; }
.plink .icon .lineImg .pic:hover { background:url("./images/ico-line-o2.png") no-repeat center center; background-color:#edd544; background-size:16px; }
.plink.pshare .lineImg .pic { background-color:#262626; }
.plink.pshare .lineImg .pic:hover { background-color:#366607; }

.contactus .plink .icon .pic { margin:10px 20px 10px 0px; }
.plink .icon div { height:32px; width:32px; margin-right:5px; display:inline-block; }

/* ====== product_list ====== */
.slash { color:#c6c6c6; font-size:0.875rem; }
.product .list .pd { margin:25px 0px; }
.product .list .pd .des { background-color:#fff; padding:15px 0px; }
.product .list .pd .des .pdname { font-size:1.25rem; color:#434655; }
.product .list .pd .des .price { color:#e8426c; font-size:1rem; }
.product .list .pd .des .txt { font-size:1rem; }
.product .list .pd .des .num { font-size:1.125rem; font-weight:bold; }
.product .list .pd .des a { text-decoration: none; }
.product .list .pd .des a:hover .pdname { color: #e8426c; }

/* ====== product_des ====== */
.product_info .info { width:calc(100% - 450px); text-align:left; margin-left:140px; }
.product_info .info .pname { color:#00248d; font-size:2rem; }
.product_info .info .pcode { color:#919191; font-size:0.875rem; }
.product_info .info .txt { color:#262626; font-size:1rem; }
.product_info .info .txt.lh { line-height:28px; }
.product_info .info .color1 { color:#e8426c; }
.product_info .info .num { font-size:2.5rem; }

.LinkArea { padding-top:40px; }
.LinkArea a { display: inline-block; padding-top:20px; color:#919191; }

/* ====== about ====== */
/* .about img { margin-top:40px; }
.about .content { text-align: left; margin-top:40px; } */
.guide img { max-width:320px; }
.guide .step { color:#007cff; font-size:2.5rem; }
.guide .send { max-width:50%; font-size:2rem; border-radius:50px; line-height: 48px; }
.guide .send .material-icons { font-size:3rem; }

.recruit .Notice { font-size:2rem; }
.recruit .send { font-size:2.25rem; max-width:450px; border-radius:50px; line-height: 48px; }
.recruit .send .material-icons { font-size:3rem; }
.recruit .postTitle { font-size:4rem; }
.recruit .postName { font-size:1.5rem; background:url("images/img_video_Recruitment_10.png")no-repeat center center; background-size:cover; }

.aboutArea1 > div { width:50%; }

.servicePage .Img1 { max-width:350px; }
.servicePage .Img2 { max-width:400px; }
.servicePage .Img3 { max-width:75%; }
.servicePage .Img5 { max-width:80%; }
.servicePage .Img7 { max-width:310px; }
.servicePage .SubjectText { position: absolute; }
.servicePage .SubjectText.left_top { bottom:60%; right:49%; }
.servicePage .SubjectText.left_bottom { top:60%; right:52%; }
.servicePage .SubjectText.right_top { bottom:60%; left:62%; }
.servicePage .SubjectText.right_bottom { top:60%; left:58%; }

.servicePage .ListText { position: absolute; }
.servicePage .ListText.left_top { left:5%; bottom:72%; }
.servicePage .ListText.right_top { left:80%; top:5%; }
.servicePage .ListText.left_bottom { right:80%; bottom:5%; }
.servicePage .ListText.right_bottom { top:80%; right:7%; }

.servicePage .FloatText { position: absolute; }
.servicePage .FloatText.top { left:43%; top:13%; }
.servicePage .FloatText.bottom { left:41%; bottom:18%; }
.servicePage .FloatText.left { left:20%; top:38%; }
.servicePage .FloatText.right { right:20%; top:42%; }

.servicePage .audioTitle .BD1 { position: absolute; left:0; right:0; top:50%; z-index:-1; }
.servicePage .chain img { max-width:116px; }
.servicePage .chain .BD1 { position: absolute; left:-40px; right:-40px; top:37%; z-index:-1; height:4px; width:auto; }
.servicePage .send .material-icons { font-size:3rem; }

.servicePage .gallery { width:340px; }
.servicePage .methodTitle { width:445px; max-width:80%; }

/* ====== contactus ====== */
.contactus .infoArea { width:330px; font-size:1rem; line-height:30px; }
.contactus .infoArea .contact_title { color:#e8426c; }
.contactus .infoArea .bd { height:4px; width:40px; background-color:#434655; }

/* ====== article ====== */
.article form { max-width:460px; margin:0 auto; }
.article .check { text-align:left; font-size:1.125rem; color:#000; margin:35px 0px; }
.article .check a { color:#007cff; text-decoration: underline; }
.article .check a:hover { color:#e8426c; }

/* ====== join ====== */
.join .subtitle { color:#000; }

/* .memberForm #PostNo { background-color:#e2e2e2; border:none; } */

.memberForm .changeBtn { justify-content: flex-start; display: flex; }
.memberForm .changeBtn button { border:none; background-color: transparent; color:#8a7457; }
/* .memberForm .send { margin-top:25px; margin-bottom:0px; } */

/* ====== finishReg ====== */
.finishReg .content { font-size:1.25rem; line-height: 35px; padding:40px 0px; }
.finishReg .Bonus { margin:40px 0px; }
.finishReg .btnArea { width:424px; max-width:100%; padding:0px 15px; margin:40px auto; }
.finishReg .btnArea button { font-size:1.125rem; padding:3px 0px; }
.finishReg .mhfin { height:350px; }

/* ====== memberMain ====== */
.memberMain .cardArea .card { background:url("images/img_card_1.png")no-repeat right bottom; position: relative; color:#fff; width:100%; min-height:272px; border-radius: 30px; background-color:#e8426c; padding:30px 40px; margin:10px 0px; }
.memberMain .cardArea .card .name { font-size:2rem; line-height:48px; display: flex; align-items: center; }
.memberMain .cardArea .card .score { font-size:2rem; }
.memberMain .cardArea .card .color1 { color:#fdfc9f; }
.memberMain .cardArea .card .info { min-height:162px; display: flex; flex-direction: column; justify-content: flex-end; }
.memberMain .cardArea .card .info .data { font-size:1.5rem; }
.memberMain .cardArea .hint { font-size:1rem; }

.memberMain .cardArea .card2 { background:url("images/img_card_2.png")no-repeat right bottom; background-color:#007afe; }
.memberMain .cardArea .card2 .name .material-icons { font-size:60px; }
.memberMain .cardArea .card2 .info { font-size:1rem; }
.memberMain .desc2 ul li { margin-left:2rem; list-style-type:disc; font-size:1.5rem; }

/* ====== questionary_vote ====== */
.questionary_vote .content { font-size:1.25rem; }
.questionary_vote button.send { max-width:200px; }
.questionary_vote button.send.invalid { opacity: 0.2; cursor: default; }
.questionary_vote form label { color:#000; font-size:1.25rem; }
.questionary_vote form .checkmark { transform: scale(1.2); top:8px; }
.questionary_vote form input[type="text"].other { width: 200px; }
.questionary_vote .pgs { font-size:13px; }

/* ====== task ====== */
.taskPage .colArea { font-size:1.25rem; }
.taskPage .colTitle { color:#e8426c; font-weight: bold; }
.taskPage .status { font-size:1.5rem; color:#007cff; line-height: 30px; }
.taskPage .status.success { color:#22ac38; }
.taskPage .status .material-icons { font-size:2rem; }
.taskPage .Bonus { line-height:30px; font-size:2rem; }
.taskPage .Bonus .material-icons { font-size:2rem; }
.taskPage .grade { color:#e8426c; font-size:1rem; }

.taskPage .taskflow { position: relative; }
.taskPage .taskflow .flow { position: relative; }
.taskPage .taskflow .flow.active { color:#e8426c; }
.taskPage .taskflow .flow.active .dot { border:1px solid #e8426c; }
.taskPage .taskflow .flow.active .dot:after { background-color:#e8426c; }
.taskPage .taskflow .dot { position: relative; display: inline-block; width:12px; height:12px; border:1px solid #555866; border-radius:25px; }
.taskPage .taskflow .dot:after { content: ""; position: absolute; left: 2px; top: 2px; width: 6px; height: 6px; background-color:#555866; border-radius: 5px; }
.taskPage .taskflow .date { font-size:1rem; }
.taskPage .taskflow .line { position: absolute; top:17px; left:5px; bottom:-22px; width:2px; background-color:#555866; }
.taskPage .taskflow .reason { position: relative; padding:10px; margin-top:15px; background-color:#fff; color:#a40000; }
/* .taskPage .taskflow .reason .horn { position: absolute; left:0; top:-10px; width:10px; height:10px; overflow: hidden; } */
/* .taskPage .taskflow .reason .horn:after { content:""; position: absolute; width:5px; height:5px; background:#999; transform: rotate(45deg); top:5px; left:2px; box-shadow: 0px 0px 5px #919191; } */

/* ====== task ====== */
.qa_title:hover { cursor: pointer; color:#e8426c; }

/* buyDesModal */
.articleModal .modal-dialog { margin-top: 10vh; width:100%; max-width:1140px; }
.articleModal .modal-header .mTitle { margin:0 auto; font-size:1.3rem; }
.articleModal .modal-header .close { position: absolute; right:20px; padding:20px; }
.articleModal .modal-content { border-radius: 10px; text-align: left; height:75vh; }
.articleModal .modal-body { padding:30px; }
.articleModal .modal-body .content { overflow-x: hidden; overflow-y:auto; max-height:60vh; }

/* ====== forgetPwd ====== */
.forgetPwd .subtitle { padding-top:25px; }
.forgetPwd .forgetForm { padding-top:40px; }
.forgetPwd .forgetForm .send { margin-bottom:0px; }
.forgetPwd .subtitle .link { color:#00a0e9; }

/* ====== orderList ====== */
.orderList #detail_button { cursor: pointer; }
.orderList .odBody .pimg { max-width:130px; }
.orderList .odBody .delete a { color:#00248d; text-decoration: none; border-bottom:1px solid #00248d; font-size:1rem; }
.orderList .odBody .delete a:hover { color:#e8426c; border-bottom:1px solid #e8426c; }
.orderList .odFoot .back a { color:#000; }
.orderList .odFoot .back a:hover { color:#e8426c; }

.orderBG1 { background-color:#e8426c; color:#fff; }
.orderBG2 { background-color:#e2e2e2; color:#474747; }
.orderBG3 { background-color:#fff; }
.orderBG4 { background-color:#434655; color:#fff; }

.orderColor1 { color:#e8426c; }
.orderColor2 { color:#919191; }
.orderColor3 { color:#434655; }
.orderColor4 { color:#000; }
.orderColor5 { color:#555866; }
.orderColor6 { color:#474747; }
.orderColor7 { color:#262626; }

.orderTitle1 { font-size:1.5rem; }

.orderFont1 { font-size:0.875rem; }
.orderFont2 { font-size:1.125rem; }
.orderFont3 { font-size:1.25rem; }
.orderFont4 { font-size:1rem; }

.orderLeft { width:286px; flex-shrink: 0; }

.orderLine0 { line-height:normal; }
.orderLine1 { line-height:36px; }
.orderLine2 { line-height:30px; }
.orderLine3 { line-height:24px; }

.orderLabel { width:90px; }

/* ====== trace ====== */
.trace .imgArea { width:130px; }

/* ====== video ====== */
.video .imgArea { width:640px; }
.video .imgArea iframe { max-width:100%; }
.video .imgArea a { color:#fff; }
.video .imgArea a:hover { color:#e8426c; }
.video .imgArea a .material-icons { font-size:5rem; }


/* checkout process pic */
.processPic {  padding:30px 30px 50px; border-bottom:1px solid #c6c6c6; }
.process { max-width:700px; width:100%; margin:0 auto; }
.process .bar { height:2px; width:99%; background-color: #474747; position:relative; top:-13px; }
.process .steps { display: flex; justify-content: space-between; position: relative; z-index:2; }
.process .step { width:24px; height:24px; border-radius: 50px; border:3px solid #555866; font-size:0.875rem; display: flex; justify-content: center; align-items: center; background-color:#555866; color:#fff; }
.process .step .stepname { font-size:1rem; position: absolute; top:30px; color:#919191; width:80px; -moz-transform:translate(-35px); -ms-transform: translate(-35px); }
_::-webkit-full-page-media, _:future, :root .process .step .stepname { transform: translate(-35px); }  /*  only safari  */
.process .step.active { background-color:#fff; color:#262626; }
.process .step.active > .stepname { color:#262626; }

/* scrollbar */
.modal .self-scroll::-webkit-scrollbar { width: 16px; } /* this targets the default scrollbar (compulsory) */
.modal .self-scroll::-webkit-scrollbar-track { background-color: #e6e6e6; } /* the new scrollbar will have a flat appearance with the set background color */
.modal .self-scroll::-webkit-scrollbar-thumb { background-color: #666666; } /* this will style the thumb, ignoring the track */
.modal .self-scroll::-webkit-scrollbar-button { background-color: transparent; display: none; } /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
    background-color: black;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */


@media (max-width:1198.98px){
    .topnb .nb .submenu.inside { display: none; }

    .Layout .LayoutLeft { min-width: auto; }
    .LeftBar { position: fixed; z-index: 10; background-color: #f4f4f4; left: 0; top: 80px; bottom: 0; transition: all .3s; overflow: auto; }
    .Layout .LayoutRight { margin-left:0; }

    .PicArea { width:320px; }
    .product_info .info { width:calc(100% - 320px); margin-left:100px; }

    /* ====== video ====== */
    .video .imgArea { width:540px; }
}

@media (max-width:991.98px){
    .ListArea { margin-top:40px; }
    form .security .securityInput { margin-bottom:20px; }
    
    .PicArea { width:240px; }
    .product_info .info { width:calc(100% - 240px); margin-left:60px; }

    .orderList .odBody select { width:60px; }

    .orderLeft { width:235px; }

    /* ====== contactus ====== */
    .contactus .infoArea { width:240px; }

    /* ====== video ====== */
    .video .imgArea { width:100%; }

    .aboutArea1 > div { width:100%; }

    .servicePage .SubjectText.left_top { right:52%; }
    .servicePage .SubjectText.right_bottom { left:62%; }
    .servicePage .SubjectText .textFont2 { font-size:3vw; }
    .servicePage .SubjectText .textFont1 { font-size:3vw; line-height:24px; }
    .servicePage .Img3 { max-width:90%; }
    .servicePage .Img5 { max-width:100%; }
    .servicePage .FloatText.left { left:10%; }
    .servicePage .FloatText.right { right:12%; }
    .servicePage .FloatText .textFont2 { font-size:3.5vw; }
    .servicePage .FloatText .textFont3 { font-size:2vw; }
    .servicePage .SubjectText { width:17%; }

    .servicePage .gallery { width:240px; }
    .servicePage .Img6 { max-width:80px; }
    
    .servicePage .methodsImg { width:80%; margin:0px auto; }
}

@media (max-width:767.98px){
    .MainArea { padding-top:40px; padding-bottom:60px; }
    
    .pshare button.back { width:105px; float:right; }
    .orderReturn button.back { padding:10px; width:100%; }

    .mhpgn { height:40px; }

    .topbnr { height:240px; }
    .topbnr .title { font-size:2.25rem; }
    .topbnr .subtitle { font-size:1rem; }

    .title { font-size:1.5rem; }
    .nodata .tit { font-size:2rem; }
    .nodata .cont { font-size:1rem; }

    .textTitle1.md1 { font-size:1.75rem; }
    .textTitle2.md1 { font-size:1.75rem; }
    .textTitle3.md1 { font-size:2rem; }
    .textTitle4.md1 { font-size:2.5rem; }

    .textFont1.md1 { font-size:1.125rem; }
    .textFont2.md1 { font-size:1.25rem; }
    .textFont3.md1 { font-size:1rem; }

    .textLine3.md1 { line-height:32px; }

    .ClsArea select { width:100%; padding:15px 10px; color:#434655; border:none; border-bottom:1px solid #434655; }

    .ListArea .List .info .IconCenter { display: flex; justify-content: flex-start; }
    .ListArea .List .act { font-size:1rem; }

    .LeftBar { top:60px; }

    .BottomPage { padding:16px 0px; color:#919191; }
    .BottomPage .page input { width:60px; height:48px; color:#03071e; background-color:#f6f6f6; border:1px solid #c6c6c6; padding:15px 0px; text-align:center; }
    .BottomPage .pages { display: block; position: relative; }
	.BottomPage .pages .prevbtn,
	.BottomPage .pages .nextbtn { position: absolute; top:0px; padding:12px 0px; }
	.BottomPage .pages .prevbtn { left:0px; }
    .BottomPage .pages .nextbtn { right:0px; }
    
    .PicArea { width:100%; }

    .publicArea { padding:15px; }
    .publicArea .title { padding-bottom:15px; }


    /* icon */
    .plink .icon .pic { margin-right:10px; }
    .plink:not(.pshare) .icon { float:none; margin-bottom:20px; }

    /* product_detail */
    .product_info .info { width:100%; margin-left:0px; }
    .product_info .info .num { font-size:2rem; }

    /* ====== contactus ====== */
    .contactus .infoArea { width:100%; }

    /* ====== guide ====== */
    .guide img { max-width:280px; }
    .guide .step { font-size:2rem; }
    .guide .send { max-width:80%; font-size:1.5rem; line-height: 24px; }
    .guide .send .material-icons { font-size:2rem; }

    .recruit .Notice { font-size:1.5rem; }
    .recruit .send { font-size:1.5rem; line-height: 36px; }
    .recruit .send .material-icons { font-size:2rem; }
    .recruit .postTitle { font-size:2.5rem; }
    .recruit .postName { font-size:1.25rem; }

    /* ====== login ====== */
    .articleModal .modal-body { padding:15px; }
    .memberForm .birth { top:37px; }

    /* ====== join ====== */
    .join .accountData , .join .memberData { display: block; }
    .join .accountData .title , .join .memberData .title { text-align: left; font-size:1.125rem; }

    /* ====== memberMain ====== */
    .memberMain .cardArea .card { padding:30px; }
    .memberMain .cardArea .card .name { font-size:1.5rem; line-height: normal; }
    .memberMain .cardArea .card .score { font-size:1.5rem; }
    .memberMain .cardArea .card .info { left:30px; }
    .memberMain .cardArea .card .info .data { font-size:1.25rem; }
    .memberMain .cardArea .card2 .name .material-icons { font-size:40px; }
    .memberMain .cardArea .hint { font-size:0.875rem; }
    .memberMain .desc2 ul li { font-size:1.05rem; }

    /* ====== orderList ====== */
    .orderLeft { width:100%; }

    /* ====== trace ====== */
    .trace .imgArea { width:130px; }

    /* ====== checkout ====== */
    .checkout { margin:40px 0px; }

    .process .step { font-size:0.7rem; }

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:540px; }

    .map-responsive { padding-bottom:300px; }

    .servicePage .SubjectText.left_top { bottom:55%; }
    .servicePage .SubjectText.right_top { bottom:55%; }
    .servicePage .SubjectText.left_bottom { top:56%; }
    .servicePage .SubjectText.right_bottom { top:56%; }
    .servicePage .SubjectText .textFont1 { line-height:20px; }

    .servicePage .ListText.textFont3 { font-size:0.875rem; }
    .servicePage .ListText.left_top { left:0; bottom:69%; }
    .servicePage .ListText.right_top { left:62%; top:2%; }
    .servicePage .ListText.left_bottom { right:74%; bottom:9%; }
    .servicePage .ListText.right_bottom { top:75%; right:0; }

    .servicePage .FloatText.top { left:42%; top:10%; }
    .servicePage .FloatText.bottom { left:38%; bottom:15%; }

    .servicePage .send .material-icons { font-size:2rem; }

    .servicePage .Img4 { max-width:80%; }

    .servicePage .gallery { width:300px; }

    .servicePage .chain img { width:100px; }
}

@media (min-width:768px){

    /* ====== login ====== */
    .mhlog { height:150px; }

    /* ====== join ====== */
    .join .memberData img { height: 42px; }

    /* ====== forgetPwd ====== */
    .forgetPwd { max-width:540px; margin:0px auto; }

}

@media (min-width:992px){
    .ListArea .List .BtnArea { flex-basis:430px; width:430px; }
}

@media (min-width:1200px){
    .LeftBar { width:100%; }
    .LeftBar li:hover,
    .LeftBar li.active { background-color:#007cff; }
    .LeftBar li:hover a,
    .LeftBar li.active a { color:#fff; }
}

@media (max-width:1198.98px) and (min-width:992px){

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:960px; }
}

@media (min-width:768px) and (max-width:991.98px){

    /* ====== contactus ====== */
    .contactus .contform .security input { width:100%; }


    /* ====== join ====== */
    .join .accountData .title , .join .memberData .title { flex-basis:180px; }

    /* modal-dialog */
    #buyDesModal .modal-dialog { max-width:720px; }

    .servicePage .Img1 { max-width:220px; }
    .servicePage .Img2 { max-width:350px; }
    .servicePage .Img4 { max-width:300px; }
    .servicePage .Img7 { max-width:240px; }
}

@media (min-width:1500px){
    .Layout .LayoutLeft { min-width:280px; }
    .LeftBar li { padding:8px 35px; }
}