#sub.about{margin-top: 0}
.company_bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden}
.company_visual{height: 100vh;position: relative}
.company_visual .vis_title{position: absolute;left: 0%;top: 50%;;width: 100%;transform: translateY(-220px)}
.company_visual .vis_title .loc{display: flex;justify-content: center;align-items: center;gap: 20px;margin-bottom: 30px;}
.company_visual .vis_title .loc svg{display: block;}
.company_visual .vis_title .loc i{display: block;width: 20px;height: 1px;background: #333333}
.company_visual .vis_title .loc button{display: flex;align-items: center;gap: 8px;color: #333333;font-size: 18px;gap: 8px;    font-family: "Outfit", sans-serif;}
.company_visual .vis_title .title strong{display: block;text-align: center;color: #333333;font-size: 100px;letter-spacing: -2px; font-family: "Outfit", sans-serif;font-weight: 500}
.company_visual .visual{position: absolute;height: 100%;background: #000}
.company_visual .visual .vis_title i{background: #fff}
.company_visual .visual .vis_title button{color: #fff}
.company_visual .visual .vis_title .title strong{color: #fff}
.company_visual .visual{clip-path: inset(58% 40px 0 40px round 20px 20px 0 0 );}
.company_visual .vis_title .title strong > div{transform: translateY(0)}
.company_visual .visual{transition: 1s;transition-delay: 1.5s}
.company_visual.on .visual{clip-path: inset(0% 0px 0 0px round 0 0 0 0 )}
.company_visual .vis_title{transition: 1s;transition-delay: 1.5s}
.company_visual.on .vis_title{transform: translateY(-50%)}
.company_visual .greeting_info{position: absolute;top: 0;left: 0;z-index: 10;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;text-align: center}
.company_visual .greeting_info span{display: block;font-size: 18px;color: #333333; font-family: "Outfit", sans-serif;margin-bottom: 20px;}
.company_visual .greeting_info strong{font-size: 50px;color: #333333;line-height: 70px;display: block;font-weight: 600;}
.company_visual .compass{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);opacity: 0}
.company_visual .compass .compass_w img{display: block;}
.company_visual .compass .compass_w{position: relative}
.company_visual .compass .compass_w .compass_color{position: absolute;top: 0;left: 0;opacity: 0}
.company_visual .greeting_info span, 
.company_visual .greeting_info strong{opacity: 1;}
.company_visual{position: relative;z-index: 5}
.company_visual .history_after{position: absolute;z-index: 9;width: 100%;height: 100%;pointer-events: none;top: 0;left: 0}
.company_visual .history_after .vis{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);}
.company_visual .history_after .his_vis_txt .inner{padding: 0;width: 1600px}
.company_visual .history_after .his_vis_txt{position: absolute;width: 100%;bottom: 116px;z-index: 25;transform: translateY(100px)}
.company_visual .history_after .his_vis_txt .his_vis_title{padding-left: 160px;fs}
.company_visual .history_after .his_vis_txt .his_vis_title strong{font-size: 50px;color: #FFFFFF;line-height: 70px;display: block}
.company_visual .history_after .his_vis_txt .his_vis_title strong{transform: translateX(-100px);opacity: 0}
.company_visual .history_after .his_vis_txt .his_vis_text{display: flex;justify-content: flex-end;padding-right: 160px}
.company_visual .history_after .his_vis_txt .his_vis_text p{font-size: 22px;color: #FFFFFF;line-height: 36px;transform: translateX(100px);opacity: 0}
.company_visual .history_after .line{width: 100%;height: 1px;background: #fff;margin: 28px 0;position: relative;left: 50%;width: 0}
.company_visual .history_after .line i{display: block;position: absolute;width: 10px;height: 10px;border: 2px solid #fff;border-radius: 50%;box-sizing: border-box;top: 50%;margin-top: -5px;position: absolute;transform: scale(0)}
.company_visual .history_after .line i:nth-child(1){left: -10px}
.company_visual .history_after .line i:nth-child(2){right: -10px}
#sub.about .inner{width: 1600px;margin: 0 auto;padding: 0}
#sub.about .con01{padding-bottom: 130px}
#sub.about .con01 .c{position: relative;margin-bottom: 28px;}
#sub.about .con01 .c .img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.about .con01 .c .img .img_w{height: 100px; filter: grayscale(100%);opacity: 0.25;position: relative;overflow: hidden;width: 400px;border-radius: 20px;}
#sub.about .con01 .c .img .img_w img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.about .con01 .c01 .img .img_w{height: 240px; filter: grayscale(0%);opacity: 1}
#sub.about .con01 .c02 {margin-bottom: 98px}
#sub.about .con01 .c02 .inner{display: flex;justify-content: flex-end}
#sub.about .con01  .txt{display: flex;flex-direction: column;gap: 50px;}
#sub.about .con01 .txt p{font-size: 20px;color: #333333;line-height: 38px}
#sub.about .con01 .info{margin-top: 95px;text-align: center}
#sub.about .con01 .info strong{font-family: "Outfit", sans-serif;font-size: 20px;color: #2FBDCF;font-weight: 500;display: block;margin-bottom: 10px}
#sub.about .con01 .info p{font-size: 20px;color: #333333;font-weight: 600}
#sub.about .con01 .info .inner{position: relative}
#sub.about .con01 .info i{position: absolute;left: 0;bottom: 0;color: #BBBBBB;font-size: 16px;}
#sub.about .con02{width: 100%;height: 100vh;background: #F4F9F9;position: relative}
#sub.about .con02 .main_copy{position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;align-items: center;justify-content: center}
#sub.about .con02 .main_copy .main_copy_w{display: flex;align-items: center;justify-content: center;gap: 30px;}
#sub.about .con02 .main_copy .main_copy_w > div{display: flex}
#sub.about .con02 .main_copy .main_copy_w strong{color: #333333;letter-spacing: -2px;font-family: "Outfit", sans-serif;font-size: 100px;font-weight: 500;white-space: nowrap}
#sub.about .con02 .main_copy .tit{opacity: 0}
#sub.about .con02 .main_copy .tit p{font-size: 20px;color: #333333;    font-family: "Outfit", sans-serif;}
#sub.about .con02 .main_copy .line{width: 0;height: 1px;background: #333333;margin-top: 10px;position: relative}
#sub.about .con02 .main_copy .line i{display: block;position: absolute;width: 10px;height: 10px;border: 2px solid #333333;border-radius: 50%;box-sizing: border-box;top: 50%;margin-top: -5px;position: absolute;transform: scale(0)}
#sub.about .con02 .main_copy .line i:nth-child(1){left: -10px}
#sub.about .con02 .main_copy .line i:nth-child(2){right: -10px}
#sub.about .con02 .symbol{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
#sub.about .con02 .symbol02{transform: translate(-50%,-50%) scale(1.5);opacity: 0}
#sub.about .con02 .cnr_list{position: absolute;top: 50%;margin-top: -260px;transform: translateX(100%)}
#sub.about .con02 .cnr_list .icon{position: absolute;top: 0%;left: 0%}
#sub.about .con02 .cnr_list .icon11 {left: 4.25%;top: 38.5%;width: 9%}
#sub.about .con02 .cnr_list .icon12 {left: 21%;top: 33.2%;width: 13%;}
#sub.about .con02 .cnr_list .icon .on{position: absolute;top: 0;left: 0;width: 100%} 
#sub.about .con02 .cnr_list .icon img{width: 100%}
/*#sub.about .con02 .cnr_list .ill01{animation: 3s ill01 infinite linear}*/
#sub.about .con02 .cnr_list .ill02{animation: 10s ill02 infinite linear}
#sub.about .con02 .cnr_list .ill04{clip-path: circle(0% at 50% 50%);animation: 2s ill01 infinite linear}
@keyframes ill02{
    0%{transform: rotate(0deg)}
    100%{transform: rotate(360deg)}
}
@keyframes ill01{
    0%{clip-path: circle(0% at 50% 50%);}
    100%{clip-path: circle(100% at 50% 50%);}
}
#footer{background: #fff}
#sub.history{margin-top: 0}
#sub.history .company_visual {background: #fff}
#sub.history .company_visual .vis_img{background: #000}
#sub.history .company_visual .bef{clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);;position: relative;width: 100%;height: 100%}
#sub.history .company_visual .vis_img img{opacity: 1;transition: 2s;transition-delay: 2s}
#sub.history .company_visual.on .vis_img img{opacity: 0.5;}
#sub.history .his_content{height: 100vh;position: relative;background: #F4F9F9}
#sub.history .his_content .his_visual{position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;padding-top: 80px;}
#sub.history .his_content .his_visual .his_visual_box{overflow: hidden;position: relative;width: 100%;height: 100%;background: #000;border-radius: 0}
#sub.history .his_content .his_visual .his_visual_box img{display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);opacity: 0.5;height: 970px;} 

#sub.history .his_content .his_title{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);z-index: 2;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding-top: 100px;z-index: 20}
#sub.history .his_content .his_title .tit{margin-bottom: 20px;}
#sub.history .his_content .his_title .tit span{display: block;font-size: 24px;color: #FFFFFF;font-family: "Outfit", sans-serif;font-weight: 600;margin-bottom: 10px;}

#sub.history .his_content .his_title .tit span{transform: translateX(-100px);opacity: 0}
#sub.history .his_content .his_title .tit strong{transform: translateX(100px);display: block;opacity: 0}
#sub.history .his_content .his_title .keyword{transform: translateX(-100px);display: block;opacity: 0}
#sub.history .his_content .his_title .tit strong{font-size: 60px;color: #FFFFFF;font-weight: 600}
#sub.history .his_content .his_title .keyword em{display: inline-block;padding: 0 30px;line-height: 54px;border: 1px solid #fff;border-radius: 30px;font-size: 20px;color: #FFFFFF;font-weight: 600}
#sub.history .his_content .his_list_w{position: absolute;width: 50%;top: 0;height: 100%;display: flex;align-items: center;padding: 0 40px;z-index: 15;transform: translateY(100%);padding-top: 100px;}
#sub.history .his_content .his_list_w.right{left: auto;right: 0;justify-content: flex-end}
#sub.history .his_content .his_list_w .his_list{width: 650px;max-width: 100%;padding: 40px;background: #fff;border-radius: 20px;pt}
#sub.history .his_content .his_list_w .his_list ul{display: flex;flex-direction: column;gap: 10px}
#sub.history .his_content .his_list_w .his_list ul li{position: relative;line-height: 1.5;color: #333333;font-size: 20px;padding-left: 120px}
#sub.history .his_content .his_list_w .his_list ul li{position: relative}
#sub.history .his_content .his_list_w .his_list ul li span{position: absolute;left: 0;color: #333333;font-weight: 600}
.historybg{position: fixed;width: 100%;bottom: 0}
#sub.history .con01{position: relative;height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center;position: relative}
#sub.history .con01:after{content: '';display: block;width: 100%;height: 70%;position: absolute;top: 0;left: 0;background: linear-gradient(to bottom, rgba(244,249,249,1), rgba(244,249,249,0));top: -1px;}
#sub.history .con01 .title{position: relative;z-index: 2}
#sub.history .con01 strong{font-size: 50px;color: #FFFFFF;font-weight: 600}
#sub.history .con01 .title:nth-child(2){position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: flex;align-items: center;justify-content: center;}
#sub.history .con01 .title:nth-child(2) strong{text-align: center;font-size: 40px;line-height: 1.5}
#sub.history .con01 .title:nth-child(2) strong 

#sub.history .his_content.his_content_mot1 .his_visual .his_visual_box{width: 600px;height: 400px;border-radius: 20px;}
#sub.history .sub_tab{width: 100%;background: #FFFFFF;background: #fff;border-radius: 0}
#sub.history .his_content .bg_txt{position: absolute;top: 50%;transform: translateY(-50%) translateX(-50%);left: 50%; margin-top: 50px;}
.company_visual .compass, .company_visual .greeting_info{pointer-events: none}
#sub.history .company_visual{overflow: hidden}
#sub.history .con01 .title02 strong{display: block;opacity: 0;transform: translateY(100%)}
#sub.history .con01 .title02 strong span{color: #FFFFFF;font-size: 60px;position: relative}
#sub.history .con01 .title02 strong span i{display: block;position: absolute;bottom: 0;height: 4px;width: 0%;background: #fff;left: 0}
#sub.history .sub_tab.sticky{height: 80px !Important}
#sub.history .sub_tab ul{gap: 0}
#sub.history .sub_tab ul li a{width: 150px;display: block;text-align: center;}
#sub.history .sub_tab ul li.on a{color: #fff;}
#sub.history .sub_tab .underline{    padding: 0 5px; width: 150px;height: 37px;top: 50%;margin-top: -18.5px;border-radius: 6px;background: none}
#sub.history .sub_tab .underline div{background: linear-gradient(to right, #007F8F, #33C3D5);width: 100%;height: 100%;border-radius: 6px;}
@media (max-width: 1660px){
    #sub.about .con01 .c .img .img_w{width: 290px }
    #sub.about .inner{width: 100%;padding: 0 20px;}
    #sub.about .con01 .txt p{font-size: 19px;line-height: 1.5}
    #sub.about .con01 .txt{gap: 25px}
    #sub.about .con02 .main_copy .main_copy_w strong{font-size: 70px;}
    #sub.about .con01 .c{margin-bottom: 150px}
    .company_visual .history_after .his_vis_txt .inner{width: 100%;padding: 0 20px;}
    .company_visual .history_after .his_vis_txt .his_vis_title{padding-left: 60px}
    .company_visual .history_after .his_vis_txt .his_vis_text{padding-right: 60px}
    .company_visual .history_after .his_vis_txt .his_vis_title strong{font-size: 40px;line-height: 1.5}
    .company_visual .history_after .his_vis_txt .his_vis_text p{font-size: 19px;line-height: 1.5}
    #sub.history .his_content .his_title .tit span{font-size: 20px}
    #sub.history .his_content .his_title .tit strong{font-size: 50px}
    #sub.history .his_content .his_title .keyword em{padding: 0 20px;line-height: 45px;font-size: 18px;}
    #sub.history .his_content .his_list_w{z-index: 20}
    #sub.history .his_content .his_list_w .his_list ul li{font-size: 18px}
}
@media (max-width: 1500px){
    #sub.about .con01 .c{display: flex;gap: 30px;width: 900px;margin: 0 auto;margin-bottom: 100px;align-items: center}
    #sub.about .con01 .c02 .inner{justify-content: flex-start}
    #sub.about .con01 .c .img{position: static;transform: none}
    #sub.about .con01 .info i{position: static;display: block;margin-top: 20px}
    .company_visual .vis_title .title strong{font-size: 80px;}
    #sub.history .his_content .his_list_w .his_list ul li br{display: none}
    #sub.history .his_content .his_list_w .his_list ul li{word-break: keep-all}
}
@media (max-width: 1300px){
    #sub.history .his_content .his_list_w{width: 70%}
}
@media (max-width: 980px){
    .company_visual .vis_title .loc{margin-bottom: 10px;}
    .company_visual .vis_title .title strong{font-size: 50px}
    #sub.about .con01 .txt p{font-size: 14px;}
    #sub.about .con01 .c .img .img_w{height: 160px !important;}
    #sub.about .con01 .c01 .img .img_w img{width: 100%}
    #sub.about .con01 .c{gap: 20px}
    #sub.about .con01 .inner{padding: 0}
    #sub.about .con01 .c .img .img_w{border-radius: 8px;}
    #sub.about .con01 .c{margin-bottom: 40px}
    #sub.about .con01 .c{width: 740px;}
    .company_visual .greeting_info strong{font-size: 30px;line-height: 1.5}
    .company_visual .compass img{width: 450px}
    .company_visual .vis_title .loc button{font-size: 13px;}
    .company_visual .vis_title .loc i{width: 7px}
    .company_visual .vis_title .loc span svg{height: auto; width: 20px;}
    .company_visual .vis_title .loc{gap: 8px;}
    .company_visual .vis_title .loc button svg{width: 8px}
    .company_visual .visual {
        clip-path: inset(40% 10px 0 10px round 8px 8px 0 0);
    }
    .company_visual .vis_title{height: 50%;display: flex;align-items: center;justify-content: center;flex-direction: column}
    .company_visual .vis_title {transform: translateY(-100%);}
    #sub.about .con02 .main_copy .main_copy_w strong{font-size: 40px;}
    #sub.about .con02 .main_copy .main_copy_w{gap: 15px}
    #sub.about .con02 .main_copy .tit p{font-size: 13px;}
    #sub.about .con02 .cnr_list{margin-top: -200px}
    #sub.about .con02 .cnr_list svg{height: 400px;width: auto}
    #sub.about .con02 .symbol svg{width: 500px;height: auto}
    #sub.about .con01 .info strong{font-size: 14px}
    #sub.about .con01 .info p{font-size: 15px}
    #sub.about .con01 .info i{font-size: 12px}
    #sub.about .con01 .info i{margin-top: 10px}
    #sub.about .con01 .info{margin-top: 20px}
    #sub.about .con01{padding-bottom: 60px}
    #sub.history .his_content .his_list_w{width: 100%;background: linear-gradient(to top, rgba(0,0,0,0.0), rgba(0,0,0,0.2), rgba(0,0,0,0.0))}
    #sub.history .his_content .his_title{padding-top: 0}
    #sub.history .his_content .his_list_w .his_list ul li{font-size: 13px;line-height: 1.5;padding-left: 60px}
    #sub.history .his_content .his_list_w .his_list{padding: 20px;border-radius: 10px}
    #sub.history .his_content .his_title .tit span{font-size: 14px;}
    #sub.history .his_content .his_title .tit strong{font-size: 26px;}
    #sub.history .his_content .his_title .keyword em {padding: 0 20px;line-height: 35px;font-size: 14px;}
    .company_visual .history_after .his_vis_txt .his_vis_title strong{font-size: 24px}
    .company_visual .history_after .his_vis_txt .his_vis_text p{font-size: 13px;line-height: 1.5}
    .company_visual .history_after .line{margin: 10px 0}
    .company_visual .history_after .vis img{height: 100vh}
    #sub.history .his_content .his_visual .his_visual_box img{height: 100vh}
	#sub.history .his_content .his_visual{padding-top: 0}
    #sub.history .con01 .title i{display: block}
    #sub.history .con01 .title strong{font-size: 28px;text-align: center;line-height: 1.5;display: block;}
	#sub.history .con01 .title:nth-child(2) strong{font-size: 18px;word-break: keep-all;}
	#sub.history .con01 .title strong{font-size: 23px;word-break: keep-all}
	#sub.history .con01 .title strong span{font-size: 30px}
}

@media (max-width: 700px){
    .company_visual .visual .vis_img img{height: 100vh}
    #sub.about {width: 100%;overflow: hidden}
    #sub.about .con01 .c{flex-direction: column;width: 100%;padding: 0 20px;text-align: center}
    #sub.about .con01 .txt p br{display: none;word-break: keep-all}
    #sub.about .con01 .txt p{word-break: keep-all}
    #sub.about .con01 .c02 .txt{gap: 15px}
    #sub.about .con02 .main_copy .main_copy_w{flex-direction: column}
    .company_visual .compass .compass_w img{width: 300px}
    .company_visual .vis_title .title strong{font-size: 40px;}
    .company_visual .greeting_info strong{font-size: 25px}
    .company_visual .greeting_info span{font-size: 15px}
    .company_visual .greeting_info span{margin-bottom: 10px}
    .company_visual .history_after .his_vis_txt .his_vis_text{padding-right: 0}
    .company_visual .history_after .his_vis_txt .his_vis_title{padding-left: 0}
    .historybg {width: 100%;height: 100%}
    .historybg img{height: 100vh;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
    .company_visual .history_after .his_vis_txt .his_vis_text p br{display: none}
    .company_visual .history_after .his_vis_txt .his_vis_text p{word-break: keep-all}
    .company_visual .history_after .his_vis_txt .his_vis_title strong{font-size: 22px}
}