.menu_on{overflow: hidden;}

/* PC 헤드 */
.pc_hd{display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; height: 10rem; background: #fff; z-index: 100; width: 100%; padding: 0 4rem; padding-right: 6rem;}
.pc_hd.on{background: #040b12; border-bottom: 1px solid rgba(255,255,255,0.08); }
.logo{flex-shrink: 0; display: block;}
.pc_hd .logo img{display:block; height: 2.8rem; width:auto;}
.pc_hd.on .logo img{filter: brightness(0) invert(1);}

/* 모바일 헤드 */
.m_hd{display: none; align-items: center; justify-content: space-between; width: 100%; height: 5rem; padding: 0 2rem; position: fixed; top: 0; left: 0; background: #fff; z-index: 100;}
.m_hd .logo img{display:block; height: 2.1rem; width:auto;}

/* PC 메뉴 */
.pc_hd .menu{display: flex; height: 100%;}
.pc_hd .menu li{position: relative; height: 100%;}
.pc_hd .menu .menu_1{font-family: 'Poppins', sans-serif; font-size: 2rem; color: #1D1D1D; font-weight: 700; padding: 0 5.5rem; height: 100%; display: flex; align-items: center;}
.pc_hd .menu .menu_1:hover{color: var(--brand-primary);}
.pc_hd .menu .act .menu_1 {color: var(--brand-primary);}
.pc_hd.on .menu .menu_1{color: #fff;}
.pc_hd.on .menu .act .menu_1{color:  var(--brand-primary);}
.pc_hd.on .menu .menu_1:hover{color: var(--main);}
.pc_hd .menu2_ul{display: none; position: absolute; top: /* calc(100% - 1rem) */ 90%; left: 50%; transform: translateX(-50%); border: 1px solid #DFE2E8; min-width: 18rem; text-align: center;}
.pc_hd .menu li:hover .menu2_ul{display: block;}
.pc_hd .menu2_ul a{padding: 1.2rem 2.4rem; display: block; font-weight: 500; background: #fff; white-space: nowrap;}
.pc_hd .menu2_ul a:hover{color: var(--brand-primary);}
/* .pc_hd .menu2_ul li:first-child a{padding-top: 2.4rem;}
.pc_hd .menu2_ul li:last-child a{padding-bottom: 2.4rem;} */
.pc_hd .m_menu2_ic{display: none;}

.pc_hd .menu .act  .menu2_ul li.act a{color: var(--brand-primary);}

/* 모바일 메뉴 */
.m_menu{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #fff; display: none; padding: 0 4rem; z-index: 9999; overflow-y: scroll;}
.m_menu_hd{display: flex; align-items: center; justify-content: space-between; margin-top: 2.5rem;}
.m_menu .logo img{height: 2.8rem;}
.m_menu .lang_btn{width: 100%; height: 5rem; justify-content: space-evenly; margin-top: 3.5rem;}

.m_menu .menu{margin-top: 3rem;}
.m_menu .menu_1{font-family: 'Poppins', sans-serif; font-size: 2rem; color: #1D1D1D; font-weight: 700; padding: 1.8rem 0; display: flex; justify-content: space-between; align-items: center;}
.m_menu .menu_1.on{color: var(--brand-primary);}
.m_menu .m_menu2_ic{font-size: 2.8rem; display: flex; align-items: center; position: relative;}
.m_menu .m_menu2_ic i{position: absolute; right: 0;}
.xi-plus-min{opacity: 1; visibility: visible; transition: all 0.4s ease;}
.xi-minus-min{opacity: 0; visibility: hidden; transition: all 0.4s ease;}
.menu_1.on .xi-minus-min{opacity: 1; visibility: visible;}
.menu_1.on .xi-plus-min{opacity: 0; visibility: hidden;}

.m_menu .menu2_ul{display: none; background: #F5F5F5;}
.m_menu .menu2_ul a{font-weight: 500; font-size: 1.6rem; padding: 1.2rem 3rem; display: block;}
.m_menu .menu2_ul li:first-child a{padding-top: 2.4rem;}
.m_menu .menu2_ul li:last-child a{padding-bottom: 2.4rem;}
.m_menu .menu2_ul li.on a ,.m_menu .menu2_ul li:hover a{color: var(--brand-primary);}

/* 언어 선택 버튼 */
.lang_btn{width: 12.5rem; height: 5rem; border: 1px solid #e3e3e3; border-radius: 500px; display: flex; align-items: center; justify-content: center;  font-family: 'Poppins', sans-serif;}
.lang_btn a{display:block}
.lang_btn:hover{border: 1px solid #fff; transition: all 0.5s; box-shadow: 0 0px 10px rgba(17, 66, 144, 0.28);}
.lang_btn_span{color: #8b96ab; font-weight: 600; font-size: 1.6rem; transition: color .2s ease, text-shadow .2s ease;}
.lang_btn_span.on{color: var(--brand-primary); text-shadow: 0 0 0.01px var(--brand-primary);}
.lang_btn .fc_E3E3E3{display:flex; align-items:center; opacity:0.65;}
.lang_btn .fc_E3E3E3 img{display:block; filter: brightness(0) saturate(100%) invert(50%) sepia(10%) saturate(536%) hue-rotate(181deg) brightness(91%) contrast(88%);}
.pc_hd.on .lang_btn .fc_E3E3E3{color: #E3E3E3;}
.pc_hd.on .lang_btn_span{color:#aebcda;}
.pc_hd.on .lang_btn_span.on{color:#eef4ff; text-shadow: 0 0 8px rgba(219, 231, 251, 0.18);}
.pc_hd.on .lang_btn .fc_E3E3E3{opacity:0.85;}
.pc_hd.on .lang_btn .fc_E3E3E3 img{filter: brightness(0) saturate(100%) invert(95%) sepia(11%) saturate(477%) hue-rotate(183deg) brightness(101%) contrast(93%);}
.pc_hd.on .lang_btn{border-color: rgba(187, 193, 206, 0.6)}

/* SNS 링크 */
.sns_link{display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: -1.5rem;}
.sns_link a {
    color: #A2A2A2;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    display: inline-block;
    background: #F8F8F8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    margin: 0 1.2rem 1.5rem;
}


/* 푸터 */
.ft {background: #0d1c3b; padding: 4.5rem 0 6rem; color: #fff;}
.ft_l{display: flex; font-size: 1.4rem;}
.ft_l>div{max-width: 23vw; margin-right: 6vw;}
.ft_l p{line-height: 1.57em;}
.ft_l p.ft_tit{color: var(--brand-primary-soft); font-size: 1.8rem; font-weight: 700;   margin-bottom: 1rem; line-height: 1.2em;}

.ft_logo{margin-bottom: 2rem;}
.ft_logo img{display:block; height: 2.5rem; width:auto;}

.ft .sns_link{margin: 0 -0.5rem;}
.ft .sns_link a {
    background: #09090A;
    margin: 0 0.5rem 0;
}
.copy{color: #DFE2E8; opacity: 0.38; font-size: 1.4rem;}
.copy~a:hover{color: #A2A2A2;}



/* 탑버튼 */
.cookie .top_btn_wr{bottom: 20rem;}
.top_btn_wr{position: fixed; bottom: 3rem; right: 3rem; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; transition: all 0.4s ease-in-out; pointer-events: none;}
.top_btn_wr .top_btn{color:#222; width: 7.3rem; height: 7.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: transparent; background: #fff; border:1px solid #3D3D3D; opacity: 0.3;}
.top_btn_wr .demo_btn_wr{position: relative; width: 7.3rem; height: 7.3rem; margin-top: 2rem; overflow: visible; cursor: pointer;}
.top_btn_wr .demo_btn.on{width: 7.3rem; height: 7.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: #114290; position: absolute; top: 0; right: 0; color: #fff; font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 700; z-index: 2; transform-origin: right center; transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease;}
.top_btn_wr .demo_btn{display: none;}
.top_btn_wr .top_btn,
.top_btn_wr .demo_btn{pointer-events: auto;}
.top_btn_wr .demo_btn_wr{pointer-events: auto;}
.top_btn_wr .demo_btn_hover{pointer-events: none;}
.demo_btn_hover{position: absolute; top: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; width: var(--demo-hover-width, 35.9rem); height: 100%; padding: 0; border: 0; background: none; opacity: 0; pointer-events: none; transform: translateX(1.2rem) scaleX(0.9); transform-origin: right center; transition: opacity 0.28s ease, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);}
.demo_btn_hover img{display: block; width: 100%;}
.top_btn_wr .demo_btn_wr:hover .demo_btn.on{opacity: 0; transform: scale(0.92);}
.top_btn_wr .demo_btn_wr:hover .demo_btn_hover{opacity: 1; pointer-events: auto; transform: translateX(0) scaleX(1);}

/* 프로덕트 탭 */
.product_tab{display: flex;}
.product_tab li{ width: 20rem; transition: all 0.5s ease-in-out;}
.product_tab li:nth-child(1){background: #efefef;}
.product_tab li:nth-child(2){background: #f5f5f5;}
.product_tab li:nth-child(3){background: #f5f5f5;}
.product_tab li:nth-child(4){background: #f5f5f5;}
.product_tab li.on{flex: 1 1 auto;}
.product_tab li .product_tab_tit{writing-mode: tb-rl;}
.product_tab .product_tab_info{display: none;}
.product_tab li.on .product_tab_tit{display: none;}
.product_tab li.on .product_tab_info{display: block;}

.solution_s7_wr{overflow: hidden; position: relative;}
.solution_s7 {transform: translateY(100%); transition: all 0.6s ease-in-out; opacity: 0;}
.solution_s7.on {transform: translateY(0); opacity: 1; position: absolute; bottom: 0;}

/* 아이폰만 */
.ios .solution_s7_wr{overflow: hidden; position: relative;}
.ios .solution_s7 {transform: translateY(100%); transition: all 0.6s ease-in-out; opacity: 0;}
.ios .solution_s7.on {transform: translateY(0); opacity: 1; position: absolute; bottom: 0;}




/*반응형 max 1600*/
@media (max-width: 1600px) {
    /* 메뉴 */
    .pc_hd{height: 9rem;}
    .pc_hd .menu .menu_1{padding: 0 4.5rem;font-size: 1.8rem;}
    .pc_hd .logo img{height: 2.8rem;}
     .pc_hd .menu2_ul{display: none; position: absolute; top: calc(100% - 1rem); left: 50%; transform: translateX(-50%); border: 1px solid #DFE2E8;  min-width: 18rem; text-align: center;}
}

/*반응형 max 1200 xl*/
@media (max-width: 1199.98px) {
    .pc_hd{display: none;}
	.m_hd{display: flex; }

    /* 푸터 */
    .ft_logo img{height: 2.1rem;}
    .ft_l{flex-flow: column;}
    .ft_l>div{max-width: 100%; margin-right: 0; margin-bottom: 2rem;}
    .ft_l p.ft_tit{font-size: 1.6rem;}

    .copy{color: #DFE2E8; opacity: 0.38; font-size: 1.4rem; margin-top: 1rem;}
    .copy~a:hover{color: #A2A2A2;}
}

/*반응형 max 992px lg*/
@media (max-width: 991.98px) {
    /* 프로덕트 탭 */
    .product_tab{flex-flow: column;}
    .product_tab li{ width: 100%; padding-top: 10rem; position: relative;}
    .product_tab li.on{flex: 1 1 auto; padding-top: 50%;}
    .product_tab li.on .product_tab_info{display: block;}
    .product_tab .product_tab_tit{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .product_tab .product_tab_info{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .product_tab li .product_tab_tit {
        writing-mode: unset;
    }
}


/*반응형 max 767px md*/
@media (max-width: 767.98px) {
	.ft .ft_left{margin-bottom:2.0rem;}
	.ft .a_link {
		margin-left: -0.8rem;
	}
	.ft .a_link a{padding:0 0.8rem;}
}


/*반응형 max 576px sm*/
@media (max-width: 575.98px) {

    

    /* 탑버튼 */
    .top_btn_wr{bottom: 1.5rem; right: 1.5rem;}
    .top_btn_wr .top_btn{width: 6rem; height: 6rem; }
    .top_btn_wr .demo_btn_wr{width: 6rem; height: 6rem; margin-top: 1.5rem; overflow: visible;}
    .top_btn_wr .demo_btn.on{width: 6rem; height: 6rem; margin-top: 0; font-size: 1.2rem;}
    .demo_btn_hover{width: var(--demo-hover-width-sm, 28rem);}
}


@media (max-width:380px) {
	
}