/*----------------common-----------------*/
section{display: flex; justify-content: center; align-items: center; font-family: Pretendard; text-align: center;}
section .tit{font-weight: 800; font-size: 3.5rem; line-height: 125%; font-family: Paperlogy;}
section .sub_tit{font-weight: 600; line-height: 133%;}
@media screen and (max-width: 767px) {
    section .tit{font-size: 2.5rem;}
}
.purple{color: #877EFF;}
/*text animation*/
section [class*="word"]{position: relative;}
section .hide_word{position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0.3; z-index: 1; white-space: nowrap;}
section .show_word{position: relative; z-index: 2;}
section .letter {opacity: 0.3; transition: opacity 0.3s ease; color: #fff;}
section .letter.on {opacity: 1;}
/*----------------common end-----------------*/

/*----------------sec_01-----------------*/
.sec_01{min-height: 100vh; height: auto; background: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%), url(/front/images/about/sec_01_bg.png) lightgray 50% / cover no-repeat; overflow: hidden; margin-top: -100px; color: #fff; position: relative;}
.sec_01 .tit{opacity: 0; font-size: 4.5rem; margin-bottom: 2.5rem;}
.sec_01 .sub_tit{opacity: 0; color: rgba(255, 255, 255, 0.80); font-size: 2.25rem;}
.sec_01 .scroll{width: 2.5rem; height: 2.5rem; background: url(/front/images/common/ico_arrow_white.svg) no-repeat center/100% auto; position: absolute; left: 50%; transform: translateX(-50%) rotate(-90deg); bottom: 2.5rem;}

.sec_01.ani .tit{animation: fadeInUp 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_01.ani .sub_tit{animation: fadeInUp 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_01.ani .scroll{animation: scroll_down 2s ease-out infinite;}

@media screen and (max-width: 767px) {
    .sec_01{margin-top: -50px;}
    .sec_01 .tit{font-size: 2.5rem;}
    .sec_01 .sub_tit{font-size: 1.625rem;}
    .sec_01 .scroll{bottom: 3.5rem;}
}
/*----------------sec_01 end-----------------*/


/*----------------sec_02-----------------*/
.sec_02{min-height: 100vh; height: auto; background-color: #222; color: #7a7a7a; margin-top: -1px;}
.sec_02 >div{display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; padding: 6.25rem 0;}
.sec_02 .w_clab{width: 13.5rem; height: 13.5rem;}
.sec_02 .w_clab,
.sec_02 .tit{opacity: 0;}
.sec_02 .sub_tit{opacity: 0; font-size: 1.875rem;}

.sec_02.ani .w_clab{animation: fadeInUp 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_02.ani .tit{animation: fadeInUp 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_02.ani .sub_tit{animation: fadeInUp 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}

@media screen and (max-width: 767px) {
    .sec_02 .tit{font-size: 2.25rem;}
    .sec_02 .sub_tit{font-size: 1.833rem;}
}
/*----------------sec_02 end-----------------*/


/*----------------sec_03-----------------*/
.sec_03{min-height: 100vh; height: auto; background-color: #f8f8f8;}
.sec_03 [class*='cont_']{display: flex; flex-direction: column; gap: 2rem;}
.sec_03 .motion_01{margin: 0 auto; display: flex; align-items: center; justify-content: center; opacity: 0;}
.sec_03 .motion_01 span{display: inline-block;}
.sec_03 .c{width: 3.563rem; height: 4.063rem; background: url(/front/images/about/txt_01_c.png) no-repeat center/100% auto;}
.sec_03 .sr{width: 14rem; height: 6.5rem; background: url(/front/images/about/txt_02_sr+.png) no-repeat center/100% auto;}
.sec_03 .lab{width: 10.438rem; height: 4rem; background: url(/front/images/about/txt_03_lab.png) no-repeat center/100% auto; margin-left: 1.25rem;}
.sec_03 p{font-size: 1.875rem; font-weight: 600; line-height: 133%; opacity: 0;}
.sec_03 [class*="word"]{color: #ccc;}
.sec_03 .letter{color: #222;}
.sec_03 .cont_02{display: none;}
.sec_03 .motion_02 figure{width: 43.813rem; height: 18.813rem; background: url(/front/images/about/txt_04_clab.png) no-repeat center/100% auto;}

.sec_03.ani .motion_01{animation: fadeIn .4s ease-in-out forwards;}
.sec_03 .cont_01.ani .word,
.sec_03 .cont_01.ani .word_m1,
.sec_03 .cont_01.ani .word_m2{animation: fadeInUp 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 2s forwards;}
.sec_03 .cont_02.ani .word2,
.sec_03 .cont_02.ani .word3,
.sec_03 .cont_02.ani .word_m3,
.sec_03 .cont_02.ani .word_m4{animation: fadeInUp 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s forwards;}

@media screen and (max-width: 767px) {
    .sec_03 .motion_02 figure{width: 26.667rem; height: 11.417rem;}
}
/*----------------sec_03 end-----------------*/


/*----------------sec_04-----------------*/
.sec_04{min-height: 100vh; height: auto; background-color: #222; color: #7a7a7a; position: relative; overflow: hidden;}
.sec_04 .bg_wrap{position: absolute; width: 100%; height: 100%; max-width: 1920px;}
.sec_04 [class*="bg_0"]{position: absolute; opacity: 0;}
.sec_04 .bg_01{width: 21.25rem; height: 25rem; background: url(/front/images/about/sec_04_img1.png) no-repeat center/100% auto; left: 5%; top: 0.625rem;}
.sec_04 .bg_02{width: 28.75rem; height: 21.25rem; background: url(/front/images/about/sec_04_img2.png) no-repeat center/100% auto; left: 0; bottom: 3.125rem;}
.sec_04 .bg_03{width: 21.25rem; height: 21.25rem; background: url(/front/images/about/sec_04_img3.png) no-repeat center/100% auto; right: 5%; top: 8.125rem; z-index: 1;}
.sec_04 .bg_04{width: 28.75rem; height: 18.75rem; background: url(/front/images/about/sec_04_img4.png) no-repeat center/100% auto; right: 0; bottom: 6.25rem;}
.sec_04 .sub_tit{margin-top: 2rem; font-size: 1.875rem;}
.sec_04 .tit,
.sec_04 .sub_tit{opacity: 0;}

.sec_04.ani .tit{animation: fadeInUp 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_04.ani .sub_tit{animation: fadeInUp 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_04.ani .bg_01{animation: slideInUp 1s ease-in-out forwards;}
.sec_04.ani .bg_02{animation: slideInUp 1s ease-in-out .2s forwards;}
.sec_04.ani .bg_03{animation: slideInUp 1s ease-in-out .4s forwards;}
.sec_04.ani .bg_04{animation: slideInUp 1s ease-in-out .6s forwards;}

@media screen and (max-width: 1600px){
    .sec_04 .bg_01{width: 19.25rem;}
    .sec_04 .bg_02{width: 25.75rem;}
    .sec_04 .bg_03{width: 19.25rem;}
    .sec_04 .bg_04{width: 25.75rem;}
}
@media screen and (max-width: 1480px){
    .sec_04{flex-direction: column; height: auto; padding: 8.333rem 0;}
    .sec_04 .bg_wrap{position: relative; width: 100%; height: auto; min-height: 700px; overflow: hidden; margin-top: 3.125rem;}
    .sec_04 .bg_01{width: 17.25rem; z-index: 2; left: 40%; top: 0;}
    .sec_04 .bg_02{width: 23.75rem; z-index: 1; left: 25%;}
    .sec_04 .bg_03{display: none;}
    .sec_04 .bg_04{width: 25.75rem; bottom: 0; right: 25%;}
}
@media screen and (max-width: 1240px){
    .sec_04 .bg_02{bottom: 8.125rem;}
}
@media (min-width: 768px) and (max-width: 1024px){
    .sec_04 .bg_02{bottom: 12.125rem;}
}
@media screen and (max-width: 767px){
    .sec_04{padding-bottom: 0;}
    .sec_04 .bg_wrap{min-height: 500px; margin-top: 0;}
    .sec_04 .bg_01{width: 12.25rem;}
    .sec_04 .bg_02{width: 15.75rem; bottom: 6.833rem;}
    .sec_04 .bg_04{width: 15.75rem;}
}
@media screen and (max-width: 500px){
    .sec_04 .bg_02{left: 8%;}
    .sec_04 .bg_04{right: 0;}
}
/*----------------sec_04 end-----------------*/


/*----------------sec_05-----------------*/
.sec_05{min-height: 80vh; height: auto; background-color: #222; color: #fff; margin-top: -1px;}
.sec_05 .inner{display: flex; align-items: center; justify-content: center;}
.sec_05 .show_01{border-radius: 50%; padding: 8.125rem; opacity: 0; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap;}
.sec_05 .show_02{border: 1px solid rgba(255, 255, 255, 0.40); max-width: 1560px; border-radius: 18.75rem; padding: 10rem 8.125rem; display: flex; justify-content: space-between; align-items: center; gap: 3rem; position: relative; z-index: 1;}
.sec_05 .show_02 .tit{min-width: 23.333rem; white-space: nowrap;}
.sec_05 .show_02 .hide{font-size: 0;}
.sec_05 .word,
.sec_05 .word2{opacity: 0;}
.sec_05 .mid_cont{font-size: 1.875rem; font-weight: 500; line-height: 133%; position: relative;}
.sec_05 .mid_cont::before{content: ""; display: block; width: 36.375rem; height: 0.125rem; background: rgba(255, 255, 255, 0.40); position: absolute; left: 50%; transform: translateX(-50%); top: 3.875rem;}
.sec_05 .mid_cont >p{opacity: 0;}
.sec_05 .mid_cont >p:last-child{margin-top: 3rem;}

.sec_05.ani .show_01{animation: fadeIn .3s ease-in-out forwards;}
.sec_05.ani .word{animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.4s forwards;}
.sec_05.ani .word2{animation: fadeInUp 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.8s forwards;}
.sec_05 .mid_cont.ani >p:first-child{animation: fadeInUp 0.4s ease-in-out .5s forwards;}
.sec_05 .mid_cont.ani >p:last-child{animation: fadeInDown 0.4s ease-in-out .8s forwards;}

@media screen and (max-width: 1600px){
    .sec_05 .show_02{max-width: 1300px;}
    .sec_05 .show_02 .tit{min-width: 12rem;}
    .sec_05 .mid_cont::before{width: 30rem;}
}
@media screen and (max-width: 1320px){
    .sec_05{min-height: 66vh; padding: 3.333rem 0 6.666rem;}
    .sec_05 .inner{min-height: 1200px;}
    .sec_05 .show_02{flex-direction: column; gap: 2rem; padding: 20rem 7.125rem 10rem;}
    .sec_05 .mid_cont{display: flex; flex-direction: column; gap: 13.333rem;}
    .sec_05 .mid_cont::before{width: 0.167rem; height: 10.333rem; left: 50%; transform: translateX(-50%); top: 6.5rem;}
    .sec_05 .mid_cont >p:last-child{margin-top: 0;}
    .bmo{display: block;}
}
@media screen and (max-width: 767px) {
    .sec_05 .inner{min-height: 700px;}
    .sec_05 .show_02{padding: 14rem 5.125rem 8rem;}
}
/*----------------sec_05 end-----------------*/


/*----------------sec_06-----------------*/
.sec_06{padding-bottom: 5rem; background-color: #fff; color: #222;}
.sec_06 .inner{max-width: 1056px; margin: 0 auto;}
.sec_06 .cont_wrap{position: relative; top: 8.75rem; z-index: 2;}
.sec_06 .tit_wrap{display: flex; justify-content: space-between; align-items: center; opacity: 0;}
.sec_06 .tit{font-size: 2.25rem; text-align: left;}
.sec_06 .p_clab{width: 6.875rem; height: 6.875rem;}
.sec_06 .box_wrap{margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; opacity: 0;}
.sec_06 .box_wrap a{width: calc((100% - 1rem) / 2);}
.sec_06 [class*="_box"]{display: flex; justify-content: space-between; align-items: center; padding: 3rem 2.5rem;}
.sec_06 .b_box{background-color: #222; color: #fff;}
.sec_06 .b_box >div{text-align: left; line-height: 140%;}
.sec_06 .b_box h6{font-family: Paperlogy; font-size: 1.875rem; font-weight: 700;}
.sec_06 .b_box p{margin-top: 0.5rem; font-size: 1.25rem; font-weight: 500; color: rgba(255, 255, 255, 0.80);}
.sec_06 i{width: 4rem; height: 4rem;}
.sec_06 .ico_01{background: url(/front/images/about/ico_01.png) no-repeat center/100% auto;}
.sec_06 .ico_02{background: url(/front/images/about/ico_02.png) no-repeat center/100% auto;}
.sec_06 .w_box{height: 100%; border: 2px solid #222; background-color: #fff;}
.sec_06 .w_box p{font-family: Paperlogy; font-size: 1.5rem; font-weight: 700; line-height: 133%; color: #222; text-align: left;}
.sec_06 .w_box >i{width: 2rem; height: 2rem; background: url(/front/images/common/ico_arrow_grey.svg) no-repeat center/100% auto;}

.sec_06.ani .tit_wrap{animation: fadeInUp 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) forwards;}
.sec_06.ani .box_wrap{animation: fadeInUp 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.4s forwards;}

@media screen and (max-width: 767px) {
    .sec_06 .box_wrap{flex-direction: column;}
    .sec_06 .box_wrap a{width: 100%;}
}
/*----------------sec_06 end-----------------*/


#footer{padding-top: 8.75rem;}


/*----------------animation-----------------*/
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeInUp {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeInDown {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slideInUp {
    0% {
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes scroll_down{
    25%{
        opacity: 1;
    }
    50%{
        opacity: 1;
        transform: translateY(15px) translateX(-50%) rotate(-90deg);
    }
    100%{
        opacity: 0;
        transform: translateY(30px) translateX(-50%) rotate(-90deg);
    }
}
/*----------------animation end-----------------*/