#HEEocss1{margin-bottom:50px;}
#HEEoyoutube1{width:60%;float:left;display:inline-block;}
@media screen and (max-width: 768px) {#HEEoyoutube1{width:auto;margin-right:auto;margin-left:auto;float:none;display:block;}}
@media screen and (max-width: 1024px) {#HEEoyoutube1 .content iframe{height:400px;}}
@media screen and (max-width: 768px) {#HEEoyoutube1 .content iframe{width:90%;margin-right:auto;margin-left:auto;display:block;}}
@media screen and (max-width: 480px) {#HEEoyoutube1 .content iframe{width:100%;}}
#HEEohtml1{ 
    width:38%;
    padding:10px;
    margin-left:2%;
    margin-bottom:10px;
    float:left;
    display:inline-block;
    vertical-align:middle;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position:relative;
}
#HEEohtml1 .content{
    overflow:visible;
}
#HEEohtml1 h2{
    width:40px;
    background-color:#d1b1cb;
    color:#fff;
    border-radius:6px;
    padding:50px 4px;
    text-align:center;
    display:inline-block;
     vertical-align:middle;
    font-size:22pt;
    margin:10px 0px;
}
#HEEohtml1 h3{
    color:#b182b2;
    display:inline-block;
    vertical-align:middle;
    line-height:150%;
    font-size:20pt;
    padding:0px 10px;
    margin:10px 0px;
    position:relative;
}
#HEEohtml1 h3 a{
    color:#b182b2;
}
#HEEohtml1 h3 a:hover{
    color:#aa4da9;
}
#HEEohtml1 h3 span{
    color:#b182b2;
    font-size:14pt;
}
.wh100{
    width:600px !important;
}
.bookPic img,
.penPic img,
.bagPic img,
.soapPic img {
    width:100%;
}
@media screen and (max-width: 1024px) {
    #HEEohtml1{
        width:100%;
        margin-top:5px;
        float:none;
        display:block;
    }
}
@media screen and (max-width: 768px) {
    #HEEohtml1{
        width:100%;
        margin-top:5px;
        float:none;
        display:block;
    }
}
@media screen and (max-width: 480px) {
    #HEEohtml1{
        width:100%;
    }
    ul.tabs_btn li{
        font-size:13pt;
    }
}
#HEEohtml2 {
    position: relative;
    z-index: 2;
    width: 15%;
    margin-left: 3%;
    padding: 6px 0px;
    float: left;
    display: inline-block;
    border-bottom: solid 1px #ccc;
    border-top: solid 1px #ccc;
}
@media screen and (max-width: 768px) {#HEEohtml2{width:43%;margin-left:5%;}}
@media screen and (max-width: 480px) {#HEEohtml2{width:50%;margin-left:0%;}}
#HEEohtml2 .title{margin-bottom:0px;  font-size:16pt;}
#HEEohtml2 .content{margin:5px 0px; font-size:16pt; text-align:center; font-weight:bold;}
#HEEohtml2 a {
    color: #fff;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    background-color: #b9e3f9;
}
#HEEohtml2 a:before{
    font-family: fontello;
    font-size:13pt;
    color: #FFFFFF;
    content: '\e839';
    position: relative;
    left: 10px;
    opacity:0;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEohtml2 a span{
     margin-left:-10px; 
     transition-duration: .3s;
     transition-timing-function: linear;
}
#HEEohtml2 a:hover span{
     margin-left:10px; 
     transition-duration: .3s;
     transition-timing-function: linear;
}
#HEEohtml2 a:hover:before{
    opacity:1;
    left: 0px;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEohtml2 a:hover {
    background-color: #81c7e7;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEocss3{position:relative; z-index:2; width:18%; padding:6px 0px 6px 3% ; float:left;display:inline-block; border-bottom:solid 1px #ccc; border-top:solid 1px #ccc; }
@media screen and (max-width: 768px) {#HEEocss3{width:43%;margin-right:5%; }}
@media screen and (max-width: 480px) {#HEEocss3{width:43%;margin-right:5%; }}
#HEEocss3 .title{margin-bottom:0px; font-size:16pt;}
#HEEocss3 .content{margin:5px 0px;}
#HEEocss3 a {
    background-color: #b9e3f9;
    color: #fff;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
}
#HEEocss3 a:before{
    font-family: fontello;
    font-size:13pt;
    color: #FFFFFF;
    content: '\e851';
    position: relative;
    left: 10px;
    opacity:0;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEocss3 a span{
     margin-left:-10px; 
     transition-duration: .3s;
     transition-timing-function: linear;
}
#HEEocss3 a:hover span{
     margin-left:10px; 
     transition-duration: .3s;
     transition-timing-function: linear;
}
#HEEocss3 a:hover:before{
    opacity:1;
    left: 0px;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEocss3 a:hover {
    background-color: #81c7e7;
    transition-duration: .3s;
    transition-timing-function: linear;
}
#HEEox025dtilist1{
    position:relative;
    z-index:1;
}
#HEEox025dtilist1 .itemBox .idction {
    color: #333333;
    font-size: 18px;
    letter-spacing: 35px;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
    font-weight: 400;
}
#HEEox025dtilist1 .idction p{color:#333333;font-size:18px;line-height:35px;letter-spacing:0px;font-weight: 400;}
#HEEox025dtilist1 .idction ul{padding-right:0px;padding-left:0px;}                     
#HEEox025dtilist1 .idction li{color:#333333;font-size:18px;margin-top:20px;margin-bottom:20px;font-weight: 400;}
#HEEox025dtilist1 .idction h2{line-height:40px;}
#Box07 { padding:80px 0px 0px 0px;}
#HEEox025dtilist1 ul.tabs_btn,
#HEEZx025dtilist1 ul.tabs_btn {
    padding: 60px 0px 0px 0px;
    position:relative;
    z-index:10;
}
#HEEox025dtilist1 ul.tabs_btn li,
#HEEZx025dtilist1 ul.tabs_btn li {
    position: relative;
    padding-top: 40px;
}
#HEEox025dtilist1 ul.tabs_btn li a:before,
#HEEZx025dtilist1 ul.tabs_btn li a:before{
    background-image: url(../../../USER/fantasy/Userfile/file/flowerTab2.png) ;
    background-position:left bottom;
    background-repeat: no-repeat;
    background-size: 55%;
    content:' ';
    position:absolute;
    left:10px;
    bottom:28px;
    width:100%;
    height:72px;
    z-index:-1;
}

#HEEox025dtilist1 ul.tabs_btn li a.active:before,
#HEEox025dtilist1 ul.tabs_btn li a:hover:before,
#HEEZx025dtilist1 ul.tabs_btn li a.active:before,
#HEEZx025dtilist1 ul.tabs_btn li a:hover:before {
    background-image: url(../../../USER/fantasy/Userfile/file/flowerTab.png);
}
.aboutCourse {
    padding:20px 2px 0px 20px;
}
.aboutMainTitle{
    text-align:center;
    padding:0px 0px 20px 0px;
}
.aboutMainTitle img{
    min-width:320px;
    width:30%;
}
.aboutCourse .courseTitle {
    position: relative;
    height: 70px;
    font-size: 15pt;
}
.aboutCourse .courseTitle:before {
    content:' ';
    position:absolute;
    left:0px;
    top:0px;
    z-index:100;
    width:45px;
    height:45px;
    background-image:url(../../../USER/fantasy/Userfile/file/flowerIcon.png);
    background-repeat:no-repeat;
    background-size:100%;
}
.aboutCourse .courseTitle b {
    background-color: #c0ded9;
    border-radius: 4px 20px 20px 4px;
    display: inline-block;
    color: #333;
    padding: 5px 24px 3px 14px;
    position: absolute;
    left: 35px;
    top: 8px;
}
.aboutCourse .courseText {
    margin:0px 0px 20px 20px;
    padding:0px 20px;
    border-left:solid 1px #e2e2e2;
    line-height:200%;
    color:#000;
}
.aboutCourse .courseText .subTitle{
    color:#ad8eb0;
    padding:6px 0px;
}
.aboutCourse .courseText ul{
    padding:0px;
    margin:0px;
    list-style:none;
}
.aboutCourse .courseText ul li:before{
    content:'.';
}
.aboutCourse .courseText ul li:nth-child(2n){
    color:#757575;
}
.aboutCourse .courseText ul li:nth-child(2n+1){
    color:#000000;
}
.aboutCourse .courseText dl{
    overflow:hidden;
}
.aboutCourse .courseText dl dd{
    padding:0px 0px 0px 20px;
    margin:0px 0px;
    position:absolute;
    width:60px;
    background-image:url(../Userfile/file/ff211216091428173301.png);
    background-repeat:no-repeat;
    background-position:left 15px;
    background-size:100% 8px;
    font-weight:bold;
}
.aboutCourse .courseText dl dt{
    padding:0px;
    margin:0px 0px 0px 80px;
}
.aboutCourse .courseText dl:nth-child(3) dd{
    width:90px;
}
.aboutCourse .courseText dl:nth-child(3) dt{
    margin:0px 0px 0px 115px;
}
.aboutCourse .courseText dl:nth-child(9) dd{
    width:170px;
}
.aboutCourse .courseText dl:nth-child(9) dt{
    margin:0px 0px 0px 175px;
}
.aboutCourse .courseText .cTitle{
    font-weight:bold;
}
.aboutCourse .courseText .cNote{
    color:#666;
    font-size:10pt;
    line-height:180%;
}
.happinessTitle {
    position:relative;
    margin-top:-10px;
}
.happiness01 {
    position: relative;
    z-index: 4;
    width: 50%;
    padding:0px 0px 5% 0px;
}
.happiness01 img{
    width:100%;
}
.happiness02 {
    position:absolute;
    width:50%;
    z-index:5;
    top:0px;
    margin-top:8%;
    animation-name: stretch;
    animation-duration: 1.5s; 
    animation-timing-function: ease-out; 
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
.happiness03 {
    position: absolute;
    width: 50%;
    z-index: 1;
    top: 0px;
    margin-top: 5%;
    animation-name: stretch2;
    animation-duration: 1.8s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
.happiness04 {
    position: absolute;
    left:0px;
    top:0px;
    width:50%;
    z-index:3;
}
.happiness04 img{
    width:100%;
}
.materialContent {
    position:absolute;
    width:90%;
    left:-20px;
}
.materialContent img{
    width:100%;
}
@keyframes stretch {
    from {top:-10px;}
	to {top:8px;}
}
@keyframes stretch2
{
	from {top:0px;}
	to {top:18px;}
}
#HEEopushurl1 {
    position: fixed;
    top: 25%;
    left: 90%;
}

@media screen and (max-width: 768px) {
    #HEpgpushurl1 {
        left: 20px;
    }
}

#HEEopushurl1 .pshtle {
    line-height: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#HEEopushurl1 {
    text-align: center;
    width: 50px;
}

    #HEEopushurl1 .icon-facebook-rect:before {
        content: none;
    }

    #HEEopushurl1 .icon-facebook-rect {
        background-image: url(../Userfile/file/ff210707112640043420.svg);
        background-repeat: no-repeat;
        background-position: center center;
        padding-right: 20px;
        padding-left: 20px;
        margin-right: 5px;
        margin-left: 5px;
        -moz-background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: 30px;
    }

    #HEEopushurl1 .icon-line:before {
        content: none;
    }

    #HEEopushurl1 .icon-line {
        background-image: url(../Userfile/file/ff210819155246148163.svg);
        background-repeat: no-repeat;
        background-position: center center;
        padding-right: 21px;
        padding-left: 21px;
        margin-right: 5px;
        margin-left: 5px;
        -moz-background-size: contain;
        -webkit-background-size: contain;
        -o-background-size: contain;
        background-size: 33px;
    }

    #HEEopushurl1 .icon-plurk {
        display: none;
    }

    #HEEopushurl1 .icon-twitter {
        display: none;
    }

    #HEEopushurl1 .icon-weibo {
        display: none;
    }

    #HEEopushurl1 .icon-gplus {
        display: none;
    }

    #HEEopushurl1 .icon-mail {
        display: none;
    }

@media screen and (max-width: 768px) {
    #HEEox025dtilist1 ul.tabs_btn li,
    #HEEZx025dtilist1 ul.tabs_btn li {
        padding-top: 0px;
    }

        #HEEox025dtilist1 ul.tabs_btn li a:before,
        #HEEZx025dtilist1 ul.tabs_btn li a:before {
            background-size: 70%;
            bottom: 32px;
        }

    ul.tabs_btn li a {
        border-radius: 20px 20px 0px 0px;
    }
    .happiness01,
    .happiness02,
    .happiness03,
    .happiness04 {
        width: 70%;
    }
    .materialContent {
        margin-top: -70px;
    }
}

@media screen and (max-width: 480px) {
    #HEEox025dtilist1 ul.tabs_btn li a:before,
    #HEEZx025dtilist1 ul.tabs_btn li a:before {
        background-size: 80%;
        bottom: 34px;
    }

    ul.tabs_btn li a {
        border-radius: 15px 15px 0px 0px;
    }

    .aboutCourse {
        padding: 20px 0px 0px 0px;
    }
    .happiness01,
    .happiness02,
    .happiness03,
    .happiness04 {
        width: 80%;
    }
    .materialContent {
        margin-top:-70px;
    }
    #HEEohtml1 {
        padding: 10px 0px;
        margin-left: 0%;
    }
    .aboutCourse .courseText dl dd{
        position:relative;
    }
    .aboutCourse .courseText dl dt {
        padding: 0px;
        margin: 0px 0px 0px 0px;
    }
    .aboutCourse .courseText dl:nth-child(3) dt {
        display:block;
        margin: 0px 0px 0px 0px;
    }

    .aboutCourse .courseText dl:nth-child(9) dt {
        display: block;
        margin: 0px 0px 0px 0px;
    }
}