@charset "UTF-8"; .wrap-notice{position: relative; min-height:450px;} .wrap-notice .notice-title-background{width:1000px; height: 477px; background-color: #042e6e; position: absolute; top: 0; left: 50%; margin-left:-1630px;z-index:1;} .wrap-notice .notice_inner{position: relative; max-width: 1600px; margin: 0 auto; z-index: 2;} .wrap-notice .notice_inner::after{content:""; display: block; clear: both;} .wrap-notice .notice_inner .recentBbsTab{} .wrap-notice .notice_inner .list{width: calc(100% - 266px); float: right; display: none; padding: 65px 0;} .wrap-notice .notice_inner .active .list{display: block; min-height:400px;} .wrap-notice .notice-background{background: url(../images/recentBbs_background.png) no-repeat; width:100%; height: 477px; position: absolute; top: 0; right: 0; background-size: cover;} .wrap-notice .notice_inner li:nth-child(1) .recent-title{top: 70px;} .wrap-notice .notice_inner li:nth-child(2) .recent-title{top: 140px;} .wrap-notice .notice_inner li:nth-child(3) .recent-title{top: 210px;} .wrap-notice .notice_inner li:nth-child(4) .recent-title{top: 280px;} .wrap-notice .recent-title{position: absolute; width: 195px; cursor: pointer; background-color: transparent; font-size: 18px; color: white; font-family: 'Noto Light'; text-align: left; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.2);} .wrap-notice .recent-title p{padding: 11px 0 11px 30px; position: relative;} .wrap-notice .active .recent-title p{background-color: #007eff; color: white; position: relative;} .wrap-notice .active .recent-title p::after{content:""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -4.5px; width: 6px; height: 9px; background: url(../images/title-arrow.png);} .wrap-notice .recent-title p:hover{background-color: #007eff; color: white;position: relative;} .wrap-notice .recent-title p:hover::after{content:""; display: block; position: absolute; right: 30px; top: 50%; margin-top: -4.5px; width: 6px; height: 9px; background: url(../images/title-arrow.png);} .wrap-notice .list li{width: calc(31.4% - 1px); float: left; margin-right: 2.8%; text-align: center; margin-bottom: 35px; position: relative; cursor: pointer; border: 3px solid transparent;} .wrap-notice .list li:hover{border: 3px solid #0b4da2;} .wrap-notice .list li:hover::before{content:""; display: block; position: absolute; width: 36px; height: 36px; background: url(../images/link-arrow.png); right: 0; bottom: 0;} .wrap-notice .list li:nth-child(3n){margin-right: 0;} .wrap-notice .list li:nth-child(n+4){margin-bottom: 0;} .wrap-notice .list li .con{height: 150px; display: table; width: 100%;} .wrap-notice .list li a{background-color: white; display: table-cell; vertical-align: middle; padding: 0 40px;} .wrap-notice .list li .title{font-size: 20px; color: #333333; font-family: 'Noto DemiLight'; display: block; line-height: 26px; margin-bottom: 15px; height: 52px; overflow: hidden; word-break: break-all;} .wrap-notice .list li .text{display: none;} .wrap-notice .list li .date{font-size: 16px; color: #666666; font-family: 'Titillium Web';} .wrap-notice .list .more a{position: absolute; width: 25px; height: 25px; text-indent: -9999px; left: 60px; bottom: 0px; display: block; background: url(../images/list-more.png) no-repeat center center;} @media all and (max-width: 1600px) { .wrap-notice .notice-title-background{width:165px;left: 0; margin-left:auto;} } @media all and (max-width: 1400px) { .wrap-notice .recent-title{z-index: 3;} .wrap-notice .notice_inner .list{width: calc(100% - 220px);} } @media all and (max-width: 1300px) { .wrap-notice .list li .title{font-size: 18px; line-height: 22px; height: 44px;} .wrap-notice .list li a{padding: 0 20px;} } @media all and (max-width: 1024px) { .wrap-notice{margin-top: 50px;} .wrap-notice .recent-title{font-size: 16px;} .wrap-notice .recent-title p{padding: 11px 50px 11px 20px;} .wrap-notice .list li .title{font-size: 16px; margin-bottom: 7px;} .wrap-notice .list li .date{font-size: 14px;} } @media all and (max-width: 768px) { .wrap-notice{margin-top: 20px;} .wrap-notice .notice-title-background{width: 100%; min-width: auto; height: 92px;} .wrap-notice .recent-title{width: 50%; border-bottom: 0; padding-bottom: 0;} .wrap-notice .notice_inner li:nth-child(1) .recent-title{top: 0;} .wrap-notice .notice_inner li:nth-child(2) .recent-title{top: 0; right: 0;} .wrap-notice .notice_inner li:nth-child(3) .recent-title{top: 46px;} .wrap-notice .notice_inner li:nth-child(4) .recent-title{top: 46px; right: 0;} .wrap-notice .notice_inner .list{width: 100%; float: none; padding: 120px 20px 30px 20px;} .wrap-notice .notice_inner .list::after{content:""; display: block; clear: both;} .wrap-notice .list li{width: 48%; margin-right: 0;} .wrap-notice .list li:nth-child(even){float: right;} .wrap-notice .list li:nth-child(n+4){margin-bottom: 35px;} .wrap-notice .notice-background{width: 100%; height: 720px;} .wrap-notice .list .more a{background-color: #042e6e; bottom: 0; left: auto; right: 50%; width: 35px; height: 35px; margin-right: -17.5px;} } @media all and (max-width: 420px) { .wrap-notice .recent-title p{padding-right: 30px;} .wrap-notice .list li{width: 100%; float: none;} .wrap-notice .list li:nth-child(even){float: none;} .wrap-notice .notice-background{height: 1300px;} } /*20230509 백그라운드 이미지 alt 값 대신 css로 처리*/ .text-hidden{position: absolute !important; left: -99999px !important; text-indent: -9999px !important;}