/* 공통 - 타이틀 */
.titWrap {display: flex; align-items: center;}
.titWrap .tit{ position: relative; max-width: 20%; margin-right: 1.5rem;}
.titWrap .tit::before{content: ''; display: block; position: absolute; left: -0.5rem; top: 0rem; width: 0.4rem; height: 0.4rem; background: #213890; border-radius: 50%; }
.titWrap .tit span{ display: block; width: 100%; overflow: hidden; white-space: nowrap; font-size: 1.75rem; color: #213890; font-weight: 600; letter-spacing: -1px;}
.titWrap .tit span em{color: #000;}
.titWrap .txt{ max-width: 80%; white-space: nowrap; overflow: hidden; font-size: 0.9rem; font-weight: 500; letter-spacing: -1px; color: #111;}
.titWrap .txt em{background: linear-gradient(to bottom, transparent 50%, #cbecff 50%); font-weight: 600;}

/* 메인비주얼 */
.MVisual{ position: relative; height: 100%;}
.MVisual .slider{height: 100%;}
.MVisual .slider .slick-list,
.MVisual .slider .slick-track{ height: 100%;}
.MVisual .slider .item{position: relative; height: 100%;}
.MVisual .slider .item img{position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: block; height: 100%; width: auto; }
.MVisual .slider .item .slogan { position: absolute; top: 9.6rem; left: calc(50% - 42rem); width: 32rem;}
.MVisual .slider .item .slogan p { color: #fff; font-size: 3rem; font-weight: 700; line-height: 3.75rem;}
.MVisual .control{ display: flex; align-items: center; position: absolute; top: 19rem; left: calc(50% - 42.5rem); z-index: 999; color: #fff}
.MVisual .control a{transition: 0.15s; font-size: 1.5rem;}
.MVisual .control a.play{display: none;}
.MVisual .control .page{margin: 0 0.7rem;}
.MVisual .control .page strong{ display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background: rgba(0,0,0,0.3); border: 2px solid #fff; border-radius: 50%;}
.MVisual .control .page span{ position: relative; padding-left: 2rem;}
.MVisual .control .page span::before{content: ''; display: block; position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #fff; border-radius: 50%;}
/* 메인비주얼 : active */
.MVisual .control a:hover,
.MVisual .control a:focus{ transform: scale(1.2);}

/* 바로가기1,2 */
.M_link01{ background: #246ac9; text-align: center; color:#fff; padding: 2rem 0 1.3rem; border-radius: 1.5rem 0 0 0;}
.M_link02{ background: #223544; text-align: center; color:#fff; padding: 2rem 0 1.3rem; border-radius: 0 0 1.5rem 0;}
.M_link01 > .tit,
.M_link02 > .tit{font-size: 1.3rem; font-weight: 600;}
.M_link01 ul,
.M_link02 ul{display: flex; justify-content: center; width: 100%; padding: 1rem 3rem;}
.M_link01 ul li,
.M_link02 ul li{flex: 1;}
.M_link01 ul li ~ li{border-left: 1px solid #5088d4;}
.M_link02 ul li ~ li{border-left: 1px solid #4e5d69;}
.M_link01 ul li a,
.M_link02 ul li a{display: block;}
.M_link01 ul li a .tit,
.M_link02 ul li a .tit{position: relative; width: fit-content; margin: 0 auto; font-size: 1rem; font-weight: 500; transition: 0.15s;}
.M_link01 ul li a .tit::before,
.M_link02 ul li a .tit::before{content: "\eb80"; font-family: "remixicon"; position: absolute; left: -0.7rem; top: -0.25rem; opacity: 0; transition: 0.15s;}
/* 바로가기1,2 : active */
.M_link01 ul li a:hover .tit,
.M_link01 ul li a:focus .tit,
.M_link02 ul li a:hover .tit,
.M_link02 ul li a:focus .tit{border-radius: 3rem; box-shadow: 0 0 0 2px #fff; padding: 0 0.5rem;}
.M_link01 ul li a:hover .tit::before,
.M_link01 ul li a:focus .tit::before,
.M_link02 ul li a:hover .tit::before,
.M_link02 ul li a:focus .tit::before{opacity: 1;}


/* 게시판 */
.notice{ position: relative; padding-bottom: 3.6rem;}
.notice::before{content: ''; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 10rem; width: 300%; background: #f0f0f0; z-index: -1;}
.notice .titWrap{max-width: 50%;}
.notice .titTab{ position: absolute; right: 2.5rem; top: 0; max-width: 50%;} 
.notice .titTab ul{display: flex; justify-content: flex-end; align-items: center;}
.notice .titTab ul li{font-size: 1rem;}
.notice .titTab ul li ~ li{margin-left: 0.5rem;}
.notice .titTab ul li a{display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0.5rem 1.5rem; background: #eaeaea; border: 1px solid #d7d7d7; border-radius: 5rem; color: #666666; transition: 0.15s;}
.notice .tabWrap{height: 13.15rem;}
.notice .list_box{display: none; height: 100%; margin-top: 3rem;}
.notice .list_box ul{display: flex; justify-content: flex-start; align-items: flex-start; margin: 0 -1.6rem; height: 100%;}
.notice .list_box ul li{flex:1; padding: 0 1.6rem; height: 100%; } 
.notice .list_box ul li:nth-child(n+5){display: none;}
.notice .list_box ul li a{ position: relative; display: block; width: 100%; height: 100%; background: #fff; box-shadow: 0 0 0 1px #d7d7d7; padding: 2rem; transition: 0.15s;}
.notice .list_box ul li a::before{content: 'MORE'; display: block; position: absolute; right: 0rem; bottom: 1.5rem; background: #213890; color: #fff; font-weight: 600; font-size: 0.8rem; border-radius: 1.5rem 1.5rem 1.5rem 0; padding: 0.5rem 1.2rem; opacity: 0; transition: 0.15s; }
.notice .list_box ul li a .tit{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.4rem; margin-bottom: 1.2rem; font-size: 1rem; font-weight: 600; transition: 0.15s; line-height: 1.3rem;}
.notice .list_box ul li a .txt{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 1.9rem; margin-bottom: 2.7rem; color: #111; line-height: 1rem;}
.notice .list_box ul li a .date{font-size: 0.75rem;}
.notice .list_box ul li a .date i{margin-right: 0.25rem;}
.notice .list_box .more{position: absolute; right: 0; top: -0.2rem; font-size: 2rem;}
.notice .list_box .more i{display: block; transition: 0.15s;}
/* 게시판 : no_data */
.notice .list_box .no_data{display: flex; align-items: center; justify-content: center; background: #f5f5f5; height: 100%;}
/* 게시판 : 새글 */
.notice .list_box ul li a.new .tit::before{content: 'N'; font-size: 0.7rem; color: #fff; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #f09f21; vertical-align: bottom; margin-right: 0.25rem;}
/* 게시판 : active */
.notice .titTab ul li a.current{background: #213890; border-color: #213890; color: #fff; font-weight: 600;}
.notice .titTab ul li a:hover,
.notice .titTab ul li a:focus{font-weight: 600;}
.notice .list_box.on{display: block;}

.notice .list_box ul li a:hover,
.notice .list_box ul li a:focus{ box-shadow: 0 0 0 2px #213890, 0 0 1rem #e0e2e8; border-radius: 0 1.5rem 0 0;}
.notice .list_box ul li a:hover::before,
.notice .list_box ul li a:focus::before{right: -1rem; opacity: 1;}
.notice .list_box ul li a:hover .tit,
.notice .list_box ul li a:focus .tit{color: #213890;}
.notice .list_box .more:hover i,
.notice .list_box .more:focus i{transform: rotate(180deg);}

/* 바로가기3 */
.M_link03{ display: flex; align-items: flex-start; position: relative; }
.M_link03::before{content: ''; display: block; position: absolute; bottom: 2rem; left: 5rem; width: 12.6rem; height: 9.6rem; background: url(/common/images/template/A7/main/img_deco_01.png) no-repeat center center;}
.M_link03 .titWrap{flex-direction: column; align-items: flex-start; flex-shrink: 0; width: 20.9rem;}
.M_link03 .titWrap .tit{max-width: 100%; margin-bottom: 1rem;}
.M_link03 .titWrap .txt{max-width: 100%; line-height: 1.4;}
.M_link03 ul{display: flex; flex-shrink: 0; width:calc(100% - 18.5rem); max-width: 61.5rem; margin: 0 -1.2rem;}
.M_link03 ul li{padding: 0 1.2rem; flex: 1;}
.M_link03 ul li:nth-child(even){margin-top: 2rem;}
.M_link03 ul li a{ position: relative; display: block; background: #d2eeff; border-radius: 1.5rem 1.5rem 1.5rem 0; padding: 8.2rem 1.5rem 2.1rem; transition: 0.15s;}
.M_link03 ul li:nth-child(2) a{background: #d8e9ff;}
.M_link03 ul li:nth-child(3) a{background: #dee4f7;}
.M_link03 ul li:nth-child(4) a{background: #dae2f3;}
.M_link03 ul li a .img{position: absolute; position: absolute; left: -1.5rem; top: -2rem; background: #fff; border-radius: 1.5rem 1.5rem 0 1.5rem; box-shadow: 0 0 0 1px #00a2ff; transition: 0.15s;}
.M_link03 ul li:nth-child(2) a .img{ box-shadow: 0 0 0 1px #0071ff;}
.M_link03 ul li:nth-child(3) a .img{ box-shadow: 0 0 0 1px #274cc3;}
.M_link03 ul li:nth-child(4) a .img{ box-shadow: 0 0 0 1px #30446e;}
.M_link03 ul li a .tit{margin-bottom: 0.5rem;}
.M_link03 ul li a .tit em{ background: linear-gradient(to bottom, transparent 60%, #93d7ff 60%); font-size: 1rem; font-weight: 600;}
.M_link03 ul li:nth-child(2) a .tit em{ background: linear-gradient(to bottom, transparent 60%, #97c5ff 60%);}
.M_link03 ul li:nth-child(3) a .tit em{ background: linear-gradient(to bottom, transparent 60%, #a7b6e7 60%);}
.M_link03 ul li:nth-child(4) a .tit em{ background: linear-gradient(to bottom, transparent 60%, #a7b2cb 60%);}
.M_link03 ul li a .txt{line-height: 1.4; color: #111;}
.M_link03 ul li a i{ display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; position: absolute; right: 1.5rem; top: 1.8rem; font-size: 1.5rem; border-radius: 3rem 3rem 3rem 0; transition: 0.15s;}
/* 바로가기3 : active */
.M_link03 ul li a:hover i,
.M_link03 ul li a:focus i{background: #213890; color: #fff;}
.M_link03 ul li:nth-child(1) a:hover .img,
.M_link03 ul li:nth-child(1) a:focus .img{ box-shadow: 0 0 0 2px #00a2ff, 0 0 1rem #d4efff;}
.M_link03 ul li:nth-child(2) a:hover .img,
.M_link03 ul li:nth-child(2) a:focus .img{ box-shadow: 0 0 0 2px #0071ff, 0 0 1rem #d7e9ff;}
.M_link03 ul li:nth-child(3) a:hover .img,
.M_link03 ul li:nth-child(3) a:focus .img{ box-shadow: 0 0 0 2px #274cc3, 0 0 1rem #d3ddff;}
.M_link03 ul li:nth-child(4) a:hover .img,
.M_link03 ul li:nth-child(4) a:focus .img{ box-shadow: 0 0 0 2px #30446e, 0 0 1rem #dae6ff;}


/* SNS */
.sns{position: relative;}
.sns .titWrap{position: relative;}
.sns .titWrap::after{flex: 1; content: ''; display: block; height: 1px; background: #000; margin: 0 4rem 0 2rem; }
.sns ul{display: flex; justify-content: flex-start; margin: 0 -1rem; margin-top: 4.2rem; }
.sns ul li{width: 33.33%; padding: 0 1rem;}
.sns ul li:nth-child(n+4){display: none;}
.sns ul li a{position: relative; display: block; width: 100%; overflow: hidden; transition: 0.15s; background: #f5f5f5;}
.sns ul li a .img{ position: relative; height: 16rem;}
.sns ul li a .img::before{ opacity: 0; content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 1; transition: 0.15s;}
.sns ul li a .img::after{ content: ''; display: block; position: absolute; right: 1rem; top: 1rem; width: 2.3rem; height: 2.3rem; background: url(/common/images/template/A7/main/img_sns_tag.png) no-repeat center center; z-index: 2;}
.sns ul li a .img img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; max-height: 100%; max-width: 100%;}
.sns ul li a .tit {opacity: 0; position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; height: 4.5rem; background: rgba(0,0,0,0.8); color: #fff; padding: 1.2rem; border-radius: 0 1rem 0 0; transition: 0.15s;}
.sns ul li a .tit span{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.3rem; font-size: 0.9rem; line-height: 1.4;}
.sns ul li a .no_data{display:flex; align-items:center; justify-content:center; height:16rem; font-size:0.85rem; font-weight:500;}
.sns .more{position: absolute; right: 0; top: 0; font-size: 2rem;}
.sns .more i {display: block; transition: 0.15s;}
/* SNS : active */
.sns ul li a:hover,
.sns ul li a:focus{border-radius: 0 1.5rem 0 0;}
.sns ul li a:hover .img::before,
.sns ul li a:focus .img::before{opacity: 1;}
.sns ul li a:hover .tit,
.sns ul li a:focus .tit{opacity: 1;}
.sns .more:hover i,
.sns .more:focus i {transform: rotate(180deg);}

/* 팝업존 */
.popupzone{ position: relative; height: 100%; border-radius: 1.5rem 1.5rem 1rem 1.5rem; overflow: hidden; background: #f5f5f5;}
.popupzone .slider{height: 100%;}
.popupzone .slider .slick-list,
.popupzone .slider .slick-track{ height: 100%;}
.popupzone .slider .item{height: 100%;}
.popupzone .slider .item a{ position: relative; display: block; height: 100%; overflow: hidden;}
.popupzone .slider .item a img{ display: block; max-height: 100%; max-width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: 0.15s;}
.popupzone .control{ position: absolute; right: 0; bottom: 0; display: flex; align-items: center; padding: 0 1rem; height: 2.5rem; background: #000; color: #fff; border-radius: 1rem 0 0 0;}
.popupzone .control a{margin: 0 0.15rem; font-size: 1.3rem;}
.popupzone .control a.play{display: none;}
.popupzone .control .page{font-size: 0.8rem;}
.popupzone .control .page strong{display: inline-block; min-width: 1rem; text-align: right;}
.popupzone .control .page span{ display: inline-block; position: relative; padding-left: 1.3rem; color: #b9b9b9;}
.popupzone .control .page span::before{content: ''; position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); display: block; width: 4px; height: 0; border-bottom: 1px solid #b9b9b9; }
/* 팝업존 : active */
.popupzone .slider .item a:focus{border: 3px solid;}
.popupzone .slider .item a:hover img,
.popupzone .slider .item a:focus img{transform: translate(-50%, -50%) scale(1.1);}

@media screen and (max-width:2040px) {
    /* 메인비주얼 */ 
    .MVisual .control{left: 8rem; top: auto; bottom: 7rem;}   
    .MVisual .slider .item .slogan{left: 8rem; }   
}
@media screen and (max-width:1670px) {
    /* 게시판 */
    .notice .list_box ul{margin: 0 -0.5rem;}
    .notice .list_box ul li{padding: 0 0.5rem;}   
    .notice .list_box ul li a:hover::before, 
    .notice .list_box ul li a:focus::before{right: -0.7rem;}

}
@media screen and (max-width:1450px) {
    /* 공통 : 타이틀 */
    .titWrap .tit{max-width: 100%;}
    .titWrap .txt{display: none;}

    /* 게시판 */
    .notice .titTab{max-width: 90%;}

    /* 바로가기3 */
    .M_link03{flex-direction: column;}
    .M_link03::before{display: none;}
    .M_link03 ul{ width: calc(100% + 1.2rem); max-width: calc(100% + 1.2rem); margin: 0; margin-top: 2rem; }
    
    /* sns */
    .sns ul{margin-top: 1.5rem;}
    .sns ul li{width: 50%;}
    .sns ul li:nth-child(n+3){display: none;}
}
@media screen and (max-width:1280px) {
    /* 공통 */
    .titWrap .tit span{font-size: 1.5rem;}

    /* 메인비주얼 */
    .MVisual .control{bottom: 8rem; left: 1rem;}
    .MVisual .control a{font-size: 1rem; }
    .MVisual .control .page strong{width: 2.25rem; height: 2.25rem;} 
    .MVisual .slider .item .slogan{left: 1rem; top: 7rem;} 
    .MVisual .slider .item .slogan p { font-size: 2.5rem; line-height: 3rem;}

    /* 게시판 */
    .notice{padding-bottom: 1.5rem;}
    .notice .list_box{margin-top: 1.5rem;}   
}
@media screen and (max-width:1250px) {
    /* 게시판 */
    .notice .list_box ul li:nth-child(n+4){display: none;}
    .notice .list_box ul li a{padding: 1.5rem;}   
}
@media screen and (max-width:1150px) {
    /* 바로가기1,2 */
    .M_link01, 
    .M_link02{padding: 1rem 0;}
    .M_link01 ul, 
    .M_link02 ul{padding: 1rem ;}
}
@media screen and (max-width:1075px) {
    /* 바로가기3 */
    .M_link03 ul{ width: 100%; max-width: 100%; margin: 0; margin-top: 0.5rem;}
    .M_link03 ul li{padding: 0.5rem;}
    .M_link03 ul li:nth-child(even){margin-top: 0;}
    .M_link03 ul li a{padding: 0; background: none !important; text-align: center;}
    .M_link03 ul li a .img{position: unset; width: 100%; max-width: 6rem; margin: 0 auto; }
    .M_link03 ul li a .img img{display: block; width: 100%; height: auto;}
    .M_link03 ul li a .tit{margin-top: 1rem ; margin-bottom: 0;}
    .M_link03 ul li a .txt{display: none;}
    .M_link03 ul li a i{display: none;}

    /* sns */
    .sns ul li:nth-child(3){display: block;}
    .sns ul li a .img,
    .sns ul li a .no_data{height: 11rem;}
} 
@media screen and (max-width:820px) {
    /* 게시판 */
    .notice .titTab{ position: unset; max-width: 100%; margin-top: 0.5rem;}
    .notice .titTab ul{flex-wrap: wrap; justify-content: flex-start; margin: 0 -0.25rem;}
    .notice .titTab ul li{ margin:0 0.25rem 0.5rem 0.25rem;}
    .notice .list_box{margin-top: 0.5rem;}
    .notice .list_box ul li:nth-child(n+3){display: none;}   
}
@media screen and (max-width:640px) {
    /* 메인비주얼 */
    .MVisual .slider .item::before { content: ''; display: block; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.4), transparent); position: absolute; left: 0; top: 0; z-index: 1;}
    .MVisual .slider .item .slogan{ top: 5rem; z-index: 2;} 
    .MVisual .slider .item .slogan p { font-size: 1.3rem; line-height: 1.5rem;}
    .MVisual .control{bottom: 6rem; left: 0;}

    /* 바로가기1,2 */
    .M_link01, 
    .M_link02{padding-bottom: 0;}
    .M_link01 > .tit, 
    .M_link02 > .tit{font-size: 1.1rem;}
    .M_link01 ul, 
    .M_link02 ul{flex-direction: column;}
    .M_link01 ul li, 
    .M_link02 ul li{flex: none;}
    .M_link01 ul li ~ li{border-left: 0; border-top: 1px solid #5088d4;}
    .M_link02 ul li ~ li{border-left: 0; border-top: 1px solid #4e5d69;}
    .M_link01 ul li a,
    .M_link02 ul li a{ display: flex; align-items: center; padding: 0.5rem 0;}
    .M_link01 ul li a .img,
    .M_link02 ul li a .img{flex-shrink: 0; width: 3rem; margin-right: 0.5rem;}
    .M_link01 ul li a .img img,
    .M_link02 ul li a .img img{display: block; width: 100%; height: auto;}

    /* sns */
    .sns ul li:nth-child(3){display: none;}
}
@media screen and (max-width:450px) {
    /* 공통 */
    .titWrap .tit span{font-size: 1.3rem;}

    /* 메인비주얼 */ 
    .MVisual .control{bottom: 1.5rem;}

    /* 게시판 */
    .notice::before{ height: 7rem;}
    .notice .tabWrap{height: 14rem;}
    .notice .list_box ul{flex-direction: column;}
    .notice .list_box ul li{width: 100%; flex: unset; height: auto;}
    .notice .list_box ul li ~ li{margin-top:1rem;}
    .notice .list_box ul li:nth-child(n+3){display: none;}
    .notice .list_box ul li a{padding: 1.2rem;}
    .notice .list_box ul li a .tit{margin-bottom: 0.8rem;}
    .notice .list_box ul li a .txt{display: none;}
    
    /* 바로가기3 */
    .M_link03 ul{flex-wrap: wrap;}
    .M_link03 ul li{flex: none; width: 50%;}
    .M_link03 ul li:nth-child(n+3){margin-top: 0.5rem;}

    /* 팝업존 */
    .popupzone .slider .item a img{position: relative; top: 0; left: 0; transform: none;}
}
@media screen and (max-width:420px) {
    /* 바로가기1,2 */
    .M_link01 ul li a,
    .M_link02 ul li a{ flex-direction:column; justify-content:center;}
}
@media screen and (max-width:380px) {
    /* sns */
    .sns ul li{width: 100%;}
    .sns ul li ~ li{display: none;}
    .sns ul li a .img{height: auto;}
    .sns ul li a .img img{position: unset; transform: none;}
}