@charset "utf-8";
.portfolio_view_title {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
/*공통*/
body { font-size: 16px; color: #a87e6e; }
body .se_component_wrap  { color: #000 !important; }
.inner { max-width: 1800px; margin: auto; height: 100%; }
.inner.top { max-width: 1600px; }
.inner.sns { max-width: 1400px; }

.strong { font-size: max(2.5vw, 50px); }
.strong span { display: block; line-height: 1.2; font-weight: 200; }
.strong span b { font-weight: 800; line-height: 1.3; }

.sub_quick_menu { display: flex; flex-direction: column; align-items: center; position: fixed; right: 2%; top: 50%; transform: translateY(-50%); mix-blend-mode: multiply; z-index: 10; }
.sub_quick_menu .quick_icon { position: relative; margin-bottom: 50px; }
.sub_quick_menu .quick_icon:last-of-type { margin-bottom: 0px; }
.sub_quick_menu .quick_icon i { color: #d3bdb5; font-size: 25px; }
.sub_quick_menu .quick_desc { position: absolute; left: -20px; top: 50%; width: 75px; padding: 10px 15px; transform: translate( -100%, -50%); background-color: #a87e6e; border-radius: 10px; color: #fff; text-align: center; opacity: 0; pointer-events: none ;transition: all 0.3s; }
.sub_quick_menu .quick_icon:hover .quick_desc { opacity: 1; pointer-events: auto}

.sub_intro_container.port .strong { font-size: 3vw; }
.sub_intro_container.port .strong span { line-height: 0.9; }

.line_tit { display: flex; align-items: center; }
.line_tit .tit { margin-right: 10px; font-size: 28px; font-weight: 800; }
.line_tit .line { width: 100%; height: 1px; background-color: #d8cac2; }


.sub_tit { padding-bottom: 60px; font-size: 20px; font-weight: 700; color: #b18978; text-align: right; }
.sub_tit .inner { max-width: 1400px; }
.sub_tit .inner.top { max-width: 1600px; }
.sub_tit .inner p { font-size: 20px; }

.sub_tab_wrap { display: flex; justify-content: center; padding: 30px 0; }

.sub_tab_wrap .sub_tab { position: relative; padding: 3px; color: #b18978; font-size: 18px; font-weight: 800; opacity: 0.5; transition: all 0.3s; }
.sub_tab_wrap .sub_tab:nth-of-type(2) { margin: 0 70px; }
.sub_tab_wrap .sub_tab:before { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background-color: #b18978; transform: scaleX(0); transition: all 0.3s; }
.sub_tab_wrap .sub_tab.on { opacity: 1; }
.sub_tab_wrap .sub_tab.on:before { transform: scaleX(1); }

.sub_top_img { position: relative; margin-top: -8%; padding-bottom: 56.25%; }
.sub_top_img .sub_main_img video { position: absolute; left: 0; top: 0; width: 100%; height: 100%;  }

/*인트로*/
.sub_intro_container { padding: 40px 0 20px; background-color: #f9f9f9; }
.sub_intro_container.port { background-color: #fff; text-align: center; }
.sub_intro_container.port .sub_top .left { width: 100%; }
.sub_intro_container.about_01 { padding: 40px 0 100px; }
.sub_intro_container .inner { position: relative; }
.sub_intro_container.img { padding-bottom: 10%; }
.sub_intro_container .sub_top { position: relative; display: flex; align-items: flex-start; justify-content: space-between; }
.sub_intro_container .sub_top.none { display: block; }
.sub_intro_container .sub_top .left { width: 45%; }
.sub_intro_container .sub_top.none .left { width: 100%; }
.sub_intro_container .left .txt_wrap { margin-top: 30px; }
.sub_intro_container .left .txt_wrap strong { font-size: 20px; font-weight: 800; }
.sub_intro_container .left .txt_wrap .txt { padding: 30px 0 50px; }
.sub_intro_container .left .txt_wrap .txt span { display: block; line-height: 1.9; }

.sub_intro_container .right { position: relative; width: 55%; }
.sub_intro_container .right .img { padding-top: 70%; }
.sub_intro_container .right .img.contact_img { padding-top: 90%; }
.sub_intro_container .right .img.service { padding-top: 65%; }
.sub_intro_container .right .img img { position: absolute; left: 50%; top: 0; width: 100%; height: 100%; object-fit: contain; transform: translateX(-50%); }
.sub_intro_container .right .img img.about01 { width: 93%; }
.sub_intro_container .right .img img.about02 { width: 100%; }
.sub_intro_container .right .img img.story { width: 80%; }
.sub_intro_container .right img.about02_s { position: absolute; left: 50%; top: 0; width: 85%; height: 100%; transform: translateX(-50%); }




/*뜻*/
.about_mean_container { padding: 130px 0; background-color: #f7ccb7; }
.about_mean_container .logo_wrap {  }
.about_mean_container .logo_wrap .img { width: 40%; margin: auto; }

.about_mean_container .logo_wrap .inner_txt_wrap { display: flex; width: 47%; margin: 60px auto 0; align-items: center; justify-content: center; }
.about_mean_container .logo_wrap .inner_txt_wrap .inner_txt { width: calc(100%/3); text-align: center; }
.about_mean_container .logo_wrap .inner_txt_wrap .inner_txt .inner_tit { font-size: 24px; font-weight: 800; }
.about_mean_container .logo_wrap .inner_txt_wrap .inner_txt .inner_desc { margin-top: 15px; font-weight: 800; }

.about_mean_container .middle_txt { margin: 40px 0 60px; font-size: 48px; font-weight: 800; text-align: center; opacity: 0.2; }

.about_mean_container .mean_txt { font-size: 20px; font-weight: 800; text-align: center; }
.about_mean_container .mean_txt p.top { margin-bottom: 50px; }
.about_mean_container .mean_txt p { line-height: 1.7; word-break: keep-all; }


/*culture*/
.about_culture_container { padding: 120px 0; background: url(../img/sub/bg_about.jpg) no-repeat center top/cover; color: #f2edea; text-align: center; }
.about_culture_container .sub_content_tit { margin-bottom: 70px; font-size: 28px; font-weight: 800; }
.about_culture_container .culture_wrap { display: flex; align-items: center; justify-content: center; }
.about_culture_container .culture_wrap .culture { margin: 0 25px; }
.about_culture_container .culture_wrap .tit { font-size: 20px; font-weight: 700; }
.about_culture_container .culture_wrap .desc { margin-top: 15px; color: #f0c5b0; }
.about_culture_container .culture_wrap .desc span + span { margin-left: 5px; }
.about_culture_container .inner_txt { margin: 70px 0; }
.about_culture_container .inner_txt span { display: block; line-height: 1.8; }

/*vision*/
.about_vision_container { padding: 90px 0; }
.about_vision_container .vision_contents { display: flex; flex-wrap: wrap; padding: 90px 0; }
.about_vision_container .vision_contents .vision { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: calc( 50% - 5px ); margin-bottom: 80px; }
.about_vision_container .vision_contents .vision .ico_wrap {  }
.about_vision_container .vision_contents .vision .circle { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: #f2edea; border-radius: 50%; }
.about_vision_container .vision_contents .vision .circle img { width: 45%; height: 45%; }
.about_vision_container .vision_contents .vision .tit { margin: 15px 0; font-size: 22px; font-weight: 800; }
.about_vision_container .vision_contents .vision .desc { margin: 15px 0; font-size: 16px; font-weight: 700; }
.about_vision_container .vision_contents .vision .txt_wrap { text-align: center; }
.about_vision_container .vision_contents .vision .txt_wrap span { display: block; line-height: 1.6; font-size: 15px; }


.sns_container { padding: 100px 0 180px; }
.bg_area.family { margin-top: 210px; }


/*----------- series --------------*/
.series_container { padding: 80px 0 180px; }
.series_container .sub_content_tit { padding: 50px 0; font-weight: 800; font-size: 24px; }

.series_container .sub_contents { display: flex; flex-wrap: wrap; justify-content: space-between; }
.series_container .service_box { position: relative; display: block; width: calc( 100%/4 - 1vw ); height: calc( 100%/4 - 1vw ); margin-bottom: 1vw; /*width: 350px; height: 350px;*/ background-color: #f4efec; border-radius: 30px; overflow: hidden; transition: all 0.3s; }
.series_container .service_box img { width: 100%; height: 100%; object-fit: cover; }
.series_container .service_box video { width: 100%; height: 100%; border-radius: 30px; }
.series_container .service_box .service_tag { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 20px; font-weight: 700; }
.series_container .service_box .service_tag.bw { color: #a87e6e; }
.series_container .service_box .service_tag.wh { color: #fff; }

.series_container .service_box.bw { background-color: #a87e6e; }
.series_container .service_box.video_bw { background-color: #ac867b; }
.series_container .service_box.pk { background-color: #f7ccb7; }
.series_container .service_box.video_pk { background-color: #EDCCC1; }
.series_container .service_box.video_pk2 { background-color: #FACDB8; }
.series_container .service_box.gr { background-color: #f4efec; }


.list_tit { font-family: 'Pretendard'; }
.list_btn { padding-top: 50px; }
.list_btn a { font-family: 'Pretendard'; padding: 8px 20px; font-size: 18px; font-weight: 600; color: #fff; background-color: #a87e6e; border: 1px solid transparent; transition: all 0.3s; }

.inner.story_view_tit { max-width: 1600px; }
.list_view_container .text_box { margin-bottom: 20px; }
.list_view_container .badge { padding: 4px 7px 4px; background-color: #a87e6e; border-radius: 30px; color: #fff; font-size: 14px; }
.list_view_container .text { margin-left: 7px; font-size: 16px; font-weight: 600; }
.list_view_container h1 { color: #000 !important; }
.story_view_tit { text-align: right; }
.story_view_tit .tit { font-size: 20px; font-weight: 700; }
.list_view_share .inner { display: flex; align-items: center; justify-content: center; width: 100%; }
.list_view_share a { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; margin: 30px 15px 20px; background-color: #eee; border-radius: 100%; transition: all 0.3s; flex-shrink: 0}

.list_view_share a .img { width: 20px; height: 20px }
.list_view_share a i { font-size: 19px; }

/*프로젝트 의뢰*/
.contact .sub_intro_container { background-color: #f9f9f9; }
.list_view_share a.facebook .img { background: url('/inc/img/common/ico_facebook_b.svg')center/contain no-repeat; }
.list_view_share a.blog .img { background: url('/inc/img/common/ico_blog_b.svg')center/contain no-repeat; }
.list_view_share a.talk .img { background: url('/inc/img/common/ico_kakao_b.svg')center/contain no-repeat; }


/*포트폴리오 솔루션*/
.port_solution_container { display: flex; flex-wrap: wrap; width: 85%; margin: 0 auto; padding: 100px 0; color: #a87e6e; justify-content: flex-start; }
.port_solution_container .vision { display: flex; justify-content: flex-start; align-items: flex-start; width: calc( 100%/2 ); margin-bottom: 230px; }
.port_solution_container .vision:nth-of-type(5),
.port_solution_container .vision:nth-of-type(6) { margin-bottom: 0; }
.port_solution_container .vision .ico_wrap { margin-right: 60px; }
.port_solution_container .vision .circle { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; background-color: #f2edea; border-radius: 50%; }
.port_solution_container .vision .circle i { font-size: 46px; }
.port_solution_container .vision .tit { margin: 15px 0; font-size: 22px; font-weight: 800; }
.port_solution_container .vision .desc { margin: 15px 0 30px; font-size: 15px; font-weight: 500; }
.port_solution_container .vision .desc span { display: block; line-height: 1.6; }
.port_solution_container .vision .txt_wrap { text-align: left; }
.port_solution_container .vision .txt_wrap span { display: block; line-height: 1.9; font-size: 15px; text-indent: -0.8em; padding-left: 1.6em; }
.port_solution_container .vision .txt_wrap span i { margin-right: 8px; }



/*호버 디자인*/
.sub_tab_wrap .sub_tab:hover { opacity: 1; }
.sub_tab_wrap .sub_tab:hover:before { transform: scaleX(1); }
.list_view_share a:hover { background-color: #a87e6e; color: #fff; }
.list_view_share a.facebook:hover .img { background: url('/inc/img/common/ico_facebook_w.svg')center/contain no-repeat; }
.list_view_share a.blog:hover .img { background: url('/inc/img/common/ico_blog_w.svg')center/contain no-repeat; }
.list_view_share a.talk:hover .img { background: url('/inc/img/common/ico_kakao_w.svg')center/contain no-repeat; }





/*반응형*/
@media screen and ( max-width: 1801px ) {
    .inner { padding: 0 30px; }
}

@media screen and ( max-width: 1400px ) {
    .strong { font-size: 50px; }
    .port_solution_container { width: 100%; }
}


@media screen and ( max-width: 1200px ) {
    .sub_tit { padding-top: 20px; padding-bottom: 20px; }


    .sub_intro_container { padding: 20px 0; }
    .sub_intro_container.about_01 { padding: 20px 0; }
    .sub_intro_container .sub_top { flex-direction: column; align-items: flex-start; }
    .sub_intro_container .sub_top .left { width: 100%; margin-bottom: 50px; }

    /*.sub_intro_container .left .txt_wrap { text-align: center; }*/
    .sub_intro_container .right { width: 100%; }
    .sub_intro_container .right.service { margin: 50px 0; }

    .series_container .service_box { width: calc( 100%/3 - 20px ); height: calc( 100%/3 - 20px ); margin-bottom: 20px; }
    .series_container .service_box .service_tag { width: 90%; text-align: center; font-size: 16px; }

    .port_solution_container .vision { width: auto; justify-content: flex-start; }
    .port_solution_container .vision { flex-direction: column; margin: 0 30px 140px; }
    .port_solution_container .vision .ico_wrap { margin-bottom: 20px; }
}

@media screen and ( max-width: 950px ) {
    .port_solution_container .vision { width: auto; margin: 0 60px 140px; }
    .port_solution_container .vision:nth-of-type(5) { margin-bottom: 140px; }
}

@media screen and ( max-width: 768px ) {
    /*.se_textarea { font-size: 13px !important; }*/
    .se_component .se_fs_T1 { font-size: 16px !important; }
    .se_component .se_fs_T2 { font-size: 15px !important; }
    .se_component .se_fs_T3 { font-size: 13px !important; }

    .inner { padding: 0 15px; }
    .sub_intro_container .right .img img.about01 { width: 100%; }

    .sub_tit .inner p { font-size: 16px; }
    .sub_tit { padding-top: 0; font-size: 16px; }
    .sub_tit.about { padding-top: 15px; }

    .line_tit .tit { font-size: 16px; }

    .sub_visual .visual_inner .sub_detail { padding-top: 85px !important; }

    .sub_intro_container.port .strong { font-size: 38px; }

    .sub_quick_menu { display: none; }

    .strong { font-size: 30px; }
    .strong span { line-height: 1.3; }
    .sub_intro_container .sub_top .left { width: 100%; margin-bottom: 20px; }
    .sub_intro_container .left .txt_wrap strong { font-size: 16px; }
    .sub_intro_container .left .txt_wrap .txt { padding: 15px 0 20px; font-weight: 200; }
    .sub_intro_container .left .txt_wrap .txt span { display: block; line-height: 1.8; font-size: 14px; word-break: keep-all; }

    .sub_intro_container .left .txt_wrap .txt.about span { display: inline; }

    .sub_tab_wrap { width: 91%; margin: 0 auto 15px; justify-content: flex-start; overflow: auto; white-space: nowrap; padding: 30px 0px 15px; }
    .sub_tab_wrap::-webkit-scrollbar{ display: none; }
    .sub_tab_wrap .sub_tab { font-size: 15px; }
    .sub_tab_wrap .sub_tab:nth-of-type(2) { margin: 0 25px; }
    .series_container .sub_content_tit { font-size: 16px; }

    .series_container .service_box { width: calc(100%/2 - 8px); height: calc(100%/2); margin-bottom: 15px; border-radius: 15px; }
    .series_container .service_box .service_tag { bottom: 10px; font-size: 13px; }


    .about_culture_container .sub_content_tit { font-size: 17px; }
    .about_culture_container .culture_wrap { align-items: flex-start; }
    .about_culture_container .culture_wrap .tit { font-size: 15px; }
    .about_culture_container .culture_wrap .desc { font-size: 13px; }
    .about_culture_container .culture_wrap { flex-wrap: wrap; }
    .about_culture_container .culture_wrap .culture { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: calc(100%/2 - 20px); margin: 15px 10px; }
    .about_culture_container .inner_txt { font-size: 14px; font-weight: 200; margin: 70px 0 30px; }

    .move_text_box { margin-top: 30px; margin-bottom: -60px; }

    .about_vision_container .vision_contents .vision { width: 100%; }

    .about_mean_container { padding: 70px 0; }
    .about_mean_container .mean_txt { font-size: 15px; }
    .about_mean_container .mean_txt p.top { margin-bottom: 20px; }
    .about_mean_container .mean_txt p.top span { display: block; }
    .about_mean_container .logo_wrap .img { width: 60%; }
    .about_mean_container .logo_wrap .inner_txt_wrap { width: 80%; margin: 30px auto 0; }
    .about_mean_container .middle_txt { font-size: 20px; }
    .about_mean_container .logo_wrap .inner_txt_wrap .inner_txt .inner_desc { font-size: 13px; font-weight: 600; }

    .about_vision_container { padding: 90px 0 20px; }
    .about_vision_container .vision_contents { padding-bottom: 0; }
    .about_vision_container .vision_contents .vision .circle { width: 80px; height: 80px; }
    .about_vision_container .vision_contents .vision .circle img { width: 35%; height: 35%; }
    .about_vision_container .vision_contents .vision .tit { font-size: 15px; }
    .about_vision_container .vision_contents .vision .desc { font-size: 13px; }
    .about_vision_container .vision_contents .vision .txt_wrap span { font-size: 13px; line-height: 1.8; }

    .sns_container { padding: 100px 0; }

    .sub_intro_container.img { padding-bottom: 26%; }
    .sub_top_img { margin-top: -16%; }

    .story .story_list { padding-top: 40px; }
    .story_img { padding-top: 75% !important; }
    .daily_img { padding-top: 88% !important; }

    .series_container { padding: 80px 0 100px; }
    .series_container .sub_content_tit { padding-top: 0; padding-bottom: 20px; }

    /*스토리 뷰*/
    .list_view_container .text_box { margin-bottom: 15px; }
    .list_view_container .badge { background-color: #a87e6e; padding: 5px 10px; border-radius: 30px; color: #fff; font-size: 14px; }
    .list_view_container .text { font-size: 14px; font-weight: 500; }
    .list_view_container h1 { color: #000 !important; padding: 0 15px}
    .list_tit { font-size: 22px; }
    .story_view_tit .tit { font-size: 16px; }

    .contact .request_form .sub_detail { font-size: 25px; }
    .contact .request_form .sub_detail > strong { font-size: 25px; }
    .contact .request_form .request_info .request_tit { font-size: 15px; margin-bottom: 30px; line-height: 1.5; }
    .contact .request_form .sub_desc { font-size: 13px; line-height: 1.3; }
    .contact .request_form .sub_desc span { display: block; }
    .contact .request_form .request_info .request_section { padding: 20px 0; }
    .contact .agreement { margin: 30px 0 50px; }

    .bg_area.family { margin-top: 100px; }

    .btn_type { margin-bottom: 80px; }

    .portfolio_top_sub .portfolioIn { width: 91% !important; }
    .portfolio_top_sub.portfolio_top .more { width: 91%; margin-bottom: 50px; }


    .port_solution_container { padding: 40px 0 20px; }
    .port_solution_container { padding-bottom: 0; }
    .port_solution_container .vision { width: 100%; margin: 0 0 70px; padding-bottom: 70px; border-bottom: 1px solid #d8cac2; }
    .port_solution_container .vision:nth-of-type(5),
    .port_solution_container .vision:nth-of-type(6) { margin-bottom: 70px; }
    .port_solution_container .vision .circle { width: 80px; height: 80px; }
    .port_solution_container .vision .circle i { font-size: 30px; }
    .port_solution_container .vision .tit { font-size: 15px; text-align: center; }
    .port_solution_container .vision .desc { font-size: 13px; }
    .port_solution_container .vision .txt_container { width: 100%; margin: auto; }
    .port_solution_container .vision .txt_wrap span { font-size: 13px; line-height: 1.8; text-indent: -0.8em; padding-left: 1.6em; }
    .port_solution_container .vision .txt_wrap span br.inner { display: none; }
    .port_solution_container .vision .ico_wrap { margin-right: 0; margin: auto; }

    .port_solution_container .vision .desc span { display: inline; }
    .port_solution_container .vision .txt_wrap span.inner { display: inline; padding-left: 0; padding-right: 0; }

    .list_view_share a {width: 40px; height: 40px; margin: 20px 10px 15px}
    .list_view_share a i {font-size: 16px}
    .list_view_share a .img{width: 16px; height: 16px;}
    .list_view_share .inner {width: auto}

}

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

}















/*오스카 포트폴리오*/
.oska-video-1 {
    text-align:center;
    background:#fff;
    padding: 160px 0 250px;
}
.oska-video-1 video, .oska-video-1 canvas {
    max-width:70%;
    -webkit-filter: contrast(101%);
    filter: contrast(101%);
    background:#fff;
    outline: unset;
    border: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.oska-vdo-2 {
    text-align: center;
    overflow:hidden;
    background:#1e2c4c;
    padding: 65px 0;
}
.oska-vdo-2 video, .oska-vdo-2 canvas {
    max-width:70%;
    position:relative;
}

@media(max-width:1200px){
    .oska-video-1 {
        padding: 60px 0 200px;
    }
    .oska-video-1 video, .oska-video-1 canvas {
        max-width: calc(100% - 168px);
    }
}
@media(max-width:800px){
    .oska-video-1 video, .oska-video-1 canvas {
        max-width: 100%;
    }
    .oska-vdo-2 video, .oska-vdo-2 canvas {
        max-width: 100%;
    }
}



/* 버드온 포트폴리오 */
.budon-vdo-1 {
    font-size: 0;
}
.budon-vdo-1 video {
    width: 100%;
}
.budon-vdo-1 canvas {
    width: 100%;
}
@media screen and (max-width: 800px) {
    .portfolio_view > div.budon-vdo-1 {
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* 코딩캠퍼스 포트폴리오 */
.coding-video-1 {
    text-align:center;
    background:#fff;
    padding: 160px 0 160px;
}
.coding-video-1 video, .coding-video-1 canvas {
    max-width:70%;
    -webkit-filter: contrast(101%);
    filter: contrast(101%);
    background:#fff;
    outline: unset;
    border: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.coding-video-1-pc {

}
.coding-video-1-mo {
    display:none;
}

.coding-video-2 {
    text-align:center;
    background:#fff;
    padding:0 0 250px;
}

.coding-video-2 video, .coding-video-2 canvas {
    width:950px;
    max-width:70%;
    -webkit-filter: contrast(101%);
    filter: contrast(101%);
    background:#fff;
    outline: unset;
    border: none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
.coding-video-2-pc {

}
.coding-video-2-mo {
    display:none;
}
@media(max-width:1200px){
    .coding-video-1 {
        padding: 60px 0 200px;
    }
    .coding-video-1 video, .coding-video-1 canvas {
        max-width: calc(100% - 168px);
    }
    .coding-video-1-pc {
        display:none;
    }
    .coding-video-1-mo {
        display:inline-block;
    }
    .coding-video-2-pc {
        display:none;
    }
    .coding-video-2-mo {
        display:inline-block;
    }
}
@media(max-width:800px){
    .coding-video-1 video, .coding-video-1 canvas {
        max-width: 100%;
    }
    .coding-video-2 video, .coding-video-2 canvas {
        max-width: 100%;
    }

    .portfolio_view > div.coding-video-2 { padding: 0 20px 20px 20px !important; }
}


/*경기도 어린이 박물관 포트폴리오*/
.gcm-1 {
    background:rgb(255, 240, 138);
    text-align: center;
    position:relative;
}
.gcm-1-in {
    max-width:1136px;
    width:100%;
    padding:0 50px;
    margin:0 auto;
    position:relative;
    box-sizing: border-box;
}
.gcm-1-slide-wrap {
    position: absolute;
    left: 50%;
    top: 5.3%;
    transform: translate(-50%, 0);
    width: 37.5%;
    overflow: hidden;
    box-shadow: 7px 3px 18px 2px rgba(0, 0, 0, 0.2);
    font-size: 0;
}
.gcm-1-slide {
    position: absolute;
    left: 50%;
    top:9.3%;
    width: calc(100% + 2px);
    transform: translate(-50%, 0);
}
.gcm-1-slide img {
    width:100%;
}
.gcm-1 .swiper-pagination {
    top: calc(36% + 42px);
    left: 50%;
    transform: translate(-50%, 0);
    display:none;
}
.gcm-1 .swiper-pagination .swiper-pagination-bullet {
    background: #c2c2c2;
    margin: 0 10px;
}
.gcm-1 .swiper-pagination .swiper-pagination-bullet-active {
    background: #838382;
}
@media(max-width:800px){
    .gcm-1-in {
        padding: 0;
    }
    .gcm-1 .swiper-pagination {
        top:35%;
    }
    .gcm-1 .swiper-pagination .swiper-pagination-bullet {
        margin: 0 5px;
        width: 7px;
        height: 7px;
    }
    .gcm-1-slide-wrap {
        box-shadow: 3px 3px 9px 1px rgba(0, 0, 0, 0.1);
    }

}

/*경기도 북부 어린이 박물관 포트폴리오*/
.ngcm-1 {
    margin-bottom: 200px;
    background:rgb(246, 233, 218);
    text-align: center;
    position:relative;
}
.ngcm-1-in {
    max-width:1136px;
    width:100%;
    padding:0 50px;
    margin:0 auto;
    position:relative;
    box-sizing: border-box;
}
.ngcm-1-slide-wrap {
    position: absolute;
    right:calc(50px + 2.1%);
    top: 3.3%;
    transform: translate(0, 0);
    width: 37.5%;
    overflow: hidden;
    box-shadow: 7px 3px 18px 2px rgba(0, 0, 0, 0.2);
    font-size: 0;
}
.ngcm-1-slide {
    position: absolute;
    left: 50%;
    top:9.3%;
    width: calc(100% + 2px);
    transform: translate(-50%, 0);
}
.ngcm-1-slide img {
    width:100%;
}
.ngcm-1 .swiper-pagination {
    top: calc(36% + 42px);
    left: 50%;
    transform: translate(-50%, 0);
    display:none;
}
.ngcm-1 .swiper-pagination .swiper-pagination-bullet {
    background: #c2c2c2;
    margin: 0 10px;
}
.ngcm-1 .swiper-pagination .swiper-pagination-bullet-active {
    background: #838382;
}
@media(max-width:800px){
    .ngcm-1{
        margin-bottom: 60px;
    }
    .ngcm-1-in {
        padding: 0;
    }
    .ngcm-1 .swiper-pagination {
        top:35%;
    }
    .ngcm-1 .swiper-pagination .swiper-pagination-bullet {
        margin: 0 5px;
        width: 7px;
        height: 7px;
    }
    .ngcm-1-slide-wrap {
        box-shadow: 3px 3px 9px 1px rgba(0, 0, 0, 0.1);
        right: 2.1%;
    }

}

/*메디람 포트폴리오*/

.mo-only.mediram{ display:none !important; font-size:0;}
.mediram.pc-only{font-size:0}

@media(max-width:800px){
    .mediram.pc-only{display:none !important;}
    .mediram.mo-only{display:block !important; padding:0 !important}
}



/*JA코리아 포트폴리오*/
.ja-1 {
    width:1070px;
    max-width:100%;
    margin: 0 auto;
    padding-bottom:250px;
    box-sizing:border-box;
}
.ja-1-top {
    width:100%;
}
.ja-1-top img {
    width:100%;
}
.ja-1-btm {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ja-1-vdo {
    font-size:0;
    width:100%;
    position:relative;
}
.ja-1-vdo video, .ja-1-vdo canvas {
    width:100%;
}
.ja-1-invite {
    font-size:0;
    width:100%;
}
.ja-1-invite img {
    width:100%;
}



/*알츠온 공통*/
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}


.alzon .alzon_con_wrap { width: 80%; margin: auto }
.alzon .con { width: 90%; }
.alzon .con > img { width: 100%;}
.alzon .txt { font-family: 'Pretendard'; color: #fff; }
.alzon .txt .tit { font-size: 46px; font-weight: 800; line-height: 1.4; }
.alzon .txt .desc { display: inline-block; margin-top: 1.2vw;  }
.alzon .txt .desc span { display: block; line-height: 2; font-size: 18px; }

@media screen and (max-width: 1200px) {
    .alzon .alzon_con_wrap {width: 90%}
    .alzon .txt .tit { font-size: 40px; }
    .alzon .txt .desc span { font-size: 16px; word-break: keep-all; }
}

@media screen and (max-width: 1100px) {
    .alzon .txt .tit { font-size: 30px; }
    .alzon .txt .desc span { font-size: 14px; word-break: keep-all; display: inline }
}

@media screen and (max-width: 768px) {
    .story .story_list .list li .img_box .hover_box { font-size: 24px; }

    .story .sub_visual .sub_detail { padding-top: 85px; }
    .alzon_con_wrap { width: 90%; }
    .alzon .txt .tit { font-size: 24px; }
    .alzon .txt .desc span { display: inline; font-size: 13px; word-break: keep-all; line-height: 1.5; }
    .alzon .txt .desc {margin-top: 20px}

    .p_list a { padding: 12.5px 30px; font-size: 14px; }
    .p_list a i { font-size: 16px; }
}
@media screen and (max-width: 530px) {
    .alzon .txt .tit { font-size: 20px; }
}



/*양평아트*/

.yp_art .txt {color: #fff; text-align: center}
.yp_art .txt .tit { font-size: 36px; font-weight: 600; text-align: center; font-family: 'Noto Serif KR', serif; margin-top: max(1.3vw,15px); display: inline-block}
.yp_art .txt .tit span { display: block; }
.yp_art .txt .tit span.block { display: block !important; margin: max(0.9vw,10px) 0  max(0.9vw,15px); font-size: 22px; }
.yp_art .txt .desc { font-family: 'Pretendard'; font-size: 21px; font-weight: 400; text-align: center; color: #ccc; }
.yp_art .txt .desc span { display: block; line-height: 1.5; }



@media screen and (max-width: 1600px) {
    .yp_art .txt .tit { font-size: 30px; }
    .yp_art .txt .desc { font-size: 18px; }
}
@media screen and (max-width: 1300px) {
    .yp_art .txt .tit { font-size: 22px; }
    .yp_art .txt .tit span.block { font-size: 18px; }
    .yp_art .txt .desc { font-size: 14px; }

    .yp_art2 .yp_con_wrap { width: 93%; }
    .sec_bg.yp_art3 {}
}

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

    .portfolio_view > div.yp_art,
    .portfolio_view > div.yp_art.yp_art1 {padding: 0 !important;}
    .portfolio_view > div.yp_art.yp_art4 {padding-bottom: 50px !important}
}


@media screen and (max-width: 768px) {
    .yp_art .txt .tit { font-size: 18px !important; }
    .yp_art .txt .tit span { font-size: 18px !important; }
    .yp_art .txt .tit span.block { font-size: 14px; }
    .yp_art .txt .desc { font-size: 11px; }
    .yp_art .txt .desc span { font-size: 11px; }
}
@media screen and (max-width: 768px) {
    .yp_art .txt .tit span { font-size: 16px !important; }
    .yp_art .txt .tit span.block { font-size: 10px !important; }
    .yp_art .txt .desc span { font-size: 11px; }
}
@media screen and (max-width: 500px) {
    .yp_art .txt .desc { display: inline-block; padding: 0 15px; }
    .yp_art .txt .desc span { display: inline; }
}


/* 프레딧 */
.fredit_sect .move_text_box { margin-bottom: -40px; margin-top: 60px; }
.fredit_sect .move_text_box .text { display: flex;flex: 0 0 auto; white-space: nowrap; overflow: hidden; transition: 0.3s; font-size: 7vw; font-weight:800; color: #f4efec; }
.fredit_sect .move_text_box .text p { animation: textLoopFredit 50s linear infinite; padding-right: 20px; line-height: 1.3; color: #f4efec; cursor: default; }


@keyframes textLoopFredit {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}