@charset "utf-8";

#wrap{}
#wrap .inner{width:1200px;margin:0 auto;max-width:100%;}
#wrap .init{transform:translateY(80px);opacity:0;transition:all 1s;}
#wrap .init.animate{transform:translateY(0);opacity:1;}
#wrap .btn-01{color:#ffffff !important;background-color:#4950bc !important;border-color:#4950bc !important;}
#wrap .btn-02{color:#4950bc !important;background-color:#ffffff !important;border-color:#4950bc !important;}


#header{position: fixed;top: 0;left: 50%;z-index: 100;width: 100%;max-width: 100%;background: #fff;transform: translateX(-50%);}
#header .inner{display:flex;align-items:center;justify-content:space-between;height:60px;}
#header .logo{}
#header .logo a{display:flex;align-items:center;justify-content:center;font-size: 24px;font-weight: 700;color: #111;}
#header .logo img{display:block;width: 100%;object-fit: contain;}
#header .language{display: flex;align-items: center;gap: 25px;}
#header .language > a{display:flex;align-items:center;justify-content:center;line-height: 1;font-size: 15px;font-weight:500;color: #333;opacity:0.5;}
#header .language > a.on{opacity:1;}

#main{}
#main .section{position:relative;padding: 120px 0;}
#main .header{position:relative;margin:0 0 50px;display:flex;flex-direction:column;align-items:flex-start;gap: 20px;}
#main .header .sub{display:flex;align-items:center;justify-content:center;line-height: 1.5;font-size: 20px;font-weight: 700;color: #1c4330;}
#main .header .tit{line-height:1;font-size: 54px;font-weight: 800;color:#101010;word-break: keep-all;}
#main .header .txt{line-height: 1.5;font-size: 18px;font-weight:400;color:#303030;word-break: keep-all;}

#main .visual{padding: 240px 0;background: #cfb29f;}
#main .visual .text{position:relative;z-index:1;display: flex;flex-direction: column;gap: 40px;}
#main .visual .text .title{line-height: 1;font-size: 60px;font-weight: bold;color: #000;}
#main .visual .text .desc{line-height: 1.5;font-size: 20px;font-weight: 500;color: #000;opacity: 0.95;}
#main .visual .text .button{display: flex;gap: 10px;}
#main .visual .text .button > a{display: flex;align-items: center;justify-content: center;text-align: center;padding: 0 50px;height: 50px;border-radius: 4px;font-size: 16px;font-weight: 500;border: 1px solid #e0e0e0;}
#main .visual .text .button.en > a:nth-child(1){color:#ffffff !important;background-color:#4950bc !important;border-color:#4950bc !important;}
#main .visual .text .button.en > a:nth-child(2){color:#4950bc !important;background-color:#ffffff !important;border-color:#4950bc !important;}
#main .visual .text .button.ko > a:nth-child(1){color:#4950bc !important;background-color:#ffffff !important;border-color:#4950bc !important;}
#main .visual .text .button.ko > a:nth-child(2){color:#ffffff !important;background-color:#4950bc !important;border-color:#4950bc !important;}
#main .visual .background{position:absolute;z-index:0;pointer-events:none;inset:0;overflow:hidden;}
#main .visual .background:before{content:'';position:absolute;inset:0;background:rgb(255 255 255 / 80%);z-index:2;pointer-events:none;}
#main .visual .background img{width:100%;height:100%;object-fit:cover;}
#main .visual .background.init{transform:translate(0) !important;}
#main .visual .background.init img{transform:scale(1.1);transition:all 5s;}
#main .visual .background.init.animate img{transform:scale(1);}

#main .company{}
#main .company .flex{display:flex;gap:35px;}
#main .company .text{flex:3;}
#main .company .text ul{display:flex;gap:15px;flex-direction: column;}
#main .company .text li{padding:25px;border:1px solid #e0e0e0;border-left: 3px solid #4950bc;}
#main .company .text li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .company .text li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}
#main .company .box{flex:2;padding:35px;border-radius:10px;background: #1c4330;}
#main .company .box .head{margin: 0 0 25px;line-height:1;font-size: 30px;font-weight: 700;color: #fff;}
#main .company .box .desc{margin: 0 0 35px;line-height:1.5;font-size: 18px;font-weight: 400;color: #fff;}
#main .company .box .image{}
#main .company .box .image ul{display:flex;gap:15px;flex-wrap:wrap;align-items:center;justify-content:center;}
#main .company .box .image li{}
#main .company .box .image li img{max-width:100%;}
#main .company .box .hash{display:flex;flex-wrap:wrap;gap:15px;}
#main .company .box .hash span{line-height:1;font-size: 20px;font-weight: 700;color: #fff;background:#000;}
#main .company .counter{margin:60px 0 0 0;}
#main .company .counter ul{display:grid;grid-template-columns:repeat(4, 1fr);gap:35px;}
#main .company .counter li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 0;}
#main .company .counter li .num{line-height:1;font-size:50px;font-weight:800;}
#main .company .counter li .tit{margin:35px 0 0 0;line-height:1;font-size:20px;font-weight:600;color:#303030;}
#main .company .counter li .txt{margin: 10px 0 0 0;line-height:1.5;font-size:15px;font-weight:400;color:#404040;}

#main .seedone{background: #f8f8fc;}
#main .seedone .list{}
#main .seedone .list ul{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px;}
#main .seedone .list li{padding:25px;border:1px solid #e0e0e0;background:#dadbf1;border-radius: 5px;}
#main .seedone .list li .ico{margin: 0 0 20px 0;display:flex;align-items:center;justify-content:center;border-radius:50%;width: 80px;height: 80px;background:#4950bc}
#main .seedone .list li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .seedone .list li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}

#main .category{background: #fff}
#main .category .list{}
#main .category .list ul{display:grid;grid-template-columns:repeat(3, 1fr);gap:15px;}
#main .category .list li{}
#main .category .list li .img{margin:0 0 20px 0;display:flex;align-items:center;justify-content:center;width:100%;height:auto;aspect-ratio: 25/16;background:#f1f1f1;}
#main .category .list li .img img{width:100%;height:100%;object-fit:cover;}
#main .category .list li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .category .list li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}

#main .lineup{background: #1c4330;}
#main .lineup .sub{color:#fff;}
#main .lineup .tit{color:#fff;}
#main .lineup .txt{color:#fff;}
#main .lineup .list{}
#main .lineup .list ul{display:flex;gap:15px;flex-wrap:wrap;}
#main .lineup .list li{padding:20px;width: calc(25% - 11.5px);background:transparent;border-radius:5px;border:2px solid #fff;}
#main .lineup .list li:nth-child(5),
#main .lineup .list li:nth-child(6),
#main .lineup .list li:nth-child(7){width: calc(33.33% - 10px);}
#main .lineup .list li .top{display:flex;gap:10px;}
#main .lineup .list li .tit{flex:1;height: 60px;line-height: 30px;font-size: 20px;font-weight: 600;color: #fff;word-break: keep-all;}
#main .lineup .list li .img{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width: 80px;height:auto;aspect-ratio: 24/28;}
#main .lineup .list li .img img{max-width:100%;height:auto;}
#main .lineup .list li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #fff;word-break: keep-all;}

#main .makeit{background: #fff;}
#main .makeit .list{}
#main .makeit .list ul{display:flex;gap:30px;}
#main .makeit .list li{flex:1;text-align: center;}
#main .makeit .list li .tit{margin: 25px 0 0 0;line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .makeit .list li .img{position:relative;display:flex;align-items:center;justify-content:center;width: 100%;height:auto;aspect-ratio:1/1;border-radius:50%;z-index:1;}
#main .makeit .list li .img img{max-width:60%;position: relative;z-index: 5;}
#main .makeit .list li .img:after{content:'';position:absolute;z-index: 1;top:50%;left: calc(100% - 15px);width: 35px;height: 110px;border-left: 35px solid #4950bc;border-top: 55px solid transparent;border-bottom: 55px solid transparent;box-sizing:border-box;transform:translateY(-50%);}
#main .makeit .list li .img:before{content:'';position:absolute;inset:0;border-radius:50%;border: 10px solid #4950bc;background: #fff;z-index: 2;}
#main .makeit .list li:last-child .img:after{display:none;}
#main .makeit .text{margin: 100px 0 0 0;display:flex;gap:35px;}
#main .makeit .text .box{border-radius:10px;padding:20px;background:#f1f1f1;}
#main .makeit .text .box .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .makeit .text .box .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}
#main .makeit .text .box:nth-child(2n + 1){background: #1c4330;}
#main .makeit .text .box:nth-child(2n + 1) .tit{color:#fff;}
#main .makeit .text .box:nth-child(2n + 1) .txt{color:#fff;}

#main .reach{
}
#main .reach .flex{display:flex;margin: 0 auto;width: 1200px;max-width: 100%;}
#main .reach .left{width: 60%;padding: 0 100px 0 0;}
#main .reach .right{width: 40%;}
#main .reach .list{padding: 60px 0;}
#main .reach .list ul{display:flex;flex-direction:column;gap: 55px;}
#main .reach .list li{display:flex;}
#main .reach .list li .img{flex:0 0 auto;position:relative;width:150px;height:100px;display: flex;align-items: center;justify-content: center;}
#main .reach .list li .img:before{content:'';position:absolute;z-index:0;width:100%;height:100%;border:1px solid #cacbe1;background:#dadbf1;transform: skewY(-10deg);}
#main .reach .list li .img img{position:relative;z-index:1;}
#main .reach .list li .con{flex:1;padding-left:35px;display:flex;flex-direction:column;justify-content:center;}
#main .reach .list li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .reach .list li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}
#main .reach .background{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#4950bc;}
#main .reach .background img{width:100%;height:100%;object-fit:cover;}

#main .contact{background: #fafafa;}
#main .contact .flex{display:flex;gap:35px;}
#main .contact .info{flex:6;border-radius:10px;padding:35px;background:#dadbf1}
#main .contact .info ul{display:flex;flex-direction:column;gap:25px;}
#main .contact .info li{}
#main .contact .info li .img{margin:0 0 20px 0;width:35px;height:35px;}
#main .contact .info li .img img{max-width:100%;}
#main .contact .info li .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .contact .info li .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}
#main .contact .service{flex:4;padding:35px;}
#main .contact .service .tit{line-height: 1;font-size: 20px;font-weight: 600;color: #303030;}
#main .contact .service .txt{margin: 20px 0 0 0;line-height: 1.5;font-size: 15px;font-weight: 400;color: #404040;word-break: keep-all;}
#main .contact .service .txt p{position:relative;padding: 0 0 20px 10px;}
#main .contact .service .txt p:before{content:'';position:absolute;top: 9px;left:0;width: 4px;height: 4px;border-radius: 4px;background:#404040;}

@media (max-width:1024px){

    #wrap .inner{max-width:calc(100% - 32px);}

    #main .section{padding:60px 0;}
    #main .header{margin:0 0 35px;gap:15px;}
    #main .header .sub{font-size:16px;}
    #main .header .tit{line-height: 1.2;font-size: 28px;}
    #main .header .txt{font-size:16px;}
    #main .header .txt br{display:none;}

    #main .visual{padding:120px 0 60px;}
    #main .visual .text{gap:25px;}
    #main .visual .text .title{font-size:36px;word-break:keep-all;}
    #main .visual .text .desc{font-size:16px;}
    #main .visual .text .button{}
    #main .visual .text .button a{padding:0 20px;font-size:15px;height:40px;}

    #main .company .flex{flex-direction:column;gap:25px;}
    #main .company .text li{padding:15px;}
    #main .company .text li .tit{font-size:18px;}
    #main .company .text li .txt{margin:15px 0 0 0;font-size:14px;}
    #main .company .box{padding:15px;}
    #main .company .box .head{margin: 0 0 15px;font-size:18px;}
    #main .company .box .desc{margin: 0 0 25px;font-size:14px;}
    #main .company .box .hash{gap:10px;}
    #main .company .box .hash span{font-size:16px;}
    #main .company .counter{margin:35px 0 0 0;}
    #main .company .counter ul{grid-template-columns:repeat(2, 1fr);gap:15px;}
    #main .company .counter li{padding:15px 0;}
    #main .company .counter li .num{font-size:30px;}
    #main .company .counter li .tit{margin:20px 0 0 0;font-size:18px;}
    #main .company .counter li .txt{margin:10px 0 0 0;font-size:14px;}

    #main .seedone .list ul{grid-template-columns:repeat(1, 1fr);}
    #main .seedone .list li{padding:20px;}
    #main .seedone .list li .ico{margin: 0 0 10px 0;width:60px;height:60px;}
    #main .seedone .list li .tit{font-size:18px;}
    #main .seedone .list li .txt{margin:10px 0 0 0;font-size:14px;}

    #main .category .list ul{grid-template-columns:repeat(1, 1fr);gap:35px 0;}
    #main .category .list li{}
    #main .category .list li .img{margin:0 0 10px 0;aspect-ratio:2/1;}
    #main .category .list li .tit{font-size:18px;}
    #main .category .list li .txt{margin:10px 0 0 0;font-size:14px;}

    #main .lineup .list{}
    #main .lineup .list ul{gap:10px;}
    #main .lineup .list li{padding:15px;width: calc(50% - 5px) !important;}
    #main .lineup .list li .top{flex-direction:column;}
    #main .lineup .list li .tit{order:2;font-size:18px;}
    #main .lineup .list li .img{order:1;}
    #main .lineup .list li .txt{margin:10px 0 0 0;font-size:14px;}

    #main .makeit .list{padding:0 15px;}
    #main .makeit .list ul{gap:20px;flex-wrap:wrap;justify-content:center;}
    #main .makeit .list li{flex:0 0 auto;width:calc(50% - 10px);}
    #main .makeit .list li .tit{margin:10px 0 0 0;font-size:18px;}
    #main .makeit .list li .img{position:relative;display:flex;align-items:center;justify-content:center;width: 100%;height:auto;aspect-ratio:1/1;border-radius:50%;z-index:1;}
    #main .makeit .list li .img img{max-width:60%;}
    #main .makeit .list li .img:after{left: calc(100% - 12px);width:25px;height:80px;border-left:25px solid #4950bc;border-top:40px solid transparent;border-bottom:40px solid transparent;}
    #main .makeit .list li .img:before{border-width:8px;}
    #main .makeit .list li:last-child .img:after{display:none;}
    #main .makeit .text{margin:40px 0 0 0;flex-direction:column;gap:15px;}
    #main .makeit .text .box{}
    #main .makeit .text .box .tit{font-size:18px;}
    #main .makeit .text .box .txt{margin:10px 0 0 0;font-size:16px;}

    #main .reach{padding:60px 0 0;}
    #main .reach .flex{flex-direction:column;max-width: calc(100% - 32px);margin: 0 auto;width: 100%;}
    #main .reach .left{width:100%;padding:0;}
    #main .reach .right{margin: 50px -16px 0;width: calc(100% + 32px);aspect-ratio: 2/1;}
    #main .reach .list{padding:0;}
    #main .reach .list ul{display:flex;flex-direction:column;gap: 55px;}
    #main .reach .list li{display:flex;}
    #main .reach .list li .img{width:100px;height:60px;}
    #main .reach .list li .img img{position:relative;z-index:1;}
    #main .reach .list li .con{padding-left:25px;}
    #main .reach .list li .tit{font-size:18px;}
    #main .reach .list li .txt{margin:10px 0 0 0;font-size:14px;}
    #main .reach .background{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#4950bc;}
    #main .reach .background img{width:100%;height:100%;object-fit:cover;}

    #main .contact .flex{flex-direction:column;gap: 15px;}
    #main .contact .info{padding:20px;}
    #main .contact .info .ico{}
    #main .contact .info li .tit{font-size:18px;}
    #main .contact .info li .txt{font-size:14px;}
    #main .contact .service{padding:0;}
    #main .contact .service .tit{font-size:18px;}
    #main .contact .service .txt{font-size:14px;}
    #main .contact .service .txt p{padding: 0 0 10px 10px;}

}