/* 전체 */
.wrap{
    width:1080px;
    margin:0 auto;
}

.notScroll {overflow: hidden ;width: 100%;height: 100% ;touch-action:none;}

.header{
    position:relative;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
    background:#fff;
    box-shadow:rgba(0,0,0,0.2)0px 0px 3px 1px;
}

.header>.wrap{
    display:flex;
    justify-content: space-between;
    align-items:center;
    height:70px;
}

.logo{
    width:20%
}

.nav{
    display:flex;
    align-items:center;
    width:60%;
    line-height:70px;
}


.nav>li{
    width:25%;
    font-size:20px;
    font-weight:800;
    text-align:center;
    box-sizing:border-box;
}

.nav>li>a{
    transition:all 0.3s;
    display:inline;
    padding:0px 30px
}

.nav>li>a:hover{
    color:#f0512c;
}

.nav>li.active>a{
    color:#f0512c
}

.group{
    position:absolute;
    z-index:11;
    width:100%;
    top:70px;
    left:0;
    height:auto;
    background:#fff;
    box-shadow:rgba(0,0,0,0.2)0px 2px 3px;
    display: none;
}

.group>.wrap{
    display:flex;
    justify-content:space-between;
}

.group .img{
    width:30%;
    height:280px;
    margin-right:35px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sub{
    width:60%;
    display:flex;
    flex-wrap:wrap;
    height:280px;
    flex-direction:column;
    align-content: flex-start;
    padding:10px 0px;
    padding-top:30px;
    box-sizing:border-box;
    padding-left:30px
}

.sub>li{
    width:35%;
    text-align:left;
    font-size:18px;
    font-weight:500;
    line-height:50px;
}

.sub>li>a{
    transition:all 0.3s;

}

.sub>li>a:hover{
    font-weight:800;
}


li.active>a{
    color:#f0512c;
}

.group_right{width:60%; display:flex; flex-wrap: wrap; padding-bottom:30px}
.group3 .wrap{flex-wrap:wrap;}
.group3 .g_sub_wrap{width:55%}
.group3 .sub{width:100%;flex-direction: row; padding-left:0; height:auto;}
.group3 .sub li{width:100%; text-align:left; height:40px; font-size:16px;}
.group3 .solution1 {width:45%}
.group3 .solution1 li{width:100%}
.group3 .sub li.sub_title{width:100%; font-weight:bold; font-size:22px; }
.group3 .solution1 .sub_title{margin-bottom:10px}



/* 네비게이션 */
.navigation{    
    padding-top:70px;
}

.navigation_list{
    display:flex;
    align-items:center;
    height:35px;
    line-height:35px;;
}

.navigation_list li{
    width:auto;
    display:flex;
    align-items:center;
    font-weight:500;
    position:relative;
    margin-right:30px;
}

.navigation_list li::after{
    content:"";
    position:absolute;
    right:-22px;
    top:12px;
    display:inline-block;
    background:url(../imgs/main/next_arr.png)no-repeat;
    width:12px;
    height:10px;
    background-size:contain;
}

.navigation_list li:last-child::after{
    display:none;
}

/* footer */
.footer{
    width:100%;
    background:#f7f7f7;
}

.f_top .wrap{
    display: flex;
    align-items:center;
    height:100%;
}

.f_top{
    height:70px;
    width:100%;
    box-shadow:rgba(0,0,0,0.1)0px 1px 3px;
}

.f_logo{
    width:20%;
}

.f_menu{
    width:80%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.f_privacy{
    display: flex;
    align-items:center;
}

.f_privacy a:first-child{
    font-weight:bold;
}

.f_privacy span{
    padding:0px 7px;
}

.f_menu p span{
    color:#f0512c;
    font-weight:bold;
}

.f_bottom{
    font-size:14px;
    padding:10px 0px;
}

.f_bottom a{
    display:inline;
}

.f_menu br{
    display: none;
}

.f_call span{
    color:#f0512c;
    font-weight:bold;
}

.f_info_list{
    width:90%;
    display:flex;
    align-items:center; 
    justify-content: center;
    flex-wrap: wrap;
    margin:0 auto;
}

.f_info_list li{
    padding-right:10px;
    word-break: keep-all;
}

.f_bottom .m_f_info{display:none;}



/* top_btn */
.top_btn22{
	display:none;
    position: fixed;
    bottom: 220px; 
    right:5%; 
    cursor: pointer;
    width:50px;
    height:50px;;
}

.top_btn22 img{
    width:100%;
}

@media all and (min-width:768px) and (max-width:1023px) {
	.top_btn22{
	    bottom: 300px;
        right:20px;
	}
}

@media all and (max-width:767px) {
	.top_btn22{
	    bottom: 340px;
        width:40px;
        height:40px; 
	}
}







/* quick_menu */
.quick_menu{
    position:fixed;
    right:2%;
    bottom:50px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    z-index:90
}

.quick_menu li{
    margin-bottom:10px;
}

.quick_menu li a{
    width:67px;
    height:67px;
    border-radius:200px;
}

.question_btn{
    background:#542c82 url(../imgs/solution/w_quick_icon.png)no-repeat center center;
    color:#fff;
    font-weight:bold;
    line-height:24px;
    font-size:20px;
}

.question_btn p{
    display:none;
}

.top_btn{
    background:#f0f0f0;
    padding:12px 10px; 
    box-sizing: border-box;
    border:solid #fff 1px;
    transition:all 0.3s;
}


@media all and (min-width:1024px){
    .question_btn:hover{background:#542c82 url(../imgs/solution/w_quick_icon.png)no-repeat 91.5% center;width:170px !important; box-sizing:border-box; padding:10px 30px; text-align:left;}
    .question_btn:hover p{  display:block;}
    .blog_btn:hover{background:#2cb24a url(../imgs/solution/blog_icon.png)no-repeat 92% 55%; background-size:47px;; width:170px !important; box-sizing:border-box; padding:10px 30px; text-align:left;}
    .blog_btn:hover p{ display:block;}
    .top_btn:hover{animation: topmove 0.7s infinite}

    @keyframes topmove {
        0%{padding-top:12px}
        100%{padding-top:9px}
    }

    .m_btn{display:none;}
    .m_area{display:none}
    
}

@media all and (min-width:1024px) and (max-width:1600px){
    .quick_menu{right:30px;}
}

@media all and (min-width:1024px) and (max-width:1300px) {
    .quick_menu{bottom:180px}
}

@media all and (min-width:768px) and (max-width:1023px) {
    .quick_menu{right:10px; bottom:30px}
    .quick_menu li a {width:55px; height:55px;}
    .question_btn {background-size:38px}
    .blog_btn{background-size:40px !important;}
    .top_btn img{width:100%;}
}

@media all and (max-width:767px) {
    .quick_menu{right:5px; bottom:90px}
    .quick_menu li{margin-bottom:6px;}
    .quick_menu li a {width:50px; height:50px;}
    .question_btn {background-size:30px}
    .blog_btn{background-size:36px !important;}
    .top_btn img{width:100%;}
}



/* 모바일 메뉴 */
.m_area{width:100%; position:fixed; left:0; top:0; background:#fff; z-index:500; height:100%; display:flex;}
.m_area .close_btn{position:absolute; z-index:600;right:15px; top:15px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:10px;}
.m_area .close_btn img{width:100%;}

.m_menu{width:25%; background:#542c82; color:#fff;}
.m_menu>li:first-child{padding-top:15px}
.m_menu>li{line-height:70px; text-align:center; font-size:18px; font-weight:bold; cursor:pointer;;margin-bottom:10px}
.m_menu>li:last-child{position:absolute; bottom:0; left:0; width:25%}
.m_menu>li.active{background:#3b1b5f; color:#fff !important}

.mm_sub{position:absolute; left:25%; top:0; color:#000; box-sizing:border-box; padding-left:35px; padding-top:25px}
.mm_sub li{line-height:22px; padding:15px 0px; font-size:16px; font-weight:normal; text-align:left;}
.mm_sub li.mmsub_title{font-size:18px; font-weight:bold;}
.mm_sub3 li{padding:15px 20px}
.mm_sub3 li:first-child{margin-top:0; padding-top:25px}
.mm_sub3 .mmsub_title{margin-top:30px; background:#f0f0f0}
.mm_sub li.active{font-weight:bold; }


@media all and (min-width:1080px){
    .hide_br{display:none;}
    .m_area{display:none !important;}
}


/* PC (해상도 1024px)*/ 
@media all and (min-width:1024px) and (max-width:1079px) {
    .wrap{width:90%; margin:0 auto; }
    .hide_br{display:none;}
    .m_area{display:none !important;}
    .nav>li>a{padding:0px 20px}
    .group3 .sub li{font-size:16px; white-space:nowrap;}
} 
  
/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (min-width:768px) and (max-width:1023px) {
    .wrap{width:728px;}
    .header>.wrap{height:50px;}
    .logo img{width:110px;}

    .nav,.group{display:none;}
    .m_btn{display:block; margin-top:2px; padding:10px; position:relative; left:10px;}

    .navigation{padding-top:50px;}
    .navigation_list{height:30px; line-height:30px;;}
    .navigation_list li{ font-size:14px; margin-right:20px}
    .navigation_list li::after{top:11px; right:-18px; height:8px;}
    .navigation_list li:first-child img{width:13px}

    
    .f_top .wrap{flex-direction:column;justify-content:center;}
    .f_top{ height:155px; box-shadow:none}
    .f_logo{ height:70px;}
    .f_bottom{ text-align:center; width:100%; font-size:13px;}
    .f_bottom .hide_br:nth-of-type(1){display: none;}
    .f_bottom .hide_br:nth-of-type(3){display: none;}
    .f_bottom span{display:none}
    .f_menu {flex-direction:column; width:100%}
    .f_call{margin-top:10px}
    .f_bottom p{display:none;}
    .f_bottom .m_f_info{display:block;}

    .top_btn{right:5%; bottom:20%; width:40px; height:40px;;}
    .mm_sub3{padding:0px; width:100%}
    .mm_sub3 li{padding:15px 20px}
    .mm_sub3 li:first-child{margin-top:0; padding-top:25px}
    .mm_sub3 .mmsub_title{margin-top:20px; background:#f0f0f0}/*240715*/

} 
  


/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    body{font-size:14px; height:100%;}
    .wrap{width:90%; margin:0 auto;}
    .header>.wrap{height:40px;}
    .logo img{width:80px;}
    .nav,.group{display:none;}
    .m_btn{display:block; margin-top:2px; padding:10px; position:relative; left:10px;}

    .m_menu{width:35%}
    .m_menu>li:first-child{padding-top:5px}
    .m_menu>li:last-child{width:35%}
    .mm_sub{left:35%; padding-right:20px; padding-top:18px}
    .mm_sub li{padding:12px 0px}
    .mm_sub3{padding:0; width:100%}
    .mm_sub3 li{padding:15px 20px}
    .mm_sub3 li:first-child{margin-top:0; padding-top:25px}
    .mm_sub3 .mmsub_title{margin-top:10px; background:#f0f0f0}/*240715*/

    .navigation{padding-top:40px; display:none}
    .navigation_list{height:25px; line-height:25px;;}
    .navigation_list li{ font-size:14px; margin-right:20px}
    .navigation_list li::after{top:8px; right:-19px; height:8px;}
    .navigation_list li:first-child img{width:12px}

    .f_top .wrap{flex-direction:column;justify-content:center;}
    .f_top{ height:140px; box-shadow:none}
    .f_menu{flex-direction:column; width:100%; text-align: center; word-break:keep-all;}
    .f_call{margin-top:10px}
    .f_logo{ height:70px; display:flex;align-items:center; justify-content:center;}
    .f_bottom{ text-align:center; width:100%;font-size:12px;;}
    .f_bottom span{display:none}
    .f_bottom p{display:none;}
    .f_bottom .m_f_info{display:block;}

    .top_btn{right:5%; bottom:15%; width:35px; height:35px;;}
    
}

@media all and (max-width:480px) {
    .m_menu>li {line-height:60px;}
    .m_menu>li:last-child{margin-bottom:0px}
    .m_menu>li:last-child img{width:80%}
    .mm_sub{padding-top:13px; padding-left:20px}
    .mm_sub li {padding:8px 0px; font-size:14px;;}
    .mm_sub3 li.mmsub_title{font-size:16px; margin-top:20px}
    .mm_sub3{padding:0; width:65%}
    .mm_sub3 li{padding:8px 15px}
    .mm_sub3 li:first-child{margin-top:0; padding-top:25px;}

    .m_area .close_btn{right:9px; top:10px;width:36px; height:36px;}
}

@media all and (max-width:345px) {
    .f_menu{width:100%}
}

.scrollLock { overflow: hidden; }


.nav .group1{height:320px !important;}
.group1 .wrap .img{width:auto; overflow:hidden; margin-top:20px }
.group1 .wrap img{height:245px;}
.group1 .sub{padding-left:0}

.blog_btn{
    background:#2cb24a url(../imgs/solution/blog_icon.png)no-repeat center 55%;
    background-size:47px;
    color:#fff;
    font-weight:bold;
    line-height:24px;
    font-size:20px;
}

.blog_btn p{
    display:none;
}