﻿@import url("../../../icon_new/css/all.min.css");
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}
:focus {outline:0}
ins {text-decoration:none}
del {text-decoration:line-through}
body {font-family:"微軟正黑體",Arial;color: #4d4d4d;}
a {text-decoration:underline;color: inherit;}
a:hover {text-decoration:none;}
ul,li {margin:0;padding:0;}
.bgcolor0 {background-color: #FCFCFC;}
.bgcolor1 {background: linear-gradient(to bottom,#fffff3 70%,#ffffd7 90%);padding: 1rem 0;text-align: center;}
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.mx-2 {margin: auto 0.25rem;}
/*所有元素漸變0.5秒*/
* {transition: all .5s;}
/*標題大小*/
h1 {
    font-size: 2.5rem;padding:0 3rem .5rem;margin-bottom: 1.5rem;color: var(--red);
    border-bottom: dashed 1px var(--red);display: inline-block;position: relative;
}
h1::after{
    position: absolute;content: "";
    width: 0;height: 0;
    left: 0;right: 0;margin: auto;
    bottom: -16px;
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: var(--purple) transparent transparent transparent;
}
h2 {font-size: 2.0rem;}
h3 {font-size: 1.8rem;}
:root {
	--red: #ff4311;
	--blue: #257fc5;
	--green: #287E7B;
	--yellow: #FFEE38;
	--orange: #E2831C;
	--navy: #056EC8;
	--cream:#fff9cc;
    --purple:#683D81;
}
/* event */
#Master_title {border-bottom: 10px solid var(--purple);}
#Master_title h1 {font-size: 3rem;position: relative;}
#event_master{background:linear-gradient(to bottom,#FFF5EF 80%,white 100%);}
.issue {font-size: 2.5rem;}
.free-tag {color: var(--orange);position: absolute;right: 0;font-size: 2rem;}
.outline {margin:0 auto 1rem;justify-content:space-between;text-align: center;}
.outline li {color: var(--purple);font-size: 1.25rem;list-style-type: none;font-weight: bold;}
.outline li:nth-of-type(1) {font-size: 1.5rem;color: var(--red);}
.outline li:nth-of-type(n+1):nth-of-type(-n+2) {width: 83%;}
.outline li:nth-of-type(3) {color: var(--red);margin-top: -13%;width: 17%;}
@keyframes move {0%{left:0;}100%{left: 1%;}}
.discount {color: var(--red);}
.session_title{font-size: 2.2rem;width: 100%;color:var(--purple);font-weight: bold;margin-top: -3%;text-align: center;}
.session {text-align: left;margin: 1rem auto;width: calc(100%/2 - 1rem);padding: 0 0.5rem 1rem;border-bottom: dotted 1px var(--orange);}
.session:nth-of-type(n+5):nth-of-type(-n+6){padding: 0 0.5rem;border-bottom: none;}
.session dt {font-size: 1.5rem;color:purple;font-weight: bold;padding:0 5rem 0 .6rem;border-left: solid 3px var(--purple);border-bottom: solid 1px var(--purple);display: inline-block;margin-bottom: .3rem;}
.session dd {margin: 0.25rem auto;font-size: 1.1rem;}
.session dd span {letter-spacing: 2px;color: darkslateblue;margin-right: .1rem;}
.session dd span::after{content: "▸";}
.session dd a {color: white;padding:.2rem 2rem;text-decoration: none;border-radius: 27px;background:linear-gradient(-45deg,var(--orange) 10%,var(--purple) 30%);margin-top: .5rem;display: inline-block;transition: .3s ease;}
.session dd a:hover{letter-spacing: 0.3rem;}
.session_ps {animation: move .7s linear alternate infinite;position: relative;color: var(--red);margin: auto;}
.paper_ps {animation: move .7s linear alternate infinite;position: relative;color: var(--red);margin: auto;font-size: 1.25rem;}
.lecture-title {
    font-size: 1.5rem;color: #fff;background: linear-gradient(20deg,var(--green) 0%,var(--purple) 10%);
    padding: .5% 3%;letter-spacing: 0.1rem;
    border-bottom-width: medium;border-bottom-style: solid;border-bottom-color: #dedede;border-radius: 10px;
}
.session dd:last-of-type {text-align: center;}
.lecture_cont p {text-align: left;padding: 0.5rem 0;text-indent: 2rem;margin: 0 0 .5rem;}
.lecture_cont:nth-of-type(2){margin-top: 2rem;}
.circle {display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: center;width: 100%;}
.circle li {
    width: 11rem;height: 11rem;display: inline-flex;align-items: center;justify-content: center;
    border-radius: 50%;margin: 0.5rem;padding: 0 1rem;font-size: 1.3rem;font-weight: 700;text-align: center;
    box-sizing: border-box;background: linear-gradient(to bottom, var(--yellow) 36%,var(--orange) 100%);
}
.hash-tag {font-size: 1.25rem;font-weight: bold;padding:0 6rem;text-align:left;}
.hash-tag li {list-style-type: none;}
.hash-tag a {color: var(--blue);margin-right: 1rem;transition: .3s ease;}
.hash-tag a:hover{color: var(--red);}
.hash-tag a:hover::before{content: "▸";color: var(--red);margin-right: 0;}
.video-wrap {width: 80%;margin: auto auto 1.5rem;}
.embed-container {position: relative; padding-bottom: 56.25%;height: 0; overflow: hidden;max-width: 100%;border: solid 1px #ECAE6A;border-radius: 25px;}
.embed-container iframe, .embed-container object, .embed-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.asktitle dt {font-size: 1.5rem;}
small{font-size: .75em;}
#askarea {background-color: #ffad50;}

@media screen and (min-width: 1201px) {
    /*主要內容欄*/
    #BodyContentMain {width:750px;float:left;padding-left: 2.8em;padding-bottom: 2em;}
    /*導覽列*/
    #BodyMenu nav+table td {text-align: left;}
    #BodyMenu nav+table td img {width: 955px;border-right: 21px solid #B4D1EA;}
    #BodyContentMainNavigator {width:100%;float:left;text-align:left;font-size:14px;color:#000000;line-height: 20px;margin-top: 10px;margin-bottom: 10px;}
    #BodyContentMainNavigator a, #BodyContentMainNavigator a:visited {color:#8E8E8E;text-decoration:none;}
    /* 詳細資訊 */
    #BodyContentEvent {width: 750px;float: left;}
    /* Event_header */
    /*PC*/
    #BodyHeader_event #header-share { line-height: 1.2em;font-size: 13px;color: #333;}	
    #BodyHeader_event #header-share a {font-size: 13px;color: #333333;text-decoration: underline;}
    /*手機*/
    #BodyHeader_event_rwd {display:none;}
    /*滿百100%區域*/
    .row100 {width:100%;}
    /*資料集中1200px寬外框*/
    #Master_title,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:0% auto;display:block;width:730px;padding:10px;text-align: center;}
    #Master_title {width:750px;padding:0;}
    #event_master {margin: 0 auto;padding: 15px 10px;text-align: center;}
    /* ask */
    #askarea_out {background-color: #217BBA;width: 59%;margin-left: 14.2%;float: left;padding-top: 2%;}
    #askarea {width: 100%;float: left;padding-top: 2%;text-align: left;font-family: "Microsoft JhengHei";border-radius: 20px;margin: 3% 0 0;}
    #askarea .asktitle {font-size: 1.2em;color: #333;text-align: center;padding: 1% 0;}
    #askarea #formlist {width: 90%;float: left;margin-right: auto;margin-left: 8.5%;margin-top: 3%;font-size: 1em;color: #333;padding-bottom: 2%;}
    #askarea SELECT {border-radius: 7px;width: 18%;/*width: 25%;*/background-color: #FFF;border: #FFF;padding: 0.5%;margin-right: 1%;margin-bottom: 1%;}
    #askarea input {border-radius: 7px;background-color: #FFF;border: #FFF;padding: 0.5%;margin: auto 1% 1%;color: #333;}
    #askarea input[type="submit"] {color: #FFF;background-color: #e51686;font-size: 1em;padding:0.5em;}
    #askarea input[name="sContent"] {width:50%;}
    #askarea input[type="reset"] {color: #FFF;background-color: #9a9a9a;font-size: 1em;padding: 0.5em;}
    #askarea input[type="text"] {width:35%;}
    /* Footer */
    #BodyFooter_rwd {float: left;width: 1000px;background-color:#FFF;margin-left: auto;border-top-width: 18px;border-top-style: solid;border-top-color: #b4d1ea;}
    #BodyFooter_rwd #footer_line {width: 90%;margin-bottom: 2%;margin-top: 2%;margin-left: 5%;margin-right: 5%;display: block;float: left;height: auto;text-align: center;border-top-width: thin;border-top-style: solid;border-top-color: #666;}
    #BodyFooter_rwd #footer_inline a {color: #333;}
    #BodyFooter_rwd #footer_inline ul {float: left;width: 100%;margin-bottom: 0%;margin-top: 3%;}
    #BodyFooter_rwd #footer_inline ul li {display: inline;line-height: 2em;font-size: 1em;clear: both;width: 100%;margin-right: 1%;margin-bottom: 0%;}
    #BodyFooter_rwd #footer_inline ul li img {width: 20%;height: auto;vertical-align: middle;}
    #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: #333;}
    #BodyFooter_rwd #footer_address ul {float: left;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: 0.8em;}
    /* 舊版IE */
    #noie {background-color: #FFFFFF;width: 100%;text-align: center;}
    /* 舊版IE end */
    #topbutton {display:none;}
}

@media screen and (max-width: 1200px) {
    /* 隱藏 */
    #BodyHeader {display:none;}
    #BodyMenu {display:none;}
    #BodyContentAd {display:none;}
    #BodyContentMainNavigator {display:none;}
    #BodyHeader_event {display:none;} 
    /* Header */
    #BodyHeader_event_rwd {	text-align: center;width:100%;height: auto;	margin:0 auto;background-color:#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;}
    }
    /*body*/
    #Master_title {display:inline-block;width:100%;padding:0%;}/*主圖位置ID*/
    #Master_title img {height: auto;width: 100%;}
    @media screen and (orientation: portrait) {
        #Master_title {margin-top: 15%;}
    }
    @media screen and (orientation:landscape) {
        #Master_title {margin-top: 8%;}
    }
    /*滿百100%區域*/
    .row100 {width:100%;}
    /*資料集中寬外框*/
    #BodyContent,#BodyContentMain {width: 100%;float: left;}
    #event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:0% auto;display:inline-block;width:98%;padding:1%;}
    #event_master {margin:0% auto;width:98%;padding:1%;}
    /*div section標籤段落*/
    div p {font-size:1em;line-height:1.6em;text-align:left;}
    section p {font-size: 1rem;line-height: 1.4em;text-align: left;padding: 0 5%;}
    /*標題大小*/
    h1 {font-size: 2.2em; }
    h2 {font-size: 2.0em; }
    h3 {font-size: 1.6em; }
    #event_sixth nav a { font-size: 1.2em; }
    #event {width: 100%;float: left;margin: 0;padding: 0;}
    /*ask*/
    #askarea {width: 90%;float: left;padding-top: 2%;text-align: left;font-family: "Microsoft JhengHei";padding: 6% 5%;}
    #askarea .asktitle {font-size: 1.2em;text-align: center;padding: 1% 0;}
    #askarea #formlist {width: 99%;float: left;margin-right: auto;margin-left: 0%;margin-top: 0.8%;padding-right: 1%;font-size: 1em;text-align: left;}
    #askarea p {margin-bottom: 0%;margin-top: 0%;}
    #askarea SELECT {border-radius: 7px;width: 99%;background-color: #FFF;border: #FFF;padding: 0.5%;margin-right: 1%;margin-bottom: 5%;height: 2.0em;font-size: 1.0em;}
    #askarea input {border-radius: 7px;background-color: #FFF;border: #FFF;padding: 0.5%;margin-right: 1%;margin-bottom: 5%;color: #C6C6C6;height: 2.0em;font-size: 1.0em;}
    #askarea input[type="submit"] {color: #FFF;background-color: #e51686;font-size: 1em;margin-top: 5%;padding: 0 3%;}
    #askarea input[name="sContent"] {width:100%;}
    #askarea input[type="reset"] {color: #FFF;background-color: #9a9a9a;font-size: 1em;margin-top: 5%;padding: 0 3%;}
    #askarea input[type="text"] {width:99%;}
    /* Footer */
    #BodyFooter_rwd {float: left;width: 100%;background-color:#FFF;margin-right: auto;margin-left: auto;padding: 0;margin-top: 5%;margin-bottom: 0;}
    #BodyFooter_rwd #footer_line {width: 100%;margin-bottom: 2%;margin-top: 2%;display: block;float: left;height: auto;text-align: center;border-top-width: thin;border-top-style: solid;border-top-color: #333;}
    #BodyFooter_rwd #footer_inline a {color: #333;}
    #BodyFooter_rwd #footer_inline ul {float: left;padding: 0%;width: 100%;margin-bottom: 1%;text-align:center;}
    #BodyFooter_rwd #footer_inline ul li {float: left;display: inline-block;line-height: 2em;font-size: 1.1em;clear: both;width: 100%;margin-right: auto;margin-bottom: 0%;}
    #BodyFooter_rwd #footer_inline ul li img {width: 45%;height: auto;vertical-align: middle;margin-bottom: 2%;}
    #BodyFooter_rwd #footer_address {margin-top: 0%;float: left;width: 100%;text-align: center;margin-right: auto;margin-left: auto;}
    #BodyFooter_rwd #footer_address a {color: #333;}
    #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: 0.8em;}
    /* Footer end */
    #topbutton {width: 50px;height: 50px;color: #FFFFFF;border-radius: 9999em;background-color: #000;opacity: 0.4;right: 1%;bottom: 8%;position:fixed;line-height: 50px;font-size: 15px;text-align: center;}
    #topbutton a {color: #FFFFFF;font-size: 15px;}	
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
}

@media screen and (max-width:767px) {
    .session {width: 100%;}
    .session:nth-of-type(1) {margin:.6rem auto 0;}
    .session_title{margin-top: 3%;}
    .outline,.session{flex: 0 0 92%;margin: 1rem auto;}
    .lecture_cont{width: 92%;margin: auto;}
    .lecture_cont:nth-of-type(2){margin-top: 1rem;}
    .lecture-title{margin: auto;}
    .outline li:nth-of-type(n+1):nth-of-type(-n+3) {width: 100%;}
    h1{padding: initial;}
    .hash-tag{padding: 0 1rem;}
    .outline li:nth-of-type(3){margin-top: 1rem;}
    .video-wrap {width: 100%;}
}