@charset "utf-8";

/* =========================== PAGE */
#about1020{position:relative;font-size:14px;letter-spacing:-.3px;line-height:1.5;color:var(--black)}
#about1020 .pl{white-space:pre-line}
#about1020 *{word-break:keep-all}
#about1020 .main_tit{text-align:center}
#about1020 .main_tit h1{font-size:70px;font-weight:700;line-height:1.1}
#about1020 .main_tit p{margin-top:60px;font-size:25px;font-weight:500}
#about1020 .main_tit p span{color:var(--primary)}
#about1020 .about1020_gsap{display:flex;align-items:center;margin-top:200px}
#about1020 .about1020_gsap > ul{position:relative;width:50%;height:100vh}
#about1020 .gsap_img_cont li{opacity:0;position:absolute;width:100%;height:100%;transition:opacity 0.6s ease;background-repeat:no-repeat;background-position:center;background-size:cover}
#about1020 .gsap_img_cont li.on{opacity:1}
#about1020 .gsap_img_cont li:nth-child(1){z-index:3;background-image:url(../img/sub/about1020_img01.jpg)}
#about1020 .gsap_img_cont li:nth-child(2){z-index:2;background-image:url(../img/sub/about1020_img02.jpg)}
#about1020 .gsap_img_cont li:nth-child(3){z-index:1;background-image:url(../img/sub/about1020_img03.jpg)}
#about1020 .gsap_txt_cont{display:flex;flex-direction:column;justify-content:center;padding:0 140px}
#about1020 .gsap_txt_cont > li{position:relative;display:flex;justify-content:space-between;align-items:center;width:100%}
#about1020 .gsap_txt_cont > li:nth-child(1){z-index:2;transform:translateY(30px)}
#about1020 .gsap_txt_cont > li:nth-child(2){z-index:1}
#about1020 .gsap_txt_cont > li:nth-child(3){z-index:2;transform:translateY(-30px)}
#about1020 .gsap_txt_cont > li h2{position:relative;display:flex;justify-content:center;align-items:center;width:350px;height:350px;border:2px solid var(--black);border-radius:50%;font-size:30px;font-weight:700;background-color:#fff;transition:all .6s}
#about1020 .gsap_txt_cont > li h2:before{content:"";position:absolute;top:50%;right:-65%;transform:translateY(-50%);width:300px;height:2px;background:repeating-linear-gradient(to right,var(--black) 0 10px,transparent 0px 12px)}
#about1020 .gsap_txt_cont > li h2:after{content:"";position:absolute;top:50%;right:-70%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background-color:var(--black)}
#about1020 .gsap_txt_cont > li.on h2{border:2px solid var(--primary);color:#fff;background-color:var(--primary)}
#about1020 .gsap_txt_cont > li.on h2:before{background:repeating-linear-gradient(to right,var(--primary) 0 10px,transparent 0px 12px)}
#about1020 .gsap_txt_cont > li.on h2:after{background-color:var(--primary)}
#about1020 .gsap_txt_cont > li > ul > li{display:flex;justify-content:center;align-items:center;width:200px;height:60px;border-radius:30px;border:2px solid var(--black);font-size:20px;font-weight:700;transition:all .3s}
#about1020 .gsap_txt_cont > li > ul > li + li{margin-top:10px}
#about1020 .gsap_txt_cont > li.on > ul > li{border:2px solid var(--primary);color:var(--primary)}
#about1020 .award{margin:200px auto;max-width:var(--mainsize)}
#about1020 .award_tit{text-align:center}
#about1020 .award_tit h2{font-size:50px;font-weight:700}
#about1020 .award_tit p{margin-top:20px;font-size:25px;font-weight:500}
#about1020 .award_list{display:flex;gap:20px;margin-top:80px;width:100%}
#about1020 .award_list li{width:calc(100% / 3 - 10px);text-align:center}
#about1020 .award_list li img{width:100%;height:310px;object-fit:cover;border:1px solid #e1e1e1;border-radius:10px}
#about1020 .award_list li h3{margin:25px 0 15px;font-size:25px;font-weight:700;transition:all .3s}
#about1020 .award_list li h4{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:20px;font-weight:500;line-height:1.8;color:#777}

@media (hover:hover){
#about1020 .award_list li a:hover h3{color:var(--primary)}
}
@media(max-width:2300px){
#about1020 .gsap_txt_cont > li h2:before{right:-70%;width:300px}
#about1020 .gsap_txt_cont > li h2:after{right:-74%}
}
@media(max-width:2170px){
#about1020 .gsap_txt_cont > li h2:before{right:-51%;width:250px}
#about1020 .gsap_txt_cont > li h2:after{right:-56%}
#about1020 .gsap_txt_cont{padding:0 100px}
}
@media(max-width:1980px){
#about1020 .gsap_txt_cont > li h2{width:250px;height:250px}
#about1020 .gsap_txt_cont > li h2:before{right:-65%;width:200px}
#about1020 .gsap_txt_cont > li h2:after{right:-66%}
#about1020 .gsap_txt_cont > li > ul > li{width:180px;height:50px;border-radius:25px}
}
@media(max-width:1700px){
#about1020 .gsap_txt_cont{padding:0 70px}
#about1020 .gsap_txt_cont > li h2{width:230px;height:230px;font-size:28px}
#about1020 .gsap_txt_cont > li h2:before{width:170px}
#about1020 .gsap_txt_cont > li > ul > li{width:175px;font-size:19px}
}
@media(max-width:1380px){
#about1020 .main_tit h1{font-size:60px}
#about1020 .main_tit p{margin-top:50px;font-size:22px}
#about1020 .about1020_gsap{margin-top:180px}
#about1020 .gsap_txt_cont{padding:0 50px}
#about1020 .gsap_txt_cont > li h2{width:200px;height:200px;font-size:23px}
#about1020 .gsap_txt_cont > li h2:before{width:150px}
#about1020 .gsap_txt_cont > li > ul > li{width:165px;font-size:17px}
#about1020 .gsap_txt_cont > li:nth-child(1){transform:translateY(15px)}
#about1020 .gsap_txt_cont > li:nth-child(3){transform:translateY(-15px)}
#about1020 .award_tit h2{font-size:40px}
#about1020 .award_tit p{font-size:22px}
#about1020 .award_list{margin:80px auto 0;max-width:unset;width:95%}
#about1020 .award_list li img{height:280px}
#about1020 .award_list li h3{font-size:22px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:18px}
}
@media(max-width:1180px){
#about1020 .gsap_txt_cont{padding:0 40px}
#about1020 .gsap_txt_cont > li h2{width:170px;height:170px;font-size:21px}
#about1020 .gsap_txt_cont > li h2:before{width:140px}
#about1020 .gsap_txt_cont > li > ul > li{width:155px;font-size:16px}
}
@media(max-width:1024px){
#about1020 .main_tit h1{font-size:40px}
#about1020 .main_tit p{margin-top:40px;font-size:18px}
#about1020 .about1020_gsap{margin-top:120px}
#about1020 .gsap_txt_cont{padding:0 30px;gap:40px}
#about1020 .gsap_txt_cont > li:nth-child(1){transform:translateY(0px)}
#about1020 .gsap_txt_cont > li:nth-child(3){transform:translateY(0px)} 
#about1020 .gsap_txt_cont > li h2{width:140px;height:140px;font-size:18px}
#about1020 .gsap_txt_cont > li h2:before{width:105px}
#about1020 .gsap_txt_cont > li h2:after{width:8px;height:8px}
#about1020 .gsap_txt_cont > li > ul > li{width:140px;height:48px;border-radius:24px;font-size:15px}
#about1020 .award{margin:150px 0}
#about1020 .award_tit h2{font-size:35px}
#about1020 .award_tit p{margin-top:15px;font-size:18px}
#about1020 .award_list{margin-top:70px;gap:14px}
#about1020 .award_list li{width:calc(100% / 3 - 7px)}
#about1020 .award_list li img{height:240px}
#about1020 .award_list li h3{font-size:19px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:16px}
}
@media(max-width:860px){
#about1020 .gsap_txt_cont > li h2{width:130px;height:130px;font-size:17px}
#about1020 .gsap_txt_cont > li h2:before{width:95px}
#about1020 .gsap_txt_cont > li > ul > li{width:125px;height:46px;border-radius:23px}
}
@media(max-width:768px){
#about1020 .pl{white-space:normal}
#about1020 .main_tit h1{font-size:30px}
#about1020 .main_tit p{margin:30px auto 0;width:80%;font-size:16px}
#about1020 .about1020_gsap{margin-top:110px}
#about1020 .gsap_img_cont li{background-position:center}
#about1020 .gsap_txt_cont{gap:0px;justify-content:space-evenly;padding:0 2.5%}
#about1020 .gsap_txt_cont > li{flex-direction:column}
#about1020 .gsap_txt_cont > li h2{width:100%;height:95px;border-radius:0px;font-size:16px}
#about1020 .gsap_txt_cont > li h2:after{top:unset;bottom:-70%;left:50%;transform:translateX(-50%)}
#about1020 .gsap_txt_cont > li h2:before{top:unset;bottom:-60%;left:50%;transform:translateX(-50%);width:2px;height:40px;background:repeating-linear-gradient(to bottom,var(--black) 0 6px,transparent 0px 10px)}
#about1020 .gsap_txt_cont > li.on h2:before{background:repeating-linear-gradient(to bottom,var(--primary) 0 6px,transparent 0px 10px)}
#about1020 .gsap_txt_cont > li > ul{display:flex;justify-content:center;gap:10px;margin-top:75px;width:100%}
#about1020 .gsap_txt_cont > li > ul > li{width:calc(100% / 2 - 5px);border-radius:10px}
#about1020 .gsap_txt_cont > li > ul li + li{margin-top:0px}
#about1020 .award{margin:120px 0}
#about1020 .award_tit h2{font-size:30px}
#about1020 .award_tit p{margin-top:12px;font-size:16px}
#about1020 .award_list{margin-top:60px;gap:10px}
#about1020 .award_list li{width:calc(100% / 3 - 5px)}
#about1020 .award_list li img{height:200px}
#about1020 .award_list li h3{margin:20px 0 12px;font-size:16px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:14px}
}
@media(max-width:580px){
#about1020 .about1020_gsap{flex-direction:column}
#about1020 .about1020_gsap > ul:first-child{width:100%;height:60vh}
#about1020 .about1020_gsap > ul:last-child{width:100%;height:40vh}
#about1020 .gsap_txt_cont{flex-direction:row;gap:12px}
#about1020 .gsap_txt_cont > li{justify-content:space-evenly;width:calc(100% / 3 - 6px)}
#about1020 .gsap_txt_cont > li h2:before{bottom:-100%;height:80px}
#about1020 .gsap_txt_cont > li h2:after{bottom:-110%;width:7px;height:7px}
#about1020 .gsap_txt_cont > li > ul{gap:5px}
#about1020 .gsap_txt_cont > li > ul li{width:calc(100% / 2 - 2.5px)}
#about1020 .award_list{flex-direction:column;gap:60px}
#about1020 .award_list li{width:calc(100%)}
#about1020 .award_list li img{height:250px}
#about1020 .award_list li h3{margin:30px 0 15px;font-size:18px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:16px}
}
@media(max-width:480px){
#about1020 .main_tit h1{font-size:25px}
#about1020 .main_tit p{margin-top:20px;width:95%;font-size:15px}
#about1020 .about1020_gsap{margin-top:80px}
#about1020 .gsap_txt_cont{gap:8px}
#about1020 .gsap_txt_cont > li{width:calc(100% / 3 - 4px)}
#about1020 .gsap_txt_cont > li h2{height:80px}
#about1020 .gsap_txt_cont > li h2:before{bottom:-100%;height:60px}
#about1020 .gsap_txt_cont > li h2:after{bottom:-110%}
#about1020 .gsap_txt_cont > li > ul{flex-direction:column;gap:6px}
#about1020 .gsap_txt_cont > li > ul > li{width:100%;height:44px;font-size:13px;border-radius:6px}
#about1020 .award{margin:100px 0}
#about1020 .award_tit h2{font-size:25px}
#about1020 .award_tit p{margin-top:10px;font-size:15px}
#about1020 .award_list{margin-top:50px;gap:50px}
#about1020 .award_list li img{height:220px}
#about1020 .award_list li h3{margin:25px 0 15px;font-size:17px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:15px}
}
@media(max-width:390px){
#about1020 .main_tit h1{font-size:21px}
#about1020 .main_tit p{font-size:14px}
#about1020 .about1020_gsap{margin-top:70px}
#about1020 .gsap_txt_cont > li h2{height:70px;font-size:15px}
#about1020 .gsap_txt_cont > li h2:before{bottom:-110%}
#about1020 .gsap_txt_cont > li h2:after{bottom:-125%}
#about1020 .gsap_txt_cont > li > ul{gap:4px;margin-top:65px}
#about1020 .gsap_txt_cont > li > ul > li{height:42px;border-radius:4px;font-size:13px}
#about1020 .award{margin:90px 0}
#about1020 .award_tit h2{font-size:21px}
#about1020 .award_tit p{font-size:14px}
#about1020 .award_list{margin-top:40px;gap:40px}
#about1020 .award_list li img{height:190px}
#about1020 .award_list li h3{margin:20px 0 12px;font-size:16px}
#about1020 .award_list li h4, #about1020 .award_list li .date{font-size:14px}
}