#hero-image {position:relative;width:100%;padding-top:80px;background-color:var(--hh3);box-sizing:border-box;}
#hero-image::before {content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(/images/img-hero-bg-2.png) no-repeat center center / cover;opacity:0.25;}
#hero-image .inner {position:relative;justify-content:space-between;align-items:center;width:100%;padding:6.25rem 0;z-index:1;}
#hero-image .inner .info-wrap {width:50%;}
#hero-image .inner .info-wrap .text-wrap .title {font-weight:700;}
#hero-image .inner .info-wrap .text-wrap .title span {display:block;color:#fff;font-size:2rem;font-family:'Pretendard',sans-serif;line-height:1.3;}
#hero-image .inner .info-wrap .text-wrap .title strong {display:block;color:var(--hh1);font-size:3.5rem;line-height:1.3;}
#hero-image .inner .info-wrap .text-wrap .desc {color:#ffffffcc;font-size:1.25rem;font-weight:400;font-family:'Pretendard',sans-serif;margin-top:1.75rem;word-break:keep-all;}
#hero-image .inner .info-wrap .btn-wrap {margin-top:3.75rem;}
#hero-image .inner .info-wrap .btn-wrap .hover-button {font-size:1.125rem;font-weight:700;font-family:'Pretendard',sans-serif;}
#hero-image .inner .screen-wrap {width:calc(50% - 3.75rem);}
#hero-image .inner .screen-wrap img {display:block;width:100%;}

#container {width:100%;padding-top:10rem;background-color:var(--hh3);}
.content {width:100%;padding-bottom:10rem;}
.content .title-wrap {text-align:center;margin-bottom:5rem;}
.content .title-wrap .title {color:var(--hh1);font-size:3rem;font-weight:700;}
.content .title-wrap .desc {color:#fff;font-size:1.25rem;font-family:'Pretendard',sans-serif;margin-top:1.25rem;}

.content .description-list {width:100%;}
.content .description-list li + li {margin-top:5rem;}
.content .description-list li .inner {justify-content:space-between;align-items:center;width:100%;}
.content .description-list li .inner .text-wrap {width:40%;}
.content .description-list li .inner .text-wrap .tag {font-weight:300;padding:0.25em 1em;margin-bottom:0.5rem;border-radius:8px;}
.content .description-list li .inner .text-wrap .tag::before {border-radius:8px;}
.content .description-list li .inner .text-wrap .tag:hover span {color:#fff;}
.content .description-list li .inner .text-wrap .tag:hover::after {display:none;}
.content .description-list li .inner .text-wrap .ttl {display:block;color:var(--hh1);font-size:2.5rem;font-weight:700;}
.content .description-list li .inner .text-wrap .desc {display:block;color:#fff;font-size:1.25rem;font-weight:300;font-family:'Pretendard',sans-serif;margin-top:0.75rem;}
.content .description-list li .inner .text-wrap .desc span {position:relative;display:block;padding-left:calc(5px + 0.75rem);box-sizing:border-box;}
.content .description-list li .inner .text-wrap .desc span::before {content:"";position:absolute;top:12.5px;left:0;display:block;width:5px;height:5px;border-radius:10px;background-color:#fff;}
.content .description-list li .inner .text-wrap .desc span + span {margin-top:0.75rem;}
.content .description-list li .inner .img-wrap {width:calc(60% - 5rem);border-radius:20px;background-color:#ffffff26;overflow:hidden;}
.content .description-list li .inner .img-wrap img {width:100%;}

.content.features .description-list li .inner .text-wrap .ttl {font-size:2rem;font-family:'Pretendard',sans-serif;}

.content.modules {position:relative;}
.content.modules::before {content:"";position:absolute;bottom:0;left:0;width:100%;height:500px;background:url(/images/img-demo-bg.jpg) no-repeat center bottom / cover;}
.content.modules .diagram-wrap {justify-content:center;width:100%;margin-bottom:10rem;}
.content.modules .diagram-wrap .top-box {width:calc((100% / 3) - 2.5rem * 2 / 3);}
.content.modules .diagram-wrap .top-box .inner {width:100%;height:100%;padding:3.75rem 2.5rem;border:1px solid #ffffff33;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.15) 100%);box-sizing:border-box;transition:0.2s;}
.content.modules .diagram-wrap .top-box .inner:hover {border-color:var(--hh1);box-shadow:0 0 40px #4671f140;}
.content.modules .diagram-wrap .top-box .inner .name {display:block;color:var(--hh1);font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:0.75rem;}
.content.modules .diagram-wrap .top-box .inner .desc {display:block;color:#fff;font-size:1.25rem;font-weight:300;font-family:'Pretendard',sans-serif;text-align:center;}
.content.modules .diagram-wrap .line-box {position:relative;justify-content:space-between;width:100%;height:7.5rem;}
.content.modules .diagram-wrap .line-box::before {content:"";position:absolute;top:50%;left:50%;display:block;width:calc(100% - ((100% / 3) - 2.5rem * 2 / 3));height:1px;background-color:#fff;transform:translate(-50%,-50%);}
.content.modules .diagram-wrap .line-box .line {position:relative;width:calc((100% / 3) - 2.5rem * 2 / 3);}
.content.modules .diagram-wrap .line-box .line::after {content:"";position:absolute;bottom:0;left:50%;display:block;width:1px;height:3.75rem;background-color:#fff;transform:translateX(-50%);}
.content.modules .diagram-wrap .line-box .line.no2::after {height:7.5rem;}
.content.modules .diagram-wrap .option-box {justify-content:space-between;gap:2.5rem;width:100%;}
.content.modules .diagram-wrap .option-box li {width:calc((100% / 3) - 2.5rem * 2 / 3);}
.content.modules .diagram-wrap .option-box li .inner {justify-content:center;width:100%;height:100%;padding:3.75rem 2.5rem;border:1px solid #ffffff33;border-radius:20px;background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.15) 100%);box-sizing:border-box;transition:0.2s;}
.content.modules .diagram-wrap .option-box li .inner:hover {border-color:var(--hh1);box-shadow:0 0 40px #4671f140;}
.content.modules .diagram-wrap .option-box li .inner .tag {font-weight:300;padding:0.25em 1em;margin-bottom:0.5rem;border-radius:8px;}
.content.modules .diagram-wrap .option-box li .inner .tag::before {border-radius:8px;}
.content.modules .diagram-wrap .option-box li .inner .tag:hover span {color:#fff;}
.content.modules .diagram-wrap .option-box li .inner .tag:hover::after {display:none;}
.content.modules .diagram-wrap .option-box li .inner .name {display:block;width:100%;color:var(--hh1);font-size:2.5rem;font-weight:700;text-align:center;margin-bottom:0.75rem;}
.content.modules .diagram-wrap .option-box li .inner .desc {display:block;width:100%;color:#fff;font-size:1.25rem;font-weight:300;font-family:'Pretendard',sans-serif;text-align:center;}

/* responsive */
@media screen and (max-width:1450px){
    
}

@media screen and (max-width:1280px){
    #hero-image .inner {padding:5rem 0;}
    #hero-image .inner .info-wrap .text-wrap .title span {font-size:1.5rem;}
    #hero-image .inner .info-wrap .text-wrap .title strong {font-size:3rem;}

    .content .description-list li .inner .text-wrap .ttl {font-size:2rem;}
    .content .description-list li .inner .text-wrap .desc {font-size:1.125rem;}
    .content .description-list li .inner .img-wrap {width:calc(60% - 3.75rem);}

    .content.features .description-list li .inner .text-wrap .ttl {font-size:1.5rem;}

    .content .title-wrap .title {font-size:2.5rem;}

    .content.modules .diagram-wrap .top-box .inner {padding:2.75rem 1.5rem;}
    .content.modules .diagram-wrap .top-box .inner .name {font-size:2rem;}
    .content.modules .diagram-wrap .top-box .inner .desc {font-size:1.125rem;}
    .content .description-list li .inner .text-wrap .desc span::before {top:11px;}
    .content.modules .diagram-wrap .option-box li .inner {padding:2.75rem 1.5rem;}
    .content.modules .diagram-wrap .option-box li .inner .name {font-size:2rem;}
    .content.modules .diagram-wrap .option-box li .inner .desc {font-size:1.125rem;}
}

@media screen and (max-width:1024px){
    #hero-image {padding-top:64px;}
    #hero-image .inner {padding:3.75rem 0;}
    #hero-image .inner .info-wrap {order:1;width:100%;}
    #hero-image .inner .info-wrap .text-wrap .title span {font-size:1.125rem;}
    #hero-image .inner .info-wrap .text-wrap .title strong {font-size:2.25rem;}
    #hero-image .inner .info-wrap .text-wrap .desc {font-size:1rem;margin-top:1.25rem;}
    #hero-image .inner .info-wrap .btn-wrap {margin-top:2.5rem;}
    #hero-image .inner .info-wrap .btn-wrap .hover-button {font-size:1rem;}
    #hero-image .inner .screen-wrap {width:100%;max-width:640px;margin:0 auto 2.5rem;}

    #container {padding-top:5rem;}
    .content {padding-bottom:5rem;}
    .content br {display:none;}
    .content .title-wrap {margin-bottom:3.75rem;}
    .content .title-wrap .title {font-size:2.25rem;}
    .content .title-wrap .desc {font-size:1rem;margin-top:0.75rem;}

    .content .description-list li .inner .text-wrap {order:1;width:100%;margin-top:1.75rem;}
    .content .description-list li .inner .text-wrap .tag {font-size:0.875rem;margin-bottom:0.25rem;}
    .content .description-list li .inner .text-wrap .ttl {font-size:1.75rem;}
    .content .description-list li .inner .text-wrap .desc {font-size:1rem;}
    .content .description-list li .inner .text-wrap .desc span {padding-left:calc(4px + 0.625rem);}
    .content .description-list li .inner .text-wrap .desc span::before {top:9px;width:4px;height:4px;}
    .content .description-list li .inner .img-wrap {width:100%;}
    .content .description-list li + li {margin-top:3.75rem;}

    .content.modules::before {height:400px;}
    .content.modules .diagram-wrap {margin-bottom:5rem;}
    .content.modules .diagram-wrap .top-box {width:calc((100% / 3) - 1rem * 2 / 3);}
    .content.modules .diagram-wrap .top-box .inner {padding:2.5rem 1.25rem;}
    .content.modules .diagram-wrap .top-box .inner .name {font-size:1.75rem;margin-bottom:0.25rem;}
    .content.modules .diagram-wrap .top-box .inner .desc {font-size:1rem;}
    .content.modules .diagram-wrap .line-box {height:5rem;}
    .content.modules .diagram-wrap .line-box::before {width:calc(100% - ((100% / 3) - 1rem * 2 / 3));}
    .content.modules .diagram-wrap .line-box .line {width:calc((100% / 3) - 1rem * 2 / 3);}
    .content.modules .diagram-wrap .line-box .line::after {height:2.5rem;}
    .content.modules .diagram-wrap .line-box .line.no2::after {height:5rem;}
    .content.modules .diagram-wrap .option-box {gap:1rem;}
    .content.modules .diagram-wrap .option-box li {width:calc((100% / 3) - 1rem * 2 / 3);}
    .content.modules .diagram-wrap .option-box li .inner {padding:2.5rem 1.25rem;}
    .content.modules .diagram-wrap .option-box li .inner .tag {font-size:0.875rem;}
    .content.modules .diagram-wrap .option-box li .inner .name {font-size:1.75rem;margin-bottom:0.25rem;}
    .content.modules .diagram-wrap .option-box li .inner .desc {font-size:1rem;}
}

@media screen and (max-width:768px){
    .content .description-list li .inner .img-wrap {border-radius:8px;}

    .content.modules .diagram-wrap .top-box .inner {padding:2.25rem 1rem;}
    .content.modules .diagram-wrap .option-box li .inner {padding:1.5rem 1rem;}
}

@media screen and (max-width:480px){
    .content.modules .diagram-wrap {width:100%;max-width:280px;margin:0 auto 6.25rem;}
    .content.modules .diagram-wrap .top-box {width:100%;}
    .content.modules .diagram-wrap .top-box .inner {padding:2.5rem 1rem;}
    .content.modules .diagram-wrap .line-box {height:2.5rem;}
    .content.modules .diagram-wrap .line-box::before {top:0;width:1px;height:2.5rem;transform:translateX(-50%);}
    .content.modules .diagram-wrap .line-box .line::after {display:none;}
    .content.modules .diagram-wrap .option-box li {width:100%;}
    .content.modules .diagram-wrap .option-box li .inner {padding:1.75rem 1rem;}
}