@charset "UTF-8";
@import "./default.css";/*공통으로 사용될 css를 보관함*/

/*서브페이지 상단 공통*/
#sub-top {position:relative;display:flex;flex-flow:column;justify-content:flex-end;min-height:560px;height:560px;background:url(./img/sub_top_bg.png) no-repeat center / cover;transform: scale(1.2);opacity:0;transition: all 4s;}
#sub-top.on {transform:scale(1);opacity:1;}
#sub-top:before,
#sub-top:after {
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: rgba(255,255,255,0.3);
    z-index: 5;
}

#sub-top.on:before {animation: move_blind 2s;animation-fill-mode: forwards;}
#sub-top.on:after {animation: move_blind 2s;animation-fill-mode: forwards;animation-delay: .5s;}

@keyframes move_blind {
    0% {width: 100%; background: rgba(255,255,255,0.3);}
    100% {width: 0;background: rgba(255,255,255,0);}
}

#sub-top .sub-title {position:absolute;left:50%;top:55%;transform:translate(-50%, -50%);width:100%;text-align: center;}
#sub-top .sub-title h1 {font-size:68px;letter-spacing:-0.5px;color:#fff; font-family:'GimhaeGayaB';}

#sub-wr .section-tit {max-width:1644px;text-align: center;margin:120px auto 56px;}
#sub-wr .section-tit h1 {font-family:'GimhaeGayaB';font-size:52px; letter-spacing: -3px; line-height: 62px; word-break: keep-all;}
#sub-wr .section-tit p {font-size:16px;color:#333333;margin:24px 0 0 0; letter-spacing: -0.5px;}
#sub-wr .section-tit p img{position: relative; top: -1px;}

#sub-wr .sub2_tab{height: 80px; text-align: center;}
#sub-wr .sub2_tab .tab_menu{width: 100%; max-width: 1644px; display: block; font-size: 0; margin: 0 auto;}
#sub-wr .sub2_tab .tab_menu li:first-child{margin-left: 0;}
#sub-wr .sub2_tab .tab_menu li{width: 20%; display: inline-block; border: 1px solid #DDDDDD; height: 80px; margin-left: -1px;}
#sub-wr .sub2_tab .tab_menu li a{display: flex;height:100%;align-items:center;justify-content:center;text-align: center;font-size: 18px;word-break: keep-all; line-height: 28px;}
#sub-wr .sub2_tab .tab_menu li.on{background: transparent linear-gradient(108deg, #1B3C8B 0%, var(--unnamed-color-534491) 100%) 0% 0% no-repeat padding-box; background: transparent linear-gradient(108deg, #1B3C8B 0%, #534491 100%) 0% 0% no-repeat padding-box;}
#sub-wr .sub2_tab .tab_menu li.on a{color: #fff;}

.pc_view{display: block;}
.t_view{display: none;}
.m_view{display: none;}


@media (max-width:768px) {
    #sub-top {min-height: 360px; height: 360px;}
    #sub-top .sub-title {}
    #sub-top .sub-title h1 {font-size:36px;}
    #sub-wr .sub_tab{padding: 0 40px;}

    .pc_view{display: none;}
    .t_view{display: block;}
    .m_view{display: none;}
}

@media (max-width:500px) {
    #sub-top {min-height: 264px; height: 264px;}
    #sub-top .sub-title h1{font-size: 32px;}
    #sub-wr .section-tit{margin: 80px auto 64px;}
    #sub-wr .section-tit h1{font-size: 32px; line-height: 42px;}
    #sub-wr .section-tit p{font-size: 14px;}

    #sub-wr .sub2_tab{height: 51px; padding: 0;}
    #sub-wr .sub2_tab .tab_menu li{height: 51px;}
    #sub-wr .sub2_tab .tab_menu li a{font-size: 16px; line-height: 26px;}

    .pc_view{display: none;}
    .t_view{display: none;}
    .m_view{display: block;}

}

/* 서브페이지 컨텐츠 공통 */
#sub-wr{}
#sub-wr .section .section-con {max-width:1644px; margin:120px auto 200px;}

@media (max-width: 1400px) {
    #sub-wr{padding: 0 40px;}
}

@media (max-width: 768px) {

}

@media (max-width: 500px) {
    #sub-wr{padding: 0 16px;}
    #sub-wr .section .section-con{margin: 64px auto;}
}


/*menu10*/
.sub20-30 .platform_con h2{font-size: 42px; margin-bottom: 32px; line-height: 52px;}
.sub20-30 .platform_box img{width: 100%;}

.platform_viewbox01{position: absolute; top: 31%; right: 22%; transform: translate(-50%, -50%);}
.platform_viewbox01 img{max-width: 166px;}
.platform_viewbox02{position: absolute; top: 46%; right: 1%; transform: translate(-50%, -50%);}
.platform_viewbox02 img{max-width: 221px;}
.platform_viewbox03{position: absolute; top: 66%; right: 25%; transform: translate(-50%, -50%);}
.platform_viewbox03 img{max-width: 136px;}
.platform_viewbox04{position: absolute; bottom: 28%; right: 13%; transform: translate(-50%, -50%);}
.platform_viewbox04 img{max-width: 136px;}
.platform_viewbox05{position: absolute; top: 27%; right: -4%; transform: translate(-50%, -50%);}
.platform_viewbox05 img{max-width: 304px;}

.sub20-30 .platform_img{margin: 80px 0; }
.sub20-30 .platform_img .imgbox{display: inline-block; width: calc(16.666666% - 23px); margin-right: 24px; vertical-align: top; margin-bottom: 24px;}
.sub20-30 .platform_img .imgbox:nth-child(6){margin-right: 0;}
.sub20-30 .platform_img .imgbox:last-child{margin-right: 0;}
.sub20-30 .platform_img .imgbox img{width: 100%;}
.sub20-30 .platform_img .imgbox p{font-size: 18px; line-height: 28px; text-align: center; margin-top: 16px;}

.sub20-30 .platform_con .bullet_list li{font-size: 18px; line-height: 28px; list-style: none; position: relative; padding-left: 11px; padding-bottom: 10px;}
.sub20-30 .platform_con .bullet_list li:after{
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: #1D3D8C;
}
.sub20-30 .platform_txt{margin-bottom: 120px;}

.sub20-30 .process_con{background:url(./img/sub2_3_bgimg.png) no-repeat center / cover; width: 100%; padding: 120px 40px;}
.sub20-30 .process_con h2{color: #fff; font-size: 42px; line-height: 52px; text-align: center; margin-bottom: 80px;}
.sub20-30 .process_box .box{display: inline-block; width: calc(16.666666% - 9px); margin-right: 8px; background: #fff; border-radius: 0px 16px 16px 16px; height: 240px; text-align: center; position: relative; vertical-align: top; padding: 0 44px;}
.sub20-30 .process_box .box:last-child{margin-right: 0;}
.sub20-30 .process_box .box h3{font-size: 20px; padding: 0 0 25px 0; line-height: 30px; letter-spacing: -2px;}
.sub20-30 .process_box .box p{font-size: 16px; line-height: 26px; color: #888888; letter-spacing: -1px;}
.sub20-30 .process_box .box .arrow_img{position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
.sub20-30 .process_box .box .txt{position: relative; top: 50%; transform:translateY(-50%);}

@media (max-width:768px) {
    .sub20-30 .platform_img .imgbox{display: inline-block; width: calc(33.333333% - 15px); margin-right: 20px; vertical-align: top; }
    .sub20-30 .platform_img .imgbox:nth-child(3n){margin-right: 0;}
    .sub20-30 .platform_txt{margin-bottom: 80px;}
    .sub20-30 .process_box .box{width: calc(50% - 12px); margin-right: 20px; padding: 0 25px; margin-bottom: 32px;}
    .sub20-30 .process_box .box:nth-child(2n){margin-right: 0}
    .sub20-30 .process_con h2{margin-bottom: 40px;}
    .sub20-30 .process_con{padding: 80px;}
}

@media (max-width: 500px){
    .sub20-30 .platform_con h2{font-size: 28px; margin-bottom: 24px; line-height: 36px;}
    .sub20-30 .platform_img .imgbox p{font-size: 16px; line-height: 26px; }
    .sub20-30 .platform_img .imgbox{margin-bottom: 16px; width: calc(33.333333% - 11px); margin-right: 13px;}
    .sub20-30 .platform_img{margin: 64px 0;}
    .sub20-30 .process_con{padding: 64px;}
    .sub20-30 .platform_con .bullet_list li{font-size: 16px; line-height: 26px; padding-bottom: 8px;}
    .sub20-30 .process_con h2{font-size: 28px; margin-bottom: 32px;}
    .sub20-30 .process_con{padding: 64px 40px;}
    .sub20-30 .process_box .box h3{font-size: 18px; line-height: 28px;}
    .sub20-30 .process_box .box p{font-size: 14px; line-height: 24px;}
}