@charset "utf-8";
/* mainTit */
section {overflow: hidden;}
section .mainTit {font-family: "Busan", sans-serif; font-weight: 500; font-size: 3.8rem; color: #222222; line-height: normal; letter-spacing: -0.025rem; word-break: keep-all;}

@media screen and (max-width: 1026px) {
    section .mainTit {font-size: 2.8rem;}
}

@media screen and (max-width: 768px) {
    section .mainTit {font-size: 2.4rem;}
}

/* title_bx */
section .title_bx {width: 160rem; display: flex; justify-content: space-between; margin: 0 auto 4.6rem auto;}
section .title_bx .control_wrap {display: flex; align-items: center; gap: 1.7rem; flex-shrink: 0;}
section .swiper .btn {position: absolute; top: 50%; transform: translateY(-50%);}
section .swiper .btn.prev {left: 0;}
section .swiper .btn.next {right: 0;}
section .control_wrap button {font-size: 0;}
section .control_wrap .pause {width: 1.1rem; height: 2.2rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/s2_slide_stop.png') no-repeat; background-size: 100%;}
section .control_wrap .play {display: none; width: 1.7rem; height: 2rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/s2_slide_play.png') no-repeat; background-size: 100%;}

@media screen and (max-width: 1650px) {
    section .title_bx {width: calc(100% - 8rem);}
}

@media screen and (max-width: 1026px) {
    section .title_bx {margin-bottom: 3rem;}
    section .title_bx {width: 100%;}
    
    section .title_bx .control_wrap {gap: 1.5rem;}
    section .title_bx .control_wrap .btn img {width: 1.5rem;}
    section .control_wrap .pause {width: 1rem; height: 1.9rem;}
    section .control_wrap .play {width: 1.5rem; height: 1.8rem;}
}

@media screen and (max-width: 768px) {
    section .title_bx {margin-bottom: 2.1rem;}
    section .title_bx .control_wrap .btn img {width: 1.3rem;}
    section .control_wrap .pause {height: 1.7rem;}
}

/* main_visual */
.main_visual {height: 100vh; /* background-image: url('/humanframe/theme/digitalgoods/assets/img/main/main_visual.png'); */ background-repeat: no-repeat; background-position: center; background-size: cover;}
.main_visual .inner {width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0 3.4rem 0 2.4rem; margin: 0 auto;}

.main_visual .video_bx {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_visual .video_bx video {display: block; width: 100%; height: 100%; object-fit: cover;}
.main_visual .video_bx video.tab_view, 
.main_visual .video_bx video.mo_view {display: none;}

.main_visual .main_title {font-family: "Busan", sans-serif; font-size: 2.5rem; font-weight: 500; color: #fff; line-height: 3.5rem; letter-spacing: -0.025rem; text-shadow: 0 0 1.3rem rgba(0,0,0,0.2); display: flex; justify-content: center; position: relative; left: -8.5rem; margin-top: 13rem;}
.main_visual .main_title br.mo_view {display: none;}

.main_visual .col_wrap {width: 37.4rem; height: 20.6rem; border-radius: 1.5rem; box-shadow: 0.3rem 0 1.4rem rgba(0,0,0,0.2); margin-bottom: 27rem; left: 9rem; position: relative; overflow: hidden;}
.main_visual .col_wrap .col_title {width: 100%; height: 4rem; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.5rem; border-radius: 1.5rem 1.5rem 0 0; position: absolute; top: 0; left: 0; z-index: 1;}
.main_visual .col_wrap .col_title .tit {font-size: 1.8rem; font-weight: 700; color: #222222; line-height: 1; display: none;}
.main_visual .col_wrap .col_title .col_close {font-size: 0; width: 1.5rem; height: 1.5rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/col_close_white.png') no-repeat; background-size: 100%;}
.main_visual .col_wrap .col_img img:not(.col_dwn img) {display: block; width: 100%; height: 100%; object-fit: cover;}
.main_visual .col_wrap .col_img .col_dwn {position: absolute; bottom: 5.3rem; left: 3.8rem; display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 11.9rem; height: 3.9rem; background: #fff; border-radius: 1.9rem; overflow: hidden;}
.main_visual .col_wrap .col_img .col_dwn::before {content: ''; position: absolute; left: 0; width: 0; height: 100%; background: #000; transition: all 0.3s;}
.main_visual .col_wrap .col_img .col_dwn span {position: relative; font-size: 1.8rem; font-weight: 500; color: #000000; padding-right: 2.2rem;}
.main_visual .col_wrap .col_img .col_dwn span::before {content: ''; position: absolute; right: 0; top: 0.3rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/col_down.png'); background-repeat: no-repeat; background-size: 100%; width: 1.4rem; height: 1.5rem; transition: all 0.3s;}
.main_visual .col_wrap .col_img .col_dwn:hover::before {width: 100%;}
.main_visual .col_wrap .col_img .col_dwn:hover span {color: #fff;}
.main_visual .col_wrap .col_img .col_dwn:hover span::before {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/col_down_on.png');}

.main_visual .scroll_down {margin-bottom: 4.5rem; display: flex; align-items: center; gap: 0.6rem; position: relative;}
.main_visual .scroll_down p {font-size: 1.5rem; font-weight: 500; color: #fff;}

@media screen and (max-width: 1600px) {
    .main_visual .video_bx video.tab_view {display: block;}
    .main_visual .video_bx video.pc_view {display: none;}
}

@media screen and (max-width: 1026px) {
    /* .main_visual {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/main_visual_tab.png');} */
    .main_visual .inner {padding: 0 4rem;}
    .main_visual .main_title {left: 50%; transform: translateX(-50%);}
    .main_visual .col_wrap {width: 34rem; height: 18.8rem; left: 0;}
    .main_visual .col_wrap .col_title {height: 3.5rem;}
    .main_visual .col_wrap .col_title .tit {font-size: 1.6rem;}
    .main_visual .col_wrap .col_title .col_close {width: 1.3rem; height: 1.3rem;}
    .main_visual .col_wrap .col_img .col_dwn {bottom: 3rem; left: 1.8rem; width: 10rem; height: 3rem;}
    .main_visual .col_wrap .col_img .col_dwn span {font-size: 1.5rem; padding-right: 1.8rem;}
    .main_visual .col_wrap .col_img .col_dwn span::before {width: 1.2rem; height: 1.3rem; top: 0.2rem;}
}

@media screen and (max-width: 768px) {
    /* .main_visual {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/main_visual_tab2.png');} */
    .main_visual .video_bx video.mo_view {display: block;}
    .main_visual .video_bx video.tab_view {display: none;}
    .main_visual .inner {padding: 0 2rem;}
    .main_visual .main_title {width: 100%; text-align: center; left: 50%; transform: translateX(-50%); bottom: auto; margin-top: 11rem;}
    .main_visual .main_title br.mo_view {display: block;}
    .main_visual .col_wrap {margin-bottom: 32rem;}
    .main_visual .col_wrap .col_img .col_dwn {bottom: 3.5rem; left: 1.5rem;}
    .main_visual .scroll_down {display: none;}
}

@media screen and (max-width: 480px) {
    /* .main_visual {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/main_visual_mob.png');} */
    .main_visual {height: auto; background-color: #efefef;}
    .main_visual .inner {padding: 0;}
    .main_visual .video_bx {position: static; height: auto;}

    .main_visual .main_title {position: absolute; margin-top: 8rem;}
    .main_visual .col_wrap {width: calc(100% - 4rem); height: auto; margin: 2rem auto;}
    .main_visual .col_wrap .col_img .col_dwn {bottom: 2.5rem;}
}

/* main_visual */

/* section1 */
#s1 {padding: 12rem 0; background: url('/humanframe/theme/digitalgoods/assets/img/main/s1_bg.png') center no-repeat; background-size: cover;}
#s1 .s1_slide {width: 160rem; margin: 0 auto 12rem auto; overflow: visible;}
#s1 .swiper-wrapper {left: -41rem;}
#s1 .s1_slide .swiper-slide {position: relative; height: 22rem; box-shadow: 0.5rem 0 2rem rgba(48, 72, 107, 0.25); border-radius: 2rem;}
#s1 .s1_slide .swiper-slide .img_bx {/*width: 100%;*/ height: 100%; border-radius: 2rem; overflow: hidden;background: #f8f8f8; text-align: center;}
#s1 .s1_slide .swiper-slide .img_bx img {/*display: block;width: 100%;*/  height: 100%; object-fit: cover;}
#s1 .s1_slide .swiper-slide .img_bx hover-video-player {/*display: block;width: 100%;*/  height: 100%; object-fit: cover;}
#s1 .s1_slide .swiper-slide .img_bx hover-video-player video {/*display: block;width: 100%;*/  height: 100%; object-fit: cover;}
#s1 .s1_slide .swiper-slide a:hover .img_bx img {transform: scale(1.05);}
#s1 .s1_slide .swiper-slide .badge {position: absolute; top: 1rem; left: 1rem; display: flex; align-items: center; justify-content: center; width: 6rem; height: 2.8rem; border-radius: 1.4rem; background: linear-gradient(to right, #00c0fa, #015eea); font-size: 1.5rem; font-weight: 600; color: #fff;}
/* #s1 .s1_slide .btn {position: absolute; top: 50%; transform: translateY(-50%);}
#s1 .s1_slide .btn.prev {left: 0;}
#s1 .s1_slide .btn.next {right: 0;}
#s1 .control_btn {position: absolute; top: -3.4rem; right: 1rem;}
#s1 .control_btn button {font-size: 0;}
#s1 .control_btn .pause {width: 0.9rem; height: 1.3rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/s1_slide_stop.png') no-repeat; background-size: 100%;}
#s1 .control_btn .play {display: none; width: 1.1rem; height: 1.3rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/s1_slide_play.png') no-repeat; background-size: 100%;} */

#s1 .inner {width: 160rem; margin: 0 auto;}
#s1 .link_list {display: flex; justify-content: center; flex-wrap: wrap; gap: 0 2rem;}
#s1 .link_list li {width: 30.4rem; height: 7rem; margin-bottom: 2rem;}
#s1 .link_list a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 2.7rem 0 3.5rem; background: #fff; border-radius: 3.5rem; outline: 3px solid transparent;}
#s1 .link_list a:hover {outline: 3px solid #016fed;}
#s1 .link_list a .txt {font-family: "Busan", sans-serif; font-weight: 500; word-break: keep-all; font-size: 2.2rem; color: #222222;}
#s1 .link_list a .txt span.pc_view2 {display: inline-block;}
#s1 .link_list a .boogi {display: flex; align-items: center; gap: 0.9rem;}

/* 줄바꿈 전용 dummy 요소 */
#s1 .link_list li.break {
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
}

@media screen and (max-width: 1600px) {
    #s1 .s1_slide {width: calc(100% - 8rem);}
    #s1 .inner {width: calc(100% - 8rem);}
}

@media screen and (max-width: 1280px) {
    #s1 .swiper-wrapper {left: 0;}
    #s1 .s1_slide .swiper-slide {width: calc(50% - 2rem) !important; height: 34.1rem;}
    /* #s1 .s1_slide .swiper-slide .badge {display: none;}
    #s1 .s1_slide .swiper-slide-active .badge,
    #s1 .s1_slide .swiper-slide-next .badge {display: block;} */
    #s1 .s1_slide .swiper-slide .badge img {width: 5.2rem;}
}

@media screen and (max-width: 1026px) {
    #s1 {padding: 8rem 0;}
    #s1 .s1_slide {margin-bottom: 8rem;}

    #s1 .link_list {gap: 0 1rem; justify-content: flex-start;}
    #s1 .link_list li {width: calc(33.333% - 0.666rem); height: 5.8rem;}
    #s1 .link_list a {padding: 0 2.4rem 0 3rem; border-radius: 2.9rem;}
    #s1 .link_list a .txt {font-size: 1.8rem;}

    #s1 .title_bx {width: calc(100% - 8rem);}
}

@media screen and (max-width: 768px) {
    #s1 {padding: 5rem 0;}
    #s1 .s1_slide {width: calc(100% - 4rem); margin-bottom: 5rem;}
    #s1 .s1_slide .swiper-slide {width: 100% !important; height: 30rem;}
    /* #s1 .s1_slide .swiper-slide .badge {top: -1rem; left: -1rem;}
    #s1 .s1_slide .swiper-slide-next .badge {display: none;} */

    #s1 .inner {width: calc(100% - 4rem);}
    #s1 .link_list li {width: calc(50% - 0.5rem); height: 5.2rem;}
    #s1 .link_list a {padding: 0 2rem;}
    #s1 .link_list a .txt {font-size: 1.6rem;}
    #s1 .link_list li.break {display: none;}

    #s1 .title_bx {width: calc(100% - 4rem);}
}

@media screen and (max-width: 480px) {
    #s1 .s1_slide .swiper-slide {height: 26rem;}
    #s1 .link_list a .txt span.pc_view2 {display: none;}
}
/* section1 */

/* goodsBn */
#goodsBn {width: 100%; height: 13.4rem; display: flex; align-items: center; justify-content: center; gap: 5rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/banner_bg.png'); background-repeat: no-repeat; background-size: cover; background-position: center;}
#goodsBn .mainTit {color: #354774;}
#goodsBn .link {width: 18rem; height: 5.6rem; border-radius: 2.8rem; background: linear-gradient(to right, #015eea, #00c0fa); display: flex; align-items: center; justify-content: center; gap: 1.9rem;}
#goodsBn .link:hover {transform: translateY(-0.5rem);}
#goodsBn .link span {font-size: 1.8rem; font-weight: 600; color: #fff; letter-spacing: -0.025rem;}
#goodsBn .link span.tab {display: none;}

@media screen and (max-width: 1026px) {
    #goodsBn {height: 11.4rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/banner_bg_tab.png');}
    #goodsBn .link {gap: 1.1rem; width: 10.8rem; height: 4.2rem;}
    #goodsBn .link span.pc {display: none;}
    #goodsBn .link span.tab {display: block;}
}

@media screen and (max-width: 768px) {
    #goodsBn {flex-direction: column; gap: 1.7rem; height: 13.3rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/banner_bg_mob.png');}
    #goodsBn .link {width: 10.2rem; height: 3.8rem;}
    #goodsBn .link span.tab {font-size: 1.6rem;}
}
/* goodsBn */

/* section2 */
#s2 {padding: 12rem 0;}
#s2 .inner {position: relative; width: 165rem; margin: 0 auto; overflow: hidden;}

#s2 .s2_slide {overflow: visible; margin: 0 2rem;}
#s2 .s2_slide .swiper-slide {position: relative; height: 22rem; border-radius: 2rem;}
#s2 .s2_slide .swiper-slide .img_bx {/*width: 100%;*/ height: 100%; border-radius: 2rem; overflow: hidden; background: #f8f8f8; text-align: center;}
#s2 .s2_slide .swiper-slide .img_bx img {/*width: 100%;*/ height: 100%; object-fit: cover;}
#s2 .s2_slide .swiper-slide .img_bx hover-video-player {/*display: block;width: 100%;*/  height: 100%; object-fit: cover;}
#s2 .s2_slide .swiper-slide .img_bx hover-video-player video {/*display: block;width: 100%;*/  height: 100%; object-fit: cover;}
#s2 .s2_slide .swiper-slide a:hover .img_bx img {transform: scale(1.05);}
#s2 .s2_slide .swiper-slide .badge {position: absolute; top: 1rem; left: 1rem; display: none;}

@media screen and (max-width: 1650px) {
    #s2 .inner {width: 100%;}
}

@media screen and (max-width: 1280px) {
    #s2 .s2_slide .swiper-slide {width: calc(50% - 2rem) !important; height: 34.1rem;}
    #s2 .s2_slide .swiper-slide .badge {display: none !important;}
    #s2 .s2_slide .swiper-slide-active .badge,
    #s2 .s2_slide .swiper-slide-next .badge {display: block;}
    #s2 .s2_slide .swiper-slide .badge img {width: 5.2rem;}
}

@media screen and (max-width: 1026px) {
    #s2 {padding: 8rem 0;}
    #s2 .inner {width: calc(100% - 8rem); overflow: visible;}
}

@media screen and (max-width: 768px) {
    #s2 {padding: 5rem 0;}
    #s2 .inner {width: calc(100% - 4rem);}
    #s2 .s2_slide {margin: 0;}
    #s2 .s2_slide .swiper-slide {width: 100% !important;}
    #s2 .s2_slide .swiper-slide .badge {top: -1rem; left: -1rem;}
    #s2 .s2_slide .swiper-slide-next .badge {display: none;}
}

@media screen and (max-width: 480px) {
    #s2 .s2_slide .swiper-slide {height: 26rem;}
}
/* section2 */

/* section3 */
#s3 {padding: 10rem 0; background: #ebf6fb;}
#s3 .inner {width: 160rem; margin: 0 auto;}
#s3 .mainTit {margin-bottom: 3rem;}
#s3 .down_list {display: flex; flex-wrap: wrap; gap: 2rem;}
#s3 .down_list li {width: 25rem; height: 6rem; border-radius: 3rem; background: #fff;}
#s3 .down_list li a {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 0 3rem; border-radius: 3rem; outline: 3px solid transparent;}
#s3 .down_list li a span {font-size: 1.8rem; font-weight: 500; color: #222222; letter-spacing: -0.025rem;}
#s3 .down_list li a:hover {outline: 3px solid #016fed;}
#s3 .down_list li a:hover img {transform: rotate(360deg);}

@media screen and (max-width: 1600px) {
    #s3 .inner {width: calc(100% - 8rem);}
    #s3 .down_list li {width: calc(20% - 1.6rem);}
}

@media screen and (max-width: 1026px) {
    #s3 {padding: 6rem 0;}
    #s3 .down_list li {width: calc(25% - 1.5rem);}
}

@media screen and (max-width: 768px) {
    #s3 {padding: 4rem 0;}
    #s3 .inner {width: calc(100% - 4rem);}
    #s3 .mainTit {margin-bottom: 2.1rem;}
    #s3 .down_list {gap: 1rem;}
    #s3 .down_list li {width: calc(33.333% - 0.666666rem); height: 4.6rem; border-radius: 2.3rem;}
    #s3 .down_list li a {border-radius: 2.3rem; padding: 0 2rem;}
    #s3 .down_list li a span {font-size: 1.6rem;}
    #s3 .down_list li a img {width: 1.2rem; height: 1.2rem;}
}
/* section3 */