@import url("sub.css");


/* About Us */
.about-cont{position: relative;}
.about-cont .about-line{position: absolute; left: 50%; margin-left: -765px; top: 0; z-index: 0; width: 1px; height: 100%; background: var(--border); pointer-events: none;}
.about-cont .about-line-bar{position: absolute; left: -1px; top: 0; display: block; width: 3px; border-radius: 3px; background: var(--main); z-index: 1; transition: all .4s; pointer-events: none;}
.about-cont .about-sec{display: flex;}
.about-cont .about-sec .txt-area{width: 390px;}
.about-cont .about-sec .txt-area h3{color: var(--black); font-weight: 700; font-family: var(--eng);}
.about-cont .about-sec .txt-area-sticky{position: sticky; top: 110px; transition: all .4s; box-sizing: border-box; padding:0 50px;}
.about-cont .about-sec .about-dot{position:absolute; left:-4px; top:22px; z-index:3; width:9px; height:9px; border-radius:50%; display:block; background:#4d4d4d; transition: all .3s;}
.about-cont .about-sec.on .about-dot{background: var(--main);}
.about-cont .about-sec .about-dot::before{content:''; display:block; width:39px; height:39px; border-radius:50%; background:inherit; opacity:0.1; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.about-cont .about-sec .con-area{flex: 1;}

.about-banner{display: flex; flex-direction: column; gap: 15px; padding: 130px 80px; box-sizing: border-box; position: relative; border-radius: var(--borderR20); text-align: left; overflow: hidden;}
.about-banner *{position: relative; z-index: 2;}
.about-banner > img{display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none;}
.about-banner h4{color: var(--white);}
.about-banner p{color: var(--white); opacity: 0.8;}

.core-values-list{box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--borderR20);}
.core-values-list dl{display: flex; gap: 50px; padding: 40px; box-sizing: border-box;}
.core-values-list dl ~ dl{border-top: 1px solid var(--border);}
.core-values-list dl dt{width: 120px;}
.core-values-list dl dt .icon{display: block; width: 100%; aspect-ratio: 1/1; overflow: hidden;}
.core-values-list dl dt .icon img{width: 100%; height: 100%; display: block; object-fit: contain;}
.core-values-list dl dd{flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;}
.core-values-list dl dd h4{color: var(--black);}
.core-values-list dl dd p{color: var(--basic);}




/* PARTNERSHIP — MAP */
.partnership-map{background: var(--white);}
.partnership-map svg{display:block; width:100%; height:auto;}
.partnership-map .region{fill:#c8c8c8; cursor:default; transition:fill .3s;}
.partnership-map .region path{fill:inherit;}
.partnership-map .region:hover,.partnership-map .region.is-hover{fill:var(--main);}
.partnership-map .region-label{fill:var(--white); font-family:var(--eng); font-weight:700; text-anchor:middle; pointer-events:none;}

/* PARTNERSHIP — CTA */
.partnership-cont .partnerCta {display:flex; flex-direction:column; align-items:center; gap:50px; width:100%;}
.partnership-cont .partnerCtaTxt {display:flex; flex-direction:column; align-items:center; gap:20px; width:100%; text-align:center;}
.partnership-cont .partnerCtaTxt h2 {width:100%; font-weight:700; color:var(--black);}
.partnership-cont .partnerCtaTxt p {width:100%; max-width:1070px; color:var(--light);}



/*******************************************************************************
    @media 1680px
*******************************************************************************/
@media all and (max-width:1680px){

/* About Us */
.about-cont .about-line{left: 5%; margin-left: 0;}
.about-banner h4 br{display: none;}

}
/*******************************************************************************
	@media 1500px
*******************************************************************************/
@media all and (max-width:1500px){

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

/* About Us */
.about-cont .about-sec .txt-area{width: 280px;}
.about-cont .about-sec .txt-area-sticky{top: 100px; padding:0 30px;}
.about-cont .about-sec .about-dot{left:-4px; top:18px; width:8px; height:8px;}
.about-cont .about-sec .about-dot::before{width:32px; height:32px;}
.about-banner{padding: 90px 50px; gap: 12px; border-radius: var(--borderR15);}
.core-values-list{border-radius: var(--borderR15);}
.core-values-list dl{gap: 30px; padding: 30px;}
.core-values-list dl dt{width: 90px;}

/* PARTNERSHIP — MAP */
.partnership-map .region-label{font-size:0.778rem;}

/* PARTNERSHIP — CTA */
.partnership-cont .partnerCta {gap:40px;}
.partnership-cont .partnerCtaTxt {gap:16px;}

}
/*******************************************************************************
	@media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* About Us */
.about-cont .about-sec{flex-direction: column; gap: 24px;}
.about-cont .about-sec .txt-area{width: 100%;}
.about-cont .about-sec .txt-area-sticky{position: relative; top: auto;}
.about-cont .about-sec .about-dot{left:-4px; top:50%; width:8px; height:8px; transform:translateY(-50%);}
.about-cont .about-sec .con-area{padding: 0 0 0 30px; box-sizing: border-box;}
.about-cont .about-sec .about-dot::before{width:28px; height:28px;}
.about-banner{padding: 60px 40px; gap: 12px; border-radius: var(--borderR10);}
.about-banner p br{display: none;}
.core-values-list{border-radius: var(--borderR10);}
.core-values-list dl{gap: 24px; padding: 24px;}
.core-values-list dl dt{width: 72px;}

/* PARTNERSHIP — MAP */
.partnership-map .region-label{font-size:0.667rem;}

/* PARTNERSHIP — CTA */
.partnership-cont .partnerCta {gap:36px;}
.partnership-cont .partnerCtaTxt {gap:14px;}

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* About Us */
.about-cont .about-sec{gap: 16px;}
.about-cont .about-sec .txt-area-sticky{padding:0 0 0 20px;}
.about-cont .about-sec .con-area{padding: 0 0 0 20px;}
.about-cont .about-sec .about-dot{left:-3px; width:7px; height:7px;}
.about-cont .about-sec .about-dot::before{width:24px; height:24px;}
.about-banner{padding: 40px 24px; gap: 10px; border-radius: var(--borderR10);}
.core-values-list dl{flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px;}
.core-values-list dl dt{width: 56px;}

/* PARTNERSHIP — MAP */
.partnership-map .region-label{font-size:0.556rem;}

/* PARTNERSHIP — CTA */
.partnership-cont .partnerCta {gap:28px;}
.partnership-cont .partnerCtaTxt {gap:12px;}
.partnership-cont .partnerCtaTxt p br{display:none;}

}