@charset "UTF-8";

/* 레이아웃 */
#gnb .depth01 ul{ justify-content:space-between; gap:0.5rem; }
#gnb .depth01 > ul > li{ flex:none;}

h3.heading{ font-size:1.2rem; font-weight: 700; color:#000;}

.MC_wrap2 .container{ gap: 1.5rem 2.5rem;}
.MC_wrap2 .container:after{ display: none;}
.MC_box4 { flex: 2; width: auto; min-width: 0px; padding-right: 0;}
.MC_box5 { flex: 1; width: auto; min-width: 0px; }

/* 바로가기 */
.link.lnk01 > ul > li > a > span{ max-width:9rem; overflow: inherit; white-space: wrap; flex: 1;}
.link.lnk01 > ul > li > a > p{ display: none; height:auto; flex: 1;}

.link.lnk02 > ul{ justify-content: start; gap: 1rem 0.5rem;}
.link.lnk02 > ul > li{ flex: 1;}
.link.lnk02 > ul > li > a{ width:6rem; word-break: keep-all; margin:0 auto;}
.link.lnk02 > ul > li > a .img{ width:5rem; margin:0 auto;}

/* 공지사항 */
.notice .tabLst li{ max-width:100%;}
.notice .tabBox .box > ul > li{ width:calc((100% - 2rem) / 2); }
.notice .tabBox .box > ul > li:nth-child(n + 4){ display: block;}
.notice .tabBox .box > ul > li:nth-child(n + 5){ display: none;}

/* 홍보영상, 포토갤러리 공통 */
.mediaWrap h3{ margin-right:2.5rem;} 
.mediaWrap .cont{ margin-top:1.2rem; }
.mediaWrap .cont a{ position:relative; height: 11rem; display: flex; align-items: center; justify-content: center; line-height:0; border-radius:0.5rem; overflow:hidden; }
.mediaWrap .cont a img{ max-width: 100%; /* height: 100%; */ object-fit: cover; transition: all 0.2s;}
.mediaWrap .cont a:hover img,
.mediaWrap .cont a:focus img{ transform: scale(1.1);}

/* 홍보영상 */
/* .videoWrap .cont a:before{ content:"\f00a"; position:absolute; width:4rem; height:4rem; display: flex; align-items: center; justify-content: center; color:#fff; padding-left:4px; font-size:2.5rem; border-radius:50%; font-family: 'remixicon'; background:rgba(0,0,0,0.7); z-index: 1; transition: all 0.2s;} */
.videoWrap .cont a:hover:before,
.videoWrap .cont a:focus:before{ background:#1b4a01;}

/* footer SNS */
#footer .footer_link .sns-wrap > a{ width:2.5rem; height:2.5rem;}
#footer .footer_link .sns-wrap > a img{ width:16px; height:auto;}
#footer .footer_link .sns-wrap > a i{ font-size:1.3rem;}


@media screen and (max-width: 1520px){

    .link.lnk01 > ul > li > a{ padding:1.5rem;}
}

@media screen and (max-width: 1440px){

    .MC_wrap2 .container{ gap: 1.5rem;}

    .link.lnk01 > ul > li > a > span{ font-size:1.1rem;}

    /* 공지사항 */
    .notice .tabBox .box > ul{ gap: 1rem;}
    .notice .tabBox .box > ul > li{ width:calc((100% - 1rem) / 2); }
}

@media screen and (max-width: 1240px){
    .link.lnk01 > ul > li > a > span{ max-width:100%; margin-bottom:1rem;}
    
    .link.lnk02 > ul > li{ width:calc((100% - 2rem) / 5); flex: none;}
    .link.lnk02 > ul > li > a .img{ width:4.5rem;}
}

@media screen and (max-width: 1190px){

    /* 공지사항 */
    .notice .tabBox .box > ul{ gap: 1.5rem;}
    .notice .tabBox .box > ul > li{ width:calc((100% - 1.5rem) / 2); }
    .notice .tabBox .box > ul > li:nth-child(n + 3){ display: none;} 
}

@media screen and (max-width: 1024px){

    .MC_wrap2 .container{ gap: 2rem 1.5rem; flex-wrap: wrap;}
    /* .MC_box4{ flex: auto; width: 100%;} */

    h3.heading{ font-size:1rem;}

    .link.lnk02 > ul > li > a .img{ width:4rem;}

    /* 공지사항 */
    .notice .tabBox .box > ul{ gap: 1rem;}
    .notice .tabBox .box > ul > li{ width:calc((100% - 1rem) / 2); }

    /* footer SNS */
    #footer .footer_link .sns-wrap > a{ width:2rem; height:2rem;}
    #footer .footer_link .sns-wrap > a img{ width:auto; height:auto;}
    #footer .footer_link .sns-wrap > a i{ font-size:1rem;}
}

@media screen and (max-width: 900px){

    .MC_box5{ margin-top:0;}

    .videoWrap .cont a:before{ width:3rem; height:3rem; font-size:1.5rem;}

    .link.lnk02 > ul > li > a{ width:100%;}
}

@media screen and (max-width: 840px) {

    /* 공지사항 */
    .notice .tabBox .box > ul > li{ width:100%; }
    .notice .tabBox .box > ul > li:nth-child(n + 2){ display: none;} 
    
    /* 패밀리사이트 */	
	.family-site {/*top:2rem;*/ right:0; width:6.75rem; height:2rem; background:url('/images/com/main/family-icon-mobile.png') no-repeat; }
	.family-wrap .inner .family-close {width:2rem; height:2rem; right:1rem; top:2rem; }
	.fn-title p.crt01 {left:2.5rem; }
    .fn-content { padding: 1.5rem 0.7rem; }
	.crt02 {right:4rem; }
    .fn-list:nth-child(1) .title::before,
    .fn-list:nth-child(2) .title::before {right: 1.5rem; }
    .fn-list:nth-child(3) .list:nth-child(odd) .title,
    .fn-list:nth-child(3) .list:nth-child(even) .title { padding-left: 0.5rem; }
    .fn-list { gap: 0.3rem; }
    .fn-box .item { gap: 0.3rem; }
	.row-list .fn-box .item { margin-top: 0.3rem; }
    
	/* footer */
	/* #footer .footer_content {flex-direction:column; gap:1rem; } */
	#footer .footer_link  {margin-top:0.5rem; }
	#footer .footer_info {position:relative; }
	#footer .footer_info > p {display: flex; width: 50%; }
	#footer .footer_info > p img {max-width:100%; }
}

@media screen and (max-width: 640px){

    .MC_box6{ width:auto; flex: 1;}
    
    .notice .tabBox .box > ul > li > a{ padding:1.75rem 1.25rem;}
}

@media screen and (max-width: 560px){

    /* 홍보영상, 포토갤러리 공통 */
    /* .mediaWrap .cont a{ height: 8rem; }  */
    
    .link.lnk02 > ul > li{ width:calc((100% - 1.5rem) / 4); }
}

@media screen and (max-width: 480px){
    .MC_box5 { flex: auto; width: 100%; }
    .MC_box6 { flex: auto; width: 100%; }

    /* 공지사항 */
    .notice .tabBox .box > ul{ gap: 1rem;}
    .notice .tabBox .box > ul > li{ width: 100%; }

    /* 바로가기 */
    .link.lnk02 > ul > li > a{ word-break: break-all; padding:0;}
    .link.lnk02 > ul > li > a .img{ width:3.5rem;}
}

@media screen and (max-width: 380px){

    .notice .tabBox .box > ul > li > a{ padding:1rem;}
    .notice .tabBox .box > ul > li > a > span{ font-size: 0.9rem;}
    
    .link.lnk02 > ul > li{ width:calc((100% - 1rem) / 3); }
    .link.lnk02 > ul > li > a .img{ width:3rem;}
    
    /* 홍보영상, 포토갤러리 공통 */
    .mediaWrap .cont{ margin-top:0.85rem; }

    #footer .footer_info > p{ width:100%;}
}