@charset "UTF-8"; .wrap-notice { min-height: 650px; margin: 90px 0 130px; background: #fff; padding: 0 0 0 10px; } 
.wrap-notice .container { position: relative; } 
.wrap-notice .notice li { display: inline-block; vertical-align: middle; } 
.wrap-notice .notice .tab { position: relative; display: inline-block; padding: 17px 22px 17px 22px; font-family: 'Noto Bold'; font-size: 32px; vertical-align: middle; color: #bababa; transition: 0.25s; } 
.wrap-notice .notice .tab:hover,
.wrap-notice .notice .on .tab { color: #2a2a2a; } 
.wrap-notice .notice .tab { color: #888888; } 
.wrap-notice .notice .tab span { position: relative; } 
.wrap-notice .notice .on .tab span::after { content: ''; position: absolute; left: -20px; top: -5px; width: 25px; height: 25px; background-image: url('../images/tab-on.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } 
.wrap-notice .notice .list { display: none; position: absolute; left: 30px; top: 80px; width: 100%; text-align: left; } 
.wrap-notice .notice .on .list { display: block; } 
.wrap-notice .notice .list li { position: relative; width: 31.5% !important; border: 1px solid #d2d2d2; border-radius: 10px; margin: 0 10px 17px; box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.15); transition: .25s } 
.wrap-notice .notice .list li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 2px; background: linear-gradient(90deg, rgba(0, 156, 255,1) 20.5625%,rgba(0, 155, 254,1) 20.5625%,rgba(0, 98, 118,1) 80.5625%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; pointer-events: none; opacity: 0; z-index: 3; transition: .25s; } 
.wrap-notice .notice .list li:hover { border-color: transparent; } 
.wrap-notice .notice .list li:hover::before { opacity: 1; } 
.wrap-notice .notice .list li.nodata { display: block !important; margin: 0 auto !important; width: 80% !important; padding: 180px 50px 180px 50px; text-align: center; } 
.wrap-notice .notice .list li a { display: block; padding: 20px 25px; min-height: 220px; margin: 0 auto; } 
.wrap-notice .notice .list .badge { margin-bottom: 13px; font-size: 15px; color: #0067ff; font-family: 'Noto Bold'; } 
.wrap-notice .notice .list .subject { font-family: 'Noto Bold'; font-size: 19px; color: #000; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
.wrap-notice .notice .list .desc { overflow: hidden; margin: 7px 0 13px; font-family: 'Noto Light'; font-size: 15px; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 
.wrap-notice .notice .list .date { position: absolute; left: 25px; bottom: 20px; display: block; padding-left: 25px; font-size: 14px; color: #666; font-family: 'Mont Regular'; letter-spacing: 0; } 
.wrap-notice .notice .list .date::before { content: ''; position: absolute; left: 0; top: 50%; margin-top: -9px; width:16px; height: 16px; background-image: url('../images/ic-watch.png'); background-repeat: no-repeat; background-position: center; background-size: cover; } 
.wrap-notice .notice .list .more-hidden { display: none; } 
.wrap-notice .control { display: flex; position: absolute; right: -45px; top: 13px; font-size: 0; } 
.wrap-notice .control a,
.wrap-notice .control button { display: inline-block; width: 24px; height: 24px; vertical-align: middle; text-indent: -99999px; } 
.wrap-notice .control .prev { width: 60px; height: 60px; background: url('../images/slide-btn.jpg') no-repeat center center; background-size: 9px; border-radius: 50%; border: 1px solid #dcdcdc; margin-right: 10px; transition: .25s; } 
.wrap-notice .control .next { width: 60px; height: 60px; background: url('../images/slide-btn.jpg') no-repeat center center; background-size: 9px; border-radius: 50%; border: 1px solid #dcdcdc; transform: rotate(180deg); transition: .25s; } 
.wrap-notice .slick-list { margin: 0 -40px; } 
.wrap-notice .slick-slide { margin: 20px 10px; } 
.wrap-notice .more-btn, .wrap-notice .more-btn-whole { margin-top: 5px; } 
.wrap-notice .more-btn a, .wrap-notice .more-btn-whole a { display: block; position: relative; width: 100%; max-width: 210px; padding: 16px 65px 16px 70px; font-size: 18px; font-family: 'Noto Medium'; color: #006276 !important; border: 1px solid #006276; border-radius: 30px; margin: 0 auto; transition: .25s; } 
.wrap-notice .more-btn a::before, .wrap-notice .more-btn-whole a::before { content: ''; position: absolute; width: 12px; height: 12px; right: 37px; top: 50%; margin-top: -6px; margin-top: -7px; background-image: url('../images/more-arrow.png'); background-position: right; background-repeat: no-repeat; background-size: cover; } 
.wrap-notice .more-btn a:hover, .wrap-notice .more-btn-whole a:hover { background-color: #016365; color: #fff !important; } 
.wrap-notice .more-btn a:hover::before, .wrap-notice .more-btn-whole a:hover::before { background-image: url('../images/more-arrow-on.png'); } 
.slick-arrow.slick-hidden { display: block !important; } 
.wrap-notice .control .prev:hover { border: 1px solid #0067ff; } 
.wrap-notice .control .next:hover { border: 1px solid #0067ff; } 

@media(min-width: 1921px){
 .wrap-notice .notice .list .badge { margin-bottom: 0.3vw !important; } 
.wrap-notice .notice .list .subject { line-height: 1.3; } 
.wrap-notice .notice .list .desc { line-height: 1.3; } 
.wrap-notice .notice .list .date::before { top: 53%; } 
 }

@media(max-width:1620px){
 .wrap-notice .notice .list li { width: 30.5% !important; } .wrap-notice .control { right: -28px; } 
 }

@media (max-width: 1440px){
 .wrap-notice .notice .tab { padding: 17px 12px 17px 12px; } 
.wrap-notice .notice .list li { margin: 0 5px 17px; } 
.wrap-notice .control { right: -13px; } 
 }

 
@media (max-width: 1280px){
 .wrap-notice { margin: 90px 0 0; } 
 .wrap-notice .notice .tab { font-size: 22px; padding: 17px 9px 17px 9px; } 
 .wrap-notice .notice .on .tab span::after { width: 20px; height: 20px; left: -17px; top: -3px; } 
.wrap-notice .notice .list { top: 60px } 
.wrap-notice .notice .list li { width: 46.5% !important; margin: 0 5px 17px; } 
.wrap-notice .notice .list li a { min-height: 162px; padding: 15px 20px; } 
.wrap-notice .notice .list .subject { font-size: 16px; line-height: 1.3; } 
.wrap-notice .notice .list .desc { font-size: 14px; line-height: 1.3; } 
.wrap-notice .notice .list .date { bottom: 15px; padding-left: 19px; font-size: 12px; } 
.wrap-notice .notice .list .date::before { width: 12px; height: 12px; margin-top: -6px; } 
.wrap-notice .notice .list .badge { margin-bottom: 4px; font-size: 12px; font-family: 'Noto Medium'; } 
.wrap-notice .more-btn, .wrap-notice .more-btn-whole { width: 95%; margin-top: 0; } 
.wrap-notice .more-btn a, .wrap-notice .more-btn-whole a { max-width: 170px; padding: 10px 43px 10px 58px; } 
.wrap-notice .more-btn a::before, .wrap-notice .more-btn-whole a::before { right: 20px; } 
.wrap-notice .slick-slide { margin-bottom: 0; } 
.wrap-notice .control { right: -35px; top: 14px; } 
.wrap-notice .control .prev { width: 40px; height: 40px; background-size: 7px; } 
.wrap-notice .control .next { width: 40px; height: 40px; background-size: 7px; } 
.wrap-notice .notice .list li.nodata { width: 82% !important; margin: 0 auto 20px !important; padding: 120px 50px 120px 50px; } 
 }

@media (max-width: 1020px){
 .wrap-notice { min-height: 580px; margin: 73px 0 0; } 
 .wrap-notice .notice .list li { width: 43.4% !important; margin: 0 10px 17px; } 
.wrap-notice .control { right: -20px; } 
.wrap-notice .more-btn, .wrap-notice .more-btn-whole { width: 92%; } 
 }

 @media (max-width: 980px){
 .wrap-notice { padding: 0; } 
 .wrap-notice .notice .list li { width: 41.4% !important; margin: 0 10px 17px; } 
 .wrap-notice .control { right: -10px; top: 16px; } 
 .wrap-notice .notice .tab { font-size: 20px; padding: 17px 5px 17px 5px; } 
 .wrap-notice .notice .on .tab span::after { left: -14px; top: -3px; width: 18px; height: 18px; } 
 .wrap-notice .slick-slide { margin: 10px 0 0; } 
 .wrap-notice .control .prev { width: 35px; height: 35px; } 
 .wrap-notice .control .next { width: 35px; height: 36px; } 
 #multipleContentsDiv_cku_kr_3173 { padding: 0 30px 0 30px; } 
 .wrap-notice .notice .list li.nodata { width: 88.5% !important; margin: 0 0 20px !important; } 
 }
 
 @media (max-width: 868px){
 .wrap-notice { min-height: 245px; margin: 30px 0 315px; } 
 .wrap-notice .control { right: 0; } 
 .wrap-notice .control .prev { border: 0; margin-right: -12px; margin-top: 0; } 
 .wrap-notice .control .next { border: 0; } 
 .wrap-notice .notice .list { left: 0; top: 68px; } 
 .wrap-notice .notice .list li { width: 48.2% !important; margin: 0; } 
 .wrap-notice .slick-slide > div { display: flex; justify-content: space-between; margin: 0 auto; width: calc(100% - 80px); } 
 .wrap-notice .slick-slide > div:first-child {margin: 0 auto 20px;}
 .wrap-notice .notice .tab { padding: 17px 8px 17px 8px; } 
 .wrap-notice .more-btn, .wrap-notice .more-btn-whole { width: 100%; margin-top: 25px; } 
 .wrap-notice .notice .list li.nodata { width: 60% !important; padding: 69px; margin: 0 auto 0 !important; } 
 .wrap-notice .notice .on .tab span::after { display: none; } 
 .wrap-notice .control .prev:hover { border: 0; } 
.wrap-notice .control .next:hover { border: 0; } 
 }
 
 @media (max-width: 800px){
 .wrap-notice .control { right: -15px; } 
 }
 


 @media (max-width: 530px){
 .wrap-notice .notice .tab { padding: 18px 8px 18px 2px; } 
 .wrap-notice .notice .list li.nodata { width: 100% !important; } 
 }

 /* 스크롤 매직 */
 .wrap-notice .notice .tab { transform: translateY(15px); opacity: 0; } 
 .wrap-notice .control { transform: translateY(15px); opacity: 0; } 
 .wrap-notice .notice .list { transform: translateX(-15px); opacity: 0; }