/* <------------------- common ---------------------- */ #wrap { position: relative; overflow: hidden;} #wrap .scroll_wr{ position: relative;} #wrap .scroll_wr p.scroll{display: flex !important;gap: 16px;align-items: center;height: 63%;width: 80px;background: #fff;display: block;position: absolute;bottom: 0;left: 0;z-index: 100;font-size: 15px; color: #3d3d3d;padding-top: 74px;writing-mode: sideways-rl;font-weight: 600;} .w1400{width: 90%;} .main-tit {text-align: center; position: relative; margin-bottom: 40px;} .main-tit h3{color: var(--ink);font-size: 64px;font-weight: 700;line-height: 55px;transition: all 0.2s;position: relative;display: block;text-transform: uppercase;} .main-tit p{font-size: 19px; font-weight: 500; letter-spacing: 0.36px; padding-bottom: 6px; transition: all 0.2s;} small.subtit{font-size: 24px; color: var(--ink-subtle); display: block; margin-bottom: 45px; font-family: 'Pretendard'; text-transform: uppercase;} small.subtit-r{color: var(--main);} a.mbtn{padding: 9px;display:flex;align-items: center;border-radius: 35px;background: var(--surface-1);border: 1px solid var(--hairline);box-shadow: none;display: inline-block;margin-top: 50px;transition: .3s;} a.mbtn span{font-size: 16px;font-weight: 600;color: var(--ink);display: flex;align-items: center;gap: 20px;padding-right: 22px;} a.mbtn span i{background: var(--main);width: 40px;height: 40px;border-radius: 20px;display: flex;align-items: center;justify-content: center;color: #ffff;} a.mbtn-l{margin-top: 0;box-shadow: none;background: none;border: 1px solid var(--hairline);} a.mbtn:hover{background: var(--main);} a.mbtn:hover span{color: #fff;} a.mbtn:hover i{color: var(--main); background:#fff;} @media (max-width: 1400px){ .main-tit {margin-bottom: 30px;} .main-tit h3 {font-size: 48px;line-height: 1.3;} small.subtit{margin-bottom: 30px;} a.mbtn{margin-top: 45px;} } @media (max-width: 1280px){ small.subtit{font-size: 22px;} } @media (max-width: 1024px){ .main-tit {margin-bottom: 20px;} .main-tit h3 {font-size: 42px;} small.subtit{font-size: 20px !important; margin-bottom: 15px !important;} } @media (max-width: 767px){ .main-tit h3 {font-size: 38px;line-height: 1.15;} small.subtit{font-size: 18px !important; margin-bottom: 10px !important;} a.mbtn{margin-top: 30px;} a.mbtn span{font-size: 14px;gap: 16px;padding-right: 16px;} } @media (max-width: 500px){ a.mbtn span{font-size: 12px; gap: 13px;} a.mbtn span i{width: 28px; height: 28px;} } @media (max-width: 480px){ .main-tit h3 {font-size: 30px !important;} .main-tit p {font-size: 16px;} small.subtit{font-size: 16px !important;} } @keyframes moveArrow { 0% { transform: translateX(0px); } 49% { transform: translateX(50px); } 50% { transform: translateX(-50px); } 100% { transform: translateX(0px); } } .main-bg {position: absolute; z-index: -1; transition: all 0.2s;} .main-bg img {max-width: 100%;} /* 애니메이션 */ .a-up{transform:translateY(10%); opacity:0;} .a-up.in-view{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); opacity:0;} .a-left.in-view{transform:translateX(0px); opacity:1; transition:all 1s;} .a-right{transform:translateX(-15px); opacity:0;} .a-right.in-view{transform:translateX(0px); opacity:1; transition:all 1s;} .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;} /* <------------------- 메인 팝업 ---------------------- */ #main_modal { position: fixed; z-index: 9999; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 15%; top: 3%;} #main_modal .list-pops { width: 100%; max-width: 580px; display: flex; flex-direction: column; position: relative; box-shadow: 0px 0px 29px 4px rgb(0 0 0 / 20%); border-radius: 4px; overflow: hidden; } #main_modal .list-pops .sp-slides-container, #main_modal .list-pops .sp-image-container { flex: 1 1 auto; } #main_modal .list-pops img { width: 100%; height: auto; display: block; object-fit: contain; } .sp-thumbnail { display: inline-block; height: 55px; line-height: 55px; text-align: center; font-size: 20px; font-weight: bold; } .sp-thumbnails > div:last-child .sp-thumbnail { border-right: none; } .sp-bottom-thumbnails .sp-thumbnail-container, .sp-top-thumbnails .sp-thumbnail-container { margin: 0; } .sp-bottom-thumbnails .sp-thumbnail-container { background: #fff; } .sp-selected-thumbnail .sp-thumbnail { background: var(--main); } .sp-thumbnails .sp-thumbnail { width: 100%; } .sp-bottom-thumbnails .sp-selected-thumbnail:before, .sp-bottom-thumbnails .sp-selected-thumbnail:after { display: none; } .sp-bottom-thumbnails.sp-has-pointer { margin-top: 0; } .sp-bottom-thumbnails.sp-has-pointer .sp-thumbnail { position: static; top: auto; } #main_modal .close_btn { font-size: 30px; padding: 20px; cursor: pointer; color: #fff; text-align: center; position: absolute; top: 0; right: 0; font-weight: bold; transition: background-color .2s linear; z-index: 10; filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.5)); } #main_modal .close { background: var(--surface-2); color: var(--ink); padding: 9px 16px; display: flex; justify-content: space-between; align-items: center; flex: 0 0 auto; } #main_modal .close .check { display: flex; gap: 3px; font-size: 15px !important; } #main_modal .close button { background: none; border: 0; font-size: 15px !important; cursor: pointer; } #main_modal .sp-arrow { filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3)); } @media (max-width: 920px) { #main_modal { justify-content: center; padding: 20px; } #main_modal .list-pops { width: 90%; max-width: fit-content; } #main_modal .list-pops img { width: 100%; height: auto; } } @media (max-width: 480px) { #main_modal .list-pops { max-width: 340px; } #main_modal .close_btn { font-size: 24px; padding: 15px; } #main_modal .close { padding: 8px 12px; } #main_modal .close .check, #main_modal .close button { font-size: 13px !important; } } /* <------------------- 01 Visual ---------------------- */ #visual { position: relative; width: 100%; height: 850px; overflow: hidden; transition: all 0.1s; background: url('../images/main/mv-hero.png') center / cover no-repeat; } #visual::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1,1,2,.62) 0%, rgba(1,1,2,.22) 42%, rgba(1,1,2,.78) 100%); } .visual-wrap {position: relative;} .main-txt-wrap {position: relative;z-index: 2; max-width: 1400px;margin: 0 auto;padding-top: 280px;transition: all 0.2s;width: 90%;} .main-txt-wrap .main-txt {/* margin-top: 30px; */} .main-txt-wrap .main-txt h2 {color: var(--ink);font-size: 80px;font-weight: 600;line-height: 1.25;letter-spacing: -0.015em;text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); word-break: keep-all;} .main-txt-wrap .main-txt p {color: var(--ink-muted);font-size: 24px;font-weight: 500;margin-top: 28px;margin-right: 2px;font-family: 'Montserrat', sans-serif; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); word-break: keep-all;} /* 슬로건 애니메이션 */ #visual .main-txt .char{ animation: text-active-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: calc(60ms * var(--char-index)); } #visual .main-txt p .char{ animation-delay: calc(65ms * var(--char-index)); } @keyframes text-active-animation { from{opacity:0; transform: translateY(50%);} to{opacity:1; transform: translateY(0px);} } @media (max-width: 1400px) { #visual {height: 640px;} .main-txt-wrap {padding-top: 200px;} .main-txt-wrap .main-txt {margin-top: 24px;} .main-txt-wrap .main-txt h2 {font-size: 56px;line-height: 1.3;} .main-txt-wrap .main-txt p {font-size: 18px;margin-top: 24px;letter-spacing: 0;} #wrap .scroll_wr p.scroll{padding-top: 45px;} } @media (max-width: 1200px) { #visual {height: 530px;} .main-txt-wrap {padding-top: 150px;} .main-txt-wrap .main-txt {margin-top: 24px;} .main-txt-wrap .main-txt h2 {font-size: 48px;} .main-txt-wrap .main-txt p {font-size: 16px; margin-top: 18px;} } @media (max-width: 1024px) { #wrap .scroll_wr p.scroll{display: none !important;} } @media (max-width: 760px) { #visual {height: 480px;} .main-txt-wrap{} .main-txt-wrap .main-txt h2 {font-size: 40px;} } @media (max-width: 480px) { #visual {height: 420px;} #main-slide .img-wrap {height: 480px;} .main-txt-wrap {padding-top: 130px;text-align: center;} .main-txt-wrap .main-txt h2 {font-size: 34px;} .main-txt-wrap .main-txt p{margin-right: 0;text-shadow: 0px 0px 10px rgba(0,0,0,.5); margin-top: 12px;} } @media (max-width: 400px) { #visual {height: 390px;} .main-txt-wrap{padding-top: 115px;} } /* ------------------- 01 Visual ----------------------> */ /* <------------------- 02 Welcome ---------------------- */ /* info & radar */ .infoRadar {width: 100%; height: 762px; background: url(/images/main/intro_bg.jpg) no-repeat right center; background-size: cover; position: relative; z-index: 3;} .infoRadar::before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,.2);} .infoRadarWrap {display: flex;justify-content:space-between;align-items:center;height: 100%;width: 80%;} .info, .radar {position: relative; z-index: 1;} .infoRadarWrap .info {flex: 0 1 48%;margin-right: 80px;transform:translateX(40px);opacity: 0;transition:all 1.3s .2s;} .info.in-view {transform:translate(0); opacity: 1;} .info .infoTit {color:#fff; font-size:58px; margin-bottom: 35px; font-weight: 500;} .info .infoTit b {color:var(--main);} .info .infoTxt p {color: #fff; font-size: 22px; text-shadow: 0px 4px 17.3px rgba(0, 0, 0, 0.13); text-align: left; line-height: 1.4; font-weight: 300; word-break: keep-all;} .info .infoTxt p + p {margin-top: 20px;} .info .infoTxt b {color: #fff; font-weight: 600;} .radar {display: flex;height: 100%;align-items: center;justify-content: center;flex: 0 1 50%;transform:translateX(-40px);opacity: 0;transition:all 1.3s .2s;top: 50px; left: 0;} .radar.in-view {transform:translate(0); opacity: 1;} .radar .radCenter {position: relative;z-index: -10;width: auto;height: 426px;} .radar .radCenter:before{content: '';position: absolute;z-index: 1;display: block;width: 426px;height: 426px;align-items:center;background: url(../images/main/intro_Shape.png) center / contain no-repeat;right: 0;} .radar .radCenter i {background:url(/images/common/radIcon-00.png) no-repeat center center; background-size:cover; width: 45px; height: 45px;} .radar .radCenter p {font-size:1.4rem; color:var(--color-zpoint); margin-top: 15px; text-align: center; font-weight: 700; line-height: 1;} .radar .radItems {/* height: 78%; */display: flex;flex-direction:column;justify-content:space-between;gap: 50px;width: 100%;} .radCon {display: flex;align-items: center;} .radCon p {color: #fff;font-size: 25px;font-weight: 600;display: inline-block;margin-left: 20px;word-break: keep-all;} .radCon i.radIco {min-width: 92px; height: 92px; padding: 10px; background: url(/images/main/intro_icon1.png) #fff no-repeat center center; display: inline-block; border-radius: 50%; position: relative; z-index: 1;} .radCon:nth-of-type(2) i.radIco {background: url(/images/main/intro_icon2.png) #fff no-repeat center center;} .radCon:nth-of-type(3) i.radIco {background: url(/images/main/intro_icon3.png) #fff no-repeat center center;} .radCon:nth-of-type(4) i.radIco {background: url(/images/common/radIcon-04.png) #fff no-repeat center center;} .radCon:nth-of-type(5) i.radIco {background: url(/images/common/radIcon-05.png) #fff no-repeat center center;} .radCon:nth-of-type(2) {transform: translate(20px);} .radCon:nth-of-type(4) {transform: translate(-55px, 15px);} .radCon:nth-of-type(1), .radCon:nth-of-type(3) {transform: translateX(0);} .radCon i.radIco .radRot {background: url(/images/common/radRot.png) no-repeat center center;width: 100%;height: 100%;position: absolute;z-index: 2;top: 0;left: 0;} .radar.in-view .radCon i.radIco .radRot {animation:radRot 3s .3s ease-out forwards;} @media (max-width: 1440px) { .info .infoTit {font-size: 52px; margin-bottom: 30px;} .info .infoTxt p {font-size: 22px;} .radar {left: 0;} .radar .radCenter {margin-right: 80px; width: 220px; height: 220px;} .radar .radCenter::before {width: 370px; height: 370px; top: -55px; right: -60px;} } @media (max-width: 1280px) { .info .infoTxt p, .radar .radCenter p, .radCon p {font-size: 19px;} .info {margin-right: 55px;} .infoRadar {height: 720px;} .infoRadarWrap .info {margin-right: 0;} .radar .radCenter::before {width: 350px; height: 350px;} } @media (max-width: 1080px) { .infoRadar {height: 860px; padding: 45px 0;} .infoRadarWrap {width: 90%;} .infoRadarWrap .info {display: flex; flex-direction: column; flex: 0;} .info .infoTit {font-size: 44px; margin-bottom: 20px;} .infoRadarWrap {flex-direction: column; justify-content: space-evenly;} .info {margin-right: 0; flex: 0;} .radar {margin-top: 0;top: 0;left: 0;} .radar .radCenter {margin-right: 100px;} .radar .radItems {gap: 35px;} #wrap .scroll_wr p.scroll {display: none !important;} } @media (max-width: 800px) { .infoRadar {height: 720px; padding: 35px 0;} .info .infoTit {font-size: 36px;} .info .infoTxt p, .radar .radCenter p {font-size: 16px;} .radCon p {font-size: 17px;} .radCon i.radIco {width: 68px; height: 68px; min-width: auto;} .radCon i.radIco, .radCon:nth-of-type(2) i.radIco, .radCon:nth-of-type(3) i.radIco, .radCon:nth-of-type(4) i.radIco, .radCon:nth-of-type(5) i.radIco {background-size: 54px;} .radCon i.radIco .radRot {background-size: 48px;} .radar .radCenter {margin-right: 80px; width: 180px; height: 180px;} .radar .radCenter::before {width: 280px; height: 280px;} .radar .radCenter::after {width: 220px; height: 220px;} .radar .radItems {height: auto;gap: 35px;} .radCon:nth-of-type(5) {transform: translate(-120px, 15px);} .radCon:nth-of-type(4) {transform: translate(-45px, 15px);} } @media (max-width: 780px) { .radar {left: 70px;} } @media (max-width: 650px) { .infoRadar {padding: 50px 0 20px;} .info .infoTit {font-size: 28px;} .info .infoTxt p, .radar .radCenter p {font-size: 16px;} .radar {flex-direction: column; width: 100%; margin-top: 0; left: 0; justify-content: flex-start;} .radar .radCenter {margin-right: 0; padding: 24px; height: 140px; display: none;} .radCon {width: 170px; margin-bottom: 0;} .radCon p {margin-left: 12px;} .radCon p br {display: none;} .radar .radItems {justify-content: space-between; margin-top: 25px; height: auto; gap: 24px;} .radCon:nth-of-type(1), .radCon:nth-of-type(2), .radCon:nth-of-type(3), .radCon:nth-of-type(4), .radCon:nth-of-type(5) {transform: translate(0) !important; width: 90%;} .radCon i.radIco {flex-shrink: 0;} } @media (max-width: 400px) { .infoRadar {height: 750px;} .info .infoTit {font-size: 24px;} .radar .radItems {flex-direction: column; margin-top: 34px;} } @media (max-width: 320px) { .infoRadar {height: 860px;} .info .infoTit {font-size: 20px;} .info .infoTxt p, .radar .radCenter p {font-size: 14px;} } /* <------------------- 03 Research ---------------------- */ /* main Research */ #mrch{padding: 135px 0 70px; background: var(--canvas) url('../images/main/rsch_bg.png') no-repeat center / cover; position: relative;} #mrch::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(180deg, rgba(1,1,2,0.88) 0%, rgba(1,1,2,0.78) 100%); z-index:0; pointer-events:none;} #mrch > *{position: relative; z-index:1;} #mrch .research{} #mrch .research .media{position: relative;} #mrch .research.r_video.r2{flex-direction: row-reverse;} #mrch .research.r_video .txt{/* width: 36%; */} #mrch .research.r_video{margin: 80px auto;display: flex;justify-content: space-between;flex-wrap: wrap;gap: 6px;} #mrch .research.r_video:first-child{margin-top: 0;} #mrch .research.r_video .media {width: 50%;aspect-ratio: 3 / 2;overflow:hidden;position: relative;} #mrch .research.r_video .media .rvd_thum{cursor: pointer;width: 100%;height: 100%;position: absolute;z-index: 100;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} #mrch .research.r_video .media .rvd_thum::before{width: 100%;height: auto;position: absolute;left: 0;top: 0;content: '';background: rgb(0,11,255);background: linear-gradient(145deg, var(--main-ho) 0%, var(--main) 100%);z-index: 101;opacity:0;-webkit-transition: .5s;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;transition: .5s;} #mrch .research.r_video .media .rvd_thum img{width:100%;height:100%;object-fit:cover;position: absolute;left: 0;top: 0;} #mrch .research.r_video .media .rvd_video{} #mrch .research.r_video .media .rvd_btn{cursor: pointer;position: absolute;width: 100px;height: 100px;left: 50%;top: 50%;transform:translate(-50%,-50%);z-index: 102;} #mrch .research.r_video .media .rvd_btn img{position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);-webkit-transition: 0.8s;-moz-transition: 0.8s;-ms-transition: 0.8s;-o-transition: 0.8s;transition: 0.8s;} #mrch .research.r_video .media .rvd_btn img:first-child{left: 52%;} #mrch .research.r_video:hover .media .rvd_thum::before{opacity: 0.3;} #mrch .research.r_video .media:hover .rvd_btn img.circle{transform:translate(-50%,-50%) rotate(180deg);} #mrch .research.r_video .txt .detail_wr{position: absolute;} #mrch .research.r_video.r1 .txt{padding-left: 0px;} #mrch .research.r_video.r2 .txt{left: 4%;} #mrch .research.r_video .txt img{float: right;position: relative;top: 90px;} #mrch .research.r_video.r2 .txt img{position: relative;right: -50px;top: 70px;} #mrch .research .txt{padding-top: 60px;position: relative;line-height: 1.35;} #mrch .research .txt .subj_wr{padding-top: 30px;/* padding-right: 10px; */} #mrch .research .txt .subj_wr big{font-size: 200px;font-family: 'pretendard';position: absolute;left: -60px;top: -16px;font-weight: 700;letter-spacing: -2px;color: rgba(255,255,255,0.04);z-index: -10;pointer-events: none;} #mrch .research .txt .subj_wr .no{font-size: 18px;color: var(--main);letter-spacing: 1px;font-family: 'pretendard';font-weight: 300;} #mrch .research .txt .subj_wr .subject{font-size: 40px;word-break: keep-all;font-weight: 700;margin: 20px 140px 0 0;line-height: 1.45;} #mrch .research .txt .subj_wr .sum{font-size: 18px;margin-top: 50px;color: #888;} #mrch .research .txt .detail_wr{position: relative;text-align: right;} #mrch .research .txt .detail_wr a.r_btn {padding: 5px 15px;border-bottom: 2px solid var(--main);display: inline-block;position: relative;} #mrch .research .txt .detail_wr a.r_btn::before {width:0;height: 100%;left: 0;bottom: 0;background: var(--main);z-index: 2;position: absolute;content: '';-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;} #mrch .research .txt .detail_wr a.r_btn span{font-size: 15px;text-transform: uppercase;font-weight: 700;color: var(--main);z-index: 4;position: relative;-webkit-transition: .3s;-moz-transition: .3s;-ms-transition: .3s;-o-transition: .3s;transition: .3s;} #mrch .research .txt .detail_wr a.r_btn:hover::before{width: 100%;} #mrch .research .txt .detail_wr a.r_btn:hover span{color: #fff;} #mrch .research.r_video .txt{flex: 1 1 44%;} #mrch .research .media .line{width: calc(100% - 60px);height: calc(100% - 60px);position: absolute;left: 50%;top: 50%;transform:translate(-50%,-50%);z-index: 105;} #mrch .research .media .line span{display: block;background: #fff;position: absolute;} #mrch .research .media .line span::before, #mrch .research .media .line span::after{-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%; position: absolute;content: ''; } #mrch .research .media .line span.hor{width: 90%;height: 1px;left: 50%;transform:translateX(-50%);} #mrch .research .media .line span.hor.h1{top: 50%;top: 0;} #mrch .research .media .line span.hor.h1::before{width: 14px;height: 14px;border: 1px solid #fff;top: -7px; left: -9px;} #mrch .research .media .line span.hor.h1::after{background: #fff;width: 6px;height: 6px;left: -5px;top: -3px;} #mrch .research .media .line span.hor.h2{bottom: 0;} #mrch .research .media .line span.hor.h2::before{width: 14px;height: 14px;border: 1px solid #fff;top: -7px;right: -9px;} #mrch .research .media .line span.hor.h2::after{ background: #fff;width: 6px;height: 6px;right: -5px;top: -3px;} #mrch .research .media .line span.ver{width: 1px;height: 95%;top: 50%;transform:translateY(-50%);} #mrch .research .media .line span.ver.v1{left: 0;} #mrch .research .media .line span.ver.v1::after{background: #fff;width: 7px;height: 7px;left: -3px;bottom: -4px;} #mrch .research .media .line span.ver.v2{right: 0;height: 88%;top: 52%;} #mrch .research .media .line span.ver.v2::before{width: 15px;height: 15px;border: 4px solid #fff;left: -7px;top: -14px;} #mrch .research.ani{opacity: 0;-webkit-transition: .9s;-moz-transition: .9s;-ms-transition: .9s;-o-transition: .9s;transition: .9s;} #mrch .research.r1.ani{transform:translateX(5%)} #mrch .research.r2.ani{transform:translateX(-5%);gap: 0;} #mrch .research.r3.ani{transform:translateX(-5%);-webkit-transition: .1.5s;-moz-transition: .1.5s;-ms-transition: .1.5s;-o-transition: .1.5s;transition: .1.5s;} #mrch .research.r4.ani{transform:translateX(5%);-webkit-transition: .1.5s;-moz-transition: .1.5s;-ms-transition: .1.5s;-o-transition: .1.5s;transition: .1.5s;} #mrch .research.ani.in-view{opacity: 1;transform:translateX(0)!important} @media (max-width:1440px){ #mrch article{padding: 0 3%;} } @media (max-width:1350px){ #mrch .research.r_video, #mrch .research.r_video.r2{flex-direction: column; align-items: center;} #mrch .research.r_video .media{width: 100%;max-width: 640px;} #mrch .research.r_video .txt{width: 100%;flex: 1 1 100%;} #mrch .research.r_video.r2 .txt{left: 0;} #mrch .research.r_video .txt img{top:0px;width: 90px;/* float: left; */} #mrch .research .txt .subj_wr big{font-size: 170px;} } @media (max-width:1280px){ #mrch .research.r_video{margin: 60px auto;} #mrch .research .txt .subj_wr .no {font-size: 16px;} #mrch .research .txt .subj_wr .subject {font-size: 40px;margin-top: 8px;} #mrch .research .txt .subj_wr .sum{font-size: 17px;margin-top: 36px;} #mrch .research .txt{padding-top: 36px;} #mrch .research .txt .subj_wr big{font-size: 150px;} #mrch .research.r_video.r1 .txt, #mrch .research.r_video.r2 .txt{padding-left: 0;} } @media (max-width: 1080px){ #mrch{max-width:800px;margin: 0 auto;padding: 100px 0 45px;} #mrch .main-tit{width: 90%; margin: 0 auto;} #mrch .research{margin-bottom: 30px!important;} #mrch .research.r_video .media{width: 100%;} #mrch .research .txt {padding: 20px;width: 100%;} #mrch .research.r_video .txt .detail_wr {position: relative;bottom: 0;text-align: left;} #mrch .research.r_video.r2 .txt img{right:0; top: -70px;} #mrch .research .txt .subj_wr big{font-size: 140px;} #mrch .research .txt .subj_wr {padding-top: 5px;} #mrch .research .txt .subj_wr .no {/* letter-spacing: 1px; *//* font-size: 14px; */} #mrch .research .txt .subj_wr .subject {font-size: 31px;} #mrch .research .txt .subj_wr .sum{margin-top: 30px;} #mrch .research .txt .detail_wr{margin-top: 30px;} #mrch .research.r_video .txt img{top:-90px;} } @media (max-width:768px){ #mrch {padding: 70px 0 30px;} #mrch article {padding: 0;} #mrch .research{margin-bottom: 0px !important;} #mrch .research.r_video{margin: 50px auto;} #mrch .research.r_video:first-child{margin-top: 0;} #mrch .research.r_video.r1 .txt, #mrch .research.r_video.r2 .txt{width: 100%;} #mrch .research .txt .subj_wr .subject{margin-right: 0;} #mrch .research .txt .subj_wr .subject br{display: none;} #mrch .research .txt .subj_wr big{display: none;} #mrch .research .txt .detail_wr{margin-top: 15px;} } @media (max-width:600px){ #mrch .research.r_video .media{} #mrch .research .txt .subj_wr .subject {font-size: 32px;} #mrch .research .txt .subj_wr .sum{font-size: 15px;margin-top: 25px;} #mrch .research .media .line {width: calc(100% - 40px);height: calc(100% - 40px);} } @media (max-width:560px){ #mrch .research .txt .subj_wr .subject{font-size: 28px;} } @media (max-width:500px){ #mrch{padding: 60px 0 30px;} #mrch .research.r_video .txt img{width: 75px; top: -75px;} #mrch .research .txt .detail_wr{margin-top: 15px;} } @media (max-width:480px){ #mrch .research .txt .subj_wr{padding-top: 8px;} #mrch .research .txt .subj_wr .subject{font-size: 26px;letter-spacing: 0;margin-top: 5px;line-height: 1.4;} #mrch .research.r_video .media .rvd_btn img{width: 80px;} #mrch .research.r_video .media .rvd_btn img:first-child{width: 13px;} #mrch .research .txt{padding: 0;} #mrch .research.r_video.r1 .txt, #mrch .research.r_video.r2 .txt{padding: 6px 0px !important;} #mrch .research.r_video .txt img{width: 60px; top: -60px;} } @media (max-width:400px){ #mrch .research.r_video .media{} #mrch .research .txt .subj_wr{padding-top: 0;} #mrch .research .txt .subj_wr .no {font-size: 15px;} #mrch .research .txt .subj_wr .subject{font-size: 24px;} #mrch .research .txt .detail_wr {margin-top: 10px;} } /*---------------------------- 04 Pub ----------------------------*/ #pub{padding: 130px 0 180px 0;position: relative;background: var(--canvas);} #pub .main-tit{text-align: left;display: flex;align-items: flex-start;gap: 0;flex-direction: column;} #pub .txt{display: flex;align-items: center;gap: 64px;} #pub .txt .indi_wr{display: flex;align-items: center;gap: 40px;} #pub .indi{gap: 30px; display: flex;align-items: center;} #pub .indi:before{content: ''; display: inline-block; width: 147px; height: 1px; background: var(--hairline);} #pub small.subtit{margin-bottom: 35px;} #pub .pub_wr{position: relative;z-index: 60;} #pub:before{content:'';display: block;position: absolute;top:0;height: 690px;width: 100%;background: #00000006;background-attachment: fixed;} #pub:after{content:'';display: block;position: absolute;bottom:36%; left: 0; height: 448px; width: 100px;background: var(--main);} #pub .txt_top .tit_wr{display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: flex-end;} #pub .slick-list{padding: 30px 0 20px 0;} /* -------- slick dot ------------ */ #pub .slick-dots li {display: inline-block; font-size: 0; width: 10px; height: 10px; background: #c7c7c7; border-radius: 50%; opacity: .5; position: relative; cursor: pointer;} #pub .slick-dots li + li {margin-left: 34px;} #pub .slick-dots li::before{position: absolute;opacity: 0;border: 1px solid #333;width: 30px;height: 30px;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%,-50%);content: '';-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} #pub .slick-dots li.slick-active {opacity: 1;} #pub .slick-dots{position: relative; bottom: 0;} #pub .slick-dots li.slick-active {opacity: 1; width: 10px; height: 10px; background: var(--main);} #pub .slick-dots li.slick-active::after{content:''; position: absolute;opacity: 1;border: 1px solid var(--main);width: 18px; height: 18px;border-radius: 50%;left: 50%;top: 50%;transform: translate(-50%,-50%);content: '';-webkit-transition: .3s;-o-transition: .3s;transition: .3s;} #pub .slick-dots li button{display: none;} #pub .navimg{position: absolute; left: 50%; top: 30px; transform: translate(-50%, 0%); width: 90%; z-index: 100;} #pub .pub-cont{position:absolute;margin-left:-20px;left:0%;bottom: 0;} #pub .pub-list{position:relative; display: flex; max-width: 1670px; margin-left: auto; overflow: hidden; z-index: 60;} #pub .pub-list li{transition:.3s;position:relative;margin:0 20px;color: var(--ink);} #pub .item-pub{position:relative;transition:.3s;position:relative;border: 1px solid var(--hairline);backdrop-filter: blur(8px);padding: 55px 30px;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;transition: .3s;width: 100%;height: 500px;background: var(--surface-1);} #pub .item-pub a{ color: var(--ink);} #pub .item-pub .year{font-size: 24px;font-weight: 600;display: inline-block;color: var(--main);} #pub .item-pub .pub-tit{font-size: 22px;line-height: 1.4;font-weight: 600;word-break: keep-all;/* display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; */color: var(--ink);padding: 18px 0 32px 0;} #pub .item-pub dl{color: var(--ink-muted);font-family: 'Pretendard';font-size: 17px;display: flex;gap: 16px;word-break: keep-all;justify-content: flex-start;padding-bottom: 12px; letter-spacing: -.5px;} #pub .item-pub dl dt{min-width: 86px;font-weight: 500;} #pub .item-pub dl dd{line-height: 1.5;font-size: 16px;min-width: 205px;color: var(--ink-subtle);} #pub .item-pub .text_wr{display: flex;} #pub .item-pub .pub-txt{font-style: normal;font-weight: 400;opacity: .8;line-height: 1.5;display: block;font-size: 17px;padding-top: 20px;word-break: keep-all;/* display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; */color: var(--ink-muted);} #pub .item-pub span.view{display: inline-block;font-size: 17px;border-bottom: 2px solid var(--main);position: absolute;bottom: 60px;text-transform: uppercase;color: var(--ink);font-weight: 500;} #pub .item-pub:hover{background: var(--surface-2);border-color: var(--hairline-strong); box-shadow: none;transform: translateY(-6px);} #pub .item-pub:hover .year{color:#fff; opacity:1;} #pub .item-pub:hover .pub-tit{color:#fff;} #pub .item-pub:hover .pub-txt{color:#fff;opacity:1;} #pub .item-pub:hover span.view{border-bottom: 1px solid #fff; color: #fff;} #pub .item-pub:hover dl{color:#fff;} #pub .item-pub:hover dd{color:#fff;} @media (max-width: 1680px){ #pub{height: auto; padding: 120px 0;} #pub:after{display: none;} #pub .slick-list {padding-top: 60px;} #pub .pub-list{max-width: 1400px; width: 90%; margin: 0 auto;} #pub .tit_wr .more{padding-top:0; align-items: center;} } @media (max-width: 1440px){ #pub{padding: 100px 0;} #pub:before{height: 600px;} #pub .slick-list {padding-top: 35px;} #pub .item-pub{height: 420px;padding: 35px;} #pub a.mbtn{margin-top: 0 !important;} #pub .item-pub .pub-tit{padding: 0;margin: 15px 0 20px 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;max-height: 76px;} #pub .item-pub dl{flex-direction: row;gap: 4px;justify-content: flex-start;} #pub .item-pub .year{font-size: 20px;} } @media (max-width: 1280px){ #pub .slick-list{padding-top: 30px;} #pub .item-pub dl {flex-direction: column;} } @media (max-width: 1080px){ #pub .item-pub {} #pub .item-pub .pub-tit{font-size: 20px;} #pub .item-pub .pub-txt{font-size: 16px;} } @media (max-width: 980px){ #pub{padding: 75px 0;} #pub:before{height: 540px;} #pub .slick-list{padding-top: 20px;} #pub .slick-dots li + li{margin-left: 27px;} #pub .item-pub .year{font-size: 17px;} #pub .txt {align-items: flex-start;gap: 10px;flex-direction: column;} #pub .main-tit h3{font-size: 42px;} #pub .txt{width: 100%;} #pub .txt .indi_wr{width: 100%; justify-content: space-between;} #pub .indi:before{display: none;} } @media (max-width: 680px){ #pub:before{} #pub .item-pub .pub-tit{font-size: 20px;} #pub .item-pub .pub-txt{font-size: 16px;} #pub .item-pub span.view{font-size: 16px; bottom: 50px;} #pub .item-pub {height: 400px;} } @media (max-width: 480px){ #pub{padding: 70px 0;} #pub .txt_top .tit_wr{flex-direction: column; gap: 20px; align-items: flex-start} #pub .pub-list li{margin: 0 16px;} #pub .item-pub{padding: 28px;height: 380px;} #pub .item-pub .pub-tit{margin: 10px 0 14px 0;} #pub .item-pub dl{font-size: 16px;} #pub .item-pub dl {font-size: 15px;} #pub .item-pub span.view{font-size: 15px;} #pub .main-tit h3{font-size: 36px !important;} } @media (max-width: 420px){ #pub{padding: 60px 0;} #pub .slick-list{padding-top: 15px;} #pub .slick-dots li{width: 8px; height: 8px;} #pub .slick-dots li.slick-active{width: 8px; height: 8px} #pub .slick-dots li.slick-active::after{width: 16px; height: 16px;} #pub .slick-dots li + li{margin-left: 20px;} #pub .item-pub .year{font-size: 16px;} #pub .txt_top .tit_wr{gap: 12px;} #pub .item-pub .pub-txt{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;} #pub .txt{gap: 18px;} } /* ----------------------------contact------------------------------ */ #contact{background: var(--surface-1);border-top: 1px solid var(--hairline);border-bottom: 1px solid var(--hairline);margin-bottom: 120px;position: relative;} #contact .contact_wr{display: flex;} #contact .contact_wr .txt{padding: 120px 0;width: 52%;text-align: left;margin-bottom: 0;} #contact .contact_wr .txt h3{color: var(--ink);} #contact .contact_wr .txt ul{color: var(--ink-muted);} #contact:before{content:'';position: absolute;display: none;width: 100%;height: 100%;background: #000;opacity: .6;} #contact .contact_wr .txt h3{text-align: left;} #contact .contact_wr .txt ul{font-size: 19px; font-weight: 500; padding: 44px 70px 62px 0;word-break: keep-all;line-height: 1.6;letter-spacing: -.5px;} #contact .contact_wr .txt ul li{padding-bottom: 30px;} #contact .contact_wr .txt ul li:last-child{padding-bottom: 0;} #contact .contact_wr .txt a{margin-top: 0px;} #contact .contact_wr .img_wr{background: url('../images/main/contact_bg.jpg') center / cover no-repeat;width: 48%;position: absolute;right: 0;height: 100%;} @media (max-width: 1680px){ } @media (max-width: 1440px){ #contact .contact_wr .txt{padding: 90px 0;} #contact .contact_wr .txt ul{padding: 32px 70px 56px 0;} } @media (max-width: 1200px){ #contact{background: url('../images/main/contact_bg.jpg') center / cover no-repeat; color: #fff;} #contact:before{display: block;} #contact .contact_wr .img_wr{display: none;} #contact .contact_wr .txt{width: 100%;} #contact .contact_wr .txt h3{color: #fff;} #contact a.mbtn span{color: #fff;} #contact .contact_wr .txt ul li{padding-bottom: 20px;} } @media (max-width: 980px){ #contact{margin-bottom: 100px;} #contact a.mbtn span{} #contact .contact_wr .txt{padding: 80px 0;} #contact .contact_wr .txt ul{padding: 15px 40px 50px 0; font-size: 18px;} } @media (max-width: 740px){ #contact{margin-bottom: 80px;} } @media (max-width: 580px){ #contact .contact_wr .txt{padding: 75px 0;} #contact .contact_wr .txt ul{padding-bottom: 35px;} } @media (max-width: 450px){ #contact{margin-bottom: 50px;} #contact .contact_wr .txt{padding: 70px 0;} #contact .contact_wr .txt ul{font-size: 17px;} #contact .contact_wr .txt ul li {padding-bottom: 15px;} } /* ----------------------------footer------------------------------ */ footer{clear:both;position:relative;background: var(--canvas);border-top: 1px solid var(--hairline);padding: 65px 0;} footer.sfooter{padding:0;} footer article{position:relative; width:90%; max-width:1400px; margin:0 auto;} footer .ft-top{position: relative; border-bottom: 1px solid var(--hairline); padding-bottom: 30px;} footer .ft-top:before{content:"";width:1px;height:20px;right:0;bottom:0;background:var(--hairline);position: absolute;} footer .ft-logo{display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px;} footer .ft-logo > a > img{max-width:100%;} footer .ft-bottom{} footer .ft-bottom .fb-logo{} footer .ft-bottom .fb-logo img{width: 180px; height: auto;} footer .copyright{} footer .copyright{width: 100%;display: flex;align-items: flex-start;justify-content: space-between;gap: 20px;} footer .copyright address, footer cite{display:block;font-style:normal;line-height:1.8;} footer .copyright address{font-size:16px;color: var(--ink-subtle);} footer .copyright address dl{display: flex;color: var(--ink-subtle);} footer .copyright address dl:nth-child(1){margin-bottom: 20px;} footer .copyright address dl dt{width: 90px;font-weight: 700;color: var(--ink-muted);} footer .copyright address dl dd{/* opacity: .7; */font-weight: 500;word-break: keep-all;color: var(--ink-subtle);} footer .copyright address dl dd a{color: var(--ink-subtle);font-weight: 500;} footer .copyright address dl dd a:hover{text-decoration:underline;} footer .ft-menu{display:inline-flex;gap: 60px;font-size:0;line-height:0;padding:0;margin:0;flex-direction: row;align-items: center;} footer .ft-menu li{transition:.2s ease-out;} footer .ft-menu li a{font-size: 17px;line-height:1;color: var(--ink-subtle);font-weight:normal;transition:.2s ease-out; word-break: keep-all;} footer .ft-menu li:first-child a{/* color:#f06c55; */} footer .ft-menu li:hover a{color: var(--ink);} footer cite{font-size:16px;color: var(--ink-subtle);font-style:normal;font-weight: 500;display: block;margin-top: 50px;} footer cite span{color: var(--main); text-decoration: underline;} footer .link-green{color: var(--ink-subtle);transition:.2s ease-out;} footer .link-green:hover{color:var(--main);} @media (max-width: 1200px){ footer .copyright address dl{flex-direction: column;} } @media (max-width: 1100px){ footer{padding: 55px 0;} footer .ft-menu{gap: 35px;} footer .ft-top{padding-bottom: 20px;} footer .ft-logo > a > img{max-width: 90%;} footer .ft-bottom .fb-logo img{width: 180px; height: auto;} } @media (max-width: 860px){ footer{padding: 50px 0;} footer .ft-menu li a{font-size: 16px;} footer .copyright{flex-direction: column; gap: 30px;} footer cite{margin-top: 40px;} } @media (max-width: 700px){ footer .copyright address{font-size: 15px; line-height: 1.6;} footer .copyright address dl dd a{font-size: 16px;} footer .ft-bottom .fb-logo img{width: 175px; height: auto;} } @media (max-width: 600px){ footer {padding: 40px 0;} footer .ft-logo > a > img {max-width: 80%;} } @media (max-width: 500px){ footer {padding: 40px 0;} footer .copyright{padding: 0;} footer .ft-logo > a > img {max-width: 70%;} footer .ft-bottom .fb-logo img{width: 140px; height: auto;} } @media (max-width: 400px){ footer .ft-top {padding-bottom: 14px;} footer .ft-menu li a{ font-size: 15px;} footer cite{margin-top: 30px; font-size: 15px;} } /* 강동경희대학교병원 서브 로고 (헤더 좌상단, 경희대 마크 아래) */ .nav .hd-wrap .cs-logo{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;} .nav .hd-wrap .cs-logo .gd-logo{margin:0; line-height:1;} .nav .hd-wrap .cs-logo .gd-logo a{display:flex; align-items:center; gap:8px;} .nav .hd-wrap .cs-logo .gd-logo img{height:35px; width:auto; display:block; image-rendering:auto;} @media (max-width:1400px){ .nav .hd-wrap .cs-logo .gd-logo img{height:31px;} } @media (max-width:767px){ .nav .hd-wrap .cs-logo{gap:4px;} .nav .hd-wrap .cs-logo .gd-logo img{height:29px;} } @media (max-width:480px){ .nav .hd-wrap .cs-logo .gd-logo img{height:26px;} } /* Contact 이미지 패널 → 위치 지도 */ #contact .contact_wr .img_wr{background: var(--surface-2); overflow: hidden;} #contact .contact_wr .img_wr iframe.contact-map{width: 100%; height: 100%; border: 0; display: block; filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95);} #contact .contact_wr .img_wr .contact-loc{position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 22px; background: rgba(1,1,2,.82); border-top: 1px solid var(--hairline); color: var(--ink); font-size: 15px; font-weight: 500; letter-spacing: -.2px; word-break: keep-all; line-height: 1.5;} #contact .contact_wr .img_wr .contact-loc i{margin-right: 6px; color: var(--main-ho);} @media (max-width: 1200px){ #contact .contact_wr .img_wr .contact-loc{display: none;} } /* === Information band — ASTRI identity (not the reference site) === */ /* photographic STAR-Lab ground replaced by our own lit, ringed field */ .infoRadar{ height: auto; min-height: 762px; padding: 130px 0; background: radial-gradient(58% 52% at 78% 30%, rgba(94,106,210,.30) 0%, rgba(94,106,210,0) 68%), radial-gradient(46% 46% at 12% 88%, rgba(185,58,82,.22) 0%, rgba(185,58,82,0) 70%), linear-gradient(168deg, #0a0b14 0%, #050609 52%, #010102 100%); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); overflow: hidden; } /* concentric orbits centred on the radar, fading out — a line, not a flood */ .infoRadar::before{ content: ''; position: absolute; right: -14%; top: 50%; width: 1180px; height: 1180px; transform: translateY(-50%); background: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.055) 0 1px, rgba(255,255,255,0) 1px 96px); -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%); mask-image: radial-gradient(circle at 50% 50%, #000 42%, transparent 78%); opacity: .9; pointer-events: none; } /* fine dot field over the whole band */ .infoRadar::after{ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%); pointer-events: none; } .infoRadarWrap{position: relative; z-index: 2;} /* type on the new ground */ .info .infoTit{color: var(--ink); letter-spacing: -.02em;} .info .infoTit b{color: #b93a52;} .info .infoTxt p{color: var(--ink-muted); text-shadow: none;} .info .infoTxt b{color: var(--ink); font-weight: 600;} .info .subtit{color: var(--main-ho);} /* our own core: rings + glow instead of the reference site's shape sprite */ .radar .radCenter::before{ background: none; width: 396px; height: 396px; right: 0; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(94,106,210,.10), 0 0 80px rgba(94,106,210,.16); } .radar .radCenter::after{ content: ''; position: absolute; z-index: 1; display: block; width: 252px; height: 252px; right: 72px; top: 72px; border-radius: 50%; border: 1px dashed rgba(185,58,82,.34); background: radial-gradient(circle, rgba(94,106,210,.14) 0%, rgba(94,106,210,0) 70%); } .radar .radCenter i{ background: none; width: 14px; height: 14px; border-radius: 50%; background: var(--main-ho); box-shadow: 0 0 0 6px rgba(94,106,210,.18), 0 0 26px rgba(94,106,210,.65); } /* research-domain markers: rounded-square plates with Font Awesome glyphs */ .radCon i.radIco, .radCon:nth-of-type(2) i.radIco, .radCon:nth-of-type(3) i.radIco, .radCon:nth-of-type(4) i.radIco, .radCon:nth-of-type(5) i.radIco{ background-image: none; background-color: var(--surface-2); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; } .radCon i.radIco::before{ font-family: 'Font Awesome 6 Free'; font-weight: 900; font-style: normal; font-size: 36px; line-height: 1; color: var(--main-ho); content: '\f135'; } .radCon:nth-of-type(2) i.radIco::before{content: '\f471'; color: #d4677d;} .radCon:nth-of-type(3) i.radIco::before{content: '\f06e'; color: #8fa2ff;} .radCon i.radIco::after{ content: ''; position: absolute; inset: -6px; border-radius: 26px; border: 1px solid rgba(185,58,82,.34); border-left-color: transparent; border-bottom-color: transparent; } .radCon i.radIco .radRot{display: none;} .radCon p{color: var(--ink); font-weight: 500; letter-spacing: -.015em;} @media (max-width: 800px){ .radCon i.radIco{border-radius: 17px;} .radCon i.radIco::before{font-size: 27px;} .radCon i.radIco::after{border-radius: 21px;} } /* === Site-wide CTA — our own mark, not the reference site's pill === */ a.mbtn{padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-top: 44px;} a.mbtn span{ gap: 12px; padding: 0 2px 11px 2px; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid rgba(255,255,255,.18); position: relative; } a.mbtn span i{ background: none; width: auto; height: auto; border-radius: 0; color: #b93a52; font-size: 11px; transition: transform .35s cubic-bezier(.2,.7,.2,1), color .25s; } a.mbtn span::after{ content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 1px; background: #b93a52; transition: width .45s cubic-bezier(.2,.7,.2,1); } a.mbtn:hover{background: none;} a.mbtn:hover span{color: var(--ink);} a.mbtn:hover span i{color: #d4677d; background: none; transform: translateX(6px);} a.mbtn:hover span::after{width: 100%;} a.mbtn:active span i{transform: translateX(3px);} a.mbtn:focus-visible{outline: 2px solid #b93a52; outline-offset: 4px;} @media (max-width: 1280px){ a.mbtn{margin-top: 28px;} a.mbtn span{font-size: 12px; letter-spacing: .15em; gap: 10px;} } @media (max-width: 500px){ a.mbtn span{font-size: 11px;} a.mbtn span i{width: auto; height: auto;} } #contact .contact_wr .img_wr .contact-loc span{display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--ink-subtle);} /* 히어로 약어 풀네임 */ .main-txt .hero-expand{margin-top: 14px; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); word-break: keep-all;} @media (max-width: 767px){.main-txt .hero-expand{font-size: 14px; margin-top: 10px;}} /* ASTRI landing page: identity and the two center affiliations. */ #visual:has(.astri-hero){height:auto;min-height:850px;} #visual:has(.astri-hero) .main-txt-wrap{padding-top:clamp(150px,14vw,210px);padding-bottom:80px;} #visual .astri-hero h2{font-size:clamp(76px,8vw,120px);line-height:1.1;} #visual .astri-hero .hero-expand{display:inline-block;max-width:100%;box-sizing:border-box;font-size:clamp(22px,2.1vw,30px);line-height:1.5;margin-top:24px;padding:14px 20px;border-radius:10px;background:rgba(9,14,26,.8);box-shadow:0 4px 20px rgba(0,0,0,.2);color:#fff;text-shadow:none;} #visual .astri-hero .hero-expand span{color:#ff91ac !important;} #visual .astri-centers{display:grid;gap:22px;margin-top:72px;max-width:1120px;} #visual .astri-hero .astri-center-name{font-size:clamp(20px,1.9vw,27px);line-height:1.35;margin:0;color:var(--ink);} #visual .astri-center-name a{color:inherit;} #visual .astri-center-name a:hover{color:#c6b9ed;} #visual .astri-hero .astri-center-location{font-size:clamp(15px,1.35vw,19px);line-height:1.6;margin:7px 0 0;color:var(--ink-muted);} @media(max-width:767px){ #visual:has(.astri-hero){min-height:100svh;} #visual:has(.astri-hero) .main-txt-wrap{padding-top:160px;padding-bottom:60px;} #visual .astri-hero h2{font-size:clamp(64px,15vw,90px);} #visual .astri-hero .hero-expand{font-size:21px;margin-top:20px;} #visual .astri-centers{gap:24px;margin-top:48px;} }