@charset "utf-8";
:root{
    --container-padding:30px;
    --header-height:144px;
    --defalutColor: #060707 ;
    --defalutPointColor: #BD2D3D ;
    --defalutGrayColor: #7F7F7F ;
    --defalutWhiteColor: #FFFFFF ;
}

html * {font-family: Mona Sans, serif; color:var(--defalutColor);}
body{width:100vw;overflow-x: hidden;}
.wrapper{width: 100%;overflow: hidden;}
.img-box > img{width: 100%;height: auto;display: block}
.container{width: 100%;max-width: 1340px;padding: 0 var(--container-padding);margin: 0 auto;}
.mobile-only{display: none;}
.button{width: 300px;height: 65px;background-color: var(--defalutPointColor);display: inline-flex;justify-content: center;align-items: center;font-size: 20px;font-weight: 700;color:var(--defalutWhiteColor);border-radius: 10px 0 10px 10px;}
.button.line{background-color: var(--defalutWhiteColor);border:1px solid var(--defalutPointColor);color:var(--defalutPointColor);}

/*사이트 헤더*/
.site-header{height: var(--header-height);display: flex;align-items: center;}
.site-header .logo-item{width: 208px;height: 81px;display: block;}
.site-header .logo-item img{width: 100%;height: 100%;display: block;}
/*사이트 헤더*/


/*section 공통 영역*/
.title-box{display: flex;flex-direction:column;align-items: center;row-gap: 10px;text-align: center;}
.title-box h2{font-size: 40px;font-weight: 700;}
.title-box p{font-size: 30px;font-weight: 400;}

/*section 공통 영역*/

/*상단 section*/
.section-top{}
.section-top .content-box{display: flex;justify-content: space-between;align-items: center;}
.section-top .content-box .text-box{display: flex;flex-direction: column;row-gap: 20px;align-items: flex-start;}
.section-top .content-box .text-box h2{font-size: 40px;font-weight: 800;}
.section-top .content-box .text-box h2 em{color:var(--defalutPointColor);}
.section-top .content-box .text-box p{font-size: 20px;color:var(--defalutGrayColor)}
.section-top .content-box .text-box .button{margin-top: 30px;}
.section-top .content-box .img-box{width: 500px;}
/*상단 section*/

/*section-001*/
.section-001{margin-top:150px;padding-bottom: 150px;background-image: url("../images/section001_bg.png");background-size: cover;background-position: bottom;background-repeat: no-repeat;}
.section-001 .brand-list{display: flex;flex-wrap: wrap;gap: 20px;margin-top: 70px;justify-content: center}
.section-001 .brand-list .brand-item{max-width: 240px;width: calc((100% - 80px) / 5);height: auto;aspect-ratio: 2 / 1;box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);border-radius: 10px;overflow: hidden;background-color: var(--defalutWhiteColor);}
.section-001 .brand-list .brand-item > img{width: 100%;height: auto;display: block;}
/*section-001*/

/*section-002*/
.section-002{width: 100%;height: 400px;display: flex;justify-content: center;align-items: center;background-image: url("../images/section002_bg.png");background-size: cover;background-position: bottom;background-repeat: no-repeat;}
.section-002 p{font-size: 50px;font-weight: 900;line-height: 1.5;color: var(--defalutWhiteColor);text-align: center;}
/*section-002*/

/*section-003*/
.section-003{padding:150px 0;background-color: #F1F3FA;}
.section-003 .list-box{display: flex;column-gap: 40px;margin-top: 100px;}
.section-003 .list-box .list-item{background-color: var(--defalutWhiteColor);padding:50px 40px 35px;border-radius: 30px 0 30px 30px;box-shadow: 0 4px 40px rgba(0, 0, 0, 0.07);}
.section-003 .list-box .list-item .num{font-size: 30px;font-weight: 900;color:var(--defalutPointColor);}
.section-003 .list-box .list-item h2{margin-top: 30px;font-size: 30px;font-weight: 800;color:var(--defalutColor);line-height: 1.25;letter-spacing: -0.06em;}
.section-003 .list-box .list-item p{margin-top: 10px;font-size: 20px;color:var(--defalutGrayColor);line-height: 1.25;}
.section-003 .list-box .list-item .img-box{width: 100%;margin-top: 40px;}
/*section-003*/

/*section-004*/
.section-004{padding:150px 0;}
.section-004 .dashboard-box{width: 100%;background-color: #F4F7FC;margin-top: 60px;}
.section-004 .diagram-list{width: 100%;height:108px;background-color: var(--defalutPointColor);display: flex;align-items:center;border-radius: 20px 0 20px 20px;}
.section-004 .diagram-list .diagram-item{width: calc((100% - 100px) / 3);}
.section-004 .diagram-list .diagram-arrow{width: 36px;padding:0 7px;box-sizing: content-box;}
.section-004 .diagram-list .diagram-item p{font-size: 20px;font-weight:500;color:var(--defalutWhiteColor);text-align: center;}
.section-004 .graph-box{padding:50px;}
.section-004 .graph-list{display: flex;align-items: flex-end;}
.section-004 .graph-list .graph-arrow{width: 51px;transform: translateY(33px);margin: 0 5px;}
.section-004 .graph-list .graph-item{width: calc((100% - 61px) /2);height: 310px;background-color: var(--defalutWhiteColor);padding: 40px 50px;border-radius: 10px;display: flex;;justify-content: space-between;}
.section-004 .graph-list .graph-item h2{font-size: 24px;font-weight: 700;}
.section-004 .graph-list .graph-item .img-box{display: flex;align-items: center;}
.section-004 .graph-list .graph-item:nth-of-type(1) .img-box{max-width: 260px;width: 100%;}
.section-004 .graph-list .graph-item:nth-of-type(2) .img-box{max-width: 333px;width: 100%;}
.section-004 .info-list{display: flex;margin-top: 50px;column-gap: 50px;}
.section-004 .info-list .info-item{width: calc((100% - 342px) / 2);}
.section-004 .info-list .info-item h2{font-size: 25px;font-weight: 700;line-height: 1.2;margin-bottom: 20px;height: 60px;display: block;}
.section-004 .info-list .info-item ul{display: flex;flex-direction: column;gap: 10px;}
.section-004 .info-list .info-item ul li{font-size: 18px;color:var(--defalutGrayColor);position: relative;padding-left: 14px;}
.section-004 .info-list .info-item ul li::before{content: "●";font-size: 4px;position: absolute;top:10px;left: 0;}
.section-004 .info-list .info-item:nth-of-type(3) ul{margin-top: 80px;}
.section-004 .info-list .info-card{width: 342px;border-radius: 10px;overflow: hidden;}
.section-004 .info-list .info-card .card-header{width: 100%;height: 69px;display: flex;justify-content: center;align-items: center;background-color: #1B3893;}
.section-004 .info-list .info-card .card-header h3{font-size:20px;font-weight: 700;color:var(--defalutWhiteColor);}
.section-004 .info-list .info-card .card-content{padding:35px;background-color: var(--defalutWhiteColor);}
/*section-004*/

/*section-005*/
.section-005{padding-bottom: 150px;}
.section-005 .title-box .button{margin-top: 30px; }
.section-005 .list-box{display: flex;flex-direction: column;row-gap: 100px;margin-top: 100px;}
.section-005 .list-box .list-item{display: flex;column-gap: 100px;}
.section-005 .list-box .list-item .img-box{width: 615px;height: auto;aspect-ratio: 615 / 420;}
.section-005 .list-box .list-item .text-box{width: calc(100% - 715px);display: flex;flex-direction: column;justify-content:center;row-gap: 10px;text-align: left;}
.section-005 .list-box .list-item .text-box .num{font-size: 80px;font-weight: 900;color:#F1F3FA;}
.section-005 .list-box .list-item .text-box p{font-size: 30px;font-weight: 700;}
.section-005 .list-box .list-item:nth-of-type(even) {flex-direction: row-reverse}
/*section-005*/

/*section-006*/
.section-006{padding:150px 0;background-color: #F4F7FC;}
.section-006 .content-box{display: flex;height: 433px;margin-top: 100px;column-gap: 70px;}
.section-006 .content-box .text-box{display: flex;flex-direction: column;height: 100%;justify-content:  flex-end;border-top:2px solid var(--defalutColor)}
.section-006 .content-box .text-box .ceo-name{font-family: 'Roboto', serif;font-size: 40px;line-height: 1;font-weight: 900;color:#000000;}
.section-006 .content-box .text-box .career{font-family: 'Roboto', serif;font-size: 24px;line-height: 1.6;font-weight: 500;color:#000000;}
.section-006 .content-box .text-box h3{font-size: 20px;font-weight: 700;color:#000000;margin-top: 20px;}
.section-006 .content-box .text-box p{font-size: 18px;line-height:2.222222222222222;color:#000000;margin-top: 10px;}
.section-006 .content-box .img-box img{width: 100%;display: block;}
    /*section-006*/

/*section-007*/
.section-007{width: 100%;height: 500px;display: flex;justify-content: center;align-items: center;background-image: url("../images/section007_bg.png");background-size: cover;background-position: center;background-repeat: no-repeat;}
.section-007 .title-box h2{font-size: 50px;color: var(--defalutWhiteColor);}
.section-007 .title-box p{font-size: 20px;color: var(--defalutWhiteColor);}
.section-007 .title-box .button{width: 360px;margin-top: 40px;}
/*section-007*/

.site-footer{background-color: #060707;padding:75px 0;display: flex;justify-content: center;align-items: center;}
.site-footer .footer-content{display: flex;flex-direction: column;align-items: center;row-gap: 17px;}
.site-footer .footer-logo img{width: 439px;height: auto;aspect-ratio: 75 / 12;display: block}
.site-footer .copyright-box{font-size: 16px;color:var(--defalutWhiteColor);text-align: center;}

@media screen and (max-width: 1360px){
    .section-003 .list-box {column-gap: 20px;}
}


@media screen and (max-width: 1300px) {
    .section-006 .content-box {flex-direction: column;height: auto;row-gap: 50px;}
    .section-006 .content-box .img-box{width: 100%;max-width: 620px;}
}

@media screen and (max-width: 1280px){
    .pc-only{display: none;}
    .section-003 .list-box {flex-direction: column;row-gap: 20px;}

    .section-004 .info-list .info-item h2 {font-size: 20px;height: 60px;}

}

@media screen and (max-width: 1080px){

    .section-top .content-box .text-box h2 {font-size: 32px;}
    .section-top .content-box .text-box p {font-size: 16px;}
    .section-top .content-box .img-box{width: 400px;}

    .section-001 .brand-list .brand-item {width: calc((100% - 60px) / 4);}

    .section-002 p {font-size: 30px;}
    .section-004 .dashboard-box {margin-top: 14px;border-radius: 20px;}
    .section-004 .diagram-list .diagram-item p {font-size: 15px;}
    .section-004 .graph-list .graph-item {flex-direction: column;row-gap: 10px;justify-content: space-between;}
    .section-004 .info-list {flex-direction: column;align-items: center;}
    .section-004 .info-list .info-item {width: 100%;order: 2;}
    .section-004 .info-list .info-card {width: 342px;max-width: 100%;order: 1;margin-bottom: 20px;}
    .section-004 .info-list .info-item:nth-of-type(3) ul {margin-top:10px;}

    .section-005 .list-box .list-item .img-box {width: 400px;}
    .section-005 .list-box .list-item .text-box {width: calc(100% - 500px);}
}




@media screen and (max-width: 820px){

    .button {width: 220px;height: 40px;font-size: 15px;}
    .section-top .content-box .text-box h2 {font-size: 22px;}
    .section-top .content-box .text-box p {font-size: 13px;}
    .section-top .content-box .text-box .button {margin-top: 20px;}
    .section-top .content-box .img-box{width: 400px;}

    .section-004 .graph-box {padding: 20px;}
    .section-005 .list-box .list-item {display: flex;column-gap: 60px;}
    .section-005 .list-box .list-item .img-box {width: 300px;}
    .section-005 .list-box .list-item .text-box {width: calc(100% - 360px);}
}

@media screen and (max-width: 750px) {
    :root {
        --container-padding: 16px;
        --header-height: 64px;
    }

    .mobile-only {display: block}
    .site-header .logo-item {width: 167px;}
    .section-top .content-box {flex-direction: column-reverse;row-gap: 20px;}
    .section-top .content-box .img-box {max-width: 100%;}
    .section-top .content-box .text-box {text-align: center;align-items: center;row-gap: 10px;}
    .section-top .content-box .text-box h2 {line-height: 1.136;}
    .section-top .content-box .text-box .button {margin-top: 10px;}
    .title-box {text-align: center;}
    .title-box h2 {font-size: 22px;}
    .title-box p {font-size: 15px;}

    .section-001 {margin-top: 30px;padding: 50px 0 30px;background-image: url("../images/m-section001_bg.png");}
    .section-001 .brand-list {gap: 10px;margin-top: 20px;}
    .section-001 .brand-list .brand-item {width: calc((100% - 20px) / 3);}

    .section-002 {height: 220px;}
    .section-002 p {font-size: 22px;}

    .section-003 {padding: 30px 0;}
    .section-003 .list-box {flex-direction: column;row-gap: 20px;margin-top: 20px;}
    .section-003 .list-box .list-item {padding: 30px 20px 24px;}
    .section-003 .list-box .list-item .num {font-size: 20px;}
    .section-003 .list-box .list-item h2 {margin-top: 20px;font-size: 22px;}
    .section-003 .list-box .list-item p {margin-top: 5px;font-size: 15px;}
    .section-003 .list-box .list-item .img-box {margin-top: 20px;}

    .section-004 {padding: 30px 0;}
    .section-004 .diagram-list {flex-direction: column;height: auto;padding:20px;row-gap: 10px;}
    .section-004 .diagram-list .diagram-item {width: 100%}

    .section-004 .graph-box {padding: 10px;}
    .section-004 .graph-list {display: flex;flex-direction: column;row-gap: 10px;}
    .section-004 .graph-list .graph-item {width: 100%;height: auto;padding: 40px 50px;border-radius: 10px;display: flex;align-items: center;row-gap: 20px;}
    .section-004 .graph-list .graph-arrow{order: 3;margin: 0 auto;transform: translateY(0);}

    .section-004 .info-list {margin-top: 10px;}
    .section-004 .info-list .info-item h2 {margin-bottom: 12px;height: auto;text-align: center;}
    .section-004 .info-list .info-item ul li {font-size: 14px;padding-left: 14px;}
    .section-004 .info-list .info-item ul li::before {font-size: 4px;position: absolute;top: 6px;left: 0;}

    .section-005 {padding-bottom: 30px;}
    .section-005 .title-box .button {margin-top: 20px;}
    .section-005 .list-box {row-gap: 20px;margin-top: 30px;}
    .section-005 .list-box .list-item {flex-direction: column;}
    .section-005 .list-box .list-item:nth-of-type(even) {flex-direction: column;}
    .section-005 .list-box .list-item .img-box {width: 100%}
    .section-005 .list-box .list-item .text-box {width: 100%;margin-top: 15px;}
    .section-005 .list-box .list-item .text-box .num {font-size: 40px;}
    .section-005 .list-box .list-item .text-box p {font-size: 22px;}

    .section-006 {padding: 30px 0;}
    .section-006 .content-box {flex-direction: column;height: auto;row-gap: 20px;margin-top: 20px;}
    .section-006 .content-box .img-box {width: 100%;max-width: 620px;margin: 0 auto;}

    .section-006 .content-box .text-box .ceo-name{font-size: 20px;margin-top: 15px;}
    .section-006 .content-box .text-box .career{font-size: 14px;}
    .section-006 .content-box .text-box h3{font-size: 18px;margin-top: 10px;}
    .section-006 .content-box .text-box p{font-size: 15px;margin-top: 5px;}

    .section-007 {width: 100%;height: 246px;}
    .section-007 .title-box h2 {font-size: 22px;color: var(--defalutWhiteColor);}
    .section-007 .title-box p {font-size: 15px;color: var(--defalutWhiteColor);}
    .section-007 .title-box .button {width: 280px;margin-top: 30px;}
    .site-footer {padding: 45px 0;}
    .site-footer .footer-logo img {width: 173px;}
    .site-footer .copyright-box {font-size: 14px;}
}

@media screen and (max-width: 420px) {
    :root {
        --container-padding: 8px;
    }

    .section-001 .brand-list .brand-item {width: calc((100% - 10px) / 2);}
}