@charset "utf-8";
/* CSS Document */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body{
    margin: 0 auto;
    font: 13px 'Roboto Condensed', 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", 微軟正黑體, "Apple LiGothic Medium", "蘋果儷中黑", 蘋果儷中黑, Arial, Helvetica, sans-serif;
    background: #fff;
}

.clearfix:after { content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}

/* Overwrite Bootstrap CSS */
.checkbox-inline, .radio-inline { padding-right: 10px; padding-bottom: 12px; }
.checkbox-inline+.checkbox-inline, .radio-inline+.radio-inline { margin-left: auto; }

.form-horizontal .form-group { margin-left: 0px; margin-right: 0px; }
.form-horizontal .control-label { text-align: left; padding-bottom: 7px; }

/****** Mobile View ******/

/*================== Start Global Setting ==================*/
body.noscroll{ overflow:hidden; }

.navbar-brand > img {
  max-width: 160px;
}

a:focus, a:hover {
    color: #7CA6BA;
    text-decoration: none;
}
img{border:0;margin:0;padding:0}
img.fullwidth{width:100%;height:auto}


.clip-shape {
    -webkit-clip-path: polygon(100% 0, 100% 95%, 95% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 95%, 95% 100%, 0 100%, 0 0)
}

.bg-paleblue-img {
    background: url('../images/section-bgblue.jpg') no-repeat top center/cover; 
}

h1.section-title,
h2.section-title{
    position: relative;
    margin-bottom: 60px;
}

h1.section-title span,
h2.section-title span {
    position: relative;
    background: linear-gradient(270deg, #39556D 0%, #5596CE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 28px;
    font-style: normal;
    font-weight: 350;
    line-height: normal;
    letter-spacing: 5.4px;
}

h1.section-title span:after,
h2.section-title span:after {
    content:'';
    position: absolute;
    right: -30px;
    bottom: -20px;
    display: block;
    background:url('../images/section-line.svg') no-repeat center/100%;
    width: 560px;
    height:20px
} 


.navbar-toggle{margin: 17px 15px}
.navbar-toggle .icon-bar {background-color:#7CA6BA} 


/*	.mv-content {padding-top: 2%;}

	.header-visual {
    background: url(../images/kv-mob.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 0;
    background-size: contain;
	background-color: #fff;
    margin-bottom: 8%;}


	.headline{
        width: 92%;
        color: #58595B;
        text-align: left;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 175%; 
        letter-spacing: 0.9px;
        margin: 0 auto;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 104%;
    }
*/

.glyphicon {color: #FA947B; font-size: 17px}
/*.btn-more-article{
    margin-top: 60px;
    color: #FA947B;
    text-align: center;
    font-size: 21px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; 
    letter-spacing: 3.78px;
    background: linear-gradient(135deg, #FA947B 0%, #FFCEC2 46.88%, #FF8B6E 100%);
    border: 0;
    padding: 2px;
    max-width: 205px;
    width: 100%;
}

.border-wrap {
    background-color:#fff;
    padding: 8px 40px;
}*/

.nav_txt {font-size:20px;color: #FA947B;}

div.page-wrapper { width: 100%; margin: auto; }

div.page-top { width: 100%; position: absolute; top: 0px; }

div.page-header { padding: 0px; margin: 70px 0px 0px ; border: none; }

div.page-footer { width: 100%; background: #fff; text-align: center;  padding: 30px 0 25px;}

.navbar { background: #fff; margin-bottom: 0px; border:0; border-bottom: 2px solid #DCE1E3;width: 100%; z-index: 1; max-width: 2560px; margin: 0 auto;}

div.navbar-header {height: 70px; z-index: 10; position: relative;}

.navbar-default .navbar-toggle { border: none; }

.navbar-default .navbar-toggle .icon-bar { background-color: #7CA6BA; }

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: none; }

.screen-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: transparent; }

/*div.content-container, div.content-container-dummy, div.content-container-storage { width: 94%; margin: auto; max-width: 1200px; }

div.article-container { width: 100%; }

div.article-block { max-width: 576px; margin: auto; margin-bottom: 20px; position: relative; border: 1px solid rgba(250, 148, 123, 0.50);}

div.article-upper-block , div.article-lower-block { position:relative; width: 100%; }

div.article-thumb { width: 100%; }
div.article-thumb img { width: 100%; }

div.article-content { width: 100%; padding: 20px 30px; background:#fff; overflow: hidden;}
p.article-text-subject{font-size:18px;color:#FA947B;text-align:left;font-size:23px;font-style:normal;font-weight:400;line-height:140%;letter-spacing:2.3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
p.article-text-desc { font-size: 16px; color: #FFFFFF; }*/


/* side menu */
.navbar-fixed-top .navbar-collapse {
  max-height: unset;
  position: fixed;
  top: 0px;
  right: 0;
  z-index: 20;
  width: 280px;
  height: 100% !important;
  background: rgba(255, 255, 255);
  margin: 0;
  border-top: 0;
  visibility: hidden;
  transition: visibility .2s ease-in-out, -webkit-transform .2s ease-in-out;
  transform: translateX(100%);
}

div#myNavbar.collapse.in {
  visibility: visible;
  transform: translateX(0);
}

.close-div {height: 72px; border-bottom: 2px solid #DCE1E3; margin: 0 -15px;}

.btn-close {
    z-index: 5;
    position: relative;
    right: 0;
    background: none;
    border: 0;
    padding: 27px 20px;
    float: right;
}

.navbar-nav {text-align: center}

.navbar-brand {height: 100%;}
.navbar-nav>li>a{position:relative;color: #666670;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 1.44px;text-align:center;display:inline-block; padding:20px 0}
nav .navbar-nav a:after{content:'';position:absolute;width:100%;transform:scaleY(0);height:2px;bottom:10px;left:0;background: linear-gradient(90deg, #ADCCEE 0%, #7CA6BA 100%);transition:all .3s}

.navbar-nav li:not(.sns-icons).active{font-weight:700;color:#7CA6BA;background:none}
.nav>li>a:focus, .nav>li>a:hover {background:transparent;}

.navbar-nav>.active>a,.navbar-nav>.active>a:focus,.navbar-nav>.active>a:hover{font-weight:500;color:#7CA6BA;background:none}
nav .navbar-nav li.active a:after{transform:scaleY(1)}

nav .navbar-nav li.sns-icons a {display:inline-block; padding-right: 10px;}
nav .navbar-nav li.sns-icons a:last-child {padding-left: 10px; padding-right:0}

.navbar-nav>li>a.quiz-entry,
.navbar-nav>li>a.quiz-entry:hover {
    display:flex;
    height:44px;
    padding:8px 25px;
    justify-content:center;
    align-items:center;
    color:#FFF!important;
    font-size:16px;
    font-weight:500;
    line-height:normal;
    letter-spacing:1.28px;
    transition:all .3s;
    background:#7CA6BA!important;
    max-width:800px;
    width: calc(100% - 40px);
    margin:auto
}


.navbar-nav>li>a.quiz-entry:hover {
  opacity: 0.8;
}

.navbar-nav>li>a.quiz-entry:hover:after{all:unset}


.glyphicon-remove:before {
    content:'';
    background: url('../images/icon-close.svg') no-repeat center/cover;
    width:13px;
    height:13px;
    display: block;
}

.page-main {
    padding-top: 70px;
}

section {
  scroll-margin-top: 120px; /* Automatically forces a 120px gap at the top */
}

/* kv content */
.key_visual {
  position: relative;
}


/* intro content */
.intro {
    padding: 55px 0 40px;
    background: url('../images/bg-intro.jpg') no-repeat top center/cover
}

.intro .wrapper {
  max-width: 930px;
  width: 100%;
  margin: 0 auto;
}

.intro p{
    color: #595959;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 350;
    line-height: 175%; 
    letter-spacing: 1.92px;
    margin-bottom: 36px;
}


.separate img {width: 100%;}



/* Article */
.article-list {padding:35px 0 40px}
/* article col css */
.latest-article-column {width:100%;/*background:#FFF;*/margin-bottom:30px;box-sizing:border-box;transition:all .3s;}
.latest-article-column:hover{
  filter: drop-shadow(0 10px 20px #c3d7ec);transition:all .3s}
.latest-article-thumbnail{height:216px;background-size:cover;background-position:center center;transition:all .8s;overflow:hidden;position:relative}
.latest-article-thumbnail::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;transition:inherit}
.latest-article-column:hover .latest-article-thumbnail::before{transform:scale(1.1)}

.latest-article-content{
  position: relative;
  text-align:left;
  padding:40px 20px 47px;
  background-color: white;
}

.article_cat {
    position: absolute;
    top:-25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width:110px;
    height: 50px;
}

.article_cat.wedding {
    background-image:url('../images/cat-wedding.svg');
}

.article_cat.anni {
    background-image:url('../images/cat-anni.svg');
}


.article_headline{position:relative;color:#39556D;font-style: normal;font-weight: 400;font-size: 22px;letter-spacing: 1.76px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:64px;margin-bottom:8px}
.article_desc{margin-bottom: 15px;}
.article_desc p{font-style: normal;font-weight: 350;font-size: 16px;line-height: 175%;letter-spacing: 1.6px;color: #666670;
margin-bottom:0px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;min-height:56px;}
.more{position: absolute;right:0; bottom: 24px; color:#7CA6BA;font-size:14px;font-style:normal;font-weight:700;line-height:175%;letter-spacing: 2.1px; padding-right: 20px; display: inline-block; transition:all .3s}
.more:after{content:''; background-color:#7CA6BA; width:100%; height:1px; display: block;position: absolute; right: 0;;}
.article-tags{margin:0 auto 30px}
.article-tags button{font-style:normal;font-weight:700;font-size:18px;line-height:200%;letter-spacing:.05em;color:#CCC;padding:6px 30px;border-radius:10px;border:2px solid #CCC;background:#FFF;display:inline-block;margin:0 20px;transition:all .3s}
.article-tags button.is-checked,.article-tags button:hover{color:#fff;border-color:#003C71;background:#003C71;text-decoration:none; font-weight:bold !important}  
.article-tags button:focus{text-decoration:none}


/* Social Section */
.social-section {padding:40px 0 10px}
.social-section p {
    color: #666670;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.social-section .sns-icons a {display:inline-block; padding-right: 15px;}
.social-section .sns-icons a:last-child {padding-left: 15px; padding-right:0}
.social-section .sns-icons a svg {width: 32px; height: 32px}



/*div.article-block div.article-lower-block div.article-linkbtn {width: 100%; height: 40px; }

div.article-block div.article-lower-block div.article-linkbtn.article-type-1:before,
div.article-block div.article-lower-block div.article-linkbtn.article-type-3:before {
    content: "了解更多";
    color: #E03B12;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: 3.2px;
    position: absolute;
    right: 52px;
}

div.article-block div.article-lower-block div.article-linkbtn.article-type-1:after,
div.article-block div.article-lower-block div.article-linkbtn.article-type-3:after {
    content: '';
    background: url(../images/icon-arrow.svg) no-repeat;
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: -4px;
    position: absolute;
    right: 28px;
}

div.article-control { margin-top: 60px; }*/

div.footer-upper, div.footer-lower {margin: auto; }
div.page-footer .nav{color:#666670;}

div.page-footer .nav a{color:#7CA6BA; font-weight: 500;letter-spacing: 1.2px;}
div.footer-logo {margin-bottom: 18px}
div.footer-logo img.ESDlife-logo{max-width: 93px; width:100% }
div.footer-logo img.caring-logo{ max-width: 80px; width:100%; padding-right: 12px}
div.footer-logo img.CKHH-logo{ max-width: 75px;width:100% }


div.back-to-top { width: 50px; bottom: 15px; right: 15px; position: fixed; }
button.btn-back-to-top { padding: 0px; margin: 0px; border: none; opacity: 0; }
div.back-to-top button.btn-back-to-top img { width: 100%; cursor: pointer; }



/* Quiz */
.quiz-section {
    padding-top: 20px;
    padding-bottom: 120px;
    background: url('../images/bg-quiz.png') no-repeat bottom center / cover;
    overflow: hidden;
}

.quiz-section h1.section-title {
    margin-top: 0;
    margin-bottom: 50px;
}

.quiz-column {cursor: pointer;width:100%;/*background:#FFF;*/margin-bottom:30px; max-width: 500px; width: 100%; margin: 0 auto 30px; box-sizing:border-box;transition:all .3s; filter: drop-shadow(0 4px 5px rgba(124, 166, 186, 0.30));}
.quiz-column:hover {filter: drop-shadow(0 10px 20px #c3d7ec);transition:all .3s}
.quiz-column .clip-shape {    background-color: rgba(124, 166, 186, 0.50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:16px 14px; }

.quiz-column .clip-shape:after {
    margin: auto;
    content: "";
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    position: absolute;
    background-color: #fff;
    -webkit-clip-path: polygon(100% 0, 100% 95%, 95% 100%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 95%, 95% 100%, 0 100%, 0 0);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.quiz-thumbnail{width: 100%; aspect-ratio: 472 / 231 ;height:100%;background-size:cover;background-position:center center;transition:all .8s;overflow:hidden;position:relative; margin-bottom: 15px; z-index: 2}
.quiz-thumbnail::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;transition:inherit}
/*.quiz-column:hover .quiz-thumbnail::before{transform:scale(1.05)}*/
.quiz-column .quiz_headline {
  color: #39556D;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.92px;
}


.quiz-content { position: relative; z-index: 2;}

.quiz-intro {
  max-width: 930px;
  width: 100%;
  margin: 50px auto 0;
}

.quiz-intro .title {
    position: relative;
    text-align: center;
    margin-bottom: 18px;
}

.quiz-intro .title span{
  position: relative;
  background: linear-gradient(270deg, #39556D 0%, #5596CE 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1.92px;
}

.quiz-intro p {
  color: #595959;
  text-align: left;
  font-size: 16px;
  font-weight: 350;
  line-height: 175%;
  letter-spacing: 1.6px;
  margin-bottom: 50px;
}



.quiz-column.selected {
    filter: drop-shadow(0 8px 16px rgba(124, 166, 186, 0.40));
}

.assessment-btn, .assessment-btn:focus,
.btn-confirm-answer, .btn-confirm-answer:focus  {
    all:unset;
    background: #7CA6BA;
      max-width: 360px;
      width: 100%;
      margin: auto;
      color: #FFF !important;
      text-align: center;
      font-size: 22px;
      font-weight: 500;
      line-height: 175%;
      letter-spacing: 3.3px;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 0;
      margin-bottom: 50px;
      transition: all .3s;
      cursor: pointer;
}

.assessment-btn:hover, .btn-confirm-answer:hover {
  opacity: 0.8;
    background: #7CA6BA;
}

.question-form {max-width: 900px; margin: 0px auto 0}


.question-title {
    color: #39556D;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 4.2px;
    align-items: center;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 0px;
}

.question-text {
  color: #39556D;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 3.6px;
  margin-bottom: 50px;
  margin-top: 30px;
}


.answer-boxes {
  max-width: 888px;
  width: 100%;
  margin: auto auto 60px;
}

.option-item {
    margin-bottom: 8px;
    position: relative;
}

/* Hide the default radio button */
.option-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Style the label as the clickable area */
.option-item label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;                    /* space between circle and text */
    padding: 10px 12px;
    cursor: pointer;
    font-size: 18px;
    user-select: none;
    position: relative;
    display: inline-block;
    background: #fff;
    border: 1px solid #CDCDCD;
    color: #666670;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: 2.16px;
    text-align: center;
    width: 100%;
/*    height: 68px;*/
    transition: all .3s;
    /*justify-content: center;
    align-items: center;*/
    overflow: hidden;
}

/* Unchecked state - empty circle */
.option-item label::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 1px solid #cdcdcd;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}


.option-item label::after {
    transform: translate(-50%,-50%);
    content: "";
    position: absolute;
    left: 32px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #ffffff;
    transition: all 0.3s ease;
}


.option-item input[type="radio"]:checked + label {
    border-color:#7CA6BA;  
}
/* When checked - blue border + checkmark inside */
.option-item input[type="radio"]:checked + label::before {
    border-color:#7CA6BA;  
}

.option-item input[type="radio"]:checked + label::after {
    background: #7CA6BA;
}

.option-item label:hover {
    border-color: #7CA6BA;
    color: #7CA6BA;
    font-weight: 600;
}


.option-item label span {
    width: 76%;
    margin: 0 0 0 auto;
    text-indent: 0;
    display: inline-block;
}

.option-item input[type="radio"]:disabled + label {
    cursor: not-allowed;
}

/* Correct Answer */
.option-item input[type="radio"]:checked.correct-ans + label::before {
    border-color: #65CC67;
}

.option-item input[type="radio"]:checked.correct-ans + label::after {
    background: #65CC67;
}


.option-item input[type="radio"]:checked.correct-ans + label{
    background: rgba(101, 204, 103, 0.03);
}

.option-item input[type="radio"].correct-ans + label{
    color: #666670;
    border: 1px solid #65CC67;
}


/* Wrong Answer */
.option-item input[type="radio"]:checked.wrong-ans + label::before {
    border-color: #E57474;
}

.option-item input[type="radio"]:checked.wrong-ans + label::after {
    background: #E57474;
}

.option-item input[type="radio"]:checked.wrong-ans + label{
    background: rgba(229, 116, 116, 0.03);
}

.option-item input[type="radio"].wrong-ans + label{
    color: #666670;
    border: 1px solid #E57474;
}





.option-item input[type="radio"]:disabled {

}

/* Tips */
.question-feedback {
    background: url('../images/tips-frame-v.svg') no-repeat top center / 100% auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    height: 100%;
    margin-bottom: 60px;
    padding-top: 107.55%;
}


.question-feedback > div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
/*    z-index: 2;*/
}


.question-feedback div div {
    display: flex;gap:12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    color: #39556D;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 175%; 
    letter-spacing: 2.64px;
}

.question-feedback div .feedback-icon:before{
    content:"";
    background-size:cover;
    background-position: center;
    width: 32px;
    height:32px;
    display: flex;
}


.question-feedback div .feedback-icon.correct:before{
    background-image: url("../images/icon-correct.svg");
}


.question-feedback div .feedback-icon.wrong:before{
    background-image: url("../images/icon-wrong.svg");
}

.quiz .tips .ans_response {
  display: flex;
  color: #39556D;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2.64px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.question-feedback p {
    margin-bottom: 10px;
    color: #666670;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 175%;
    letter-spacing: 1.92px;
    padding: 0 30px;
    margin-bottom: 0;
}

.question-feedback a {
  color: #39556D;
  font-size: 16px;
  font-weight: 400;
  line-height: 175%;
  letter-spacing: 1.92px;
  text-decoration: underline;
}


.question-navigation button {
    border:0;
    background: #7CA6BA;
    max-width: 360px;
    width: 100%;
    margin: auto;
    color: #FFF !important;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: 3.3px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    margin-bottom: 50px;
    transition: all .3s;
    cursor: pointer;
}


.question-navigation button:hover {
    opacity: 0.8;
}


.btn-submit-questions {
    border:0;
    background: #7CA6BA;
    max-width: 360px;
    width: 100%;
    margin: auto;
    color: #FFF !important;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: 3.3px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    margin-bottom: 50px;
    transition: all .3s;
    cursor: pointer;
}

.btn-submit-questions:hover {
    opacity: 0.8;
}


/* Result */

.result {
  background: #fff;
}
.result .wrapper {
    max-width: unset;
}

.result .score-container{
    position: relative;
    margin: 60px auto 50px;
    background: url('../images/result-frame-v.svg') no-repeat top center / 100%;
    aspect-ratio: 438 / 599;
    padding: 20px;
    margin: 0 -12px 50px;
}


.result .score-container .row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
/*    height: 100%;*/
}


.result .score-container .txt {
  color: #595959;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 3.6px;
  max-width: 640px;
  width: 100%;
}

.result .score-container .txt .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
}

.result .score-container .score {
  color: #7EA7BC;
  font-size: 36px;
  font-weight: 700;
  display: inline-block;
}

.result .score-container p {
  color: #595959;
  font-size: 16px;
  font-weight: 350;
  line-height: unset;
  letter-spacing: 2.16px;
  margin-bottom: 0;
  display: inline-block;
  margin-top: 6px;
}

.result .score-container img {
  max-width: 200px;
  width: 100%;
  margin: auto;
}

.result .btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.result .link-btn {
  background: #7CA6BA;
  max-width: 360px;
  width: 100%;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 3.3px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  margin-bottom: 20px;
  transition: all .3s;
}

.result a:hover {
  opacity: 0.8;
}

.result .score-container .share a.share-btn{
    color: #4C6571;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.36px;
    display: inline-flex;
    gap: 8px;
    justify-content: center;
    margin-top: 16px;
    align-items: center;
    cursor: pointer;
}


.result .score-container .share img {
    max-width: 30px;
    width: 100%;
}

.result .btn-retest {
    border: 1px solid #7CA6BA;
    background: #FFF;
    max-width: 360px;
    width: 100%;
    color: #7CA6BA;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 175%;
    letter-spacing: 3.3px;
    height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0;
    margin:0 auto;
    transition: all .3s;
    margin-top: 15px;
}

#enquiry {
    padding-top: 60px;
    padding-bottom: 120px;
    border-width: 0 0 2px;
    border-style: solid;
    border-image: linear-gradient(to right, #ADCCEE, #7CA6BA) 1;
}


#enquiry .row.row-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


#enquiry .section-title  span {
    position: relative;
    background: linear-gradient(270deg, #39556D 0%, #5596CE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 28px;
    font-weight: 350;
    letter-spacing: 5.4px;
}


#enquiry img.logo {
    max-width: 200px;
    width: 100%;
    margin:0 auto 25px;
}


#enquiry  a {
    margin: 10px 0 0 0;
    background: #7CA6BA;
    max-width: 295px;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 3.3px;
    border-radius: 0;
    padding: 10px 15px;
    transition: all .3s;
    display: block;
}

/* 
#enquiry .qr-code img {
    max-width: 180px;
    width: 100%;
    margin: 0;
}

#enquiry .qr-btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
} */



/* Course */
.course { padding:30px 0}
.course-column {position: relative; width:100%;/*background:#FFF;*/margin-bottom:30px;box-sizing:border-box;transition:all .3s;}
.course-column:hover{
  filter: drop-shadow(0 10px 20px #c3d7ec);transition:all .3s}
.course-thumbnail{height:245px;background-size:cover;background-position:center center;transition:all .8s;overflow:hidden;position:relative}
.course-thumbnail::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;transition:inherit}
.course-column:hover .course-thumbnail::before{transform:scale(1.1)}

.course-content{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0 20px 35px;
  padding-bottom: 20px;
  width: 100%;
}


.course-column .mask {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, #B2B2B2 50%, #000 100%);
  mix-blend-mode: multiply;
  width: 100%;
  height: 245px;
}

.course_headline {
  color: #FFF;
  font-size: 22px;
  font-weight: 500;
  line-height: 125%;
  letter-spacing: 0.8px;
  z-index: 2;
  position: relative;
  width: 100%;
}

.course_headline.en {
  letter-spacing: 0;
  font-size: 16px;
  width: 80%;
}

.course-column .more {
  bottom: 14px;
}


.link-btn.course-btn, .course .link-btn {
    max-width: 450px;
    margin: 30px auto 15px;
    background: #7CA6BA;
    width: 100%;
    color: #FFF;
    line-height: 1.1;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 3.3px;
    border-radius: 0;
    padding: 8px 15px;
    transition: all .3s;
}

.course .link-btn {
    display: block;
}


.padding:after {
    content: "";
    position: relative;
    background: url('../images/tips-frame-v.svg') no-repeat top center / 100%;
    aspect-ratio: 534 / 571;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}


/* Upcoming Events */
.upcoming .event-box {
    border: 1px solid #5596CE;
    background: linear-gradient(0deg, rgba(124, 166, 186, 0.07) 0%, rgba(124, 166, 186, 0.07) 100%), #FFF;
    padding:15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
}

.upcoming .event-box>div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.upcoming .event-box .event-icon {
    aspect-ratio: 1;
    width: 90px;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.upcoming .event-box.class .event-icon {
    background-image: url('../images/event-class.svg');
}

.upcoming .event-box.exhibition .event-icon {
    background-image: url('../images/event-exhibition.svg');
}

.upcoming .event-box .event-info {
    display: flex;
    gap: 8px;
    flex-direction: column;
    flex: 1;
}

.upcoming .event-box .event-info p {
    color: #39556D;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.48px;
    margin-bottom: 0;
}

.upcoming .event-box .event-info .location, 
.upcoming .event-box .event-info .date {
    color: #39556D;
    font-size: 16px;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.36px;
    display: flex;
    gap: 8px;
    align-items: center;
    text-align: left;
}

.upcoming .event-box .event-info .location i:before {
    content:"";
    background:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.5C9.81273 1.50248 7.71575 2.37247 6.16911 3.91911C4.62247 5.46575 3.75248 7.56273 3.75 9.75C3.75 16.8094 11.25 22.1409 11.5697 22.3641C11.6958 22.4524 11.846 22.4998 12 22.4998C12.154 22.4998 12.3042 22.4524 12.4303 22.3641C12.75 22.1409 20.25 16.8094 20.25 9.75C20.2475 7.56273 19.3775 5.46575 17.8309 3.91911C16.2843 2.37247 14.1873 1.50248 12 1.5ZM12 6.75C12.5933 6.75 13.1734 6.92595 13.6667 7.25559C14.1601 7.58524 14.5446 8.05377 14.7716 8.60195C14.9987 9.15013 15.0581 9.75333 14.9424 10.3353C14.8266 10.9172 14.5409 11.4518 14.1213 11.8713C13.7018 12.2909 13.1672 12.5766 12.5853 12.6924C12.0033 12.8081 11.4001 12.7487 10.8519 12.5216C10.3038 12.2946 9.83524 11.9101 9.50559 11.4167C9.17595 10.9234 9 10.3433 9 9.75C9 8.95435 9.31607 8.19129 9.87868 7.62868C10.4413 7.06607 11.2044 6.75 12 6.75Z" fill="%2339556D"/></svg>') no-repeat center/cover;
    width: 24px;
    height:24px;
    display: inline-block;
}

.upcoming .event-box .event-info .date i:before {
    content:"";
    background:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 3H17.25V2.25C17.25 2.05109 17.171 1.86032 17.0303 1.71967C16.8897 1.57902 16.6989 1.5 16.5 1.5C16.3011 1.5 16.1103 1.57902 15.9697 1.71967C15.829 1.86032 15.75 2.05109 15.75 2.25V3H8.25V2.25C8.25 2.05109 8.17098 1.86032 8.03033 1.71967C7.88968 1.57902 7.69891 1.5 7.5 1.5C7.30109 1.5 7.11032 1.57902 6.96967 1.71967C6.82902 1.86032 6.75 2.05109 6.75 2.25V3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM6.75 4.5V5.25C6.75 5.44891 6.82902 5.63968 6.96967 5.78033C7.11032 5.92098 7.30109 6 7.5 6C7.69891 6 7.88968 5.92098 8.03033 5.78033C8.17098 5.63968 8.25 5.44891 8.25 5.25V4.5H15.75V5.25C15.75 5.44891 15.829 5.63968 15.9697 5.78033C16.1103 5.92098 16.3011 6 16.5 6C16.6989 6 16.8897 5.92098 17.0303 5.78033C17.171 5.63968 17.25 5.44891 17.25 5.25V4.5H19.5V7.5H4.5V4.5H6.75ZM19.5 19.5H4.5V9H19.5V19.5ZM13.125 12.375C13.125 12.5975 13.059 12.815 12.9354 13C12.8118 13.185 12.6361 13.3292 12.4305 13.4144C12.225 13.4995 11.9988 13.5218 11.7805 13.4784C11.5623 13.435 11.3618 13.3278 11.2045 13.1705C11.0472 13.0132 10.94 12.8127 10.8966 12.5945C10.8532 12.3762 10.8755 12.15 10.9606 11.9445C11.0458 11.7389 11.19 11.5632 11.375 11.4396C11.56 11.316 11.7775 11.25 12 11.25C12.2984 11.25 12.5845 11.3685 12.7955 11.5795C13.0065 11.7905 13.125 12.0766 13.125 12.375ZM17.25 12.375C17.25 12.5975 17.184 12.815 17.0604 13C16.9368 13.185 16.7611 13.3292 16.5555 13.4144C16.35 13.4995 16.1238 13.5218 15.9055 13.4784C15.6873 13.435 15.4868 13.3278 15.3295 13.1705C15.1722 13.0132 15.065 12.8127 15.0216 12.5945C14.9782 12.3762 15.0005 12.15 15.0856 11.9445C15.1708 11.7389 15.315 11.5632 15.5 11.4396C15.685 11.316 15.9025 11.25 16.125 11.25C16.4234 11.25 16.7095 11.3685 16.9205 11.5795C17.1315 11.7905 17.25 12.0766 17.25 12.375ZM9 16.125C9 16.3475 8.93402 16.565 8.8104 16.75C8.68679 16.935 8.51109 17.0792 8.30552 17.1644C8.09995 17.2495 7.87375 17.2718 7.65552 17.2284C7.43729 17.185 7.23684 17.0778 7.0795 16.9205C6.92217 16.7632 6.81502 16.5627 6.77162 16.3445C6.72821 16.1262 6.75049 15.9 6.83564 15.6945C6.92078 15.4889 7.06498 15.3132 7.24998 15.1896C7.43499 15.066 7.6525 15 7.875 15C8.17337 15 8.45952 15.1185 8.6705 15.3295C8.88147 15.5405 9 15.8266 9 16.125ZM13.125 16.125C13.125 16.3475 13.059 16.565 12.9354 16.75C12.8118 16.935 12.6361 17.0792 12.4305 17.1644C12.225 17.2495 11.9988 17.2718 11.7805 17.2284C11.5623 17.185 11.3618 17.0778 11.2045 16.9205C11.0472 16.7632 10.94 16.5627 10.8966 16.3445C10.8532 16.1262 10.8755 15.9 10.9606 15.6945C11.0458 15.4889 11.19 15.3132 11.375 15.1896C11.56 15.066 11.7775 15 12 15C12.2984 15 12.5845 15.1185 12.7955 15.3295C13.0065 15.5405 13.125 15.8266 13.125 16.125ZM17.25 16.125C17.25 16.3475 17.184 16.565 17.0604 16.75C16.9368 16.935 16.7611 17.0792 16.5555 17.1644C16.35 17.2495 16.1238 17.2718 15.9055 17.2284C15.6873 17.185 15.4868 17.0778 15.3295 16.9205C15.1722 16.7632 15.065 16.5627 15.0216 16.3445C14.9782 16.1262 15.0005 15.9 15.0856 15.6945C15.1708 15.4889 15.315 15.3132 15.5 15.1896C15.685 15.066 15.9025 15 16.125 15C16.4234 15 16.7095 15.1185 16.9205 15.3295C17.1315 15.5405 17.25 15.8266 17.25 16.125Z" fill="%2339556D"/></svg>') no-repeat center/cover;
    width: 24px;
    height:24px;
    display: inline-block;
}

.upcoming .event-box a {
    margin: auto;
    background: #7CA6BA;
    max-width: 295px;
    width: 100%;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 3.3px;
    border-radius: 0;
    padding: 10px 15px;
    transition: all .3s;
    display: block;
}

.upcoming .register {
    justify-content: center;
    margin-top: 20px;
}

.upcoming .register p{
    color: #39556D;
    font-size: 18px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: 0.48px;
    margin-bottom: 0;
}


.upcoming .register img.qr-code {
    max-width: 100px;
}


/* Footer */
footer { padding: 30px 0 25px;}
footer .disclaimer, footer .disclaimer a, footer .nav {font-style: normal;font-weight: 350;font-size: 12px;line-height: 24px;text-align: center;letter-spacing: 0.1em;color: #666670;margin-bottom: 20px;}
footer .disclaimer {padding:0 5px}
footer .disclaimer a:hover {color:#7CA6BA; transition:all .3s}
footer .nav {display: inline-block;margin-bottom: 40px}
footer .nav a{color:#7CA6BA; font-weight: 500;letter-spacing: 0.1em;}
footer .logo-row{margin-bottom:24px}
footer .logo-row img{width:auto}
footer .global_footer .esdlife-logo{float:left}
footer .logo-row .logo_container{display:inline-block;float:right;vertical-align:middle;text-align:right}
footer .logo-row .logo_container img:nth-child(1){float:initial;margin-right:30px}
footer .logo-row .logo_container img:nth-child(2){width:50%;}
footer .footer-copyright *{color:#666670;font-size:10px;font-weight:300;line-height:21px;letter-spacing:.6px}

footer .logo-row .logo_container img:nth-child(1) {
  margin-right: 5px;
}
footer .logo-row .logo_container img:nth-child(2) {
  width: 40%;
}

.btn-type-text { border: none; background: transparent; }
.btn-type-text:focus, .btn-type-text:active { outline: 0; }

.confirm-box { display: none; width: 350px; height: 130px; }
.confirm-box div { text-align: center; }

.terms-reminder { display: none; width: 350px; height: 130px; }
.terms-reminder div { text-align: center; }

.terms_txt{font-size:15px; color:#666;}
.field_txt{font-size:18px; color:#666;}

.text-btn { background: transparent; border: none; padding: 0px; }
.text-btn:focus, .text-btn:active { outline: none; }

.btn-unsubcript { background: transparent; text-decoration: underline; padding: 0px; margin: 0px; border: none; }

.white-popup { position: relative; background: #FFF; padding: 20px; width: auto; width: 94%; max-width: 500px; margin: 20px auto; font-size: 18px; }

.block { width: 100%; display: inline-block; position: relative; }

.article-content{height:auto}

.en * {letter-spacing: 0 !important}
.en .question-feedback p {margin-bottom: 8px}
.en .question-feedback p, .question-feedback a{line-height: 1.4;}
.en .option-item label span{line-height: 1.2;}

/*================== End Global Setting ==================*/



/*================== Animation  ==================*/
.animate-fade {
  animation: fade ease 3s;
  -webkit-animation: fade ease 3s;
  -moz-animation: fade ease 3s;
  -o-animation: fade ease 3s;
  -ms-animation: fade ease 3s
}

@keyframes fade {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
/****** End Mobile View ******/