@charset 'utf-8';

.president-section{display:flex;justify-content:space-between;align-items:flex-start;}
.president-section .president-list{width:48.9%;max-width:684px;box-sizing:border-box;}
.presidents-wrap .ellipse-list{border-top-color:var(--color06);}
.presidents-wrap .ellipse-list > li{gap:unset;padding-right:7.7rem;}
.presidents-wrap .ellipse-list > li .president-name{width:56.3%;font-weight:var(--font-weight-semibold);text-align:center;}
.presidents-wrap .ellipse-list > li p:not(.president-name){margin-left:auto;min-width:12.5rem;text-align:center;}

.president-image{position:sticky;top:14.2rem;align-self:flex-start;margin:14.2rem 0 2.5rem;width:42.6%;max-width:597px;}
.president-image .president-txt-wrap .president-txt-box {position:absolute;top:0;left:0;padding:5rem;width:100%;color:#fff;box-sizing:border-box;}
.president-image .president-txt-wrap .president-txt-box .president-txt-role{padding:0 0 1.6rem;font-size:clamp(1.6rem, 1.8vw, 2rem);font-weight:var(--font-weight-medium);color:var(--color66);line-height: clamp(2.2rem, 2.6vw, 2.8rem);}
.president-image .president-txt-wrap .president-txt-box .president-name{font-size: clamp(2.8rem, 4.4vw, 5.6rem); font-weight:var(--font-weight-medium);line-height:clamp(3.6rem, 5.5vw, 6.6rem);text-transform:uppercase;}
.president-img-box img{border-radius:5px;}

@media screen and (max-width:1400px){
	.presidents-wrap .ellipse-list > li{justify-content:space-between;padding-right:1.5rem;}
	.presidents-wrap .ellipse-list > li .president-name{width:auto;}
	.presidents-wrap .ellipse-list > li p:not(.president-name){margin:0;}
}

@media screen and (max-width:768px){
	.president-section{flex-direction:column-reverse;flex-wrap:wrap;justify-content:center;}
	.president-section .president-list{padding:0 0 4rem;width:100%;max-width:unset;}
	.presidents-wrap .ellipse-list > li{justify-content:unset;gap:1.5rem;}
	.presidents-wrap .ellipse-list > li p:not(.president-name){margin-left:auto;}
	.president-image{position:static;margin:0;width:100%;max-width:unset;}
	.president-image .president-txt-wrap .president-txt-box{padding:3rem 2rem;}
	.president-img-box{aspect-ratio:2;}
}
@media screen and (max-width:480px){
	.president-img-box{aspect-ratio:unset;}
}