@charset "utf-8";

.wrapper .container{ flex: 1 0 auto; }
.wrapper.main .container{ padding-top: 36px; }
.wrapper.login .container{ padding-top: 76px; }

.wrapper.login .container .page_login_wrap{ min-height: calc(100vh - 76px); }

/*=======공통(페이지)========*/

/*서브비주얼*/
.sub_visual_con { width: 100%; height: 180px; overflow: hidden; background-size: cover; background-position: bottom 1px center; background-repeat: no-repeat; margin-top: 63px; }
.sub_visual_con::before { content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_cover.png"); background-repeat: no-repeat; background-position: center  bottom; background-size: 141%; z-index: 2; pointer-events: none;}
.sub_visual_con::after  {content: ''; position: absolute; left: 50%; bottom: 1px; transform: translateX(-7%); width: 280px; aspect-ratio: 556/301; background-repeat: no-repeat; background-position: 0 0; pointer-events: none; background-size: cover;}
.page_menu1 .sub_visual_con { background-image: linear-gradient(to right, #ac98f1, #feb5c7);  }
.page_menu1 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu2.png");}
.page_menu2 .sub_visual_con { background-image: linear-gradient(to right, #f28d7b, #fec283); }
.page_menu2 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu1.png");}
.page_menu3 .sub_visual_con { background-image: linear-gradient(to right, #549bed, #4fd4f0); }
.page_menu3 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu3.png"); bottom: -5px; transform: scale(0.9) translateX(-7%);}
.page_menu4 .sub_visual_con { background-image: linear-gradient(to right, #a388eb, #69bdf8); }
.page_menu4 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu4.png");}
.page_menu5 .sub_visual_con { background-image: linear-gradient(to right, #fb83a0, #f6bda5); }
.page_menu5 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu5.png");}
.page_menu_mypage .sub_visual_con { background-image: linear-gradient(to right, #cb9ed8, #ffb0db); }
.page_menu_mypage .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu_mypage.png");}
.sub_visual_con .sub_visual_text { color: #fff; position: relative; top: 22px; left: 30px; }
.sub_visual_con .sub_visual_title { font-size: 27px; font-size: 2.7rem; line-height: 42px; line-height: 4.2rem; font-weight: 800; letter-spacing: -0.02em;}
.sub_visual_con .sub_visual_desc { font-size: 18px; font-size: 1.8rem; line-height: 24px; line-height: 2.4rem; font-weight: 300; margin-top: 5px; margin-left: 1px;}


@media all and (min-width:520px){
    .page_menu3 .sub_visual_con::after { background-image: url("/weven_data/rapahub/user_template/resource/img/sub_visual_menu3.png"); bottom: -1px; transform: scale(1) translateX(-7%);}
    .sub_visual_con {height: 301px;}
    .sub_visual_con::after{width: 500px;}

}
@media all and (min-width:768px){
    .sub_visual_con::after{width: 556px;}
    .sub_visual_con::before {background-size: 114%;}

}

@media all and (min-width:992px){
    .wrapper.main .container{ padding-top: 51px; }
    .wrapper.login .container{ padding-top: 85px; }
    .wrapper.login .container .page_login_wrap{ min-height: calc(100vh - 85px); }
    .sub_visual_con {height: 301px; margin-top: 77px;}
    .sub_visual_con::before{ background-size: cover;}
    .sub_visual_con::after  {transform: translateX(-20%);}
    .sub_visual_con .sub_visual_text{top: 65px; left: 100px; }
    .sub_visual_con .sub_visual_title { font-size: 36px; font-size: 3.6rem;}
    .sub_visual_con .sub_visual_desc {margin-top: 11px;}
}

@media all and (min-width:1200px){

    /*=======공통========*/

    /*서브비주얼*/
    .page_menu3 .sub_visual_con::after { transform: scale(1) translateX(-50%);}
    .sub_visual_con::after{transform: translateX(-50%);}
    .sub_visual_con .sub_visual_text{ left: calc(50% - 580px); }


}

@media all and (min-width:1600px){

    /*=======공통========*/

    /*서브비주얼*/
    .sub_visual_con .sub_visual_text{ left: calc(50% - 673px); }


}