/*  */
.body-content-article {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

.body-article {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.body-article h3 {
    padding-top: 5px;
    padding-bottom: 8px;
    text-align: left;
    text-indent: 0em;
    line-height : 1.3em;
    font-size: 20px;
    font-family: 'Sarabun', sans-serif;
}

.body-article p {
    padding-top: 0px;
    padding-bottom: 8px;
    text-align: left;
    text-indent: 3em;
    line-height : 1.6em;
    font-size: 16px;
    font-family: 'Sarabun', sans-serif;
}

.body-article img {
    margin: 0px 25px 0px 0px;
    float: left;
    width: 200px;
    height: auto;
}

.body-2column-article {
    column-count: 2;
    column-width: 200px;
    column-rule: 1.2px solid #f27d97;
    column-gap: 3rem;
    -webkit-column-gap: 3rem;
    -moz-column-gap: 3rem;
}

.body-3column-article {
    column-count: 3;
    column-width: 200px;
    column-rule: 1.2px solid #f27d97;
    column-gap: 1.8rem;
    -webkit-column-gap: 1.8rem;
    -moz-column-gap: 1.8rem;
}

.body-column4-article {
    column-count: 4;
    column-width: 233px;
    column-gap: 1.2rem;
    -webkit-column-gap: 1.2rem;
    -moz-column-gap: 1.2rem;
}

.body-column4-photo {
    column-count: 4;
    column-width: 230px;
    column-gap: 1.6rem;
    -webkit-column-gap: 1.6rem;
    -moz-column-gap: 1.6rem;
}

.body-circle1 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    background:#585858;
}

.body-circle2 {
    shape-outside: circle(50%);
    width: 180px;
    height: 180px;
    float: left;
    background-color: white;
    border-radius: 50%;
    margin-right: 1rem;
}

/*-- ICON OUTLINE --*/
.body-icon-outline {
    background-color: #ffebf5;
    border-radius: 10px;
    max-width: 365px;  
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 47px;
    padding-top: 15px;
    padding-bottom: 8px;
    padding-left: 40px;  
}

.body-icon-outline-grid {
    display: grid;
    grid-template-columns: repeat(4, 50px);
    grid-gap: 1.6rem;
}

.body-icon-outline-item img {
    width: 100%;
}

.main-courses-name {
    margin-left: 30px;
    padding-left: 40px;
    font-family: 'Sriracha', sans-serif;
    font-size: 24px;
    color: #0489B1;
}

.sub-courses-name {
    margin-left: 30px;
    padding-left: 40px;
    font-family: 'Kanit', sans-serif;
    font-size: 18px;
    color: #444;
}

.body-list-item {
    margin-left: 30px;
    margin-right: 30px;
    padding-left: 40px;
    padding-right: 30px;
    font-family: 'Sriracha', sans-serif;
    font-size: 18px;
    color: #f27d97;
}

ol {
    counter-reset: li;
    list-style: none;
    font: 15px;
    padding: 0px;
    margin-bottom: 1em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ul {
    /*list-style-image: linear-gradient(to left bottom, #f27d97, #f27d97);*/
    list-style:disc;
    margin: 0 0 0 3.2em;
    color:#444;
}

ol ul ul {
    list-style:circle;
    margin: 0 0 0 1.2em;
}

ol ul ul ul {
    list-style:decimal;
    margin: 0 0 0 1em;
}

.courses-intro-heading {
    margin-left: 30px;
    margin-right: 30px;
    padding-left: 30px;
    padding-right: 40px;
    font-family: 'Sriracha', sans-serif;
    font-size: 18px;
    color: #f27d97;
}

.courses-intro {
    margin-left: 18px;
    margin-right: 30px;
    padding-left: 30px;
    padding-right: 30px;
}

.courses-intro p {
    background-color: #eee;
    border-radius: 5px;    
    margin-top: 8px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
    color: #444;
    text-indent: 3rem;
}

.rounded-list {
    font-family: 'Kanit', sans-serif;
    font-size: 16px;
}

.rounded-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    margin: .5em 0;
    background: #eee;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}

.rounded-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

.myButton {
	box-shadow: 3px 4px 0px 0px #899599;
	background:linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
	background-color:#ededed;
	border-radius:15px;
	border:1px solid #d6bcd6;
	display:inline-block;
	cursor:pointer;
	color:#3a8a9e;
	font-size:14px;
	padding:3px 22px;
	text-decoration:none;
}

.myButton:hover {
	background:linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
	background-color:#bab1ba;
}

.myButton:active {
	position:relative;
	top:1px;
}

/* --------------------------------------------------------------------------------------- */
/* ----------------------------------- Responsive ---------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------1200--- */
@media screen and (max-width: 1200px) {
    .body-content-article {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .body-article img {
        margin-bottom: 2px;
        margin-right: 12px;
        width: 150px;
    }
    .rounded-list a{
        font-family: 'Kanit', sans-serif;
        font-size: 16px;
    }
    .main-courses-name {
        margin-left: 20px;
        padding-left: 50px;
        font-size: 24px;
    }
    .sub-courses-name {
        margin-left: 20px;
        padding-left: 50px;
        font-size: 17.5px;
    }
    .courses-intro-heading {
        margin-left: 20px;
        padding-left: 50px;
        font-size: 18px;
    }
    .courses-intro {
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .courses-intro p {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        font-size: 16px;
        text-indent: 2rem;
    }
    .body-list-item {
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 50px;
        padding-right: 30px;
        font-size: 18px;
    }
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 350px;  
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: 53px;
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 40px;
    }
    .body-icon-outline-grid {
        grid-template-columns: repeat(4, 50px);
        grid-gap: 1.5rem;
    }
    .body-icon-outline-item {
        width: 85%;
    }
    ol ul {
        margin: 0 0.2 0 3em;
        font-size: 16px;
    }
    ol ul ul {
        margin: 0 0 0 1.2em;
    }
    ol ul ul ul {
        margin: 0 0 0 1em;
    }
}

/* --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------926--- */
@media screen and (max-width: 926px) {
    .body-content-article {
        margin-top: 15px;
        margin-bottom: 15px;
        margin-left: 18px;
        margin-right: 18px;
    }
    .body-article h3 {
        padding-top: 4px;
        padding-bottom: 6px;
        font-size: 18px;
    }
    .body-article p {
        padding-bottom: 7px;
        text-indent: 2.4em;
    }
    .body-article img {
        margin-bottom: 2px;
        margin-right: 12px;
        width: 150px;
    }
    .rounded-list a{
        font-family: 'Kanit', sans-serif;
        font-size: 16px;
    }
    .main-courses-name {
        margin-left: 15px;
        padding-left: 30px;
        font-size: 22px;
    }
    .sub-courses-name {
        margin-left: 15px;
        padding-left: 30px;
        font-size: 17px;
    }
    .courses-intro-heading {
        margin-left: 15px;
        padding-left: 30px;
        font-size: 18px;
    }
    .courses-intro {
        margin-left: 15px;
        margin-right: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .courses-intro p {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        font-size: 16px;
        text-indent: 2.5rem;
    }
    .body-list-item {
        margin-left: 15px;
        margin-right: 15px;
        padding-left: 35px;
        padding-right: 15px;
        font-size: 16px;
    }
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 340px;
        margin-top: 20px;
        margin-bottom: 10px;
        margin-left: 32px;
        padding-top: 15px;
        padding-bottom: 5px;
        padding-left: 35px;
    }
    .body-icon-outline-grid {
        grid-template-columns: repeat(4, 50px);
        grid-gap: 1.5rem;
    }
    .body-icon-outline-item {
        width: 80%;
    }
    ol ul {
        margin: 0 0 0 3em;
        font-size: 16px;
    }
    ol ul ul {
        margin: 0 0 0 1.2em;
    }
    ol ul ul ul {
        margin: 0 0 0 1em;
    }
}

/* --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------568--- */
@media only screen and (max-width: 568px) {
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 330px;
    }
    .body-icon-outline-grid {        
        grid-template-columns: repeat(4, 50px);
        grid-gap: 1.2rem;
        justify-items: center; 
    }
    .body-icon-outline-item {
        width: 77%;
        
    }
    .body-list-item {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 13px;
    }
}

/* --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------480--- */
@media only screen and (max-width: 480px) {
    .body-content-article {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 18px;
        margin-right: 18px;
    }
    .body-article h3 {
        padding-top: 3px;
        padding-bottom: 5px;
        font-size: 17px;
    }
    .body-article p {
        padding-top: 0px;
        padding-bottom: 6px;
        text-align: left;
        text-indent: 2.4em;
        line-height : 1.6em;
        font-size: 15px;
    }
    .body-article img {
        margin-bottom: 3px;
        margin-right: 12px;
        float: left;
        width: 140px;
        height: auto;    
    }
    .rounded-list a{
        margin-left: 20px;
        font-family: 'Kanit', sans-serif;
        font-size: 12px;
        text-align: left;
        background-color: #fafafa;
        border-radius: 0em;
        transition: all .3s ease-out;
    }
    .main-courses-name {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 15px;
    }
    .sub-courses-name {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 12.5px;
    }
    .courses-intro-heading {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 13px;
    }
    .courses-intro {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    .courses-intro p {
        background-color: #fafafa;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 0px;
        font-size: 12px;
        text-indent: 0.7rem;
    }
    .body-list-item {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 13px;
    }
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 450px;
        border-radius: 0px;
        margin: 0px 0px 0px 0px;
        padding: 10px 0px 3px 60px;
    }
    .body-icon-outline-grid {        
        grid-template-columns: repeat(4, 50px);
        grid-gap: 1rem;
        justify-items: center; 
    }
    .body-icon-outline-item {
        width: 70%;
    }
    ol ul {
        margin: 0 1.5em 0 5em;
        text-align: left;
        font-size: 12px;
    }
    ol ul ul {
        margin: 0 0 0 1.2em;
    }
    ol ul ul ul {
        margin: 0 0 0 1em;
    }
}
/* --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------320--- */
@media only screen and (max-width: 320px) {
    .body-content-article {
        margin-left: 12px;
        margin-right: 12px;
    }
    .body-article {
        padding-top: 0px;
    }
    .body-article h3 {
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: left;
        text-indent: 0em;
        line-height : 1.3em;
        font-size: 16px;
    }
    .body-article p {
        padding-top: 0px;
        padding-bottom: 8px;
        text-align: left;
        text-indent: 2em;
        line-height : 1.6em;
        font-size: 14px;
    }
    .body-article img {
        margin: 0px 25px 0px 0px;
        float: left;
        width: 130px;
        height: auto;
    }
    .rounded-list a{
        margin-left: 15px;
        font-family: 'Kanit', sans-serif;
        font-size: 10px;
    }
    .main-courses-name {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 13px;
    }
    .sub-courses-name {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 10.5px;
    }
    .courses-intro-heading {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 11px;
    }
    .courses-intro {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .courses-intro p {
        background-color: #fafafa;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 10px;
        border-radius: 0px;
        font-size: 10px;
        text-indent: 0.3rem;
    }
    .body-list-item {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 11px;
    }
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 400px;
        border-radius: 0px;
        margin: 0px 0px 0px 0px;
        padding: 8px 0px 1px 30px;
    }
    .body-icon-outline-grid {        
        grid-template-columns: repeat(4, 50px);
        grid-gap: 1rem;
        justify-items: center; 
    }
    .body-icon-outline-item {
        width: 65%;
    }
    ol ul {
        margin: 0 1em 0 4.5em;
        text-align: left;
        font-size: 10px;
    }
    ol ul ul {
        margin: 0 0 0 1.2em;
    }
    ol ul ul ul {
        margin: 0 0 0 1em;
    }
}

/* --------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------200--- */
@media only screen and (max-width: 200px) {
    .body-content-article {
        margin-left: 8px;
        margin-right: 8px;
    }
    .body-article {
        padding-top: 10px;
    }
    .body-article h3 {
        padding-top: 5px;
        padding-bottom: 3px;
        text-indent: 0em;
        line-height : 1.3em;
        font-size: 10px;
    }
    .body-article p {
        padding-top: 3px;
        padding-bottom: 2px;
        text-indent: 1em;
        line-height : 1.6em;
        font-size: 8px;
    }
    .body-article img {
        margin: 0px 8px 0px 0px;
        float: left;
        width: 30%;
        height: auto;
    }
    .rounded-list a{
        margin-left: 9px;
        font-family: 'Kanit', sans-serif;
        font-size: 6px;
    }
    .main-courses-name {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 9px;
    }
    .sub-courses-name {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 6px;
    }
    .courses-intro-heading {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        text-align: center;
        font-size: 7.5px;
    }
    .courses-intro {
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .courses-intro p {
        background-color: #fafafa;
        margin-left: 0px;
        margin-right: 0px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 0px;
        font-size: 6px;
        text-indent: 0rem;
    }
    .body-list-item {
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        text-align: center;
        font-size: 7.5px;
    }
    /*-- ICON OUTLINE --*/
    .body-icon-outline {
        max-width: 200px;
        border-radius: 0px;
        margin: 0px 0px 0px 0px;
        padding: 6px 0px 0px 1px;
    }
    .body-icon-outline-grid {        
        grid-template-columns: repeat(4, 40px);
        grid-gap: 0rem;
        justify-items: center; 
    }
    .body-icon-outline-item {
        width: 50%;
    }
    ol ul {
        margin: 0 0.1em 0 4em;
        text-align: left;
        font-size: 6px;
    }
    ol ul ul {
        margin: 0 0 0 1.2em;
    }
    ol ul ul ul {
        margin: 0 0 0 1em;
    }
}