@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;900&display=swap'); /* font-family:'Roboto',sans-serif; */ /*==【基本設定】==*/ body{font:1em/1.331 'Noto Sans TC','微軟正黑體',Arial,sans-serif;overflow-x:hidden;font-display:swap;/*letter-spacing:0.05em;*/font-weight:400;color:var(--color-black);background:var(--color-lightblue) url('../images/content/bg_body.svg') repeat scroll left top;} body{background:#fff;} *{box-sizing:border-box;} .title,b{margin:0;padding:0;line-height:1.3;font-weight:700;} ul.ulli,.ulli>ul,.ulli>ul>li{margin:0;padding:0;list-style:none;} .lnav a,.lnav a:hover,.audioplayer a,.audioplayer a:hover{-webkit-transition:none;-moz-transition:none;-o-transition:none;-ms-transition:none;transition:none;} .mnav li a:after,.mnav li a:hover::after,.btn_arr::after,.btn_arr:hover::after, .vdolist li a:before,.vdolist li a:hover:before,.box01 .box_hd h2.title:after,.box01:hover .box_hd h2.title:after, .icontxtlist li,.icontxtlist li:hover,#header,.is-down #header,#match2,.bnrsbox li a,.bnrsbox li a:hover{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;transition:all .35s ease-in-out;} ::-webkit-input-placeholder{color:#8F9BAD;}::-moz-placeholder{color:#8F9BAD;}:-ms-input-placeholder{color:#8F9BAD;}option:disabled{color:#8F9BAD;} ::selection{background:var(--color-blue);color:#fff;} ::-moz-selection{background:var(--color-blue);color:#fff;} :root{ --color-white:#FFF; --color-black:#1D1715; --color-lightblue:#F2F7FB; --color-lightblue-hv:#c9e3f8; --color-blue:#0063B2; --color-darkblue:#203656; --color-yellow:#FED62F; --color-yellow2:#FFF7D5; --color-lightyellow:#FFFDF7; --color-grey:#8F9BAD; --color-grey2:#f7f7f7; --color-grey3:#707A88; --color-red:#EB5757; --color-orange:#F08102; --color-orange-hv:#f39326; --color-green:#4BC683; --font-size12:0.75em; --font-size12-14:1.16666em; --font-size12-16:1.33333em; --font-size14:0.875em; --font-size15:0.9375em; --font-size16:1em; --font-size18:1.17em; --font-size20:1.25em; --font-size24:1.5em; --font-size25:1.55em; --font-size28:1.75em; --font-size30:1.875em; --font-size32:2em; --font-size36:2.25em; --font-size40:2.5em; --font-size46:2.875em; --font-size48:3em; --font-size50:3.125em; --font-size54:3.375em; --font-size60:3.75em; --font-size64:4em; --font-size66:4.125em; --font-size80:5em; --font-size90:5.625em; } #wrap{padding-top:120px;position:relative;} .inbox{max-width:1200px;margin:0 auto;position:relative;z-index:2;} .is-down #header{box-shadow:0px 4px 5px rgba(0,99,178,0.06);transform:translateY(-50px);} #header{z-index:30;position:fixed;left:0;top:0;right:0;} #header .inbox{display:flex;justify-content:space-between;align-items:center;} #header .hdmain{z-index:20;background:var(--color-white);padding:10px 0;position:relative;} #header .l,.mnav>ul,#header .r,.mbarea{display:flex;justify-content:flex-start;align-items:center;} #header .r{padding:0 0 0 5px;flex:1;justify-content:space-around;} .mbarea{justify-content:space-around;flex:2;} /* Menu */ .mnav{padding:0 0 0 15px;font-weight:500;} .mnav li a{color:var(--color-darkblue);display:block;padding:13px 8px;position:relative;white-space:nowrap;} .mnav>ul>li>a:after{content:'';position:absolute;left:2%;bottom:8px;height:2px;background:var(--color-blue);width:0%;} .mnav>ul>li>a:hover{color:var(--color-blue);} .mnav li a:hover::after{width:96%;} .mnav li.licon a{padding:0 5px;display:flex;align-items:center;justify-content:center;} .mnav li.licon a span{display:none;} .mnav li.licon .i_icon{width:50px;height:50px;} .mnav li.licon a:hover .i_icon{background-image:url('../images/header/icon_mic_hv.svg');} .mnav li.licon a:after{display:none;} .mnav li.licon a img{height:50px;} .mnav li.mshow{padding:20px 0;border-bottom:0;} .mnav li.mshow .btn{background:var(--color-orange);color:var(--color-white) !important;display:inline-block;padding:10px 15px;border:none;} .mnav li.mshow .btn:after{display:none !important;} .mnav>ul>li{position:relative;} .mnav .subnav{position:absolute;left:50%;top:100%;transform:translate(-50%,0);background:#fff;width:105px;padding-top:11px;display:none;} .mnav .subnav:before{content:'';position:absolute;left:0;top:11px;width:100%;height:5px;background-image:linear-gradient(to bottom,rgba(0,99,178,0.06),rgba(0,99,178,0.0)); } .mnav .subnav li a{display:flex;justify-content:center;align-items:center;padding:5px;min-height:40px;} .mnav .subnav li a:hover{background:#e8e8e8;} .mnav>ul>li.hv>a{color:var(--color-blue);} .mnav>ul>li.hv .subnav{display:block;animation:mnavIn .5s ease-in-out;} @-webkit-keyframes mnavIn{0%{opacity:0;transform:translate(-50%,-5px);}100%{opacity:1;transform:translate(-50%,0px);}} @keyframes mnavIn{0%{opacity:0;transform:translate(-50%,-5px);}100%{opacity:1;transform:translate(-50%,0px);}} /* Phone Menu */ .mshow{display:none !important;} .phone_menu{display:none;margin:0 5px 0 0;} .i_menu{ width:45px;height:45px;position:relative;display:block;border-radius:5px; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);cursor:pointer; -webkit-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;transition:.5s ease-in-out; } .i_menu span{ display:block;position:absolute;height:3px;width:28px;background:var(--color-blue);-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px;opacity:1;left:8px;text-indent:-99999px; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg); -webkit-transition:.25s ease-in-out;-moz-transition:.25s ease-in-out;-o-transition:.25s ease-in-out;transition:.25s ease-in-out; } .i_menu span:nth-child(1){top:10px;} .i_menu span:nth-child(2),.i_menu span:nth-child(3){top:21px;} .i_menu span:nth-child(4){top:32px;} .i_menu.open{background:var(--color-darkblue);} .i_menu.open span{background:var(--color-white);} .i_menu.open span:nth-child(1){top:18px;width:0%;left:50%;} .i_menu.open span:nth-child(2){-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);width:33px;left:6px;top:22px;} .i_menu.open span:nth-child(3){-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);width:33px;left:6px;top:22px;} .i_menu.open span:nth-child(4){top:18px;width:0%;left:50%;} /* MemberIcon */ .aicon{display:block;padding:10px;position:relative;margin:0 0 0 8px;} .aicon em{position:absolute;right:0;top:0;width:20px;height:20px;display:flex;justify-content:center;align-items:center;background:var(--color-red);color:var(--color-white);border-radius:50%;font-size:var(--font-size12);letter-spacing:normal;line-height:1;} .aicon:hover .i_icon{animation:jello-horizontal 0.9s both;} .mbhead img{width:47px;height:47px;border-radius:50%;overflow:hidden;margin:0 5px 0 0;} .mbhead{margin:0 0 0 13px;letter-spacing:normal;font-weight:500;max-width:130px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;} .mbarea .btn{padding:10px 15px;} .mbarea .mbhead ~ .btn{margin:0 0 0 13px;border:1px solid var(--color-blue);} /* Search */ .shbox{flex:3;} .shbox label{background:var(--color-grey2);display:flex;border-radius:5px;justify-content:space-between;align-items:center;width:100%;} .shbox .tf{border:none;background:none;padding:8px;font-size:var(--font-size14);flex:1;width:100%;} .shbox .btn_sh{background:none;border:none;padding:7px;} /* Blue Message */ .bluemsg{background:var(--color-blue);color:var(--color-white);width:100%;height:50px;display:flex;justify-content:center;align-items:center;} .bluemsg .btn{padding:8px 10px;margin:0 0 0 10px;} #content{z-index:10;} /* Icon */ .i_icon{display:inline-block;background:no-repeat scroll center/100% auto;width:25px;height:25px;text-indent:-99999px;} .i_cart{background-image:url('../images/header/icon_cart.svg');} .i_mb{background-image:url('../images/header/icon_mb.svg');} .i_sh{background-image:url('../images/header/icon_search.svg');} .i_fb{background-image:url('../images/footer/icon_ft_fb.svg');} .i_ig{background-image:url('../images/footer/icon_ft_ig.svg');} .i_yt{background-image:url('../images/footer/icon_ft_yt.svg');} .i_tt{background-image:url('../images/footer/icon_ft_tt.svg');} .i_link{background-image:url('../images/footer/icon_ft_link.svg');} .i_podcast{background-image:url('../images/footer/icon_ft_podcast.svg');} .i_love{background-image:url('../images/content/icon_love.svg');} .i_love.on{background-image:url('../images/content/icon_love_on.svg');} .i_people{background-image:url('../images/content/icon_people.svg');} .i_htitle01{background-image:url('../images/content/icon_h_title01.svg');width:35px !important;height:50px !important;} .i_htitle02{background-image:url('../images/content/icon_h_title02.svg');width:60px !important;background-size:90px auto;} .i_htitle03{background-image:url('../images/content/icon_h_title03.svg');height:70px !important;} .i_htitle04{background-image:url('../images/content/icon_h_title04.svg');width:55px !important;background-size:90px auto;} .i_htitle05{background-image:url('../images/content/icon_h_title05.svg');width:62px !important;background-size:90px auto;} .i_htitle06{background-image:url('../images/content/icon_h_title06.svg');width:60px !important;background-size:90px auto;} .i_htitle07{background-image:url('../images/content/icon_h_title07.svg');} .i_htitle08{background-image:url('../images/content/icon_h_title08.svg');} .i_htitle09{background-image:url('../images/content/icon_h_title09.svg');} .i_htitle10{background-image:url('../images/content/icon_h_title10.svg');width:60px !important;background-size:90px auto;} .i_htitle11{background-image:url('../images/content/icon_h_title11.svg');width:65px !important;background-size:90px auto;} .i_htitle_alli{background-image:url('../images/content/icon_h_title_alli.svg');width:65px !important;background-size:90px auto;} .i_htitle03_chat{background-image:url('../images/content/icon_h_title03_chat.svg');top:-42px;} .i_htitle05_chat{background-image:url('../images/content/icon_h_title05_chat.svg');top:-48px;} .i_actinfo01{background-image:url('../images/content/icon_actinfo01.svg');} .i_actinfo02{background-image:url('../images/content/icon_actinfo02.svg');}.c_red .i_actinfo02{background-image:url('../images/content/icon_actinfo02_r.svg');} .i_actinfo03{background-image:url('../images/content/icon_actinfo03.svg');}.c_red .i_actinfo03{background-image:url('../images/content/icon_actinfo03_r.svg');} .i_actinfo04{background-image:url('../images/content/icon_actinfo04.svg');} .i_actinfo05{background-image:url('../images/content/icon_actinfo05.svg');} .i_actinfo06{background-image:url('../images/content/icon_actinfo06.svg');} .i_course{background-image:url('../images/content/icon_course.svg');width:60px !important;background-size:90px auto;} .i_wish{background-image:url('../images/content/icon_wish.svg');width:70px !important;background-size:90px auto;} .i_alliance{background-image:url('../images/content/icon_alliance.svg');width:70px !important;background-size:90px auto;} .i_lgg{background-image:url('../images/content/icon_login_google.svg');} .i_lfb{background-image:url('../images/content/icon_login_facebook.svg');} .i_lln{background-image:url('../images/content/icon_login_line.svg');} .i_txt{text-indent:0;width:auto;font-style:normal;color:var(--color-green);} .i_close{background-image:url('../images/content/icon_close.svg');} .i_click{background-image:url('../images/content/icon_click.svg');} .i_photo{background:rgba(32,54,86,.8) url('../images/content/icon_photo.svg') no-repeat scroll center;width:25px;height:25px;border-radius:50%;} .i_mbpen{background-image:url('../images/content/icon_mbpen.svg');} .i_mblearn{background-image:url('../images/content/icon_mblearn.svg');} .i_mbcou{background-image:url('../images/content/icon_mbcou.svg');} .i_mblove{background-image:url('../images/content/icon_mbove.svg');} .i_mbwish{background-image:url('../images/content/icon_mbwish.svg');} .i_mbrec{background-image:url('../images/content/icon_mbrec.svg');} .i_add{background-image:url('../images/content/icon_add.svg');} .i_del{background-image:url('../images/content/icon_del.svg');} .i_del2{background-image:url('../images/content/icon_del2.svg');} .i_play3{background-image:url('../images/content/icon_play3.svg');} .i_pen{background-image:url('../images/content/icon_pen.svg');} .i_sort_up{background-image:url('../images/content/icon_sort_up.svg');width:15px;height:15px;} .i_sort_down{background-image:url('../images/content/icon_sort_down.svg');width:15px;height:15px;} .i_export{background-image:url('../images/content/icon_export.svg');width:20px;height:20px;} .i_ex{background-image:url('../images/content/icon_ex.svg');width:15px;height:15px;vertical-align:bottom;} .i_send{background-image:url('../images/content/icon_send.svg');} .i_up{background-image:url('../images/content/icon_up.svg');} .i_go{background-image:url('../images/content/icon_triangle.svg');} .i_comfirm{background-image:url('../images/content/icon_comfirm.svg');} .i_intro1{background-image:url('../images/content/icon_intro1.svg');} .i_intro2{background-image:url('../images/content/icon_intro2.svg');} .i_intro3{background-image:url('../images/content/icon_intro3.svg');} .i_intro4{background-image:url('../images/content/icon_intro4.svg');} .i_intro5{background-image:url('../images/content/icon_intro5.svg');} .i_check{background-image:url('../images/content/icon_check_blue.svg');} .i_skill1{background-image:url('../images/content/icon_intro_skill1.svg');} .i_skill2{background-image:url('../images/content/icon_intro_skill2.svg');} .i_skill3{background-image:url('../images/content/icon_intro_skill3.svg');} .i_skill4{background-image:url('../images/content/icon_intro_skill4.svg');} .i_skill5{background-image:url('../images/content/icon_intro_skill5.svg');} .i_sort{background-image:url('../images/content/icon_sort.svg');} .i_system{background-image:url('../images/content/item_qa_sys.svg');} .i_ulearn{background-image:url('../images/content/icon_ulearn.svg');} .i_uteach{background-image:url('../images/content/icon_uteach.svg');} .i_q{background-image:url('../images/content/icon_startup_q.svg');} .i_v{background-image:url('../images/content/icon_startup_v.svg');} .i_t1{background-image:url('../images/content/icon_startup_t1.svg');} .i_t2{background-image:url('../images/content/icon_startup_t2.svg');} .i_t3{background-image:url('../images/content/icon_startup_t3.svg');} .i_t1,.i_t2,.i_t3{background-position:center top;} .i_t1_title{background-image:url('../images/content/icon_startup_t1_title.svg');} .i_t2_title{background-image:url('../images/content/icon_startup_t2_title.svg');} .i_t3_title{background-image:url('../images/content/icon_startup_t3_title.svg');} .i_copy{background-image:url('../images/content/icon_copy.svg');} .i_arr{background-image:url('../images/content/icon_down.svg');} .i_mic{background-image:url('../images/header/icon_mic.svg');} .i_pod{background-image:url('../images/content/icon_micb.svg');} .i_play{background-image:url('../images/content/icon_play.svg');} .i_eye{background-image:url('../images/content/icon_eye.svg');} .i_s1{background-image:url('../images/content/icon_solution1.svg');width:18px !important;} .i_s2{background-image:url('../images/content/icon_solution2.svg');width:18px !important;} .i_s3{background-image:url('../images/content/icon_solution3.svg');width:18px !important;} .i_signup{background-image:url('../images/content/icon_ins_signup.svg');} .i_flag{background:#008eff url('../images/content/icon_ins_flag.svg') no-repeat scroll center;width:38px;height:38px;border-radius:50%;} /*--*/ .h2wrap{display:inline-flex;position:relative;justify-content:center;align-items:center;padding:50px 0 0;} .h2wrap .i_htitle03_chat,.h2wrap .i_htitle05_chat{width:165px !important;height:140px !important;position:absolute;left:108%;top:-20px;} .h2wrap .i_htitle03_chat{top:-35px;} .box01:hover .i_htitle03_chat,.box01:hover .i_htitle05_chat{-webkit-animation:tada 1s both ease-in-out;animation:tada 1s both ease-in-out;} @-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}} /* Button */ .btn{display:inline-flex;justify-content:center;align-items:center;padding:14px 25px 14px 25px;border-radius:5px;position:relative;font-weight:400;white-space:nowrap;border:0;} .btn01{background:var(--color-blue);color:var(--color-white);} .btn01:hover,.btn04:hover,.btn04-2:hover,.btn06:hover,.btn07:hover{opacity:0.8;} .btn02{background:var(--color-lightblue);color:var(--color-blue);} .btn02:hover{background:var(--color-lightblue-hv);} .btn03{background:var(--color-orange);color:var(--color-white);} .btn03:disabled{opacity:.3;cursor:default;} .btn03:hover{background:var(--color-orange-hv);} .btn03-2{border:1px solid var(--color-orange);color:var(--color-orange);background:var(--color-white);} .btn04{background:var(--color-red);color:var(--color-white);} .btn04-2{background:var(--color-red);color:var(--color-white);padding:11px 15px;min-width:220px;display:inline-flex;gap:15px;margin-top:30px;font-weight:700;} .btn05{border:1px solid var(--color-blue);padding:12px 20px;} .btn05:hover{background:var(--color-lightblue);} .btn06{background:var(--color-darkblue);color:var(--color-white);} .btn07{background:var(--color-yellow);color:var(--color-darkblue);} .btn08{background:#dedede;color:var(--color-darkblue);display:inline-flex;align-items:center;} .btn08:hover{background:var(--color-darkblue);color:#fff;} .btn_s{padding:5px 10px !important;font-size:var(--font-size12);gap:5px;line-height:1;} /*--*/ .btn_arr:after{content:'';display:inline-block;background:url('../images/content/icon_arrright.svg') no-repeat scroll center/100% auto;width:20px;height:20px;} .btn_arr:hover::after{transform:translateX(5px);} .btn_disable{background:var(--color-grey2) !important;color:var(--color-grey);cursor:default;} /*--*/ .box_bd .btnarea{position:absolute;right:0;top:-30px;} .list01 + .btnarea{right:50%;transform:translateX(520px);} .box_bd .btnarea .btn{font-size:var(--font-size12);font-weight:400;padding:5px 18px;} /* Banner */ .bnrbox{position:relative;padding:0 0 10px;background:var(--color-lightblue);display:none;max-width:1440px;margin:0 auto;} .bnrbox img{max-width:100%;} .bnrbox:before,.bnrbox:after,.owl-progress{content:'';position:absolute;left:0;bottom:0px;height:10px;width:100%;background:var(--color-yellow);} .owl-progress{left:0;width:0%;background:var(--color-blue);z-index:2;} .owl-progress.ing,.owl-progress.play{animation:progress 7s linear infinite;} .owl-progress.paused{animation-play-state:paused !important;} @keyframes progress{0%{width:0%;}100%{width:100%;}} .scrolldown{position:absolute;right:65px;bottom:25px;z-index:2;transform-origin:right bottom;transform:rotate(90deg);display:none;} .scrolldown a{display:block;position:relative;background:var(--color-yellow);border:5px solid var(--color-blue);border-radius:5px;padding:5px 10px;font-size:var(--font-size12);font-weight:500;display:flex;flex-direction:column;justify-content:center;align-items:center;letter-spacing:normal;} .scrolldown a:before{content:'';display:block;background:url('../images/content/icon_arrdown.svg') no-repeat scroll center;width:70px;height:15px;transform:translateY(3px);} .scrolldown a:hover{background:var(--color-lightblue);} /* MainCont */ .maincont{padding:30px 0;} .bnrbox + .maincont{padding:0;} /* Box01 */ .box01{padding:10px 0;} .box_hd{display:flex;justify-content:center;align-items:center;padding:15px 0 0;} .box_hd .i_icon{width:90px;height:90px;margin:0 10px 0 0;} .box_hd h2.title{font-size:var(--font-size24);color:var(--color-blue);position:relative;} .box_hd h2.title.c_red{color:var(--color-red);} .box_hd h2.title:after{content:'';position:absolute;left:0;bottom:-7px;width:0;height:4px;background:var(--color-yellow);} .box_hd h2.title.c_red:after{background:var(--color-red);} .box_hd.box_hd_lr{justify-content:flex-start;width:1050px;margin:0 auto -20px;} .box01:hover .box_hd h2.title:after{width:100%;} .box_bd{padding:20px 0;position:relative;} .gopath + .box01{padding:0;} .gopath + .box01>.box_hd{padding:10px 0 0;} /* 圖示列表 */ .icontxtlist{max-width:970px;margin:0 auto;} .icontxtlist ul{display:flex;flex-wrap:wrap;} .icontxtlist li{width:18%;margin:10px 1%;padding:20px 15px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;background:var(--color-white);border-radius:10px;border:1px solid var(--color-blue);box-shadow:10px 10px 0 var(--color-blue);} .icontxtlist li h3.title{font-size:var(--font-size16);color:var(--color-blue);padding:10px 0 0;} .icontxtlist p{color:var(--color-darkblue);line-height:1.7;padding:15px 0;} .icontxtlist li[onclick]{cursor:pointer;} .lbox .icontxtlist li{width:185px;} .icontxtlist-2{max-width:none;margin-bottom:30px;} .icontxtlist-2 li{border:1px solid var(--color-darkblue);box-shadow:10px 10px 0 var(--color-darkblue);padding:7px 15px;} .icontxtlist-2 li img{width:auto !important;max-width:100%;height:80px;} .icontxtlist-2 li h3.title{font-size:var(--font-size16) !important;color:var(--color-darkblue);line-height:1.5;padding:10px 0 0;} .icontxtlist.owl06 li{width:auto;margin:10px 10px 10px;} .icontxtlist-3 ul{align-items:flex-end;} .icontxtlist-3 li.biger{padding:40px 10px;background:var(--color-blue);box-shadow:9px 9px 0 #fff,10px 10px 0 var(--color-blue),10px 10px 0 var(--color-blue);} .icontxtlist-3 li.biger h3.title{color:#fff;} .icontxtlist-3 li.biger:hover{background:var(--color-darkblue);} .owl06 .owl-carousel .owl-nav button.owl-prev{left:-45px;} .owl06 .owl-carousel .owl-nav button.owl-next{right:-45px;} /* 商品列表 */ .list01{width:1080px;margin:0 auto;} .list01 ul .owl-stage-outer{display:flex;} .list01>ul,.list01 ul .owl-stage{display:flex;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;} .list01.owl02>ul,.list01.owl02 ul .owl-stage{flex-wrap:nowrap;} .list01 ul .owl-item{display:flex;justify-content:center;flex:1;} .list01>ul>li,.list01 ul .owl-item>li{width:250px;margin:15px auto;background:var(--color-white);border-radius:10px;overflow:hidden;box-shadow:0 4px 5px rgba(0, 99, 178, 0.06);position:relative;display:flex;flex-direction:column;} .list01>ul>li{border:1px solid #E8E8E8;box-shadow:0 4px 5px rgba(0,99,178,0.06);margin:15px 10px;} .list01 .list_txt{display:flex;flex-direction:column;justify-content:space-between;flex:1;margin:23px 10px 15px;} .list01 .list_txt h3.title{min-height:50px;font-size:var(--font-size16);} .list01 .tftitle{font-size:var(--font-size16);} .list01 .price p{font-family:'Noto Sans TC';} .list01 .list_txt h3.title + .licons{padding:0;} .list01 .licons li{margin:2px 0;} .list01 .licons ul.l + .r{top:0;} .list01 .list_txt .txt_t p{padding:5px 0 0;} .list_img{display:flex;justify-content:center;align-items:center;background:var(--color-lightblue);overflow:hidden;} .list_img a{width:100%;} .list_img img{width:100%;} .list01 li:hover .list_img img{transform:scale(1.2);} .list01 li .list_img img,.list01 li:hover .list_img img{transition:all 1.35s ease-in-out;} .list_txt{position:relative;margin:25px 15px 15px;} .prostate{display:inline-flex;justify-content:center;align-items:center;padding:8px;border-radius:5px;color:var(--color-white);min-width:124px;font-size:var(--font-size14);} .list_txt .prostate{position:absolute;left:0;top:-43px;} .c_blue,a.c_blue.on{background:var(--color-blue);} .c_darkblue,a.c_darkblue.on{background:var(--color-darkblue);} .c_orange,a.c_orange.on{background:var(--color-orange);} .c_redbg,a.c_redbg.on{background:var(--color-red);} .c_red{color:var(--color-red) !important;} .list_txt .thead{position:absolute;right:0;top:-67px;width:64px;height:64px;display:flex;justify-content:center;border-radius:50%;overflow:hidden;} .list_txt .thead img{max-width:100%;max-height:100%;} .list_txt h3.title{font-size:var(--font-size20);color:var(--color-darkblue);line-height:1.5;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;} .list_txt h3.title a{color:var(--color-darkblue);} .list_txt h3.title a:hover{color:var(--color-blue);} .list_txt p{padding:10px 0 0;} .list_txt .txt_t p{color:var(--color-grey);font-size:var(--font-size14);line-height:1.7;} .list_txt h3.title + .licons{padding:10px 0 0;} .licons{display:flex;justify-content:space-between;align-items:flex-start;color:var(--color-darkblue);padding:10px 0 0;position:relative;letter-spacing:normal;} .licons ul.l{flex:6;} .licons li{display:flex;align-items:flex-start;flex-wrap:wrap;margin:5px 0;font-size:var(--font-size14);} .licons ul.l .i_icon{margin:0 5px 0 0;width:20px;height:20px;} .licons ul.r{flex:1;display:flex;justify-content:flex-end;} .licons ul.r .i_icon{width:40px;height:40px;} .licons ul.l + .r{position:absolute;right:0;top:5px;} .licons li a{text-decoration:underline;flex:1;}.licons li a:hover{text-decoration:none;} .i_love:hover{animation:jello-horizontal 0.9s both;} @keyframes jello-horizontal{0%{transform:scale3d(1, 1, 1);}30%{transform:scale3d(1.25, 0.75, 1);}40%{transform:scale3d(0.75, 1.25, 1);}50%{transform:scale3d(1.15, 0.85, 1);}65%{transform:scale3d(0.95, 1.05, 1);}75%{transform:scale3d(1.05, 0.95, 1);}100%{transform:scale3d(1, 1, 1);}} .proprice{padding:15px 0 0;display:flex;text-align:right;justify-content:flex-end;align-items:flex-end;gap:10px;} .price{color:var(--color-blue);} .price del{color:var(--color-blue);padding:0 0 5px;display:inline-block;} .price small{font-size:var(--font-size16);display:inline-block;padding:0 0 5px;} .price small .btn{padding:5px 10px;margin:0 0 0 10px;} .price p{font-size:var(--font-size32);font-weight:700;padding:0;font-family:'Roboto',sans-serif;line-height:1.2;} .star{background:url('../images/content/icon_star.svg') no-repeat scroll left center/auto 22px;width:110px;position:relative;color:var(--color-grey);} .star span{background:url('../images/content/icon_star_on.svg') no-repeat scroll left center/auto 22px;display:block;height:22px;} .star p{position:absolute;left:0;top:-25px;padding:0;} .star_v{margin:10px 0 0 !important;float:right;} .star_v p{left:105%;top:-3px;} .class_r .star{margin-bottom:5px;} .starwrap{display:inline-flex;align-items:center;} .starwrap p{padding:0 0 0 5px;font-size:var(--font-size12);} .starwrap p a{display:inline-block;border-bottom:1px solid var(--color-grey);color:var(--color-grey);}.starwrap p a:hover{border-color:#fff;} .impinfo{padding:0 0 5px;} .impinfo p{color:var(--color-red) !important;font-weight:700;padding:0 0 5px;font-size:var(--font-size14);} .clockbox p b{background:#FFE1E1;color:var(--color-red);border-radius:2px;display:inline-block;padding:5px 5px;margin:0 4px 0 8px;} .imp_blue p{color:var(--color-blue) !important;} .imp_blue .clockbox p b{background:var(--color-lightblue);color:var(--color-blue);} .probtn{display:flex;padding:15px 0 5px;min-height:62px;flex-direction:column;} .probtn span{display:flex;align-items:center;color:var(--color-blue);font-size:var(--font-size12);white-space:nowrap;} .probtn .btn{flex:1;padding:10px 25px;font-size:var(--font-size14);margin:15px 0 0;} .class_r .probtn .btn{padding:14px 25px;font-size:var(--font-size16);} .progressbar{background:var(--color-yellow2);display:flex;justify-content:flex-start;align-items:stretch;position:relative;height:25px;margin:10px -15px -15px -15px;overflow:hidden;} .progressbar span{background:var(--color-yellow);} .progressbar span small{position:absolute;left:50%;top:50%;transform:translate(-50%,-56%);font-size:var(--font-size12);color:var(--color-blue);line-height:1;white-space:nowrap;} .progressbar.c_darkblue{background:var(--color-lightblue);} .progressbar.c_darkblue span{background:var(--color-darkblue);} .progressbar.c_darkblue span small{color:var(--color-white);} .done .progressbar.c_darkblue span{background:var(--color-green);} .done .progressbar.c_darkblue span small{color:var(--color-white);} .done .probtn span{color:var(--color-green);} .done .i_people{background-image:url('../images/content/icon_people_g.svg');} .done .prostate{background:var(--color-green);} .star p,.star_v p{display:none;} .progressbar_svg{height:25px;position:relative;margin:5px -15px -15px -15px;} .progressbar_svg svg{width:100%;height:100%;} .progressbar_svg .svgbg{fill:var(--color-lightblue);} .progressbar_svg .fill{fill:var(--color-darkblue);} .progressbar_svg .unfilled-text{fill:var(--color-darkblue);font-size:var(--font-size12);} .progressbar_svg .filled-text{fill:var(--color-white);font-size:var(--font-size12);} .done .progressbar_svg .fill{fill:var(--color-green);} /* BoxYello */ .box_yellow{border-radius:15px;background:var(--color-lightyellow) url('../images/content/item_teacher_bg.svg') no-repeat scroll left bottom;border:10px solid var(--color-yellow);position:relative;padding:35px;margin:50px auto 30px;} .box_yellow .box_hd{position:absolute;left:50%;top:-50px;transform:translateX(-50%);} .box_yellow .box_hd h2.title{background:var(--color-blue);color:var(--color-white);border:0;padding:15px 15px;border-radius:10px;min-width:280px;text-align:center;font-size:var(--font-size24);line-height:1.2;} .box_yellow .box_bd{padding:0;} .box_yellow .owl-carousel .owl-nav button.owl-next{right:-115px;} .box_yellow .owl-carousel .owl-nav button.owl-prev{left:-115px;} /* 師資列表 */ .list02{padding:0 5%;} .list02 ul{display:flex;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;} .list02 li{width:31.33333%;margin:25px 1% 10px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center;} .list02 li em{position:absolute;left:50%;top:-60px;font-size:var(--font-size90);-webkit-text-stroke-width:5px;-webkit-text-stroke-color:var(--color-orange);color:#fff;font-family:'Roboto',sans-serif;font-weight:900;transform:translateX(-125px);} .list02 .list_img{width:210px;height:210px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;} .list02 .list_img p{padding:15px 0 0;font-size:var(--font-size20);color:var(--color-darkblue);font-weight:500;} .list02 .list_txt{margin:10px 15px 0;display:flex;flex-direction:column;align-items:center;color:var(--color-darkblue);} .list02 .list_txt h3.title{overflow:visible;padding:3px 0 0;} .list02 .list_txt h3.title b{position:relative;z-index:2;padding:0 10px;min-width:90px;display:inline-block;} .list02 .list_txt h3.title:after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:20px;background:var(--color-yellow);border-radius:5px;} .list02 .list_txt a{color:var(--color-darkblue);} .list02 .list_txt p{line-height:1.6;} .box_yellow .list02 li{width:98%;} .popout .list02{margin:-25px 0 20px;padding:0;} .popout .list02 .list_txt{margin:15px 0 0;} .popout .list02 .Txt{margin:20px 0 0;width:100%;font-size:var(--font-size14);} .popout .list02 .Txt p{line-height:1.7;} /* BannerTxt */ .list03{display:flex;width:auto;flex:1;margin:15px 0;background:var(--color-white);border-radius:10px;overflow:hidden;box-shadow:0px 4px 5px rgba(0,99,178,0.06);} .list03 .list_img{flex:1;} .list03 .list_txt{flex-basis:400px;position:relative;padding-bottom:120px;margin:20px 20px 15px;} .list03 .list_txt .prostate{position:static;margin:0 0 5px;} .list03 .list_txt h3.title{font-size:var(--font-size36);} .list03 .list_txt .txt_t p{color:var(--color-darkblue);overflow:auto;max-height:200px;} .list03 .list_txt .proprice{position:absolute;left:0;right:0;bottom:0;} .list03 .list_txt .price p{font-family:'Noto Sans TC';} .box_bd .list03{margin:10px 0 40px;} .box_bd .item .list03{margin:10px 0 0;} /* StartUp */ .startupbox{background:var(--color-blue);padding:40px 30% 50px 20px;position:relative;overflow:hidden;} .startupbox h2.title{font-size:var(--font-size66);color:var(--color-white);border:none;position:relative;} .startupbox h2.title:after{content:'';position:absolute;left:0;top:100%;background:url('../images/content/item_startup_arr.svg') no-repeat scroll left center/100% auto;width:100%;height:65px;} .startupbox:before,.startupbox:after{content:'';position:absolute;background:no-repeat scroll left bottom / 100% auto;} .startupbox:before{background-image:url('../images/content/item_startup_lb02.png');width:764px;height:530px;right:0;bottom:-50px;} .startupbox:after{background-image:url('../images/content/item_startup_lb01.png');width:370px;height:480px;right:5%;bottom:20px;} .startupbox .list02{padding:0 3%;} .startupbox .list02 li .list_txt{min-height:120px;} .startupbox .list02 li:nth-of-type(1){transform:translateY(-70px);} .startupbox .list02 li:nth-of-type(2){transform:translateY(100px);margin-bottom:100px;} .startupbox .list02 li:nth-of-type(3){transform:translateY(-100px);} .startupbox .list02 .list_img img{width:auto;} .startupbox .list_txt{color:var(--color-white);} .startupbox .btnarea{right:auto;left:100%;z-index:2;} .startupbox .btnarea .btn{font-size:var(--font-size20);padding:16px 35px;width:270px;} .startupbox .btnarea .btn_arr:after{width:25px;height:25px;} /* StartUpbox2 */ .startupbox2{margin:50px auto 0;} .startupbnr{background:url('../images/content/bg_startupbox2.png') no-repeat scroll center 33%/101% auto;max-width:985px;margin:0 auto;border-radius:10px;padding:20px 30px;border:1px solid rgba(32,54,86,.2);position:relative;overflow:hidden;height:160px;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;color:#fff;} .startupbnr>*{position:relative;z-index:2;} .startupbnr:after{z-index:1;content:'';position:absolute;left:0;top:0;width:70%;height:100%;background:linear-gradient(90deg,#203656 18.14%,rgba(255, 255, 255, 0) 87.71%);} .startupbnr h2.title{font-size:var(--font-size32);} .startupbnr p{font-size:var(--font-size20);padding:13px 0 0;} .startupbnr .btnarea{position:absolute;padding:30px 0 10px;position:absolute;right:20px;bottom:20px;padding:10px 0 0;} .startupbnr .btnarea .btn{font-size:var(--font-size16);padding:5px;width:165px;} .startupbnr .btnarea .btn_arr:after{width:25px;height:25px;} .boxlist{padding:0 0 20px;max-width:785px;margin:50px auto 0;} .boxlist ul{display:flex;justify-content:space-between;align-items:stretch;flex-wrap:wrap;gap:30px 0;position:relative;} .boxlist ul:after{content:'';position:absolute;left:0;top:50%;width:100%;height:1px;background:var(--color-darkblue);} .boxlist li{width:210px;display:flex;justify-content:stretch;align-items:stretch;flex-direction:column;background:#fff;border-radius:10px;padding:40px 15px 15px;position:relative;box-shadow:0 4px 4px rgba(0,0,0,.1);z-index:2;} .boxlist li:before{content:'';position:absolute;left:50%;top:-27px;transform:translateX(-50%);width:55px;height:55px;background:var(--color-darkblue) no-repeat scroll center;border-radius:50%;} .boxlist li:nth-of-type(1)::before{background-image:url('../images/content/icon_startup_n01.svg');} .boxlist li:nth-of-type(2)::before{background-image:url('../images/content/icon_startup_n02.svg');} .boxlist li:nth-of-type(3)::before{background-image:url('../images/content/icon_startup_n03.svg');} .boxlist h3.title{font-size:var(--font-size20);color:var(--color-darkblue);text-align:center;padding:0 0 25px;position:relative;} .boxlist h3.title:after{content:'';position:absolute;width:24px;height:1px;background:var(--color-darkblue);left:50%;bottom:10px;transform:translateX(-50%);} .btxt{display:flex;justify-content:center;flex:1;color:var(--color-darkblue);line-height:1.8;text-align:center;} /* formbox */ .note{color:var(--color-orange);padding:0 0 15px;} .note h3.title{display:flex;justify-content:center;align-items:center;font-size:var(--font-size25);margin:0 0 10px;} .note h3.title .i_icon{width:90px;height:90px;} .note_bk{color:var(--color-darkblue);} .note_bk mark{font-style:normal;color:var(--color-orange);font-weight:normal;background:none;} .tfbar{padding:2px 0 2px;text-align:left;display:flex;justify-content:flex-start;align-items:flex-start;} .tfbar b{flex-basis:100px;padding:13px 18px 0 0;font-weight:normal;color:var(--color-darkblue);display:flex;justify-content:flex-end;} .tfbar b i.imp,.tfcont .imp{font-style:normal;color:var(--color-red) !important;} .tfbar b small.note{padding:0;color:#495867;font-size:var(--font-size12);margin:0 0 0 10px;font-weight:400;} .tfbar .tfcont{flex:1;} .tfbar .tfcont .note{color:#495867;font-size:var(--font-size12);padding:0 0 3px;display:block;} .tfbar .tfcont br + input,.tfbar .tfcont br + select{margin:10px 0 10px;} .tfbar .tfcont.readonly{color:var(--color-darkblue);font-size:var(--font-size14);} .tfbar .tf{background:var(--color-grey2);padding:11px 13px;border-radius:5px;border:0;appearance:none;-webkit-appearance:none;width:100%;margin:5px 0;color:var(--color-darkblue);} .tfbar .tf[type=file]{background-image:url('../images/content/icon_upload.svg');background-position:96% center;background-repeat:no-repeat;padding-right:50px;} .tfbar-2{flex-direction:column;width:100%;align-items:stretch;} .tfbar-2 b{flex-basis:auto;padding:5px 0 0;justify-content:flex-start;} .tfbar-3{flex-direction:column;align-items:stretch;padding:5px 0;} .tfbar-3 b{flex-basis:auto;justify-content:flex-start;padding:0 0 3px;align-items:flex-end;font-weight:700;} .tfbar-3 .tfcont b{display:inline;} .tfbar-3-2{flex-direction:row;gap:10px;align-items:center;} .tfbar-3-3{flex-direction:row;gap:10px;padding:5px 0 5px !important;} .tfbar-3-3>b{flex-basis:140px;} .tfflex{display:flex;gap:10px;} .tfflex>div{display:flex;background:var(--color-grey2);border-radius:5px;position:relative;} .tfflex>div .tf{background:none;margin:0;} .tfflex>div.tfsel .tf:last-of-type{background:url('../images/content/icon_down.svg') no-repeat scroll 85% center/15px auto;cursor:default;width:80px;padding-left:0;} .flex45{width:45%;} .flex55{width:55%;} .seljs{padding:8px 10px;position:absolute;right:0;top:0;width:100%;height:100%;margin:0 !important;z-index:2;opacity:0;border:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;color:transparent;} .seljs option{color:#000;} .formbox small{font-size:var(--font-size14);} .formbox .tfbtns small{padding:5px 0 0;} .ps{display:flex;justify-content:flex-end;padding:2px 0 0;color:var(--color-grey);} .ps a{color:var(--color-grey);text-decoration:underline;} .ps a:hover{color:var(--color-blue);} .ps.red{color:var(--color-orange);justify-content:flex-start;} .ps.left{justify-content:flex-start;color:var(--color-darkblue);} .error{display:flex;justify-content:flex-start;color:var(--color-red);} .tfbar.error b{color:var(--color-red);} .tfbar.error .tf{border:1px solid var(--color-red);} .tfbar+.tfbtns{padding:25px 0 0;} .tfbtns .ps a{color:var(--color-orange);} .tfbtns .ps a:hover{color:var(--color-orange-hv);} .tfbtns .btns{display:flex;justify-content:space-between;gap:10px;} .form_lr{display:flex;width:100%;} .form_l{flex:4;} .form_l .Txt{font-size:var(--font-size14);} .form_l .Txt a{color:var(--color-darkblue) !important;text-decoration:underline;} .form_l .tfbar .tf{margin:7px 0;} .form_r{flex:7;margin-left:20px;} .form_r .tfbtns{margin:10px 0 0;} .tabcont input.tf{max-width:312px;} .tabcont textarea.tf{max-width:720px;} .tabcont .tfbar+.tfbtns{padding-top:65px;} .tabcont .tfbtns .btns{justify-content:center;} .tabcont .tfbtns .btns .btn{min-width:240px;} .tftitle{display:flex;justify-content:space-between;align-items:center;color:var(--color-grey);font-size:var(--font-size20);margin:25px 0 5px;} .tftitle:after{content:'';height:1px;background:#e1e1e1;flex-grow:1;margin:0 0 0 15px;} .tftitle:first-child{margin:0 0 15px;} .tflist li{display:flex;align-items:center;justify-content:flex-start;padding:4px 0;} .tflist li label{min-width:130px;} .tflist li .tf{width:350px;margin:0 0 0 5px;} .tflist li .btn{min-width:146px;margin:0 10px 0 0;padding:8px 15px;font-weight:300;} .tflist li .btn .i_icon{margin:0 5px 0 0 !important;} .tflist li .btn+span{color:var(--color-grey);} .tflist2 li{padding:4px 0 24px;} .cktf{position:relative;display:block;} .cktf .i_icon{position:absolute;right:10px;top:14px;bottom:2px;display:flex;align-items:center;background-size:auto 20px;} .cktf .btn{padding:3px 8px;background:#e8e8e8;color:var(--color-darkblue);} .cktf .btn:hover{background:#c9c9c9;} .box_bd .tfbtns .btns{justify-content:center;width:100%;gap:10px;} .box_bd .tfbtns .btns .btn{min-width:240px;font-size:var(--font-size16);} .box_bd .r_box .tfbtns .btns .btn{min-width:auto;width:auto;margin:0 0 0 10px;flex:1;} .box_bd .form_r .tfbtns .btns{justify-content:flex-end;} .intf{padding:0 25px;} /*--*/ .w300{width:300px !important;} .w50{width:50% !important;padding:0 0 0 5px;} .w70{width:70% !important;padding:0 0 0 5px;} .w70 .tfcont{display:flex;flex-wrap:wrap;justify-content:space-between;} .tfbar .tf_w2{width:19%;}.tfbar .tf_w8{width:79%;}.tfbar .tf_w5{width:49%;} /* 特殊欄位 */ .tfbar .field{display:flex;flex-flow:column-reverse;border-radius:5px;position:relative;background:var(--color-grey2);} .tfbar .field label,.tfbar .field input{transition:all 0.2s;touch-action:manipulation;} .tfbar .field input{background:none;border:0;appearance:none;-webkit-appearance:none;border-radius:0;padding:20px 10px 5px;cursor:text;width:100%;} .tfbar .field input:focus{outline:0;} .tfbar .field label{position:absolute;left:15px;top:12px;color:var(--color-grey);} .tfbar .field input:placeholder-shown + label{cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform-origin:left top;} .tfbar .field input::-webkit-input-placeholder{opacity:0;transition:inherit;}.field input::-moz-placeholder{opacity:0;transition:inherit;} .tfbar .field input:focus::-webkit-input-placeholder{opacity:1;}.field input:focus::-moz-placeholder{opacity:1;} .tfbar .field input:not(:placeholder-shown) + label,.tfbar .field input:focus + label,.tfbar .field03 > label{transform:scale(1);cursor:pointer;top:2px;left:5px;opacity:0.5;font-size:13px;font-weight:500;} .tfbar .field input:-webkit-autofill + label{transform:scale(1);cursor:pointer;top:2px;left:5px;color:#70BDA5;opacity:0.7;} /* Star */ .tfstar{display:flex;flex-direction:row-reverse;justify-content:flex-end;padding:0 !important;} input.star_click{display:none;} label.star_click{float:right;padding:2px;font-size:36px;color:var(--color-yellow);transition:all .2s;line-height:1;} input.star_click:checked ~ label.star_click:before{content:'\f005';color:var(--color-yellow);transition:all .25s;} input.star-5:checked ~ label.star_click:before{color:var(--color-yellow)} input.star-1:checked ~ label.star-1:before{color:var(--color-red);} label.star_click:hover{transform:rotate(-15deg) scale(1.3);} label.star_click:before{content:'\f006';font-family:FontAwesome;} /* 購物車 */ .cartbox{position:fixed;right:0;top:0;width:0%;height:100vh;z-index:999;} .cartbg{position:absolute;left:0;top:0;width:100%;height:100vh;background:rgba(0,0,0,.6);opacity:0;} .cartcont{background:var(--color-white);padding:20px;width:400px;height:100vh;position:absolute;right:0;top:0;z-index:2;display:flex;justify-content:flex-start;align-items:stretch;flex-direction:column;opacity:0;transform:translateX(400px);box-shadow:0 -10px 30px rgba(0,0,0,.5);} .cartclose{position:absolute;right:10px;top:10px;background:var(--color-grey3);justify-content:center;align-items:center;border-radius:50%;width:34px;height:34px;display:none;} .cartcont h2.title{position:relative;display:flex;justify-content:center;align-items:center;width:50%;margin:0 auto 20px;} .cartcont h2.title b{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;} .cartcont h2.title:after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:20px;background:var(--color-yellow);border-radius:5px;} .cartcont ul{flex:1;overflow-y:auto;} .cartcont li{border-bottom:1px solid #eee;padding:0 0 20px;margin:20px 0 0;} .cart_t{display:flex;align-items:flex-start;} .cart_img{flex-basis:130px;margin:0 10px 0 0;background:var(--color-lightblue);} .cart_txt{flex:1;font-weight:500;} .cart_txt a{color:var(--color-darkblue);} .cart_txt a:hover{color:var(--color-blue);} .cartcont .proprice{min-height:auto;padding:10px 0 0;justify-content:space-between;align-items:center;} .cartcont .price p{font-size:var(--font-size14);color:var(--color-darkblue);} .cartcont .tfbtns{padding:20px 0 0;} .cartcont .tfbtns .btn{width:100%;font-size:var(--font-size16);font-weight:400;} .cartcont .tfbtns .btn.prosubtotal{color:var(--color-darkblue);margin:0 0 10px;font-weight:700;} .prosubtotal{background:var(--color-grey2);font-weight:700;color:var(--color-darkblue);} .abtn{background:var(--color-white);border:1px solid var(--color-red);color:var(--color-red);display:inline-flex;padding:3px 10px;border-radius:5px;font-size:var(--font-size12);min-width:50px;justify-content:center;} .abtn:hover{background:var(--color-red);color:var(--color-white);} body.cartfixed{width:100%;height:100vh;overflow:hidden;} body.cartfixed .cartbox{width:100%;} body.cartfixed .cartbg{opacity:1;} body.cartfixed .cartcont{opacity:1;transform:translateX(0px);} .cartcont .cartbox,.cartbg,.cartfixed .cartbg{-webkit-transition:all .35s ease-in-out;-moz-transition:all .35s ease-in-out;-o-transition:all .35s ease-in-out;-ms-transition:all .35s ease-in-out;transition:all .35s ease-in-out;} .cartcont{-webkit-transition:all .55s ease-in-out;-moz-transition:all .55s ease-in-out;-o-transition:all .55s ease-in-out;-ms-transition:all .55s ease-in-out;transition:all .55s ease-in-out;} /* Vido */ .vdobox{position:relative;display:flex;justify-content:space-between;align-items:stretch;} .vdobg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;} .vdobg:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:#203656;opacity:0.8;} .vdobg img{filter:blur(2px);position:absolute;left:50%;top:50%;transform:scale(1.1) translate(-50%,-50%);} .vdomain{display:flex;justify-content:space-between;align-items:stretch;position:relative;z-index:10;flex:1;width:100%;} .vdocont{flex-grow:1;padding:30px 4%;width:70%;} .vdocont h2.title{max-width:100vh;font-size:var(--font-size30);color:var(--color-white);padding:0 0 15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .vdocont .rwdbox{border-radius:15px;overflow:hidden;padding:0;height:530px;} .vdocont .gopath{margin:0 0 10px;width:100%;overflow-x:auto;display:flex;flex-wrap:nowrap;} .vdocont .gopath span{white-space:nowrap;} .vdocont .gopath span,.vdocont .gopath span a{color:var(--color-white);font-weight:300;} .vdocont .gopath span{background-image:url("../images/content/icon_arrow_lr2.svg")} .vdolist_hd{display:none;color:var(--color-white);justify-content:space-between;align-items:center;padding:15px 15px 15px 20px;cursor:pointer;} .vdolist_hd h2.title{display:flex;align-items:center;font-size:var(--font-size16);} .vdolist_hd span{font-size:var(--font-size12);background:var(--color-blue);color:var(--color-white);display:inline-block;padding:5px 10px;border-radius:5px;opacity:0;} .vdolist{flex-basis:30%;background:rgba(0,0,0,.5);overflow-y:auto;max-height:72vh;} .vdolist h3.title{background:rgba(0,0,0,.5);padding:15px 170px 15px 20px;color:var(--color-white);font-weight:700;font-size:var(--font-size20);position:relative;} .vdolist h3.title span{font-size:var(--font-size12);position:absolute;right:20px;top:17px;color:var(--color-grey);} .vdolist li{border-bottom:2px solid rgba(250,250,250,.2);} .vdolist li:last-child{border:none;} .vdolist li a{padding:15px 20px 15px 65px;display:flex;position:relative;justify-content:space-between;align-items:flex-start;color:var(--color-white);font-size:var(--font-size18);} .vdolist li a:hover{background:rgba(0,0,0,.3);} .vdolist li a span{flex:1;padding-right:5px;} .vdolist li a em{flex-basis:80px;text-align:right;font-size:var(--font-size14);padding:2px 0 0;} .vdolist li a:before{content:'';width:25px;height:25px;background-repeat:no-repeat;background-size:100% auto;position:absolute;left:22px;top:16px;} .vdolist li.v-play a:hover:before{transform:translateX(-15px) rotate(-180deg);} .v-ing a:before{background-image:url('../images/content/icon_v-ing.svg');}.v-ing a{color:var(--color-yellow) !important;} .v-play a:before{background-image:url('../images/content/icon_v-play.svg');} .v-ed a:before{background-image:url('../images/content/icon_v-ed.svg');} /* TabBox */ .tabbox{position:relative;} .tab_hd{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:5px solid var(--color-yellow);overflow-x:auto;} .tab_hd ul{display:flex;} .tab_hd ul li{padding:0 8px 0 0;} .tab_hd ul li a{display:block;padding:19px;background:var(--color-white);color:var(--color-darkblue);border-radius:5px 5px 0 0;font-weight:700;min-width:130px;text-align:center;font-size:var(--font-size16);white-space:nowrap;height:60px;} .tab_hd ul li a:hover{background:var(--color-lightblue);} .tab_hd ul li.on a{background:var(--color-yellow);} .tab_hd .r{padding:0 0 5px;} .tab_bd{padding:30px;background:var(--color-white);box-shadow:0px 4px 5px rgba(0,99,178,0.06);overflow:hidden;} .tabcont>.r{position:absolute;right:0;top:0;} .tabbox2 .tab_hd{justify-content:center;align-items:center;border-bottom:none;} .tabbox2 .tab_hd ul li{min-width:100px;text-align:center;padding:0;} .tabbox2 .tab_hd ul li a{display:inline-block;padding:0 10px 10px;height:auto;min-width:auto;position:relative;font-size:var(--font-size24);} .tabbox2 .tab_hd ul li a:after{content:'';position:absolute;left:0;bottom:5px;width:100%;height:20px;background:var(--color-yellow);border-radius:3px;z-index:-1;} .tabbox2 .tab_hd ul li a:hover,.tabbox2 .tab_hd ul li.on a{background:none;color:var(--color-red);} .tabbox2 .tab_bd{background:none;box-shadow:none;padding:30px 30px 0;} /* 問與答 */ .msglist .btnarea{justify-content:flex-end;display:flex;} .msglist .btnarea .btn{min-width:200px;} .msglist ul{display:flex;flex-direction:column;} .msglist li{flex:1;padding:10px 0;display:flex;align-items:center;} .msglist li .chatbox{padding:15px 20px;display:inline-flex;flex-direction:column;max-width:70%;border-radius:10px;color:var(--color-darkblue);position:relative;line-height:1.5;} .msglist li .chatbox p{padding:5px 0;} .msglist li .chatbox:before{content:'';width:0;height:0;border-style:solid;border-width:15px 20px 15px 0;border-color:transparent var(--color-grey2) transparent transparent;position:absolute;left:-20px;top:50%;transform:translateY(-50%);} .msglist li:before{content:'';display:block;background-repeat:no-repeat;background-position:center;background-size:100% auto;width:60px;height:70px;} .msglist li.me .chatbox{background:var(--color-grey2);} .msglist li.me:before{background-image:url('../images/content/item_qa_me.svg');margin:0 30px 0 0;} .msglist li.system{flex-direction:row-reverse;} .msglist li.system:before{background-image:url('../images/content/item_qa_sys.svg');margin:0 0 0 30px;} .msglist li.system .chatbox{background:var(--color-yellow2);} .msglist li.system .chatbox:before{border-color:transparent var(--color-yellow2) transparent transparent;transform:scaleX(-1) translateY(-50%);;left:auto;right:-20px;} .nodata{padding:50px 20px;display:flex;justify-content:center;font-weight:500;color:var(--color-darkblue);} /* 沒有資料 */ .nodata{min-height:calc(100vh - 495px);} /* 課程介紹 */ .lrbox{display:flex;justify-content:flex-start;align-items:flex-start;position:relative;z-index:2;} .lrbox>div:last-child{margin-left:20px;} .w30{flex:5;}.w70{flex:13;} .lrbox + .articlebox{padding-top:20px;} .formbox_icon .tfbar{padding:10px 0;} .formbox_icon .tfbar b{flex-basis:135px;align-items:center;padding:5px 5px 0 0;justify-content:flex-start;} .formbox_icon .tfbar b .i_icon{width:38px;height:38px;margin:0 14px 0 0;} .formbox_icon .tfbar-2 b{flex-basis:auto;} .articlebox{padding:0 0 10px;position:relative;} .articlebox h3.title{font-size:1em;} .articlebox .Txt{color:var(--color-grey);} .article_bg{padding:10px 0 20px;margin:0 0 20px;} .article_bg:before,.article_bg:after{content:'';position:absolute;left:-30px;right:-30px;background:var(--color-grey2);} .article_bg:before{top:10px;height:50%;border-radius:20px;transform-origin:right bottom;transform:skewY(-5deg);} .article_bg:after{bottom:0;height:70%;} .article_bg .lrbox{align-items:flex-start;} .article_bg + .Txt{margin:-30px -30px -40px;} .article_bg .w30{flex:5;}.article_bg .w70{flex:12;} .title_b{position:relative;display:inline-flex;margin:0 0 15px;} .title_b b{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-end;padding:0 10px;font-size:var(--font-size20);min-width:98px;color:var(--color-darkblue);} .title_b:after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:20px;background:var(--color-yellow);border-radius:5px;} .Txt .txtlist ul{padding:0;margin:0;} .Txt .txtlist li{display:flex;margin:12px 0;} .Txt .txtlist li p{padding:0;flex:1;padding:0 0 10px;border-bottom:1px solid #e8e8e8;} .Txt .txtlist li .i_icon{width:30px;margin:0 7px 0 0;} .skillist{display:flex;justify-content:center;align-items:flex-start;padding:50px 0 30px;} .skillist h3.title{font-size:var(--font-size16);} .skillist ul{width:35%;padding:0 1%;} .skillist ul:last-child{width:45%;} .skillist li{position:relative;padding-left:70px;margin:50px 0 0;} .skillist .i_icon{width:50px;height:50px;position:absolute;left:0;top:7px;} .skillitems{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;} .skillitems span{width:31.3%;display:block;padding:7px;text-align:center;background:var(--color-blue);color:var(--color-white);margin:3px 1%;font-size:var(--font-size12);white-space:nowrap;} /* 感謝函 */ .pathtitle{padding:30px 0;position:relative;} .bg_blue{background:var(--color-darkblue) url('../images/content/bg_pathtitle.svg') repeat scroll left top;} .bg_blue:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:8px;background:linear-gradient(270deg, #C8AE6C 22.22%, #E4D089 39.29%);} .bg_blue .gopath span,.bg_blue .gopath span a{color:var(--color-white);} .bg_blue .gopath span{background-image:url('../images/content/icon_arrow_lr2.svg');} .bg_blue h2.title{background:linear-gradient(90deg, #E4CF88 70.29%, #AA8B4E 120.37%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-fill-color:transparent;font-size:var(--font-size40);padding:20px 0 0;display:inline-flex;} .bg_white{background:var(--color-white);margin:5px 0 0;padding:25px 0 15px;} .bg_white{background:#fff;flex-direction:column;justify-content:flex-start;align-items:flex-start;} .bg_white div.title{display:flex;justify-content:flex-start;align-items:center;padding:8px 0 20px;} .bg_white div.title h2.title{font-size:var(--font-size32);color:var(--color-blue);position:relative;} .bg_white div.title .i_icon{width:90px;height:70px;margin:0 10px 0 0;} .bg_white div.title h2.title.c_red{color:var(--color-red);} .bg_white h2.title:after{content:'';position:absolute;left:-5px;right:-5px;bottom:-8px;height:4px;background:var(--color-yellow);} .bg_white h2.title.c_red:after{background:var(--color-red);} /* Box_hd 選單 與 篩選 */ .hdnav{display:flex;justify-content:space-between;width:100%;align-items:center;min-height:36px;} .hdnav p a{text-decoration:underline;}.hdnav p a:hover{text-decoration:none;} .hdnav .l{flex:1;margin-right:50px;overflow-x:auto;} .hdnav ul{display:flex;flex-wrap:nowrap;} .hdnav li a{color:var(--color-grey);display:flex;padding:5px 12px;justify-content:flex-start;align-items:center;white-space:nowrap;} .hdnav li a:before{content:'';display:block;width:8px;height:8px;background:var(--color-darkblue);border-radius:50%;margin:0 5px 0 0;display:none;} .hdnav li a:hover{color:var(--color-darkblue);} .hdnav li.on a{color:var(--color-darkblue);font-weight:700;} .hdnav li.on a:before{display:block;} .sort{flex-basis:250px;border:1px solid #8F9BAD;border-radius:5px;padding:0 5px 0 10px;display:flex;justify-content:flex-start;align-items:center;background:var(--color-white);} .sort .i_icon{width:20px;height:20px;margin:0;} .sort select.seltype{margin:0;background-color:transparent;outline:none;border-radius:0;padding:5px 30px 5px 10px;} .sort select.seltype:focus{background-color:transparent;} .listtags{padding:10px;display:flex;justify-content:flex-start;align-items:center;} .listtags a{display:block;padding:4px 10px;background:none;border-radius:4px;margin:0 10px 0 5px;min-width:90px;text-align:center;font-size:var(--font-size14);} a.c_orange{color:var(--color-orange);border:1px solid var(--color-orange);} a.c_blue{color:var(--color-blue);border:1px solid var(--color-blue);} a.c_darkblue{color:var(--color-darkblue);border:1px solid var(--color-darkblue);} a.c_orange.on,a.c_blue.on,a.c_darkblue.on{color:var(--color-white);} /* 感謝函 */ .paperbox{width:1000px;margin:0 auto;padding:35px 0;} .paperbox .btnarea{justify-content:flex-end;display:flex;padding:0 0 10px;} .paperbox .btnarea .btn01{background:var(--color-darkblue);padding:10px 25px;min-width:110px;} .paperbox .owl-carousel .owl-stage-outer{overflow:visible;} .paperbox .owl-item img{transform-origin:right center;} .paperbox .owl-item.active + .owl-item img{transform-origin:left center;} .paperbox img,.paperbox .active img{transition:all .35s ease-in-out;transform-origin:center;} .paperbox img{transform:scale(.7);} .paperbox .active img{transform:scale(1);} /* 文章頁 */ .txtbox{color:var(--color-darkblue);max-width:85%;margin:0 auto;min-height:calc(100vh - 535px);} .Txt .imp,.imp{color:var(--color-red) !important;font-weight:700;} .Txt a.imp{text-decoration:underline;} .Txt a.imp:hover{text-decoration:none;color:var(--color-red) !important;} /* Notebox */ .notebox .fixedarea{background:var(--color-white);padding:15px 20px;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,0.06);width:1000px;display:flex;justify-content:flex-start;align-items:center;margin:30px auto 20px;} .notebox p{display:flex;justify-content:flex-start;align-items:center;color:var(--color-darkblue);letter-spacing:0.05em;} .notebox p .i_system{width:60px;height:70px;margin-right:10px;} .notebox p mark{font-size:var(--font-size20);background:none;font-style:normal;font-weight:700;color:var(--color-darkblue);} .notebox .btn{padding:7px 25px;margin:2px 14px;font-weight:400;} .notebox .btn .i_icon{width:40px;height:35px;margin:0 10px 0 0;} .notebox.fixed{height:120px;} .notebox.fixed .fixedarea{position:fixed;top:67px;left:50%;transform:translateX(-50%);z-index:10;margin:0;} /* 創業GO */ .flexslider{display:flex;width:100%;padding:0 0 13px;} .fleximg,.fleximg img,.flextxt,.flextxt h3.title,.flextxt p{transition:0.7s;} .fleximg{flex:1;overflow:hidden;margin:0 .5%;border-radius:10px;position:relative;background:var(--color-grey3);} .fleximg img{height:475px;-o-object-fit:cover;object-fit:cover;transform:translateX(-20%);} .fleximg .flextxt{position:absolute;left:0;bottom:0;width:100%;background:linear-gradient(-180deg, rgba(0,0,0,0), rgba(0,0,0,.8));color:var(--color-white);padding:15px;} .fleximg .flextxt h3.title{font-size:var(--font-size16);position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;} .fleximg .flextxt p{opacity:0;} .fleximg:hover{flex:1 1 25%;} .fleximg:hover .flextxt{bottom:0px !important;} .fleximg:hover .flextxt h3.title{font-size:var(--font-size25);top:-25px;left:15px;transform:translateX(0%);} .fleximg:hover .flextxt p{opacity:1;} /* BoxBlue */ .box_blue{background:var(--color-darkblue);color:var(--color-white);padding:20px;border-radius:10px;font-size:var(--font-size20);text-align:center;margin:0 0 15px;} .box_blue br{display:none;} /* 底線 */ .bor_b{border-bottom:1px solid #e8e8e8;padding-bottom:50px;} /* 創業GO內容 */ .box03{background-color:var(--color-white);margin:15px 0 30px;border-radius:10px;overflow:hidden;box-shadow:0px 4px 5px rgb(0 99 178 / 6%);} .box03>div{margin:0 50px;} .box03 .box02{box-shadow:none;} .box03 .box_hd h2.title{font-size:var(--font-size32) !important;} .quote{text-align:center;padding:60px 0;} .quote h3.title{font-size:var(--font-size24);color:var(--color-grey3);font-weight:400;line-height:1.7;padding:10px 0;display:flex;justify-content:center;flex-direction:column;align-items:center;} .quote h3.title span{position:relative;display:block;z-index:1;} .quote h3.title span:before{content:'';position:absolute;left:-13px;right:-13px;bottom:0;height:20px;z-index:-1;background:var(--color-yellow);border-radius:5px;} .quote p{color:var(--color-grey);padding:20px 0 0;} .txtlr{display:flex;justify-content:space-between;align-items:flex-start;padding:70px 0;} .txt_l{padding:3% 50px 3% 0;flex:1;} .txt_l .Txt b{color:var(--color-darkblue);} .txt_l .Txt p{line-height:2;padding:13px 0;} .txt_l h3.title{font-size:var(--font-size36);padding:0 0 10px;color:var(--color-darkblue);} .txt_r{text-align:center;max-width:55%;} .txt_r img{max-width:100%;border-radius:8px;} .txtlr.lr_reverse{flex-direction:row-reverse;padding-top:10px;} .txtlr.lr_reverse .txt_l{padding:3% 0 3% 50px;} .title_bor{-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--color-grey3);background:none;font-style:normal;color:#fff !important;text-shadow:3px 0px 0px var(--color-grey3);letter-spacing:.1em;font-weight:900;} .qv li{display:flex;justify-content:flex-start;align-items:center;border-radius:30px;margin:3% 0;font-weight:500;background:var(--color-lightblue);} .qv li .i_icon{width:60px;height:60px;border-radius:50%;background-size:70%;margin:0 10px 0 0;} .qv li p{flex:1;font-weight:700;color:var(--color-darkblue);} .qlist .i_icon{background-color:#e8e8e8;} .vlist .title_bor{-webkit-text-stroke-color:var(--color-orange);text-shadow:3px 0px 0px var(--color-orange);} .vlist li{background:var(--color-yellow2);} .vlist .i_icon{background-color:var(--color-orange);} /* Box Lightblue */ .box_lightblue{background:var(--color-lightblue) !important;border:4px solid var(--color-blue);padding:20px;margin:0 0 20px !important;} .list02-2{padding:0;} .list02-2 li{width:23%;margin:0 1% 15px;} .list02-2 .list_img{border-radius:0;background:none;} .list02-2 .list_txt h3.title:after{display:none;} .list02-2 .list_txt p{color:var(--color-grey3);line-height:1.8;} .note_big{font-size:var(--font-size36);color:var(--color-blue);padding:40px 20px 20px;text-align:center;line-height:1.6;} .box03 .box02.box_lightblue{border-radius:0;} .box03 .box02.box_lightblue .box_hd{padding:30px 0 50px;} .box03 .box02 .box_hd h2.title:after{left:-15px;right:-15px;width:auto;} /* 師資 */ .list04>ul>li{display:flex;justify-content:space-between;align-items:stretch;border:1px solid #e8e8e8;padding:36px 24px 31px 36px;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,0.06);margin:0 0 20px;} .list04 .owl-carousel{display:block;} .list_l{flex-basis:210px;} .list_l .list_img{width:185px;height:185px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column;margin:0 auto;} .list_l .list_txt{margin:20px 0 0;text-align:center;color:var(--color-darkblue);} .list_r{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;margin:0 0 0 60px;} .list_r .tinfo{display:flex;justify-content:flex-start;align-items:flex-start;} .tinfo{color:var(--color-grey3);} .tinfo ul{min-width:220px;padding:0 0 20px;} .tinfo li.tinfo_title{font-size:var(--font-size20);color:var(--color-darkblue);padding:0 0 5px;font-weight:700;} .tinfo li:not(.tinfo_title){padding:0 0 0 15px;position:relative;margin:8px 0;} .tinfo li:not(.tinfo_title)::before{content:'';position:absolute;left:0;top:9px;width:3px;height:3px;border-radius:50%;background:var(--color-grey3);} .tbtns{display:flex;justify-content:flex-end;} .tbtns .btn{margin:0 0 0 10px;padding:8px 20px;} .list_r .tbtns .btn{font-size:var(--font-size14);padding:5px 12px;margin:0 0 0 24px;font-weight:400;} .list_r .tbtns .btn .i_icon{margin:0 5px 0 0;} /* 步驟 */ .steplist{padding:0 0 50px;} .steplist ul{display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;color:var(--color-blue);font-weight:700;} .steplist li{display:flex;justify-content:flex-start;align-items:center;background:var(--color-grey2);padding:17px 25px;border-radius:10px;margin:0 15px 20px 0;position:relative;} .steplist li em{width:60px;height:60px;display:flex;justify-content:center;align-items:center;background:var(--color-blue);color:var(--color-white);border-radius:50%;margin:0 17px 0 0;font-size:var(--font-size30);font-weight:700;} .steplist li p{flex:1;} .steplist li::after{display:none;content:'';position:absolute;left:100%;top:30px;width:100px;height:25px;background:url('../images/content/icon_arrow_step.svg') no-repeat scroll right center;margin-left:25px;} .steplist li:nth-of-type(odd){margin-right:150px;} .steplist li:nth-of-type(odd)::after{display:block;} /* 預約 */ .contactbox{background:url('../images/content/img/img_contact.jpg') no-repeat scroll center/cover;margin:0 !important;padding:30px 50px;color:var(--color-white);display:flex;justify-content:space-between;align-items:center;} .contactbox .ps{color:var(--color-white);display:inline;} .contactbox .ps a{color:var(--color-yellow);} .contactbox .tfbar b{color:var(--color-white);} .ct_l{font-size:var(--font-size64);color:rgba(250,250,250,.8);width:450px;} .ct_r{width:410px;} .ct_r .btn{width:100%;margin:0 !important;font-size:var(--font-size16) !important;} /* contact */ .pos_contact{position:fixed;right:20px;bottom:20px;z-index:40;} /* 導師介紹-左 */ .mbbox{display:flex;align-items:stretch;justify-content:space-between;padding:15px 0 20px;} .mbbox .brnbox{width:73%;display: flex;align-items: center;justify-content: center;background:var(--color-white);border-radius: 10px;} .mbbox .brnbox .imgbox{border-radius:10px;overflow:hidden;} .mbbox .brnbox .imgbox img{max-width:100%;} .mb_l{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:stretch;background:var(--color-white);margin:0 15px 0 0;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,.06);overflow:hidden;} .mb_l .list_img{width:185px;height:185px;border-radius:50%;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column;} .mb_l .list_txt{margin:15px 0 0;} .mb_l .hdbox{position: relative;flex-direction: column;display:flex;align-items: center;justify-content: flex-start;width:100%;padding:10px 15px;text-align:center;} .mb_l .hdbox .btn{background:var(--color-yellow);color:var(--color-darkblue);padding:8px 15px;font-size:var(--font-size12);margin:2px 0;min-width:120px;} .mb_l .hdbox .btn:hover{background:#fdde5e;} .mb_l .bdbox{width: 100%;} .lnav{border-bottom:1px solid #f4f4f4;} .lnav ul{display: flex;flex-direction: column;align-items:stretch;justify-content: space-between;flex: 1;} .lnav .i_icon{width:25px;margin: 0 8px 0 0;background-position:center bottom;} .lnav a{padding:12px 5px;width: 100%;text-align:center;color: var(--color-darkblue);display: flex;align-items: center;justify-content: center;border-top: 1px solid #f4f4f4;flex: 1;} .lnav a:hover,.lnav li.on a{background-color:var(--color-blue);color:#fff;} .lnav a:hover .i_icon,.lnav-orange li.on .i_icon{background-position:center top;} .lnav-orange a:hover,.lnav-orange li.on a{background-color:var(--color-orange);} .mb_l .tinfo{padding:30px;} .mb_img{position:relative;margin:0 0 15px;} .mb_img span{width:95px; height:95px; border-radius: 50%; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column;margin: 0 auto;} .mb_img img{max-width:100%;} .mb_img .i_icon{position:absolute;right:0;bottom:0;} .mb_img:hover .i_icon{background-color:var(--color-darkblue);} .mb_basic{display:flex;align-items:center;gap:5px;} .mb_basic ul{display:flex;align-items:center;transform:translateY(2px);gap:3px;} .mb_basic ul li a{text-decoration:underline;color:var(--color-darkblue);font-size:var(--font-size12);display:block;} /* 導師介紹-右 */ .mb_r{width:71%;background:var(--color-white);border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,.06);overflow:hidden;display:flex;justify-content:flex-start;align-items:stretch;padding:20px;} .mb_main{flex:1;display:flex;flex-direction:column;} .mb_main.bor_b{border-bottom:4px solid var(--color-orange);padding:0;} .mb_main .box_hd{justify-content:flex-start;border-bottom:4px solid var(--color-orange);padding:0 0 5px;} .mb_main .box_hd .i_icon{width:40px;height:40px;} .mb_main .box_hd h2.title{font-size: var(--font-size20);color: var(--color-orange);} .mb_main .Txt{padding:0 3%;} .Txt li::marker{font-family:Arial,Helvetica,sans-serif;} .mb_main_r{margin-left:20px;width:40%;padding:50px 0 0;text-align:center;} .mb_main_r img{max-width:100%;} .list03-2{padding:15px;border:1px solid #e8e8e8;margin:0 0 15px 0 !important;} .list03-2 .list_img{border-radius:10px;} .list03-2 .list_txt{margin:0 0 0 20px;padding:50px 0 0;flex-basis:56%;} .list03-2 .list_txt .prostate{position:absolute;left:auto;right:0;top:0;} .list03-2 .list_txt h3.title{font-size:var(--font-size20);} .list03-2 .list_txt .txt_t p{color:var(--color-grey3);} .subinfo{color:var(--color-grey);font-size:var(--font-size14);padding:10px 0 0;} .mb_main .txtbox{max-width:none;padding:15px;display:flex;flex-direction:column;flex:1;} .mb_main .txtbox .txt_bd{flex:1;display:flex;flex-direction:column;justify-content:space-between;} .prostate + span{position:relative;top:10px;} .txt_hd .subinfo{padding:0 0 0 10px;} .txt_hd h3.title{font-size:var(--font-size32);margin:0 0 15px;} .txt_hd .subinfo + h3.title{margin:15px 0;} .txt_bd .Txt{padding:0;} .txt_bd .Txt img{border-radius:5px;} .txtbox .btnarea{padding:30px 0 0;display:flex;justify-content:center;position:static;} .txtbox .btnarea .btn{min-width:300px;font-size:var(--font-size16);padding:14px 18px;} .previewbox{display:flex;justify-content:space-between;align-items:stretch;padding:30px 0 0;} .previewbox a{border:1px solid #e8e8e8;padding:15px 15px;border-radius:5px;display:block;max-width:320px;color:var(--color-darkblue);font-size:var(--font-size14);font-weight:700;margin:5px 0 0;max-width:49%;flex:1;} .previewbox a span{padding:0 0 5px;color:var(--color-grey);display:block;} .previewbox a:hover{border-color:var(--color-darkblue);} .classnews-2 li{padding:20px 20px 15px !important;border:1px solid #e8e8e8 !important;margin:0 0 15px 0 !important;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,.06);} .rwdbox.pdf{padding-bottom:60.25%;border-bottom:2px solid #e8e8e8;margin:10px 0;} /* Loading */ body.fixed{overflow:hidden;} .loadimg{background:var(--color-white);width:190px;height:190px;border-radius:50%;display:flex;justify-content:center;align-items:center;box-shadow:0 5px 10px rgba(0,0,0,.5);position:relative;} .loadimg:before,.loadimg:after{content:'';display:block;width:190px;height:190px;z-index:2;position:absolute;left:0;top:0;border-radius:50%;background:no-repeat scroll center/100% auto;} .loadimg:before{background-image:url('../images/content/item_loading1-1.svg');opacity:1;} .loadimg:after{background-image:url('../images/content/item_loading1-2.svg');opacity:0;} .loadingbox p{color:var(--color-white);font-size:var(--font-size30);font-weight:700;margin:15px 0 0;} .loadingbox p em{font-weight:700;} .circle-progress-value{stroke-width:5px;stroke:#F08102;} .circle-progress-circle{stroke-width:5px;stroke:#FED62F;} .circle-progress-text{stroke:#fff;fill:#fff;} .progress{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;} .progress svg{width:100%;height:100%;overflow:visible;} .loadimg:before{-webkit-animation:loadimgout .5s ease-in-out 2s forwards;animation:loadimgout .5s ease-in-out 2s forwards;} .loadimg:after{-webkit-animation:loadimgin .5s ease-in-out 2.2s forwards;animation:loadimgin .5s ease-in-out 2.2s forwards;} body:not(.fixed) .loadimg:before{opacity:0;} body:not(.fixed) .loadimg:after{opacity:1;-webkit-animation:fadeoutup 1s ease-in-out .1s forwards;animation:fadeoutup 1s ease-in-out .1s forwards;} body:not(.fixed) .loadimg{-webkit-animation:fadeoutup 1s ease-in-out forwards;animation:fadeoutup 1s ease-in-out forwards;} body:not(.fixed) .loadingbox{-webkit-animation:fadeoutup 1s ease-in-out .2s forwards;animation:fadeoutup 1s ease-in-out .2s forwards;} body:not(.fixed) .content--intro{background-image:none;} @-webkit-keyframes loadimgout{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:0;}} @keyframes loadimgout{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:1;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:0;}} @-webkit-keyframes loadimgin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:0;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1;}} @keyframes loadimgin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);opacity:0;}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:1;}} @-webkit-keyframes fadeoutup{40%{-webkit-transform:translateY(15%);transform:translateY(15%);}to{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0;}} @keyframes fadeoutup{40%{-webkit-transform:translateY(15%);transform:translateY(15%);}to{-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0;}} /* 團體課程 */ .box01.box_blue{background:var(--color-darkblue);color:var(--color-white);min-height:calc(100vh - 404px);padding:20px 35px 35px;margin:15px 0 30px;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,.06);display:flex;justify-content:center;align-items:center;font-size:initial;} .matchinfo p{line-height:1.6;} .matchinfo h2.title{display:flex;flex-direction:column;padding:0 0 20px;font-size:var(--font-size25);} .matchinfo h2.title .i_htitle08{width:90px;height:90px;margin:0 auto;} .tfbar_s{justify-content:center;margin:20px 0 0;} .tfbar_s .tfcont{flex:none;} .tfbar_s .tf{text-align:center;font-weight:700;} .formbox .tfbar_s{margin:0;} .formbox .tfbar_s .tf{background:var(--color-lightblue);height:45px !important;} .formbox .tfbar_s .tf + .i_icon{top:15px;} .matchinfo .btnarea{padding:30px 0 0;} .matchinfo .btnarea .btn{min-width:300px;} .loadcircle{overflow:hidden;width:240px;height:240px;border-radius:50%;position:relative;margin:30px auto 0;} .loadcircle div{border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;z-index:20;} .loadcircle div:after,.loadcircle div div div:before{content:'';position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background:var(--color-darkblue);transform-origin:center;z-index:-1;} .loadcircle div div{top:50%;left:50%;-webkit-transform:translate(-51%,-50%);transform:translate(-51%,-50%);} .circle1{width:100%;height:100%;border:5px solid #1B5F70;} .circle2{width:200px;height:200px;border:5px solid #2a93ae;} .circle3{width:140px;height:140px;border:5px solid #3bb2d0;-webkit-animation:textColour 1s alternate linear infinite;animation:textColour 1s alternate linear infinite;font-size:var(--font-size14);} .circle1:after{width:100px;height:120%;-webkit-animation:outerRotate2 30s infinite linear;animation:outerRotate2 30s infinite linear;} .circle2:after{width:100px;height:106%;-webkit-animation:outerRotate1 15s infinite linear;animation:outerRotate1 15s infinite linear;} .circle3:before{width:110%;height:40px;-webkit-animation:outerRotate2 3.5s infinite linear;animation:outerRotate2 3.5s infinite linear;} .circle3:after{width:40px;height:110%;-webkit-animation:outerRotate1 8s infinite linear;animation:outerRotate1 8s infinite linear;} @-webkit-keyframes outerRotate1{0%{transform:translate(-50%, -50%) rotate(0);}100%{transform:translate(-50%, -50%) rotate(360deg);}} @keyframes outerRotate1{100%{transform:translate(-50%, -50%) rotate(360deg);}} @-webkit-keyframes outerRotate2{0%{transform:translate(-50%, -50%) rotate(0);}100% {transform:translate(-50%, -50%) rotate(-360deg);}} @keyframes outerRotate2{0%{transform:translate(-50%, -50%) rotate(0);}100%{transform:translate(-50%, -50%) rotate(-360deg);}} @-webkit-keyframes textColour{0%{color:#fff;}100%{color:#3BB2D0;}} @keyframes textColour{0%{color:#fff;}100%{color:#3BB2D0;}} #match2{opacity:0;} #match2{animation:fadeInUp .5s .5s linear forwards} .formbox_s{max-width:300px;margin:0 auto;} .formbox_s .note{letter-spacing:normal;color:var(--color-blue);line-height:1.8;} .formbox_s .tfbar b{flex-basis:130px;} .formbox_s .btns{flex-direction:column;} .formbox.formbox_s .btns .btn{margin:5px 0 0 !important;font-size:var(--font-size16);} #clock{display:block;height:35px;} /* 消息大圖 */ .newsbnrbox img{border-radius:10px;} .newsbnrbox .owl01-2 .owl-carousel .owl-nav button{top:50%;transform:translateY(-50%);} .txtbox2{background-color:var(--color-white);padding:20px 35px 35px;margin:15px 0 30px;border-radius:10px;overflow:hidden;box-shadow:0px 4px 5px rgba(0,99,178,0.06);max-width:none;margin:0;} .txt_img{position:relative;margin:-20px -35px 30px;} .txt_img img{width:100%;} .linetitle{display:flex;justify-content:center;align-items:center;width:100%;} .linetitle:before,.linetitle:after{content:'';display:block;flex:1;height:2px;background-color:var(--color-blue);border-radius:10px;margin:0 15px;} /* 最新消息 */ .list03-3{background:none;margin:0 0 0 !important;box-shadow:none;} .list03-3 ul{display:flex;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;margin:0 -1%;} .list03-3 li{background:var(--color-white);width:31.33333%;margin:15px 1% 15px;box-shadow:0px 4px 5px rgba(0,99,178,0.06);border-radius:5px;overflow:hidden;} .list03-3 .list_txt{margin:0;padding:20px;} .list03-3 .list_txt h3.title{font-size:var(--font-size20) !important;} .list03-3 .list_txt h3.title a{display:block;} .list03-3 .list_txt .subinfo{padding:0 0 10px;} .list03-3 .list_txt .prostate{margin:0 10px 0 0;} .list03-3 li:hover .list_img img{transform:scale(1.2);} .list03-3 li .list_img img{transition:all 1.35s ease-in-out;} .list03-3 .prostate{min-width:113px;} .row2 li{width:48%;} .newsbnrbox ~ .box01{padding:20px 0 0;} .newsbnrbox ~ .box01 .box_bd{padding:20px 0 0;} /* box01_2 */ .box01_2{padding:0 !important;} .box01_2 .box_bd{background:#fff;padding:30px 0;} .box01_2 .box_hd h2.title{color:var(--color-darkblue);} .box01_2 .box_hd h2.title:after{background:var(--color-darkblue);} .imglist{margin:20px 0;} .imglist .owl-stage,.imglist .owl-stage .owl-item{display:flex;align-items:stretch;} .imglist .item{display:flex;align-items:center;gap:25px;} .imglist ul{display:flex;justify-content:center;flex-wrap:nowrap;} .imglist a{display:inline-block;} .imglist img{max-width:250px !important;max-height:150px;display:inline-block;} .str_wrap{overflow:hidden;width:100%;-moz-user-select:none;-khtml-user-select:none;user-select:none;white-space:nowrap} .str_move{white-space:nowrap;position:absolute;top:0;left:0;cursor:move;height:130px !important;display:flex;gap:25px;align-items:center;flex-wrap:nowrap;} .str_move_clone{display:inline-block;vertical-align:top;position:absolute;left:100%;top:0;height:130px !important;display:flex;gap:25px;align-items:center;flex-wrap:nowrap;} .str_vertical .str_move_clone{left:0;top:100%} .str_down .str_move_clone{left:0;bottom:100%} .str_vertical .str_move,.str_down .str_move{white-space:normal;width:100%} .str_static .str_move,.no_drag .str_move,.noStop .str_move{cursor:inherit} .imglist.marquee{max-width:1680px;margin:0 auto;overflow:hidden;position:relative;height:130px !important;display:flex;gap:25px;align-items:center;flex-wrap:nowrap;} .imglist.marquee>div a{margin:0 15px;} .imglist.marquee:before,.imglist.marquee:after{content:'';position:absolute;width:80px;height:100%;left:0;top:0;z-index:2;background:linear-gradient(to right, white, rgba(255,255,255,0) 80px);} .imglist.marquee:after{left:auto;right:0;background:linear-gradient(to left, white, rgba(255,255,255,0) 80px);} .belsslist{padding:20px;max-width:1750px;margin:0 auto;} .belsslist .owl-stage,.belsslist .owl-item{display:flex;align-items:stretch;} .belsslist .item{display:flex;align-items:stretch;flex-direction:column;justify-content:space-between;background:#f6f6f6;border-radius:10px;width:320px;padding:15px 25px;margin:0 auto;} .belsslist .Txt{font-size:var(--font-size14);color:var(--color-darkblue);min-height:220px;width:100%;} .belsslist .belssdate{font-size:var(--font-size14);color:var(--color-grey3);text-align:right;margin:10px 0 0;} @media(min-width:1440px) and (max-width:1630px){.belsslist{max-width:1440px;margin:0 auto;}.imglist.marquee{max-width:1380px;}} @media(max-width:1350px){.belsslist .item{width:94%;}.imglist.marquee>div a{margin:0 15px;}} /* 媒體報導 */ .bnrsbox{max-width:940px;margin:10px auto 0;} .bnrsbox ul{ display:grid;gap:5px; grid-template-rows:auto; grid-template-areas:'media1'; } .bnrsbox li{position:relative;overflow:hidden;display:flex;justify-content:stretch;align-items:stretch;color:#fff;} .bnrsbox li:nth-of-type(1){grid-area:media1;}.bnrsbox li:nth-of-type(1) .list_txt h3.title{font-size:var(--font-size24);} .bnrsbox li:nth-of-type(2){grid-area:media2;} .bnrsbox li:nth-of-type(3){grid-area:media3;} .bnrsbox li a{display:block;width:100%;padding-top:51.25%;background:no-repeat scroll center/100%;transition:all 1.35s ease-in-out;border-radius:10px;} .bnrsbox li a:hover{background-size:103% auto;} .bnrsbox .list_txt{position:absolute;left:0;bottom:0;right:0;margin:0;padding:25px 25px 3%;background:linear-gradient(-180deg,rgba(0,0,0,0),rgba(0,0,0,1));border-radius:0 0 10px 10px;} .bnrsbox .list_txt h3.title{font-size:var(--font-size14);color:var(--color-white);line-height:1.4;} .bnrsbox .list_txt .txt_t{position:relative;} .bnrsbox .list_txt .txt_t p{color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;padding:5px 0 0;} .bnrsbox .prostate{min-width:auto;padding:4px 10px;font-size:var(--font-size12);top:-32px;} .bnrsbox .subinfo{padding:3px 0 0;color:var(--color-white);} .list01 .txt_b .proprice{flex-direction:column-reverse;} /* GO TOP */ .gotop{background:rgba(32,54,86,.5);position:fixed;right:25px;bottom:20px;border-radius:50%;z-index:5;width:50px;height:50px;display:flex;justify-content:center;align-items:center;flex-direction:column;font-size:var(--font-size12);color:#fff;cursor:pointer;transform:translateX(100px);transition:transform .35s ease-in-out;} .gotop:before{content:'';display:block;width:16px;height:16px;background:url('../images/content/icon_next.svg') no-repeat scroll center/100% auto;transform:rotate(-90deg);margin-bottom:-4px;} .gotop:hover{background:rgba(32,54,86,1);} .gotop.show2{bottom:140px;} .gotop.show{transform:translateX(0px);transition:transform .35s ease-in-out;} #footer{z-index:20;background:var(--color-darkblue) url('../images/footer/bg_ft_logo.svg') no-repeat scroll center bottom;color:var(--color-white);padding:20px 0;font-weight:300;position:relative;} #footer .inbox{display:flex;justify-content:space-between;} #footer .l{flex:7;display:flex;flex-direction:column;justify-content:space-between;} #footer .r{flex:3;display:flex;justify-content:flex-end;} /* FooterMenu */ .ftnav{display:flex;flex-direction:column;} .ftnav ul{display:flex;justify-content:flex-start;flex-wrap:wrap;padding:6px 0;} .ftnav li{padding:2px 30px 2px 0;position:relative;} .ftnav li:last-child{padding-right:0;} .ftnav li a{color:var(--color-white);display:block;padding:3px 0;} .ftnav li a:hover{text-decoration:underline;color:var(--color-yellow);} .ftnav ul:nth-of-type(2){font-size:var(--font-size14);} .ftnav ul:nth-of-type(2) li{padding-right:29px;} .ftnav li img{height:35px;transform:translateY(-5px);} .ftnav .subnav{display:none;;position:absolute;left:45%;bottom:100%;transform:translate(-50%,0);background:var(--color-darkblue);width:110px;border-radius:5px;border:1px solid rgba(255,255,255,.3);font-size:var(--font-size14);} .ftnav .subnav ul{display:block;padding:5px 0;} .ftnav .subnav li{padding:0;} .ftnav .subnav li a{padding:5px 10px;} .ftnav>ul>li.hv .subnav{display:block;animation:mnavIn .5s ease-in-out;} /* CopyRight */ .cpright{color:var(--color-grey);font-size:var(--font-size12);padding:15px 0 0;letter-spacing:normal;} /* CompanyInfo */ .cpinfo{font-size:var(--font-size14);} .cpinfo ul{display:flex;justify-content:flex-end;} .cpinfo li{padding:10px 0 5px 12px;} .cpinfo li a:hover{opacity:0.5;} .cpinfo p{text-align:right;padding:5px 0 0;line-height:1.7;font-family:'Roboto';} .cpinfo a{color:var(--color-white);} .cpinfo a:hover{text-decoration:underline;color:var(--color-yellow);} /* form type */ select.seltype{color:var(--color-darkblue);font-size:var(--font-size16);width:100%;background-color:#fff;border:1px solid #e7e7e7;border-radius:5px;display:inline-block;line-height:1.5;padding:0.5em 2.5em 0.5em .8em;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;appearance:none;-webkit-appearance:none;-moz-appearance:none;}select.seltype{background-image:linear-gradient(45deg, transparent 50%, gray 50%),linear-gradient(135deg, gray 50%, transparent 50%),linear-gradient(to right, #ccc, #ccc);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px),calc(100% - 2.5em) 0.5em;background-size:5px 5px,5px 5px,1px 1.5em;background-repeat:no-repeat;}select.seltype:focus{background-image:linear-gradient(45deg, green 50%, transparent 50%),linear-gradient(135deg, transparent 50%, green 50%),linear-gradient(to right, #ccc, #ccc);background-position:calc(100% - 15px) 0.9em,calc(100% - 20px) 0.9em,calc(100% - 2.5em) 0.5em;background-size:5px 5px,5px 5px,1px 1.5em;background-repeat:no-repeat;}select:-moz-focusring{color:transparent;text-shadow:0 0 0 #000;} .ckratype{margin:0;position:relative;cursor:pointer;display:inline-flex;align-items:center;vertical-align:baseline;}.ckratype input,.ckratype input:disabled{position:absolute;opacity:0;}.ckratype span{border-radius:2px;position:relative;display:inline-block;width:15px;height:15px;background:#e8e8e8;border:1px solid #e8e8e8;vertical-align:bottom;margin:5px 3px 0 0;top:-2px;}.ckratype span:hover{background:rgba(250,250,250,.15)}.ckratype span:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--color-blue);opacity:0;-webkit-transition:all .15s ease-out;transition:all .15s ease-out;-webkit-transform:scale(.5);transform:scale(.5);}.ckratype input:checked+span:after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}.ckratype-default input:checked+span:after{background-color:#00FFFF;}.ratype span{-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.ratype input:checked+span:after{background:var(--color-blue);-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.ckratype-danger input:checked+span:after{background-color:#de815c;}.ckratype-info input:checked+span:after{background-color:#5ccdde;}.ckratype-success input:checked+span:after{background-color:#afde5c;} .ckratype.ratype{margin-top:5px;} .ckratype i{font-style:normal;} .ckratype .tf{opacity:1;position:static;} .ckflex{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;} .ra_group{background:#fff;border:1px solid var(--color-darkblue);display:flex;width:200px !important;margin:8px auto!important;border-radius:5px;overflow:hidden;padding:0;vertical-align:middle;padding:0 !important;} .ra_group label{padding:0;flex-grow:2;width:50%;} .ra_group input[type=radio]{position:absolute;visibility:hidden;display:none;} .ra_group i{color:#c1c1c1;display:block;cursor:pointer;padding:5px 5px;font-style:normal;text-align:center;} .ra_group input[type=radio]:checked + i{color:#fff;background:#fe6150;} .ra_group label + input[type=radio] + i{border-left:solid 3px #675f6b;} .ra_group label.ckratype2.ratype{margin:0;} .ra_group label.ckratype2.ratype span{top:initial;border:initial;height:30px;} .ra_group label.ckratype2.ratype i{font-size:var(--font-size12);color:var(--color-darkblue);} .ckflex{width:auto;padding:7px 0;gap:14px 1.5%;} .ckratype2{width:13%;}.ckratype2.w-double{width:27.5%;} .ckratype2 span{width:100%;height:45px;border-radius:3px;margin:0;background:#fff;border:1px solid var(--color-grey3);} .ckratype2 span:after{background:none;} .ckratype2 i{position: absolute;width: 100%;left:50%;top: 47%;transform: translate(-50%, -50%);display: block;color: var(--color-grey3);text-align: center;} .ckratype2.ratype input:checked+span:after{border-radius:0;top:0px;right:0px;bottom:0px;left:0px;background-color:var(--color-darkblue); transform: scale(1);} .ckratype2.ratype input:checked+span+i{color:#fff;} .ckratype2.ratype input.tf{margin:0;} .ratype span{background:var(--color-white);border:1px solid var(--color-darkblue);} .ratype input:checked+span:after{background-color:var(--color-darkblue);transform: scale(.8);} .cktype span{width:30px;height:30px;} .cktype span:after{border-radius:2px;content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--color-blue);background-image:url(../images/content/icon_cktype.svg);background-repeat:no-repeat;background-position:center;} .seltype.w300 + .tf{max-width:484px;} /* swal */ .swal2-container{padding:20px;} .swal2-container.swal2-shown{background:rgba(0,0,0,.6) !important;} .swal2-popup.popout .swal2-close{position:absolute;width:34px !important;height:34px !important;line-height:1 !important;background:rgba(112,122,136,1);color:#fff;border-radius:50%;right:18px;top:18px;font-weight:700;text-indent:-99999px;text-align:center;} .swal2-popup.popout .swal2-close::after{content:'';display:block;background:url('../images/content/icon_close.svg') no-repeat scroll center;width:20px;height:20px;} .swal2-popup.popout .swal2-close:hover{background:rgba(0,0,0,1);color:#fff;} .swal2-popup.popout .swal2-header{flex-direction:column-reverse;} .swal2-popup.popout .swal2-actions{width:100%;gap:10px;} .swal2-popup.popout .swal2-actions button{margin:8px 0;} .swal2-popup.popout .swal2-styled.swal2-confirm,.swal2-popup.popout .swal2-styled.swal2-cancel{border-radius:5px !important;color:#fff !important;flex:1;letter-spacing:0.1em;font-size:var(--font-size18);max-width:350px;display:flex !important;align-items:center;justify-content:center;gap:5px;} .swal2-popup.popout .swal2-styled.swal2-confirm{background:var(--color-orange) !important;} .swal2-popup.popout .swal2-styled.swal2-cancel{background:#777 !important;} .swal2-popup.popout .swal2-styled:focus{box-shadow:none !important;}.swal2-container.swal2-shown{background:rgba(0,0,0,.8) !important;} .swal2-popup.popout{border-radius:10px;padding:2em 36px 1.5em;width:500px;} .swal2-popup.popout .swal2-content{font-size:1em;padding:20px 0 0;font-weight:400;} .swal2-popup.popout .swal2-title{flex-direction:column;font-size:1em;} .swal2-popup.popout .swal2-title img{width:250.25px;margin-bottom:32px;} .swal2-popup.popout .swal2-title h2.title{font-size:1em;padding-bottom:8px;} .swal2-popup.popout .swal2-title h2.title b{position:relative;z-index:2;padding:0 9px;font-size:var(--font-size20);color:var(--color-darkblue);} .swal2-popup.popout .swal2-title h2.title:after{content:'';position:absolute;left:50%;bottom:0px;width:177px;height:20px;background:var(--color-yellow);border-radius:5px;transform:translateX(-50%);} .swal2-popup.popout .Txt{color:var(--color-darkblue) !important;font-weight:400;} .swal2-popup.popout .Txt a{color:var(--color-darkblue) !important;text-decoration:underline;} .swal2-popup.popout .Txt a:hover{color:var(--color-blue) !important;text-decoration:none;} .swal2-popup.popout .note{margin:10px 0 10px;} .swal2-popup.popout .tfbar{padding:0 0 15px 0;} .swal2-popup.popout .tfbar_s{padding:5px 0;} .swal2-popup.popout .tfbtns .btns{justify-content:flex-start;} .swal2-popup.popout-s{border-radius:10px;padding:1em;width:350px;} /* POPOUT */ .swal2-popup.popout .tfbar .ckflex:not(.ra_group) .ckratype2{width:28.33333%;margin:6px 2.5% 18px;} .swal2-popup.popout .tfbar .ckratype2.w100{width:98%;} .swal2-popup.popout .tfbar+.tfbtns{padding:20px 0 0;} .swal2-popup.popout .tfbtns .btn{width:100%;margin:10px 0;font-weight:400;padding:10px 25px 13px 25px;height:50px;} .swal2-popup.popout .tfcont .ckflex{margin:0 -2.5%;width:auto;gap:0;} .swal2-popup.popout .tfcont .ckflex2{display:flex;flex-direction:column;gap:20px 0;} .swal2-popup.popout .tfcont .ckflex2 .ckratype2{width:135px;margin:0;} .swal2-popup.popout .formbox small{padding:5px 0 0;} .swal2-popup.popout .formbox small.ps2{padding:24px 0 0;} .swal2-popup.popout .formbox .tfbar input.tf{height:50px;} .swal2-popup.popout .formbox .tfbar .field input.tf,.swal2-popup.popout .formbox .tfbar select.seltype{height:40px;} .swal2-popup.popout .formbox .tfbtns small{padding:5px 0 0;} .tfbtns .btn .i_icon{margin:0 10px 0 0;} .btn_w,.btn_b,.btn_g{justify-content:flex-start;} .btn_w .i_icon,.btn_b .i_icon,.btn_g .i_icon{margin-left:20% !important;} .btn_w{background:#fff;border:1px solid #ccc;color:var(--color-grey3);} .btn_b{background:#1877F2;border:1px solid #1877F2;color:#fff;} .btn_g{background:#39CD00;border:1px solid #39CD00;color:#fff;} .btn_w:hover,.btn_b:hover,.btn_g:hover{box-shadow:0 0 10px rgba(255, 153, 0, 0.5);} .tfbox{padding:45px 0 0;position:relative;} .tfbox .tftitle{position:absolute;left:0;right:0;top:11px;font-size:var(--font-size14);color:var(--color-darkblue);margin:0;} .tfbox .tftitle:before,.tfbox .tftitle:after{content:'';height:1px;background:#e8e8e8;flex-grow:1;margin:0 20px 0 0;} .tfbox .tftitle:after{margin:0 0 0 20px;} .sysmsg{padding:20px 0 10px;font-weight:500;} .sysicon{padding:0 0 40px;} /* owl */ .owl01 .owl-carousel .owl-item{overflow:hidden;} .owl-carousel .owl-dots{position:absolute;left:0;bottom:0;width:100%;text-align:center;} .owl-carousel .owl-dots .owl-dot{background:#eee;width:10px;height:10px;margin:3px;border-radius:50%;background:var(--color-white);border:2px solid var(--color-blue);} .owl-carousel .owl-dots .owl-dot.active{background:var(--color-yellow);} .owl-carousel .owl-dots .owl-dot span{font-size:0em;} .owl-carousel .owl-nav button{position:absolute;top:50%;width:40px;height:40px;background:rgba(32,54,86,0.8) !important;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;border-radius:50%;box-shadow:0 0 10px rgba(0,0,0,.1);} .owl-carousel .owl-nav button:hover{box-shadow:none;transform:translate(2px,-49%);box-shadow:0 0 2px rgba(0,0,0,.1);} .owl-carousel .owl-nav button.owl-next{right:-15px;} .owl-carousel .owl-nav button.owl-prev{left:-15px;} .owl-carousel .owl-nav button span{line-height:1;text-indent:-9999px;background:no-repeat scroll center;width:30px;height:30px;display:block;} .owl-carousel .owl-nav button.owl-prev span{background-image:url('../images/content/icon_prev.svg');} .owl-carousel .owl-nav button.owl-next span{background-image:url('../images/content/icon_next.svg');} .owl-carousel .owl-nav button.disabled{opacity:1;cursor:default;outline:none;} .bnrbox .owl-dots{position:absolute;left:auto !important;width:auto !important;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;} .list01 .owl-carousel .owl-nav button.owl-prev{left:-75px;} .list01 .owl-carousel .owl-nav button.owl-next{right:-75px;} .flexcenter .owl-stage-outer{display:flex;} .imglist .flexcenter .owl-stage-outer{justify-content:center;} /* 頁數 */ .pagerlist{padding:30px 0 0;} .pagerlist ul{display:flex;justify-content:center;align-items:center;} .page-item.first,.page-item.last{display:none;} .page-item.next .page-link,.page-item.prev .page-link{background:url("../images/content/icon_next.svg") no-repeat scroll center;width:50px;height:50px;color:#fff;text-indent:-9999px;} .page-item.prev .page-link{-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);} .page-item.active .page-link,.page-item.active .page-link:focus,.page-item.active .page-link:hover{z-index:2;background:var(--color-blue);color:#fff;} .page-item.disabled .page-link,.page-item.disabled .page-link:focus,.page-item.disabled .page-link:hover{pointer-events:none;cursor:not-allowed;opacity:0.3;} .page-link{position:relative;float:left;color:#BCBCBC;width:30px;height:40px;text-align:center;display:flex;justify-content:center;align-items:center;text-decoration:none;border-radius:20px;margin:0 5px;} .page-link:hover{background:var(--color-blue);color:#fff;} .prev .page-link:hover{transform:scaleX(-1);} /* RWD iframe */ .rwdbox{position:relative;padding-bottom:45.25%;padding-top:25px;height:0;width:100%;} .rwdbox iframe,.rwdbox object,.rwdbox embed,.rwdbox video,.rwdbox audio{position:absolute;top:0;left:0;width:100%;height:100%;} .rwdbox .map{width:100%;height:100%;position:absolute;left:0;top:0;} .mvbor{margin:0 0 20px;} .Txt p.rwdbox,.Txt div.rwdbox{padding-bottom:55.25%;} .Txt p:not(.rwdbox) iframe.Txt div:not(.rwdbox) iframe{max-width:100%;} /* 動畫進場 */ .anibox{opacity:0;} .come-in{transform:translateY(50px);transform:translateY(0px)\9;-webkit-animation:come-in 2s ease forwards;animation:come-in 2s ease forwards;} .come-in:nth-child(odd){animation-duration:1.5s;} .already-visible{-webkit-transform:translateY(0);transform:translateY(0);animation:none;opacity:1;} @-webkit-keyframes come-in{to{transform:translateY(0);opacity:1;}} @keyframes come-in{to{transform:translateY(0);opacity:1;}} /* 0816ting CSS */ .fs{padding:20px 0 5px;justify-content:flex-start;color:var(--color-orange);} .p_box{padding:5px 0 20px;display:flex;align-items:center;justify-content: center;flex-direction: column;min-height:calc(100vh - 588px);} .p_box p{text-align: center;font-size:var(--font-size20);line-height: 1.6;padding: 0 0 45px;align-items: center;color:var(--color-grey3);} .p_box p a{text-decoration:underline;} .p_box p a:hover{text-decoration:none;} .msglist .btnarea{justify-content:flex-end;display: flex; padding: 0 0 30px;} .box01.pd_top,.box01.pd_top .box_bd{padding:0;} .box01.pd_top .list03{margin:0;} .box02{background-color:var(--color-white);padding:20px 35px 35px;margin:15px 0 30px;border-radius:10px;overflow:hidden;box-shadow:0px 4px 5px rgba(0,99,178,0.06);} .box02 .box_hd h2.title{border-bottom:none;color:var(--color-darkblue);font-size:var(--font-size20);position: relative;min-width:177px;text-align:center;} .box02 .box_hd h2.title:after{content: ''; position: absolute;left:-20px;right:-20px;bottom:-6px;height:20px;background: var(--color-yellow);border-radius: 5px;width:auto !important;} .box02 .box_hd h2.title.title2:after{display:none;} .box02 .box_hd h2.title2 b span{position: relative; z-index:1;padding: 0 7px;} .box02 .box_hd h2.title2 b span::after{content:''; position:absolute;left:50%;bottom:-4px;transform: translate(-50%, 0); min-width:53px;height:19px;background: var(--color-yellow);border-radius: 5px;z-index:-1;} .box02 .box_hd h2.title b{content: '';position: relative; z-index:1;padding:0 10px;} .box02 .box_hd{padding: 10px 0 30px;display:flex;justify-content:center;align-items:center;} .box02 .box_hd.hd_l{align-items:flex-start;justify-content:flex-start;} .box02 .box_hd.hd_l h2.title{margin-left:10px;} .box02 .box_hd.hd_l h2.title:after{left:-10px;} .box02 .box_bd{padding:10px 0 0;} .box02.t_blue{border-top: 5px solid var(--color-blue);border-radius:0 0 10px 10px;margin:5px 0 0;} .box02 .list01{width:auto;margin:0%;} .box02 .list01>ul>li{width:30.33333%;margin:15px 1.5%;border:1px solid #E8E8E8;box-shadow:0 4px 5px rgba(0, 99, 178, 0.06);} .order_box li{padding:12px 0;flex-grow:1;text-align:center;} .order_box li:nth-child(1){width:10%;letter-spacing:normal;}.order_box li:nth-child(2){width:50%;}.order_box li:nth-child(3){width:15%;}.order_box li:nth-child(4){width:10%;}.order_box li:nth-child(5){width:10%;} .order_box .imgbox,.tablewrap .imgbox{margin:0 10px 0 0;width:100px;overflow:hidden;} .order_box .imgbox img,.tablewrap .imgbox img{height:55px;max-width:100%;} .order_box .tt_box ul{display: flex;width: 100%;align-items: center;justify-content: space-between;border-bottom:1px solid #e2e2e2;} .order_box .tt_box ul li{text-align:center;display:block;font-weight:bold;color:var(--color-darkblue);} .order_box .tt_box ul li a{display:inline-block;color:var(--color-grey3);margin:0 0 0 5px;text-decoration:underline;} .order_box .conbox ul{display: flex;align-items: center;justify-content: space-between;border-bottom:1px solid #e2e2e2;} .order_box .conbox ul li:last-child{text-align: right;} .order_box .conbox li del,.order_box .conbox li em{font-weight:700;} .order_box li.class{display: flex;align-items: center;justify-content: flex-start;padding:12px 10px;} .order_box02{padding:15px;background: var(--color-white); box-shadow: 0 2px 5px rgb(0 0 0 / 10%);} .order_box02.t_blue{border-top: 5px solid var(--color-blue);} .class p{flex:1;text-align: left;} .class a{display: flex; align-items: center;color: var(--color-grey3);text-decoration: underline;} .class a:hover{text-decoration:none;} .checkall{font-weight:400;} .tb_lr{display: flex;justify-content: space-between; align-items: flex-end;padding:25px 0 0 0;flex-wrap: wrap;} .p_code{display: flex;align-items: flex-end;justify-content: space-between;} .all_price{font-family:'Roboto';} .all_price ul li{display:flex;align-items:center;justify-content: space-between;padding:6px 0;} .all_price ul li p{flex: 1;padding: 0 15px 0 0;} .all_price ul li.red{color:var(--color-red);} .all_price ul li.bold{font-size: var(--font-size16);} .bold,.bold em{font-weight:bold;} .p_code .tfbar .tf{width:250px;padding-right:45px;} .p_code .btn{padding:9px 25px;margin:5px 0;} .p_code .tfbar{padding: 0;margin: 0 20px 0 0;align-items: flex-start;flex-direction: column;} .list01 .list_hd b{padding: 0 6px 0 0;font-size: var(--font-size14);} .list01-big{width:auto;} .list01-big .list_txt{margin:25px 15px 25px;} .list01-big .list_txt h3.title{font-size:var(--font-size36);line-height:1.2;display: flex;align-items:flex-start;justify-content: space-between;min-height:auto;} .list01-big .list_txt h3.title .licons{padding:0;flex-basis:70px;} .list01-big .list_txt .txt_t{color:var(--color-darkblue);} .list01-big .list_txt .txt_t p{color:var(--color-darkblue);font-size:var(--font-size16);} .list01-big .tfbtns{padding:15px 0 0;} .list01-big .tfbtns .btns{justify-content: flex-end;} .list01-big .tfbtns .btns .btn{font-size:var(--font-size16);padding:14px 25px 14px 25px;} .list01-big .list_img{position:relative;margin:-30px -35px 0;} .tab_hd.t_blue ul li.on a{background: var(--color-blue);color:#fff;} .tab_hd.t_blue{border-bottom: 5px solid var(--color-blue);} .tab_bd.t_blue{border-top: 5px solid var(--color-blue);} .tab_hd.t_blue_s ul li a{font-size:var(--font-size12);font-weight:400;height:32px;padding:9px 5px;min-width:100px;} .tab_hd.t_blue_s ul li:not(.on) a{border:1px solid var(--color-blue);border-bottom:0;} .proprice2 {justify-content: flex-end;} .proprice2 .price{flex:none;} .proprice2 .price p{font-size: var(--font-size48);color: var(--color-red);font-weight: 600;padding: 0;line-height:1.2;font-family:'Noto Sans TC';} .proprice2 .price del{font-size: var(--font-size20);} .proprice2 .star{margin:0 90px 10px 0;} .proprice2 .star span p{left:100%;top:-5px;margin-left:10px;} select.seltype{background:var(--color-grey2) url('../images/content/icon_down.svg') no-repeat scroll right 15px center/15px auto;border:0;margin:5px 0 !important;} select.seltype:focus{background:var(--color-grey2) url('../images/content/icon_down.svg') no-repeat scroll right 15px center/15px auto;} .classbox{display:flex;align-items:stretch;justify-content: space-between;flex-wrap: wrap;margin:15px 0 20px;} .classbox .vbox,.classbox .brnbox{border-radius: 10px;flex:1;overflow:hidden;height:auto;padding:0;box-shadow:0px 4px 5px rgb(0,99,178,0.06);} .classbox .brnbox{flex:1;background:#fff;} .class_r{background:#fff;display: flex; align-items: stretch;width:330px;border-radius: 10px;margin:0 0 0 10px;box-shadow:0px 4px 5px rgb(0,99,178,0.06);min-height:450px;overflow:hidden;} .class_r .list_txt{display: flex;flex-direction: column;justify-content:space-between;border-radius: 15px;align-items: stretch;margin:15px;} .class_r .list_txt .prostate{position:static;padding:8px;margin:0 0 5px;} .class_r .list_txt .thead{position:static;width:47px;height:47px;} .class_r .probtn{flex-direction: column;padding:0;} .class_r .probtn .btn{margin:16px 0 0;width:100%;} .class_r .probtn2{flex-direction:row;gap:5px;} .class_r .probtn2 .btn{width:49%;flex-direction:column;text-align:center;padding:10px 5px;flex:none;} .class_r .probtn2 .btn p{font-weight:300;font-size:var(--font-size14);} .class_r .licons{margin:0;padding:0 0 10px;align-items:flex-end;} .class_r .licons .star{margin:0;} .class_r .licons .star span p{left:auto;right:0;} .class_r .txt_b{border-top:1px solid #ededed;margin: 20px 0 0 0;min-height:71px;} .class_r .proprice .price{color:var(--color-darkblue);} .class_r .proprice .price p{font-family:'Noto Sans TC';overflow:visible;} .class_r .proprice .price del{color:var(--color-darkblue);} .class_r .list_txt .licons ul.l{flex:1;} .vdolist-2 ul li .op_cont{display:none;} .vdolist-2 ul li.open .op_cont{display: block;} .vdolist.vdolist-2{height:auto !important;overflow:visible !important;background:var(--color-white);max-height:none;} .vdolist.vdolist-2 ul li.open .i_up{transform: rotate(180deg);} .vdolist.vdolist-2 .vbox.rwdbox{padding:45% 0 20px 0;max-width:80%;margin:10px auto;} .vdolist.vdolist-2 h3.title{cursor: pointer;background:var(--color-grey2);border:1px solid #e5e5e5;color:var(--color-darkblue);font-size:var(--font-size18); padding: 20px 220px 20px 30px;display: flex;align-items: center;} .vdolist.vdolist-2 h3.title sub{position:static;display:flex;align-items:center;font-size:85%;color:var(--color-orange);margin:0 0 0 5px;} .vdolist.vdolist-2 h3.title sub .i_icon{margin:0 7px 0 5px;width:28px;} .vdolist.vdolist-2 h3.title span{top:20px;color:var(--color-darkblue);font-size:var(--font-size16);display:flex;flex-direction:row-reverse;align-items:center;} .vdolist.vdolist-2 h3.title span sub{margin:0 5px 0 0;display:none;} .vdolist.vdolist-2 ul li .i_icon{margin: 0 10px 0 0;} .vdolist.vdolist-2 ul li{border:none;} .vdolist.vdolist-2 ul li a span{font-size: var(--font-size14);} .vdolist.vdolist-2 li .btn{background: var(--color-blue);padding:2px 11px;font-size: var(--font-size12);display: flex;align-items: center;justify-content:center;width:60px;margin: 0 0 0 15px;} .vdolist.vdolist-2 .op_cont span{display: flex;align-items: center;flex:1;} .vdolist.vdolist-2 .op_cont em{flex-basis:80px;text-align:right;} .vdolist.vdolist-2 .op_cont ul li{background-color:#fff; color:var(--color-grey);padding: 20px;} .vdolist.vdolist-2 .op_cont ul li{border-bottom: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: space-between;} .vdolist.vdolist-2 .op_cont ul li .i_icon{background-color:var(--color-blue);width:7px;margin:0 0 0 5px;font-size: var(--font-size12);justify-content: center;} .classnews{color:var(--color-darkblue);} .classnews ul li{padding:30px 0 20px;border-bottom:1px solid #e5e5e5;} .classnews ul li:first-child{padding:0 0 20px;} .classnews ul li:last-child{border:0;padding:30px 0 0;} .classnews h3.title a{color:var(--color-darkblue);} .classnews h3.title a:hover{text-decoration:underline;color:var(--color-blue);} .classnews .bd{padding:5px 0 0;color:var(--color-grey);} /*gopath*/ .gopath{padding:0;font-size:var(--font-size14);} .gopath .inbox{display:flex;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap;} .gopath span{background:url("../images/content/icon_arrow_lr1.svg") no-repeat scroll 1px 7px;background-size:8px auto;padding:0 0 0 12px;} .gopath span:first-child{background:none;padding:0;} .gopath span,.gopath span a{color:var(--color-grey);} .gopath span a:hover{text-decoration:underline;} .tablewrap{color:var(--color-grey3);} .tablewrap table{width:100%;} .tablewrap table thead{border-bottom: 1px solid #eee;} .tablewrap table tbody tr {border-bottom: 1px solid #eee;} .tablewrap table tr:last-child{border:none;} .tablewrap table tr th{padding: 0 0 21px;} .tablewrap table tr th a{display:flex;justify-content:center;align-items:center;color:var(--color-grey3);} .tablewrap table tr td{padding: 20px 10px;} .tablewrap .i_arr{width:20px;height:20px;margin:0 3px;} .ckcode{color:var(--color-darkblue);text-decoration:underline;display:flex;justify-content:center;align-items:center;margin:5px 5px 0;} .ckcode:hover{text-decoration:none;} .tablewrap .imgbox{margin:0 10px 0 0;} .tablewrap .btn{min-width:120px;color:var(--color-white);margin:3px 0;} .state_done{background-color:var(--color-green);} .state_cancel{background-color:var(--color-grey3);} .state_fail{background-color:var(--color-red);} .state_wait{background-color:var(--color-blue);} .state_refund{background-color:var(--color-darkblue);} .swal2-popup.popout.popout2{width:70%;} .swal2-popup.popout.popout2 .list_txt{display: flex;align-items: flex-end;justify-content: space-between;margin:15px 0 0;} .swal2-popup.popout.popout2 .txt_t{text-align: left;flex:1;} .swal2-popup.popout.popout2 .txt_t p{padding:0;} .swal2-popup.popout.popout2 .txt_b{flex-basis:250px;display:flex;justify-content:flex-end;flex-direction:column;align-items:flex-end;} .swal2-popup.popout.popout2 .txt_b .btn{width:100%;margin:10px 0 0;} .swal2-popup.popout.popout2 .txt_b .star{margin-right:70px;} .swal2-popup.popout.popout2 .txt_b .star span p{left:105%;top:-4px;} .swal2-popup.popout.popout2-2{padding:0;} .swal2-popup.popout.popout2-2 .swal2-close{right:-18px;top:-18px;} .swal2-popup.popout.popout2-2 .tb01 table tr:last-child td{border:0;} .swal2-popup.popout.popout3{width:750px;max-width:750px;} .swal2-popup.popout.popout3 .swal2-title{font-size:var(--font-size20);font-weight:700;color:var(--color-darkblue);margin:0 20px .4em;} /* 20221212 */ .no_pd{padding:15px 0 0;} .orderdetail{visibility:hidden;position:absolute;opacity:0;height:0;} .orderdetail>td{padding:0 !important;} .orderdetail .order_box .tt_box ul,table .order_box .conbox ul{border-color:#eee;justify-content:flex-start;} .orderdetail .order_box .tt_box ul li:nth-of-type(1){text-align:left;} .orderdetail .order_box ul li{padding:12px 20px;} .orderdetail .order_box ul li b{display:block;padding:0 0 10px;color:var(--color-darkblue);} .orderdetail .order_box ul li:nth-of-type(1){width:50%;flex:none;} .orderdetail .order_box ul li:nth-of-type(2),table .order_box ul li:nth-of-type(3),table .order_box ul li:nth-of-type(4){width:15%;flex:none;text-align:center !important;} .ordermore{display:inline-flex;color:var(--color-darkblue);white-space:nowrap;margin:0 10px 0 0;align-items:center;} .order_ot{padding:12px 20px;display:flex;justify-content:space-between;align-items:flex-end;} .order_ot .l{line-height:1.6;display:flex;width:85%;gap:1%;} .order_ot .l p{width:32.33333%;} .order_ot .l p b{display:block;padding:0 0 10px;color:var(--color-darkblue);} .order_ot .l p .imp{color:var(--color-red);} .order_ot .l p .mark{color:var(--color-orange);} .order_ot .l p .dis{color:#e8e8e8;} .abtn_del{color:#F08102;border:1px solid #F08102;padding:5px 10px;display:inline-block;margin:10px 0 5px;} span.abtn_del{color:#F6F6F6;background:#e8e8e8;border-color:#e8e8e8;} tr.open{background:#FFF8F0;} tr.open .ordermore{color:#F08102;} tr.open .ordermore .i_icon{transform:scaleY(-1);background-image:url('../images/content/icon_down_og.svg');} .orderdetail.open{visibility:visible;position:static;opacity:1;height:auto;} .txt_t p.limit{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;} .thnav{position:relative;} .thnav .subnav{position:absolute;left:50%;top:100%;width:160px;transform:translateX(-50%);z-index:2;font-weight:normal;padding:5px 0 0;display:none;} .thnav .subnav ul{background:var(--color-white);border:1px solid #eee;border-radius:5px;overflow:hidden;} .thnav .subnav li{border-bottom:1px solid #eee;} .thnav .subnav li:last-child{border:0;} .thnav .subnav li a{display:block;padding:10px 15px;} .thnav .subnav li a:hover{background:#f9f9f9;} /* podcast */ .box02_2{background:none;box-shadow:none;padding:20px 0;margin:15px 0;} .box02_2 .box_hd{padding:10px 0 0;} .box02_2 .box_hd .i_icon{margin-right:-20px;} .box02_2 .box_hd h2.title{font-size:var(--font-size24);} .serlist{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:15px 0 0;max-width:600px;margin:0 auto;} .serlist b{color:var(--color-darkblue);} .serlist ul{display:flex;flex-wrap:wrap;gap:10px 1%;margin:15px 0;} .serlist li{width:32.33333%;border:1px solid var(--color-grey);border-radius:5px;background:var(--color-white);height:45px;display:flex;align-items:center;padding:0 5px;} .serlist li a{width:100%;display:block;text-align:left;} .serlist li img{max-width:100%;} .serlist .box_blue{width:100%;font-size:var(--font-size16);margin:0;} .list03-4{max-width:1000px;margin:0 auto !important;background:none;border-radius:0;box-shadow:none;} .list03-4 li{display:flex;margin:15px 0;background:var(--color-white);box-shadow:0px 4px 5px rgba(0,99,178,.06);} .list03-4 .list_img{width:335px;flex:none;} .list03-4 .list_txt{flex:1;padding-bottom:0;display:flex;flex-direction:column;justify-content:space-between;} .list03-4 .list_txt h3.title{font-size:var(--font-size24);font-weight:700;} .playicon{text-align:right;margin:10px 0 0;} .playicon .i_icon{width:50px;height:50px;} .newsbnrbox img{width:100%;} .formbox .serlist{width:200px;padding:0 0 15px;} .formbox .serlist ul{margin:0;} .formbox .serlist li{width:100%;} .formbox .serlist li:hover{border-color:var(--color-darkblue);} .list03-4-2{margin:30px auto 0 !important;max-width:940px;} .list03-4-2 li{background:none;box-shadow:none;padding-bottom:12px;margin:12px 0;} .list03-4-2 li:last-child{margin-bottom:0;} .list03-4-2 .list_img{width:295px;} .list03-4-2 .list_img img{border-radius:10px;} .list03-4-2 .list_txt{margin:0 20px;} .list03-4-2 .list_txt h3.title{font-size:var(--font-size20);line-height:1.3;} .list03-4-2 .list_txt .txt_t p{overflow:hidden !important;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;padding:5px 0 0;color:var(--color-grey3);} .list03-4-2 .list_txt .c_redbg{min-width:auto;padding:4px 10px;font-size:var(--font-size12);margin:0 0 5px;} .list03-4-2 .list_txt .subinfo{color:var(--color-darkblue);padding:5px 0 0;text-align:right;} .list03-4-3{max-width:90%;margin:0 auto;flex-direction:column;} .list03-4-3 li{box-shadow:none;border:1px solid #e8e8e8;border-radius:8px;gap:10px;padding:10px 20px 14px;align-items:flex-start;margin:0 0 12px;flex-direction:row !important;} .list03-4-3 .list_img{background:none;width:30px !important;height:30px !important;border-radius:50%;overflow:hidden;} .list03-4-3 .list_txt{margin:0 !important;text-align:left;} .list03-4-3 .list_txt h3.title{font-size:var(--font-size16) !important;display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .list03-4-3 .list_txt .txt_t p{line-height:1.4;} .list03-4-3 .subinfo{font-size:var(--font-size12);text-align:right;padding:0;} .swal2-popup.popout.popout3 .swal2-html-container{max-height:70vh;overflow:auto;padding-top:0;} .swal2-popup.popout.popout3 .swal2-html-container::-webkit-scrollbar{width:6px;border-radius:10px;background:none;} .swal2-popup.popout.popout3 .swal2-html-container::-webkit-scrollbar-thumb{background:#e8e8e8;border-radius:10px;} .loading{color:var(--color-grey);text-align:center;margin:0px auto;} /* 講師 */ .instbox1,.instbox2,.instbox3{color:var(--color-darkblue);} .instbox1{display:flex;justify-content:center;padding:15px 15px 20px;} .instbox1 .lrbox{align-items:center;} .instbox1 .lrbox .l{text-align:center;} .instbox1 .lrbox .l img{max-width:100%;} .instbox1 h3.title{color:var(--color-red);font-size:var(--font-size24);} .instbox1 h2.title{font-size:var(--font-size48);color:var(--color-darkblue);padding:5px 0 10px;} .instbox1 h2.title mark{font-style:normal;color:inherit;position:relative;background:none;} .instbox1 h2.title mark.mk2{color:var(--color-blue);} .instbox1 h2.title mark:after{content:'';position:absolute;left:0;bottom:5px;width:100%;height:20px;background:var(--color-yellow);border-radius:3px;z-index:-1;} .instbox1 p{line-height:2;} .instbox2{background:var(--color-blue) url('../images/content/bg_inst.svg') no-repeat scroll right bottom;border-radius:20px;overflow:hidden;padding:6% 4% 8% 4%;position:relative;margin-bottom:60px;} .instbox2 .lrbox{justify-content:space-between;position:static;} .instbox2 .lrbox .r{position:absolute;right:0;bottom:0;width:60%;text-align:right;margin:0;} .instbox2 .lrbox .r img{max-width:100%;max-height:100%;} .instbox2 .lrbox .l{padding:5%;} .instbox2 h2.title{font-size:var(--font-size40);color:var(--color-yellow);letter-spacing:.1em;padding:0 0 30px;line-height:1.5;} .instbox2 p{color:#fff;font-size:var(--font-size24);font-weight:700;line-height:1.5;} .instbox2 .btn04-2{background:var(--color-yellow);color:var(--color-darkblue);} .instbox2 .btn04-2 .i_signup{background-image:url('../images/content/icon_ins_signup2.svg');} .box04{padding:40px 0;color:var(--color-darkblue);} .box04 .box_hd{flex-direction:column;gap:8px;padding:15px 0 10px;} .box04 .box_hd .linetitle{max-width:1075px;gap:10px;} .box04 .box_hd .linetitle:before,.box04 .box_hd .linetitle:after{background:var(--color-grey);height:1px;} .box04 .box_hd h2.title{font-size:var(--font-size36);color:var(--color-darkblue);} .box04 .box_hd h2.title br{display:none;} .box04 .box_hd h3.title{font-size:var(--font-size20);color:var(--color-darkblue);} .inbox2{max-width:1250px;margin:0 auto;} .inbox2 .lrbox .r{margin-left:30px;} .inbox2 .lrbox .l{width:65%;} .inbox2 .box_hd{justify-content:flex-start;align-items:flex-start;} .starlist ul{display:flex;gap:20px;flex-direction:column;} .starlist li{position:relative;padding:10px 0 10px 65px;font-size:var(--font-size24);font-weight:700;} .starlist li:before{content:'';position:absolute;left:0;top:0;width:50px;height:50px;background:#fabb18 url('../images/content/icon_ins_star.svg') no-repeat scroll center;border-radius:50%;} .inbox3{max-width:1400px;margin:0 auto;} .planlist>ul{display:flex;gap:1%;flex-wrap:wrap;} .planlist>ul>li{width:24%;display:flex;flex-direction:column;justify-content:stretch;gap:10px;} .planlist>ul>li:last-child{display:none;} .plan_hd{background:var(--color-darkblue);color:#fff;font-size:var(--font-size24);display:flex;justify-content:center;border-radius:5px;padding:12px 15px;font-weight:700;} .plan_bd{background:#fff;border:1px solid #e4e4e7;padding:0 10px;display:flex;flex:1;justify-content:center;border-radius:5px;font-weight:700;min-height:170px;} .plan_bd ul{display:flex;flex-direction:column;justify-content:center;text-align:center;flex:1;} .plan_bd ul li{padding:20px 0;border-bottom:1px solid #e8e8e8;display:flex;gap:10px;flex-direction:column;flex-grow:1;justify-content:center;} .plan_bd ul li:last-child{border:none;} .plan_bd del{margin:0 0 20px;display:block;font-weight:400;} .plan_bd h3.title{font-size:var(--font-size32);color:var(--color-red);} .plan_bd h3.title b{display:block;font-size:50%;} .plan_bd b{color:var(--color-red);} .plan_bd b.imp{font-size:var(--font-size20);} #tab3 .planlist{transform:translateX(13%);} .planlist+.btnbox{display:flex;justify-content:center;} .list02-3 .ticon{position:absolute;left:6%;top:-40px;display:flex;align-items:center;gap:10px;color:var(--color-darkblue);font-size:var(--font-size20);font-weight:700;} .list02-3 li{border:1px solid #000;border-radius:20px;padding:20px 0 0;margin-top:0;justify-content:space-between;overflow:hidden;} .list02-3 h3.title{font-size:var(--font-size32);position:relative;padding:0 12px;margin:0 0 10px;} .list02-3 h3.title:after{content:'';position:absolute;left:0;bottom:-5px;width:100%;height:20px;background:var(--color-yellow);border-radius:3px;z-index:-1;} .inbox3+.imglist{transform:translateY(-20px);} .instbox1_2{padding:80px 0;} .instbox1_2 .r{text-align:center;width:475px !important;margin:0 !important;} .instbox1_2 h2.title{font-size:var(--font-size36);line-height:1.8;letter-spacing:.1em;} .impbtn{font-size:var(--font-size40);color:#fff;background:linear-gradient(135deg, #f28989 0%,#f38484 20%,#eb5757 50%,#f38484 80%,#f28989 100%,#f28989 100%);border-radius:50px;height:100px;display:flex;justify-content:center;align-items:center;font-weight:700;margin:20px auto 0;} .instbox3{background:url('../images/content/bg_ins3.jpg') no-repeat scroll center center/100% auto;border-radius:10px;position:relative;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;letter-spacing:.1em;overflow:hidden;margin:40px auto;padding:2%;} .instbox3 *{position:relative;z-index:1;} .instbox3 h3.title,.instbox3 h4.title{font-size:var(--font-size36);line-height:1.5;} .instbox3 b{color:var(--color-yellow);} .instbox3 p{padding:30px 0 0;} .instbox3:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);} .instbox1_3{border:12px solid var(--color-blue);border-radius:10px;max-width:990px;margin:80px auto;} .instbox1_3 .r{text-align:center;width:300px !important;margin:0 !important;} .instbox1_3 h2.title{font-size:var(--font-size36);padding:5px 0 20px;letter-spacing:.1em;} .instbox1_3 p{font-size:var(--font-size20);} .instbox1_3 .btn04-2{margin-top:15px;} /*Box_c*/ .box_c{max-width:600px;margin:20px auto 0;color:var(--color-darkblue);} .box_c>.box_hd{display:flex;justify-content:space-between;} .box_c>.box_hd h2.title{font-size:var(--font-size20);color:var(--color-darkblue);} .box_c>.box_hd .btn{padding:7px 23px;font-size:var(--font-size12);background:var(--color-darkblue);} .box_c .box02{padding:0px 22px 25px;} .box_c .tfbar-3{padding:15px 0;} .box_c .tfbar b{font-weight:700;} .box_c .tfbar b.b2{font-size:var(--font-size20);} .box_c .tfcont input.tf,.box_c .tfcont select.seltype{max-width:320px;} .box_c .tfcont p,.tfcard{padding:3px 0;} .box_c .tfbtns{padding:50px 0 0;} .box_c .tfbtns .btns{flex-direction:column;align-items:center;} .box_c .tfbtns .btns .btn{width:300px;padding:13px 25px;margin:0 !important;} .box_c .tfcont .ckflex{gap:10px;padding-bottom:0;} .box_c .tfcont .ckratype2{height:40px;margin:0;font-size:14px;} .ckratype2.autoW{width:auto;} .ckratype2.autoW span{height:100%;position:absolute;height:40px;} .ckratype2.autoW i{position:static;transform:translateY(-2px);padding:0 15px;white-space:nowrap;z-index:2;} .ckratype2.flexW{width:100%;} .ckratype2.flexW i{text-align:left;padding:0 15px;transform:none;display:flex;align-items:center;gap:10px;left:0;top:0;width:100%;height:90%;} .ckratype2.flexW i p{flex:1;color:var(--color-grey3);} .ckratype2.flexW input:checked+span:after{background:var(--color-blue);} .ckratype2.flexW input:checked+span+i p{color:#fff;} .tfcard{background:var(--color-lightblue);padding:30px 30px;position:relative;margin:3px 0;border-radius:10px;} .tfcard .lrbox{flex-direction:row-reverse;justify-content:flex-end;gap:20px;padding:0 0 20px;} .tfcard .lrbox .r{margin:0;} .tfcard ol{margin:0;padding:5px 0 0 20px;font-size:var(--font-size14);} .tfcard ol li{padding:2px 0;} .tfcard .vdobox{width:170px;height:120px;overflow:hidden;border:3px solid #12141D;border-radius:11px;position:relative;} .tfcard .vdobox a{display:block;width:100%;} .tfcard .vdobox a:after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;background:url('../images/content/icon_play2.svg') no-repeat scroll center;} .tfcard .vdobox img{width:100%;} .carditems i{position:absolute;z-index:1;} .tfcard .i_star{left:5px;top:5px;} .tfcard .i_arrow{right:80px;top:130px;} .tfcard .i_txt{font-size:var(--font-size54);color:var(--color-blue);opacity:.2;bottom:60px;right:50px;font-weight:900;} .box_c .tftitle{display:flex;gap:10px;font-size:var(--font-size16);color:var(--color-darkblue);font-weight:700;margin:0 0 10px;} .box_c .tftitle:before,.box_c .tftitle:after{content:'';height:1px;background:var(--color-grey);flex-grow:1;margin:0;} .box_c .txtbox{padding:0 0 30px;font-size:var(--font-size14);color:#495867;line-height:1.6;min-height:auto;max-width:initial;} .box_c .Txt p{padding:3px 0;} .box_c .Txt b,.box_c .Txt strong{color:var(--color-darkblue);} .box_c .Txt ul,.box_c .Txt ol{margin:5px 0 5px 5px;} .box_c .Txt ul li,.box_c .Txt ol li{padding:1px 0;} .formscroll{max-height:1000px;overflow:auto;} .formscroll::-webkit-scrollbar{width:6px;border-radius:10px;background:#fff;} .formscroll::-webkit-scrollbar-thumb{background:#dcdcdc;border-radius:10px;} .txtbox_b{padding:10px 0 40px;} .txtbox_b .btn01{font-size:var(--font-size12);background:var(--color-darkblue);padding:5px 15px;min-width:85px;border-radius:2px;} .txtbox_b .pgdate{text-align-last:justify;max-width:92%;margin:0 auto;padding:30px 0 0;font-size:var(--font-size14);font-weight:700;color:var(--color-darkblue);} .txtbox_b + .tfbtns{border-top:1px solid #e8e8e8;padding-top:10px;margin-top:30px;} .tfbtns .cktype span{width:20px;height:20px;background:#fff;border:1px solid var(--color-darkblue);border-radius:3px;} .tfbtns .cktype span:after{background-color:var(--color-darkblue);} /* 上傳 */ .uploadbtn{width:120px;height:120px;position:relative;vertical-align:middle;display:flex;align-items:center;border-radius:4px;overflow:hidden;margin:3px 0;} .btnwrap{background:#f6f6f6;text-align:center;height:120px;width:120px;display:flex;transition:.2s;position:relative;overflow:hidden;justify-content:stretch;align-items:stretch;} .upload_btn{padding:5px 20px;color:#fff;text-align:center;position:relative;display:flex;overflow:hidden;z-index:3;white-space:nowrap;flex:1;justify-content:center;align-items:center;width:120px;height:120px;} .upload_btn input{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;opacity:0;} .upload_btn p{width:35px;height:35px;background:url('../images/content/icon_uploadimg.svg') no-repeat scroll center;text-indent:-99999px;} .uploading{width:120px;height:120px;background:#f6f6f6;} .uploading .upload_btn{display:none;} .upload_bar{position:absolute;left:0;top:0;width:0;height:100%;background:var(--color-blue);transition:3s;} .uploading .upload_bar{width:100%;} .upload_done{display:none;height:120px;position:relative;} .uploaded .upload_done{display:flex;text-align:left;color:#fff;align-items:center;justify-content:center;flex-direction:column;width:100%;} .uploaded .upload_done p{color:#fff;} .uploaded{margin-top:0;background:var(--color-blue);} .file_preview{transition:.2s;opacity:0;position:absolute;left:5px;top:5px;} .file_remove{width:25px;height:25px;border-radius:50%;display:block;background:#fff;line-height:24px;color:#333;font-size:1em;cursor:pointer;text-align:center;} .file_remove:before{content:'✖';font-weight:600;color:var(--color-blue);} .file_remove:hover{background:#eee;transition:.2s;} .file_preview.show{opacity:1;} .upload_err{text-align:center;color:#f00;position:absolute;left:0;bottom:10%;white-space:nowrap;width:100%;font-size:var(--font-size12);} .maincont .pathtitle{padding:0;} .tab_bd_nopd{padding:0 !important;} .tab_bd_nopd .formbox{padding:20px;} .tab_bd_nopd .tfbtns{padding:0 0 20px;} .tab_bd_nopd .tb01+.tfbtns{padding-top:30px;} .tab_bd_nopd .form_r .tfbtns{padding:0;} .tb01 .tb_hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 15px;color:var(--color-darkblue);} .tb01 .tb_hd .l{display:flex;justify-content:flex-start;align-items:center;gap:10px;position:relative;flex:1;} .tb01 .tb_hd .l h3.title{font-size:var(--font-size16);} .tb01 .tb_hd .l p{background:#f6f6f6;padding:10px 20px;border-radius:5px;font-weight:700;} .tb01 .tb_hd .l .btn_s{padding:3px 5px !important;} .tb01 .tb_hd .l .btn .i_icon{width:20px;height:20px;} .tb01 .tb_hd .r{display:flex;justify-content:flex-end;align-items:flex-end;gap:10px;} .tb01 .tb_hd .r span{font-size:var(--font-size12);} .tb01 .tb_hd a{font-size:var(--font-size12);} .tb01 .tb_hd a:not(.btn){text-decoration:underline;color:var(--color-darkblue);} .tb01 .tb_hd a:not(.btn):hover{text-decoration:none;} .tb01 .tb_hd .i_add{width:15px;height:15px;} .tb01 .tb_hd .btn_s{padding:10px !important;} .tb01 .tb_bd{overflow:hidden;} .tb01 table{font-size:var(--font-size12);color:var(--color-darkblue);border-top:1px solid #e8e8e8;} .tb01 table th,.tb01 table td{padding:10px 15px;border-bottom:1px solid #e8e8e8;} .tb01 table ul{padding:0 0 0 15px;text-align:left;margin:0 0 0 5px;} .tb01 table .i_arr{width:12px;height:12px;} .tb01 table .btn_s{padding:3px 8px !important;min-height:25px;} .tb01 table .ordermore{margin:0;gap:5px;} .tb01 table tr.open{background:none;} .tb01 table tr.open .ordermore{color:var(--color-blue);} .tb01 table tr.open .ordermore .i_icon{background-image:url('../images/content/icon_down_bl.svg');} .tb01 table tr.orderdetail{overflow:hidden;} .tb01 table tr.orderdetail.open>td{padding:5px !important;} .tb01 table tr.orderdetail.open td table{background:var(--color-lightblue);border:0;} .tb01 table .btn_s{font-size:inherit;} .tb01 .tb_last{display:flex;justify-content:flex-end;} .tb01 .tb_last table{border:0;width:520px;} .tb01 .tb_last table td{border:0;line-height:1.6;} .tb_last td b{font-size:var(--font-size12-16);} .tb_last td p{font-size:var(--font-size12-14);font-weight:400;padding:5px 0 0;} .tb_last td p+ul{margin:0 0 0 5px;font-size:var(--font-size14);font-weight:400;} .tb01 .tf{background:#f6f6f6;padding:5px;width:100%;border:0;max-width:initial !important;} .tb01 .tf_s{width:50px;text-align:center;} .tb01 + .box01{padding:0;} .tab_bd_nopd .box02 .formbox{padding:0;} .tab_bd_nopd .box_bd{padding:0;} .tfcont .imp{font-weight:400;} .btnsnote{color:var(--color-red);width:480px;font-size:var(--font-size14)} .form_r .tfbtns{display:flex;flex-direction:column;align-items:flex-end;gap:10px;} .box_bd .tfbtns .btns_right{justify-content:flex-end;} .box_bd .tfbtns .btns_right .btn{min-width:auto !important;width:auto !important;flex:none !important;} .btnsnote ul{margin:0;padding-left:17px;} .tbslide{background:#e8e8e8;padding:10px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:var(--color-darkblue);} .tbslide:after{content:'';display:block;background:url('../images/content/icon_down.svg') no-repeat scroll center/15px auto;width:15px;height:15px;} .tbnone{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:50px 0;gap:15px;} .tbnone p{font-size:var(--font-size12);color:#000;} .tbnone .btn06{background:#fff;border:1px solid var(--color-darkblue);color:var(--color-darkblue);height:90px;} .tbnone .btn06 .i_add{background-image:url('../images/content/icon_add_bl.svg');} .lessonset{position:relative;margin:0 -35px;} .lessonset .lesson_hd{background:#e8e8e8;padding:7px 60px 7px 35px;position:relative;} .lessonset .lesson_hd h3.title{font-size:var(--font-size16);} .lessonset .lesson_hd .libtns a{background:#fff;} .lessonset ul ul li{padding:7px 100px 7px 35px;position:relative;border-bottom:1px solid #e8e8e8;font-size:var(--font-size12);color:var(--color-darkblue);display:flex;align-items:center;} .lessonset span{display:inline-block;padding:0 10px 0 0;} .lessonset span:nth-of-type(1){width:80px;} .lessonset span:nth-of-type(2){min-width:180px;} .lessonset span:nth-of-type(3){width:100px;} .lessonset span a{display:flex;align-items:center;gap:5px;color:var(--color-darkblue);} .lessonset h3 span{margin-right:-4px;} .lessonset ul ul li:last-child{display:flex;justify-content:center;padding-right:35px;} .libtns{position:absolute;right:25px;top:50%;display:flex;gap:5px;height:25px;transform:translateY(-50%);} .libtns a{background:#e8e8e8;border-radius:5px;min-width:25px;height:25px;display:flex;justify-content:center;align-items:center;} .libtns a:hover{background:#ccc;color:inherit;} .libtns a .i_icon{width:20px;height:20px;} table .libtns{position:static;transform:none;justify-content:center;} .i_play3{background-color:#e8e8e8;border-radius:5px;background-size:20px auto;} .lessonset .i_play{color:var(--color-darkblue);position:relative;padding-right:30px;background:none;} .lessonset .i_play::after{content:'';position:absolute;right:0;top:50%;width:25px;height:25px;background:#e8e8e8;transform:translateY(-50%);border-radius:8px;} .rwdbtns{padding:10px 0 0;display:flex;justify-content:flex-start;align-items:center;gap:10px;} .rwdbtns .btn{height:30px;} .tfcont .i_add{width:15px;height:15px;} .selectedItems{display:flex;flex-wrap:wrap;gap:5px;} .txtlimit{display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;} input[type=checkbox].switch{ --active:#0063B2;--active-inner:#fff;--input-border:#CDD9ED;--input-border-hover:#23C4F8;--background:#fff;--disabled:#F5F9FF;--disabled-inner:#E4ECFA;--shadow-inner:rgba(18,22,33,.1); height:21px;outline:none;position:relative;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;box-shadow:none;cursor:pointer;border:1px solid var(--input-border);background:var(--background);transition:background .3s ease,border-color .3s ease; } input[type=checkbox].switch:after{content:"";display:block;left:0;top:0;position:absolute;transition:transform .3s ease,opacity .2s ease,filter .3s ease} input[type=checkbox].switch:checked{background:var(--active);border-color:var(--active)} input[type=checkbox].switch:checked:after{filter:drop-shadow(0 1px 2px var(--shadow-inner));transition:opacity .3s ease,filter .3s ease,transform .6s cubic-bezier(0.175,0.88,0.32,1.2)} input[type=checkbox].switch:disabled{cursor:not-allowed;opacity:.9;background:var(--disabled)} input[type=checkbox].switch:disabled:checked{background:var(--disabled-inner);border-color:var(--input-border)} input[type=checkbox].switch{width:38px;border-radius:11px;top:4px;} input[type=checkbox].switch:after{left:2px;top:2px;border-radius:50%;width:15px;height:15px;background:var(--input-border)} input[type=checkbox].switch:checked:after{background:var(--active-inner);transform:translateX(17px)} input[type=checkbox].switch:disabled:not(:checked):after{opacity:.6} .swal2-popup.popout.popout2-2 .tb01 table td b{display:none;} @media(max-width:1400px){ .inbox3{width:98%;} } @media(max-width:1280px){ .inbox,.inbox2{width:98%;} .startupbox h2.title{font-size:var(--font-size60);} .startupbox:before{width:650px;} .startupbox:after{width:340px;right:3%;} .startupbox .list02{padding:0;} .startupbox .list02 li:nth-of-type(3){transform:translateY(-70px);} .startupbox .list02 li em{transform:translateX(-105px);} .startupbox .btnarea{left:105%;} .fleximg img{height:355px;} .vdocont{padding:20px 2%;} .vdocont h2.title{font-size:var(--font-size25);} .vdocont .rwdbox{height:480px;} .vdolist h3.title{font-size:var(--font-size16);padding:15px 130px 15px 15px;} .vdolist h3.title span{right:10px;} .vdolist li a{font-size:var(--font-size15);padding:15px 10px 15px 40px;} .vdolist li a:before{left:8px;top:12px;} .box02{padding:15px 15px 25px;} .vdolist li.v-play a:hover:before{transform:translateX(-5px) rotate(-180deg);} .swal2-popup.popout{padding:1.3em;} .list01-big .list_img{margin:-25px -15px 0;} .box_yellow{margin:50px 30px 30px;} .imglist img{max-width:200px !important;max-height:100px;} .imglist.marquee,.str_move,.str_move_clone{height:100px !important;} .tabbox2 .tab_bd{padding:30px 0 0;} .list02-3 .ticon{left:1%;} } @media(max-width:1190px){ .inbox,.inbox2,.inbox3{width:96%;} .maincont{padding:20px 0;} .startupbox{padding:20px 26% 20px 20px;} .startupbox:before{width:500px;} .startupbox:after{width:270px;} .startupbox h2.title{font-size:var(--font-size50);} .startupbox h2.title:after{height:50px;} .startupbox .list02 li:nth-of-type(1){transform:translateY(10px);} .startupbox .list02 li:nth-of-type(3){transform:translateY(0);} .startupbox .list02 .list_txt{font-size:var(--font-size15);} .startupbox .btnarea{top:50px;} .startupbox .btnarea .btn{font-size:var(--font-size20);width:230px;} .btn05{padding:8px 10px;} .mbarea .btn01{padding:9px 10px;} .shbox .tf{width:110px;} .mnav{padding:0 0 0 15px;} .mnav li a{padding:13px 8px;} .icontxtlist li h3.title{font-size:var(--font-size20);} .list01{width:100%;} .list01>ul>li{width:31.33333%;margin:15px 1%;} .list01 ul .owl-item>li{width:94%;} .list01 + .btnarea{right:1%;transform:translateX(-5px);} .box_yellow .owl-carousel .owl-nav button.owl-next{right:-6%;} .box_yellow .owl-carousel .owl-nav button.owl-prev{left:-6%;} .box_yellow{margin:50px auto 30px;} .tab_bd{padding:15px 15px 30px;} .box02.t_blue{padding:15px 15px 30px;} .list02{padding:0;} .notebox .fixedarea{width:93%;padding:10px 15px;} .notebox p .i_system{width:50px;height:60px;} .notebox.fixed .fixedarea{width:91%;} .skillist ul{width:40%;} .skillist ul:last-child{width:55%;} .vdocont .rwdbox{height:auto;padding:60% 0 20px;} .article_bg + .Txt{margin:-30px -15px -40px;} .list01 .owl-carousel .owl-nav button.owl-prev{left:-17px;} .list01 .owl-carousel .owl-nav button.owl-next{right:-17px;} .instbox1 .lrbox .l{flex:1;} .instbox1 .lrbox .r{width:450px;} .box04{padding:30px 0;} .instbox1_2{padding:60px 0;} .instbox2{padding:4% 2% 6% 2%;margin-bottom:40px;} .instbox2 .lrbox .l{padding:3%;} .instbox2 .lrbox .r{width:55%;} .instbox1 h2.title{font-size:var(--font-size40);} .instbox1_2 h2.title,.instbox1_3 h2.title,.instbox3 h3.title,.impbtn{font-size:var(--font-size32);} .instbox1_2 h2.title{line-height:1.5;} .starlist li,.plan_hd{font-size:var(--font-size20);} .plan_bd h3.title,.list02-3 h3.title{font-size:var(--font-size25);} .plan_bd ul li{padding:10px 0;} .plan_bd del{margin:0 0 10px;} .impbtn{height:80px;} .tb01 .tb_bd{overflow-x:auto;margin-bottom:20px;} .tb01 .tb_bd table{width:1150px;} .tb01 .tb_bd::-webkit-scrollbar{height:6px;border-radius:10px;background:#e8e8e8;} .tb01 .tb_bd::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:10px;} .tb01 .tb_last{justify-content:flex-start;} } @media(max-width:1030px){ .bluemsg + .hdmain .slidemnav.open{transform:translateY(50px);} .phone_menu{display:block;position:relative;z-index:10;} .slidemnav{ position:fixed;top:0;left:0;width:100%;height:0%;opacity:0;visibility:hidden;background:var(--color-darkblue); -webkit-transition:opacity .35s, visibility .35s, height .35s;transition:opacity .35s, visibility .35s, height .35s;overflow:hidden; } .slidemnav.open{opacity:1;visibility:visible;height:100vh;z-index:1;} .slidemnav.open li{-webkit-animation:fadeInLeft .5s ease forwards;animation:fadeInLeft .5s ease forwards;-webkit-animation-delay:.35s;animation-delay:.35s;} .slidemnav.open li:nth-of-type(2){-webkit-animation-delay:.4s;animation-delay:.4s;} .slidemnav.open li:nth-of-type(3){-webkit-animation-delay:.45s;animation-delay:.45s;} .slidemnav.open li:nth-of-type(4){-webkit-animation-delay:.50s;animation-delay:.50s;} .slidemnav nav{position:relative;height:80%;top:90px;font-size:var(--font-size20);text-align:center;padding:0;} .slidemnav ul{list-style:none;padding:0;margin:0;flex-direction:column;} .slidemnav ul li{display:block;min-height:50px;position:relative;opacity:0;width:100%;border-bottom:1px solid rgba(255,255,255,.1);} .slidemnav ul li a{display:block;position:relative;color:#FFF !important;padding:20px 15px;font-weight:normal;} .slidemnav ul li.licon a{padding:5px 15px;} .slidemnav ul li.licon a span{display:block;} .slidemnav ul li a:hover:after, .slidemnav ul li a:focus:after, .slidemnav ul li a:active:after{width:100%;} .mnav>ul>li>a:after{display:none;} .mnav .subnav{position:relative;width:auto;background:var(--color-blue);padding:0;} .mnav .subnav ul{display:flex;justify-content:center;} .mnav .subnav ul li{display:flex;justify-content:center;align-items:stretch;border:none;} .mnav .subnav ul li a{width:100%;} .mnav .subnav ul li.hv a{background:rgba(242,247,251,.5);} .loadimg,.loadimg:before,.loadimg:after{width:150px;height:150px;} .loadingbox p{font-size:var(--font-size25);margin:10px 0 0;} #wrap{padding-top:160px;} #header{height:160px;background:var(--color-white);} #header .inbox{width:98%;} #header .logo{position:absolute;left:50%;transform:translateX(-50%);} #header .logo img{height:35px;} #header .r{flex:none;} .mbarea .btn{display:none;} .mbarea a{margin:0;display:none;} .shbox{position:absolute;left:1%;top:53px;width:98%;} .mbarea .aicon{display:block;} .mshow{display:block !important;margin:0;} .box01{padding:10px 0;} .box01 .box_hd h2.title:after{width:100%;} .form_l,.form_r{flex:5;} .box_bd .tfbtns .btns .btn{min-width:250px;} .icontxtlist li{padding:15px 10px;} .icontxtlist li h3.title{padding:10px 0 0;} .icontxtlist-3 li.biger{padding:30px 10px;} .tab_hd ul li a{padding:10px;height:auto;} .notebox.fixed .fixedarea{top:110px;width:88%;} .paperbox{width:94%;} .paperbox .owl-item img{transform-origin:left center;} .paperbox .owl-item.active + .owl-item img{transform-origin:right center;} .list01 ul .owl-stage-outer{display:block;} .txt_hd h3.title{font-size:var(--font-size20);} .txt_hd .subinfo + h3.title{line-height:1.5;} .audioplayer{padding:0 10px !important;} .audioplayer-time-current{margin-left:5px !important;} .audioplayer-time-duration{margin-right:15px !important;} .i_mic{background-image:url('../images/header/icon_mic_smart.svg');} .startupbox .btnarea .btn{width:200px;} .box_hd.box_hd_lr{width:100%;} .box04 .box_hd h2.title{font-size:var(--font-size30);} .instbox1_3 .lrbox .r{width:300px;} .instbox2 h2.title{font-size:var(--font-size32);} .instbox2 p{font-size:var(--font-size20);} .inbox2 .lrbox .l{width:57%;} .starlist ul{gap:10px;} .starlist li{padding:7px 0 7px 45px;} .starlist li:before{width:30px;height:30px;top:6px;} #tab2 .planlist>ul>li{width:32.33333%;} #tab3 .planlist>ul>li{width:40%;} .instbox1_2 h2.title,.instbox1_3 h2.title,.instbox3 h3.title,.instbox3 h4.title,.impbtn{font-size:var(--font-size30);} .impbtn{height:70px;} .owl06 .owl-carousel .owl-nav button.owl-prev{left:-10px;} .owl06 .owl-carousel .owl-nav button.owl-next{right:-10px;} } @media(max-width:850px){ .maincont{padding:15px 0;} .box_hd h2.title{font-size:var(--font-size32);} .icontxtlist li h3.title{font-size:var(--font-size16);padding:5px 0 0;} .classbox{flex-direction:column;} .classbox .vbox{width:100%;padding-top:50%;border-radius:10px 10px 0 0;} .class_r{width:100%;margin:0;border-radius:0 0 10px 10px;min-height:auto;} .class_r .list_txt{width:100%;} .class_r .list_txt .prostate{padding:8px;} .lrbox{flex-direction:column;} .w30,.w70,.w50{flex:1;width:100% !important;padding:10px 0 0;} .w50{width:80% !important;} .w300{width:100% !important;} .price p{font-size:var(--font-size25);letter-spacing:normal;} .listtags{justify-content:center;} .list01>ul>li,.box02 .list01>ul>li{width:32.33333%;margin:15px .5% 5px;} .gopath{overflow-x:auto;display:flex;flex-wrap:nowrap;font-size:var(--font-size12);} .gopath *{white-space:nowrap;} .gopath span{background-position:2px 5px;} .licons ul.r .i_icon{width:35px;height:35px;} .form_lr{flex-direction:column;} .form_r{margin:0;} .box_bd .form_r .tfbtns .btns{justify-content:center;padding:20px 0 0} .box_bd .tfbtns .btns .btn{flex:1;margin:0;width:100%;} .list03{flex-direction:column;} .list03 .list_txt .txt_t p{overflow:visible;} .list03 .list_txt h3.title,.list01-big .list_txt h3.title{font-size:var(--font-size25);align-items:center;} .list03-2 .list_txt h3.title{font-size:var(--font-size16);} .list03-2 .list_txt{margin:15px 0 0;} .list03-2 .list_txt .prostate{right:auto;left:0;} .list03-4-2 .list_txt h3.title{font-size:var(--font-size20);} .classnews{padding:10px 0 0;} .class_r .list_txt{margin:15px;} .txtlr,.txtlr.lr_reverse{flex-direction:column;} .txt_l{padding:0 !important;text-align:center;width:100%;} .txt_l .Txt{text-align:center;letter-spacing:-0.03em;} .txt_r{padding:30px 0 0;width:100%;max-width:none;} .qv li{flex-direction:column;padding:50px 30px 15px;position:relative;margin:30px auto 15px;} .qv li .i_icon{position:absolute;top:-20px;left:50%;transform:translateX(-50%);} .note_big{font-size:var(--font-size25);padding:40px 0 20px;} .box03>div{margin:0 3%;} .box03>.box02{padding:20px 0 35px;} .steplist em{position:absolute;left:50%;top:-20px;transform:translateX(-50%);} .steplist li{margin:20px 0 65px !important;width:100%;position:relative;padding:55px 20px 15px;text-align:center;} .steplist li::after{display:block;left:50%;top:100%;transform:rotate(90deg) translate(20px,25px);width:50px;margin-left:0;} .steplist li:last-child{margin-bottom:0 !important;} .steplist li:last-child::after{display:none;} .contactbox{flex-direction:column;padding:20px;} .ct_l{color:var(--color-white);font-size:var(--font-size30);width:100%;letter-spacing:-0.05em;} .ct_r{width:100%;padding:15px 0 0;} .list04>ul>li,.list04 .owl-item>li{padding:15px;} .notebox .fixedarea{width:100%;flex-direction:column;padding:15px 2%;} .notebox p:nth-of-type(even){padding:10px 0;width:100%;} .notebox p .btn{flex:1;} .notebox p .i_system{width:30px;height:40px;} .notebox.fixed{height:165px;} .notebox.fixed .fixedarea{top:55px;width:100%;} .vdomain{flex-direction:column;} .vdocont{padding:15px 0 0;width:auto;} .vdocont h2.title{white-space:inherit;padding:0 4% 10px;font-size:var(--font-size20);} .vdocont .rwdbox{height:0;padding:50% 0 20px;border-radius:0;} .vdocont .gopath{width:auto;margin:0 4% 10px;} .vdolist{height:auto !important;flex-basis:auto;position:relative;overflow:visible;} .vdolist h3.title{font-size:var(--font-size14);} .vdolist li a{font-size:var(--font-size14);} .vdolist li a:before{top:11px;} .vdolist li.v-play a:hover:before{transform:translateX(0) rotate(-90deg);} .vdolist_hd{display:flex;} .vdolist_bd{display:none;position:fixed;left:0;bottom:0;top:468px;width:100%;z-index:2;background:rgba(0,0,0,.9);overflow-y:auto;} body.vdofixed{overflow:hidden;} body.vdofixed .vdolist_hd span{opacity:1;} .formbox_icon .tfbar{padding:0;} .formbox_icon .tfbar b{padding:10px 10px 0 0;} .formbox_icon .tfbar b .i_icon{width:28px;height:28px;} .box_yellow{padding:35px 15px 20px;} .owl01-2 .owl-carousel .owl-nav button{top:200px;transform:translateY(0);} .startupbox{padding:20px 20px 340px;} .startupbox:before{width:90%;height:0;padding:60% 0 20px;} .startupbox:after{height:350px;} .startupbox h2.title{font-size:var(--font-size60);} .startupbox .btnarea{left:5%;top:110%;} .mb_r{flex-direction:column;} .mb_main_r{width:100%;margin:0;padding:20px 0 0;} .mb_main .Txt{padding:0;} .mb_main .txtbox{padding:0;} .tabcont>.r{position:static;display:flex;justify-content:flex-end;padding:0 0 10px;} .tabcont>.r .btn{padding:8px 20px;margin:0 0 0 5px;} .tablewrap table thead,table.responsive tr{border:0 !important;} table.responsive tr{border-bottom:1px solid #e8e8e8 !important;} .list03-3 li{width:48%;} .orderdetail .order_box ul li:nth-of-type(1){width:auto;flex:1;} .orderdetail .order_box ul li:nth-of-type(2),table .order_box ul li:nth-of-type(3),table .order_box ul li:nth-of-type(4){width:150px;} .classbox .brnbox{width:100%;flex:auto;border-radius:10px 10px 0 0;} .formbox_icon .tfbar-2{flex-direction:row;} .formbox_icon .tfbar b{flex-basis:160px;} .seltype.w300 + .tf{max-width:none;} .list02-2 li{width:48%;} .list01>ul>li,.box02 .list01>ul>li{width:48%;} .boxlist li{width:31%;} .swal2-popup.popout.popout3{width:90%;max-width:100%;} .list03-4-3{max-width:100%;} .list03-4-3 li{padding:10px;} .box04{padding:20px 0;} [class^="instbox"] .lrbox,.box04 .lrbox{flex-direction:row;} .instbox1 .lrbox .r{width:400px;} .instbox1 h2.title{font-size:var(--font-size30);line-height:1.8;} .instbox1 p br{display:none;} .instbox1 p{line-height:1.6;} .instbox1_2{padding:40px 0 !important;} .instbox1_2 .r{width:340px !important;} .instbox1_3{margin:60px auto;} .instbox1_3 .r{width:250px !important;} #tab1 .planlist>ul>li{width:32.33333%;} #tab2 .planlist>ul>li{width:49%;} #tab3 .planlist{transform:none;} #tab3 .planlist>ul{justify-content:center;} .planlist>ul>li:first-child{display:none;} .planlist>ul>li:last-child{display:flex;width:100% !important;align-items:center;} .planlist>ul>li:last-child img{max-height:330px;} .btn04-2{margin-top:20px;} .lessonset .lesson_hd h3.title{font-size:var(--font-size14);} .lessonset span:nth-of-type(2){min-width:130px;} .tabcont input.tf{max-width:none;} .swal2-popup.popout.popout2-2 .tb01 thead{display:none;} .swal2-popup.popout.popout2-2 .tb01 tbody{display:flex;flex-direction:column;gap:10px;} .swal2-popup.popout.popout2-2 .tb01 tbody tr{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 10px;} .swal2-popup.popout.popout2-2 .tb01 tbody tr:nth-of-type(even){background:#e8e8e8;} .swal2-popup.popout.popout2-2 .tb01 tbody tr td{display:flex;flex:1;width:100%;padding:5px 10px;} .swal2-popup.popout.popout2-2 .tb01 table tr td b{display:block;flex-basis:110px;text-align:left;} } @media(max-width:850px) and (min-width:700px){ .class_r .txt_b{position:relative;padding-right:280px;} .class_r .proprice{position:absolute;right:0;bottom:10px;} .class_r .probtn{flex-direction:row;} .fleximg img{height:250px;} .list02-2 li{width:48%;} .tinfo ul{flex:1;min-width:auto;} .list_l{flex-basis:200px;} .mb_l .tinfo{padding:15px;} .icontxtlist-2 ul{justify-content:center;} .icontxtlist-2 li{width:31.33333%;box-shadow:8px 8px 0 var(--color-darkblue);} .icontxtlist-2 li img{height:80px;} .contactbox{padding:60px;} .list01>ul>li,.box02 .list01>ul>li{width:48%;} .class_r .star{margin:0 15px 5px;} .class_r .progressbar{margin:0;} /*.box02 .list01>ul>li:last-child{display:none;}*/ .list03-4-2{margin:30px auto !important;} } @media(max-width:725px){ .box04{padding:0;} .box04 .box_hd{padding:15px 0 0;} .instbox1 .lrbox .r{width:350px;} .instbox1 p{font-size:var(--font-size14);} .list02-3 h3.title{font-size:var(--font-size20);} .inbox2{width:100%;} .inbox2 .box_hd{padding:15px 3% 0;} .inbox2 .lrbox{flex-direction:column;align-items:center;} .inbox2 .lrbox .r{margin:0;} .inbox2 .lrbox .l{width:100%;margin-bottom:20px;} .tabbox2 .tab_bd{padding:20px 0;} .tabbox2 .tab_bd .btn{display:none;} .inbox3+.imglist{transform:none;} .instbox3{min-height:340px;background-size:auto 100%;} .instbox3 h4.title{font-size:var(--font-size28);line-height:1.6;margin:20px 0 0;} .instbox3 h4.title b{display:block;line-height:1.6;} .instbox3 h4.title b span{display:block;} .list02-3 .ticon{top:-30px;} } @media(max-width:600px){ .startupbox2{margin:0;} .startupbox2 .inbox{width:100%;} .startupbnr{height:180px;border-radius:0;border:none} .startupbnr h2.title{font-size:var(--font-size24);} .startupbnr p{font-size:var(--font-size16);} .startupbnr .btnarea{position:static;} .boxlist{padding:0 25px 20px;} .boxlist h3.title{font-size:var(--font-size14);} .boxlist .btxt{font-size:var(--font-size12);} .boxlist li{padding:40px 10px 15px;widtH:28%;} .instbox1{padding:30px 0 30px;} .instbox1 .lrbox{flex-direction:column;} .instbox1 .lrbox .l img{max-width:90%;} .instbox1 .lrbox .r{width:100%;margin:0;} .instbox1 .btn04-2{width:220px;display:flex;margin:20px auto 0;} .instbox1_2 .lrbox .l img{max-width:400px;width:90%;} .instbox1_2 .r{width:100% !important;margin:0 !important;} .box04 .box_hd h2.title br{display:block;} .list02-3{padding:0 2%;} .list02-3 ul{flex-direction:column;gap:15px;} .list02-3 li{width:100%;margin:0;} .list02-3 h3.title{font-size:var(--font-size32);} .planlist>ul{flex-direction:column;gap:25px;} .planlist>ul>li{width:100% !important;} .plan_bd{min-height:240px;} .plan_bd ul li{padding:20px 0;} .inbox2 .box04 .box_hd h2.title,.instbox2 h2.title{font-size:var(--font-size24);} .instbox2{padding:30px 30px 190px;} .instbox2 h2.title{padding:0 0 20px;} .instbox2 p{font-size:var(--font-size16);} .instbox2 .lrbox .l{padding:0;} .instbox2 .lrbox .r{width:65%;} .tabbox2{padding:0 5%;} .tabbox2 .tab_hd{padding:10px 0 0;} .tabbox2 .tab_hd ul{flex:1;justify-content:space-between;} .instbox3{margin:10px auto;} .instbox1_3{margin:30px auto;} .instbox1_3 p{font-size:var(--font-size20);} .instbox1_3 .lrbox .r{margin:20px 0 0 !important;width:100% !important;} .impbtn{margin:10px auto 0;} .inbox3+.imglist{margin:20px 0 0;} .list02-3 .ticon{position:static;justify-content:center;margin:0 0 20px;transform:translateY(-10px);} .tfbtns .btns{flex-direction:column;gap:0;} .tb01 .tb_hd{flex-direction:column;align-items:flex-start;} .tb01 .tb_hd .l{width:100%;} .tb01 .tb_hd .l .btn_s{position:absolute;right:0;} .swal2-popup.popout.popout3 .tb01 .tb_hd{padding:0;} .swal2-popup.popout.popout3 .tb01 .tb_hd .l{flex-direction:column;align-items:flex-start;} .swal2-popup.popout .tb01 .tfbtns .btns{gap:10px;padding:10px 0 0;} .swal2-popup.popout .tb01 .tfbtns .btns .btn{margin:0 !important;} .swal2-popup.popout .swal2-styled.swal2-confirm,.swal2-popup.popout .swal2-styled.swal2-cancel{font-size:var(--font-size16);} .lessonset ul ul li{flex-wrap:wrap;} .swal2-popup.popout .swal2-actions{flex-direction:column;gap:5px;} .swal2-popup.popout .swal2-actions button{width:100%;margin:0;} } @media(max-width:560px){ /* 首頁 */ #header .logo{position:static;transform:translateX(0);} .inbox{width:94%;} .shbox{left:2%;width:96%;} .bnrbox .owl-dots{display:none;} .scrolldown{display:none;} .box_hd .h2wrap{padding-top:150px;} .h2wrap .i_htitle03_chat,.h2wrap .i_htitle05_chat{width:100% !important;background-size:165px;top:0px;left:0;} .box_bd{padding:10px 0;} .icontxtlist ul{justify-content:center;} .icontxtlist li{width:29.33333%;padding:5px 5px 10px;margin:10px 2%;box-shadow:8px 8px 0 var(--color-blue);} .icontxtlist li h3.title{font-size:var(--font-size14);padding:5px 0 0;} .icontxtlist-3 li.biger{width:100%;box-shadow:8px 8px 0 #fff,9px 9px 0 var(--color-blue);} .icontxtlist-3 li{width:45%;} .list_txt h3.title{-webkit-line-clamp:3;} .probtn{flex-direction:column;align-items:stretch;position:relative;padding:10px 0 8px;} .list01 ul .owl-item>li{width:98%;} /*.list01 .list_txt h3.title{min-height:auto;}*/ .list01 + .btnarea,.box_bd .btnarea{position:static;display:flex;justify-content:flex-end;padding:10px 0 0;} .proprice2 .price p{font-size:var(--font-size30);} .startupbox{padding:20px 20px 390px;} .startupbox:after{right:50%;transform:translateX(50%);} .startupbox li{width:100%;transform:translateY(0px) !important;margin:110px 0 0 !important;} .list02 ul{flex-direction:column;} .list02 li{width:100%;} .owl01-2 .owl-carousel .owl-nav button{top:100px;transform:translateY(0);} .startupbox .btnarea{justify-content:center;padding:50px 30px 0;} .startupbox .btnarea .btn{flex:1;} #footer{padding:20px 8px 50px;position:relative;} #footer .inbox{flex-direction:column;position:static;} .cpright{position:absolute;left:2%;bottom:20px;width:94%;text-align:center;} .cpinfo{flex:1;position:relative;padding:30px 0 0 120px;} .cpinfo ul{position:absolute;left:0;bottom:-3px;} .cpinfo li {padding:10px 12px 5px 0;} /* 購物車 */ .cartcont{width:100vw;transform:translateX(100%);} .cartclose{display:flex;} .p_box p{font-size:var(--font-size16);} /* 購物確認 */ .tflist li .tf{width:100%;} .box_bd .form_r .tfbtns .btns{flex-direction:column;} .order_box .tt_box ul li{display:none;} .order_box ul li:nth-child(1){display:block;text-align:left;width:100%;} .order_box .conbox ul{padding:0 0 15px 30px;position:relative;} .order_box .conbox ul li{width:100%;} .order_box .conbox ul li:nth-child(1){position:absolute;left:5px;top:0;width:auto;} .order_box .conbox ul li:nth-child(3),.order_box .conbox ul li:nth-child(4){padding:0;text-align:right;} .order_box .conbox ul li:nth-child(5){position:absolute;left:40px;bottom:3px;width:auto;} .order_box ul{flex-direction:column;justify-content:flex-start;align-items:flex-start;position:relative;} .p_code{width:100%;justify-content:flex-start;align-items:flex-end;} .p_code .tfbar{width:100%;margin:0;flex:1;} .p_code .tfbar .tfcont{width:100%;} .p_code .tfbar .tf{width:100%;} .p_code .btn{margin:0 0 7px;} .price p{font-size:var(--font-size30);} .tb_lr{justify-content:flex-end;} .all_price{padding:20px 0 0;} /* 列表 */ .bg_white{padding:15px 0 10px;margin-bottom:40px;}.bg_white.nosort{margin-bottom:0px;} .bg_blue{margin-bottom:0;} .hdnav .l{margin:0;} .sort{position:absolute;top:100%;transform:translateY(20px);flex-basis:auto;width:100%;} .list01>ul>li{width:100%;margin:15px 0;} /* 課程內容頁籤 */ .article_bg:before{top:80px;} .skillist{flex-direction:column;padding:0 0 30px;} .skillist ul{width:100% !important;} .vdolist.vdolist-2 .op_cont ul li{flex-direction:column;align-items:flex-start;padding:10px;} .vdolist.vdolist-2 .op_cont span{justify-content:space-between;width:100%;} .vdolist.vdolist-2 .op_cont em{flex-basis:auto;} .vdolist.vdolist-2 .vbox.rwdbox{max-width:100%;} .vdolist.vdolist-2 h3.title{padding:10px 10px 40px 10px;font-size:var(--font-size16);} .vdolist.vdolist-2 h3.title sub{display:none;} .vdolist.vdolist-2 h3.title span{top:auto;bottom:10px;} .vdolist.vdolist-2 h3.title span sub{display:flex;transform:translateY(-1px);} .msglist .btnarea{padding:0 0 10px;} .msglist .btnarea .btn{width:100%;} .msglist li:before{width:40px;height:50px;} .msglist li .chatbox{flex:1;max-width:none;} .formbox:not(.formbox_icon) .tfbar.tfstar{flex-direction:row-reverse;} /* 優惠內容 */ .box02{padding:15px;} .box02 .list01>ul>li{width:100%;} .list01-big .list_txt{margin:10px 0 15px;} /* 許願 */ .icontxtlist-2 li{width:46%;box-shadow:8px 8px 0 var(--color-darkblue);} .icontxtlist-2 li img{height:80px;} .fleximg img{transform:translateX(0);} /* 創業GO */ .flexslider{flex-direction:column;} .fleximg{flex:auto !important;height:220px;margin:0 0 10px;} .fleximg img{width:100%;} .fleximg .flextxt{bottom:0px !important;top:0;display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;} .fleximg .flextxt h3.title{font-size:var(--font-size25);top:-25px;left:15px;transform:translateX(0%);position:static;padding:0 0 10px;} .fleximg .flextxt p{opacity:1;} .quote h3.title{font-size:var(--font-size15);letter-spacing:-0.03em;} .quote h3.title span:before{bottom:-4px;height:15px;} .quote p{font-size:var(--font-size12);} .list04>ul>li,.list04 .owl-item>li{flex-direction:column;display:flex;justify-content:space-between;align-items:stretch;border:1px solid #e8e8e8;border-radius:10px;box-shadow:0px 4px 5px rgba(0,99,178,0.06);margin:0 1px 20px;} .list04 .owl-carousel .owl-nav button{top:105px;transform:translateX(0);} .list_r{margin:20px 0 0;} .list_r .tinfo{flex-direction:column;} .list_r .tbtns{justify-content:space-between;} .list_r .tbtns .btn{padding:8px 15px;margin:0;} .list_r .tbtns .i_icon{display:none;} /* 純文章 */ .txtbox{max-width:100%;} /* 搜尋 */ .box02 .box_hd h2.title2 b span::after{height:15px;bottom:0;} /* 會員專區 */ .mbbox{flex-direction:column;} .mb_l{margin:0;} .mbbox .brnbox{width:100%;margin:15px 0 0;} .formbox:not(.formbox_icon) .tfbar{flex-direction:column;padding:5px 0;align-items:flex-start;} .formbox:not(.formbox_icon) .tfbar b{flex-basis:auto;padding:0;} .formbox:not(.formbox_icon) .tfcont{width:100%;} .ckratype2{width:31.33333%;} .ckratype2.w-double{width:63.5%;} .box_bd .tfbtns .btns{flex-direction:column;} .tfbtns .btns .btn:nth-of-type(2),.tfbtns .btns a.btn + .btn{margin:5px 0 !important;} /* 講師 */ .mb_l .tinfo{display:none;} .mb_r{width:100%;margin:15px 0 0;flex-direction:column;} .txtbox .btnarea .btn{width:100%;} .previewbox{flex-direction:column;} .classnews-2 li{padding:15px !important;} .list04.owl02-3 .owl-item>li{margin:0 1px 0 0;} .previewbox a{max-width:none;min-width:auto;} /* POPOUT */ .swal2-popup.popout .swal2-close{right:5px;top:5px;font-size:1.9em;} .swal2-popup.popout.popout2{width:100%;} .swal2-popup.popout.popout2 .list_txt{flex-direction:column;} .swal2-popup.popout.popout2 .txt_b{flex-basis:auto;width:100%;} .sysmsg{padding:10px 0 0;} .formbox_s{max-width:none;} .bluemsg p{font-size:var(--font-size15);} .list03-3 ul{margin:0;} .list03-3 li{width:100%;margin:10px 0;} .txtbox2{padding:15px 15px 20px;} .txt_img{margin:-15px -15px 20px;} .ftnav li{padding:2px 12px 2px 0;} .orderdetail .order_box .conbox ul{position:relative;flex-direction:row;justify-content:flex-start;align-items:flex-start;position:relative;padding:0;} .orderdetail .order_box .conbox ul li:nth-child(1){position:static;} .orderdetail .order_box .conbox ul li:nth-child(3),.orderdetail .order_box .conbox ul li:nth-child(4){padding:0;text-align:right;} .orderdetail .order_box .conbox ul li:nth-child(5){position:absolute;left:40px;bottom:3px;width:auto;} .orderdetail .order_box ul li{padding:12px 15px !important;} .orderdetail .order_box ul li:nth-of-type(2),table .order_box ul li:nth-of-type(3),table .order_box ul li:nth-of-type(4){width:25%;padding:12px 5px !important;} .orderdetail .order_box .tt_box ul li:nth-of-type(1){width:50% !important;text-align:left;} .orderdetail .order_ot{padding:12px 15px;flex-direction:column;} .orderdetail .order_ot .l{flex-direction:column;gap:15px 0;width:100%;} .orderdetail .order_ot .l p{width:100%;} .orderdetail .order_box .conbox ul.conlast{flex-direction:row;width:100%;} .orderdetail .order_box .conbox ul.conlast li{width:25%;} .orderdetail .order_box .conbox .imgbox{display:none;} .box02_2{padding:15px 0;} .serlist li{width:49%;} .list03-4 li{flex-direction:column;} .list03-4 .list_img{width:100%;} .list03-4 .list_txt{margin:10px;} .serlist ul{width:200px;} .serlist li{width:100%;} .box_blue br{display:block;} .owl-carousel .owl-nav button.owl-next{right:-10px;} .owl-carousel .owl-nav button.owl-prev{left:-10px;} .box_yellow .owl-carousel .owl-nav button.owl-next{right:-35px;} .box_yellow .owl-carousel .owl-nav button.owl-prev{left:-35px;} .box03 .box02{overflow:visible;} .notebox .btn{margin:2px 7px;} .mbarea{justify-content:flex-end;} .quote{padding:30px 0;} .quote.bor_b{border:none;} .txtlr{padding:40px 0;} .txt_l h3.title img{height:35px;} .txt_r{display:none;} .box02 .box_hd.hd_l{justify-content:center;} .box02 .box_hd.hd_l h2.title{font-size:var(--font-size24) !important;} .formbox_icon .tfbar b{flex-basis:130px;} .tab_hd ul li a{font-size:var(--font-size12);min-width:75px;height:auto;} .prosubtotal + .btn{margin-top:10px !important;} .proprice + .probtn{padding:10px 0 0 !important;} .cartcont .prosubtotal + .btn{margin-top:0 !important;} .class_r .proprice + .probtn{padding:0 !important;} .txt_hd .subinfo + h3.title{font-size:var(--font-size16);margin:15px 0 5px;} /* 進場動畫 */ .shape-wrap .shape{height:40vh !important;} .pos_contact{right:16px;bottom:16px;} .pos_contact img{height:55px;} .gotop.show2{bottom:80px;} .sysmsg p>span{display:block;} .startupbox2 .btnarea{justify-content:center;} .imglist img{max-width:180px !important;max-height:88px;} .box01_2 .box_bd{padding:30px 0;} .belsslist{padding:20px 0 0;} .belsslist .item{width:260px;} .list03-4-2{margin:10px auto !important;} .list03-4-2 li{margin:10px 0;padding-bottom:5px;} .list03-4-2 .list_txt{margin:15px 0 10px;} .list03-4-2 .list_txt h3.title{font-size:var(--font-size16);} .linetitle img{height:95px;} .box_hd.box_hd_lr{justify-content:center;margin:0 auto;} .bnrsbox ul{display:flex;flex-direction:column;padding:5px 0;gap:15px;} .bnrsbox .list_txt h3.title{font-size:var(--font-size16) !important;} .bnrsbox .list_txt{padding:25px 15px 3%;} .bnrsbox .list_txt .txt_t p{line-height:1.4;} .bnrsbox li a{padding:0;height:345px;background-size:auto 100%;} .bnrsbox li a:hover{background-size:auto 103%;} .linetitle:before,.linetitle:after{margin:0;} .gotop{width:30px;height:30px;right:15px;} .gotop:before{display:none;} .imglist.marquee,.str_move,.str_move_clone{height:88px !important;} .tfflex{flex-direction:column;} .tfflex>div{width:auto;} .i_htitle03_chat{background-image:url('../images/content/icon_h_title03_chat_phone.svg');} .i_htitle05_chat{background-image:url('../images/content/icon_h_title05_chat_phone.svg');} .inbox2 .box04 .box_bd,.inbox3 .box04 .box_bd{padding:20px 0;} .box_c .tfcont input.tf,.box_c .tfcont select.seltype{max-width:100%;} .tfcard{padding:60px 10px 30px;} .tfcard .lrbox{flex-direction:column;} .tfcard .vdobox{width:200px;height:140px;} .tfcard ol li{line-height:1.5;} .tfcard .i_star{left:10px;top:10px;} .tfcard .i_arrow{right:30px;top:40px;} .tfcard .i_txt{font-size:var(--font-size30);bottom:auto;top:145px;} .tfbar-3-3{gap:0;} } @media(max-width:385px){ .quote h3.title{font-size:var(--font-size14);} } @media(max-width:350px){ #header .bluemsg p{font-size:var(--font-size14);} #header .logo img{height:30px;} .icontxtlist li{padding:5px 5px 10px;} .icontxtlist li h3.title{font-size:var(--font-size12);} .icontxtlist-2 li h3.title{font-size:var(--font-size12) !important;} .formbox_s .note p{font-size:var(--font-size14);} .txtbox .btnarea .btn{min-width:250px;} .box_blue{font-size:var(--font-size16);} .quote h3.title{font-size:var(--font-size12);} .quote h3.title span:before{height:10px;} .txt_l h3.title{font-size:var(--font-size32);} .list_r .tbtns .btn{padding:8px 11px;} .notebox .btn{padding:7px 15px;} .tablewrap .btn{min-width:70px;padding:7px 5px;} td .ckcode{font-size:var(--font-size14);} } @media(min-width:1430px){ .txtlr{align-items:stretch;} .txt_l{padding:0 18px 0 0;display:flex;justify-content:stretch;align-items:stretch;flex-direction:column;} .txt_l h3.title{position:relative;top:-25px;} .qv{width:100%;display:flex;flex-direction:column;justify-content:stretch;align-items:stretch;flex:1;} .qv ul{flex:1;display:flex;flex-direction:column;justify-content:space-around;} .qv li{margin:0;} .qv li .i_icon{margin:0 28px 0 0;} .txtlr.lr_reverse .txt_l{padding:0 0 0 38px;} .flexslider + .box03 .quote,.flexslider + .box03 .txtlr{margin:0 100px;} .notebox .btn{min-width:197px;} } @media(min-width:1190px){ .hdnav li{padding-right:55px;} .hdnav li:last-child{padding-right:0;} .hdnav li a{padding:5px 5px 5px 0;} .hdnav2 li{padding-right:30px;} } @media(min-width:1150px) and (max-height:850px){ .vdocont .rwdbox{padding:57% 0 20px;height:auto;} } @media(min-width:1300px) and (max-height:850px){ .vdocont .rwdbox{padding:49% 0 20px;height:auto;} } @media(min-width:1450px) and (max-height:850px){ .vdocont .rwdbox{padding:41% 0 20px;height:auto;} } @media(hover:hover){ .icontxtlist li:hover{background-color:var(--color-yellow);box-shadow:0 0 0 transparent;transform:translate(10px,10px);} }