@charset "UTF-8";

.MC_wrap2 .con_wrap:nth-child(2){ display: flex; flex-direction: column; gap: 1rem 0; justify-content: space-between;}
.MC_wrap1 .con_wrap .MC_box1{ width: calc(100% - 20rem);}
.MC_wrap1 .con_wrap .MC_box2:after{ z-index: -1; right:calc(-100vw + 35rem);}

.MC_box4{ margin-top:1.5rem;}
/* .MC_box6{ margin-top:1rem;} */
.MC_wrap1 .con_wrap .MC_box2{ width: 18rem;}

.MC_wrap1 .track-container .marquee-track { display: inline-flex;; white-space: nowrap; animation: scroll-animation 90s linear infinite;}
.MC_wrap1 .track-container .marquee-text{ position:relative; animation:none;}
@keyframes scroll-animation {
	0% {transform: translateX(0);}
	100% {transform: translateX(-50%);}
}

/* 비주얼 */
.MVisual .visual-wrap .item .slogan { margin-top:1.5rem;}
.MVisual .visual-wrap .item .slogan img{ max-width:100%; width: auto;} 
.MVisual .visual-wrap{ width:calc(100% - 26rem);}
.MVisual .circle-wrap{ width:26rem; right:0;}
.MVisual .circle-wrap .circle-slider{ height:26rem;}

/* 보장구검색 */
.M_info{ width: 100%; height:100%; left:0; bottom:0; display: flex; flex-direction: column; justify-content: end; margin-top:5rem; gap: 0.5rem 0;}
.M_info .title p { display: inline-block; font-size:1.5rem; color:#fff; font-weight:700; display:flex; align-items:center; gap:0.75rem; max-width: 15rem; overflow: hidden; white-space: nowrap;} 
.M_info .title i {font-size:1rem; color:#fff; font-weight:400;}
.M_search{ position:relative;  z-index: 1; }
.M_search form .form{ display: flex; background:#fff; border-radius:3rem; border:2px solid #c5d700; margin-top: 0.5rem; overflow:hidden;}
.M_search form .form input{ width: 100%; height:3rem; line-height:3rem; padding:0 1rem; flex: 1; border:0;}
.M_search form .form button{ width:3rem; height:3rem; border-radius:50% 50% 50% 0; background:#c5d700; text-align: center; line-height:2.5rem; font-size:1.25rem; font-weight: 600;}

.callcenter{ margin-top: 1.5rem;}
.callcenter .num{ font-size: 2.5rem; letter-spacing: 0; font-weight: 600; color:#fff; line-height: 1;}

/* 공지사항 */
.notice .list_box ul li{ line-height:2rem;}
.notice .list_box ul li:nth-child(n+4){ display: block;}
.notice .list_box ul li:nth-child(n+6){ display: none;}

/* 바로가기 */
.M_link .tit {font-size:1.5rem; color:#ffffff; font-weight:700; display:flex; align-items:center; gap:0.75rem; max-width: 15rem; overflow: hidden; white-space: nowrap;} 
.M_link .tit i {font-size:1rem; color:#fff; font-weight:400;}
.M_link ul {position:relative; display:flex; gap:1.25rem; flex-wrap:wrap; margin-top:1rem;}
.M_link ul li {width:calc(25% - 1rem);}
.M_link ul li a {overflow:hidden; display: flex; width:100%; height:100%; position:relative; gap:0 0.5rem; color:#111; background:#e3e3e3; border:2px solid transparent; justify-content:space-between; align-items: center ; font-size: 0.9rem; font-weight: 600; transition:all 0.15s; z-index:0; border-radius:1rem; padding:1rem;}
.M_link ul li a:before {content: ''; position: absolute; top: -1rem; right: -2rem; width: 6rem; height: 6rem; background: url('/images/bohun/template/H3/main/link-symbol.png') no-repeat 50% 50%/cover; opacity: 0; transition: all 0.3s; z-index: 1;}
.M_link ul li a:after {content:'\EA6C'; display: inline-block; font-family: 'remixicon';}
.M_link ul li a:hover,
.M_link ul li a:focus{ border-color:#90c31f; color:#176955; background:#fff;}
.M_link ul li a:hover:before,
.M_link ul li a:focus:before{ right:-1rem; opacity: 1;}

/* 알림존 */
.popupzone{ margin-top:0;}
.popupzone .item a{ height:12.5rem;}

/* 배너 */
.M_banner ul li.ico1 a:after {background:url('/images/bohun/template/H3/main/banner-icon02.png') no-repeat 50% 50%; background-size:contain;}
.M_banner ul li.ico2 a:after {background:url('/images/bohun/template/H3/main/banner-icon04.png') no-repeat 50% 50%; background-size:contain;}

/* 퀵메뉴 */
.quicklink{ position:fixed; right:1.75rem; top:24rem; width:5.5rem; padding:0.5rem 0.35rem; border-radius:0.5rem; text-align: center; z-index: 99; background:#c5d700 url('/images/web/pocenter/main/bg_quicklink.png') no-repeat center/cover; }
.quicklink h3{ font-size: 0.8rem; font-weight: 600; color:#000; line-height:1.3;}
.quicklink h3 strong{ display: block; font-size: 1rem; font-weight: 700;}
.quicklink p{ border-radius:0.25rem; line-height:0; padding:5px 0; text-align: center; background:#fff; margin-top:0.5rem;}

/* footer */
#footer { padding-bottom:9rem;}
#footer .foot_address .inr{ display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem;}

@media screen and (max-width: 1770px){	
	/* 퀵메뉴 */                   
    .quicklink{ top:auto; bottom: 1rem;}
}

@media (max-width: 1480px) {	

	#footer .footer_link .sns-wrap{ margin-top:1rem;}
}

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


    .MC_wrap1 .con_wrap .MC_box1{ width: 100%;}
    .MC_wrap1 .con_wrap .MC_box1:after{ height: 16rem; bottom: -4rem;}
    .MC_wrap1 .con_wrap .MC_box2{ width: 100%; padding-top: 3rem;}
    .MC_wrap1 .track-container .container{ padding:0 1rem;}

    .MVisual .circle-wrap{ right:1rem; width:22rem;}
    .MVisual .circle-wrap .circle-slider{ height:100%;}

    .M_info{ max-width:calc(100% - 5rem); margin:0 1rem; gap: 1.5rem; flex-direction: row;}
    .M_info .title{ top: 0;}
    .M_search,
    .callcenter{ flex: 1;}
    .callcenter{ margin-top: 0; text-align: left;}
    .callcenter .num{ font-size: 2rem; line-height: 3rem;}

    .M_link ul{ gap: 0.5rem;}
    .M_link ul li{ width:calc(33% - 0.3rem);}
    .M_link ul li a{ padding:0.75rem 1rem;}

    .M_banner ul{ gap: 1rem;}
    .M_banner ul li{ width:calc(50% - 0.5rem);}
    .M_banner ul li a{ padding:2rem;}
}

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

    .M_banner ul li a .tit{ font-size:1.3rem;}
}

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

    .MC_wrap1 .con_wrap .MC_box2{padding-top:4.5rem;}
    .MC_wrap2 .con_wrap:nth-child(1){ width:calc(50% - 1rem); max-width:100% !important;} 
    .MC_wrap2 .con_wrap:nth-child(2){ width:calc(50% - 1rem); margin-top:0;}
    /* .MC_box4{ margin-top:2.75rem;} */

    /* 비주얼 */
	.MVisual .circle-wrap {width:22rem; height: 22rem; top:1rem;}
    .MVisual .visual-wrap .slogan{ max-width:calc(100% - 1rem);} 

    .M_link ul li{ width:calc(50% - 0.25rem);}
    .M_link ul li a{ height:3.75rem; border-radius:0.75rem;}

    .M_banner ul li{ width:100%;}
    .M_banner ul li a{ height:5.75rem;}
    .M_banner ul li a .tit{ font-size:1.25rem;}

    .popupzone #popupSlider{ border-radius: 0.75rem;}
}

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

    .MVisual .visual-wrap {width:calc(100% - 21rem);}
	.MVisual .circle-wrap {width:20rem; height:20rem; top:1.5rem;}

    #footer .footer_content{ flex-direction: column;}
    #footer .footer_link .sns-wrap{ justify-content: left;}
    .family-site{ top:auto; bottom:0;}

	/* 퀵메뉴 */                   
    .quicklink{ display: none;}

    /* footer */
    #footer { padding-bottom:0;}

}

@media screen and (max-width: 860px){	
    
    .MC_wrap2 .con_wrap:nth-child(2){ width:calc(50% - 0.5rem);} 

    .M_link ul li a{ padding:0.75rem;}

}

@media screen and (max-width: 760px){	
    
    .MC_wrap2 .con_wrap:nth-child(1){ width:100%;}
    .MC_wrap2 .con_wrap:nth-child(2){ width:100%; margin-top:0; gap:2rem 0;}
    .MC_box4{ margin-top:2rem;}

    .MVisual .visual-wrap{ width:calc(100% - 15rem);}
    .MVisual .circle-wrap{ width: 13rem; height: 13rem; top:4rem; right: 0;}

    .M_info{ max-width:100%;}

    .M_link ul li a{ height:auto;}

    .M_banner ul li a{ height:auto; padding:1.25rem 1.5rem;}
    .M_banner ul li a .tit{ font-size:1.1rem;}
    .M_banner ul li a .link{ width:2rem; height:2rem;}
    .M_banner ul li a .txt{ margin:0;}

    #footer .footer_content{ gap: 0;}

}

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

    .MC_wrap1 .con_wrap .MC_box2{ padding-top: 2rem;}

    .MVisual .visual-wrap {width:100%;}	
    .MVisual .circle-wrap {top:0; width:20rem; height:20rem; right:auto; left:50%; transform:translate(-50%, 0);}

    .M_info{ max-width:100%; flex-direction: column; margin:0;}
    .M_search form .form input{ height:2.5rem; line-height:2.5rem;}
    .M_search form .form button{ width:2.5rem; height:2.5rem; font-size:1rem;}

    .family-site{ position:relative; height:32px; right:auto; bottom:auto;}

}

@media screen and (max-width: 480px){	
    
    .M_info .title p, 
    .M_link .title .tit{ font-size:1.2rem;}
    .callcenter .num{ font-size: 1.75rem;}

}


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

	.MVisual .circle-wrap {width:15rem; height:15rem;}
    
    .M_link ul li{ width:100%;}

    #footer .footer_link .sns-wrap{ flex-wrap: wrap;}
    #footer .footer_link .sns-wrap h5{ width:100%;}
    #footer .footer_link .sns-wrap + .sns-wrap{ margin-top:1rem;}

}