/* A A A : A : A : A : */ #Notice_1x3Ani_new { width : 100%; height : auto; display : flex; align-items : center; justify-content : flex-start; font-size : min(1.6vw,18px); font-family : "nanum"; background : #fff; padding : 4em 0 8em; position : relative; flex-direction : column; gap : 2em; background : linear-gradient(to bottom,#fff 35%, #f5f5f5 60%); } #Notice_1x3Ani_new .wrap { width : 90%; height : auto; display : flex; flex-direction : column; gap : 2em; align-items : center; justify-content : center; max-width : 1200px;} #Notice_1x3Ani_new .wrap .titWrap { width : 100%; height : auto; display : flex; flex-direction : column; gap : 1em; align-items : center; justify-content : center;} #Notice_1x3Ani_new .wrap .titWrap img { height : max(13px,0.88em); opacity : .3;} #Notice_1x3Ani_new .wrap .titWrap .tit { font-size : 1.9em; font-weight : 800; line-height : 1em;} #Notice_1x3Ani_new .wrap .noticeWrap { width : 100%; height : auto; display : flex; align-items : flex-start; justify-content : flex-start; gap : 2.5%; } #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox { width : calc(95% / 3); height : auto; display : flex; flex-direction : column; align-items : flex-start; justify-content : flex-start; background : #fff; padding : 1.8em 1.5em 2.2em; gap : 1em; box-shadow : 0px 0px 9px 0px #ccccccbf;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .num { font-size : 1.9em; font-weight : 800; line-height : 1em; color : #e5e5e5; animation-duration : 3s; animation-iteration-count: infinite;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(1) .num { animation-name : numberbox_ani1;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(1):hover .num { animation-name : numberbox_ani_hover1;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(2) .num { animation-name : numberbox_ani2;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(2):hover .num { animation-name : numberbox_ani_hover2;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(3) .num { animation-name : numberbox_ani3;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:nth-child(3):hover .num { animation-name : numberbox_ani_hover3;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .subject { font-size : 1.2em; font-weight : 700; color : #333333; width : 100%; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; line-height : 1.2em; transition : .2s;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .subject { color : #970000; transition : .2s;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .text { text-overflow : ellipsis; overflow : hidden; height : 4.5em; line-height : 1.5em; display : -webkit-box; color : #333; -webkit-line-clamp: 3; -webkit-box-orient : vertical; margin-top : -0.4em; transition : .2s; font-size : max(13px,0.88em);} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .text { color : #000; transition : .2s;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .detail { display : flex; align-items : flex-start; justify-content : center; font-weight : 800; color : #ccc; line-height : 1em; margin-top : 0.4em; transition : .2s;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .detail { color : #970000; transition : .2s;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .detail span { line-height : inherit; animation-duration : 1s; animation-iteration-count: infinite; } #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .detail span:nth-child(1) { animation-name : numberbox_ani1; } #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .detail span:nth-child(1) { animation-name : numberbox_ani_hover1;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .detail span:nth-child(2) { animation-name : numberbox_ani2;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .detail span:nth-child(2) { animation-name : numberbox_ani_hover2;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .detail span:nth-child(3) { animation-name : numberbox_ani3;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox:hover .detail span:nth-child(3) { animation-name : numberbox_ani_hover3;} @media(max-width: 1024px){ /* A A A : A : A : A : */ #Notice_1x3Ani_new { font-size : min(2.4vw,16px);} } @media(max-width:819px) { #Notice_1x3Ani_new .wrap .titWrap .tit, #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .num { font-size : 1.7em;} } @media(max-width : 640px){ /* A A A : A : A : A : */ #Notice_1x3Ani_new { font-size : max(13px,3vw); padding : 2em 0 6em;} #Notice_1x3Ani_new .wrap { width : 90%;} #Notice_1x3Ani_new .wrap .noticeWrap { flex-direction : column; align-items : center; justify-content : flex-start; gap : 1.5em;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox { width : 100%; gap : 0.8em; max-width : 400px;} #Notice_1x3Ani_new .wrap .noticeWrap .noticeBox .text { margin-top : -0.2em;} } @keyframes numberbox_ani3 { 0% { color : rgba(150,150,150,0.2) } 25% { color : rgba(150,150,150,0.6) } 50% { color : rgba(150,150,150,1.0) } 75% { color : rgba(150,150,150,0.6) } 100% { color : rgba(150,150,150,0.2) } } @keyframes numberbox_ani2 { 0% { color : rgba(150,150,150,0.6) } 25% { color : rgba(150,150,150,1.0) } 50% { color : rgba(150,150,150,0.6) } 75% { color : rgba(150,150,150,0.2) } 100% { color : rgba(150,150,150,0.6) } } @keyframes numberbox_ani1 { 0% { color : rgba(150,150,150,1.0) } 25% { color : rgba(150,150,150,0.6) } 50% { color : rgba(150,150,150,0.2) } 75% { color : rgba(150,150,150,0.6) } 100% { color : rgba(150,150,150,1.0) } } @keyframes numberbox_ani_hover3 { 0% { color : rgba(151,0,0,0.2) } 25% { color : rgba(151,0,0,0.6) } 50% { color : rgba(151,0,0,1.0) } 75% { color : rgba(151,0,0,0.6) } 100% { color : rgba(151,0,0,0.2) } } @keyframes numberbox_ani_hover2 { 0% { color : rgba(151,0,0,0.6) } 25% { color : rgba(151,0,0,1.0) } 50% { color : rgba(151,0,0,0.6) } 75% { color : rgba(151,0,0,0.2) } 100% { color : rgba(151,0,0,0.6) } } @keyframes numberbox_ani_hover1 { 0% { color : rgba(151,0,0,1.0) } 25% { color : rgba(151,0,0,0.6) } 50% { color : rgba(151,0,0,0.2) } 75% { color : rgba(151,0,0,0.6) } 100% { color : rgba(151,0,0,1.0) } }