.section-title {
    text-align: center;
    padding-top: 60px;
}
@media (max-width: 900px) {
    .section-title {
        padding-top: 45px;
    }
}

/* ================================ buttons ================================ */
.btn-normal {
    background-color: #000;
    border-radius: 30px;
    padding: 0.625rem 1.25rem;
    color: #fff;
    transition: 0.2s ease;
    border: 1px solid rgba(255,255,255,0);
}
.btn-normal.block {
    display: inline-block;
}
.btn-normal.second {
    background-color: #fff;
    color: #333;
    border: 1px solid #CCCCCC;
}

.btn-normal:hover {
    background-color: rgb(38, 141, 255);
    color: #fff;
}

/* ============================== buttons (end) ============================== */


/* ================================ normal-card ================================ */
.normal-card {
    /* border: 1px solid blue; */
    width: 300px;
    border-radius: 6px;
    box-shadow:0px 0px 6px 0px rgba(0,0,0,0.3);
    position: relative;
    padding-bottom: 10px;
}

.normal-card-top {
    /* border: 1px solid #fbb; */
    min-height: 300px;
    overflow: hidden;
}

.normal-card-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    transition: 0.2s ease;
}

.normal-card-img:hover {
    transform: scale(1.2);
}

.normal-card-bot {
    /* border: 1px solid #5c9; */
    padding: 10px;
    padding-top: 15px;
}

.normal-card-title {
    font-size: 1.25rem;
    margin-bottom: 5px;
}

.normal-card-describe {
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.normal-card-btnList {
    /* position: absolute; */
    left: 10px;
    bottom: 10px;
}

.fake-link {
    opacity: 0;
    user-select: none;
    pointer-events: none;
    visibility: hidden;
}        

/* ============================== normal-card (end) ============================== */

/* ================================ whole-img-card ================================ */

.whole-img-card {
    /* border: 1px solid #59c; */
    padding: 90px 40px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

.whole-img-card .btn-normal:not(:first-of-type) {
    margin-top: 6px;
}

.whole-img-card-bg {
    position: absolute;
    filter: blur(8px);
    z-index: -2;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.1);
}

.whole-img-card-mask {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
}

.whole-img-card-section {
    /* border: 1px solid #fbb; */
    width: 100%;
    max-width: 1280px;
    margin: auto;
    display: flex;
    align-items: center;
}

.whole-img-card-imgPart {
    width: 32.8125vw;
    height: 21.875vw;
    min-width: 32.8125vw;
    max-width: 630px;
    max-height: 420px;
    margin-right: 30px;
    overflow: hidden;
}

.whole-img-card-imgPart img {
    display: block;
    width: 100%;
    object-fit: cover;
    transition: 0.2s ease;
}

.whole-img-card-imgPart img:hover {
    transform: scale(1.2);
}

.whole-img-card-textPart {
    /* border: 1px solid #fbb; */
    word-break: break-all;
}

@media (max-width: 1000px) {
    .whole-img-card {
        padding: 50px 20px;
    }
}

@media (max-width: 820px) {
    .whole-img-card {
        padding: 0;
    }            
    .whole-img-card-section {
        display: block;
    }

    .whole-img-card-imgPart {
        width: 100%;
        max-width: 100vw;
        height: 55vw;
        min-height: 250px;
    }

    .whole-img-card-textPart {
        padding: 20px;
    }
}

/* ============================== whole-img-card (end) ============================== */


/* ================================ owl carousel ================================ */

.owl-carousel {
    z-index: 0;
}

.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: none;
    border: 1px solid #E6E6E6;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #333;
    border: none;
    opacity: 1;
}

/* ============================== owl carousel (end) ============================== */



/* ================================ scroll to top ================================ */
.scroll-to-top {
    position: fixed;
    z-index: 1;
    right: 20px;
    bottom: 40px;
    box-shadow: 0 0 6px 0px rgba(0,0,0,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s ease;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
}

.scroll-to-top.hide {
    visibility: hidden;
    opacity: 0;
}

.scroll-to-top svg, .scroll-to-top img {
    transform: rotate(-90deg);
    display: block;
    width: 100%;
    height: 100%;
}

@media (max-width: 900px) {
    .scroll-to-top {
        bottom: 20px;
    }
}
/* ============================== scroll to top (end) ============================== */


/* ================================ style1 multiple wysiwyg ================================ */
.wysiwyg-part {
    width: 100%;
    max-width: 1080px;
    margin: auto;
}

.wysiwyg-part .section-title {
    /* padding-top: 45px; */
}

.multipleTextArea {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, .3);
}

.multipleTextArea > div {
    width: 100%;
}

.multipleTextArea .set {
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 0, 0, .3);
}

.multipleText-item {
    /* border: 1px solid #59c; */
    width: 100%;
    flex: 1;
    -ms-flex: 1;
    padding: 15px;
}

.question {
    display: flex;
    align-items: center;
}

.question h5 {
    margin-bottom: 0;
}

.icon-btn {
    position: relative;
    width: 15px;
    height: 15px;
    margin-right: 15px;
    transition: .3s;
}

.answer.show .icon-btn {
    transform: rotate(45deg);
}

.icon-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, .3);
    transform: translate(0, -50%);
}

.icon-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    transform: translate(-50%, 0);
}

.answer {
    max-height: 0;
    transition: .25s;
    overflow: hidden;
    padding-left: 30px;
}

@media (max-width: 900px) {
    /* .wysiwyg-part .section-title {
        padding-top: 30px;
    } */

   

    .multipleTextArea {
        display: block;
    }
}
/* ============================== style1 multiple wysiwyg (end) ============================== */


/* ================================ style2 list carousel ================================ */
.list-carousel-section-outside {
    padding: 0 40px;
}

.list-carousel-section {
    /* border: 1px solid blue; */
    /* background-color: #5c9; */
    margin: auto;
    max-width: 1580px;
    position: relative;
}

.list-carousel-section .normal-card {
    margin: 5px;
    width: auto;
}

.list-carousel-section .normal-card-img {
    object-fit: cover;
}

.list-carousel-arrow {
    /* border: 1px solid #fbb; */
    display: inline-block;
    position: absolute;
    z-index: 0;
    top: -30px;
    bottom: 0;
    margin: auto;
    width: 2.8125rem;
    height: 2.8125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;        
    box-shadow:0px 0px 6px 0px rgba(0,0,0,3);
    border-radius: 50%;
}

.list-carousel-arrow::before {
    /* border: 1px solid blue; */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 3.125rem;
    height: 3.125rem;
}

.list-carousel-arrow.left {
    left: 0;
    transform: rotate(180deg) translate(50%, 0);
}

.list-carousel-arrow.right {
    right: 0;
    transform: translate(50%, 0);
}

.list-carousel-arrow svg, .list-carousel-arrow img {
    display: block;
    width: 100%;
    height: 100%;
}

.list-carousel .btn-normal {
    margin-top: 6px;
}

@media (max-width: 500px) {
    .list-carousel-section-outside {
        padding: 0 5px;
    }
    .list-carousel-arrow.left {
        transform: rotate(180deg) translate(-20%, 0);
    }

    .list-carousel-arrow.right {
        transform: translate(-20%, 0);
    }        
}
/* ============================== style2 list carousel (end) ============================== */


/* ================================ style3 card list ================================ */
.style3 .btn-normal:first-of-type {
    margin-right: 5px;
}

.style3 .btn-normal:not(:first-of-type) {
    margin-top: 10px;
}

.style3 .card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1580px;
    margin: auto;
}

.style3 .card-list .normal-card {
    margin: 5px;
}

.style3 .card-list .normal-card-img {
    height: auto;
    object-fit: cover;
    max-height: 300px;
}

@media (max-width: 800px) {
    .style3 .card-list .normal-card {
        margin: 3px;
    }        
    .style3 .normal-card {
        width: calc(50% - 6px);
    }
}

@media (max-width: 630px) {
    .style3 .btn-normal:not(:first-of-type) {
        margin-top: 6px;
    }

    .style3 .card-list .normal-card {
        margin: 3px;
    }        
    .style3 .normal-card {
        width: 100%;            
    }

    .style3 .normal-card-img, .style3 .normal-card-top {
        min-height: 250px;
    }
} 
/* ============================== style3 card list (end) ============================== */


/* ================================ blog-card ================================ */
.blog-card {
    /* border: 1px solid blue; */
    width: 100%;
    max-width: 330px;
}

.blog-card-top {
    height: 100%;
    overflow: hidden;
    height: 220px;
    position: relative;
}

.blog-card-img {
    display: block;
    width: 100%;
    min-height: 220px;
    object-fit: cover;
}

.blog-card-bottom {
    /* border: 1px solid #fbb; */
    padding: 10px;
}

.blog-card-top-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s ease;
}

.blog-card .btn-normal {
    opacity: 0;
    cursor: pointer;
}

.blog-card:hover .btn-normal {
    transform: scale(1);
    opacity: 1;    
}
.blog-card:hover .blog-card-top-wrapper {
    background:rgba(255, 255, 255, 0.1);
}
/* ================================ blog-card (end) ================================ */


/* ================================ blog style (end) ================================ */
.blogStyle .section-title {
    position: relative;
    max-width: calc(1020px - 40px);
    margin-left: auto;
    margin-right: auto;
}

.blog-title-link {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 1rem;
}

.blog-sect {
    max-width: calc(1020px + 40px);
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.blog-carousel {
    max-width: 675px;
    width: 100%;
    position: relative;
}

.blog-carousel-img {
    display: block;
    width: 100%;
    min-height: 400px;
    max-height: 400px;
    object-fit: cover;
}

.blog-carousel-item {
    position: relative;
}

.blog-carousel-item-link {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.blog-carousel-item-down {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
    display: flex;    
    color: #fff;
    padding: 0 20px;
    padding-bottom: 10px;
}

.blog-carousel-describe {
    margin-right: 15px;
}

.blog-carousel-btn {
    display: flex;
    align-items: center;
    width: 150px;
    position: relative;
    z-index: 1;
}

.blog-carousel .btn-normal {
    white-space: nowrap; 
    overflow: visible;
    cursor: pointer;
}

.blog-carousel-arrow {
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.blog-carousel-arrow.left {
    left: 0;
}
.blog-carousel-arrow.right {
    right: 0;
}
.blog-carousel-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 30px;
    max-height: 30px;
    box-shadow:0px 0px 10px 0px rgba(0,0,0,0.2);
    border-radius: 50%;
}
.blog-carousel-arrow.left svg {
    transform: rotate(180deg);
}

.blog-carousel .owl-dots {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.blog-sect .blog-padding {
    padding: 7.5px;
    padding-top: 0;
}
.blog-sect .blog-padding:nth-of-type(1) {
    padding-left: 0;
    padding-right: 0;
    margin-right: 7.5px;
    margin-bottom: 22.5px;
}
.blog-sect .blog-padding:nth-of-type(3) {
    padding-left: 0;
}
.blog-sect .blog-padding:nth-of-type(4) {
    padding-right: 0;
    margin-right: 7.5px;
}

.blog-sect .blog-card {
    height: 400px;
}

.blog-more {
    margin-top: 20px;
    text-align: center;
}

@media (max-width: 1130px) {

    .blog-title-link.btn-normal.block {
        display: none;
    }

    .blog-sect {
        justify-content: space-around;
    }

    .blog-carousel {
        max-width: 900px;
    }

    .blog-sect .blog-padding:nth-of-type(1) {
        margin-right: 0;
    }
    .blog-sect .blog-padding:nth-of-type(3) {
        padding-left: 7.5px;
    }
    .blog-sect .blog-padding:nth-of-type(4) {
        padding-right: 7.5px;
        margin-right: 0;
    }    

    .blog-sect .blog-card {
        max-width: 40vw;
        min-width: 330px;
    }

    .blog-card-top, .blog-sect .blog-card-img {
        height: 26.6667vw;
    }
}

@media (max-width: 770px) {
    .blog.normal-padding {
        padding: 0;
    }
}

@media (max-width: 720px) {

    .blog-sect .blog-card {
        max-width: 100%;
        min-width: auto;
    }

    .blog-sect .blog-card-top, .blog-sect .blog-card-img {
        height: calc(66.6667vw - 40px);
        max-height: 350px;
        min-height: auto;
    }

    .blog-sect .blog-padding,
    .blog-sect .blog-padding:nth-of-type(3),
    .blog-sect .blog-padding:nth-of-type(4)  {
        padding: 20px;
        padding-bottom: 0;
    }

    .blog-sect .blog-card {
        height: auto;
    }
}

@media (min-width: 680px) {
    .blog-carousel .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background-color: #fff;
    }
}

@media (max-width: 680px) {

    .blog-carousel-item-down {
        display: block;
        background: none;
    }

    .blog-carousel-describe {
        text-shadow:0px 0px 10px rgba(0,0,0,0.5);
        text-align: center;
    }

    .blog-carousel-btn {
        width: 100%;
        margin-bottom: 30px;
        justify-content: center;
    }
}

@media (max-width: 500px) {
    
    .blog-sect .blog-padding,
    .blog-sect .blog-padding:nth-of-type(3),
    .blog-sect .blog-padding:nth-of-type(4)  {
        padding: 10px;
    }

    .blog-carousel-arrow {
        display: none;
    }

}


/* blog carousel animation */
.fade-out-fwd {
  animation: fade-out-fwd 1s ease;
}
@keyframes fade-out-fwd{0%{transform:translateZ(0);opacity:1}100%{transform:translateZ(80px);opacity:0}}:

/* ================================ blog style ================================ */