@import url("../../../../icon_new/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%;line-height:1.5em}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
body{font-family:"微軟正黑體",Arial;color: var(--black);}
a{text-decoration:underline;}
a:hover{text-decoration:none;}
/* ul,li{margin:0;padding:0;list-style-type:none;} */

main {font-family: 'Noto Sans TC', sans-serif;}
a {text-decoration:underline;color: inherit;}
a:hover {text-decoration:none;}
:root {
    --black: #383838;
    --blue: #005a98;
    --sky_blue: #4b9ec5;
    --red: #c30d23;
    --orange: #db8001;
    --green: #007f49;
    --d_yellow:#e7b132;
    --o_yellow:#fbc800;
    --yellow: #ffe900;
    --brown: #946134;
    --text1: 2.3rem;
    --text2: 1.7rem;
    --text3: 1.5rem;
    --text4: 1.3rem;
    --text5: 1.2rem;
    --ff: microsoft yahei;
    --t_sh:1.2px 0 1px var(--black), -1.2px 0 1px var(--black), 0 1.2px 1px var(--black), 0 -1.2px 1px  var(--black);
}
.bg_padding{padding:1%;}
.bgcolor0{background: url("../../images/1307070_8.png");}
.bgcolor1{background-color: white;}
.bgcolor2{background-color: #FCFCFC;}
.bgcolor3{background-color: #DFDFDF;}
.bgcolor4{background-color: #FCFCFC;}
.bgcolor5{background-color: #DFDFDF;}
.block {display: block;}
.text-center {text-align: center;}
.ml-2 {margin-left: 0.5rem;}
.mt-4 {margin-top: 1rem;}
.mx-2 {margin-left: 0.5rem;margin-right: 0.5rem;}
.m-auto {margin: auto;}
.w-full {width: 100%;}
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.grid { display: grid; }
h1 {font-size: 2rem;}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.5rem;}
img {max-width: 100%;height: auto;}
small { font-size: 0.85em; }

/*標題*/
.main_title{font-size: var(--text3);font-family: var(--ff);font-weight: bold;}
.sale_title{font-size: var(--text2);background: var(--blue);color: white;text-align: center;font-family: var(--ff);font-weight: 600;letter-spacing: 0.08rem;}
.sale_list:nth-child(even) .sale_title { background: var(--orange); }
.sale_title span{color: var(--yellow);}
.exp_title,.type_title{font-size: var(--text1);text-align: center;}

/* main */
.banner { justify-content: center;align-items: center;background: url("../../images/1307070_1.png") center top / 100% auto no-repeat;padding: 1.5rem 0; }
.main_sale_title { font-size: var(--text2); }

/*共用*/
.price_red{color:#f44923;font-weight:bolder;margin: 0 .2rem;}

/*優惠內容*/
.sale_list{margin: 1rem auto;font-size: var(--text5);}
.sale_list dl{ margin: .5rem auto 1.5rem;align-items: flex-start; }
:is(.sale_list1, .sale_list2) dl{ justify-content: space-between;grid-template-columns: 17% 80%; }
:is(.sale_list1, .sale_list2) dt{
    font-size: var(--text3);background: var(--blue);color: white;display: inline-block;padding: 0 .1rem;
    align-self: start;grid-area: 1/1/2/2;text-align: center;
}
.sale_list2 dt { background: var(--orange); }
.sale_list2 dl:nth-of-type(1) dt:nth-of-type(1) { background: none;color: var(--orange);font-size: var(--text3);text-align: center;grid-area: 1/1/2/4;margin-bottom: 0.5rem; }
.sale_list2 dt:nth-of-type(2) { grid-area: 2/1/3/2; }
.sale_list2 dt:nth-of-type(3) { grid-area: 3/1/4/2; }
.sale_list1 dd:nth-of-type(1) { grid-area: 1/2/2/4; }
.sale_list1 dd:nth-of-type(2) { grid-area: 2/2/3/4; }
.sale_list1 dd:nth-of-type(3) { grid-area: 3/2/4/4; }
.sale_list2 dl:nth-of-type(1) dd { grid-area: 2/2/3/4; }
.sale_list2 dl:nth-of-type(2) { grid-template-columns: 25% 70%; }
.sale_list2 dl:nth-of-type(2) dd { grid-area: 1/2/2/4; }
.sale_list_other dl { text-align: center;}

/*經驗談*/
.experience { background: var(--sky_blue);position: relative;margin-top: 4.5rem;padding-bottom: 1rem; }
.experience::before {
    position: absolute;content: '';background: url("../../images/1307070_10.png") center;
    width: 100%;height: 67px;top: -3.5rem;left: 0;
}
.exp_title { padding: 1.5rem 0 1rem;color: var(--yellow);font-weight: bold;font-family: var(--ff);text-shadow: var(--t_sh); }
.story_box figure {padding: 0;margin: auto 0;text-align: center;transition: .3s ease;z-index: 0;}
.story_box figure:is(:hover, :focus) { transform: scale(1.35);z-index: 5; }
.story_box figure:not(:hover, :focus-within) { opacity: 0.9; }
.man_pic img {border-radius: 50%;background: white;}
.story_item {align-items: flex-start;justify-content: space-around;margin-bottom: 1rem;}
.story_item dl {width: calc(100% - 38%);font-size: 1.125rem;padding: 0 0 0 1rem;}
.story_box {width: calc(100%/2 - 1rem);align-items: center;}
.story_box .story_tit{
    color: var(--o_yellow);font-size: 1.2rem;margin-top: .6rem;
    text-shadow: var(--t_sh);text-align: center;margin: auto;
}
.story_box dl dt {color: var(--o_yellow);font-size: 1.25rem;padding-bottom: 0.125rem;margin-bottom: 0.3rem;}
.story_box dl dt a { text-shadow: var(--t_sh); }
.story_box dl dt small {color: initial;font-weight: initial;font-size: initial;}
.story_box dl dd {padding: 0;margin: auto;}
.story_box p {background: linear-gradient(to bottom,transparent 0%,#ffffffcc 20%);border-radius:8px;padding:1rem 0.5rem;margin: 0 auto 0.25rem;text-align: justify;}
.story_box p strong {color: var(--o_yellow);}
.grade {background-color: var(--o_yellow);color: var(--black);padding: 0 0.5rem;width: fit-content;margin-right: .5rem;}
.g-top {color: var(--o_yellow);font-weight: bold;}
.story_box:last-of-type .story_tit{color:  var(--yellow);font-size: 1.2rem;}
.story_box:last-of-type .story_tit:nth-of-type(2) { margin-top: 0.6rem; }
.story_box:nth-of-type(1) .story_tit:nth-of-type(2) { margin-top: 1.8rem; }
.story_box:last-of-type dl .grade {background-color: var(--yellow);color: var(--black)}
.story_box:last-of-type dl .g-top, .story_box:last-of-type p strong, .story_box:last-of-type dl dt {color: var(--yellow);}

/*課程型態*/
.type_title { font-family: var(--ff);font-weight: bold;font-size: var(--text2); }
.type_title span { color: var(--brown); }
.type_content{justify-content: space-around;align-items: center;text-align: center;margin-top: 1rem;margin-bottom: 2.5rem;}
.type_item {width: calc(100%/3 - 10px);}
.type_stit{font-size: 1.5rem;color:#007eb9;justify-content: center;align-items: center;}
.font_small { border-radius: 50%;background: var(--brown);color: white;font-size: 0.6em;padding: 0 0.15rem; }

.study_type_container { position: relative; }
.study_type_container::before {
    position: absolute;content: '';
    background: url("../../images/1307070_6.png") center / cover;
    width: 100%;height: 57px;
    left: 0;bottom: 0;
}


#askarea {background-color: #0092b9;padding-top:2%;}
#askarea input[type="submit"],#askarea input[type="reset"] {background-color: #333;padding:0.5em;color: white !important;}
#toolbar input.img {vertical-align: middle;}


@media screen and (min-width: 1201px) {
    #BodyHeader_event_rwd,#topli {display:none;}
    #BodyContentMainNavigator header h1 {font-size: 1.15em;float:left;}
    #BodyContentMainNavigator header img {margin:auto 3px;}	
    #BodyContainer_event {margin: 0 auto;text-align:center;width:1000px;}
    /*資料集中1200px寬外框*/
    #event {width:750px;margin: auto;}
    #event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {padding: 1rem;}
    #event_master {padding: 0 3.5rem 1rem;}
    /* bodyHeader */
    #BodyHeader_event #header-share {line-height: 2;margin: 0 auto;	background: #FFF;}	
    #BodyHeader_event #header-share img {margin-bottom: 5px;}
    #BodyHeader_event a,#BodyHeader_event {font-size: 0.98em;}
    #BodyHeader_event a {color: #333;}
    #BodyHeader_event a:hover {text-decoration: none;position: relative;top: 2px;bottom: 2px;}
    /* Footer */
    #BodyFooter_rwd,#footer_line,#footer_address ul li,#footer_inline ul {display:inline-block;}
    #BodyFooter_rwd {width:100%;margin-top:2%;}
    #footer_address,#footer_address #adinfo_out,#footer_address #adinfo {margin:0 auto;width:100%;}
    #footer_inline ul,#footer_address ul {width:100%;margin:0% auto;}
    #footer_inline a,#footer_address a {color:#000}
    #footer_inline ul li {display:inline;margin:auto 1%;width:15%;}
    #footer_address ul li {width:100%;line-height:1.9em;font-size:0.95em;}
    #adinfo_out #adinfo {width:50%;display:inline;margin:auto 1%;}
    #footer_inline ul li img {width:16%;height:auto;vertical-align:middle;}
    #footer_line {width:90%;border-top:thin solid #999;margin:2% 5%}
    /*ask*/
    #askarea_out,#askarea {display:inline-block;}    
    #askarea {width: 100%;}
    #askarea p {margin:0 auto;line-height:2.2em;}
    #askarea .asktitle {font-size: 1.5em;color: #FFF;text-align: center;}
    #askarea #formlist,#askarea input[type="submit"],#askarea input[type="reset"] {font-size: 1em;color: #FFF;}
    #askarea #formlist {width: 80%;margin:3% auto auto 10%;padding-bottom: 1%;}
    #askarea SELECT,#askarea input {border-radius: 3px;}
    #askarea SELECT {width: 10%;background: #FFF;border: #FFF;padding: 0.5%;margin:auto 1% 1% auto;	width:15%;}
    #askarea input {background: #FFF;border: #FFF;padding: 0.5%;margin:auto auto 1% 1%;color: #585858;}    
    #askarea input[name="sContent"] {width:50%;}
    #askarea input[type="text"] {width:35%;}
    #noie {color: #FFF;width: 100%;height:60px;text-align: center;border: 1px solid #006699;background: #3399CC;_z-index: 9999;z-index: 9999;	position:fixed; _top:expression(documentElement.scrollTop+"px");/*讓選單覆蓋內容不會隨著捲軸滑動而消失專用*/left: 0;top: 0;}
    #noie a {color: #FC0;}
    .hottxt {color: #ffd942; font-size: 1.0em;}
}

@media screen and (max-width: 1200px) {
    /*隱藏的區塊*/
    #BodyHeader_event,.hottxt,#noie,#BodyContentMainNavigator,#BodyContentAd,#BodyMenu {display:none;}
    /*會撐開的版面控制*/
    #BodyContent,#BodyContainer_event,#BodyContentMainDetail_learning {width: 100%;}
    #BodyContent {padding:0;}
    #BodyContentMainDetail_learning {float:left;margin:0;}
    /* Header */
    #BodyHeader_event_rwd {text-align: center;width:100%;height: auto;	margin:0 auto;background:#FFF;position:fixed;top:0;float:left;z-index:9;}
    @media screen and (orientation:portrait) {#BodyHeader_event_rwd img {max-width: 50%;margin:2.5% auto;}}
    @media screen and (orientation:landscape) {#BodyHeader_event_rwd img {max-width: 25%;margin:2.5% auto 1% auto;}#Master_title{margin-top: 3rem;}}
    /*資料集中寬外框*/
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:0% auto;display:inline-block;width:98%;padding:1%;}
    #Master_title {display:inline-block;width:100%;margin-top: 7rem;}
    #Master_title img {width:80%;height:auto;}
    .buy_go {margin:3% 0;display:block;padding:0;}
    .buy_go li {line-height:1.9em;font-size:1.3em;}
    .buy_go li,.buy_go li a {font-weight:normal;}
    .buy_first:before {display:block;width:80%;margin:0 auto;}
    .stru_group {width:97.5%;padding: 1%; display: inline-table;}
    .stru_title {font-size:5vw;margin: 2% auto;}    
    .course_note {font-size:1.25em;line-height:1.9em;}
    .course_note a {margin-right:1%;}
    /* Footer */
    #BodyFooter_rwd {float: left;width:100%;background:#FFF;margin-top:5%;}
    #BodyFooter_rwd #footer_line {width: 100%;margin-bottom: 3%;margin-top: 5%;display: block;float: left;height: auto;text-align: center;border-top-width: thin;	border-top-style: solid;border-top-color: #999;}
    #BodyFooter_rwd #footer_inline a {color: #000;line-height: 2em;}
    #BodyFooter_rwd #footer_inline ul {float: left;padding:0;width:100%;margin-bottom: 1%;text-align:center;}
    #BodyFooter_rwd #footer_inline ul li img {max-width:40%;height:auto;	margin-bottom: 2%;}
    #BodyFooter_rwd #footer_inline ul li {float: left;display: inline-block;	margin-right: auto;	line-height: 2em;font-size: 1em;clear: both;width: 100%;}
    #BodyFooter_rwd #footer_address {margin-top: 0%;	float: left;width: 100%;margin-right: auto;text-align: center;margin-left: auto;}
    #BodyFooter_rwd #footer_address a {color: #000;line-height: 2em;}
    #BodyFooter_rwd #footer_address ul {float: left;padding:0;text-align: center;margin: 0.5%;width: 100%;clear: both;}
    #BodyFooter_rwd #footer_address ul li {float: left;display: block;width: 100%;line-height: 2em;text-align: center;font-size: .8em;}  
    /*ask*/
    #askarea {width: 98%;height: auto;float: left;padding:4% 1% 2% 1%;}
    #askarea .asktitle,#askarea .asktitle p {text-align: center;}
    #askarea .asktitle {font-size: 1.0em;color: #FFF;margin-bottom:5%;}
    #askarea p {margin:0% auto auto 5%;	width: 90%;}
    #formlist {width: 99%;float: left;margin:3% auto auto 0%;padding-right:1%;font-size: 0.8em;color: #FFF;}
    input[name="sContent"] {width:50%;}
    input[type="text"] {width:99%;}
    SELECT,input {border-radius: 7px;font-size: 1.0em;margin:auto 1% 7% auto;background: #FFF;height:30px;}
    SELECT {width:100%;border: #FFF;	padding: 0.5%;}
    input {border: #FFF;padding: 0 1%;color: #C6C6C6;}
    input[type="submit"],input[type="reset"] {font-size:1em;margin-top:5%;padding:1%;height:auto}
    input[type="radio"] {width:1em;height:1em;margin-left: 3%;}
    /*TOP按鈕*/
    #topli,#topli a {color: #fff;text-decoration: none;line-height:50px;}
    #topli {width:50px;height:50px;text-align:center;border-radius: 9999em;background:#000;opacity:0.4;position:fixed;font-size: 15px;}
    @media screen and  (orientation:portrait) {#topli {right:1%;bottom:8%;}}
    @media screen and  (orientation:landscape) {#topli {right:1%;bottom:15.8%;}}
}
    
@media screen and (min-width:768px) and (max-width:1199px) and (orientation: portrait) { 
    .sale { margin: auto 3rem; }
    .story_box:nth-of-type(1) .story_tit:nth-of-type(2) { margin-top: .6rem; }
    .story_box:last-of-type .story_tit:nth-of-type(2) { margin-top: .8rem; }
}
    
@media (max-width:767px) {
    :root { --text1: 1.7rem;--text2: 1.5rem;--text3: 1.4rem;--text4: 1.2rem;--text5: 1.1rem; }
    @media screen and ( width < 360px) { :root { --text2: 1.3rem;--text3: 1.2rem;--text4: 1.1rem;--text5: 1rem; }#Master_title{margin-top: 2rem !important;}.banner { padding: 0 2rem; } }
    
    #Master_title{margin-top: 4rem;}
    .story_box,.type_item {width: 92%;justify-content: center;}
    .story_box:nth-of-type(1) { margin-bottom: 2rem; }
    .story_item dl {width: auto;}
    .sm\:block {display: block;}
    .banner { padding: 2rem 2rem 0; }
    .main_sale_title {font-size: var(--text4);margin: 1rem auto;}
    :is(.sale_list1, .sale_list2, .sale_list_other) dl{ grid-template-columns: repeat(1, 1fr);text-align: center;margin: 1rem 3rem; }
    :is(.sale_list1, .sale_list2) dt { grid-area: 1/1/2/4;width: fit-content;margin: auto;padding: 0 1rem; }
    .sale { margin: auto 1rem; }
    :is(.sale_title , .exp_title) span { display: block; }
    .sale_list1 dd:nth-of-type(1) { grid-area: 2/1/3/4; }
    .sale_list1 dd:nth-of-type(2) { grid-area: 3/1/4/4; }
    .sale_list1 dd:nth-of-type(3) { grid-area: 4/1/5/4; }
    .sale_list2 dl:nth-of-type(1) dt:nth-of-type(1) { grid-area: 1/1/2/4;width: initial; }
    .sale_list2 dl:nth-of-type(1) dt { grid-area: 2/1/3/4; }
    .sale_list2 dl:nth-of-type(1) dd { grid-area: 3/1/4/4; }
    .sale_list2 dl:nth-of-type(2) dd { grid-area: 4/1/5/4; }
    .ps { text-align: center; }
    .story_box figure:not(:hover, :focus-within)  { opacity: 1; }
    .story_box figure:is(:hover, :focus) { transform: scale(1); }
    .story_box:nth-of-type(1) .story_tit:nth-of-type(2) { margin-top: 0.6rem; }
    .study_type_container::before { height: 3%; }
}