/* Setting */
section{overflow:hidden;line-height:1.5;position:relative;padding:100px 0;}
section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1200px;}
section .section_title{margin:0 auto 60px;overflow:hidden;}
section .section_title h3{font-size:40px;font-weight:700;position:relative;display:block;}
section .section_title p{font-size:50px;line-height:1.2}
section .section_title span{font-size:20px;display:inline-block;padding:0 20px;color:#fff;font-weight:bold;line-height:35px;border-radius:35px;background:#B03CCC;margin-bottom:20px;}
section .section_body{overflow:hidden;}





/* Section01 */
#section01{background:url('../img/02_about/page_top.png') no-repeat center;background-size:cover;padding:300px 0 100px;}
#section01 .section_body .textbox{text-align:center;color:#fff;}
#section01 .section_body .textbox span{display:block;font-size:40px;font-weight:600;text-shadow:0 0 15px rgba(0,0,0,0.6);line-height:1;margin:0 auto 40px;}
#section01 .section_body .textbox h3{display:block;font-size:100px;text-shadow:0 0 15px rgba(0,0,0,0.6);line-height:1.1;}
#section01 .section_body .textbox small{display:block;font-size:30px;text-shadow:0 0 15px rgba(0,0,0,0.6);margin:0 auto 20px;}
#section01 .section_body .textbox p{font-size:25px;text-shadow:0 0 15px rgba(0,0,0,0.6);font-weight:700;}
#section01 .section_body .textbox a{display:block;box-sizing: border-box;width:270px;line-height:60px;color:#fff;font-size:20px;font-weight:600;overflow:hidden;border-radius:10px;border:1px solid #fff;transition:0.5s;margin:40px auto 0;}
#section01 .section_body .textbox a:hover{background:rgba(255,255,255,1);color:#000;}

/* Section02 */
#section02 .section_title{width:calc(100% - 40px);max-width:1200px;margin:0 auto 80px;}
#section02 .textarea{position:relative;overflow:hidden;margin:0 auto 80px;}
#section02 .textarea .counter_container{display: flex;justify-content: space-around;text-align: center;width:100%;max-width:1200px;margin:0 auto;}
#section02 .textarea .counter_container .counter_item{position:relative;border-radius: 15px;padding: 40px 20px;margin: 0 10px;overflow:hidden;align-self: flex-start; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
#section02 .textarea .counter_container .counter_item::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: conic-gradient(transparent, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3) 40%, transparent 50%);animation: rotate-border 12s linear infinite;z-index: -2;}
#section02 .textarea .counter_container .counter_item::after {content: '';position: absolute;inset: 3px; background: #fff;border-radius: 12px;z-index: -1;}
#section02 .textarea .counter_container .counter_item:first-child{padding:40px 60px}
#section02 .textarea .counter_container .counter_item:nth-child(2)::before {animation-delay: -3s;}
#section02 .textarea .counter_container .counter_item:nth-child(3)::before {animation-delay: -6s;}
#section02 .textarea .counter_container .counter_item:nth-child(4)::before {animation-delay: -9s;}
#section02 .textarea .counter_container .counter_item p{font-size:20px;font-weight: bold;margin-bottom: 10px;line-height:1;min-height:40px; display: flex;align-items: center;justify-content: center;}
#section02 .textarea .counter_container .num_box{display: inline-flex;align-items: baseline;}
#section02 .textarea .counter_container .num_box .count_wrapper{position: relative; display: inline-block;}
#section02 .textarea .counter_container .num_box .count_wrapper p{display:inline-block;font-size:90px;font-weight:900;font-variant-numeric: tabular-nums;font-feature-settings: "tnum";line-height: 1;}
#section02 .textarea .counter_container .num_box .count_wrapper p:not(.count) {visibility: hidden;pointer-events: none;}
#section02 .textarea .counter_container .num_box .count_wrapper p.count{position:absolute;top:0;left:0;text-align:right;width:100%;}
#section02 .textarea .counter_container .num_box span{font-size:50px;font-weight:900;}
#section02 .logobox {display: flex;flex-direction: column;gap:0px;}
#section02 .logobox .top, #section02 .logobox .bottom {display: flex;white-space: nowrap;width: max-content;}
#section02 .logobox img {height: 64px;margin: 15px 20px;padding:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);border-radius: 8px;flex-shrink: 0;filter:grayscale(1);opacity:0.3;will-change: transform;animation-play-state: paused;}
#section02 .logobox .top {animation: scrollLeft 60s linear infinite;}
#section02 .logobox .bottom {animation: scrollRight 60s linear infinite;}





/* Section03 */
#section03{padding:100px 0 200px;}
#section03 .section_fix{max-width:1380px;}
#section03 .section_title{max-width:1200px;}
#section03 .section_body {position: relative;border-top: 3px double #333;border-bottom: 3px double #333;margin: 0 auto;overflow:hidden;}
#section03 .section_body .list_item {display: flex;align-items: center;padding: 30px 0px;border-bottom: 1px solid #ddd;position: relative;z-index: 2;transition: color 0.3s ease;cursor: pointer;}
#section03 .section_body .bg_hover {position: absolute;left: 0;width: 100%;background-color: #000;z-index: 1;transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);pointer-events: none;}
#section03 .section_body .list_item.active {color: #fff;}
#section03 .section_body .item_num { width:180px; font-size: 22px; text-align: center; }
#section03 .section_body .item_title { width:320px; font-size: 30px; font-weight: 900; }
#section03 .section_body .item_desc { width:calc(100% - 500px); font-size: 20px;padding-right:20px;word-break:keep-all}




/* Section04 */
#section04{padding:0;position:relative;z-index:1}
#section04:after{content: "";position: absolute;top: 50vh;right:calc(50% - 500px);transform: translate(50%, -50%);display: block;width: 1300px;height: 1300px;background: url('../img/02_about/about_section4_leaders group.png') no-repeat center;background-size:cover;z-index:0;}
#section04 .section_fix{margin: 0 auto;overflow:hidden;max-width:100%;position:relative;}
#section04 .section_title{width:calc(100% - 40px);margin:0 auto 60px;overflow:hidden;max-width:1200px;position:relative;}
#section04 .section_body{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1200px;position:relative;}
#section04 .left-content-area {width: 430px;padding-right: 20px;}
#section04 .left-content-area ul {margin-bottom: 60px;}
#section04 .left-content-area ul:last-child {margin-bottom: 0;}
#section04 .left-content-area ul li img {width: 100%;max-width: 420px;border-radius: 15px;margin-bottom: 15px;}
#section04 .left-content-area ul li b {display: block;font-size: 30px;margin-bottom: 10px;line-height:1;}
#section04 .left-content-area ul li p {font-size: 20px;line-height: 1.5;}


/* Section05 */
#section05{padding:200px 0 100px}
#section05 .section_body .fl{float:left;width:300px;}
#section05 .section_body .fl ul{margin-top:30px;}
#section05 .section_body .fl ul li{font-size:25px;color:#9F9F9F;padding:5px 0;font-weight:bold;cursor: pointer;}
#section05 .section_body .fl ul li a{color:#9F9F9F;display:block;}
#section05 .section_body .fl ul li a.on{color:#000;}

#section05 .section_body .fr{float:right;width:calc(100% - 300px);max-width:1280px;overflow:hidden;}
#section05 .section_body .fr ul li{width:calc(100% / 6);display:block;float:left;}
#section05 .section_body .fr ul li img{width:calc(100% - 20px);padding:0 10px;filter: invert(1);}



/* Section06 */
#section06{padding:0 0 15px;}
#section06 .slick-slide{margin-right:15px;}
#section06 .slick-slide>div{vertical-align:top;}
#section06 .slick-slide>div li{vertical-align:top;}
#section06 .slick-slide>div li img{vertical-align:top;}






/* --- Keyframes --- */

/* 회전 애니메이션 */
@keyframes rotate-border {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes scrollLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* 이미지 한 세트만큼 이동 */
}

@keyframes scrollRight {
0% { transform: translateX(-52%); } /* 밀려있던 상태에서 */
100% { transform: translateX(-2%); }   /* 원래대로 돌아오며 오른쪽으로 흐름 */
}












/* Responsive */
@media all and (max-width:1800px){
	#section04:after{right:calc(50% - 400px);;}
}

@media all and (max-width:1600px){
	#section04:after{right:calc(50% - 300px);;}
}


@media all and (max-width:1440px){	
	section .section_title p{font-size:42px;}
	
	#section01{padding:240px 0 100px;}
	#section01 .section_body .textbox span{font-size:36px;}
	#section01 .section_body .textbox h3{font-size:84px;}
	#section01 .section_body .textbox p{font-size:23px;}

	#section03 .section_body .list_item{padding:27px 0;}
	#section03 .section_body .item_num{width:160px;}
	#section03 .section_body .item_title{font-size:27px;width:300px;}
	#section03 .section_body .item_desc{font-size:18px;}

	#section04:after{width:1100px;height:1100px;}
	#section04 .left-content-area ul li b{font-size:27px;}
	#section04 .left-content-area ul li p{font-size:18px;}

	#section05 .section_body .fl ul li{font-size:21px}
	#section05 .section_body .fr ul li{width: calc(100% / 5);}

	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:80px;}
}



@media all and (max-width:1240px){
	#section04:after{width:1000px;height:1000px;right: calc(50% - 250px);}	
}

@media all and (max-width:1100px){
	#section04:after{width:900px;height:900px;}
	#section04 .left-content-area{width:410px}
}

@media all and (max-width:1024px){
	section{padding:80px 0}
	section .section_title span{font-size:16px;}
	section .section_title h3{font-size:32px;}
	section .section_title p{font-size:36px;}

	#section01{padding:150px 0 100px}
	#section01 .section_body .textbox span{font-size:32px;}
	#section01 .section_body .textbox h3{font-size:72px;}
	#section01 .section_body .textbox p{font-size:21px;}
	#section01 .section_body .textbox a{font-size:18px;}

	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:70px;}
	#section02 .textarea .counter_container .num_box span{font-size:40px;}
	#section02 .textarea .counter_container .counter_item:first-child{padding:40px 20px;}

	#section03 .section_body .list_item{padding:24px 0;}
	#section03 .section_body .item_num{width:140px;}
	#section03 .section_body .item_title{font-size:24px;width:270px;}
	#section03 .section_body .item_desc{font-size:16px;width:calc(100% - 410px);}

	#section04 .left-content-area{width:390px}
	#section04 .left-content-area ul li b{font-size:24px;}
	#section04 .left-content-area ul li p{font-size:16px;}

	#section05 .section_body .fl ul li{font-size:19px}
	#section05 .section_body .fr ul li{width: calc(100% / 4);}
}

@media all and (max-width:900px){
	section .section_title{text-align:center;}	

	#section02{height:auto;min-height:auto;padding:120px 0;}
	#section02 .textarea .counter_container{flex-wrap: wrap;max-width:640px;}
	#section02 .textarea .counter_container .counter_item{width:calc(50% - 20px);box-sizing:border-box;margin:10px;}
	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:64px;}

	#section03 .section_body .list_item{padding:21px 0;}
	#section03 .section_body .item_num{width:90px;font-size:20px;}
	#section03 .section_body .item_title{font-size:21px;width:210px;}
	#section03 .section_body .item_desc{font-size:15px;width:calc(100% - 300px);}

	#section04{overflow:visible}
	#section04:after{position:static;width:100%;height:auto;padding-bottom:85%;transform:translate(0);}
	#section04 .section_title{width:100%}
	#section04 .section_body{width:100%}
	#section04 .left-content-area{width:100%}
	#section04 .left-content-area ul{width:calc(50% - 20px);float:left;margin:0 10px 60px;}
	#section04 .left-content-area ul li b{font-size:21px;}
	#section04 .left-content-area ul li p{font-size:15px;}


	#section05 .section_body .fl{width:100%}
	#section05 .section_body .fl ul{text-align:center;margin:0 auto 30px;}
	#section05 .section_body .fl ul li{display:inline-block;padding:0 10px;font-size:17px;}
	#section05 .section_body .fr{width:100%;max-width:600px;margin:0 auto;float:inherit;}	
	#section05 .section_body .fr ul li{width: calc(100% / 3);}

}


@media all and (max-width:768px){
	section{padding:60px 0}
	section .section_title{text-align:center}
	section .section_title h3{font-size:30px;}
	section .section_title p{font-size:30px;}


	#section01 .section_body .textbox span{font-size:28px;}
	#section01 .section_body .textbox h3{font-size:64px;}
	#section01 .section_body .textbox p{font-size:19px;}
	#section01 .section_body .textbox a{font-size:16px;}

	#section02{padding:120px 0 60px}

	#section02 .section_title{margin:0 auto 40px}
	#section02 .textarea .counter_container{max-width:560px;}
	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:54px;}
	#section02 .textarea .counter_container .num_box span{font-size:30px;}

	#section02 .logobox img {height: 54px;}

	#section03{padding:60px 0 120px;}

	#section05{padding:120px 0 100px}
}


@media all and (max-width:640px){
	#section01 .section_body .textbox span{font-size:24px;margin:0 auto 20px;}
	#section01 .section_body .textbox h3{font-size:54px;}
	#section01 .section_body .textbox small{font-size:20px;}
	#section01 .section_body .textbox p{font-size:17px;}
	#section01 .section_body .textbox a{font-size:15px;width:240px;line-height:50px;}

	#section02 .textarea .counter_container{max-width: 500px;}
	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:48px;}

	#section03 .section_body .item_num{width:50px;font-size:16px;}
	#section03 .section_body .item_title{font-size:19px;width:160px;}
	#section03 .section_body .item_desc{font-size:14px;width:calc(100% - 210px);}

	#section04:after{padding-bottom:100%;transform:scale(1.2);}
	#section04 .left-content-area ul{width:calc(100% - 20px);float:left;margin:0 10px 60px;text-align:center;}
	#section04 .left-content-area ul li b{font-size:25px;}
	#section04 .left-content-area ul li p{font-size:16px;}



}

@media all and (max-width:480px){	
	section .section_title h3{font-size:25px;}
	section .section_title p{font-size:25px;}

	#section01 .section_body .textbox h3{font-size:40px;}
	#section01 .section_body .textbox small{font-size:16px;}
	#section01 .section_body .textbox p{font-size:15px;}
	#section01 .section_body .textbox a{font-size:14px;}

	#section02 .textarea .counter_container{max-width: 420px;}
	#section02 .textarea .counter_container .counter_item{padding:30px 20px;}
	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:40px;}


	#section03 .section_body .list_item{flex-wrap:wrap;padding:20px;}
	#section03 .section_body .item_num {width:40px;text-align:left;font-size:18px;}
	#section03 .section_body .item_title{width:calc(100% - 40px);font-size:18px;}
	#section03 .section_body .item_desc{width:100%;padding-right:0;font-size:16px;padding-top:20px;}
	#section03 .section_body .item_desc br{display:none}

	#section04:after{padding-bottom:100%;transform:scale(1.4);}
	#section04 .section_body{margin-bottom:30px}


	#section05 .section_body .fl ul li{font-size:14px}
}


@media all and (max-width:425px){
	section .section_title{margin:0 auto 30px}
	section .section_title h3{font-size:21px;}
	section .section_title p{font-size:21px;}
	
	#section02{padding:60px 0 0}
	#section02 .textarea{margin:0 auto 0}
	#section02 .textarea .counter_container .counter_item{padding:24px 12px;}
	#section02 .textarea .counter_container .counter_item:first-child{padding:24px 12px;}
	#section02 .textarea .counter_container .num_box .count_wrapper p{font-size:32px;}
	#section02 .logobox img{height:40px;margin:10px 12px;}

	#section03{padding:60px 0 100px}

	#section04 .section_title{margin:0 auto 20px}
	#section04 .left-content-area ul{margin:0 10px 30px}
}