@import url("../../../icon_new_6.6/css/all.min.css");
@import url("../../../File/css/ani.css");

/*設計專用樣式Start*/
:root {
    --item1:#b1372e;
    --item: #ed494c;
    --join1: #025387;
    --join2: #016dbb;
    --join3: #4da4d1;
    --white: #fff;
    --gray: #7d7d7d;
    --black:#000;
    --mistYellow:#fff9d7;
}
.red{color: var(--item1);}
.mistYellow{color: var(--mistYellow);}
.white{color:var(--white);}
.wrap_all{word-break: keep-all;overflow-wrap: break-word;-webkit-hyphens: auto;-moz-hyphens: auto;hyphens: auto;-webkit-text-size-adjust: 100%;}
.intro .yt_play{width: 65%;height: 30rem;}
.intro_list{margin: 0 .5rem 2rem 4.5rem;margin: auto;}
.intro{position: relative;left:0;right: 0;bottom: 0;}
.intro_list li,.media_hit{font-size: 1.3rem;}
.intro_list li{list-style: decimal;margin:.5rem auto 1rem;clip-path: polygon(95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);padding: 0.5rem 3rem;background: var(--join2);color:var(--white);font-size: 1.7rem;}
.group_title{font-size: 3.25rem;text-align: center;margin:1rem 0 .25rem;font-weight: bold;color:var(--join1);padding: 0 3rem;}
.intro_content{font-size:2.2rem;line-height: 1.6;width: 100%;padding: 0 0 1rem 3.5rem;margin: auto;}
.intro_content mark{border-bottom: 1px dotted var(--gray);background: #ffffff3f;padding: .25rem 0;}
.intro_content strong{font-weight: 999;padding: 1.5rem 6rem 0 0;color:var(--join2);font-size: 1.8rem;}
.intro_note{font-size: 1.8rem;line-height: 2rem;color:var(--item);border: 1px solid;margin: 0.5rem;border-radius: 50rem;padding:2rem .8rem;position: absolute;right: 5rem;bottom: 0;}
.learn_group{font-size: 1.25rem;margin: .5rem auto 0;position: relative;top: 0;left: 0;bottom: 0;right: 0;}
.success{width: 870px;margin: 1rem auto;}
.success img{width:100%;}

.learn_list,.media_group{text-align: left;padding:.8rem 3rem 0 .5rem;}
.learn_img img{width: 90%;margin: auto;}
.learn_list{display: flex;flex-wrap: wrap;display: block;z-index: 1;}
.learn_list dl{width: 35%;box-sizing: border-box;padding: 0 20px;font-size: 1.35rem;}
.learn_list1{position: absolute;top: 70px;left: -160px;color:#f0680a;}
.learn_list2{position: absolute;bottom: 90px;left: -30px;color:#d34060;}
.learn_list3{position: absolute;top: 40px;right: -125px;color:#1772a0;}
.learn_list4{position: absolute;bottom: 60px;right: -225px;color:#308290;}
.learn_list dt{display: none;}
.learn_list1 dt{color: #e89800;}
.learn_list2 dt{color: #ee7320;}
.learn_list3 dt{color: #4295d2;}
.learn_list4 dt{color: #67676d;}

.service dt{font-size: 1.5rem;text-align: center;color: #0164a9;padding: .6rem 0;background: #fff;letter-spacing: .05rem;border-radius: 1.5rem 1.5rem 0 0;}
.learning .service {width: calc(100% / 4);text-align: center;padding: 0.35rem;}

.txt_beat {margin: 0 .5rem;}
.txt_beat > span { animation: bounce .5s cubic-bezier(0.05,0,0.2,1) infinite alternate;display: inline-block;color:var(--item);font-weight: bold;font-size: 1.4rem;/*color:#ffeb8f;font-size: 1.8rem;*/}
.txt_beat > span:nth-of-type(1) { animation-delay: 0s; }
.txt_beat > span:nth-of-type(2) { animation-delay: 0.08333333s; }
.txt_beat > span:nth-of-type(3) { animation-delay: 0.16666667s; }
.txt_beat > span:nth-of-type(4) { animation-delay: 0.25s; }
.txt_beat > span:nth-of-type(5) { animation-delay: 0.33333333s; }
.txt_beat > span:nth-of-type(6) { animation-delay: 0.41666667s; }
@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-0.5em); }
}

.ytplay{padding: 0 0 2.5rem;}
.ytplay iframe{width: 94%;height: 30rem;margin: 1rem 0 0;border: .1rem solid #fff;}
.ytplay dl{font-size: 1.8rem;text-align: left;color:var(--join2);color:var(--white);margin: auto 0;}
.ytplay dd{line-height: 3.5rem;padding: 0 0.5rem;}
.ytplay dd a{background:var(--item);color:var(--white);line-height: 5rem;padding: .3rem 1rem .5rem;text-decoration: none;border-radius: 50rem;filter: drop-shadow(1px 2px 2px #0000003f);}
.media_out{padding: 1rem .5rem;margin: 1rem 0;background: linear-gradient(-45deg, #fcdddf9f  0%, #fcdddfaa  40%, transparent 95%);}
.media_item{font-size: 1.8rem;line-height: 1.6;color:var(--item1);font-weight: bold;}
.media_photo {padding: .5rem .5rem 0 6rem;}
.media_photo img,.media_photo figcaption{text-align:center;margin: 0 auto;}
.media_photo img{border-radius: 1rem;padding: 0 0 .5rem 0;}
.media_photo figcaption a{font-size: 1.35rem;font-weight: bold;color:#3b2c1c;}
.media_content{font-size: 1.15rem;line-height: 1.8rem;padding: 0.5rem;}
.media_content b , .media_content a{color: var(--join1);font-weight: 500;}
.media_hit {border-bottom: 1px dotted var(--gray);color:var(--join2);font-weight: bold;padding: .15rem 0 .5rem;font-size: 1.325rem;}

/*設計專用樣式END*/

/*舊稿複製*/
.banner {width: 1300px;text-align: center;position: relative;left: -10rem;}
.banner ul {display:flex;flex-wrap: wrap;width:100%}
.banner h1 {display: block;font-size:7.6rem;font-weight: bold;color:var(--mistYellow);text-align: center; margin: 0;letter-spacing: 20px;line-height: 120px;}
.banner h1 small,.banner h1 strong,.banner h1 span {letter-spacing:0;}
.banner h1 small {font-size:.6rem;font-weight: 500;display: block;color:var(--white);}
.banner h1 strong {display: block;letter-spacing:0;font-size: 0.86em;line-height: 6.5rem;}
.banner h1 span {font-size: 0.5em;font-weight: 500;}
.banner li {display: inline;position: relative;margin:2.25rem -1rem .2rem 0;}
.banner li:nth-child(1) {width: 45%;}
.banner li:nth-child(2) {width: 55%;}
.banner .master_link{width: 70%;margin: auto;}
.banner li a{color:var(--white);font-size: 1.9rem;line-height: 4.5rem;}
.banner li:nth-child(1) img {min-width: 100%;position: absolute;left: 18%;top: -20%;;z-index: 3;}
/* .banner li:nth-child(2) img {position: fixed;right: 0;top: 14%;z-index:0} */
.banner .logo img {display: inline;width: 16%;padding: 0 1.5rem 3.25rem .25rem;}
.banner .star img {position: fixed;right: 0;top: 14%;z-index:0}


/*自修神器*/
.comic img {width:100%;text-align: center;margin: 0 auto;filter: drop-shadow(1px 5px 5px #0000001f);}
.comic a {display:block;text-align:center;margin:0 auto}
.comic_sub {font-size: 2.2rem;text-align: center;color:var(--item1);font-weight: bolder;padding: .5rem .25rem .25rem;}
.comic_sub2{font-size: 2.25rem;padding: 2rem .25rem .25rem;}
.comic_sub small{font-size: smaller;}
.comic_page {text-align: center;padding: .35rem;}
.comic_page div{border-radius: 1.5rem 1.5rem 0 0;background-color:var(--join3)/*var(--white)*/;}
.comic_page figcaption {font-size: 1.5rem;color:var(--white)/*var(--join1)*/;padding: 1rem 0 ;}
.comic_page a {color: var(--join1);}
.morebtn li{background-color:#ffe9ea;font-size: 1.5rem;padding:.5rem 1rem;filter: drop-shadow(1px 3px 3px #0000001f);text-decoration: none;border-radius: 1rem;margin: .5rem 0;}
.morebtn li,.morebtn li a{color:var(--item1);text-decoration: none;}
.comic img:hover ,.morebtn li:hover{filter: drop-shadow(1px 1px 2px #0000002f);}
.morebtn {font-size: 1.15rem;text-align: center;padding: 1rem 0 1rem;width: 82%;margin: auto;display: inline-flex;}
.media .morebtn{width: 42%;}
.suit {width: 80%;padding: .3rem 6rem;margin:0 auto 2%;}
.suit li {font-size: 1.3rem;border-radius: 1rem;padding: 0 1rem;}
.suit li i , .suit li a {display: inline-block;color: #4d4d4d;}

/*css reset 歸0*/
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,ol,ul,li,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;}
/*remember to define focus styles!*/
:focus{outline:0;}
*{box-sizing: border-box;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
body{font-family:"Microsoft YaHei", "微軟正黑體", "Arial";}
a{text-decoration:underline;}
a:hover{text-decoration:none;}
ul,li,dd,ol{margin:0;padding:0;list-style-type:none;}

/*Back to top button */
#back-top {position: fixed;bottom: 30px;margin-left: -150px;right: 1%;z-index: 99;}
#back-top a {width:50px;height:50px;border-radius:50%;display: block;text-align: center;font: 11px/100% 'Arial', 'Helvetica', 'sans-serif';text-transform: uppercase;text-decoration: none;color: #bbb;transition: 1s;}
#back-top a:hover {color:var(--black);}
/*arrow icon (span tag)*/
#back-top span {width:50px;height:50px;display: block;margin-bottom: 7px;background: rgba(99, 99, 99, 0.74) url(../images/up-arrow.png) no-repeat center center;border-radius:50%;transition: 1s;}
#back-top a:hover span {background-color: #777;}

/*共用*/
.bgcolor0 {background: linear-gradient(to left,#016dbb 0%,#398fce 50%,#c3e5ff 100%);}
.bgcolor1 {/*background-color: #F6F6F6; background: linear-gradient(0deg, #e991ab 0%, #f7bece 30%, #f6f6f6 70%);*/background: linear-gradient(0deg, #94c0ee 0%, #d1eaff 30%, #f6f6f6 70%);}
.bgcolor2 {background-color: #398fce/*#fff9d7*/;}
.bgcolor3 {background-color: #fffee0/*#98caf0*/;}
.bgcolor4 {background-color: #f6f6f6;background: linear-gradient(90deg, #dbdbdb,#f6f6f6,#f6f6f6,#dbdbdb);}
.bgcolor5 {background-color: #DFDFDF;}
/*所有元素漸變0.5秒*/*{transition: all .5s;}

.ft_NOTO{font-family: "Microsoft YaHei",'Noto Sans TC', "sans-serif";}
.ft_NOTOSer{font-family: 'Noto Serif TC', 'serif';}
.ft_Meiro{font-family: "Meiryo", "Meiryo UI", "Arial", "sans-serif";}

#LINE .Community dt i {padding: 0 .3rem;}
#LINE .Community dd {color: #ffffff;}
#askarea_out input, #askarea_out select {color: rgb(82, 80, 80);padding: 0 0.4rem;}
#askarea input[type="submit"],#askarea input[type="reset"]{color:var(--white);}
#askarea_out img{width: 25%;display: inline-block;margin: 0.5rem 0;}

@media (min-width: 1201px){
    #BodyContent{width:100%;padding:0;margin:0;}
    #BodyContainer_event{width:100%;margin:0;}
    #BodyHeader_event_rwd,#topli{display:none;}

    /*資料集中1200px寬外框*/
    #Master_title,#event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth{display:inline-block;width:1200px;margin: auto;}
    #Master_title{padding:2.5% 0;}
    #event_master{padding: 3% 0 2.5%;}
    #event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth{padding:2% 0;}    
    /*標題大小*/
    /* h1{ font-size: 3em; }
    h2{ font-size: 2.5em; }
    h3{ font-size: 2.2em; }
    #event_sixth nav a{ font-size: 1.3em; } */
    /* bodyHeader */
    #BodyHeader_event,#header-share{width:100%;float:left}
    #BodyHeader_event #header-share{line-height:2;font-size:17px;margin-bottom:0;margin-top:0;background-color:var(--white)}
    #BodyHeader_event #header-share img{margin-bottom:5px;max-width: 12%;display: inline-block;}
    #BodyHeader_event a{color:#333;font-size:17px}
    #BodyHeader_event a:hover{text-decoration:none;color:#666;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:var(--black)}
    #footer_inline ul li{display:inline;margin:auto 0.5%;width:13%;}
    #footer_address ul li{width:100%;line-height:1.9em;font-size:1em;}
    #adinfo_out #adinfo{width:50%;display:inline;margin:auto 1%;}
    #footer_inline ul li img{width:10%;height:auto;vertical-align:middle;display: inline-block;}
    #footer_line{width:90%;border-top:thin solid #999;margin:2% 5%}
    /*ask*/
    #askarea_out *{font-family:"微軟正黑體";font-size:1em}
    #askarea_out{/*background:#F6F6F6;*/background: linear-gradient(90deg, #dbdbdb,#f6f6f6,#f6f6f6,#dbdbdb);width:100%;display:inline-block;text-align:left}
    #askarea{width:1200px;margin:3rem auto 2.5rem;}
    #askarea img{width:8%;height:auto}
    #askarea p{margin-top:1%;margin-bottom:1%;font-size:1.1em}
    #askarea .asktitle,#askarea .asktitle p{text-align:center}
    #askarea .asktitle{color:var(--black);font-size:1.55em;margin-top: 1%;margin-bottom: 1%;}
    #askarea #formlist{width:80%;margin:2% auto;color:var(--black)}
    #askarea SELECT,#askarea input{border-radius:7px;background-color:#fff;border:1px solid #dadadadc;padding:.5%;margin:auto 1% 1% auto}
    #askarea SELECT{width:19.7%}
    #askarea input{color:363636}
    #askarea input[name="sContent"]{width:50%}
    #askarea input[type="text"]{width:40%;/*height:20px*/}
    #askarea input[type="radio"]{margin-left:3%}
    #askarea input[type="submit"],#askarea input[type="reset"]{width:11%;height:45px;color:var(--white);background-color:var(--item);padding:.5em}
    #noie{color:var(--white);width:100%;height:60px;text-align:center;border:1px solid #069;background-color:#39C;_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: 13px;} */
}

@media (max-width: 1200px){

    /*隱藏的區塊*/
    #BodyHeader_event,.hottxt,#noie{display:none;}
    /*會撐開的版面控制*/
    #BodyContent {width: 100%;padding:0;}
    #BodyContainer_event{width: 100%;}
    /*header*/
    #BodyHeader_event_rwd {	text-align: center;width:100%;height: auto;margin:0 auto;background-color:var(--white);position:fixed;top:0;float:left;z-index:9;}
    #BodyHeader_event_rwd img,#BodyFooter_rwd #footer_inline ul li img{display: inline-block;}
    @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;}}
    /*選單*/
    #mbSearch {margin: 5% 0 0 0;border-bottom: 1px solid var(--gray);width: 100%;}
    #mbSearch input {border: none;outline: 0;font-size: 2em;padding-left: 6%;}
    /*body*/
    #Master_title{display:inline-block;width:100%;}/*主圖位置ID*/
    @media all and (orientation : portrait){#Master_title{margin-top: 15%;vertical-align: bottom;}}
    @media screen and  (orientation:landscape) {#Master_title{margin-top: 10%;vertical-align: bottom;}}
    /*滿百100%區域*/
    .row100{width:100%;}
    /*資料集中寬外框*/
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth{width:100%;padding:2%;}
    /*div section標籤段落*/
    /* section p,div p{font-size:1.3em;line-height:1.9em;text-align:left;} */
    /* nav p{line-height:1.8rem;} */
    /*標題大小*/
    /* h1{font-size: 2.2em;}
    h2{font-size: 2.0em;}
    h3{font-size: 1.6em;} */
    #event_sixth nav a{ font-size: 1.2em;}
    /*footer*/
    #BodyFooter_rwd{float: left;width:100%;background-color:var(--white);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:var(--black);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:var(--black);line-height: 2em;}
    #BodyFooter_rwd #footer_address ul{float: left;padding:0;text-align: center;margin-bottom: 1%;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{background:#f6f6f6;width: 100%;height: auto;float: left;padding:4% 1% 2% 1%;}
    #askarea .asktitle,#askarea .asktitle p{text-align: center;}
    #askarea .asktitle{font-size: 1.0em;color:var(--black);margin-bottom: 2%;line-height: 2em;}
    #askarea p {margin:0% auto auto 5%;	width: 90%;}
    #formlist{width: 99%;float: left;margin:2% auto auto 0%;padding-right:1%;font-size: 0.8em;color:var(--black);}
    input[name="sContent"]{width:50%;}
    input[type="text"]{	width:99%;}
    SELECT,input{border-radius: 7px;font-size: 1.0em;margin:auto 1% 3% auto;background-color:var(--white);height:30px;}
    SELECT{width:100%;border:var(--white);padding: 0.5%;}
    input{border:var(--white);padding: 1%;color: #C6C6C6;}
    input[type="submit"],input[type="reset"]{color:var(--white);background-color:var(--item);-webkit-appearance:none;/*ios系統專用，默認的系統樣式*/font-size:1em;margin-top:5%;padding:2%;height:auto}
    input[type="radio"]{width:1em;height:1em;margin-left: 3%;}
    /*TOP按鈕*/
    #topli,#topli a{color:var(--white);text-decoration: none;}
    #topli{width:50px;height:50px;text-align:center;border-radius: 9999em;background-color:var(--black);opacity:0.4;position:fixed;line-height:50px;font-size: 15px;}
    @media screen and  (orientation:portrait) {#topli{right:1%;bottom:8%;}}
    @media screen and  (orientation:landscape){#topli{right:1%;bottom:15.8%;}}

    .bgcolor0 {background: linear-gradient(to right, #016dbb 0%,#398fce 60%, #c3e5ff 100%);}    
    .banner{width: 100%;position: relative;left: 0;}
	.banner li {width: 100%;margin: auto;}
	/* .banner li:nth-child(2) img {display:none;} */
    /* .banner li:nth-child(1),.banner li:nth-child(2) {width: 50%;} */
    .banner li:nth-child(1) img {position: relative;left: -28%;top: auto;bottom: 0;z-index: 3;min-width: 120%;}
    .banner .logo img {display: inline;width: 20%;padding: 0 1.25rem 2rem 0;}
    .banner .star img {display:none;}
    .banner h1{font-size:4.8rem;letter-spacing:10px;position: relative;left: 5.5%;}
    .banner h1 strong {line-height: 5rem;}
    .banner .master_link {width: 95%;margin: auto auto auto 3rem;}
    .banner li a {font-size: 1.6rem;line-height: 7rem;}

    .group_title {font-size: 2.65rem;padding: 0 1rem;margin: 1.5rem 0 .25rem;}
    .last_group_title, .media_out {width: 100%;margin:.5rem  auto;}
    .intro_content {width: 100%;font-size: 2rem;padding: 0 0 1rem 0;}
    .intro_content strong {padding: 1.5rem 0 0.5rem 0;text-align: center;}

    .intro .yt_play{width: 85%;height: 23rem;margin: 0 auto 1.5rem;}
    .ytplay {margin: 0 auto;}
    .ytplay iframe{width: 90%;height: 25rem;margin: auto;}
    .ytplay dl {margin: 1rem auto;width: 80%;}

    .comic_page {width: calc(100% / 2 - 2%);margin: 0 auto 1.5rem;}
    .comic_page3 , .learning .service {width: calc(100% / 2 - 2%);margin: .25rem auto;}
    .comic_sub2{padding: .5rem 0 0 ;}
    .suit {width: 100%;padding: .2rem 3rem 1rem;margin: 0 auto;justify-content: center;}
    .suit li {font-size: 1.5rem;border-radius: 1rem;padding: .5rem 1.25rem;}

    .learn_list, .media_group {text-align: left;padding: 1rem 1.5rem .5rem;}
    .media_item ,.media_hit{margin: auto;text-align: left;}
    .media_photo{padding: 0;}
    .media_photo figcaption a {font-size: 1.5rem;}
    .media .morebtn {width: 85%;}

    /* .success {width: 100%;margin:auto;}
    .success img {display: none;} 
    .learn_list1,.learn_list2,.learn_list3,.learn_list4{position:unset}
    .learn_list {padding:0;}
    .learn_list dl {width: 100%;margin: 0 auto 1.5rem;display: flex;align-items: center;}
    .learn_list dt{width: 250px;display: inline-block;}
    .learn_list dt img{width: 100%;}
    .learn_list dd{width: 80%;padding: 0 0 0 1rem;}
    .intro_list li {margin: 0.5rem}
    .intro_note {position: absolute;right: 12rem;bottom: 2rem;}*/

}

@media (min-width: 992px) and (max-width: 1199px) {
    .bgcolor0 {background: linear-gradient(to left, #016dbb 0%,#398fce 60%, #c3e5ff 100%);}   
    .banner h1 {font-size: 6.25rem;position: relative;left: -6%;margin: 5rem auto 0;}
    .banner li:nth-child(1) img {min-width: 135%;position: relative;left: -30%;top: auto;}
    .banner .logo img {width: 18%;padding: 0 1.25rem 2.25rem 0;}
    .banner h1 strong {line-height: 8rem;}
    .banner .master_link {width: 90%;margin: auto 2.5rem auto auto ;}
    .banner li a {font-size: 2rem;line-height: 9rem;}

    .group_title {font-size: 3rem;}
    .comic_sub {font-size: 1.9rem;}
    .comic_page {width: calc(100% - 2%);margin:.25rem auto;}
    .comic_page2 , .learning .service {width: calc(100% / 2 - 2%);margin: .25rem auto;}
    .learning .service img{width: 100%;}
    .learn_list, .media_group {padding: 1rem 1.5rem .5rem 0;}
    .comic_page3 {width: calc(100% / 3 - 2%);margin: .25rem auto;}
    .comic_sub2{padding: 1.5rem 0 0;}
    .comic_page figcaption {font-size: 1.35rem;}
    .morebtn {width: 100%;}
    .suit {width: 100%;padding: .2rem .5rem 1rem;}

}

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

@media (max-width: 767px) {
    .banner ul {flex-direction: column;}
    .banner li:nth-child(1) , .banner li:nth-child(2) {width: 100%;}
    .banner h1 {font-size: 3.8rem;left: 0;}
    .banner h1 strong {line-height: 2rem;}
    .banner li a {font-size: 1.5rem;line-height: 3rem;}
    .banner .logo img {display: inline;width: 17%;padding: 0 1rem 1.5rem 0;}
    .banner .master_link {width: 100%;margin:1.8rem auto 1rem;}
    .banner li:nth-child(1) img {position: relative;left: -8%;min-width: 100%;}

    .group_title {font-size: 2rem;padding: 0 1rem;margin:1rem auto 0;}
    .intro_content {font-size: 1.5rem;}
    .intro .yt_play {width: 95%;height: 12rem;margin: 0 auto 0.5rem;}
    .ytplay {padding: 0;}
    .ytplay iframe {width: 96%;height: 13rem;}
    .ytplay dd {font-size: 1.25rem;line-height: 2rem;}
    
    .comic_sub {font-size: 1.6rem;text-align: center;color: var(--item1);font-weight: bolder;padding: .5rem .25rem .25rem;}
    .comic_page ,.comic_page2, .comic_page3, .learning .service {width: 85%;margin: 0 auto .25rem;}
    .comic_page figcaption ,.service dt {font-size: 1.25rem;}

    .morebtn {width: 95%;padding: 0 0 1rem;}
    .morebtn li , .suit li{font-size: 1.2rem;}
    .media .morebtn {width: 80%;}
    .media_photo figcaption a {font-size: 1.45rem;}
    .media_photo img {width: 120px;}
    .media_item {font-size: 1.4rem;padding: 0 .5rem;}
    .media_hit {font-size: 1.15rem;padding: .5rem;}
    .media_content {font-size: 1.05rem;line-height: 1.5rem;}

    /* .success img {width: 90%;}
    .learn_list dl {display: flex;flex-wrap: wrap;justify-content: center;}
    .learn_list dt {font-size: 1.5rem;padding: 0 0 1rem;}
    .learn_list dd {text-align: center;width: 100%;padding: 0;}
    .intro_list {margin: auto;}
    .learn_group {font-size: 1.15rem;}
    .learn_list, .media_group {padding: 0.5rem 0 0;} */

}

@media screen and (-webkit-min-device-pixel-ratio:0) {/*Webkit*/
}
@-moz-document url-prefix(){/*Firefox*/
}
@media \0screen\,screen\9 {/*IE 6 7 8*/
}
@media screen\0 {/*IE 8 9 10 11*/
}
@media print {
}