/* message */
#about-message {position:relative;}
#about-message.bg {background: url('../images/about/message/bg-about-messages.webp'),linear-gradient(139deg, rgba(243, 247, 251, 1) 50%, rgba(237, 245, 249, 1) 48%, rgba(254, 242, 224, 1) 100%);background-size: 100%;background-position: center 100px;background-repeat: no-repeat;}
#about-message .chairman {width:55%;margin-top:85px;z-index:9;}
#about-message .chairman br.line1 {display:block;}
#about-message h2 {font-size:30px;color:#114B33;text-align:center;font-family:'promptmedium'}
#about-message p.text-chairman {font-size:20px;line-height:40px;}
#about-message .quote-top {margin-left:-50px;top:-9px;position:absolute;}
#about-message .quote-bottom {margin-left:20px;bottom:-5px;position:absolute;}
#about-message .signature {margin-top:50px;}
#about-message .name {font-size:20px;color:#055D0F;font-family:'promptmedium';margin-bottom:8px;}
#about-message .name span {color:#838383;display:block}
#about-message .chairman-position {font-size:20px;font-family:'promptmedium';}
#about-message .mobile-img {display:none;}
#about-message .position-row {position:relative;}
#about-message .personnel {width:100%;position:relative;z-index:9;padding-top:200px;}
#about-message .personnel-list {margin-top:270px}
#about-message .box {position:relative;overflow:visible;border-radius:8px;min-height:523px;z-index:9;padding:60px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:end;-webkit-align-content:flex-end;align-content:flex-end}
#about-message .box::before {content:"";position:absolute;bottom:0;right:0;width:100%;height:100%;border-radius:8px;background: url(../images/about/message/icon-message.svg), linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));background-position:right bottom;background-repeat:no-repeat;transform:scaleX(1)}
#about-message .box:nth-child(even)::before {transform: scaleX(-1)}
#about-message .box + .box {margin-top:290px}
#about-message .message {font-size:25px;color:#B29530;text-align:center;font-family:'promptmedium';margin-top:50px}
#about-message .position {position:absolute;top:0;left:50%;transform:translate(-50%, -30%);z-index:11;padding:0 60px;text-align:center;width:100%}
#about-message .circle {width:388px;height:388px;background:#EDEDEE;background: radial-gradient(circle, rgba(237, 237, 238, 1) 0%, rgba(213, 213, 214, 1) 100%);border-radius:100%;position:relative;margin-bottom:25px;margin-left:auto;margin-right:auto}
#about-message .circle img {width:100%;height:auto}
#about-message .border-svg {position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;border-radius:8px;overflow:hidden;z-index:10}
#about-message .border-rect {fill:none;stroke:#b59449;stroke-width:6;vector-effect:non-scaling-stroke;stroke-dasharray:5000;stroke-dashoffset:5000;transition:stroke-dashoffset 3s ease-in-out;transform:scaleX(-1);transform-origin:center}
#about-message .box:hover .border-rect {stroke-dashoffset:0}

/* milestone */
#about-milestone {position:relative;}
#about-milestone.bg {background: url(../images/about/milestone/bg-milestone.webp), linear-gradient(139deg, rgba(243, 247, 251, 1) 45%, rgba(237, 245, 249, 1) 48%, rgba(254, 242, 224, 1) 100%);background-size:100%;background-position:center 100px;background-repeat:no-repeat;padding:90px 0 0 0}
#about-milestone .mobile-img {display:none}
#about-milestone .know {width:55%;margin-top:85px;z-index:9}
#about-milestone p.text-know {font-size:20px;line-height:40px}
#about-milestone p.text-know + p.text-know {margin-top:15px}
#about-milestone .founder {width:100%;position:relative;z-index:9;padding-top:300px;}
#about-milestone .founder img {width:100%;height:auto}
#about-milestone .founder p {font-size:20px;text-align:center;font-family:'promptmedium'}
#about-milestone .text-gold {font-size:25px;color:#B39630;text-align:center;font-family:'promptmedium'}
#about-milestone .founder h2 {font-size:40px;color:#114B33;text-align:center;margin:10px 0 25px 0;font-family:'promptsemibold'}
#about-milestone .founder .name {position:relative}
#about-milestone .founder br.line {display:none}
#about-milestone .founder .flex-name {position:absolute;width:50%;left:50%;transform:translate(-50%, -50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between} 
#about-milestone .founder .flex-name .text-name {font-size:25px;color:#B39630;text-align:center;font-family:'promptmedium';}
#about-milestone .founder .box-text {width:100%;position:absolute;top:40%;left:50%;transform:translate(-50%, -50%)}
#about-milestone .milestone {padding-top:150px}
#about-milestone .milestone .box-text {text-align:center;margin-bottom:50px}
#about-milestone .milestone .box-text h2 {font-size:30px;color:#114B33;font-family:'promptmedium'}
#about-milestone .milestone .nav-arrow {margin-bottom:70px;display:flex;justify-content:center;align-items:flex-end;gap:20px}
#about-milestone .milestone .nav-arrow-btn {width:35px;height:35px;border-radius:100%;border:1px solid #B9B9B9;background:transparent;color:#B9B9B9;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all 0.3s;flex-shrink: 0;transform:translateY(-2px)}
#about-milestone .milestone .nav-arrow-btn svg {stroke:#B39630}
#about-milestone .milestone .nav-arrow-btn:hover {border-color:#B39630;background-color:#B39630}
#about-milestone .milestone .nav-arrow-btn:hover svg {stroke:#fff}
#about-milestone .milestone .top-nav-container { position:relative;width:100%;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style: none; scrollbar-width: none; padding-bottom:20px;min-width:0}
#about-milestone .milestone .top-nav-container::-webkit-scrollbar { display:none}
#about-milestone .milestone .top-nav {display:flex;justify-content:space-between;list-style:none;padding:0;position:relative;z-index:10;margin:0}
#about-milestone .milestone .top-nav li {position:relative;font-size:25px;font-weight:500;color:#8AA79A;cursor:pointer;transition: all 0.3s;text-align:center;flex:0 0 20%;padding-bottom:30px;font-family:'promptmedium'}  
#about-milestone .milestone .top-nav li.active, .top-nav li:hover {color:#B39630}
#about-milestone .milestone .top-nav li::after {content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:16px;height:16px;border:3px solid #8AA79A;border-radius:100%;background-color:transparent;z-index:10;transition:all 0.3s;}
#about-milestone .milestone .top-nav li.active::after {border-color:#B39630;background-color:#B39630}
#about-milestone .milestone .top-magic-line-wrapper { position:relative;height:1px;width:100%;z-index:1;top:-1px}
#about-milestone .milestone .base-dotted-line {position:absolute;top:0;left:0;width:100%;height:1px;border-top:2px dotted #aeaeae}
#about-milestone .milestone .magic-sliding-line {position:absolute;top:-1px;left:0;width:0;height:2px;background-color:#B39630;z-index:1;opacity:0;transition:all 0.4s cubic-bezier(0.25, 1, 0.5, 1);}
#about-milestone .milestone .magic-sliding-line::after {content:''; position:absolute;left:0;top:0;width:100%;height:100%;background-color:#B39630;clip-path:polygon(0% 0%, 0% 100%, 30% 100%, 80% 80%, 90% 70%, 100% 50%, 90% 30%, 80% 20%, 30% 0%);-webkit-mask-image:linear-gradient(to right, black 80%, transparent 100%);mask-image:linear-gradient(to right, black 80%, transparent 100%)}
#about-milestone .milestone .timeline-body {position:relative;}
#about-milestone .milestone .period-content {display:none;gap:60px;min-height:800px}
#about-milestone .milestone .period-content.active {display:flex}
#about-milestone .milestone .left-nav {width:140px;position:relative;padding:0 30px 150px 0;text-align:right}
#about-milestone .milestone .left-nav ul {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:50px;padding-top:25px}
#about-milestone .milestone .left-nav li {font-size:44px;color:#B39630;opacity: 0.3;cursor:pointer;transition:all 0.3s;font-family:'promptmedium'}
#about-milestone .milestone .left-nav li.active {opacity:1}
#about-milestone .milestone .left-dotted-track {position:absolute;right:0;top:0;height:100%;width:1px;border-right:2px dotted #a4a4a4;z-index:1}
#about-milestone .milestone .left-magic-bar {position:absolute;right:-4px;top:0;width:7px;height:36px;background-color:#B39630;z-index:2;transition:top 0.4s ease}
#about-milestone .milestone .left-magic-bar::before {content:'';position:absolute;top:-16px;left:50%;transform:translateX(-50%);width:14px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23a0a0a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
#about-milestone .milestone .left-magic-bar::after {content: '';position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);width:14px;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23a0a0a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
#about-milestone .milestone .content-area {flex:1}
#about-milestone .milestone .year-panel {display:none;animation:fadeIn 0.5s ease}
#about-milestone .milestone .year-panel.active {display:block}
#about-milestone .milestone .mobile-year-title {display:none;color:#B39630;font-size:32px;margin-bottom:20px}
#about-milestone .milestone .story-grid {display:grid;grid-template-columns:1fr 1fr;gap:55px;padding-bottom:150px}
#about-milestone .milestone .story img {width:100%;border-radius:16px;margin-bottom:25px;height:auto/*aspect-ratio:16/10;object-fit:cover*/}
#about-milestone .milestone .story h3 {color:#114B33;margin:0 0 10px 0;font-size:20px;line-height:1.4;font-family:'promptmedium'}


@media only screen and (max-width:1600px) {
#about-message .chairman, #about-milestone .know {margin-top:60px;}
#about-message .personnel {padding-top:120px}
#about-milestone .founder {padding-top:200px}
#about-milestone .founder .box-text {top:28%}
}

@media only screen and (max-width:1536px) {
#about-message .personnel, #about-milestone .founder {padding-top:100px;}
#about-message p.text-chairman, #about-message .name, #about-message .chairman-position, #about-milestone p.text-know, #about-milestone .founder p {font-size:18px;}
#about-message .message {font-size:22px}
#about-message .circle img {width:322px}
#about-message .circle {width:322px;height:322px}
#about-message .box {min-height:483px}
#about-message .box + .box {margin-top:250px}
#about-message .personnel-list {margin-top:240px}
#about-message h2 {font-size:25px}
#about-milestone .text-gold, #about-milestone .founder .flex-name .text-name {font-size:22px}
#about-milestone .founder h2 {font-size:35px}
#about-milestone .milestone .top-nav li {font-size:22px}
#about-milestone .milestone .left-nav li {font-size:40px}
#about-milestone .milestone .story h3 {font-size:18px}
}

@media only screen and (max-width:1440px) {
#about-message p.text-chairman, #about-milestone p.text-know {line-height:35px;}
#about-message .chairman br {display:none;}
#about-milestone .know {width:52%}
}

@media only screen and (max-width:1366px) {
#about-message .chairman {margin-left:50px}
#about-message .personnel, #about-milestone .founder {padding-top:85px;}
#about-message .message {font-size:20px}
#about-message .circle img {width:281px}
#about-message .circle {width:281px;height:281px}
#about-message .personnel-list {margin-top:200px}
#about-message .box + .box {margin-top:220px}
#about-milestone .text-gold, #about-milestone .founder .flex-name .text-name {font-size:20px}
#about-milestone .know {width:48%}
#about-milestone .milestone .left-nav, #about-milestone .milestone .story-grid {padding-bottom:70px}
#about-milestone .milestone .top-nav li {font-size:20px}
#about-milestone .milestone .left-nav li {font-size:38px}
#about-milestone .milestone .box-text h2 {font-size:25px}
#about-milestone .milestone .top-nav li::after {width:14px;height:14px;border:2px solid #8AA79A}
}

@media only screen and (max-width:1280px) {
#about-message p.text-chairman, #about-message .name, #about-message .chairman-position, #about-milestone p.text-know, #about-milestone .founder p {font-size:17px}
#about-message p.text-chairman, #about-milestone p.text-know, #about-milestone .founder p {line-height:30px}
#about-message .circle img {width:261px}
#about-message .circle {width: 261px;height:261px}
#about-message .box {min-height:430px}
#about-message .position {transform: translate(-50%, -28%)}
#about-milestone .milestone .story h3 {font-size:17px}
#about-milestone .milestone .left-nav li {font-size:35px}
}

@media only screen and (max-width:1235px) {
    #about-milestone .founder .box-text {top:25%}
}

@media only screen and (max-width:1080px) {
#about-message .chairman {margin-top:15px;margin-left:30px;}
#about-milestone .founder .box-text {top:20%}
#about-milestone .founder .flex-name {width:53%}
}

@media only screen and (max-width:1024px) {
#about-message .chairman {width:50%;margin-left:15px}
#about-milestone .know {width:50%}
#about-message img.quote-top, #about-message img.quote-bottom {width:20px;height:17px;}
#about-message .quote-top {margin-left:-35px;}
#about-message .quote-bottom {margin-left:15px;}
#about-message .message br {display:none}
#about-milestone .milestone .left-nav, #about-milestone .milestone .story-grid {padding-bottom:60px}
}

@media only screen and (max-width:820px) {
#about-message.bg, #about-milestone.bg {background: #F5FBF3;background: linear-gradient(140deg, rgba(245, 251, 243, 1) 0%, rgba(245, 251, 243, 1) 61%, rgba(254, 242, 224, 1) 100%);}
#about-message .chairman, #about-milestone .know {width:100%;}
#about-message .mobile-img, #about-milestone .mobile-img  {display:block;}
#about-message img.mobile-img, #about-milestone img.mobile-img {height:auto;margin-top:11px;-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);}
#about-message .position-row {width:100%;margin-left:auto;margin-right:auto;}
#about-message .signature {margin:40px 0 0 0}
#about-message p.text-chairman, #about-milestone p.text-know {line-height:30px;}
#about-message .breadcrumb-menu, #about-milestone .breadcrumb-menu {right:0;top:85px;position:absolute}
#about-message .personnel {padding-top:60px}
#about-milestone .founder {padding-top:110px}
#about-message .head-box {margin-top:35px}
#about-milestone .know {margin-top:15px;width:100%}
#about-milestone .founder .box-text {top:27%}
#about-milestone .founder .flex-name {width:55%}
#about-milestone .founder p {margin-bottom:15px}
#about-milestone .milestone .story h3 {font-size:18px}
#about-milestone .milestone .story-grid {gap:30px}
#about-milestone .milestone .top-nav-container {overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:20px}
#about-milestone .milestone .top-nav {display:flex;width:100%;gap:0!important;padding:0}
#about-milestone .milestone .top-nav li {flex: 0 0 50%; scroll-snap-align:start;box-sizing:border-box}                
#about-milestone .milestone .left-nav { display:none}
#about-milestone .milestone .story-grid { grid-template-columns:1fr}
#about-milestone .milestone .mobile-year-title {display:block;text-align:center;}
#about-milestone .year-panel {display:block!important;margin-bottom:50px}
#about-milestone .year-panel:last-child {margin-bottom:0}
#about-milestone .milestone .left-nav, #about-milestone .milestone .story-grid {padding-bottom:0}
#about-milestone .milestone {padding:100px 0 60px 0}
}

@media only screen and (max-width:768px) {
#about-message .box {padding:40px 0}
#about-message .position {padding:0 40px}
#about-message .message {font-size:18px}
#about-milestone .founder .flex-name {width:75%}
#about-milestone .founder .flex-name .text-name {width:45%}
#about-milestone .founder .flex-name .text-name + .text-name {width:58%}
#about-milestone .founder .name {margin-top:30px}
}

@media only screen and (max-width:736px) {
#about-message .chairman {width:95%;margin-left:auto;margin-right:auto;}
}

@media only screen and (max-width:640px) {
#about-message .breadcrumb-menu, #about-milestone .breadcrumb-menu {left:0}
#about-milestone .founder {padding-top:280px}
}
@media only screen and (max-width:568px) {
#about-message .chairman {width:90%;}
#about-milestone .founder .flex-name .text-name {font-size:17px}
#about-milestone .milestone .top-nav-wrapper {gap:10px;padding:0 10px}
#about-milestone .milestone .top-nav-container {width:100%}
#about-milestone .milestone .top-nav li {flex:0 0 50%; text-align:center;scroll-snap-align:start;box-sizing:border-box}   
}

@media only screen and (max-width:480px) {
#about-message .message {margin-top:30px}
#about-milestone .founder .flex-name .text-name {font-size:16px}
#about-milestone .founder .flex-name .text-name {width:50%}
#about-milestone .founder .flex-name .text-name + .text-name {width:70%}
#about-milestone .milestone .top-nav {gap:0 !important}
#about-milestone .milestone .top-nav li {flex:0 0 100%!important;max-width:100%!important;flex-shrink:0!important;scroll-snap-align:center!important}
}

@media only screen and (max-width:430px) {
#about-message .quote-top {margin-left:-28px}
#about-message .quote-bottom {margin-left:10px}
#about-message .box {min-height:460px}
#about-message .box {padding:30px 0}
#about-message .position {padding:0 30px}
#about-milestone .founder br.line {display:block}
}

@media only screen and (max-width:414px) {
#about-milestone .founder .box-text {top:30%}
}

@media only screen and (max-width:360px) {
#about-milestone .founder .box-text {top:33%}
}