body{background: #f4f4f4;} #allWrap{overflow-x: clip; position: relative; width:100%; word-break:keep-all;} #allWrap.main{} .m-bottom-bg{position:relative;overflow: hidden;background:url("/images/main/main_bottom_bg.jpg") no-repeat 0 bottom #fff;background-size:100%;z-index: 2;} .m-bottom-bg:before{content: ""; display: block; width: 100%; height:100px; background: linear-gradient(to top, rgb(255 255 255) 0%, rgb(255 255 255 / 0%) 100%); opacity:1; position: absolute; left: 0; top: 0; z-index: 1;} .a-up{transform:translateY(25px); opacity:0;} .in-view.a-up{transform:translateY(0px); opacity:1; transition:all 1s;} .a-down{transform:translateY(-25px); opacity:0;} .in-view.a-down{transform:translateY(0px); opacity:1; transition:all 1s;} .a-left{transform:translateX(15px); transition:.5s; opacity:0; transition-delay:.3s;} .a-left.in-view{transform:translateX(0px); opacity:1;} .a-right{transform:translateX(-15px); transition:.5s; opacity:0; transition-delay:.3s;} .a-right.in-view{transform:translateX(0px); opacity:1;} .a-:nth-child(1){transition-delay:.1s;} .a-:nth-child(2){transition-delay:.2s;} .a-:nth-child(3){transition-delay:.3s;} .a-:nth-child(4){transition-delay:.4s} .a-:nth-child(5){transition-delay:.5s} .a-:nth-child(6){transition-delay:.6s} .a-:nth-child(7){transition-delay:.7s} .a-:nth-child(8){transition-delay:.8s} .a-:nth-child(9){transition-delay:.9s} .a-:nth-child(10){transition-delay:1s} .a-:nth-child(11){transition-delay:1.2s} .a-:nth-child(12){transition-delay:1.3s} .a-:nth-child(13){transition-delay:1.4s} .a-:nth-child(14){transition-delay:1.5s} .a-:nth-child(15){transition-delay:1.6s} /* 사이드바 */ .side_bar{position: absolute; bottom: 0; right: 0; width: 86px; height: 610px; background: #f4f4f4; border-radius: 50px 50px 0 0; z-index: 9;} .side_bar::before{content: ''; position: absolute; bottom: 0; left: -47px; display: block; width: 48px; height: 46px; background: url('../images/main/side_bar_deco.png') no-repeat 0 0/contain; z-index: -1;} .side_bar .side_quick{position: absolute; top: 10px; right: 8px; display: flex; justify-content: flex-end; background: #000; border-radius: 35px;} .side_bar .side_quick .open_btn{width: 70px; height: 140px; padding: 20px 0; text-align: center;} .side_bar .side_quick .open_btn a{} .side_bar .side_quick .open_btn a .img_box{position: relative; padding-bottom: 15px;} .side_bar .side_quick .open_btn a .img_box::before{content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: block; width: 60%; height: 1px; background: #fff; opacity: .2; transition:all 0.4s ease;} .side_bar .side_quick .open_btn a .img_box img{} .side_bar .side_quick .open_btn a h2{padding-top: 35px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 11px; line-height: 1.2; color: #fff;} .side_bar .side_quick .open_btn a:hover .img_box::before{width: 40%;} .side_bar .side_quick ul.side_quick_li{position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: none; flex-wrap: wrap; gap: 12px; padding: 10px 0; width: 170px; overflow: hidden; transition: all .4s ease;} .side_bar .side_quick ul.side_quick_li::before{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 100px; border-left: 1px dotted rgba(255,255,255,.1); transition:all 0.4s ease;} .side_bar .side_quick ul.side_quick_li li{width: 45%; text-align: center;} .side_bar .side_quick ul.side_quick_li li a{display: inline-block; text-align: center;} .side_bar .side_quick ul.side_quick_li li a img{opacity: .5; transition: all .4s ease;} .side_bar .side_quick ul.side_quick_li li a p{display: block; margin-top: 4px; font-weight: 400; font-size: 14px; color: #fff;} .side_bar .scroll-icon{position: absolute; top: 48%; left: 0; z-index:9;} .side_bar .side_quick ul.side_quick_li li a:hover img{opacity: 1;} .side_bar .side_quick.on{width: 240px;} .side_bar .side_quick.on ul.side_quick_li{display: flex; padding: 10px 15px;} .side_bar .scroll-icon .scroll_wr{position:relative; height: 150px; display: inline-block; text-align: center;} .side_bar .scroll-icon .scroll_wr .sc_txt{position: relative; display: block; width: 83px; height: 300px; padding-bottom: 100px; display: inline-block;} .side_bar .scroll-icon .scroll_wr .sc_txt > img{position: absolute; top: 0; left: 50%; transform: translateX(-50%);} .side_bar .scroll-icon .scroll_wr .sc_txt p{position: relative; width: 158px; font-size: 18px; font-weight: 700; color: #222; transform: rotate(90deg); margin-bottom: 80px;} .side_bar .scroll-icon .scroll_wr .sc_txt:before{position: absolute; content: ''; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 90px; background: #cdcdcd;} .side_bar .scroll-icon .scroll_wr .sc_txt:after{position: absolute; content: ''; bottom: 70px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: #101010; z-index:2; animation:scoll_pc infinite 1.8s;} @keyframes scoll_pc { 0% {opacity:1; bottom:70px;} 100% {bottom:0px;} } @keyframes scoll_mo { 0% {opacity:1; bottom:45px;} 100% {bottom:0px;} } @media (max-width: 768px) { .side_bar {height: 470px;} .side_bar .scroll-icon {top: 40%;} } @media (max-width: 564px) { .side_bar { display: none; } } /* mVisual */ #mVisual{position: relative; display: flex; justify-content: flex-end; height: 880px;} #mVisual .mVisual{overflow: hidden; position: relative; width: calc(100% - 2%); border-radius: 0 0 0 258px; z-index: 0; transform:translateZ(0); will-change: clip-path;} #mVisual .mVisual::before {content: ''; position: absolute; width: 100%; height: 100%; display: block; width: 100%; background: rgba(0,0,0,.4); top: 0; left: 0; z-index: 1;} #mVisual .mVisual .slogan{position: absolute; bottom: 180px; left: 6%; z-index: 1;} #mVisual .mVisual .slogan h2.sSlo{margin-bottom: 20px; font-weight: 500; font-size: 32px; letter-spacing: -0.4px; color: #fff;} #mVisual .mVisual .slogan .mSlo .big{overflow-y: hidden; display: block; height: 80px; /* 애니메이션 높이 */ font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 76px; line-height: 1; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 20px rgba(0,0,0,.3);} #mVisual .mVisual .slogan .mSlo .parent1 p{animation-name: grow1 !important; animation-duration: 1.3s;/* 애니메이션 시간 */} #mVisual .mVisual .slogan .mSlo .parent2 p{animation-name: grow2 !important; animation-duration: 1.3s;/* 애니메이션 시간 */} #mVisual .mVisual .slogan .mSlo .parent3 p{animation-name: grow3 !important; animation-duration: 1.3s;/* 애니메이션 시간 */ font-style: italic; font-weight: 300;} #mVisual .mVis_slide{overflow: hidden; height: 100%; border-radius: 0 0 0 258px; position: relative;} #mVisual .mVis_slide .slick-list{position: relative; width: 100%; height: 100%; z-index: 0;} #mVisual .mVis_slide .item {position: absolute !important; top: 0 !important; left: 0 !important; /* width: 100% !important; */} #mVisual .mVis_slide .item .item_img img{ } #mVisual .progress_bar{position: absolute; left: auto; right: 8%; bottom: 54px; display: flex; align-items: center; gap: 25px; width: 100%; max-width: 1470px; height: 2px; z-index: 4;} #mVisual .progress_bar .bar_wrap {position: relative; width: 33.3%; height: auto; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #mVisual .bar_wrap::before{position: absolute; top: -38px; right: 10px; display: block; width: 20px; height: 20px; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 20px; color: #fff; opacity: .4; transition:all 0.4s ease;} #mVisual .bar_wrap.bar01::before{content:'01';} #mVisual .bar_wrap.bar02::before{content:'02';} #mVisual .bar_wrap.bar03::before{content:'03';} #mVisual .bar_wrap.active::before{opacity: 1;} #mVisual .progress_bar .bar_wrap:hover::before{opacity: 1;} #mVisual .progress_bar .bar_wrap .bar {width: 100%; height: 2px; background-color: rgba(255, 255, 255, 0.2); -webkit-transition: all ease .3s; transition: all ease .3s; position: relative;} #mVisual .progress_bar .bar_wrap .bar::before {content: ""; width: 0%; height: 100%; background-color: #fff; position: absolute; top: 0; left: 0;} #mVisual .progress_bar .bar_wrap .bar.active::before {-webkit-transition: all linear 5s; transition: all linear 5s; width: 100%;} /* 키프레임 애니메이션01 */ @keyframes grow1 { from { opacity:0; transform: translateY(30px) }/* 애니메이션 높이 */ to { opacity:1; transform: translateY(0) } } /* 키프레임 애니메이션02 */ @keyframes grow2 { from {opacity:0; transform: translateY(66px) }/* 애니메이션 높이 */ to { opacity:1; transform: translateY(0) } } /* 키프레임 애니메이션03 */ @keyframes grow3 { from {opacity:0; transform: translateY(90px) }/* 애니메이션 높이 */ to { opacity:1; transform: translateY(0) } } /* 공통 */ .mTit{} .mTit h3{font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 58px; line-height: 1; color: #222;} .mTit p{margin-top: 10px; font-weight: 700; font-size: 32px; color: #222;} @media (min-width: 1820px){ #mVisual .mVis_slide .item .item_img img{width: 100%;} } @media (max-width: 1500px) { #mVisual .mVis_slide .item .item_img {width: 100%;height: 900px;} #mVisual .mVis_slide .item .item_img img {object-fit: cover;width: 100%;height: 100%;max-width: 100%;box-sizing: border-box;} } @media (max-width: 1200px) { #mVisual .mVisual .slogan h2.sSlo {font-size: 24px;} #mVisual .mVisual .slogan .mSlo .big {font-size: 52px;height: auto;line-height: 1.3;} .mTit {position: relative;} .mTit h3 {font-size: 48px;} } @media (max-width: 991px) { #mVisual {height: 740px;} #mVisual .mVis_slide .item .item_img {height: 740px;} #mVisual .progress_bar {width: 80%;right: 10%;} #mVisual .progress_bar .bar_wrap {width: 29%;} } @media (max-width: 768px) { #mVisual {height: 600px;} #mVisual .mVis_slide .item .item_img {height: 600px;} #mVisual .mVisual .slogan h2.sSlo {font-size: 16px;} #mVisual .mVisual .slogan .mSlo .big {font-size: 34px;} #mVisual .progress_bar .bar_wrap {width: 28%;} .mTit h3 {font-size: 32px;} } @media (max-width: 564px) { #mVisual .mVisual {border-radius: 0 0 0 150px;} #mVisual .mVis_slide {border-radius: 0 0 0 150px;} #mVisual .progress_bar {right: 0;width: 90%;} #mVisual .bar_wrap::before {font-size: 14px;top: -23px;right: 2px;} } @media (max-width: 480px) { #mVisual .mVisual .slogan .mSlo .big {font-size: 27px;} } @media (max-width: 360px) { #mVisual .mVisual .slogan .mSlo .big {font-size: 24px;} } /* sec01 : 커뮤니티 */ #mBoard{position:relative;display: flex;justify-content: space-between;width: 100%;max-width: 1800px;margin: 0 auto;padding: 150px 0 120px;} #mBoard .tit_wr{width: 546px; margin-right: 38px; padding: 120px 40px 40px; background: #fff; border-radius: 273px 273px 100px 100px; text-align: center;} #mBoard .tit_wr .mTit{} #mBoard .tit_wr .mTit h3{} #mBoard .tit_wr .mTit p{} #mBoard .tit_wr .deco_wr{position: relative; display: flex; align-items: flex-start; justify-content: center; margin-top: 20px;} #mBoard .tit_wr .deco_wr .deco01{width: 233px;height: 233px;background: url('../images/main/mComm_circle01.png') no-repeat 50% 50% /cover;} #mBoard .tit_wr .deco_wr .deco02{width: 233px; height: 233px; background: url('../images/main/mComm_circle02.png') no-repeat 50% 50% /cover;} #mBoard .tit_wr .deco_wr .deco03{width: 233px; height: 466px; background: url('../images/main/mComm_circle03.png') no-repeat 50% 50% /cover;} #mBoard .tit_wr .deco_wr .circle{position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; gap: 20px;} #mBoard .tit_wr .deco_wr .half{position: absolute; top: 270px; left: 60px;} #mBoard .tit_wr .deco_wr .half img{display: block;} #mBoard .comm_wr{width: calc(100% - 546px);} #mBoard .comm_wr .top_box{display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; background: #fff; border-radius: 100px;} #mBoard .comm_wr .top_box h4{font-weight: 700; font-size: 30px; color: #222;} #mBoard .comm_wr .top_box a.v_more{display: flex; align-items: center; gap: 15px; transition:all 0.4s ease;} #mBoard .comm_wr .top_box a.v_more p{font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px; color: #222;} #mBoard .comm_wr .top_box a.v_more img{width: 18px; filter: invert(7%) sepia(100%) saturate(6%) hue-rotate(317deg) brightness(96%) contrast(89%);} #mBoard .comm_wr .midd_box{display: flex; justify-content: space-between; gap: 25px; margin-top: 25px;} #mBoard .comm_wr .midd_box .noti_img{width: calc(50% - 12.5px); background: #fff; border-radius: 40px;} #mBoard .comm_wr .midd_box .noti_img a{display: block; padding: 20px;} #mBoard .comm_wr .midd_box .noti_img .img_box{overflow: hidden; display: flex; align-items: center; justify-content: center; width: 100%; height: 275px; border-radius: 25px;} #mBoard .comm_wr .midd_box .noti_img .img_box img{width: 100%;transition:all 0.4s ease;max-width: 100%;height: 100%;object-fit: cover;} #mBoard .comm_wr .midd_box .noti_img .txt_box{padding: 0 20px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit{display: flex; align-items: center; margin: 20px 0 15px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date{width: 70px; text-align: center;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date p.day{font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 50px; line-height: 1; color: #103125;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date p.y_m{font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.4px; color: #222;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit h5{width: calc(100% - 70px); padding-left: 30px; font-family: 'KoPubWorldDotum', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.4px; line-height: 1.4; color: #222; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} #mBoard .comm_wr .midd_box .noti_img .txt_box > p.cont{font-family: 'KoPubWorldDotum', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.4px; color: #999; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} #mBoard .comm_wr .midd_box .noti_img a:hover .img_box img{transform: scale(1.1);} #mBoard .comm_wr .midd_box ul.noti_list{width: calc(50% - 12.5px); padding: 40px 30px; border-radius: 40px; background: #fff;} #mBoard .comm_wr .midd_box ul.noti_list li{position: relative; border-bottom: 1px solid #eee; transition:all 0.4s ease;} #mBoard .comm_wr .midd_box ul.noti_list li::before{content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 1px; background: #103125; z-index: 1; transition:all 1s ease;} #mBoard .comm_wr .midd_box ul.noti_list li:first-child{border-top: 1px solid #eee;} #mBoard .comm_wr .midd_box ul.noti_list li a{display: block; padding: 20px 15px;} #mBoard .comm_wr .midd_box ul.noti_list li a p.date{display: block; margin-bottom: 6px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 17px; color: #103125;} #mBoard .comm_wr .midd_box ul.noti_list li a h5{font-family: 'KoPubWorldDotum', sans-serif; font-weight: 700; font-size: 20px; color: #222; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;} /* #mBoard .comm_wr .midd_box ul.noti_list li:hover{border-bottom: 1px solid #103125;} */ #mBoard .comm_wr .midd_box ul.noti_list li:hover::before{width: 100%;} #mBoard .comm_wr .bott_box{} #mBoard .comm_wr .bott_box ul.bann_li{display: flex; justify-content: space-between; width: 100%; margin-top: 40px;} #mBoard .comm_wr .bott_box ul.bann_li li{position: relative; width: 33.3333%; border-right: 1px solid #bbb;} #mBoard .comm_wr .bott_box ul.bann_li li:last-child{border-right: 0;} #mBoard .comm_wr .bott_box ul.bann_li li a{display: block; width: 100%; padding: 15px 30px;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box{} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box h5{font-family: 'KoPubWorldDotum', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: -0.4px; color: #222;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box .v_more{display: flex; align-items: center; gap: 10px; padding-top: 40px;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box .v_more p{font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px; color: #bbb;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box .v_more img{width: 12px; filter: invert(91%) sepia(4%) saturate(0%) hue-rotate(141deg) brightness(87%) contrast(79%);} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box{position: absolute; bottom: 15px; right: 30px; transition:all 0.4s ease;} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box img{width: 68px;} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box svg{display: block; width: 68px;} #mBoard .comm_wr .top_box a.v_more:hover{gap: 20px;} #mBoard .comm_wr .top_box a.v_more:hover img{-webkit-animation: rotate-center 0.6s ease-in-out both; animation: rotate-center 0.6s ease-in-out both;} #mBoard .comm_wr .bott_box ul.bann_li li a:hover .txt_box .v_more img{-webkit-animation: rotate-center 0.6s ease-in-out both; animation: rotate-center 0.6s ease-in-out both;} #mBoard .comm_wr .bott_box ul.bann_li li a:hover .img_box{transform: translateY(-10px);} /* SVG 기본 상태 (선 숨김) */ #mBoard .comm_wr .bott_box ul.bann_li li a .img_box svg .st0 {fill: none; stroke: #7A7A7A; stroke-width: 1.5; stroke-linecap: round; stroke-miterlimit: 10; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 8s ease;} /* 활성화 후 */ #mBoard .comm_wr .bott_box ul.bann_li li a .img_box svg.is-active .st0 {stroke-dashoffset: 0;} @media (max-width: 1340px) { #mBoard .comm_wr .midd_box {flex-direction: column;} #mBoard .comm_wr .midd_box .noti_img {width: 100%;} #mBoard .comm_wr .midd_box ul.noti_list {width: 100%;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box h5 {font-size: 26px;} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box svg {width: 40px;} } @media (max-width: 1200px) { #mBoard .tit_wr {width: 400px;} #mBoard .tit_wr .deco_wr .deco01 {width: 160px;height: 160px;} #mBoard .tit_wr .deco_wr .deco02 {width: 160px;height: 160px;} #mBoard .tit_wr .deco_wr .deco03 {width: 160px;height: 320px;} #mBoard .tit_wr .deco_wr .circle { top: 67px; /* gap: 12px; */ } #mBoard .tit_wr .deco_wr .circle img {width: 30px;} #mBoard .tit_wr .deco_wr .half {top: 187px;left: 49px;} #mBoard .tit_wr .deco_wr .half img {width: 65px;} #mBoard .comm_wr {width: calc(100% - 400px);} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box {bottom: initial;top: 21px;right: 7px;} } @media (max-width: 1024px) { #mBoard {padding: 120px 0 90px;} } @media (max-width: 991px) { #mBoard .tit_wr {display: none;} #mBoard .comm_wr {width: 100%;padding: 0 20px;} #mBoard .comm_wr .bott_box ul.bann_li li a .img_box {bottom: 15px;right: 30px;top: initial;} } @media (max-width: 768px) { #mBoard {padding: 100px 0 70px;} #mBoard .comm_wr .top_box h4 {font-size: 24px;} #mBoard .comm_wr .top_box a.v_more p {font-size: 16px;} #mBoard .comm_wr .top_box a.v_more img {width: 16px;} #mBoard .comm_wr .midd_box .noti_img .txt_box {padding: 0 16px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date p.day {font-size: 44px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date p.y_m {font-size: 14px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit h5 {font-size: 18px;padding-left: 16px;} #mBoard .comm_wr .midd_box .noti_img .txt_box > p.cont {font-size: 15px;} #mBoard .comm_wr .midd_box ul.noti_list li a p.date {font-size: 15px;} #mBoard .comm_wr .midd_box ul.noti_list li a h5 {font-size: 18px;} #mBoard .comm_wr .bott_box ul.bann_li {flex-direction: column;} #mBoard .comm_wr .bott_box ul.bann_li li {width: 100%;border-right: none;border-bottom: 1px solid #bbb;} #mBoard .comm_wr .bott_box ul.bann_li li:last-child {border-bottom: 0;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box h5 {font-size: 22px;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box .v_more p {font-size: 15px;} } @media (max-width: 564px) { #mBoard .comm_wr .top_box {padding: 20px 32px;} } @media (max-width: 480px) { #mBoard { padding: 70px 0 80px; } #mBoard .comm_wr .top_box h4 {font-size: 20px;} #mBoard .comm_wr .top_box a.v_more p {font-size: 14px;} #mBoard .comm_wr .midd_box .noti_img .img_box {height: 170px;} #mBoard .comm_wr .midd_box .noti_img .txt_box {padding: 0 4px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit .date p.day {font-size: 28px;} #mBoard .comm_wr .midd_box .noti_img .txt_box .tit h5 {padding-left: 8px;} #mBoard .comm_wr .midd_box ul.noti_list {padding: 32px 20px;} #mBoard .comm_wr .midd_box ul.noti_list li a h5 {font-size: 16px;} #mBoard .comm_wr .bott_box ul.bann_li li a {padding: 14px 20px;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box h5 {font-size: 20px;} #mBoard .comm_wr .bott_box ul.bann_li li a .txt_box .v_more p {font-size: 14px;} #mBoard .comm_wr .top_box a.v_more:hover {gap: 8px;} #mBoard .comm_wr .top_box a.v_more:hover img {width: 13px;} } /*--------------------------------------- About ---------------------------------------*/ #mAbout{position:relative;padding: 0px 0 120px;} #mAbout:before{ content:""; background: url('../images/main/mAbout_BG.jpg') no-repeat 50% 50% /contain; position: absolute; top: 30%; width: 1920px; height:766px; animation: scale_ani 10s infinite ease; } @keyframes scale_ani { 0{transform: scale(1);} 50%{transform: scale(0.9);} 100% {transform: scale(1);} } /* sec02 : 대학원 소개 */ #mAbout article{display:flex;max-width: 1500px;margin: 0 auto;width: 90%;justify-content: space-between;flex-direction: row-reverse;align-items: flex-start;} #mAbout .main-tit-box{position: sticky;right: 0;top: 0;width: calc(100% - 840px);padding-left: 150px;padding: 140px 0 0px 150px;} #mAbout .main-tit-box .mTit{position: relative;display: block;} #mAbout .main-tit-box .mTit h3{text-transform: uppercase;} #mAbout .main-tit-box .mTit p{margin-top: 30px; font-size: 26px; line-height: 1.4; color: #555;} #mAbout .main-tit-box .deco_wr{position: absolute; top: 6px; left: -70px;} #mAbout .main-tit-box .deco_wr > div{width: 40px; height: 40px; margin-bottom: 15px;} #mAbout .main-tit-box .deco_wr .deco01{background: url('../images/main/mIntro_tit_deco01.png') no-repeat 50% 50% /cover;} #mAbout .main-tit-box .deco_wr .deco02{background: url('../images/main/mIntro_tit_deco02.png') no-repeat 50% 50% /cover;} #mAbout .main-tit-box .deco_wr .deco03{background: url('../images/main/mIntro_tit_deco03.png') no-repeat 50% 50% /cover;} #mAbout .about-fix{position: relative;width: 1600px;gap: 60px;display: flex;padding-top: 140px;} #mAbout .about-list{} #mAbout .about-list.left{margin-top: 250px;} #mAbout .about-list.right{} #mAbout .about-list .about-item:first-child {/* margin-top: 0; */} #mAbout .about-list .about-item{margin-top: 50px; position: relative; display: block; width: 420px; height: 470px;} #mAbout .about-list .about-item > a{display: block; position: relative; width: 100%; height: 100%; padding: 40px 35px 50px; overflow: hidden; border-radius: 30px; background: #fff;} #mAbout .about-list .about-item .about-txt{display: flex; justify-content: space-between; flex-direction: column; height: 100%;color: #222;} #mAbout .about-list .about-item .about-txt h5 big{font-family: 'Poppins', sans-serif; font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.2px;} #mAbout .about-list .about-item .about-txt h5 small{display: block; margin-top: 5px; font-size: 24px; font-weight: 700; color: #555;} #mAbout .about-list .about-item .about-txt h5 big > b{font-weight: 800;} #mAbout .about-list .about-item .about-txt .v_more{display: flex; align-items: center; gap: 10px; padding-top: 40px;} #mAbout .about-list .about-item .about-txt .v_more p{font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 16px; color: #bbb;} #mAbout .about-list .about-item .about-txt .v_more img{width: 12px; filter: invert(91%) sepia(4%) saturate(0%) hue-rotate(141deg) brightness(87%) contrast(79%);} #mAbout .about-list .about-item .about-bg{position: absolute; right: -70px; bottom: 40px; width: 290px; height: 290px;} #mAbout .about-list .about-item .about-bg svg{display: block; width: 100%; height: auto;} #mAbout .about-list .about-item .about-bg svg .st0{fill: none; stroke: #30A82F; stroke-width: 3; stroke-linecap: round; stroke-miterlimit: 10; stroke-dasharray: 3000;/* 넉넉하게 */ stroke-dashoffset: 3000; transition: stroke-dashoffset 5s ease;} #mAbout .about-list .about-item .about-bg svg.is-active .st0{stroke-dashoffset: 0;} #mAbout .about-list .about-item.item01 .about-bg svg .st0{stroke-width: 2px; stroke-dasharray: 2000; stroke-dashoffset 10s ease;} #mAbout .about-list .about-item.item03 .about-bg svg{transform: scaleX(-1);} @keyframes rotate { 0% {transform: rotate(0deg) translateX(-50%);} 100% {transform: rotate(360deg) translateX(-50%);} } @media (min-width: 1921px){ #mProg{width: 100%; max-width: 1600px; margin: 0 auto;} } @media (max-width: 1460px){ #mAbout article {flex-direction: column; align-items: center;} #mAbout .main-tit-box {position: relative;right: auto;top: auto;width: 100%;padding: 0;text-align: center;display: inline-block;} #mAbout .main-tit-box .deco_wr { left: 285px; } #mAbout .main-tit-box .up-txt-box{display:inline-block;} #mAbout .main-tit-box .up-txt-box + .up-txt-box{margin-left:10px;} #mAbout .main-tit small{display: block;} #mAbout .main-tit-box .main-sub-tit {font-size: 28px; margin: 20px 0 70px;} #mAbout .about-fix {width: 100%;gap: 6%;padding-top: 80px;justify-content: center;} } @media (max-width: 1340px){ #mAbout .about-list .about-item > a {/* padding-top: 100%; */} } @media (max-width:1200px) { #mAbout .main-tit-box .deco_wr {left: 215px;} } @media (max-width:991px) { #mAbout .main-tit-box .deco_wr { left: 130px; } #mAbout .main-tit-box .deco_wr > div {width: 30px;height: 30px;} #mAbout .main-tit-box .mTit p {font-size: 18px;margin-top: 16px;} #mAbout .about-list .about-item {width: 340px;height: 390px;} #mAbout .about-list .about-item .about-bg {width: 200px;height: 200px;} #mAbout .about-list .about-item .about-bg svg {/* width: 60%; */} } @media (max-width: 767px){ #mAbout {padding: 0px 0 60px;} #mAbout .main-tit-box .deco_wr {left: 126px;} #mAbout .main-tit-box .deco_wr > div {width: 22px;height: 22px;margin-bottom: 4px;} #mAbout .main-tit-box .main-sub-tit {font-size: 17px; margin: 20px 0 20px;} #mAbout .main-tit-box .up-txt-box {display: block;} #mAbout .main-tit-box .up-txt-box + .up-txt-box {margin-left: 0;} #mAbout .about-fix {padding-top: 30px;flex-direction: column;align-items: center;gap: 20px;} #mAbout .about-list {width: 100%;display: flex;flex-direction: column;gap: 20px;} #mAbout .about-list.left {margin-top: 0;} #mAbout .about-list .about-item > a {/* padding-top:0%; */height: 100%;padding: 32px 32px 40px;} #mAbout .about-list .about-item .about-bg {width: 150px;height: 150px;right: -40px;} #mAbout .about-list .about-item {margin-top: 0;width: 100%;height: 300px;} #mAbout .about-list.list02 {margin-top: 20px;} #mAbout .about-list .about-item .about-txt {/* position: relative; *//* left: auto; *//* top: auto; *//* color: #fff; *//* padding: 30px; *//* text-align: center; */} #mAbout .about-list .about-item .about-txt h5 small {font-size: 18px;margin-bottom: 0px;} #mAbout .about-list .about-item .about-txt h5 big {font-size: 24px;} #mAbout .about-list .about-item .about-txt p {font-size: 15px;line-height: 1.5;color: rgb(255, 255, 255, .7);margin-top: 0px;} #mAbout .about-list .about-item .about-txt .v_more p {font-size:15px;} } @media (max-width:564px) { #mAbout .main-tit-box .deco_wr {left: 52px;} #mAbout .main-tit-box .deco_wr > div { } #mAbout .about-list {flex-direction: column;align-items: center;justify-content: center;} #mAbout .about-list .about-item {height:220px;} } @media (max-width:400px) { #mAbout .main-tit-box .deco_wr {left: 0;} #mAbout .main-tit-box .deco_wr > div { } } /* sec03 : 프로그램 */ #mProg{display: flex; padding-bottom: 150px;} #mProg .tit_wr{width: 30%;} #mProg .tit_wr .mTit h3{padding-left: 12%;} #mProg .tit_wr .mTit p{padding-left: 12%; color: #555;} #mProg .tit_wr .mTit a.v_more{display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 50px; padding: 30px 40px; background: #fff; border-radius: 0 100px 100px 0; transition:all 0.4s ease;} #mProg .tit_wr .mTit a.v_more p{margin-top: 0; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 18px; color: #222;} #mProg .tit_wr .mTit a.v_more img{width: 14px; filter: invert(7%) sepia(0%) saturate(29%) hue-rotate(152deg) brightness(101%) contrast(86%);} #mProg .tit_wr .mTit a.v_more:hover{gap: 20px;} #mProg .tit_wr .mTit a.v_more:hover img{-webkit-animation: rotate-center 0.6s ease-in-out both; animation: rotate-center 0.6s ease-in-out both;} #mProg .prog_all{width: 70%; padding-left: 120px;} #mProg .prog_all ul.main-tab{display: flex; align-items: center; flex-wrap: wrap; margin-bottom: 40px;} #mProg .prog_all ul.main-tab li{position: relative; padding: 15px 30px; font-weight: 700; font-size: 24px; color: #a2a2a2; cursor: pointer;} #mProg .prog_all ul.main-tab li::after{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 23px; background: #8b8b8b;} #mProg .prog_all ul.main-tab li:last-child::after{display: none;} #mProg .prog_all ul.main-tab li span{position: relative;} #mProg .prog_all ul.main-tab li span::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 6px; height: 6px; background: #30a82f; border-radius: 50%; opacity: 0; transition:all 0.4s ease;} #mProg .prog_all ul.main-tab li.active{color: #222;} #mProg .prog_all ul.main-tab li.active span::before{top: -2px; left: -8px; opacity: 1;} #mProg .prog_all ul.main-tab li:hover{color: #222;} #mProg .prog_all ul.main-tab li:hover span::before{top: -2px; left: -8px; opacity: 1;} #mProg .prog_all .main-tabcontent{display: none; position: relative;} #mProg .prog_all .arrow_box{position: absolute; top: -100px; right: 3%; display: flex; align-items: center;} #mProg .prog_all .arrow_box button{position: relative; padding: 0 35px; background: none; border-radius: 0; border: 0;} #mProg .prog_all .arrow_box button img{width: 22px; opacity: .3; transition:all 0.4s ease;} #mProg .prog_all .arrow_box button.p_prev::before{content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: block; width: 1px; height: 40px; background: #aaa; z-index: -1;} #mProg .prog_all .arrow_box button:hover img{opacity: 1;} #mProg .prog_all ul.prog_list{} #mProg .prog_all ul.prog_list li{width: 785px; margin-right: 30px; border-radius: 40px; background: #fff;} #mProg .prog_all ul.prog_list li.empty_li{min-height: 200px; display: flex; align-items: center; justify-content: center;} #mProg .prog_all ul.prog_list li a{display: flex; justify-content: space-between; width: 100%; padding: 20px 20px 20px 40px;} #mProg .prog_all ul.prog_list li a .txt_box{position: relative; width: calc(100% - 240px); padding-right: 40px;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr{display: flex; align-items: center; padding-top: 20px;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p{display: inline-block; padding: 10px 20px; font-weight: 700; font-size: 18px; line-height: 1; border-radius: 50px;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p.cate{color: #222; border: 1px solid #222;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p.state{color: #fff; background: #222; border: 1px solid #222;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p.state.finish{} #mProg .prog_all ul.prog_list li a .txt_box > h4.tit{margin-top: 20px; font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: -0.4px; color: #222; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} #mProg .prog_all ul.prog_list li a .txt_box dl.period{position: absolute; bottom: 10px; left: 0; display: flex; align-items: center; gap: 18px; padding: 15px 30px; background: #f4f4f4; border-radius: 50px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dt{font-weight: 700; font-size: 20px; line-height: 1; color: #222;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dd{font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 20px; line-height: 1; color: #222;} #mProg .prog_all ul.prog_list li a .img_box{overflow: hidden; position: relative; width: 240px; border-radius: 15px; border: 10px solid #fff; border: 1px solid #eee;} #mProg .prog_all ul.prog_list li a .img_box::before{content: ''; position: absolute; top: 0; left: 0; display: block; width: 101%; height: 101%; /* border: 10px solid #fff; */ border-radius: 15px; z-index: 1;} #mProg .prog_all ul.prog_list li a .img_box img{width: 100%; height: auto;} #mProg .cursor{display: none;} @media (min-width: 991px){ #mProg .prog_all ul.prog_list li a{cursor: none;} /* 마우스커서 */ #mProg .cursor{position:fixed; transform:translate(-50%, -50%); transition-property:background, transform;pointer-events:none; display: block; width: 130px; height: 130px; z-index: 2;} #mProg .cursor img{opacity:0; display: block; width: 97px; height: 97px; margin: 38px auto; line-height: 130px; transition:all 0.4s ease} #mProg .cursor.on::before{opacity: 1;} #mProg .cursor.on img{opacity:1;} } @media (max-width: 1500px) { #mProg .prog_all .arrow_box {position: relative;top: -20px;right: initial;left: 0;} #mProg .prog_all ul.prog_list li a .txt_box > h4.tit {font-size: 20px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period {padding: 16px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dt {font-size:16px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dd{font-size:16px;} } @media (max-width: 1200px) { #mProg {flex-direction: column;gap: 40px;} #mProg .tit_wr {width: 100%;} #mProg .tit_wr .mTit h3 {padding-left: 20px;} #mProg .tit_wr .mTit p {padding-left: 20px;} #mProg .tit_wr .mTit a.v_more {position: absolute;bottom: 0;right: 0;border-radius: 100px 0 0 100px;} #mProg .prog_all {width: 100%;padding-left: 0;} #mProg .prog_all .arrow_box {display: flex;align-items: center;justify-content: flex-end;} #mProg .prog_all ul.prog_list {padding-left: 20px;} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p {font-size: 16px;} } @media (max-width: 1024px) { #mProg {padding-bottom: 100px;} } @media (max-width: 768px) { #mProg {padding-bottom: 80px;} #mProg .tit_wr .mTit p {font-size: 18px;} #mProg .tit_wr .mTit a.v_more {padding: 16px 20px;} #mProg .tit_wr .mTit a.v_more p {font-size: 15px;} #mProg .prog_all ul.main-tab {padding-left: 20px;} #mProg .prog_all ul.main-tab li {font-size: 18px;padding: 8px 16px;} #mProg .prog_all .arrow_box button {padding: 0 20px;} #mProg .prog_all .arrow_box button img {width: 14px;} #mProg .prog_all .arrow_box button.p_prev::before {height: 26px;} #mProg .prog_all ul.prog_list li {width: 506px;} #mProg .prog_all ul.prog_list li a {padding: 20px;} #mProg .prog_all ul.prog_list li a .img_box {width: 197px;} #mProg .prog_all ul.prog_list li a .txt_box {width: calc(100% - 220px);} #mProg .prog_all ul.prog_list li a .txt_box .cate_wr p {font-size: 14px;padding: 8px 12px;} #mProg .prog_all ul.prog_list li a .txt_box > h4.tit {font-size: 18px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period {flex-direction:column;align-items:flex-start;gap: 8px;border-radius: 8px;width: 100%;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dt {font-size:14px;} #mProg .prog_all ul.prog_list li a .txt_box dl.period dd {font-size:14px;} } @media (max-width: 564px) { #mProg{gap: 20px;} #mProg .tit_wr .mTit a.v_more { position: relative; width: 95%; margin-top: 20px; padding: 10px 20px; border-radius: 0 100px 100px 0; } #mProg .prog_all ul.main-tab {padding-left: 20px; margin-bottom: 20px;} #mProg .prog_all ul.prog_list li {width: auto;} #mProg .prog_all ul.prog_list li a {flex-direction: column-reverse;align-items: center;justify-content: center;} #mProg .prog_all ul.prog_list li a .txt_box {padding-right: 0;} #mProg .prog_all ul.prog_list li a .txt_box dl.period {position:initial;} #mProg .prog_all ul.prog_list .slick-slide { width: calc(100vw - 40px) !important; } #mProg .prog_all ul.prog_list li { width: 100% !important; } #mProg .prog_all ul.prog_list li a { flex-direction: column-reverse; align-items: center; } #mProg .prog_all ul.prog_list li a .img_box { width: 50%; } #mProg .prog_all ul.prog_list li a .txt_box { width: 100%; padding-right: 0; } #mProg .prog_all ul.prog_list li a .txt_box dl.period { position: static; flex-direction: row; margin-top: 20px; } } @media (max-width: 480px) { #mProg .prog_all ul.main-tab {flex-wrap: wrap;} #mProg .prog_all ul.main-tab li {padding: 4px 8px;} #mProg .prog_all ul.main-tab li span {font-size: 16px;} } /* 참여기관 롤링 */ #m-link{position:relative; min-height:60px; padding:55px 0;} #m-link article{} #m-link .link_list{display: flex; align-items: center; gap: 10px; width: max-content; will-change: transform; animation: logoRoll 50s linear infinite;} #m-link .link-item{position: relative; display:block; width:200px; height:100%; height:80px; border-radius: 8px; overflow: hidden; margin-right: 10px; background: #fff; display: flex; justify-content: center; align-items: center; text-align:center;} #m-link .link-item img{height: 47px;} #m-link .link-item.logo01 img{height: 35px;} #m-link .link-item.logo02 img{height: 35px;} #m-link .link-item.logo03 img{height: 34px;} #m-link .link-item.logo04 img{height: 50px;} #m-link .link-item.logo05 img{height: 28px;} #m-link .link-item.logo06 img{height: 40px;} #m-link .link-item.logo09 img{height: 30px;} #m-link .link-item.logo13 img{height: 28px;} /* 끊김 없는 핵심: 트랙 전체 폭의 "절반(= 1세트)" 만큼 이동 */ @keyframes logoRoll{ from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 1600px){ #m-link .link-item{max-width: 260px; height: 76px; margin-right: 10px; margin-right: 0;} #m-link .link-item img{height:43px;} } @media (max-width: 1480px){ #m-link{padding:40px 0;} #m-link .link-item{max-width: none; display: flex; align-items: center; margin-right: 0;} #m-link .link-item img {max-width: 100%; position: inherit; left: auto; top: auto; transform: none; margin: 0 auto;} } @media (max-width: 860px){ #m-link{padding:35px 0;} #m-link .link-item {height: 62px;} #m-link .link-item img {padding: 4px; height: 40px;} } @media (max-width: 660px){ #m-link{padding:25px 0;} } @media (max-width: 480px){ #m-link{padding:20px 0;} #m-link .link-item{width: 140px; height: 52px; border-radius: 4px;} } /*--------------------------------------- footer ---------------------------------------*/ footer{overflow: hidden;} footer .footer_wr{width: 100%; max-width: 1820px; margin: 0 auto; margin-bottom: 20px; padding: 20px 22px; border-radius: 35px; background: #000;} footer .ft-top{display: flex; align-items: center; justify-content: space-between; padding: 35px 30px 75px;} footer .ft-top .f_info{display: flex; gap: 40px;} footer .ft-top .f_info dl{} footer .ft-top .f_info dl dt{margin-bottom: 8px; font-weight: 500; font-size: 18px; color: #fff; opacity: .5;} footer .ft-top .f_info dl dd{font-weight: 500; font-size: 16px; color: #fff;} footer .ft-top .f_info dl dd a {color:#fff;} footer .ft-right{text-align: right;} footer .ft-right .select_footer{position: relative; width: 310px; height: 60px; z-index: 10; text-align: left;} footer .ft-right .select_footer ul{position: absolute; bottom: 62px; display: none; width: 310px; border-radius: 10px; border : 0; background: #fff; transition: .3s; backdrop-filter : blur(3px); z-index: 999; } footer .ft-right .select_footer ul.open{display:block; padding: 14px 0; background: #103125;} footer .ft-right .select_footer ul li{color: #bebebe; text-indent:25px;} footer .ft-right .select_footer ul li a{display: block; font-size: 16px; color: #fff; padding: 7px 0; opacity: .6; transition:all 0.4s ease;} footer .ft-right .select_footer ul li a:hover{opacity: 1;} footer .ft-right .select_footer button.select_f_btn{border: 0; display: block; width: 310px; height: 60px; border-radius: 5px; text-align: left; padding: 0 25px; font-size: 16px; background: none; border: 1px solid rgba(255,255,255,.2); color: #878d96; letter-spacing: -.5px; font-weight: 600;} footer .ft-right .select_footer button.select_f_btn span.ir{width: 100%; display: flex; height: 100%; align-items: center; justify-content: space-between; transition:all 0.4s ease;} footer .ft-right .select_footer button.select_f_btn span.ir i{font-size:22px;color: #878d96;font-weight: normal;} footer .ft-right .select_footer button.select_f_btn.on span.ir i{transform: scaleY(-1);} footer .ft-bottom{display: flex; align-items: center; justify-content: space-between; padding: 15px 30px; background: #fff; border-radius: 50px;} footer .ft-bottom .copyright{} footer .ft-bottom .copyright p{font-family: 'KoPubWorldDotum', sans-serif; font-weight: 500; font-size: 16px; color: #222;} footer .ft-bottom ul.ft-logo{display: flex; align-items: center; gap: 25px;} footer .ft-bottom ul.ft-logo li{} footer .ft-bottom ul.ft-logo li a{} footer .ft-bottom ul.ft-logo li a img{} footer .ft-bottom ul.ft-logo li.f_logo02 a img{height: 32px;} footer .admin_btn{display: block; margin-top: 10px; color: #fff; opacity: .3; transition:all 0.4s ease;} footer .admin_btn:hover{opacity: 1;} /* 애니메이션 */ @-webkit-keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-center { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @media (min-width: 1820px){ footer{width: calc(100% - 40px); max-width: none;} } @media (max-width: 1500px) { footer .ft-top {flex-direction: column;align-items: flex-start;gap: 40px;} footer .ft-right {align-self: flex-end;} footer .ft-bottom {flex-direction: column-reverse;} } @media (max-width: 991px) { footer .ft-top .f_info {flex-direction: column;gap: 16px;} } @media (max-width: 768px) { footer .ft-top {padding: 24px 24px 40px;} footer .ft-top .f_info dl dt {font-size: 14px;} footer .ft-top .f_info dl dd {font-size: 14px;} footer .ft-right {font-size: 14px;} footer .ft-right .select_footer ul li a {font-size: 14px;} footer .ft-right .select_footer button.select_f_btn span.ir {font-size: 14px;} footer .ft-bottom .copyright p {font-size: 14px;} } @media (max-width: 564px) { footer .ft-bottom {gap: 16px;border-radius: 20px;} footer .ft-bottom ul.ft-logo {flex-direction: column;gap: 8px;} } @media (max-width: 480px) { footer .ft-right {align-self: flex-start;} footer .ft-right .select_footer {width: 230px;} footer .ft-right .select_footer ul {width: 230px;} footer .ft-right .select_footer button.select_f_btn {width: 230px;} footer .ft-bottom {padding: 20px;} }