@charset "UTF-8";

/*----------↓Reset CSS----------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*----------↑Reset CSS----------*/






/*---------↑menu CSS---------*/

html {
    font-size: 16px;
}

body {
        background: url(image/WEB_crossbg.jpg);
}

img {
    width: 100%;
}

header.visual {
    max-width: 1160px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 6em 0 0 0;
}

img.visual-s {
    box-shadow: 4px 4px 14px rgba(51, 51, 51, 0.16);
    max-width: 900px;
}

img.visual-write {
    position: absolute;
    right: 96px;
    bottom: -24px;
    max-width: 496px;
}


img.visual-item-01 {
    max-width: 128px;
    left: 23em;
    position: absolute;
    top: -0.5em;
}

img.visual-item-02 {
    max-width: 130px;
    right: 27em;
    position: absolute;
    top: 3em;
    z-index: -1;
}

img.visual-item-03 {
    max-width: 106px;
    position: absolute;
    left: 24em;
    bottom: -3em;
}

img.visual-item-04 {
    max-width: 158px;
    position: absolute;
    top: 1em;
    left: 3em;
    z-index: -1;
}


img.visual-item-05 {
    max-width: 220px;
    right: 2em;
    position: absolute;
    top: 3em;
    transform: rotate(11deg);

}



img.visual-item-06 {
    max-width: 220px;
    left: 1em;
    position: absolute;
    bottom: -2em;
}

img.visual-item-07 {
    max-width: 178px;
    right: -1em;
    position: absolute;
    bottom: 5em;
}

.doctor-c {
    max-width: 1000px;
    margin: 5em auto;
    background: #fff;
    box-shadow: 4px 4px 14px rgba(51, 51, 51, 0.16);
}

img.doctor-img {
    max-width: 300px;
    filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3));
   position: absolute;
    top: -1em;
    right: 0;
}

p.bookcontent {
    font-size: 1.4em;
    font-weight: 500;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
        align-self: center;
      
}


.image-center{
	    text-align: center;
	    position: relative;
}
.book-content {
    max-width: 1000px;
    margin: 7em auto 2em;
    background: #fff;
    padding: 0 0 0 0;
    box-shadow: 4px 4px 14px rgba(51, 51, 51, 0.16);
}


.bookcover-img{
    max-width: 270px;
    filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3));
    position: absolute;
    top: -2em;
    right: 1em;


}

img.cart {
    max-width: 30px;
}
.buytitle {
    background: #E7780A;
    border-radius: 20px;
    padding: 0.8em;
    text-align: center;
    max-width: 270px;
     margin: 1em auto 2em;

}

img.buybutton {
    max-width: 205px;
    border-radius: 22px;
   padding: 0.4em 0;
    margin: 1.5em 0 3em;
    transition: 1s;
    box-shadow: 4px 4px 0px rgb(231, 120, 10);
    border: solid 1px rgb(231, 120, 10);
}
img.buybutton:hover {
    transform: translateY(-1em);
}

.visual-phone {
    display: none;
}
img.visual-phone {
    max-width: 414px;
    margin: 0 auto;
    display: block;
}


.visual-table {
    display: none;
}
img.visual-table {
    max-width: 1175px;
    margin: 0 auto;
    display: block;
}

.activity-title img {
    max-width: 390px;
    box-shadow: 4px 4px 14px rgba(51, 51, 51, 0.16);
}

.activity-title {
    text-align: center;
}

.gift-title img {
    max-width: 450px;
}

.activity-content {
    max-width: 1000px;
    margin: 2em auto;
    background: #fff;
    box-shadow: 4px 4px 14px rgba(51, 51, 51, 0.16);
    padding: 0 1em;
        position: relative;
}



.class-content {
    font-size: 1.4em;
    font-weight: 500;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
    align-self: center;
}

.class-content h1 {
    line-height: 3em;
}

.lecture img {
    max-width: 278px;
}

h4.panel-title {
    font-size: 1.4em;
    font-weight: 700;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
}

h4.panel-title a {
    color: red;
        transition: 1s;
            text-decoration: none;
}

h4.panel-title {
       border: solid 2px red;
    font-size: 1.4em;
    font-weight: 700;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
    border-radius: 10px 10px 0 0;
    padding: 0.5em 0.8em 0.5em;
}

h4.panel-title a:hover {
    color: #fff;
    background: red;
    border-radius: 8px;
    padding: 0 0.2em 0 0.2em;
    letter-spacing: 10px;
}

.panel-body {
    padding: 1.5em;
    border-color: red;
    border-style: none solid solid solid;
    border-width: 2px;
    border-radius: 0 0 10px 10px;
}
div#collapseOne {
    transition: 1s;
}
.lecture {
    padding: 0 0 1em 0;
}
div#accordion {
    padding: 1.5em 1em 3em;
}

.step-wrap {
    padding: 1.5em;
text-align: center;
}
.step {
    font-size: 1.8em;
    background: #E7780A;
    display: inline;
    padding: 0.3em;
    border-radius: 15px;
    color: #fff;
}
.strp-content {
    padding: 1.4em 0 0;
    font-size: 1.4em;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
        text-align: left;
}

.step-data span {
    background: #E7780A;
    border-radius: 20px;
    padding: 0.3em 1.2em;
    color: #fff;
    font-size: 1.3em;
    font-family: Microsoft JhengHei;
    font-weight: 700;
}
.step-wrap-border{
border: solid 2px #E7780A;  
    border-radius: 20px;

}
.step-data {
    text-align: center;
}
.step-img {
    display: inline-block;
}

.step-img a img:hover {
    transform: translateY(-1em);
}

.step-img img {
    transition: 1s;
}

.strp-content-d a:hover {
    font-weight: 900;
    color: #e7780a;
}

.strp-content-d {
    padding: 1em 0 0;
    font-size: 1.4em;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
    text-align: left;
}
.note {
    padding: 1em;
    font-size: 1.2em;
    font-weight: 500;
    font-family: Microsoft JhengHei;
    letter-spacing: 0.05em;
    line-height: 1.4em;
    align-self: center;
        position: relative;
}

.top-button img {
    max-width: 50px;
    filter: drop-shadow(4px 4px 7px rgba(0, 0, 0, 0.3));
}

.top-button {
    text-align: center;
}

ul.text-indent-phone li {
    text-indent: -1em;
    margin-left: 1em;
}


.activity {
    position: relative;
}

.bg-item1 {
    position: absolute;
    z-index: -2;
    right: 18%;
}

.bg-item2 {
   position: absolute;
    z-index: -2;
    left: 16%;
    top: 20%;
}
.bg-item3 {
      position: absolute;
    z-index: -2;
    right:15%;
    bottom: -20%;
}
/*--------------------------1280px--------------------------*/

@media screen and (max-width: 1280px) {
	

}


/*--------------------------1160px--------------------------*/
@media screen and (max-width: 1160px) {
	
header.visual {
    
    display: none;

}

.visual-table {
    display:initial;
}
/*--------------------------1024px--------------------------*/
@media screen and (max-width: 1024px) {

    img.doctor-img {

        position: inherit;

    }

    p.bookcontent {

        padding: 0.3em 0.5em 1em;
    }

    .doctor-c {
        max-width: 90%;
        margin: 3em auto;

    }

.book-content {
 max-width: 90%;
        margin: 3em auto;
}
.bookcover-img {
  
    position: inherit;
        right: 0em;
        top: -1em;

}


.activity-content {
      max-width: 90%;
}
}


/*--------------------------768px--------------------------*/
@media screen and (max-width: 768px) {
	

img.buybutton {
 
    margin: 0.5em 0 1em 0;;
}

}


/*--------------------------414px--------------------------*/
@media screen and (max-width: 414px) {

.visual-table {
    display:none;
}

.visual-phone {
    display:initial;
}


.activity-title img {
    max-width: 90%;
   
}

.activity {
    margin: 0 auto;
    /*width: 90%;*/
}

.activity-content {
      padding: 0;
}

.phone-w {
       padding: 1em 2em;
}
div#accordion {
    padding: 1.5em 0em 1.5em;
}

.image-center {

    padding: 0 0 1em 0;
}

.doctor-c {

    margin: 1.8em auto 3em;
}
html {
    font-size: 13px;
}
}