/* ******************************************************************************************************************************************************************** */ /* */ /* */ /* Menu (Jquery를 이용한 업다운 메뉴) - UpdownMenu */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Notice_1x3Ani { width : 100%; height : auto; background : linear-gradient( #eeefef 20% ,rgba(0,0,0,0) 78% ); text-align : center; padding : clamp(30px,5vw,60px) 10px; } #Notice_1x3Ani .Notice_1x3Ani_subtitle { font-size : clamp(20px,2vw,26px); font-weight : 500; color : #C9C9CA; } #Notice_1x3Ani .Notice_1x3Ani_maintitle { font-size : clamp(25px,2vw,35px); font-weight : 700; color : #767777; } #Notice_1x3Ani .Wrap { width : 100%; height : auto; max-width : 1300px; margin-top : 40px; position : relative; display : inline-block; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box { width : calc(94% / 3);height : auto; display : inline-block; background : #fff; margin : 0 1%; float : left; box-shadow : 0px 0px 15px #D5D5D5; padding : 60px 35px 40px 35px; text-align : left; position : relative; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Number_box { display : inline-block; text-align : left; position : absolute; left : 35px; top : 25px; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Number_box p { font-size : 50px; color : rgba(240,240,240,0.5); font-weight : 600; animation-duration: 3s; animation-iteration-count: infinite; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(1) .Number_box p { animation-name : numberbox_ani1; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(2) .Number_box p { animation-name : numberbox_ani2; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(3) .Number_box p { animation-name : numberbox_ani3; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_title { width : 100%; height : auto; font-size : 20px; text-align : left; color : #333; font-weight : 600; line-height : 1.6em; margin : 45px 0 15px 0; word-break : keep-all; text-overflow : ellipsis; overflow : hidden; transition : 0.6s; display : inline-block; white-space : nowrap; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:hover .Notice_1x3Ani_title { color : #980000; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_text { width : 100%; height : 74px; font-size : 14px; font-weight : 400; color : #555; line-height : 1.3em; word-break : keep-all; text-overflow : ellipsis; overflow : hidden; transition : 0.6s; display : -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view { color : #ccc; margin-top : 15px; font-size : calc(10px + 0.5vw); padding : 1%; display : inline-block; transition : 0.4s; font-weight : 500; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:hover .Notice_1x3Ani_view { color : rgb(32 139 59); transition : 0.4s; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view span { padding : 0 1px; opacity : 0.8; font-size : calc(10px + 0.5vw); animation-duration: 1s; animation-iteration-count: infinite; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view span.view_ani1 { animation-name : numberbox_ani1; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view span.view_ani2 { animation-name : numberbox_ani2; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view span.view_ani3 { animation-name : numberbox_ani3; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:hover .Notice_1x3Ani_view span.view_ani1 { animation-name : numberbox_ani_blue1; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:hover .Notice_1x3Ani_view span.view_ani2 { animation-name : numberbox_ani_blue2; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:hover .Notice_1x3Ani_view span.view_ani3 { animation-name : numberbox_ani_blue3; } @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_blue3 { 0% { color : rgba(32,139,59,0.2) } 25% { color : rgba(32,139,59,0.6) } 50% { color : rgba(32,139,59,1.0) } 75% { color : rgba(32,139,59,0.6) } 100% { color : rgba(32,139,59,0.2) } } @keyframes numberbox_ani_blue2 { 0% { color : rgba(32,139,59,0.6) } 25% { color : rgba(32,139,59,1.0) } 50% { color : rgba(32,139,59,0.6) } 75% { color : rgba(32,139,59,0.2) } 100% { color : rgba(32,139,59,0.6) } } @keyframes numberbox_ani_blue1 { 0% { color : rgba(32,139,59,1.0) } 25% { color : rgba(32,139,59,0.6) } 50% { color : rgba(32,139,59,0.2) } 75% { color : rgba(32,139,59,0.6) } 100% { color : rgba(32,139,59,1.0) } } @media (min-width: 641px) and (max-width:1024px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Tablet */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Notice_1x3Ani { margin-top : 30px; } #Notice_1x3Ani .Notice_1x3Ani_subtitle { font-size : calc(6px + 1.4vw); } #Notice_1x3Ani .Notice_1x3Ani_maintitle { font-size : calc(17px + 1.9vw); } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box { padding : 40px 28px 20px 28px} #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(1) .Number_box p ,#Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(2) .Number_box p ,#Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(3) .Number_box p { font-size : calc(17px + 1.8vw) } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_title { margin : 37px 0 7px 0; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_text { height : 54px; font-size : 13px; -webkit-line-clamp: 3; } } @media (min-width: 0px) and (max-width:640px) { /* ******************************************************************************************************************************************************************** */ /* */ /* */ /* division4A_backImg Mobile */ /* */ /* */ /* ******************************************************************************************************************************************************************** */ /* A A A : A : A : A : */ #Notice_1x3Ani { margin-top : 30px; padding-bottom : 100px; background : linear-gradient( #fff 54%, #eeefef 54% ); } #Notice_1x3Ani .Notice_1x3Ani_subtitle { font-size : calc(6px + 1.4vw); } #Notice_1x3Ani .Notice_1x3Ani_maintitle { font-size : calc(17px + 1.9vw); } #Notice_1x3Ani .Wrap { margin-top : 0px; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box { width : 90%; margin : 0%; float : unset; padding : 34px 35px 30px 35px; margin-top : 17px; box-shadow : 0px 0px 8px #d5d5d5; background-color : rgba(255,255,255,0.8); } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(1) .Number_box p ,#Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(2) .Number_box p ,#Notice_1x3Ani .Wrap .Notice_1x3Ani_box:nth-child(3) .Number_box p { font-size : calc(22px + 1.8vw) } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_title { margin : 30px 0 0 0; font-size : 17px; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_text { height : 46px; font-size : 13px; -webkit-line-clamp: 2; } #Notice_1x3Ani .Wrap .Notice_1x3Ani_box .Notice_1x3Ani_view { margin-top : 7px; padding : 0; } }