#sVisual{height: 450px;position:relative;display: flex;flex-direction: column;justify-content: flex-start;} #sVisual .visual-wr{background: #000;position: relative;/* overflow:hidden; */border-radius: 0;display: flex;width: 100%;margin: 0 auto;height: 100%;z-index: 1;} #sVisual .svWrap{position:relative;overflow: hidden;width: 100%;height: 100%;border-radius: 0;} #sVisual .svWrap .sv-img{width: 100%;height:100%;position: relative;height: 100%;top: 0;left: 0;opacity: .8;transition: transform 5s linear; transform: scale(1.1, 1.1);} #sVisual .svWrap .sv-img:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); pointer-events:none;} #sVisual .svWrap .sv-img0, #sVisual .svWrap .sv-img1{background: url("/images/sub/visual1.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img2{background: url("/images/sub/visual2.jpg") no-repeat 50% 12%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img3{background: url("/images/sub/visual3.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img4{background: url("/images/sub/visual4.jpg") no-repeat 50% 78%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img5{background: url("/images/sub/visual5.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img6{background:url("/images/sub/visual1.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img7{background:url("/images/sub/visual1.jpg") no-repeat 50% bottom;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img8{background:url("/images/sub/visual1.jpg") no-repeat 50% top;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .sub-tit{font-size: 130px;font-weight: bold;line-height: 1;color:#fff;position: absolute;bottom: -12px;max-width:1420px;width:90%;text-align: right;left:50%;transform: translate(-50%, 0%);font-family: "Playfair Display", sans-serif;} #sVisual .slogan{position:absolute;width: 90%;top: 0;/* width:90%; */z-index:10;left: 50%;height: 100%;transform: translateX(-50%);word-break:keep-all;max-width: 1500px;display: flex;/* padding-bottom: 80px; */justify-content: center;align-items: center;text-align: center;flex-direction: column;gap: 100px;padding: 120px 0 0 0;} #sVisual .slogan .big-tit{display:flex;gap: 15px;flex-direction: row-reverse;align-items: center;justify-content: center;} #sVisual .slogan .big-tit big{font-size: 48px;color: #fff;text-transform: uppercase;font-weight: 600;letter-spacing: -1px;} #sVisual .slogan .big-tit big b{font-weight:700;} #sVisual .svWrap.in-view .sv-img{transform: scale(1.0, 1.0) rotate(0.002deg);} /* 서브공통 */ .sContWrap{position:relative;width:100%;height:100%;min-height:500px;/*overflow: hidden;*/} .sContWrap:after{display:block; content:""; clear:both;} .sCont{width:90%;max-width: 1420px;min-height:500px;margin:0 auto;position:relative;word-break:keep-all;padding: 70px 0 0;} .sCont .sCont-title{display:block;padding: 0px 0 60px;color: #222;font-size: 36px;line-height:1.6;font-weight: 600;letter-spacing: -1px;text-align:center;} .sub-board-bottom{padding-bottom:160px;} @media (max-width: 1920px){ } @media (max-width: 1800px){ } @media (max-width: 1400px){ } @media (max-width: 1300px){ #sVisual .slogan {padding-top: 150px;} #sVisual .slogan .big-tit {flex-direction: column-reverse; align-items: center;} } @media (max-width: 1240px){ } @media (max-width: 1170px){ #sVisual .slogan .big-tit big {font-size: 42px;} .sub-board-bottom{padding-bottom:100px;} } @media (max-width: 980px){ } @media (max-width: 767px){ #sVisual{height: 300px;} #sVisual .visual-wr{width:100%;height: 100%;} #sVisual .svWrap .sv-img{opacity:.6;} #sVisual .slogan {justify-content: flex-start;width:95%;align-items: center;gap: 30px;padding: 0;} #sVisual .slogan .big-tit{gap:5px;position: absolute;top: 0;height: 100%;transform: translateY(-0%);justify-content: center;} #sVisual .slogan .big-tit big {font-size: 34px; letter-spacing: 0;} .sub-board-bottom{padding-bottom:60px;} } @media (max-width: 640px){ } @media (max-width: 520px){ } .sec-cont{position:relative;} .sec-cont + .sec-cont{margin-top:60px;} .ess-color{color: #f65354;font-size: 22px;} #location{position: relative;/* width: auto; *//* left: 50%; *//* bottom: 80px; *//* transform: translateX(-50%); */z-index: 50;} .lnb{position:relative;z-index:10;display: flex;justify-content: flex-start;/* max-width: 1500px; *//* width: 95%; */gap: 10px;margin: 0 auto;} .lnb .lnb-map{display:flex;gap: 10px;} /*.lnb .lnb-map:after{content:''; display:block; clear:both;}*/ .lnb .lnb-map li a{display:block;} .lnb .lohom{position:relative;width: 60px;height: 60px;z-index:1;background-color:transparent;} .lnb .lohom > a{display:flex;align-items:center;justify-content:center;height: 100%;width: 100%;background: #204c75;color: #fff;font-size:18px;border-radius: 10px;position:relative;} .lnb .lnb-map > li{width: 280px;background: rgba(0,0,0, 0.1);backdrop-filter: blur(10px);border-radius: 10px;} .lnb .lnb-map > li:nth-last-of-type(1){width:318px;} .lnb .lnb-map > li > a{} .lnb .lnb-map li.depth{position:relative;} .lnb .lnb-map li:first-child a span{} .lnb .lnb-map li.depth ul{display:none;position:absolute;top: 60px;left:0;width:100%;padding: 0 0 20px 0;background:#fff;z-index:10;border-radius: 0 0 10px 10px;box-shadow: 15px 20px 20px 0 rgba(0, 0, 0, .1);} .lnb .lnb-map li.depth ul li a{display:block;padding: 7px 25px;font-size: 16px;color:#333;text-align: left;} .lnb .lnb-map li.depth ul li a:hover{color: #2879ae;} .lnb .lnb-map li a:after{/*arrow*/ transform:rotate(135deg); top:50%; margin-top:-5px; right:10%; width:8px; height:8px; border-top: 2px solid #fff; border-right: 2px solid #fff; display:inline-block; position:absolute; content:""; transition:.3s ease-out; } .lnb .lnb-map li:first-child a:after{border-top:2px solid #fff; border-right:2px solid #fff;} .lnb .lnb-map li.depth ul li a:hover{} .lnb .lnb-map li.depth a span{width:100%;font-size: 17px;color: #fff;height: 60px;line-height: 1.3;display:flex;font-weight: 500;padding: 0 30% 0 25px;transition:.1s ease-out;align-items:center;border-radius: 10px;} .lnb .lnb-map li:first-child.depth a span{} .lnb .lnb-map li:last-child.depth a span{} .lnb .lnb-map li.depth a.menu_active{box-shadow:15px 15px 20px 0 rgba(0,0,0,.1);} .lnb .lnb-map li a.menu_active:after{border-color:#878894;transform:rotate(314deg);margin-top:-5px;} .lnb .lnb-map li.depth a.menu_active span{position:relative;background: #fff;color:#222;border-radius: 10px 10px 0 0;} .lnb .lnb-map li.depth a.menu_active span:after{content:''; position:absolute; bottom:0; left:30px; width:220px; height:1px; background:rgba(255,255,255,.1);} .lnb .lnb-map li.depth ul.moreMenu li a{position:relative; word-break:keep-all;} .lnb .lnb-map li.depth ul.moreMenu li a:after{display:none;} .lnb .lnb-map li.depth ul.moreMenu li a.active{color: #2879ae;} .lnb .lnb-map li.depth ul.moreMenu li a.active:after{opacity:1;} .lnb .lnb-map li.depth ul.moreMenu li a:hover:after{opacity:1;} @media (max-width: 767px){ #location {width: 100%; position: absolute; bottom: 13px;} .lnb{gap:5px;} .lnb .lohom {width: 45px; height: 45px;} .lnb .lnb-map {gap: 5px; width: calc(100% - 45px);} .lnb .lnb-map > li, .lnb .lnb-map > li:nth-last-of-type(1){width: 50%;} .lnb .lnb-map > li > a {height: 45px;} .lnb .lnb-map li.depth a span {font-size: 13px; height: 45px; padding: 0 15% 0 7%;} .lnb .lnb-map li:first-child.depth a span{/* padding-left:40px; *//* border-radius:10px 0 0 0; */} .lnb .lnb-map li:last-child.depth a span{/* border-radius:0; */} .lnb .lnb-map li.depth ul{top:45px; padding:10px 7%; border-radius:0 0 10px 10px;} .lnb .lnb-map li.depth ul li a{padding: 6px 0; font-size: 13px;} .lnb .lnb-map > li:nth-last-of-type(1){width:50%;} } @media (max-width: 480px){ .lnb .lohom {display:none;} .lnb .lnb-map{width:100%;} } @media (max-width: 1400px){ } @media (max-width: 1300px){ } @media (max-width: 1170px){ .sCont{padding: 60px 0 0;} .sCont .sCont-title{font-size:32px;} } @media (max-width: 1024px){ } @media (max-width: 767px){ .sCont .sCont-title{padding-bottom: 0;font-size:28px;line-height: 1.2;margin:0 auto 30px;} .sCont{padding: 60px 0 0;} } @media (max-width: 767px){ .contTit-s{margin:30px 0 10px; font-size:17px;} .contTit-s .right-txt{margin:5px 0; font-size:13px;} .list-Dot>li{padding-left:10px; font-size:14px;} #sub-top .contTit-s{margin-top:30px;} #sub-top ul.bis-info-list li{padding-left:10px; font-size:15px;} .ui-topbox .inner{padding:20px 20px; min-height:auto;} .ui-topbox .inner.img-inner{padding:20px 20px;} .ui-topbox .img15, .ui-topbox .img-step{width:200px; height:200px;} .ui-topbox .icon{display:none;} .ui-topbox .txtwrap .tit-wrap{display:block; font-size:22px; line-height:1.2;} .ui-topbox .txtwrap strong.logo-img{display:block; margin-right:0; width:180px; height:29px; background-size:100%; margin-bottom:10px;} .ui-topbox .txtwrap p{font-size:14px;} } .contTit-center{text-align:center; display:block; margin:0 0 20px 0; font-weight:500; text-decoration:underline; font-size:32px; color:#204c75; letter-spacing:-1px; line-height:1.2;} .contTit-big{display:block;margin:60px 0 15px;font-weight:700;font-size:34px;color: #204c75;letter-spacing:-1px;line-height:1.2;} .contTit{display:block;margin:60px 0 15px;font-weight:700;font-size:28px;color:#204c75;letter-spacing:-1px;line-height:1.2;} .contTit:first-child{/* margin-top:0; */} .contTit-s{display:block;margin:40px 0 13px;font-weight:700;font-size: 20px;color: #246ba5;word-spacing:-.5px;line-height: 1.4;} .contTit-ss{display:block;margin: 30px 0 13px;font-weight: 600;font-size: 19px;color: #212121;text-decoration:underline;word-spacing:-.5px;line-height:1.2;} .contTit+.contTit-s{margin:10px 0 12px;} .contTit-big+.contTit-s{margin:10px 0 12px;} .contTit-s + .contTit-ss{margin:10px 0 12px;} .contTit-s > a{margin-left:10px;} .contTit-big > .eng-tit{font-size: 24px;margin-left: 10px;color: #777;font-weight: 500;letter-spacing: -.5px;} .flex-tit .eng-tit, .contTit > .eng-tit{font-size: 20px;margin-left: 10px;color: #777;font-weight: 500;letter-spacing: -.5px;} .contTit > .eng-tit.block{display:block; margin-left:0; margin-top:5px;} .flex-tit{display:flex;align-items:flex-start;gap:30px;} .flex-tit.full{justify-content:space-between;} .flex-tit > .blank-btn{margin:-5px;} p.txt{color:#666;font-size: 18px;font-weight:400;letter-spacing:-0.5px;line-height:1.6;} p.txt + p.txt{margin-top:20px;} .txt-bold{color:#111;letter-spacing:-.5px;font-weight:500;} .red-bold{color:#204c75;letter-spacing:-.5px;font-weight:500;} .txt-bold > em{text-decoration:underline; font-style:normal;} .a-bold{text-decoration:underline; font-weight:600; color:#333;} p.txtSt1{color:#666; line-height:1.6; font-size:18px; word-break:keep-all;} .unline{display:inline-block;position:relative;color: #333;font-size: 19px;font-weight: 500;letter-spacing:-0.5px;margin: 0 5px;} .unline em{display:inline-block; font-style:normal; margin:0 2px; font-weight:bold; text-decoration:underline;} .ess{font-style:normal; color:#333; text-decoration:underline; font-weight:400;} .color-txt{font-style:normal; color:#246ba5;} .un-bold{color:#333; text-decoration:underline; font-weight:600;} .point-color{color: #246ba5;} p.txt-big{font-size: 20px;letter-spacing: -.5px;line-height: 1.778em;color: #111;font-weight: 600;} ul.h-bold-list{} ul.h-bold-list > li{font-size:18px;letter-spacing:-0.036em;line-height:1.7;color:rgba(34, 34, 34, 0.9);font-weight:600;position: relative; padding-left:22px;} ul.h-bold-list > li:before{content: "\ef3b";font-family:remixicon !important;font-style:normal;color:#204c75;position:absolute;left:0;top: 3px;font-size:14px;} ul.h-bold-list > li > ul.list-hyphen{margin-bottom:10px;} ul.h-bold-list > li > ul.list-hyphen > li{font-size:17px;} .wb{display:inline-block;width: 65px;text-align:justify;position:relative;font-weight:600;color:#246ba5;line-height:0;margin-right: 5px;} .wb:before{content:""; display:inline-block; width:100%;} .wb:after{content:""; display:inline-block; width:100%;} .grayBox{border:7px solid #f5f5f5; position:relative; padding:35px 50px 35px 35px; background:#fff;} .grayBox .img-wrap{position:relative; text-align:center;} .grayBox .img-wrap > img{max-width:100%;} ul + .img-wrap, ol + .img-wrap, p + .img-wrap{margin-top:30px;} .grayBox + .grayBox{margin-top:20px;} .grayBox .contTit-s{margin-top:0;} .grayBox + ul{margin-top:20px;} .grayBox + p{margin-top:20px;} .cont-sec{position:relative;} .cont-sec + .cont-sec{margin-top:80px;} .cont-sec:nth-child(1){padding:0;} .cont-sec.bg{padding: 80px 0;} .cont-sec.bg:before{content:""; position:absolute; top:0; left:50%; width:100vw; height:100%; margin-left:-50vw; background:#f5fafe; z-index:-2;} .cont-sec.bg > .contTit{margin-top:0;} .cont-sec.cont-left{display:flex;} .cont-sec h3 > {} .cont-sec .s-cont{position:relative;} .cont-sec.cont-left > h3{display:inline-block; width:25%;} .cont-sec.cont-left > h3 .contTit{margin-top:5px; font-size:22px;} .cont-sec.cont-left > .s-cont{width:75%;} .cont-sec.cont-left p.txt{font-size:17px; line-height:1.6;} .mb-10{margin-bottom:10px;} .mb-15{margin-bottom:15px;} .mb-20{margin-bottom:20px;} .mb-25{margin-bottom:25px;} .mb-30{margin-bottom:30px;} .mb-40{margin-bottom:40px;} .mb-60{margin-bottom:60px;} .box-flex{display:flex;} .gs-box{border-radius:30px; padding:22px; background:#f9f9f9; text-align:center;} .gs-box .r-red{ background:#348bc1; color:#fff; text-align:center; border-radius:30px; box-shadow:inset 0px 5px 10px 0 rgb(121 121 121 / 6%); font-size:18px; font-weight:500; padding:10px 20px 9px; font-family:'LotteMartHappy'; } .gs-box .s-txt{font-size:15px; font-weight:400; letter-spacing:-0.78px; color:#1f1f1f; display:block; margin-top:10px;} p.txt + .list-point{margin-top:5px;} .gs-box + .list-point{margin-top:10px;} .list-Dot{} .list-Dot>li{position:relative;padding-left:12px;box-sizing:border-box;color:#555;font-size: 18px;font-weight:400;line-height: 1.6;text-align:left;vertical-align:top;letter-spacing:-0.5px;} .list-Dot>li:before{content:"";display:block;position:absolute;left:0;top: 11px;overflow:hidden;width: 4px;height: 4px;box-sizing:border-box;border-radius:50%;background: #8fbbd9;} .list-Dot>li+li{margin-top: 5px;} .list-Dot>li a{color:inherit;} .list-Dot>li a:hover{text-decoration:underline;} .list-Dot>li a.gold{color:#246ba5; text-decoration:underline;} .list-Dot>li .table_con_wrap{/* margin-top: 10px; */} .list-Dot > li > .txt-bold > em.noto, .list-Dot > li > em.noto{font-family:'Noto Sans KR';text-decoration:none;font-style: normal;} ul + .table_con_wrap, .table_con_wrap + ul{margin: 10px 0;} .list-Dot .list-hyphen{margin:0px 0 5px;} .list-hyphen{} .list-hyphen>li{position:relative;padding-left:11px;color:#555;font-weight:400;line-height:1.5;text-align:left;vertical-align:top;letter-spacing: 0px;} .list-hyphen>li:before{content:""; display:block; position:absolute; left:0; top:11px; width:5px; height:1px; box-sizing:border-box; background:#999;} .list-hyphen>li a{color:#555; text-decoration:underline;} .list-hyphen>li a:hover{opacity:.8;} .list-Dot>li .list-hyphen>li+li{margin-top:3px;} .list-Dot>li .list-hyphen{width:100%;/* padding:8px 0 2px; */} .list-Dot>li .list-hyphen>li{color:#888;font-size: 17px;} .list-Dot>li .list-hyphen>li:before{top: 11px;} .list-Dot + .list-hyphen{margin-top:10px;} .ol-list{margin:10px 0; padding:0 0 0 20px;} .ol-list > li{position:relative;box-sizing:border-box;color: #333;font-size: 17px;font-weight: 500;line-height: 1.6;text-align:left;vertical-align:top;letter-spacing:-0.5px;} .ol-list > li + li{margin-top: 0;} .ol-list > li .list-point > li{font-size:16px;} .ol-list > li .list-point > li + li{margin-top:0px;} .box-txt{background:#204c75;color:#fff;font-style:normal;font-weight: 500;padding: 2px 6px;font-size: 16px;letter-spacing: 0;} ul + .list-point{margin-top:15px;} .list-type1 + .list-point{margin-top:25px;} .list-point{} .list-point > li{font-size: 17px;line-height:1.6;padding-left:20px;position:relative;font-weight:500;color:#333;} .list-point > li + li{margin-top: 5px;} .list-point > li:before{content:"※";position:absolute;left:0;top: 0px;font-size:20px;display:inline-block;} .list-point > li.un-line{text-decoration:underline;} .list-point .list-hyphen{margin-top:5px;} .point-info{position:relative;padding-left: 13px;color:#246ba5;font-size: 17px;font-weight:400;letter-spacing:-0.5px;line-height: 1.4;text-align:left;} .point-info:before{content:"*";position:absolute;left:0;top:0;font-size: 19px;display:inline-block;} .class-list{} .class-list > li{font-size:17px; line-height:1.4; color:#666;} .class-list > li + li{margin-top:5px;} .inline-block{display:inline-block;} table .inline-block .point-info{text-align:center;display:inline-block;} .sub-top-box{box-shadow:0px 15px 20px -5px rgb(0 0 0 / 4%); border-radius:30px; padding:40px 50px; text-align:center;} .sub-top-box .red-sub-tit h4{font-size:18px; font-family:'LotteMartHappy'; font-weight:400; letter-spacing:-0.5px; color:#2879ae; text-transform:uppercase;} .sec-box{text-align:center; display:block;} .y-box{position:relative;background:#fafdf3;border-radius:30px;padding: 40px 60px 50px;text-align:left;color:#383838;letter-spacing:-1px;line-height:1.5;word-break:keep-all;} .y-box p.y-txt{font-size:18px; font-weight:400; font-family:'LotteMartHappy'; letter-spacing:-.5px; color:#666; line-height:1.8; word-break:keep-all;} .y-box p.y-txt + p.y-txt{margin-top:8px;} .y-box p.y-txt b{font-weight:normal; letter-spacing:-.5px; font-size:19px; color:#1b1b1b;} .y-box .in-fo{position:relative; padding-left:31px;} .y-box .in-fo i{font-size:26px; position:absolute; left:0px; top:2px; color:#2879ae;} .info-y-box{position:relative;background: #f5f5f5;border-radius: 15px;padding: 30px 30px;text-align:left;color:#383838;letter-spacing:-1px;line-height:1.5;word-break:keep-all;} .info-y-box .in-fo{position:relative;padding-left:31px;font-size:18px;font-weight:400;letter-spacing:-.5px;color:#666;line-height:1.8;word-break:keep-all;} .info-y-box .in-fo i{font-size:26px;position:absolute;left:0px;top:2px;color: #2879ae;} .info-y-box p b{font-weight: 700;letter-spacing:-.5px;font-size: 19px;color:#1b1b1b;} .info-y-box p + ul{margin-top:10px;} .info-y-box ul + ul{margin-top:10px;} .info-y-box .in-box{position:relative;margin-top:10px;padding: 25px 30px;border-radius: 10px;background:#fff;} .info-y-box .num-list{} .info-y-box .num-list > li{position:relative;font-size:17px;font-weight: 400;line-height:1.6;color: #444;padding-left: 25px;} .info-y-box .num-list > li em{font-style:normal;width: 18px;height: 18px;border-radius:50%;background: #348bc1;color: #fff;font-size: 12px;padding-right: 1px;line-height: 19px;display: inline-block;text-align: center;margin-right: 3px;position: absolute;left: 0;top: 4px;} .info-y-box .num-list > li + li{margin-top:2px;} .info-y-box .num-list > li .list-hyphen>li+li{margin-top:2px;} .info-y-box .num-list > li .list-hyphen{width:100%; padding:5px 0 2px;} .info-y-box .num-list > li .list-hyphen>li{color:#888; /*font-size:15px;*/ font-weight:400;} .check-box{position:relative; margin:15px auto; text-align:center;} .check-box p{display:flex;justify-content: flex-end;gap:7px;align-items: center;font-size: 17px;letter-spacing: -.5px;line-height: 1.6;color: #535353;padding-right:30px;} .check-box input{} @media (max-width: 767px){ .cont-sec + .cont-sec{margin-top:40px;} .cont-sec.bg{padding:40px 0;} .contTit-big{margin:30px 0 15px;font-size: 24px;} .contTit-ss{font-size:17px;} .ui-topbox .inner{padding:20px ;} .ui-topbox .icon{display:none;} #sub-top .ui-topbox .txtwrap.day3 p{font-size:15px;} #sub-top .ui-topbox .txtwrap.day3 .bis-tit{font-size:16px; margin-right:5px;} .ui-topbox .txtwrap strong{font-size:16px;} .grayBox{border:3px solid #f5f5f5; padding: 20px;} .contTit-big > .eng-tit, .flex-tit .eng-tit, .contTit > .eng-tit{font-size:16px; margin:10px 0; display:block;} .flex-tit{gap: 10px; flex-direction: column; align-items: normal;} .contTit{margin: 20px 0 10px;font-size: 20px;} .contTit-s{margin: 20px 0 10px;font-size:19px;} p.txt{font-size:15px;} .p-txt{font-size:17px;} p.txtSt1{line-height:1.6; font-size:16px;} .txt-bold{font-size:16px;} .list-Dot>li{padding-left:10px;font-size: 15px;} .list-Dot>li:before{top:9px;} .list-hyphen>li{padding-left:7px;font-size: 15px;} .list-hyphen>li:before{top:10px; width:3px;} .list-Dot>li+li, .list-hyphen>li + li{margin-top:2px;} .list-Dot>li .list-hyphen>li+li{margin-top:3px;} .list-Dot>li .list-hyphen{padding:5px 0 2px;} .list-Dot>li .list-hyphen>li{font-size: 14px;} .list-Dot>li .table_con_wrap{margin-top:5px;} .list-Dot>li .table-wrap{margin-top:5px;} .class-list > li {font-size: 15px;} .info-y-box{border-radius:15px; padding:10px;} .info-y-box .in-fo{padding-left:30px; font-size:15px; line-height:1.5;} .info-y-box .in-fo i{font-size:22px; top:1px;} .info-y-box p b{font-size:15px;} .y-box{border-radius:15px; padding:20px;} .y-box p.y-txt{padding-left:30px; font-size:15px; line-height:1.5;} .y-box .in-fo i{font-size:22px; top:1px;} .y-box p.y-txt b{font-size:15px;} .info-y-box .in-box{padding:15px; border-radius:10px;} .info-y-box .num-list > li{font-size:15px;} .point-info{font-size:15px;} .point-info:before{top:2px; font-size:16px;} .list-point > li{font-size: 14px;line-height:1.4;} .list-point > li:before{top:-5px;} .unline{font-size:16px;} ul.h-bold-list > li {font-size: 16px;} ul.h-bold-list > li + li{margin-top:5px;} ul.h-bold-list > li > ul.list-hyphen{margin-top:5px;} ul.h-bold-list > li > ul.list-hyphen > li{font-size: 15px;} } .sub-tab2{position:relative; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;} .sub-tab2 li{position:relative;background:#fff; border:1px solid #e1e1e1; cursor:pointer; margin-top:-1px; margin-left:-1px;} .sub-tab2 li:first-child{border-radius:15px 0 0 0;} .sub-tab2 li:last-child{border-radius:0 15px 0 0;} .sub-tab2.tab2 li{width:calc(50% - 1px);} .sub-tab2.tab3 li{width:calc(33.333333333% - 0px);} .sub-tab2.tab4 li{width: calc(25.06% - 0px);} .sub-tab2.tab5 li{width:calc(20% - 1px);} .sub-tab2.tab6 li{width:calc(16.66% - 1px);} .sub-tab2 li:first-child{border-left:1px solid #ddd;} .sub-tab2 li span{display:table;width:100%;height:55px;} .sub-tab2 li span em{ word-break:keep-all; padding:0 45px 0 35px; height:100%; display:table-cell; vertical-align:middle; color:#5b5e66; font-size:18px; line-height:1; letter-spacing:.5px; text-align:left; font-style:normal; font-weight:normal; } .sub-tab2 li.active{border: 1px solid #246ba5;background: #246ba5;} .sub-tab2 li.active em{color:#fff;} .sub-tab2 li em:before{content:"\ea6e"; display:inline-block; font-family:'remixicon'; position:absolute; top:50%; right:20px; font-size:28px; transform:translateY(-50%);} .sub-tab2 li.active em:before{content:"\ea4e";} .color-tab{position:relative;display:flex;flex-wrap:wrap;margin-bottom: 60px;background: #f5fafe;} .color-tab li{display:block;position:relative;margin-left:-1px;margin-top:-1px;height:100%;min-height: 70px;height:auto;line-height:1.5;} .color-tab-one.tab2 li, .color-tab.tab2 li{/* width:calc(50% + 1px); */} .color-tab-one.tab3 li, .color-tab.tab3 li{width:calc(33.33% + 1px);} .color-tab-one.tab4 li, .color-tab.tab4 li{width:calc(25% + 1px);} .color-tab-one.tab5 li, .color-tab.tab5 li{width:calc(20% + 1px);} .color-tab-one.tab6 li, .color-tab.tab6 li{width:calc(16.66666666666667% + 1px);} .color-tab li:first-child{} .color-tab li a{position:relative; display:table; table-layout:fixed; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; background:#fff; font-weight:500; color:#222; transition:all .1s;} .color-tab li a span{display:table-cell;vertical-align:middle;width:100%;height:100%;padding: 16px 15px;line-height: 1.2;font-weight: 600;font-size: 20px;text-align: center;} .color-tab li.on a{color:#fff;background: #204c75;border-color: #204c75;} .color-tab li a:focus, .color-tab li a:hover{border-color: #204c75;color: #204c75;text-decoration: none;z-index:2;} .color-tab li.on a:focus, .color-tab li.on a:hover{color:#fff;} .color-tab-one{position:relative;display:flex;flex-wrap:wrap;margin-bottom:40px;background: #f9f7f7; border-radius:10px;} .color-tab-one li{display:block;position:relative;margin-left:-1px;margin-top:-1px;height:100%;min-height: 70px;height:auto;line-height:1.5;} .color-tab-one li span{position:relative;display:table;table-layout:fixed;width:100%;height:100%;border:1px solid #ddd;box-sizing:border-box;background:#fff;font-weight:500;color:#222;transition:all .1s;} .color-tab-one li span em{cursor:pointer;font-style:normal;display:table-cell;vertical-align:middle;width:100%;height:100%;padding: 16px 15px;line-height: 1.2;font-size: 22px;font-weight: 500;text-align: center;} .color-tab-one li.active span{color:#fff;background:#204c75; border-color:#204c75;} .color-tab-one li span:focus, .color-tab-one li span:hover{border-color:#204c75; color:#204c75; z-index:2;} .color-tab-one li:first-child span{border-radius:10px 0 0 10px;} .color-tab-one li:last-child span{border-radius:0 10px 10px 0;border-radius: 10px;} .color-tab-one li.active span:focus, .color-tab-one li.active span:hover{color:#fff;} .cont-view{display:none; position:relative;} @media (max-width: 767px){ .color-tab li, .color-tab-one li {min-height: auto;} .color-tab li a span, .color-tab-one li span em{padding:15px; font-size: 16px;} .color-tab-one {margin-bottom: 30px;} } @media (max-width: 420px){ .color-tab-one.tab2 li, .color-tab.tab2 li, .color-tab-one.tab3 li, .color-tab.tab3 li, .color-tab-one.tab5 li, .color-tab.tab5 li{width:100%;} .color-tab-one li:first-child span{border-radius:10px 10px 0 0;} .color-tab-one li:last-child span{border-radius:0 0 10px 10px;} .color-tab-one li:first-child.active span{border-radius:10px 10px 0 0;} .color-tab-one li:last-child.active span{border-radius:0 0 10px 10px;} } .vs-tabs{} .vs-tabs ul{display:flex;width: 90%;white-space: nowrap;justify-content:center;padding-bottom: 20px;margin: 0 auto;flex-wrap: wrap;row-gap: 20px;} .vs-tabs ul li{position:relative;flex:0 0 auto; line-height:1; } .vs-tabs ul li + li{margin-left:70px;} .vs-tabs ul li + li:before{content:''; width:1px; height:20px; background: #ddd; position:absolute; left:-35px; top:2px;} .vs-tabs ul li a{font-size: 22px; color: #999; text-decoration:none;} .vs-tabs ul li a:focus{outline: none;} .vs-tabs ul li a:hover, .vs-tabs ul li.on a{color:#204c75; font-weight: 700;} .vs-tabs ul li.on a:before{content:'';width:100%;height:3px;background:#246ba5;position:absolute;left:0;bottom:-8px;} .vs-tabs ul li a:hover:before{content:""; width:100%; height:3px; background:#246ba5; position:absolute; left:0; bottom:-8px; animation:strach .3s;} @keyframes strach { 0% {transform: scaleX(0);} 100% {transform: scaleX(1);} } @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ } @media (max-width: 1024px){ } @media (max-width: 767px){ .vs-tabs ul{ position: relative; display: flex; flex-wrap: wrap; background: #f9f7f7; row-gap: 0; text-align: center; white-space: nowrap; justify-content:flex-start; padding-bottom:0px; width:100%; } .vs-tabs ul li{width: calc(33.33% + 1px);display:block;position:relative;margin-left:-1px;margin-top:-1px;height:100%;min-height:50px;height:auto;line-height:1.5;} .vs-tabs ul li + li {margin-left:-1px;} .vs-tabs ul li + li:before{display:none;} .vs-tabs ul li:first-child{} .vs-tabs ul li a{font-size: 18px; position:relative; display:table; table-layout:fixed; width:100%; height:100%; border:1px solid #ddd; box-sizing:border-box; background:#fff; font-weight:500; color:#222; transition:all .1s;} .vs-tabs ul li a:hover:before{display:none;} .vs-tabs ul li.on a:before{display:none;} .vs-tabs ul li.on a:before, .vs-tabs ul li a:focus:before, .vs-tabs ul li a:hover:before{right:26px;} .vs-tabs ul li a:after{content:""; position:absolute; left:-1px; right:-1px; top:-1px; bottom:-1px; z-index:2; width:auto; height:auto; transition:0.3s;} .vs-tabs ul li a span{display:table-cell;vertical-align:middle;width:100%;height:100%;padding: 10px 5px 7px 5px; font-size: 16px;line-height: 1.2;text-align: center;} .vs-tabs ul li.on a{color:#fff;background:#246ba5;border-color:#246ba5;} .vs-tabs ul li a:focus, .vs-tabs ul li a:hover{border-color:#329b9a; color:#267d7c; z-index:2;} .vs-tabs ul li.on a:focus, .vs-tabs ul li.on a:hover{color:#fff;} } @media (max-width: 640px){ } @media (max-width: 580px){ .vs-tabs ul li{width: calc(50% + 1px);} } @media (max-width: 340px){ .vs-tabs ul li{width:100%;} } /* -------------------------------- sub1_1 : 학부장 인사말 -------------------------------- */ #About{position:relative;padding: 40px 0 0;word-break:keep-all;} #About .greeting-tit-box{text-align:center;margin-bottom: 80px;} #About .greeting-tit-box .sub-txt{font-size: 26px;line-height:2;letter-spacing:-0.05em;color: #212121;font-weight:500;margin-bottom: 15px;} #About .greeting-tit-box .txt{font-size: 38px;line-height: 1.6;font-weight: 500;letter-spacing:-0.05em;color: #000;} #About .greeting-tit-box .txt b{font-weight:800;color: #246ba5;} #About .greeting-item{display: flex; align-items:center;} #About .greeting-item .img-box{width:50%;max-width: 640px;} #About .greeting-item .img-box img{max-width:100%; border-radius:20px;} #About .greeting-item .txt-box{width: calc(100% - 640px);padding-left: 80px;box-sizing:border-box;} #About .greeting-item .txt-box .greeting-txt{font-size: 28px;line-height: 1.5;letter-spacing: -1px;color:#222;font-weight: 600;margin-bottom: 25px;} #About .greeting-item .cm-txt{font-size: 20px;font-weight: 400;line-height: 1.8;letter-spacing: -1px;color:#666;} #About .greeting-item .cm-txt > p + p{margin-top:25px;} #About .greeting-item .txt-box > p:last-child{margin-bottom:0;} #About .greeting-item .txt-box .ceo-name{margin-top: 70px;} #About .greeting-item .txt-box .ceo-name .ceo{font-size: 20px;line-height:1.8;letter-spacing:-0.02em;color:#222;font-weight:500;margin-right: 25px;} #About .greeting-item .txt-box .ceo-name .name{font-size: 30px;line-height:1;letter-spacing:-0.05em;color:#222;font-weight:700;} #About .greeting-item.reverse{flex-direction: row-reverse;} #About .greeting-item.reverse .txt-box{padding-left:0;padding-right: 80px;} #About .greeting-middle-tit{text-align:center;text-transform:uppercase;margin: 130px 0 150px;} #About .greeting-middle-tit .tit{position: relative;font-size: 24px;line-height:1.5;font-weight: 800;} #About .greeting-middle-tit .tit:before{position: absolute;content:attr(data-label);z-index:-1;font-size: 130px;line-height:1;color:#f6f6f6;font-weight:900;width:100%;top:50%;left:50%;transform:translate(-50%, -50%);} #About .co-main{color: #204c75;} #About .co-main2{color:#246ba5;} #About .about-rsch{margin-top: 180px;position: relative;padding: 120px 0 160px;color: #fff;} #About .about-rsch:before{content: "";position: absolute;bottom: 0;left: 50%;width:100vw;height: 100%;transform:translateX(-50%);z-index: -2;background: #204c75;} #About .smtitle{line-height:1;font-weight: 700;font-size: 48px;display: block;margin-bottom: 25px;} #About .txt-wr{position: relative;} #About .txt-wr p{font-size: 20px; line-height:1.5;} #About .txt-wr p + p{margin-top:20px;} #About .ar-list{display:flex;/* gap: 30px; */width: 110%;left: 50%;/* flex-wrap: wrap; */position: relative;justify-content: center;margin-top: 80px;transform: translateX(-50%);} #About .ar-list li{} #About .ar-list > li:nth-child(even){/* margin-top:80px; */} #About .ar-list li.flip-box{} #About .ar-list .flip-inner{ position: relative; width: 100%; height: 100%; text-align: center; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; -o-transition: transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; } #About .ar-list .flip-inner:before{content: ""; position: absolute; right: 0; top: 0; width: 100%; height: 100%; background-color: #204c75; border-radius: 15px; z-index: 1; transition: all 0.75s ease-in-out;} #About .ar-list .flip-box:nth-child(1) .flip-inner:before{transition-delay:.1s ;} #About .ar-list .flip-box:nth-child(2) .flip-inner:before {transition-delay:.2s ;} #About .ar-list .flip-box:nth-child(3) .flip-inner:before{transition-delay:.3s ;} #About .ar-list .flip-box{overflow: hidden;flex: 0 0 25%;height: 540px;padding: 1.5px;list-style: none;margin: 0;} #About .ar-list .flip-box .flip-front figure > img{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; height:100%; max-width:100%; object-fit:cover;} #About .ar-list .flip-inner > div{backface-visibility: hidden;background-size: cover;/* background: #000; */height: 100%;transition: all 1s cubic-bezier(0.4, 0.2, 0.2, 1);backface-visibility: hidden;transform-style: preserve-3d;border-radius: 7px;} #About .ar-list .flip-box .flip-front{transform: rotateY(0deg);} #About .ar-list .flip-box .flip-back{transform: rotateY(180deg);position: absolute;left: 0;top: 0;width: 100%;color: #fff;background-color: #246ba5;border: 1px solid rgba(255,255,255,0.1);} #About .ar-list .flip-box:hover .flip-front{transform: rotateY(-180deg); transform-style: preserve-3d;} #About .ar-list .flip-box:hover .flip-back{transform: rotateY(0deg);} #About .ar-list .flip-box .txt-wrap{position: relative;z-index: 3;padding: 25px;display: flex;flex-direction: column;height: 500px;text-align: left;justify-content: space-between;} #About .ar-list .flip-box .txt-wrap h3{font-weight: 500;line-height: 1;font-size: 50px;color: #fff;letter-spacing: -.01em;text-transform: uppercase;word-break: break-all;} #About .ar-list .flip-box .txt-wrap h4{font-size: 28px;color: #fff;letter-spacing: -1px;max-width: 100%;display: flex;margin-bottom: 20px;justify-content: space-between;} #About .ar-list .flip-box .txt-wrap h4 strong{font-weight: 600;} #About .ar-list .flip-box .txt-wrap h4 i.arr-w{display:inline-block;width:27px;height:23px;background: url("/images/common/arr.svg") no-repeat 0 0 / 100% auto;filter: invert(100%);transform: rotate(-45deg);transition: .3s;} #About .ar-list .flip-box .txt-wrap .tag{border-top: 1px solid #fff;padding-top: 20px;display: flex;margin-inline: -2px;height: 75px;align-items: flex-start;gap: 5px;align-content: flex-start;flex-wrap: wrap;} #About .ar-list .flip-box .txt-wrap .tag span{font-size: 15px;font-weight:500;color: #fff;letter-spacing:-.3px;padding: 2px 14.5px 3px;border-radius: 40px;background: hsla(0, 0%, 100%, .2);} #About .ar-list .flip-box .flip {z-index: 1;position: relative;transform: translateZ(60px) scale(0.9);width: 100%;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;/* align-items: center; *//* justify-content: center; *//* flex-direction: column; *//* padding: 30px; *//* gap: 20px; */} #About .ar-list .flip-box .flip .icon{width: auto;font-style: normal;font-family: "Poppins", sans-serif;} #About .ar-list .flip-box .flip .icon > img{max-width:100%;} #About .ar-list .flip-box .flip-front big{font-size: 34px;letter-spacing: -1px;font-weight:600;color: #fff;} #About .ar-list .flip-box .flip-front big span{font-size:20px; letter-spacing:-.5px; display:block;} #About .ar-list .flip-box .flip small{font-size:19px;} #About .ar-list .flip-box .flip-front p{font-size: 40px; font-weight: 600; line-height: 1.3; transition: all 0.85s ease-in-out; opacity: 0; transform: translateX(50px);} #About .ar-list .flip-box .flip-front p span{font-size: 30px; font-weight: 400;} #About .ar-list .flip-box .flip-back p{font-size: 18px;line-height: 1.6;word-break: break-all;} #About .ar-list .flip-box .flip-back big{font-size: 28px;font-weight: 600;letter-spacing: -.5px;margin-bottom: 20px;} #About .ar-list .flip-box .flip-back .flip{text-align: center;padding:0 30px;line-height: 1.7;flex-direction: column;justify-content: center;} #About .ar-list .flip-box .flip-front figure{position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius:10px; overflow: hidden; margin: 0;} #About .ar-list .flip-box:nth-child(1) .flip-front p{transition-delay: 0.1s;} #About .ar-list .flip-box:nth-child(2) .flip-front p{transition-delay: 0.25s;} #About .ar-list .flip-box:nth-child(3) .flip-front p{transition-delay: 0.4s;} #About .ar-list .flip-inner:before{width: 0%;} #About .ar-list .flip-box .flip-front p{opacity: 1; transform: translateX(0);} #About .ar-list .list-Dot > li{color:#fff; line-height:1.3; word-break:keep-all;} #About .ar-list .list-Dot > li:before{background:#fff;opacity:.5;top: 8px;} #About .ar-list .list-Dot > li + li{margin-top:15px;} #About .ar-list .list-Dot > li .list-hyphen{margin-top:10px;} #About .ar-list .list-Dot > li .list-hyphen > li{font-size:15px; color:#fff; opacity:.7;} #About .ar-list .list-Dot > li .list-hyphen > li:before{background:#fff; opacity:.7; top:9px;} @media (max-width: 1280px){ #About .greeting-item {flex-wrap: wrap; flex-direction: column;} } @media (max-width: 1240px){ #About .about-rsch {margin-top: 80px; padding: 60px 0;} #About .ar-list {flex-wrap: wrap; margin-top: 80px;} #About .ar-list .flip-box {flex: none; width: 50%; height: 540px;} #About .greeting-item {align-items: center; justify-content: center;} } @media (max-width: 1170px){ #About .greeting-tit-box {margin-bottom: 40px;} #About .greeting-tit-box .txt {font-size: 30px;} #About .greeting-item .txt-box {width: 100%; margin-top: 50px; padding-left: 0;} #About .greeting-item.reverse .txt-box {padding-left: 0; padding-right: 0;} #About .greeting-item .txt-box .ceo-name {margin-top: 40px;} #About .greeting-item .txt-box .greeting-txt {font-size: 26px; text-align:center;} #About .greeting-item .cm-txt, #About .smtitle, #About .txt-wr p, #About .greeting-item .txt-box .ceo-name{text-align: center;} } @media (max-width: 767px){ #About {padding: 0;} #About .about-rsch {margin-top: 60px; padding: 60px 0;} #About .greeting-tit-box {margin-bottom: 25px;} #About .greeting-tit-box .sub-txt {font-size: 19px; line-height: 1;} #About .greeting-tit-box .txt {font-size: 20px;} #About .greeting-item .img-box {width: 100%;} #About .greeting-item .txt-box { margin-top: 25px;} #About .greeting-item .txt-box .greeting-txt {font-size: 19px; font-weight: 500;} #About .greeting-item .cm-txt {font-size: 17px; line-height: 1.5;} #About .greeting-middle-tit {margin: 80px 0;} #About .greeting-middle-tit .tit {font-size: 22px; line-height: 1.2;} #About .greeting-middle-tit .tit:before {font-size: 80px; width: 100vw; margin-left: -50vw; top: 50%; left: 50%; transform: translate(-0%, -50%);} #About .greeting-item .txt-box .ceo-name {margin-top: 25px; display: flex; flex-direction: column; gap: 10px;} #About .greeting-item .txt-box .ceo-name .ceo {font-size: 20px; margin-right: 0;} #About .greeting-item .txt-box .ceo-name .name {font-size: 26px;} #About .smtitle {font-size: 40px; margin-bottom: 25px; text-align: center;} #About .txt-wr p {font-size: 17px;} #About .ar-list {margin-top: 40px; width: 100%;} #About .ar-list .flip-box {width: 100%; height: auto;} #About .ar-list .flip-box .txt-wrap h3 {font-size: 40px;} #About .ar-list .flip-box .flip-back .flip {padding: 20px;} } /* -------------------------------- sub1_2 : 연혁 -------------------------------- */ #History{position:relative;padding-bottom: 80px;} #History:before{content:"History"; position:fixed; top:50%; left:50%; font-size:300px;font-weight:800;transform:translate(-50%, -50%);z-index:-1;opacity:0.02;text-transform:uppercase;} #History .his-tit-box{text-align:center;margin-bottom: auto;font-size: 24px;font-weight: 500;line-height: 1.8;max-width: 1200px;margin: 0 auto 100px;letter-spacing: -1px;} #History .his-tit-box .color-tit{display:block;color: #246ba5;font-weight: 800;letter-spacing: 0px;font-size: 24px;margin-bottom: 30px;text-decoration: underline;} #History .his-tit-box .his-txt{font-size:24px;color:#111;line-height: 1.6;font-weight: 500;letter-spacing: -0.03em;} #History .his-tit-box .his-txt > p + p{margin-top:30px;} :root{ --history-color: #246ba5; /* History 01 */ --history-padding: 85px; /* History 02 */ --history-year-group-width: 45rem; --history-year-width: 9rem; } @media all and ( max-width:800px ){ :root{ /* History 02 */ --history-year-group-width: auto; --history-padding: 6rem; } } /* ****************** 회사소개 :: BEST 연혁 01 ********************** */ /* History 01 :: Layout */ .history-style01{position:relative; padding-top: 1.5rem;} .history-style01 .history-year-item {position:relative;display:flex;justify-content:space-between;padding-bottom: 160px;} .history-style01 .history-year-item:last-child{padding-bottom:0} .history-style01 .history-year-item .history-info-box{display: flex; width:50%;} .history-style01 .history-year-item.history-left .history-info-box {justify-content: flex-end;} .history-style01 .history-year-item .history-back-line{position:absolute;top: 20px;height:175%;width:2px;left:calc(50% - 1px);background-color:#f1f1f1;} .history-style01 .history-year-item .history-back-line .line-inner{display:block; width:100%; height:0; background-color:var(--history-color);} .history-style01 .history-year-item .history-year-tit{position:relative;font-size: 100px;font-weight: 700;letter-spacing: -.5px;color: #246ba5;} /* .history-style01 .history-year-item .history-year-tit:after{position:absolute; top:50%; width:calc(var(--history-padding) - 1rem); height:1px; background-color:#ddd; content:"";} */ .history-style01 .history-year-item .history-year-tit .dot{position:absolute;top: 20%;width: 14px;height: 14px;background-color:#fff;border-radius:50%;transform:translate(0%, -50%);border:3px solid #d2d2d2;z-index:1;} .history-style01 .history-year-item .history-year-tit .dot::before {position: absolute;content: "";width: 45px;height: 45px;border-radius: 50%;background-color: rgb(36 107 165 / 20%);top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;pointer-events: none;transition: all 0.3s;} /*.history-style01 .history-year-item .history-year-tit .dot::after {position: absolute;content: "";width: 51px;height: 51px;border-radius: 50%;background-color: rgb(36 107 165 / 9%);top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;pointer-events: none;transition: all 0.3s;}*/ /* History 01 :: Month */ .history-style01 .history-month-box .history-month-item{position:relative;display:flex;line-height:1.4;margin-bottom: 10px;} /* .history-style01 .history-month-box .history-month-item:before{position:absolute; top:0.8rem; width:9px; height:9px; box-sizing:border-box; border:2px solid #e1e1e1; background-color:#fff; border-radius:50%; content:""; } */ .history-style01 .history-month-box .history-month-item .history-month{width: 90px;display:block;font-size: 34px;line-height: 1;font-weight: 700;letter-spacing: 0;color:#000;} .history-style01 .history-month-box .history-month-item .history-detail-txt-con{width:100%;margin-bottom: 2.2rem;} .history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con{width: calc(100% - 90px);} .history-style01 .history-month-box .history-month-item .history-detail-txt{color: #333;font-size: 18px;font-weight: 400;line-height: 1.5;letter-spacing: -.5px;word-break: keep-all;padding-right: 40px;display: flex;} .history-style01 .history-month-box .history-month-item .history-detail-txt + .history-detail-txt{margin-top:20px;} .history-style01 .history-month-box .history-month-item .history-detail-txt > span{display:inline-block;font-size: 21px;font-weight: 700;color: #111;margin-right: 20px;} .history-style01 .history-right .history-month-box .history-month-item .history-detail-txt {padding: 0 0 0 4.5rem;} .history-style01 .history-month-box .history-month-item .history-detail-txt:last-of-type{margin-bottom: 0;} .history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt{position:relative;} .history-style01 .history-month-box .history-month-item .history-detail-txt.only-txt:before{position:absolute; top:0; content:"-"; } /* History :: active */ .history-style01 .history-year-item .history-year-tit, .history-style01 .history-year-item .history-year-tit:after, .history-style01 .history-year-item .history-year-tit .dot, .history-style01 .history-month-box .history-month-item, .history-style01 .history-month-box .history-month-item:before, .history-style01 .history-month-box .history-month-item .history-month{transition:all 0.5s ease-in-out; transition-property:color, background-color, border-color} .history-style01 .history-year-item.active .history-year-tit:after{background-color:var(--history-color)} .history-style01 .history-year-item.active .history-year-tit .dot{border-color: #246ba5;background: #246ba5;} .history-style01 .history-year-item.active .history-year-tit .dot::before, .history-style01 .history-year-item.active .history-year-tit .dot::after {opacity: 1; pointer-events: auto;} /* History :: 이미지 */ .history-style01 .history-img-box{width:calc(50% - var(--history-padding)); margin-top:8rem} .history-style01 .history-img-box span{display:inline-block;} .history-style01 .history-img-box span img{max-width:100%;} @media all and (min-width:801px){ /* 우측내용 */ .history-style01 .history-right{flex-direction:row-reverse; } .history-style01 .history-right .history-year-tit:not(.reverse){padding-left:var(--history-padding); } .history-style01 .history-right .history-year-tit:not(.reverse):after{left:0;} .history-style01 .history-right .history-year-tit:not(.reverse) .dot{left:0; transform:translate(-50%,-50%)} .history-style01 .history-right .history-month-box .history-month-item{padding-left: 80px;} .history-style01 .history-right .history-month-box .history-month-item:before{left:0px; transform:translate(-50%, 0)} .history-style01 .history-right .history-month-box .history-month-item .history-detail-txt.only-txt{padding-left:1em;} .history-style01 .history-right .history-month-box .history-month-item .history-detail-txt.only-txt:before{left:0;} .history-style01 .history-right .history-img-box{text-align:right;} /* 좌측내용 */ .history-style01 .history-left{text-align:right; } .history-style01 .history-left .history-year-tit:not(.reverse){padding-right:var(--history-padding); } .history-style01 .history-left .history-year-tit:not(.reverse):after{right:0;} .history-style01 .history-left .history-year-tit:not(.reverse) .dot{right:0; transform:translate(50%,-50%)} .history-style01 .history-left .history-month-box .history-month-item{flex-direction:row-reverse; padding-right:var(--history-padding)} .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt{flex-direction:row-reverse;} .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt > span{margin-left:20px;margin-right: 0;} /* .history-style01 .history-left .history-month-box .history-month-item:before{right:0px; transform:translate(50%, 0)} */ .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt.only-txt{padding-right:1em;} .history-style01 .history-left .history-month-box .history-month-item .history-detail-txt.only-txt:before{right:0;} .history-style01 .history-left .history-img-box{text-align:left;} /* 연도 타이틀이 내용 반대편에 있을때 (reverse) */ .history-style01 .history-year-item .history-year-tit.reverse{position:absolute; top:-5px; } .history-style01 .history-right .history-year-tit.reverse{right:50%; padding-right:var(--history-padding);} .history-style01 .history-right .history-year-tit.reverse:after{right:0} .history-style01 .history-right .history-year-tit.reverse .dot{left:100%; transform:translate(-50%,-50%)} .history-style01 .history-left .history-year-tit.reverse{left:50%; padding-left:var(--history-padding);} .history-style01 .history-left .history-year-tit.reverse:after{left:0} .history-style01 .history-left .history-year-tit.reverse .dot{right:100%; transform:translate(50%,-50%)} } @media all and (max-width:800px){ #History .his-tit-box {margin: 0 auto 20px;} #History .his-tit-box .color-tit {font-size: 20px; margin-bottom: 20px;} #History .his-tit-box .his-txt{font-size:19px;} #History:before{font-size:100px;} /* History 01 :: Layout */ .history-style01 .history-year-item {padding-bottom:40px;} .history-style01 .history-year-item .history-info-box {width: 100%; display: block;} .history-style01 .history-year-item.history-left .history-info-box {justify-content: initial;} .history-style01 .history-year-item .history-back-line{left:10px} .history-style01 .history-year-item .history-year-tit{padding-left:60px; padding-bottom: 3rem; font-size: 4rem;} .history-style01 .history-year-item .history-year-tit:after{display:none;} .history-style01 .history-year-item .history-year-tit .dot{left:4px;} .history-style01 .history-year-item .history-back-line {top: 35px; height: 100%;} /* History 01 :: Month */ .history-style01 .history-month-box .history-month-item .history-detail-txt {padding-left: 60px;flex-direction: column;} .history-style01 .history-month-box .history-month-item{padding-left:60px;} .history-style01 .history-month-box .history-month-item:before{left:1px; transform:translateX(50%)} /* History :: 이미지 */ .history-img-box{position:static; width:auto; margin:5rem 0 0 var(--history-padding)} } @media all and (max-width:480px){ .history-style01 .history-month-box .history-month-item {flex-direction: column;} .history-style01 .history-month-box .history-month-item .history-month {width: 100%;} .history-style01 .history-month-box .history-month-item .history-month + .history-detail-txt-con {width: 100%;} .history-style01 .history-month-box .history-month-item .history-detail-txt {padding: 10px 0 !important; font-size:16px;} } /* -------------------------------- sub1_4 : 찾아오시는길 -------------------------------- */ #Vision{position:relative; padding-bottom:200px;} #Vision:before{content: "";position:absolute;bottom:0;left:50%;width:100vw;margin-left:-50vw;height:100%;z-index:-2;background: transparent linear-gradient(180deg, #fff 0%, #f5fafe 100%) 0% 0% no-repeat padding-box;} #Vision .vision-org{display:flex;flex-direction:column;gap: 100px;} #Vision .vision-org > li{display:flex;} #Vision .vision-org > li > .title{position:relative;display:flex;align-items:center;justify-content:center;width: 200px;margin-right: 60px;border-radius: 20px;background-color: #414141;font-size: 21px;font-weight:600;color:#fff;text-align:center;} #Vision .vision-org > li > .title::after{content:'';position:absolute;left: 200px;top:50%;transform:translateY(-50%);display:block;width: 500%;height:1px;border:1px dashed #b1b1b1;} #Vision .vision-org > li .content{display:flex;flex:1;gap: 15px;position: relative;} #Vision .vision-org > li .content:before{content:"";width: 200px;height: 90px;clip-path: polygon(80% 0, 80% 60%, 100% 60%, 50% 100%, 0 60%, 20% 60%, 20% 0);position:absolute;bottom: -90px;left:50%;background: linear-gradient(to top, #c4dcee 0%, #ffffff00 100%);transform:translate(-50%, 0%);z-index: -1;} #Vision .vision-org > li:nth-child(1) .content:before{left:auto; right:25%;transform:translate(0%, 0%);} #Vision .vision-org > li:nth-child(1) .content:after{content:"";width: 200px;height: 90px;clip-path: polygon(80% 100%, 80% 40%, 100% 40%, 50% 0, 0 40%, 20% 40%, 20% 100%);position:absolute;bottom: -100px;left: 25%;background: linear-gradient(to bottom, #c4dcee 0%, #ffffff00 100%);transform:translate(0%, 0%);z-index: -1;} #Vision .vision-org > li:last-child .content:before{display:none;} #Vision .vision-org .box{} #Vision .vision-org .box.box-t1{flex: 1;position: relative;background: #fff;display: flex;flex-flow: column;height: 100%;} #Vision .vision-org .box-t1 .tit-wr{display: flex; padding: 15px; font-weight: 500; color: #fff; background: #204c75; align-items: center; justify-content: center; border-radius: 20px 20px 0 0;} #Vision .vision-org .box-t1 .tit-wr > strong{font-size: 22px; font-weight: 500; display: flex; align-items: center; gap: 10px;} #Vision .vision-org .box-t1 .tit-wr > strong > b{font-weight: 800; background: #fff; border-radius: 50px; color: #204c75; padding: 2px 20px; font-size: 24px;} #Vision .vision-org .box-list1{border: 1px solid #ccc;border-top: 0;border-radius: 0 0 20px 20px;flex: 1;background: #fff;display: flex;padding: 15px;flex-direction: column;align-items: center;justify-content: center;gap: 15px;} #Vision .vision-org .box-list1 > strong{background: #e5f3fb;border-radius: 50px;width: 100%;text-align: center;padding: 10px;font-size: 19px;font-weight: 600;color: #204c75;} #Vision .vision-org .box-list1 > ul{display: flex; width: 100%; text-align: center; gap: 30px;} #Vision .vision-org .box-list1 > ul > li{flex: 1; display: flex; flex-direction: column; align-items: center; position: relative;} #Vision .vision-org .box-list1 > ul > li + li:before{content:"";position:absolute;left: -4%;height:100%;width:1px;border-left: 1px dotted #bfbfbf;} #Vision .vision-org .box-list1 big{background: #246ba5; color: #fff; padding: 10px; width: 100%; font-size: 18px; font-weight: 500; letter-spacing: -.5px; border-radius: 50px;} #Vision .vision-org .box-list1 small{padding: 10px;font-size: 18px;color: #246ba5;letter-spacing: -.5px;font-weight: 500;} #Vision .vision-org > li:nth-child(2) .content{flex-flow: column;/* background: #f9f9f9; */padding: 0;border-radius:30px;z-index: 1;} #Vision .vision-org .box-list2{flex: 1;position: relative;display: flex;gap: 30px;} #Vision .vision-org .box-list2 > li{border-radius:20px;background:#fff;flex: 1;} #Vision .vision-org .box-t2{display: flex; flex-direction: column; text-align: center; height:100%;} #Vision .vision-org .box-t2 > strong{border-radius: 20px 20px 0 0; color: #fff; padding: 10px; font-size: 21px; font-weight: 600;} #Vision .vision-org .box-t2 > div{height:100%; border: 1px solid #ccc; border-top: 0; border-radius: 0 0 20px 20px; background: #fff; display: flex; padding: 15px; flex-direction: column; align-items: center; justify-content: center;} #Vision .vision-org .box-t2 big{background: #246ba5; color: #fff; padding: 10px; width: 100%; font-size: 18px; font-weight: 500; letter-spacing: -.5px; border-radius: 50px;} #Vision .vision-org .box-t2 small{padding: 10px;font-size: 18px;color: #232323;letter-spacing: -.5px;font-weight: 500;} #Vision .vision-org .box-list2 > li:nth-child(1) .box-t2 > strong{background: #246ba5;} #Vision .vision-org .box-list2 > li:nth-child(1) .box-t2 big{background: rgb(36 107 165 / 10%); color:#246ba5;} #Vision .vision-org .box-list2 > li:nth-child(2) .box-t2 > strong{background:#348bc1;} #Vision .vision-org .box-list2 > li:nth-child(2) .box-t2 big{background:rgb(52 139 193 / 10%); color:#2879ae;} #Vision .vision-org .box-list2 > li:nth-child(3) .box-t2 > strong{background: #348bc1;} #Vision .vision-org .box-list2 > li:nth-child(3) .box-t2 big{background: rgb(52 139 193 / 10%); color:#2879ae;} #Vision .vision-org .bottom-box{position: relative;} #Vision .vision-org .bottom-box .box-t2{flex-direction: row;} #Vision .vision-org .bottom-box .box-t2 > strong{border-radius: 20px 0 0 20px;background: #246ba5;color: #fff;display: flex;padding: 10px 20px;font-size: 21px;font-weight: 600;justify-content: center;align-items: center;} #Vision .vision-org .bottom-box .box-t2 > div{border: 1px solid #ccc;border-left: 0;border-radius: 0 20px 20px 0;background: #fff;display: flex;padding: 15px;flex-direction: row;align-items: center;justify-content: center;} #Vision .vision-org .bottom-box .box-t2 big{background: rgb(36 107 165 / 10%);color: #246ba5;padding: 10px 20px;width: 20%;font-size: 18px;font-weight: 500;letter-spacing: -.5px;border-radius: 10px;} #Vision .vision-org .bottom-box .box-t2 small{padding: 10px;font-size: 18px;color: #232323;letter-spacing: -.5px;font-weight: 500;} #Vision .vision-org .box-list3{flex: 1;position: relative;display: flex;gap: 30px;} #Vision .vision-org .box-list3 > li{position: relative;flex: 1;} #Vision .vision-org .box-list3 > li > ol{position:relative;border: 1px solid #246ba5;border-radius: 20px;padding: 0 25px;background: #fff;height: 100%;list-style: none;text-align: center;} #Vision .vision-org .box-list3 > li > ol > li{padding: 15px 0;font-size: 17px;font-weight: 500;} #Vision .vision-org .box-list3 > li > ol > li + li{border-top: 1px dotted #bfbfbf;} #Vision .paralax-title{position:absolute;left:50%;bottom:0;display:block;font-weight: 800;width:400%;text-align:left;word-spacing:-20px;font-size:140px;color:rgba(51, 51, 51, 0.05);line-height:1;z-index:-1;} @media (max-width: 1240px){ #Vision .vision-org > li{flex-direction: column; gap: 20px;} #Vision .vision-org > li > .title {width: 100%; margin-right: 0; padding:10px;} #Vision .vision-org > li > .title::after{display:none;} #Vision .vision-org > li > .title br{display:none;} #Vision .vision-org .box-list1 > ul, #Vision .vision-org .box-list2, #Vision .vision-org .box-list3{gap:15px;} #Vision .vision-org > li:nth-child(1) .content:after{left:15%;} #Vision .vision-org > li:nth-child(1) .content:before {right: 15%;} } @media (max-width: 767px){ #Vision {padding-bottom: 100px;} #Vision .vision-org > li{gap: 10px;} #Vision .vision-org .box-list1 > ul > li + li:before{display:none;} #Vision .vision-org .box-t1 .tit-wr > strong{flex-direction: column; text-align:center;} #Vision .vision-org .box-list1 > ul {gap: 10px; flex-direction: column;} #Vision .vision-org .box-t1 .tit-wr > strong > b{width:100%; text-align:center;} #Vision .vision-org .box-list2 {gap: 10px; flex-direction: column;} #Vision .vision-org > li:nth-child(2) .content {padding: 0;} #Vision .vision-org .bottom-box .box-t2 {flex-direction: column;} #Vision .vision-org .bottom-box .box-t2 > strong{border-radius: 20px 20px 0 0;} #Vision .vision-org .bottom-box .box-t2 > div{flex-direction: column;border-radius: 0 0 20px 20px;border-left: 1px;border: 1px solid #ccc;} #Vision .vision-org .bottom-box .box-t2 big{width:100%;} #Vision .vision-org .bottom-box .box-t2 big br{display:none;} #Vision .vision-org .box-list3 {gap: 10px; flex-direction: column;} #Vision .vision-org > li .content:before, #Vision .vision-org > li:nth-child(1) .content:after{width: 90px;} } /* -------------------------------- sub1_4 : 찾아오시는길 -------------------------------- */ #contact{position:relative; padding-bottom:60px;} #contact .map-wrap{margin-bottom:80px;border-radius: 20px;border: 1px solid #e3e3e3;position: relative;} #contact .root_daum_roughmap .border1, #contact .root_daum_roughmap .border2, #contact .root_daum_roughmap .border3, #contact .root_daum_roughmap .border4{border:0 !important; opacity:0 !important;} #contact .map-wrap .map{overflow:hidden;position:relative;overflow: hidden;border-radius: 20px;} #contact .map-wrap .map-info-box {background: #246ba5;border-radius: 20px;position:absolute;bottom:-50px;left:50px;z-index: 10;padding: 50px;box-sizing:border-box;} #contact .map-wrap .map-info-box .location-tit {position: relative; margin-bottom: 2.3rem;} #contact .map-wrap .map-info-box .location-tit i {font-size: 24px;color:#fff;position:absolute;left:0;top: 4px;font-weight: normal;} #contact .map-wrap .map-info-box .location-tit p{font-size: 20px;letter-spacing:-0.04em;color:#fff;font-weight: 500;line-height:1.5em;padding-left: 32px;} #contact .map-wrap .loca-txt{display:block; font-size:17px; font-weight:400; line-height:1.5; margin-top:10px;} #contact .map-wrap .loca-info-list {position: relative;} #contact .map-wrap .loca-info-list .loca-item {display:flex;} #contact .map-wrap .loca-info-list .loca-item dl {display:flex; align-items:center;} #contact .map-wrap .loca-info-list .loca-item i {font-size: 15px;line-height:2.133em;font-weight: 400;color:rgba(255,255,255,0.6);margin-right: 18px;position:absolute;left:0;font-weight: normal;} #contact .map-wrap .loca-info-list .loca-item dl dt {font-size: 16px;line-height: 2;font-weight: 400;color:rgba(255,255,255,0.6);margin-right: 18px;padding-left: 30px;} #contact .map-wrap .loca-info-list .loca-item dl dd {font-size:16px; line-height:2; font-weight: 400; color:rgba(255,255,255,1);} #contact .map-wrap .loca-info-list .loca-item dl dd a{color:inherit;} #contact .map-wrap .loca-info-list .loca-item dl dd br{display:none;} #contact .loca-list{} #contact .loca-list ul{} #contact .loca-list > ul > li{display:flex; padding:50px 0 50px 40px;} #contact .loca-list > ul > li + li{border-top:1px dashed #ddd;} #contact .loca-list .icon{width: 180px;text-align:center;display:flex;flex-direction:column;align-items:center;font-size: 22px;font-weight: 600;color: #204c75;} #contact .loca-list .icon i{font-size:70px;margin-top:10px;font-weight: normal;} #contact .loca-list .txt-wrap{width: calc(100% - 180px);padding-left:100px;} #contact .loca-list .txt-wrap > dl{position: relative;font-size:17px;color:#555;font-weight:400;line-height:1.8;word-break:keep-all;display:flex;flex-wrap: wrap;} #contact .loca-list .txt-wrap > dl + dl{margin-top:20px;} #contact .loca-list .txt-wrap > dl > dt{font-weight: 600;color: #246ba5;display:inline-block;font-size:19px;letter-spacing:-.5px;width: 160px;} #contact .loca-list .txt-wrap > dl > dd{width:calc(100% - 200px);font-weight: 500;} #contact .loca-list .txt-wrap p{} #contact .d-title2{font-weight: 600;display:block;font-size: 17px;letter-spacing: -1px;margin-bottom: 15px;} #contact .bus{float:left;width:487px;} #contact .bus .place{} #contact .bus .place > a{font-size: 18px;font-weight: 600;text-decoration: underline;letter-spacing: -.5px;color: #666;} #contact .bus .route strong{margin-right:10px;display:inline-block;width:51px;height:23px;line-height:23px;color:#fff;font-size:14px;background:#348bc1;border-radius:3px;text-align:center;font-weight:normal;} #contact .bus .route li{margin-top:15px;font-size:16px;color:#666;} #contact .bus .route li:nth-child(2) strong{background:#aacd06;} #contact .subway{float:left;width:613px;} #contact .station li{margin-top:15px;font-size:16px;color:#333;letter-spacing:-1px;} #contact .station li:first-child{margin-top:0;} #contact .station li img{margin-right:25px;} #contact .loca-list a:hover{text-decoration:underline;} @media (max-width: 1170px){ #contact .map-wrap {border-radius: 0; border: 0;} #contact .map-wrap .map-info-box {position: relative; bottom: auto; left: auto;} #contact .loca-list > ul > li {padding: 30px 0 40px 30px;} #contact .loca-list .txt-wrap {padding-left: 80px;} } @media (max-width: 767px){ #contact .map-wrap {margin-bottom: 40px;} #contact .map-wrap .map{height:300px;} #contact .map-wrap .map-info-box{padding:25px;} #contact .map-wrap .map-info-box .location-tit {margin-bottom: 20px;} #contact .map-wrap .loca-info-list {display: flex; flex-direction: column; gap: 10px;} #contact .map-wrap .map-info-box .location-tit p {font-size: 17px;} #contact .map-wrap .loca-info-list .loca-item dl {align-items: flex-start; flex-direction: column;} #contact .map-wrap .loca-info-list .loca-item dl dd {font-size: 15px; line-height: 1.5;} #contact .map-wrap .loca-info-list .loca-item dl dd br{display:block;} #contact .subway {float: none; width: 100%;} #contact .station li {display: flex; flex-direction: column; align-items: center; gap: 10px;} #contact .station li img {margin-right: 0; max-width: 100%;} #contact .loca-list > ul > li {padding:25px 0; flex-direction: column; gap: 20px;} #contact .loca-list .icon {width: 100%; gap: 10px; flex-direction: row-reverse; align-items: center; font-size: 22px; justify-content: center;} #contact .loca-list .icon i {font-size: 40px; margin-top: 0px;} #contact .loca-list .txt-wrap {padding-left: 0; width: 100%;} #contact .loca-list .txt-wrap > dl {flex-direction: column;} #contact .loca-list .txt-wrap > dl > dd {width: 100%;} #contact .map-wrap .loca-txt{font-size:14px;} } /* -------------------------------- sub2_1 : 전임교수 -------------------------------- */ /* 뷰 */ #Prof .prof-view{} #Prof .prof-view .PV-top{position:relative;display:flex;justify-content: space-between;} #Prof .prof-view .PV-top .left{width: 40%;margin-top: 60px;padding-left: 70px;opacity:0;transition:.8s;transform:translate(50px, 0);position:relative;z-index:10;height: 315px;display: flex;flex-direction: column;justify-content: space-between;} #Prof .prof-view .PV-top .eng-name{color: #212121;line-height: 1;text-transform: uppercase;font-weight: 800;position: relative;z-index: 10;margin-top: -9px;} #Prof .prof-view .PV-top .eng-name small{font-size: 30px;} #Prof .prof-view .PV-top .eng-name big{font-size: 72px;} #Prof .prof-view .PV-top .left-line{position:relative;margin-top:40px;} #Prof .prof-view .PV-top .left:before{content:"";background:#246ba5;position:absolute;left:0;width: 30px;border-radius: 41px;height:315px;display:block;top: 0;} #Prof .prof-view .PV-top .left-line span{font-size:24px;color:#464646;font-weight: 600;} #Prof .prof-view .PV-top .right{position: relative;display: flex;width: 50%;} #Prof .prof-view .PV-top .pv-img{position: relative; opacity:0;transform:translate(-50px, 0);transition:.8s;} #Prof .prof-view .PV-top .pv-img > img{max-width:100%;overflow: hidden;border-radius: 20px;} #Prof .prof-view .PV-top .txt-area{padding: 150px 0 0 100px;width: calc(100% - 382px);opacity:0;transform:translate(-50px, 0);transition:.8s;transition-delay:.5s}} #Prof .prof-view .PV-top .tit-wr{} #Prof .prof-view .PV-top .tit-wr big{font-size:40px;color:#212121;margin-right: 10px;font-weight: 500;} #Prof .prof-view .PV-top .tit-wr small{font-size:30px;} #Prof .prof-view .PV-top .tit-wr small span{position:relative;} #Prof .prof-view .PV-top .tit-wr small span + span{padding-left: 15px;margin-left: 15px;} #Prof .prof-view .PV-top .tit-wr small span + span:before{content:"";position:absolute;left:0;background:#212121;width:1px;height:28px;bottom: 7px;display:block;} #Prof .prof-view .PV-top .tit-wr .dp{font-size:28px;color:#246ba5;display: block;font-weight: 600;margin-top: 15px;letter-spacing: -.5px;line-height: 1;} #Prof .prof-view .info-wr{/* margin-top: 50px; */} #Prof .prof-view .info-wr strong{margin-bottom:20px;display:block;font-size: 22px;font-weight: 800;letter-spacing: 4px;color: #212121;text-transform: uppercase;} #Prof .prof-view .info-wr ul{} #Prof .prof-view .info-wr ul > li{position: relative;font-size: 18px;padding-left: 40px;min-height: 30px;padding-top: 5px;} #Prof .prof-view .info-wr ul > li > a{} #Prof .prof-view .info-wr ul > li > a > i.icon{background:#246ba5;display:flex;border-radius: 5px;width:30px;height:30px;position:absolute;left:0;font-size:19px;color: #fff;top:3px;justify-content: center;align-items: center;} #Prof .prof-view .info-wr ul > li > a:hover{text-decoration:underline;} #Prof .prof-view .info-wr ul > li + li{margin-top: 14px;} #Prof .prof-view .info-wr .lab-btn{ transition: .3s; display: inline-flex; background: #000; color: #fff; align-items: center; justify-content: space-between; border-radius: 40px; width: auto; gap: 10px; font-size: 17px; font-weight: normal; padding: 12px 28px 14px; line-height: 1; margin-top: 25px; } #Prof .prof-view .info-wr .lab-btn:hover{background: #204c75; transform: translateY(-2px);} #Prof .prof-view .right-txt{position:absolute;right: -120px;top: 100px;color:#dbdbd9;font-size:80px;transform: rotate(270deg);} #Prof .prof-view .right-txt b{color:#f4cdda; letter-spacing:-10px;} #Prof .prof-view.in-view .PV-top .pv-img{opacity:1;transform:translate(0, 0);} #Prof .prof-view.in-view .PV-top .pv-img:before{height:260px;} #Prof .prof-view.in-view .PV-top .left{opacity:1;transform:translate(0, 0);} #Prof .prof-view.in-view .PV-top .txt-area{opacity:1;transform:translate(0, 0);} #Prof .prof-view .PV-bottom{padding-top:80px;} #Prof .prof-view .flex-wr{display: flex; border-bottom: 1px solid #ddd; padding-bottom: 60px; margin-bottom: 60px;} #Prof .prof-view .flex-wr > dt{color: #246ba5; font-size: 28px; width: 380px;} #Prof .prof-view .flex-wr > dd{width: calc(100% - 380px);} #Prof .prof-view .flex-wr > dd > p{font-size:20px; color:#666; position:relative; padding-left:20px; line-height:1.3;} #Prof .prof-view .flex-wr > dd > p + p{margin-top:10px;} #Prof .prof-view .flex-wr > dd > p:before{content:""; background:#666; width:5px; height:5px; border-radius:50%; position:absolute; left:0; top:10px;} #Prof .prof-view .flex-wr > dd.block-box{display:flex;flex-wrap: wrap;align-items: flex-start; gap:10px;} #Prof .prof-view .flex-wr > dd.block-box > p{box-sizing: border-box;padding: 9px 20px;border-radius:100px;font-size:18px;} #Prof .prof-view .flex-wr > dd.block-box > p:before{display:none;} #Prof .prof-view .flex-wr > dd.block-box > p + p{margin:0;} #Prof .prof-view .flex-wr > dd.block-box.line-box{} #Prof .prof-view .flex-wr > dd.block-box.line-box > p{border:2px solid #575757;color:#575757;} #Prof .prof-view .flex-wr > dd.block-box.color-box{} #Prof .prof-view .flex-wr > dd.block-box.color-box > p{background:#e5e5e5;border: 2px solid #e5e5e5;color:#575757;} #Prof .prof-view .flex-wr:last-child{border:0; padding:0; margin:0;} @media (max-width: 1920px){ } @media (max-width: 1800px){ } @media (max-width: 1400px){ } @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ } @media (max-width: 980px){ } @media (max-width: 767px){ } @media (max-width: 640px){ } @media (max-width: 520px){ } /* -------------------------------- sub3_1 : 교과과정 -------------------------------- */ #AF-curri{position:relative;padding-bottom: 140px;} #AF-curri .subj-class-list {padding: 10px 20px;grid-template-columns: 1fr 1fr 1fr;display:grid;gap: 10px;} #AF-curri .subj-class-list > p{position:relative;background: #f9f9f9;border:1px dotted #ccc;color: #222;font-size: 16px;font-weight:400;line-height: 1.4;letter-spacing:-0.5px;border-radius:10px;text-align:center;padding: 9px 15px;display: flex;justify-content: center;align-items: center;} #AF-curri .subj-class-list > p.edu1{background: #fef0f0; border-color: #ffb6c9;} #AF-curri .subj-class-list > p.edu2{background: #e8f7fc; border-color: #80e5ff;} #AF-curri .subj-class-list > p.edu3{background: #ebfcf6; border-color: #87efda;} #AF-curri .subj-class-list > p.edu4{background: #fff8e4; border-color: #fee97e;} /*#AF-curri .subj-class-list > p{position:relative;padding-left:12px;box-sizing:border-box;color:#555;font-size: 16px;font-weight:400;line-height: 1.4;text-align:left;vertical-align:top;letter-spacing:-0.5px;padding-right: 15px;} #AF-curri .subj-class-list > p:before{content:"";display:block;position:absolute;left:0;top: 8px;overflow:hidden;width:4px;height:4px;box-sizing:border-box;border-radius:50%;background:#246ba5;}*/ #AF-curri .tit-wr {display: flex;align-items: center;justify-content: space-between;margin-bottom: 30px;} #AF-curri .curri-point{} #AF-curri .curri-point > li{ padding-left:25px; font-size:20px;} #AF-curri .link-box{background: #204c75;padding: 5px 10px;font-size: 16px;border-radius: 3px;line-height:1;color:#fff;display: inline-flex;justify-content: center;align-items: center;gap: 5px;} #AF-curri .link-box > i{line-height:1;font-size: 18px;} #AF-curri .tit-wr .sbj-list{display: inline-flex; flex-wrap: wrap; row-gap:7px; column-gap:7px;} #AF-curri .tit-wr .sbj-list > li{} #AF-curri .edu-icon{line-height: 1;font-style: normal;font-weight: 500;font-size: 16px;background: red;border-radius: 10px;border: 1px dotted red;padding: 9px 15px;display: block;position:relative;} #AF-curri .edu-icon.edu1{background: #fef0f0; border-color: #ffb6c9;} #AF-curri .edu-icon.edu2{background: #e8f7fc; border-color: #80e5ff;} #AF-curri .edu-icon.edu3{background: #ebfcf6; border-color: #9efbe8;} #AF-curri .edu-icon.edu4{background: #fff8e4; border-color: #fee97e;} #AF-curri .edu-icon.new{background: #f9f9f9; border-color: #ccc;} #AF-curri .edu-icon.new:before{content: "\f18c";color:#fd9a00;font-family: 'remixicon' !important;font-style: normal;top:-2px;} #AF-curri .CurriMap{} #AF-curri .CurriMap.cm2023{} #AF-curri .CurriMap .map-img{border-radius:15px; overflow:hidden; text-align: center; background: #fff; box-shadow: 0 0px 15px 0px rgb(0 0 0 / 5%);} #AF-curri .CurriMap .map-img img{max-width:100%;} #AF-curri .CurriMap .depthRoadMap{border-radius:15px; padding:10px; text-align: center; background: #fff; box-shadow: 0 0px 15px 0px rgb(0 0 0 / 5%);} #AF-curri .CurriMap .map-grid{display:grid;row-gap: 10px;column-gap: 20px;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;} #AF-curri .CurriMap .map-grid > li{position:relative;border-radius: 10px;} #AF-curri .CurriMap .map-grid > li > div{width:100%;height:100%;display: flex;flex-direction: column;justify-content: center;} #AF-curri .CurriMap .map-grid > li:nth-child(1) {grid-row: 1 / span 19;} #AF-curri .CurriMap .map-grid > li:nth-child(2) {grid-column: 2 / 4;} #AF-curri .CurriMap .map-grid > li:nth-child(3) {grid-column: 4 / 6;} #AF-curri .CurriMap .map-grid > li:nth-child(4) {grid-column: 6 / 8;} #AF-curri .CurriMap .map-grid > li:nth-child(5) {grid-column: 8 / 10;} #AF-curri .CurriMap .map-grid > li.dot-line{grid-column: 1 / span 9; position:relative; padding:0 !important; height:1px !important; margin:5px 0;} #AF-curri .CurriMap .map-grid > li.dot-line:before{content:""; border-top:1px dotted #ccc; width:100%; height:1px; position:absolute; top:0; left:0;} #AF-curri .CurriMap .map-grid > li:nth-child(151){grid-row: 21 / span 6; background:#204c75 !important;} #AF-curri .CurriMap .map-grid > li.left-tit{background:#246ba5;} #AF-curri .CurriMap .map-grid > li.left-tit > div{color:#fff;font-size: 19px;font-weight: 500;} #AF-curri .CurriMap .map-grid > li.year{padding: 15px;} #AF-curri .CurriMap .map-grid > li.year > div{color:#fff;font-size: 19px;font-weight: 500;} #AF-curri .CurriMap .map-grid > li.year.y1{background:#246ba5;} #AF-curri .CurriMap .map-grid > li.year.y2{background:#204c75;} #AF-curri .CurriMap .map-grid > li.year.y3{background:#204c75;} #AF-curri .CurriMap .map-grid > li.year.y4{background:#204c75;} #AF-curri .CurriMap .map-grid > li.sbj{background: #f9f9f9;border:1px dotted #ccc; height: 84px;} #AF-curri .CurriMap .map-grid > li.sbj > div{font-size: 15px;font-weight:500;padding: 10px;word-break: break-all;} #AF-curri .CurriMap .map-grid > li.sbj.edu1{background: #fef0f0; border-color: #ffb6c9;} #AF-curri .CurriMap .map-grid > li.sbj.edu2{background: #e8f7fc; border-color: #80e5ff;} #AF-curri .CurriMap .map-grid > li.sbj.none{background:none;border:transparent;} #AF-curri .map2{} #AF-curri .map2 .cir-t table thead th.thOff{background: #697584;color: #fff;border-color:rgb(255,255,255,.7)} #AF-curri .map2 .cir-t table tbody td.tdOff{background:#fcfcfc;} #AF-curri .map2 .subj-class-list {padding: 10px 20px;grid-template-columns: 1fr;display:grid;gap: 10px;} #AF-curri .map2 .subj-class-list > p{} @media (max-width: 1920px){ } @media (max-width: 1800px){ } @media (max-width: 1400px){ } @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ #AF-curri{padding-bottom:80px;} #AF-curri .subj-class-list {grid-template-columns: 1fr 1fr;} } @media (max-width: 980px){ } @media (max-width: 767px){ #AF-curri{padding-bottom:60px;} #AF-curri .curri-point > li{padding-left:21px; font-size:16px; line-height: 1.5;} #AF-curri .curri-point > li:before {top: 0px; font-size: 16px;} #AF-curri .subj-class-list{padding: 5px;grid-template-columns: 1fr;} #AF-curri .subj-class-list > p{font-size: 14px;padding-left: 10px;padding-right: 10px;} #AF-curri .subj-class-list > p:before{width:3px; height:3px;} } @media (max-width: 640px){ } @media (max-width: 520px){ } /* -------------------------------- sub4_1 : 입학 요건(대학원) -------------------------------- */ #GS-admis{position:relative;padding-bottom:100px;word-break:keep-all;} #GS-admis:before{content:"";background:url("/images/sub/gs_admis_c.png") no-repeat 0 0/100%;width:351px;height:354px;position:absolute;right:0;top: -40px;z-index:-1;} #GS-admis .GS-admis-tit-box {margin-bottom:50px;} #GS-admis .GS-admis-tit-box .tit {font-size: 24px;line-height: 1.5;color:#246ba5;font-weight: 700;margin-bottom: 30px;text-transform: uppercase;} #GS-admis .GS-admis-tit-box .txt {font-size: 42px;line-height: 1.4;letter-spacing: -2px;color: #000;font-weight: 400;} #GS-admis .co-blue {color: #204c75;} #GS-admis .GS-admis-banner-box {width: 100%; height: 0; padding-top: 27.25%; border-radius:20px; background: url("/images/sub/gs_admis_img.jpg") no-repeat center/cover; margin-bottom: 60px;} #GS-admis .GS-admis-con-box {display: flex;justify-content: space-between;} #GS-admis .GS-admis-con-box .left-con {width: 50%;box-sizing: border-box;padding-right: 60px;} #GS-admis .GS-admis-con-box .left-con .txt {font-size: 28px; line-height: 1.6; letter-spacing: -1px; color: #000; font-weight: 700;} #GS-admis .GS-admis-con-box .right-con {width: 50%;} #GS-admis .GS-admis-con-box .right-con .txt {font-size: 20px;line-height: 2;letter-spacing: -1px;color: #000;margin-bottom: 30px;} #GS-admis .GS-admis-con-box .right-con .txt a{color: #246ba5;font-weight:600;} #GS-admis .GS-admis-con-box .right-con .txt a > i{font-weight:normal;} #GS-admis .GS-admis-con-box .right-con .txt a:hover{text-decoration:underline;} @media (max-width: 1170px){ #GS-admis {padding-bottom: 80px;} #GS-admis .GS-admis-tit-box .tit {font-size: 22px; margin-bottom: 20px;} #GS-admis .GS-admis-tit-box .txt{font-size:38px;} #GS-admis .GS-admis-tit-box, #GS-admis .GS-admis-banner-box{margin-bottom: 40px;} #GS-admis .GS-admis-con-box {flex-direction: column; gap:30px;} #GS-admis .GS-admis-con-box .left-con {width: 100%; padding-right: 0px;} #GS-admis .GS-admis-con-box .right-con {width: 100%;} } @media (max-width: 767px){ #GS-admis {padding-bottom: 60px;} #GS-admis .GS-admis-tit-box, #GS-admis .GS-admis-banner-box{text-align:center;margin-bottom:20px;} #GS-admis .GS-admis-tit-box .tit {font-size: 20px; line-height: 1.2; margin-bottom: 10px;} #GS-admis .GS-admis-tit-box .txt {font-size: 24px;} #GS-admis .GS-admis-tit-box .txt br{display:none;} #GS-admis .GS-admis-banner-box {padding-top: 60%;} #GS-admis .GS-admis-con-box {gap: 20px;} #GS-admis .GS-admis-con-box .left-con .txt {font-size: 18px; font-weight: 600;} #GS-admis .GS-admis-con-box .right-con .txt {font-size: 16px; line-height: 1.6; margin-bottom: 0px;} } /* -------------------------------- sub4_2 : 졸업 요건(대학원) -------------------------------- */ #GS-grad{position: relative; padding-bottom: 140px;} #GS-grad .cont-left.s1 {border-top: 4px solid #212121;} #GS-grad .cont-left {display: flex;position: relative;border-bottom: 1px solid rgba(221, 221, 221, 1);padding: 60px 0;margin-top: 0;} #GS-grad .cont-left .tit-area{position:relative;width: 380px;padding: 0 50px 0 0;} #GS-grad .cont-left .tit-area .txt-top{display:flex;align-items: flex-end;justify-content:space-between;} #GS-grad .cont-left .tit-area .txt-top .tit-box{display:flex;flex-direction:column;} #GS-grad .cont-left .tit-area .txt-top .tit-box strong{font-size: 27px;line-height:1.2;letter-spacing: -.5px;color: #212121;font-weight: 600;display: flex;align-items:center;} #GS-grad .cont-left .tit-area .txt-top .tit-box strong > em{display:inline-block;font-size:45px;color:rgba(238, 238, 238, 1);font-weight: 500;margin-right:30px;font-style: normal;letter-spacing: 0;} #GS-grad .cont-left .cont-area{width: calc(100% - 380px);padding-top: 10px;} #GS-grad .cont-left .cont-area p + dl{margin-top:20px;} #GS-grad .cont-left .cont-area p + p.point-info{margin-top:5px;} #GS-grad dl.info-dl{display:flex; flex-wrap:wrap;} #GS-grad dl.info-dl.column{flex-direction: column;} #GS-grad dl.info-dl.column + dl.info-dl.column{margin-top:40px;} #GS-grad dl.info-dl > dt{position:relative;font-size:20px;font-weight:bold;color: #204c75;word-break:keep-all;margin-bottom: 15px;} #GS-grad dl.info-dl > dd{position:relative;font-size:19px;padding-left:10px;font-weight: 500;letter-spacing: -.5px;color: #333;} #GS-grad dl.info-dl > dd > strong:first-child {margin-top: 0;} #GS-grad dl.info-dl.column > dd {padding-left: 0;} #GS-grad .num-tit{display:block;margin: 15px 0 10px 20px;font-weight:600;font-size: 18px;color:#212121;word-spacing:-0.5px;line-height: 1.4;text-indent: -20px;} #GS-grad .num-tit > ul{margin-top:10px;} #GS-grad ol + ul{margin-top:10px;} #GS-grad ol.num-list{list-style:none;margin: 15px 0;padding: 0;} #GS-grad ol.num-list > li{position: relative;font-size: 18px;text-indent: -22px;margin-left: 22px;font-weight: 500;color: #333;line-height: 1.5;} #GS-grad ol.num-list > li + li{margin-top:5px;} #GS-grad ol.num-list > li > em{font-style:normal;} #GS-grad ol.num-list > li > ol.alpha-list{list-style: upper-alpha;margin: 10px 0 10px 0px;padding: 0px 0 0 25px;} #GS-grad ol.num-list > li > ol.alpha-list > li{text-indent: 0px;margin-left:0px;font-size: 16px;color: #555;} #GS-grad ol.num-list > li > ol.alpha-list > li + li{margin-top:5px;} #GS-grad .btn-blank{font-weight:600;} #GS-grad .btn-blank.b1{color: #246ba5;} #GS-grad .btn-blank.b2{color: #267d7c;} #GS-grad .btn-blank.b3{color: #2879ae;} #GS-grad .btn-blank > i{font-weight:normal;} #GS-grad .btn-blank:hover{text-decoration:underline;} @media (max-width: 1170px){ #GS-grad{padding-bottom: 100px;} #GS-grad .cont-left {padding: 40px 0 50px; gap: 30px; flex-direction: column;} #GS-grad .cont-left .tit-area {width: 100%; padding: 0;} #GS-grad .cont-left .cont-area {width: 100%; padding-top: 0;} } @media (max-width: 767px){ #GS-grad{padding-bottom: 60px;} #GS-grad p.txt-big {font-size: 18px; line-height: 1.6; font-weight: 500;} #GS-grad .cont-left .tit-area .txt-top {justify-content: center;} #GS-grad .cont-left .tit-area .txt-top .tit-box strong {font-size: 24px;} #GS-grad .cont-left .tit-area .txt-top .tit-box strong > em {font-size: 34px; margin-right: 20px;} #GS-grad .cont-left {padding: 20px 0 30px; gap: 20px;} #GS-grad dl.info-dl.column + dl.info-dl.column {margin-top: 30px;} #GS-grad dl.info-dl > dt {font-size: 18px; margin-bottom: 10px;} #GS-grad dl.info-dl > dd {font-size: 17px;} #GS-grad ol.num-list > li {font-size: 16px; text-indent: -20px; margin-left: 20px;} #GS-grad ol.num-list > li > ol.alpha-list {padding: 0px 0 0 20px;} #GS-grad ol.num-list > li > ol.alpha-list > li {font-size: 15px;} #GS-grad ol.num-list > li + li {margin-top: 20px;} } /* -------------------------------- sub4_5 : 학부 대학원 연계교육(대학원) -------------------------------- */ #GS-linkEdu{position: relative; padding-bottom: 140px;} #GS-linkEdu .anibox-con{position: relative;padding: 100px 6%;box-sizing: border-box;} #GS-linkEdu .anibox-con:before {position: absolute;content: "";width: 100%;height: 100%;max-height: 400px;top: 0;left: 0;background:url("/images/sub/linkedu_bg.jpg") no-repeat 50% 0 / cover;z-index: -1;border-radius:20px;} #GS-linkEdu .anibox-con:after{ position: absolute;content: "";max-width: 1460px;width: 100%;height: 480px;bottom: -150px;left: 50%;transform: translateX(-50%);display:block; z-index: -2;clip-path: polygon(50% 100%, 0 0, 100% 0);background: linear-gradient(to top, rgb(185 203 222) 0%, rgba(255, 255, 255, 0) 100%); } #GS-linkEdu .anibox-con .tit-box {text-align: center;margin-bottom: 60px;} #GS-linkEdu .anibox-con .tit-box big{font-size: 40px;font-weight: 500;letter-spacing: -1px;color: #fff;} #GS-linkEdu .anibox-con .tit-box big > b{font-size: 48px;letter-spacing: 0;color: #fff;line-height: 1.2;} #GS-linkEdu .anibox-list-box{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0 2.035rem;} #GS-linkEdu .anibox-list-box .txt-box{position:relative;margin-bottom: 40px;} #GS-linkEdu .anibox-list-box .anibox-list {position: relative;/*box-shadow: 0px 10px 20px rgb(78 78 78 / 15%);*/background-color: #f9f9f9;padding: 40px 45px;box-sizing: border-box;border-radius:15px;transition:.4s;height: 100%;} #GS-linkEdu .anibox-list .tit {font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: #000; transition: 0.4s;} #GS-linkEdu .anibox-list .sub-tit{font-size:18px;font-weight: 500;display:block;margin-top:5px;color: #333;} #GS-linkEdu .anibox-list-box .anibox-list:before { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border:3px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%); background-origin: border-box; background-clip: content-box, border-box; border-radius:15px; z-index: -1; transition:.4s; opacity:1; } #GS-linkEdu .anibox-list-box .anibox-list.active .tit{color:#246ba5;} #GS-linkEdu .anibox-list-box .anibox-list.active{background:transparent;box-shadow: 0px 20px 50px rgb(36 107 165 / 25%);} #GS-linkEdu .anibox-list-box .anibox-list.active:before{opacity:1;background-image: linear-gradient(#fff, #fff), linear-gradient(to bottom, #a9dcf5 0%, #246ba5 100%);} #GS-linkEdu .cont-2{position:relative;z-index: 20;width: 100%;height: 270px;box-sizing: border-box;border-radius: 20px;background: rgb(255 255 255 /50%);backdrop-filter: blur(10px);padding: 60px;box-shadow: 0px 10px 20px rgb(78 78 78 / 10%);} #GS-linkEdu .sq-list{display:flex;} #GS-linkEdu .sq-list > li{width: 50%; box-sizing: border-box;} #GS-linkEdu .sq-list > li + li{padding-left: 39px; border-left: 1px solid rgba(71, 71, 71, 0.3);} #GS-linkEdu .sq-list .sq-item{display: flex; align-items: start;} #GS-linkEdu .sq-list .sq-item .icon{width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: rgb(36 107 165);} #GS-linkEdu .sq-list .sq-item .icon > img{max-width: 50px;width:90%;} #GS-linkEdu .sq-list .sq-item > dl{width: calc(100% - 90px);padding-left: 30px;box-sizing: border-box;} #GS-linkEdu .sq-list .sq-item > dl > dt{font-size: 24px;color: rgb(1, 1, 1);font-weight: 800;} #GS-linkEdu .sq-list .sq-item > dl > dd{margin-top: 20px;} #GS-linkEdu .sq-list .sq-item > dl > dd > div{font-size: 17px;color: rgb(102, 102, 102);font-weight: 400;word-break: keep-all;line-height: 1.6;} #GS-linkEdu .cont-3{margin-top:160px;} #GS-linkEdu .conarea {max-width: 1740px;width: 90vw;min-height: 997px;padding: 110px 80px 110px 135px;box-sizing: border-box;left: 50%;position: relative;transform: translateX(-50%);text-align: left;} #GS-linkEdu .conarea:before{content:"";position:absolute;width: 90vw;height: 100%;background: url("/images/sub/talent_box_bg.jpg") no-repeat center / cover;left: 50%;top: 0;transform: translateX(-50%);border-radius: 34px;z-index: -1;} #GS-linkEdu .conarea .tit-wr{position:relative;margin-bottom: 60px;} #GS-linkEdu .conarea .tit-wr h5.title {color: #fff;font-size: 38px;font-weight: bold;} #GS-linkEdu .conarea .tit-wr p{font-size:22px; font-weight:500; opacity:.6; color:#fff; display:block; margin-top:20px;} #GS-linkEdu .conarea .boxwrap{box-sizing:border-box;background: rgba(255,255,255,0.05);max-width:1000px;width:100%;border-radius:20px;margin-bottom:30px;padding:40px 50px;backdrop-filter: blur(10px);} #GS-linkEdu .conarea .boxwrap:last-child{margin-bottom: 0;} #GS-linkEdu .conarea .boxwrap dl dt{display: flex;align-items:center;padding-bottom: 30px;border-bottom:1px solid rgba(255,255,255,0.2);} #GS-linkEdu .conarea .boxwrap dl dt span{font-size: 28px;color:#fff;font-weight: 700;} #GS-linkEdu .conarea .boxwrap dl dt span > b{font-weight: 600;} #GS-linkEdu .conarea .boxwrap dl dt i{display: block;width:51px;height:51px;margin-right:20px;} #GS-linkEdu .conarea .boxwrap dl dt .i1{background: url("/images/sub/3306425.png")no-repeat center / 100%;} #GS-linkEdu .conarea .boxwrap dl dt .i2{background: url("/images/sub/734275.png")no-repeat center / 100%;} #GS-linkEdu .conarea .boxwrap dl dt .i3{background: url("/images/sub/7576760.png")no-repeat center / 100%;} #GS-linkEdu .conarea .boxwrap dl dd{box-sizing:border-box;flex-wrap:wrap;padding-top: 30px;display: flex;align-items:start;justify-content:space-between;gap: 10px;} #GS-linkEdu .conarea .boxwrap dl dd div{width: 100%;box-sizing:border-box;padding-left: 15px;margin-bottom: 2px;position: relative;color:#fff;font-size: 21px;font-weight: 400;line-height: 1.5;} #GS-linkEdu .conarea .boxwrap dl dd div:before{position: absolute;content:'';background: #ccc;width: 7px;height:2px;top: 13px;left:0;} @media (max-width: 1170px){ #GS-linkEdu{padding-bottom:100px;} #GS-linkEdu .anibox-con {padding: 100px 3%;} #GS-linkEdu .anibox-list-box {grid-gap: 1.5%;} #GS-linkEdu .anibox-list-box .anibox-list{padding:8%;} #GS-linkEdu .anibox-list-box .txt-box {margin-bottom: 20px;text-align: center;} #GS-linkEdu .anibox-list .tit {font-size: 24px;} #GS-linkEdu .list-Dot>li{font-size:17px;} #GS-linkEdu .cont-2 { height: auto; padding: 50px;} #GS-linkEdu .sq-list {flex-direction: column; align-items: center; gap: 40px;} #GS-linkEdu .sq-list > li {width: 100%;} #GS-linkEdu .sq-list > li + li {padding-left: 0; padding-top: 40px; border-left: 0; border-top: 1px solid rgba(71, 71, 71, 0.3);} #GS-linkEdu .cont-3 {margin-top: 80px;} #GS-linkEdu .conarea {width: 90vw; min-height: auto; padding: 80px 60px 60px;} } @media (max-width: 980px){ #GS-linkEdu .anibox-con {padding: 60px 3%;} #GS-linkEdu .anibox-con .tit-box {margin-bottom: 30px;} #GS-linkEdu .anibox-con .tit-box big, #GS-linkEdu .anibox-con .tit-box big > b{font-size: 34px;} #GS-linkEdu .anibox-list-box {grid-template-columns: repeat(1, 1fr); grid-gap: 10px;} #GS-linkEdu .anibox-list-box .anibox-list {padding: 25px; text-align:center;} #GS-linkEdu .list-Dot{display:inline-block;} } @media (max-width: 767px){ #GS-linkEdu{padding-bottom:60px;} #GS-linkEdu .anibox-con {padding: 30px 3%;} #GS-linkEdu .anibox-con:after {height: 100px; bottom: -50px;} #GS-linkEdu .anibox-con .tit-box big, #GS-linkEdu .anibox-con .tit-box big > b{font-size: 24px;} #GS-linkEdu .list-Dot>li {font-size: 16px;} #GS-linkEdu .cont-2 {padding: 25px;} #GS-linkEdu .sq-list {gap: 25px;} #GS-linkEdu .sq-list .sq-item {align-items: center; gap: 25px; flex-direction: column;} #GS-linkEdu .sq-list .sq-item .icon {width: 70px; height: 70px;} #GS-linkEdu .sq-list .sq-item .icon > img {max-width: 40px;} #GS-linkEdu .sq-list .sq-item > dl {width: 100%; padding-left: 0; text-align: center;} #GS-linkEdu .sq-list > li + li {padding-top: 25px;} #GS-linkEdu .cont-3 {margin-top: 60px;} #GS-linkEdu .conarea {width: 100%; padding:40px 20px 20px;} #GS-linkEdu .conarea .tit-wr {margin-bottom: 30px; text-align: center;} #GS-linkEdu .conarea .tit-wr h5.title {font-size: 26px;} #GS-linkEdu .conarea .tit-wr p {font-size: 18px; margin-top: 10px;} #GS-linkEdu .conarea .boxwrap {margin-bottom: 10px; padding: 25px;} #GS-linkEdu .conarea .boxwrap dl dt {padding-bottom: 20px;} #GS-linkEdu .conarea .boxwrap dl dt span {font-size: 24px;} #GS-linkEdu .conarea .boxwrap dl dt i {width:35px; height:35px; margin-right: 15px;} #GS-linkEdu .conarea .boxwrap dl dd {padding-top: 15px;} #GS-linkEdu .conarea .boxwrap dl dd div {font-size: 17px;} #GS-linkEdu .conarea .boxwrap dl dd div:before {top: 10px;} } /* -------------------------------- sub4_4 : 교과과정(대학원) -------------------------------- */ #GS-curri{padding-bottom:100px;word-break:keep-all;} #GS-curri .img-box{ position:relative;display:table;overflow:hidden;border-radius: 20px;width:100%;height: 300px;padding: 60px; background: url("/images/sub/gs_curri_bg.jpg")no-repeat right 50%/ cover; -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box; } #GS-curri .img-box:before{content:"";background:#000;position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:.6;} #GS-curri .img-box:after{content:"";background: linear-gradient(to right, rgba(36,107,165,1) 0%,rgba(36,107,165,0) 100%);position:absolute;left:0;top:0;width:100%;height:100%;display:block;} #GS-curri .img-box img{display:none;} #GS-curri .txt-box{display:table-cell; vertical-align:bottom; position:relative; z-index:5;} #GS-curri .txt-box big{display:block;font-weight:normal;font-size: 48px;letter-spacing: -2px;color:#fff;} #GS-curri .txt-box big > b{font-weight: 600;} #GS-curri .txt-box small{display:block;font-size:24px;font-weight:normal;line-height: 1;letter-spacing: -.5px;color:#fff;margin-top: 20px;} #GS-curri .txt-box small > b{font-weight:800; font-size:28px;letter-spacing:0;} #GS-curri .GS-c-list{margin:100px 0 0 0;border-radius: 20px;padding: 0px 40px;border:1px solid rgba(224, 223, 226, 0.6);} #GS-curri .GS-c-list > li{position:relative; cursor:pointer; border-bottom:1px solid rgba(224, 223, 226, 0.6);} #GS-curri .GS-c-list > li:last-child{border:0;} #GS-curri .GS-c-list .que{padding: 35px 0px;display:flex;align-items: center;justify-content: space-between;} #GS-curri .GS-c-list .c-tit{color:#2879ae; font-size:26px; font-family:'GmarketSansMedium'; font-weight:normal; width:80px;} #GS-curri .GS-c-list .que h4{position:relative;font-size: 25px;font-weight: 600;letter-spacing: -1px;color:#1f1f1f;padding-right:40px;width: 100%;} #GS-curri .GS-c-list .que h4 > b{margin-left:10px;font-weight:800;font-size:20px;letter-spacing:0;color: #8e9aa7;} #GS-curri .GS-c-list .que h4 i{position: absolute;right: 0;top: 50%;font-size: 30px;color: #246ba5;font-weight: normal;transform: translate(0%, -50%);} #GS-curri .GS-c-list .anw{display:none;position:relative;padding: 30px 35px;background:#f9f9f9;border-radius: 15px;margin-bottom: 30px;} #GS-curri .GS-c-list .anw .c-tit{position: absolute;left: 20px;top: 30px;} #GS-curri .GS-c-list .anw > p{display:block;font-size: 18px;line-height: 1.8;font-weight: 500;letter-spacing: -1px;color: #444;word-break: keep-all;} #GS-curri .bt-info-box{text-align:center;position:relative;margin-top:100px;background: #ffffff;border-radius: 25px;} #GS-curri .bt-info-box .tit{line-height:1.6; font-family:'GmarketSansMedium'; font-weight:normal;} #GS-curri .bt-info-box .tit strong{font-size:22px;} #GS-curri .bt-info-box .tit strong b{font-family:'GmarketSansBold';font-weight:normal;color: #f9b81e;} #GS-curri .bt-info-box .tit i{} #GS-curri .bt-info-box .tit span{display:block; font-size:18px; margin-top:10px; color:#666;} #GS-curri .bt-info-box .box-btn{display:flex; margin-top:40px; text-align:left; gap:12px; justify-content:center;} #GS-curri .bt-info-box .box-btn > li{display:block; width:calc(50% - 12px); border-radius:25px; position:relative; max-width:420px; height:auto; min-height:150px; padding:35px 40px; transition: .3s;} #GS-curri .bt-info-box .box-btn a{padding-right:65px; display:flex; width:100%; height:100%; flex-direction:column; justify-content:flex-end; gap:10px;} #GS-curri .bt-info-box .box-btn .btn-kakao{background: #fff5da url("/images/sub/kakao_bg.png") no-repeat center right 35px;background-size:70px;} #GS-curri .bt-info-box .box-btn .btn-normal{background: #d9f6ff url("/images/sub/normal_bg.png") no-repeat center right 35px;background-size:70px;} #GS-curri .bt-info-box span{color:#1f1f1f; font-weight:400; line-height:1; font-size:17px;} #GS-curri .bt-info-box h4{font-size:25px; font-family:'GmarketSansBold'; font-weight:normal; position:relative; line-height:1.6;} #GS-curri .bt-info-box .box-btn > li:hover{transform: translateY(-4px);} @media (max-width: 1170px){ #GS-curri{padding-bottom: 80px;} #GS-curri .img-box{height:200px;} #GS-curri .txt-box big{font-size:30px;} #GS-curri .txt-box small{font-size:18px; margin-top:10px; line-height:1.4;} #GS-curri .txt-box small > b{font-size:18px;} #GS-curri .GS-c-list{margin:30px 0 0 0;} #GS-curri .GS-c-list .c-tit{width:50px;} #GS-curri .GS-c-list .que h4{width: 100%;} #GS-curri .GS-c-list .anw > p{padding-left: 0px;} #GS-curri .bt-info-box{margin-top:50px;} } @media (max-width: 767px){ #GS-curri{padding-bottom:60px;} #GS-curri .img-box{padding: 30px;} #GS-curri .GS-c-list{margin:10px 0 0 0; border-radius:15px; padding:0 20px;} #GS-curri .GS-c-list .que{padding: 15px 0px;} #GS-curri .GS-c-list .c-tit{width:40px; font-size:20px;} #GS-curri .GS-c-list .que h4{width: 100%;font-size:18px;line-height:1.4;} #GS-curri .GS-c-list .que h4 i{font-size:25px;} #GS-curri .GS-c-list .anw{padding: 19px;border-radius: 10px;margin-bottom:20px;} #GS-curri .GS-c-list .anw .c-tit{left:15px; top:20px;} #GS-curri .GS-c-list .anw > p{padding-left: 0;font-size: 16px;font-weight: 500;line-height: 1.6;} #GS-curri .bt-info-box{margin-top:30px;} #GS-curri .bt-info-box .tit{line-height:1.4;} #GS-curri .bt-info-box .tit strong{font-size:18px;} #GS-curri .bt-info-box .tit span{font-size:16px; line-height:1.4; margin-top:10px;} #GS-curri .bt-info-box .box-btn{margin-top:20px; gap:10px; justify-content:center; flex-direction:column; align-items:center;} #GS-curri .bt-info-box .box-btn > li{width: 100%; border-radius:15px; max-width:100%; height:auto; min-height:auto; padding:20px 25px;} #GS-curri .bt-info-box .box-btn a{padding-right:55px; gap:5px;} #GS-curri .bt-info-box span{font-size:15px;} #GS-curri .bt-info-box h4{font-size:20px; line-height:1.5;} #GS-curri .bt-info-box .box-btn .btn-kakao{background: #fff5da url("/images/sub/kakao_bg.png") no-repeat center right 25px; background-size:50px;} #GS-curri .bt-info-box .box-btn .btn-normal{background: #d9f6ff url("/images/sub/normal_bg.png") no-repeat center right 25px; background-size:50px;} #GS-curri .GS-c-list .que h4 > b{display:block;margin:0px 0 0 0;} } /* -------------------------------- sub4_6 : 졸업 후 진로 -------------------------------- */ #Career{position:relative;padding-bottom:200px;word-break:keep-all;} #Career:before{content: "";position:absolute;bottom:0;left:50%;width:100vw;margin-left:-50vw;height:100%;z-index:-2;background: transparent linear-gradient(180deg, #fff 0%, #f5fafe 100%) 0% 0% no-repeat padding-box;} #Career .Career-tit-box {margin-bottom:50px;text-align: center;} #Career .Career-tit-box .tit {font-size: 24px;line-height: 1.5;color:#246ba5;font-weight: 700;margin-bottom: 30px;text-transform: uppercase;} #Career .Career-tit-box .txt {font-size: 32px;line-height: 1.6;letter-spacing: -2px;color: #000;font-weight: 400;} #Career .co-blue {color: #204c75;} #Career .Career-banner-box {width: 100%; height: 0; padding-top: 27.25%; border-radius:20px; background: url("/images/sub/ca_img.jpg") no-repeat center/cover; margin-bottom: 60px;} #Career .Career-con-box {display: flex;justify-content: space-between;} #Career .Career-con-box .left-con {width: 40%;box-sizing: border-box;padding-right: 60px;} #Career .Career-con-box .left-con .txt {font-size: 32px;line-height: 1.6;letter-spacing: -1px;color: #000;font-weight: 700;} #Career .Career-con-box .right-con {width: 60%;} #Career .Career-con-box .right-con .txt {font-size: 20px;line-height: 2;letter-spacing: -1px;color: #000;margin-bottom: 30px;} #Career .Career-con-box .right-con .txt a{color: #246ba5;font-weight:600;} #Career .Career-con-box .right-con .txt a > i{font-weight:normal;} #Career .Career-con-box .right-con .txt a:hover{text-decoration:underline;} #Career .ca-org .top .our {display: flex; justify-content:center; position: relative; margin-top: 80px;} #Career .ca-org .top .our li {display: flex;flex-direction: column;justify-content: center;align-items: center;color: #212121;flex-basis: 280px;max-width: 280px;min-height: 280px;border-radius: 50%;text-align: center;padding: 30px;} #Career .ca-org .top .our li:nth-child(1) {background: rgb(79 79 79 / 10%);} #Career .ca-org .top .our li:nth-child(2) {background: rgb(36 107 165 / 80%); color:#fff;} #Career .ca-org .top .our li:nth-child(3) {background: rgb(52 139 193 / 80%); color:#fff;} #Career .ca-org .top .our li + li {margin-left:-25px;} #Career .ca-org .top .our li .our-tit{font-size: 28px; font-weight:500;letter-spacing: -.5px;font-weight: bold;} /* tab menu*/ #Career .tabMenu{display: flex;flex-wrap: wrap;gap: 5%; margin-top:40px;} #Career .tabMenu.introMenu li{} #Career .tabMenu li{position:relative;cursor: pointer; flex:1 1 25%; border: 3px solid #f2f2f2; border-radius:15px;box-sizing: border-box;text-align: center;align-items: start;min-height: 230px;} #Career .tabMenu li:before { position: absolute; content: "\ea4c"; left: 50%; margin-left: -22px; bottom: -22px; width:44px; height:44px; border-radius:50%; transition: all 0.4s; background: #e2e2e2; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #232323; font-family: 'remixicon' !important; } #Career .tabMenu li .list-inner {display: flex;flex-direction: column;align-items: center;justify-content: flex-start;height: 100%;} #Career .tabMenu li::before {background: #f2f2f2;} #Career .tabMenu .icon-box {display: flex; align-items: center; justify-content: center; position: relative; width: auto;} #Career .tabMenu .icon-box img {transition: all 0.4s;} #Career .tabMenu .icon-box .on {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none;} #Career .tabMenu .txt-box {padding-top: 20px;} #Career .tabMenu .tit {font-size: 24px;font-weight: 600;letter-spacing: -0.02em;color: #000;transition: all 0.4s;} #Career .tabMenu .txt {font-size: 16px;font-weight: 500;color: rgba(0, 0, 0, 0.6);padding-top: 10px;transition: all 0.4s;} #Career .tabMenu .wBox{width:100%;height:100%;background:#ffffff;border-radius:10px;margin-top: 15px;padding: 25px 35px;text-align: left;} #Career .tabMenu .wBox > p{position:relative;padding-left:12px;box-sizing:border-box;color:#555;font-size: 16px;font-weight:400;line-height: 1.4;text-align:left;vertical-align:top;letter-spacing:-0.5px;padding-right: 15px;} #Career .tabMenu .wBox > p:before{content:"";display:block;position:absolute;left:0;top: 8px;overflow:hidden;width:4px;height:4px;box-sizing:border-box;border-radius:50%;background:#246ba5;} #Career .tabMenu .wBox > p + p{margin-top:5px;} #Career .tabMenu li.active{border-color: #204c75;background: #204c75;box-shadow: 1rem 1rem 2.5rem rgb(36 107 165/0.16);} #Career .tabMenu li.active:before {content: "\ea4c"; background: #000000; color: #ffffff;} #Career .tabMenu li:nth-child(1).active{border-color: #246ba5;background: #246ba5;box-shadow: 1rem 1rem 2.5rem rgb(36 107 165/0.16);} #Career .tabMenu li:nth-child(2).active{border-color: #348bc1;background: #348bc1;box-shadow: 1rem 1rem 2.5rem rgb(52 139 193/0.16);} #Career .tabMenu li:nth-child(3).active{border-color: #348bc1;background: #348bc1;box-shadow: 1rem 1rem 2.5rem rgb(52 139 193/0.16);} #Career .tabMenu li.active .icon-box .on {opacity: 1; pointer-events: none;} #Career .tabMenu li.active .off {opacity: 0; pointer-events: auto;} #Career .tabMenu li.active .tit, #Career .tabMenu li.active .txt{color:#fff;} #Career .tabContent{display:none;} #Career .tabContent.active{display:block;border-radius:15px;padding: 40px 20px;text-align:center;margin-top: 60px;border: 3px solid #204c75;background-color: #fff;} #Career .tabContent.bc1.active{border: 3px solid #246ba5;background-color: #fff;} #Career .tabContent.bc2.active{border: 3px solid #348bc1;background-color: #fff;} #Career .tabContent.bc3.active{border: 3px solid #348bc1;background-color: #fff;} #Career .tabContent .titWr{display:block;margin-bottom:20px; letter-spacing:-.5px;} #Career .tabContent .titWr big{display:block; font-size:28px; font-weight: 700; color: #000;} #Career .tabContent .titWr small{font-size:20px; font-weight:600; color: #204c75;margin-top:10px;display:block;} #Career .tabContent .titWr p.star{padding-left:10px;position:relative; font-size:16px; color:rgb(67 67 67 / 80%); font-weight:400; margin-top:20px; display:inline-block;} #Career .tabContent .titWr p.star:before{content:"*"; position:absolute; left:0; top:2px; font-size:17px;} #Career .tabContent .icon-box img {max-width: 65px;} #Career .tabContent .icon-box.flex {margin-top:40px;display: flex;gap: 30px 40px;justify-content: center;flex-wrap: wrap;align-items: flex-start;} #Career .tabContent .icon-box.flex figure{padding:0;margin:0;max-width: 120px;} #Career .tabContent .example-icon-txt {font-size: 15px;font-weight: 600;letter-spacing: -0.055em;line-height: 1.62em;color: #000;text-align: center;padding-top:20px;line-height: 1.4;} #Career .paralax-title{position:absolute;left:50%;bottom:0;display:block;font-weight: 800;width:400%;text-align:left;word-spacing:-20px;font-size:140px;color:rgba(51, 51, 51, 0.05);line-height:1;z-index:-1;} #Career .PC{} #Career .MB{display:none;} @media (max-width: 1170px){ #Career {padding-bottom: 80px;} #Career .Career-tit-box .tit {font-size: 22px; margin-bottom: 20px;} #Career .Career-tit-box .txt{font-size:38px;} #Career .Career-tit-box, #Career .Career-banner-box{margin-bottom: 40px;} #Career .Career-con-box {flex-direction: column; gap:30px;} #Career .Career-con-box .left-con {width: 100%; padding-right: 0px;} #Career .Career-con-box .right-con {width: 100%;} #Career .PC{display:none;} #Career .MB{display:block;} #Career .tabContent{display:block;} #Career .tabContent .titWr{display:none;} #Career .tabMenu .wBox{border-radius:10px 10px 0 0;} #Career .tabMenu {flex-direction: column;gap:20px;} #Career .tabMenu li {flex: 1;min-height: auto;} #Career .tabMenu li:before{display:none;} #Career .tabMenu li .tit, #Career .tabMenu li .txt{color:#fff;} #Career .tabMenu li:nth-child(1){border-color: #246ba5;background: #246ba5;box-shadow: 1rem 1rem 2.5rem rgb(36 107 165/0.16);} #Career .tabMenu li:nth-child(2){border-color: #348bc1;background: #348bc1;box-shadow: 1rem 1rem 2.5rem rgb(52 139 193/0.16);} #Career .tabMenu li:nth-child(3){border-color: #348bc1;background: #348bc1;box-shadow: 1rem 1rem 2.5rem rgb(52 139 193/0.16);} #Career .tabContent .icon-box.flex {margin-top:0px;gap: 20px 20px; padding: 30px; background: #fff; border-radius: 0 0 10px 10px;} #Career .tabContent .icon-box img {max-width: 40px;} #Career .tabContent.active, #Career .tabContent.bc1.active, #Career .tabContent.bc2.active, #Career .tabContent.bc3.active{border:0;border-radius:0 0 10px 10px;padding: 40px 20px;text-align:center;margin-top:0px;} } @media (max-width: 767px){ #Career {padding-bottom: 60px;} #Career .Career-tit-box, #Career .Career-banner-box{text-align:center;margin-bottom:20px;} #Career .Career-tit-box .tit {font-size: 20px; line-height: 1.2; margin-bottom: 10px;} #Career .Career-tit-box .txt {font-size: 24px;} #Career .Career-tit-box .txt br{display:none;} #Career .Career-banner-box {padding-top: 60%;} #Career .Career-con-box {gap: 20px;} #Career .Career-con-box .left-con .txt {font-size: 18px; font-weight: 600;} #Career .Career-con-box .right-con .txt {font-size: 16px; line-height: 1.6; margin-bottom: 0px;} #Career .tabMenu .wBox{padding: 15px 15px;} #Career .tabMenu .wBox > p{padding-right:0;} #Career .tabContent .icon-box.flex{padding:15px;} #Career .tabContent.active, #Career .tabContent.bc1.active, #Career .tabContent.bc2.active, #Career .tabContent.bc3.active{padding:0px;} #Career .tabMenu .tit{font-size:20px;} } /* -------------------------------- 학사일정 -------------------------------- */ #Schedule{position:relative; padding-bottom:140px;} #Schedule .sch-aca{} /* 학부 */ #Schedule .sch-gs{} /* 대학원 */ #Schedule .wBox{overflow:hidden;position:relative;background-color: #fff;border-radius: 20px;max-width: 1280px;margin: 0 auto;box-shadow: 8px 6px 20px 0 rgba(0, 0, 0, 0.1);} #Schedule .wBox .inner{position:relative;text-align:center;padding: 40px 40px 40px;} #Schedule .wBox .tit{} #Schedule .wBox .tit big{display:block;width:74px;height:74px;margin:0 auto 25px;background:#246ba5;border-radius:50%;font-size:30px;line-height:74px;color:#fff;} #Schedule .wBox .tit big > i{font-weight:normal;} #Schedule .wBox .btn-wrap{display:flex;justify-content: center;gap: 20px;} #Schedule .wBox .btn-wrap > li{width: 100%;} #Schedule .wBox strong{display:block;background:#f7f7f7;padding: 20px;margin: 25px 0 0;border-radius: 10px;font-weight: 500;font-size: 17px;color: #666;word-spacing:-0.5px;line-height:1.4;} #Schedule .wBox .down-btn{ position:relative; background:#fff; border:1px solid #246ba5; color:#246ba5; display:inline-flex; justify-content:space-between; align-items:center; flex-direction:row-reverse; font-size:20px; font-weight:600; letter-spacing:-.5px; padding:19px 30px; width:100%; max-width:400px; line-height:20px; border-radius:5px; transition:.3s; } #Schedule .wBox .down-btn:before{display:inline-block;content:"\f0f3";font-family:'remixicon' !important;font-style:normal;font-size: 23px;font-weight: normal;} #Schedule .wBox .down-btn:hover{background:#246ba5; color:#fff;} @media (max-width: 1920px){ } @media (max-width: 1800px){ } @media (max-width: 1400px){ } @media (max-width: 1300px){ } @media (max-width: 1240px){ } @media (max-width: 1170px){ #Schedule{padding-bottom:80px;} } @media (max-width: 980px){ } @media (max-width: 767px){ #Schedule{padding-bottom:60px;} #Schedule .wBox .inner{padding:25px 20px 20px;} #Schedule .wBox .down-btn{font-size:17px; padding:15px; min-height:auto;} #Schedule .wBox strong{margin: 15px 0 0;font-size: 16px;} } @media (max-width: 640px){ } @media (max-width: 520px){ } /* 테두리 원형 테이블 */ .cir-table{background:#fff;position:relative;border:1px solid rgba(224, 223, 226, 0.6);border-radius: 15px;padding: 10px;margin:0;} .cir-table .table-cir{width: 100%;} .cir-table .table-cir th, .cir-table .table-cir td{padding:22px 0;font-size: 17px;text-align:center;} .cir-table .table-cir thead th{background:#f9f9f9;font-size: 17px;font-weight:600;letter-spacing:-0.8px;line-height:1.31;} .cir-table .table-cir thead th:first-child{border-top-left-radius: 10px;border-bottom-left-radius: 10px;} .cir-table .table-cir thead th:last-child{border-top-right-radius: 10px;border-bottom-right-radius: 10px;} .cir-table .table-cir tbody tr{border-bottom:1px solid rgba(31, 31, 31, 0.05);} .cir-table .table-cir tbody tr:last-child{border-bottom:0;} .cir-table .table-cir tbody th{font-weight:500;position:relative;display:table-cell;} /*.cir-table .table-cir tbody th.box-th:before{border-radius:5px; background:#f9f9f9; display:block; content:""; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}*/ .cir-table .table-cir tbody td{padding:25px 0;color:#444;line-height: 1.4;} .cir-table .table-cir .m-block{display:none;} table{width:100%; border-collapse:collapse; border-spacing:0;} .table{position:relative;width:100%;background-color:#fff;border-top:2px solid #555;font-size: 16px;line-height:1.6;} .table:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#F7F7F7;} .table.vertical_top tr th,.table.vertical_top tr td{vertical-align:top} .table.vertical_middle tr th,.table.vertical_middle tr td{vertical-align:middle;} .table.vertical_bottom tr th,.table.vertical_bottom tr td{vertical-align:bottom;} .table.fixed{table-layout:fixed;} .table .caption{display:none;} .table.text_center tbody tr td{text-align:center;} .table.text_left tbody tr td{text-align:left;} .table.text_left tbody tr th,.table.text_left thead tr th{text-align:center;} table{width:100%; border-collapse:collapse; border-spacing:0;} .table{position:relative; width:100%; /*margin:20px 0 0 0;*/ background-color:#fff; border-top:1px solid #204c75; font-size:17px; line-height:24px;} .table:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#e7e7e7;} .table.fixed{table-layout:fixed;} .table .caption{display:none;} .table.text_center tbody tr td{text-align:center;} .table.text_left tbody tr td{text-align:left;} .table.text_left tbody tr th,.table.text_left thead tr th{text-align:center;} .table.break tbody td,.table.break thead th,.table.break tbody td,.table.break tbody th{word-break:break-all;} .table thead th{padding: 18px 10px;border:1px solid #e7e7e7;border-top:0;border-bottom-color:#e7e7e7;background-color:#f5f5f5;color: #212121;font-size: 20px;font-weight: 500;text-align:center;} .table thead th:first-child{border-left:none;} .table thead th:last-child{border-right:none;} .table tbody th, .table tfoot th{background-color:#f5fafe; font-weight:500; color:#333;} .table tbody th, .table tbody td, .table tfoot th, .table tfoot td{padding:14px 10px;border-bottom:1px solid #e7e7e7;border-right:1px solid #e7e7e7;font-weight:400;color: #212121;word-break:keep-all;} .table tbody th{text-align:center;font-size: 18px;color: #212121;font-weight: 500;} .table tbody td{font-size: 17px;} .table tbody td.text-left{text-align:left;padding: 14px 18px;} .table tfoot td:first-child{border-left:none;} .table tbody tr th:last-child{border-right:none;} .table td:last-child{border-right:none;} .table td[rowspan]:first-child{border-right:1px solid #e7e7e7;} .table tbody th + td, .table tbody td + td, .table tfoot td{border-left:1px solid #e7e7e7;} .table tbody td, .table tfoot td{text-align:center;} .table tbody td > ul{margin-top:0;margin-bottom:0;padding-left: 15px;text-align:left;} .table tbody td > ul > li, .table tbody td ol li{font-size:17px;} .table tbody td > ul.po-list_clear{padding-left:0;} .table tbody td > ol{margin-top:0; margin-bottom:0;} .table th.double, .table td.double{border-left:3px double #e7e7e7;} .table .po-list > li > ul >li > ul > li:before, .table .num > li > ul >li > ul > li:before, .table p.blt.type3:before, .table .po-list.third > li:before {top:15px;} .table td.color-1{background:#f5fafe;} .table td.color-2{background:#e3f4f3;} .td-bg1{background:#fff2f2;} .td-bg2{background:#f5fafe;} .table-tit{font-size:18px; text-align:center; font-weight:600; color:#212121; display:block; margin:10px auto;} .table-color{position:relative;width:100%;background-color:#fff;font-size: 16px;line-height: 1.5;font-family:'LotteMartHappy';font-weight: 600;} .table-color:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#e7e7e7;} .table-color.fixed{table-layout:fixed;} .table-color .caption{display:none;} .table-color.text_center tbody tr td{text-align:center;} .table-color.text_left tbody tr td{text-align:left;} .table-color.text_left tbody tr th,.table-color.text_left thead tr th{text-align:center;} .table-color.break tbody td,.table-color.break thead th,.table-color.break tbody td,.table-color.break tbody th{word-break:break-all;} .table-color tbody tr:nth-child(even){background:#fdfdfd;} .table-color thead th{padding:17px 10px 14px;background-color:#246ba5;color:#fff;font-size:18px;font-weight:normal;font-family:'LotteMartHappy';text-align:center;} .table-color.bg-gr thead th{background-color:#267d7c;} .table-color.bg-bl thead th{background-color:#348bc1;} .table-color thead th:first-child{border-radius:15px 0 0 15px;} .table-color thead th:last-child{border-radius:0 15px 15px 0;} .table-color tbody th, .table-color tbody td, .table-color tfoot th, .table-color tfoot td{padding: 17px 10px 14px;border-bottom:1px solid #e7e7e7;border-right:1px solid #e7e7e7;color: #555;word-break:keep-all;} .table-color tbody th{font-weight:normal;font-family:'LotteMartHappy';color:#222;font-size:18px;} .table-color tbody td{} .table-color tfoot td:first-child{border-left:none;} .table-color tbody tr th:last-child{border-right:none;} .table-color td:last-child{border-right:none;} .table-color td[rowspan]:first-child{border-right:1px solid #e7e7e7;} .table-color tbody th + td, .table-color tbody td + td, .table-color tfoot td{border-left:1px solid #e7e7e7;} .table-color tbody td, .table-color tfoot td{text-align:center;} .table-color tbody td ul{margin-top:0; margin-bottom:0; padding-left:10px; text-align:left;} .table-color tbody td ul li, .table-color tbody td ol li{font-size:15px;} .table-color tbody td ul.po-list_clear{padding-left:0;} .table-color tbody td ol{margin-top:0; margin-bottom:0;} .table-color th.double, .table-color td.double{border-left:3px double #e7e7e7;} .table-color .po-list > li > ul >li > ul > li:before, .table-color .num > li > ul >li > ul > li:before, .table-color p.blt.type3:before, .table-color .po-list.third > li:before {top:15px;} .table-color td.color-1{background:#f5fafe;} .table-color td.color-2{background:#e3f4f3;} .table-color .call{position:relative; display:inline-flex; align-items:center; justify-content:center; padding-left:28px; color:#222; font-weight:normal; font-family:'LotteMartHappy'; transition:.2s ease-out;} .table-color .call i{background:#f7c326; color:#fff; border-radius:50%; width:23px; height:23px; font-size:14px; text-align:center; line-height:22px; position:absolute; left:0; top:-1px; transition:.2s ease-out;} .table-color .call:hover{} .table-color .call:hover i{background:#348bc1;} .table2{position:relative; width:100%; margin:20px 0; background-color:#fff; border-top:2px solid #204c75; font-size:14px; line-height:24px;} .table2:before{display:block; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#e7e7e7;} .table2 thead th{padding:10px 10px; border:1px solid #e7e7e7; border-bottom-color:#e7e7e7; background-color:#f5f5f5; color:#333; font-weight:500; text-align:center;} .table2 thead th:first-child{border-left:none;} .table2 thead th:last-child{border-right:none;} .table2 tbody th{font-size:14px; color:#777; font-weight:400;} .table2 tbody td{font-size:14px;} .table2 tbody th, .table2 tbody td, .table2 tfoot th, .table2 tfoot td{padding:10px 10px; border-bottom:1px solid #e7e7e7; border-right:1px solid #e7e7e7; font-weight:400; color:#636363; word-break:keep-all;} .table2 tfoot td:first-child{border-left:none;} .table2 tbody tr th:last-child{border-right:none;} .table2 td:last-child{border-right:none;} .table2 td[rowspan]:first-child{border-right:1px solid #e7e7e7;} .table2 tbody th + td, .table2 tbody td + td, .table2 tfoot td{border-left:1px solid #e7e7e7;} .table2 tbody td, .table2 tfoot td{text-align:center;} .table2 tbody td ul{margin-top:0; margin-bottom:0; padding-left:10px; text-align:left;} .table2 tbody td ul li, .table2 tbody td ol li{font-size:15px;} .table2 tbody td ul.po-list_clear{padding-left:0;} .table2 tbody td ol{margin-top:0; margin-bottom:0;} .table2 th.double, .table2 td.double{border-left:3px double #e7e7e7;} .table2 .po-list > li > ul >li > ul > li:before, .table2 .num > li > ul >li > ul > li:before, .table2 p.blt.type3:before, .table2 .po-list.third > li:before {top:15px;} .sContWrap .t-link{color:#246ba5; font-weight:500;} .sContWrap .t-link:hover{text-decoration:underline;} /* 테이블 가로스크롤 */ .table_con_wrap{position:relative;margin: 15px auto;} .table_con_wrap .table_prev_mo{display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.6); z-index:95;} .table_con_wrap .table_prev_mo ul{position:absolute; top:50%; left:50%; margin:-11px 0 0 -75px;} .table_con_wrap .table_prev_mo ul:after{content: ''; display:block; clear:both;} .table_con_wrap .table_prev_mo ul li{float:left;} .table_con_wrap .table_prev_mo ul li p{font-size:15px; color:#fff;} .table_con_wrap .table_prev_mo ul li i{margin-top:4px; font-size:12px; color:#fff; animation:prevarrow .5s ease-in infinite alternate;} p.mo_hide{display:none; color:#888; text-align:center; margin-top:10px;} .respo-table tbody .label{display:none; width:65px; color:#444; font-size:13px; font-weight:500; text-align:left; vertical-align:top;} .respo-table tbody .label.w80{width:80px;} .respo-table tbody .label.w100{width:100px;} .respo-table .m-clear{} .respo-table .m-block{display:none;} .respo-table .m-top-th{} .cir-t{background:#fff;position:relative;border:1px solid rgba(224, 223, 226, 0.6);border-radius: 15px;padding: 10px;margin:0;} .cir-t table{border-radius:10px; overflow:hidden; border:1px solid rgba(31, 31, 31, 0.05);} .cir-t table td{border-color: rgba(31, 31, 31, 0.05);} .cir-t table thead th{background: #246ba5;color: #fff;border-color:rgb(255,255,255,.7)} .cir-t table td{background:#fcfcfc;} .cir-t table tbody th{background: rgba(246, 247, 250, 1);border-color:#eee} /*@media (max-width:1170px){ .table-line-box{border:0;} .table.respo-table{border-top:0;} .respo-table thead{display:none;} .respo-table .m-clear{display:none;} .respo-table .m-top-th{display:none;} .respo-table .m-block{display:block;} .respo-table .m-tit{display:block; background:#333; color:#fff; font-size:14px; padding:6px;} .respo-table .m-block br{display:none;} .cir-table .table-cir tbody tr{display:block; width:100%;} .respo-table tbody tr{ display:block; margin:0 0 0.7em 0; border-radius:15px; border:1px solid #e7e7e7; -webkit-box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); -moz-box-shadow: 0px 7px 6px -6px rgba(0,0,0,.28); box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); } .cir-table .table-cir tbody th{display:block;} .respo-table tbody th{font-size:15px; padding:10px; color:#fff; background:#246ba5; width:100%; display:block; border-radius:5px;} .respo-table.bg-bl tbody th{background:#348bc1;} .respo-table.bg-gr tbody th{background:#267d7c;} .respo-table tbody tr td{text-align:left; display:block; padding:0.8em; font-size:14px; line-height:1.5; border-top:0;} .respo-table tbody tr td br{display:none;} .respo-table tbody tr td:nth-child(even){background: #f7f7f7;} .respo-table tbody .label{display:block; float:left; height:34px; line-height:1.7;} .respo-table .tb-num{display:none;} }*/ @media (max-width:1000px){ .dbstg{display: block;} } @media (max-width:800px){ .table_con_wrap{width:100%; overflow-x:auto; white-space:nowrap; padding-bottom:20px;} .table_con_wrap table{width:100%;} .table_con_wrap .table_prev_mo{display:block;} p.mo_hide{display:block;} } @media (max-width: 767px){ .cir-t{padding:0; border:0;} .table thead th, .table tbody th{font-size: 16px;padding: 10px;} .table tbody td{font-size:15px;padding: 10px;} .table tbody td ul li, .table tbody td ol li{font-size:14px;} .table-color tbody th, .table-color tbody td, .table-color tfoot th, .table-color tfoot td{border-bottom:0; border-right:0;} .table-color tbody th + td, .table-color tbody td + td, .table-color tfoot td{border-left:0;} .table-color td:last-child{border-radius:0 0 15px 15px;} .cir-table .respo-table thead{display:none;} .cir-table .respo-table .m-clear{display:none;} .cir-table .respo-table .m-top-th{display:none;} .cir-table .table-cir {width: 100%; display: block;} .cir-table .table-cir .m-block, .cir-table .respo-table .m-block{display:block;} .cir-table .respo-table .mb-tit{font-size:15px; padding:10px; color:#fff; background:#246ba5; width:100%; display:block; border-radius:5px;} .cir-table .respo-table .m-block br{display:none;} .cir-table .table-cir tbody{width:100%; display:block;} .cir-table .table-cir tbody tr{ display:block; margin:0 0 0.7em 0; border-radius:15px; border:1px solid #e7e7e7; -webkit-box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); -moz-box-shadow: 0px 7px 6px -6px rgba(0,0,0,.28); box-shadow: 0px 7px 6px -6px rgb(0 0 0 / 28%); } .cir-table .table-cir tbody th{font-size:15px; padding:10px; color:#fff; background:#246ba5; width:100%; display:block; border-radius:5px;} .cir-table .table-cir tbody th br{display:none;} .cir-table .table-cir tbody tr td{text-align:left;display: flex;gap: 15px;padding:0.8em;font-size:14px;line-height:1.5;border-top:0;} .cir-table .table-cir tbody tr td br{display:none;} .cir-table .table-cir tbody tr td:nth-child(even){background: #f7f7f7;} .cir-table .table-cir tbody .label{display:block;font-size: 14px;line-height:1.7;padding: 0;color: #222;} .cir-table .table-cir .tb-num{display:none;} } /* -------------------------------- 개인정보취급방침 -------------------------------- */ .privacy-policy{font-family:'Noto Sans KR'; padding-bottom:120px;} .privacy-policy .gray-bg{background:#f8f8f8;padding: 50px 60px;box-sizing:border-box;} .privacy-policy p + dl{margin-top:20px;} .privacy-policy .pp-wrap{} .privacy-policy .pp-txt-box{} .privacy-policy h1.pp-tit{display:block; font-size:28px; font-weight:bold; margin:0 0 20px; text-align:left;} .privacy-policy .privacy-top{margin:30px 0 0; background:#f8f8f8; padding:40px 41px; box-sizing:border-box;} .privacy-policy p{margin:0;} .privacy-policy .txt, .privacy-page dd{font-size:16px; color:#222;} .privacy-policy .txt + .txt{margin:10px 0 0 0;} .privacy-policy .txt-2{margin:10px 0 0 0;} .privacy-policy dl + dl{margin-top:40px;} .privacy-policy dt{font-size: 19px;display:inline-block;width:100%;color:#000;line-height:inherit;font-weight:700;margin: 0px 0 10px;} .privacy-policy dd > ul.list-hyphen{margin:5px 0 15px 20px;} .privacy-policy dd > ul.ul-gnd{margin:10px 0 10px 20px;} .privacy-policy dd > ul.ul-gnd > li{text-indent:-24px; margin-left:20px;} .privacy-policy dd a{color:inherit;} .privacy-policy dd a:hover{text-decoration:underline;} .privacy-policy .dd-board{margin-top:10px;} .privacy-policy .dd-board table th, .privacy-policy .dd-board table td{font-size:15px;} .privacy-policy .pp-btn-wrap{position:relative; margin-top:60px; text-align:center;} .privacy-policy a.pp-btn{margin:0 auto; display:inline-block; text-align:center; color:#fff; font-weight:500; font-size:16px; background:#246ba5; padding:20px 35px; transition:.2s;} @media (max-width: 1170px){ .privacy-policy{padding-bottom:60px;} } @media (max-width: 767px){ .privacy-policy{padding-bottom:40px;} .privacy-policy .contTit{margin-top:0;} .privacy-policy .gray-bg{margin:15px 0 0; padding:20px;} .privacy-policy dl + dl{margin-top:30px;} .privacy-policy dt:first-child{margin-top:0;} .privacy-policy dt{font-size:17px;} .privacy-policy .txt, .privacy-page dd{font-size:15px;} .privacy-policy dd > ul.list-hyphen{margin:5px 0 5px 0px;} .privacy-policy dd > ul.ul-gnd{margin:10px 0 10px 0px;} .privacy-policy dd > ul.ul-gnd > li{text-indent:-21px; margin-left:22px;} } /* -------------------------------- 이메일무단수집거부 -------------------------------- */ #nonMail{padding-bottom: 140px;} #nonMail .contTit-s{margin-top:50px;} #nonMail .ui-topbox .txtwrap p{/*margin:30px 0 0;*/} #nonMail .ui-ftbox .inner{text-align:center;} .ui-topbox{overflow:hidden;position:relative;padding:3px;background:#f1f3f6;border:none;border-radius: 0;word-break: keep-all;} .ui-topbox:before{left:0; right:0; top:0; z-index:1; width:auto; height:50px; background:#cacfd5; display:block; position:absolute; content:"";} .ui-topbox:after{left:0;top:0;z-index:2;width:205px;height:50px;background: #246ba5;display:block;visibility:visible;position:absolute;content:"";} .ui-topbox .inner{position:relative;min-height: 185px;background:#fff;padding:30px 60px 30px 205px;border-radius: 0;z-index:3;display:flex;align-items:center;} .ui-topbox .inner.img-inner{padding-left:320px; min-height:300px;} .ui-topbox .img{top:35px; left:40px; width:230px; height:230px; display:block; position:absolute;} .ui-topbox .img15{background:url("/images/sub/img_15.png") no-repeat 50% 50%; background-size:100%;} .ui-topbox .img-step{background:url("/images/sub/img_steps.png") no-repeat 50% 50%; background-size:100%;} .ui-topbox .icon{top:40px;left:60px;width:105px;height:105px;background-color: #246ba5;display: flex;font-size: 40px;line-height: 74px;color: #fff;border-radius:50%;position:absolute;justify-content: center;align-items: center;} .ui-topbox .ico-15{background:url("/images/sub/2469996.png") no-repeat 50% 50% #f3f4f6; background-size:60%;} .ui-topbox .ico-pro{background:url("/images/sub/3976516.png") no-repeat 50% 50% #f3f4f6;background-size: 60%;} .ui-topbox .ico-pro-d{background:url("/images/sub/2470035.png") no-repeat 50% 50% #f3f4f6;background-size: 50%;} .ui-topbox .ico-mail{background:url("/images/sub/4663958.png") no-repeat 50% 50% #f3f4f6; background-size:60%;} .ui-topbox .txtwrap{position:relative;width: 100%;display: block;} .ui-topbox .txtwrap > p{font-size: 18px;line-height:1.6;color: #333;} .ui-topbox .txtwrap p + p{margin-top:15px;} .ui-topbox .txtwrap .tit-wrap{display:flex;align-items:flex-end;flex-wrap:wrap;margin: auto;font-size: 32px;line-height:1.6;color: #333;font-family:'GmarketSansBold';letter-spacing: 0;} .ui-topbox .txtwrap .tit-wrap > strong{color: #246ba5;font-weight:normal;} .ui-topbox .txtwrap p > strong{color: #246ba5;font-weight: 600;} .ui-topbox .txtwrap p > b{color: #222;font-weight:600;} .ui-topbox .txtwrap strong.logo-img{margin-right:15px; background:url("/images/common/logo_c.png") 0 0 no-repeat; display:inline-block; width:230px; height:36px; background-size:230px; text-indent:-9999px;} .ui-ftbox{overflow:hidden;position:relative;background:#fafafa;border:1px solid #eaeaea;margin-top:40px;border-radius: 15px;} .ui-ftbox .inner{position:relative;padding:30px;} .ui-ftbox .btn-black{transition:.2s ease-out;text-align:center;display: inline-flex;background: #222;border-radius: 10px;padding:15px 30px;color:#fff;font-weight: 500;gap: 10px;font-size: 17px;align-items: center;justify-content: center;} .ui-ftbox .btn-black:hover{background:#666;} @media (max-width: 1024px){ .ui-topbox .inner.img-inner{padding-left:30px; flex-direction:column;} .ui-topbox .img15, .ui-topbox .img-step{position:relative; width:280px; height:280px; left:auto; top:auto; margin-bottom:20px;} .ui-topbox .inner.img-inner .tit-wrap{ justify-content:center; margin-bottom:10px;} } @media (max-width: 767px){ .ui-topbox .inner{padding:20px 20px; min-height:auto;} .ui-topbox .inner.img-inner{padding:20px 20px;} .ui-topbox .img15, .ui-topbox .img-step{width:200px; height:200px;} .ui-topbox .icon{display:none;} .ui-topbox .txtwrap .tit-wrap{display:block; font-size:22px; line-height:1.2;} .ui-topbox .txtwrap strong.logo-img{display:block; margin-right:0; width:180px; height:29px; background-size:100%; margin-bottom:10px;} .ui-topbox .txtwrap p{font-size:14px;} } /* -------------------------------- 준비중 -------------------------------- */ .ui-comming{overflow:hidden;position:relative;background-color: #fff;border-radius: 20px;box-shadow: 8px 6px 20px 0 rgba(0, 0, 0, 0.1);margin-bottom: 100px;} .ui-comming .inner{position:relative;text-align:center;padding: 60px;} .ui-comming .tit{} .ui-comming .tit big{display:block; width:74px; height:74px; margin:0 auto 25px; background:#246ba5; border-radius:50%; font-size:30px; line-height:74px; color:#fff;} .ui-comming .tit small{display:block; margin:20px 0 15px; font-weight:600; font-size:28px; color:#333; letter-spacing:-.2px; line-height:1.2;} .ui-comming .tit small strong{color:#246ba5;font-weight:600;} .ui-comming .tit p{font-size:17px; color:#666;} /*============================================================================== sub1_1 사업단장 인사말 ==============================================================================*/ /* 서브비주얼 이미지 보정 (사업단소개) */ #sVisual .svWrap .sv-img1{background-size:cover;} @font-face { font-family: 'KccAnchangho'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2402_1@1.0/KCC-Ahnchangho.woff2') format('woff2'); font-weight: normal; font-display: swap; } .greet{position:relative; padding-bottom:140px; word-break:keep-all;} /*-------------------------------------------------------------- 인사말 상단 --------------------------------------------------------------*/ .greet_top{position:relative; display:flex; align-items:center; justify-content:space-between; gap:70px; padding:10px 0 90px;} /* 배경 워터마크 */ .greet_wm{position:absolute; left:-10px; top:112px; z-index:0; font-size:118px; font-weight:700; line-height:1; letter-spacing:-2px; color:#f5fafe; white-space:nowrap; pointer-events:none; user-select:none; will-change:transform;} .greet_top .greet_txt{position:relative; z-index:1; flex:1 1 auto; min-width:0;} .greet_tit{display:block; font-size:44px; font-weight:500; color:#222; letter-spacing:-1.5px; line-height:1.45;} .greet_tit b{font-weight:800; color:#246ba5;} .greet_quote{position:relative; margin-top:44px; padding:44px 50px 46px; border-radius:24px; background:#f5fafe; box-shadow:0 14px 34px rgba(32,76,117,.05);} .greet_quote:before{content:"\201C"; position:absolute; left:44px; top:2px; font-family:Georgia, "Times New Roman", serif; font-size:84px; font-weight:700; line-height:1; color:#246ba5; opacity:.16;} .greet_quote .q_lead{position:relative; font-size:24px; font-weight:600; color:#333; letter-spacing:-0.8px; line-height:1.55;} .greet_quote .q_lead b{font-weight:800; color:#246ba5;} .greet_quote .q_sub{margin-top:14px; padding-top:18px; border-top:1px solid #dcebf5; font-size:19px; font-weight:500; color:#5f697e; letter-spacing:-0.5px; line-height:1.6;} /* 사업단장 사진 */ .greet_photo{position:relative; z-index:1; flex:0 0 auto; width:348px; text-align:center;} .greet_photo:before{content:""; position:absolute; right:-10%; top:-26px; width:300px; height:300px; margin-left:-150px; border-radius:50%; background:linear-gradient(135deg, #e5f3fb 0%, #e5f3fb 60%, rgba(255,255,255,0) 100%); z-index:-1;} .greet_photo .photo_frame{display:block; width:100%; overflow:hidden; border-radius: 0 0 40px 0;} .greet_photo .photo_frame img{display:block; width:100%; height:auto;} .greet_photo .photo_name{display:block; margin-top:22px;} .greet_photo .photo_name em{display:block; font-style:normal; font-size:16px; font-weight:500; color:#7b8497; letter-spacing:-0.4px;} .greet_photo .photo_name b{display:block; margin-top:6px; font-size:26px; font-weight:800; color:#204c75; letter-spacing:-1px;} /*-------------------------------------------------------------- 주요 연구 및 프로그램 --------------------------------------------------------------*/ .greet_stit{position:relative; margin-bottom:34px; padding-left:20px; font-size:30px; font-weight:800; color:#222; letter-spacing:-1.2px; line-height:1.3;} .greet_stit:before{content:""; position:absolute; left:0; top:50%; width:6px; height:26px; margin-top:-13px; border-radius:3px; background:#246ba5;} .work_list{display:flex; flex-wrap:wrap; gap:24px;} .work_list li{position:relative; flex:1 1 calc(50% - 12px); min-width:0; padding:40px 40px 42px; border:1px solid #dcebf5; border-radius:24px; background:#fff;} .work_list .num{display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#e5f3fb; font-size:20px; font-weight:700; color:#246ba5; letter-spacing:0;} .work_list .tit{display:block; margin-top:20px; font-size:24px; font-weight:700; color:#204c75; letter-spacing:-1px; line-height:1.35;} .work_list .txt{margin-top:14px; font-family: 'Pretendard', sans-serif; font-size:18px; font-weight:500; color:#5f697e; letter-spacing:-0.5px; line-height:1.75;} /*-------------------------------------------------------------- 맺음말 --------------------------------------------------------------*/ .greet_outro{margin-top:70px; padding-top:56px; border-top:1px solid #dcebf5;} .greet_outro > p{font-family: 'Pretendard', sans-serif; font-size:20px; font-weight:500; color:#5f697e; letter-spacing:-0.5px; line-height:1.85;} .greet_outro > p + p{margin-top:20px;} .greet_outro .thanks{margin-top:30px; font-family: 'Paperlogy', sans-serif; font-size:22px; font-weight:700; color:#204c75; letter-spacing:-0.8px;} .greet_sign{display:flex; align-items:center; justify-content:flex-end; gap:20px; margin-top:56px;} .greet_sign em{font-style:normal; font-size:19px; font-weight:500; color:#5f697e; letter-spacing:-0.5px;} .greet_sign b{font-family:'KccAnchangho'; font-size:30px; font-weight:normal; color:#222; letter-spacing:4px;} /*============================================================================== sub1_1 반응형 ==============================================================================*/ @media (max-width: 1700px){ .greet_wm{font-size:104px; top:104px;} .greet_tit{font-size:40px;} .greet_quote .q_lead{font-size:22px;} .work_list .tit{font-size:22px;} } @media (max-width: 1400px){ .greet{padding-bottom:120px;} .greet_top{gap:50px; padding-bottom:80px;} .greet_wm{font-size:86px; top:92px;} .greet_tit{font-size:36px; letter-spacing:-1.2px;} .greet_quote{margin-top:36px; padding:38px 40px 40px; border-radius:20px;} .greet_quote:before{left:34px; font-size:72px;} .greet_quote .q_lead{font-size:20px;} .greet_quote .q_sub{font-size:17px; margin-top:12px; padding-top:16px;} .greet_photo{width:300px;} .greet_photo:before{width:260px; height:260px; margin-left:-130px;} .greet_photo .photo_name b{font-size:24px;} .greet_stit{font-size:27px; margin-bottom:28px;} .work_list{gap:20px;} .work_list li{flex-basis:calc(50% - 10px); padding:34px 32px 36px; border-radius:20px;} .work_list .num{width:48px; height:48px; font-size:18px;} .work_list .tit{font-size:21px; margin-top:16px;} .work_list .txt{font-size:17px; margin-top:12px;} .greet_outro{margin-top:60px; padding-top:48px;} .greet_outro > p{font-size:17px;} .greet_outro .thanks{font-size:20px;} .greet_sign b{font-size:27px;} .greet_sign em{font-size:18px;} } @media (max-width: 1170px){ /* 태블릿 이하에서 background-attachment:fixed 렌더링 오류 방지 */ #sVisual .svWrap .sv-img1{background-attachment:scroll !important;} .greet{padding-bottom:100px;} .greet_top{gap:40px; padding-bottom:64px;} .greet_wm{font-size:66px; top:76px; letter-spacing:-1px;} .greet_tit{font-size:32px;} .greet_quote{margin-top:30px; padding:32px 30px 34px;} .greet_quote:before{left:26px; top:0; font-size:60px;} .greet_quote .q_lead{font-size:19px;} .greet_quote .q_sub{font-size:16px;} .greet_photo{width:250px;} .greet_photo:before{width:214px; height:214px; margin-left:-107px; top:-18px;} .greet_photo .photo_frame{border-radius:20px 20px 70px 20px;} .greet_photo .photo_name{margin-top:18px;} .greet_photo .photo_name em{font-size:14px;} .greet_photo .photo_name b{font-size:21px; margin-top:4px;} .greet_stit{font-size:24px; padding-left:16px; margin-bottom:24px;} .greet_stit:before{width:5px; height:22px; margin-top:-11px;} .work_list li{padding:30px 26px 32px;} .work_list .num{width:44px; height:44px; font-size:17px;} .work_list .tit{font-size:20px;} .work_list .txt{font-size:16px; line-height:1.7;} .greet_outro{margin-top:50px; padding-top:40px;} .greet_outro > p{font-size:16px; line-height:1.8;} .greet_outro .thanks{font-size:19px; margin-top:24px;} .greet_sign{margin-top:44px; gap:14px;} .greet_sign em{font-size:16px;} .greet_sign b{font-size:24px; letter-spacing:3px;} } @media (max-width: 980px){ /* 상단 : 사진을 텍스트 위로 이동 */ .greet_top{flex-direction:column; align-items:stretch; gap:0; padding-bottom:56px;} .greet_wm{position:static; transform:none !important; margin-bottom:6px; font-size:48px; letter-spacing:-0.5px; color:#dcebf5;} .greet_top .greet_photo{order:-1; width:100%; display:flex; align-items:center; gap:24px; text-align:left; margin-bottom:30px;} .greet_photo:before{left:0; top:-14px; width:180px; height:180px; margin-left:0;} .greet_photo .photo_frame{flex:0 0 auto; width:190px;} .greet_photo .photo_name{margin-top:0;} .work_list li{flex-basis:100%;} } @media (max-width: 767px){ .greet{padding-bottom:70px;} .greet_top{padding-bottom:44px;} .greet_wm{font-size:34px; margin-bottom:4px;} .greet_tit{font-size:25px; letter-spacing:-1px; line-height:1.4;} .greet_quote{margin-top:24px; padding:26px 20px 28px; border-radius:16px;} .greet_quote:before{left:16px; font-size:48px;} .greet_quote .q_lead{font-size:17px; letter-spacing:-0.6px;} .greet_quote .q_lead br{display:none;} .greet_quote .q_sub{font-size:15px; margin-top:10px; padding-top:14px;} .greet_top .greet_photo{gap:18px; margin-bottom:24px;} .greet_photo:before{width:140px; height:140px; top:-10px;} .greet_photo .photo_frame{width:132px; border-radius:14px 14px 48px 14px;} .greet_photo .photo_name em{font-size:13px;} .greet_photo .photo_name b{font-size:19px;} .greet_stit{font-size:20px; padding-left:12px; margin-bottom:18px;} .greet_stit:before{width:4px; height:18px; margin-top:-9px;} .work_list{gap:14px;} .work_list li{padding:24px 20px 26px; border-radius:16px;} .work_list .num{width:40px; height:40px; font-size:15px;} .work_list .tit{font-size:18px; margin-top:14px;} .work_list .txt{font-size:15px; margin-top:10px; line-height:1.7;} .greet_outro{margin-top:40px; padding-top:32px;} .greet_outro > p{font-size:15px; line-height:1.75;} .greet_outro > p + p{margin-top:16px;} .greet_outro .thanks{font-size:17px; margin-top:20px;} .greet_sign{flex-direction:column; align-items:flex-end; gap:6px; margin-top:34px;} .greet_sign em{font-size:14px;} .greet_sign b{font-size:21px; letter-spacing:2px;} } @media (max-width: 480px){ .greet_wm{font-size:27px;} .greet_tit{font-size:22px;} .greet_top .greet_photo{flex-direction:column; align-items:flex-start; gap:14px;} .greet_photo .photo_frame{width:150px;} .greet_quote .q_lead{font-size:16px;} .work_list .tit{font-size:17px;} .greet_sign b{font-size:19px;} } /* -------------------------------- sub1_2 : 비전 및 목표 -------------------------------- */ .vision{padding-bottom:160px; color:#204c75; word-break:keep-all;} .vision *, .vision *:before, .vision *:after{box-sizing:border-box;} .vision ul, .vision ol{list-style:none; margin:0; padding:0;} .vision button{font-family:inherit;} .vis_sec{position:relative;} .vis_sec + .vis_sec{margin-top:140px;} /* 섹션 타이틀 */ .vis_stit{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:56px; text-align:center;} .vis_stit em{display:inline-flex; align-items:center; gap:12px; font-style:normal; font-size:15px; font-weight:700; color:#246ba5; letter-spacing:2px; text-transform:uppercase; line-height:1.3;} .vis_stit em:before, .vis_stit em:after{content:""; display:block; width:28px; height:1px; background:#246ba5; opacity:.35;} .vis_stit span{font-size:38px; font-weight:700; color:#222; letter-spacing:-1.2px; line-height:1.3;} /* BRIDGE 컬러 텍스트 */ .bridge_txt{display:inline-flex; font-weight:800; letter-spacing:0;} .bridge_txt i{font-style:normal;} .bridge_txt i:nth-child(1){color:#f0a500;} .bridge_txt i:nth-child(2){color:#e8484f;} .bridge_txt i:nth-child(3){color:#8a5cf0;} .bridge_txt i:nth-child(4){color:#2f6fe0;} .bridge_txt i:nth-child(5){color:#13a3a3;} .bridge_txt i:nth-child(6){color:#2ea56b;} /* STEAM 컬러 */ .vision .k_s{--kc:#2f6fe0;} .vision .k_t{--kc:#13a3a3;} .vision .k_e{--kc:#2ea56b;} .vision .k_a{--kc:#f29a1f;} .vision .k_m{--kc:#7a5af0;} /* ---------- 비전체계 ---------- */ .vs_row{position:relative; display:flex; align-items:stretch; gap:24px;} .vs_row + .vs_row{margin-top:20px;} .vs_label{position:relative; flex:0 0 200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; border-radius:24px; background:#204c75; text-align:center;} .vs_label:after{content:""; position:absolute; left:100%; top:50%; width:24px; border-top:1px dashed #c4dcee;} .vs_label em{font-style:normal; font-size:13px; font-weight:600; color:rgba(255,255,255,.55); letter-spacing:1.5px; line-height:1.3;} .vs_label b{font-size:24px; font-weight:700; color:#fff; letter-spacing:-.5px; line-height:1.3;} .vs_body{flex:1 1 auto; min-width:0;} /* 비전 */ .vs_vision{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; height:100%; min-height:160px; padding:36px 40px; border-radius:24px; background:#204c75; text-align:center;} .vs_vision:before{content:""; position:absolute; right:-80px; top:-120px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);} .vs_vision:after{content:""; position:absolute; left:-60px; bottom:-140px; width:280px; height:280px; border-radius:50%; border:1px solid rgba(255,255,255,.12);} .vs_pill{position:relative; z-index:1; display:inline-block; padding:6px 16px; border:1px solid rgba(255,255,255,.35); border-radius:100px; background:rgba(255,255,255,.1); font-size:14px; font-weight:600; color:#fff; letter-spacing:.5px;} .vs_vision strong{position:relative; z-index:1; font-size:34px; font-weight:800; color:#fff; letter-spacing:-1.2px; line-height:1.4;} .vision .m_br{display:none;} /* 핵심가치 */ .vs_value{display:flex; gap:20px; height:100%;} .vs_value li{position:relative; overflow:hidden; flex:1 1 50%; display:flex; align-items:center; gap:20px; padding:30px 36px; border:1px solid #dcebf5; border-radius:24px; background:#fff; box-shadow:0 14px 34px rgba(32,76,117,.06);} .vs_value .ico{flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:20px; font-size:30px; color:#fff;} .vs_value .v_bridge .ico{background:linear-gradient(135deg, #246ba5, #348bc1);} .vs_value .v_agent .ico{background:linear-gradient(135deg, #267d7c, #329b9a);} .vs_value .txt em{display:block; font-style:normal; font-size:26px; font-weight:800; color:#204c75; letter-spacing:-.5px; line-height:1.2;} .vs_value .txt b{display:block; margin-top:4px; font-size:18px; font-weight:600; color:#4b5468; letter-spacing:-.5px;} .vs_value .en{align-self:flex-end; margin-left:auto; font-size:14px; font-weight:500; color:#9aa3b5;} /* 화살표 */ .vs_arrow{display:flex; justify-content:center; padding:18px 0 18px 224px;} .vs_arrow span{display:block; width:140px; height:46px; background:linear-gradient(180deg, #c4dcee 0%, #f5fafe 100%); clip-path:polygon(32% 0, 68% 0, 68% 45%, 100% 45%, 50% 100%, 0 45%, 32% 45%);} /* 목표 */ .vs_goal{position:relative; overflow:hidden; display:flex; align-items:center; gap:32px; height:100%; padding:36px 44px; border:1px solid #c4dcee; border-radius:24px; background:#f5fafe;} .vs_goal .g_txt{flex:1 1 auto; min-width:0;} .vs_goal .g_txt p{font-size:20px; font-weight:500; color:#4b5468; letter-spacing:-.5px; line-height:1.6;} .vs_goal .g_txt strong{display:block; margin-top:8px; font-size:30px; font-weight:800; color:#204c75; letter-spacing:-1px; line-height:1.4;} .vs_goal .g_num{flex:0 0 240px; display:flex; flex-direction:column; align-items:center; justify-content:center; height:140px; border-radius:20px; background:#204c75; box-shadow:0 14px 30px rgba(36,107,165,.25);} .vs_goal .g_num .lbl{font-size:15px; font-weight:500; color:rgba(255,255,255,.7);} .vs_goal .g_num b{margin-top:6px; font-family:'Outfit', 'Pretendard', sans-serif; font-size:48px; font-weight:500; color:#fff; letter-spacing:-1.5px; line-height:1.1;} .vs_goal .g_num b em{margin-left:4px; font-style:normal; font-size:22px; font-weight:700;} /* 인재상 */ .vs_talent{display:flex; align-items:center; justify-content:center; gap:18px; height:100%; min-height:110px; padding:30px 40px; border:2px solid #246ba5; border-radius:24px; background:#fff;} .vs_talent .ico{flex:0 0 56px; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#e5f3fb; font-size:28px; color:#246ba5;} .vs_talent strong{font-size:30px; font-weight:700; color:#204c75; letter-spacing:-1px; line-height:1.4;} .vs_talent strong b{font-weight:800; color:#246ba5; box-shadow:inset 0 -12px 0 #e5f3fb;} /* ---------- 참여대학별 전략체계 ---------- */ .st_grid{display:grid; grid-template-columns:150px repeat(5, minmax(0, 1fr)); column-gap:12px; row-gap:10px;} .st_univ{display:contents;} .st_univ.u1{--uc:#267d7c;} .st_univ.u2{--uc:#246ba5;} .st_univ.u3{--uc:#329b9a;} .st_univ.u4{--uc:#204c75;} .st_univ.u5{--uc:#2879ae;} .st_univ.u1 > *{grid-column:2;} .st_univ.u2 > *{grid-column:3;} .st_univ.u3 > *{grid-column:4;} .st_univ.u4 > *{grid-column:5;} .st_univ.u5 > *{grid-column:6;} .st_univ .st_head{grid-row:1;} .st_univ .st_goal{grid-row:2;} .st_univ .st_core{grid-row:3;} .st_univ .st_task.t1{grid-row:5;} .st_univ .st_task.t2{grid-row:7;} .st_univ .st_task.t3{grid-row:9;} .st_lbl{grid-column:1; display:flex; align-items:center; justify-content:center; padding:16px 10px; border-radius:18px; background:#204c75; text-align:center;} .st_lbl b{font-size:18px; font-weight:700; color:#fff; letter-spacing:-.5px; line-height:1.4;} .st_lbl.l_goal{grid-row:2;} .st_lbl.l_core{grid-row:3; background:#246ba5;} .st_lbl.l_task{grid-row:4 / 10; background:#2879ae;} .st_bar{grid-column:2 / 7; display:flex; align-items:center; justify-content:center; height:44px; margin-top:10px; border-radius:100px; background:linear-gradient(90deg, #246ba5, #348bc1);} .st_bar span{font-size:18px; font-weight:500; color:#fff; letter-spacing:-.4px;} .st_bar.b1{grid-row:4; margin-top:0;} .st_bar.b2{grid-row:6; background:linear-gradient(90deg, #267d7c, #329b9a);} .st_bar.b3{grid-row:8; background:linear-gradient(90deg, #204c75, #246ba5);} .st_head{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:22px 10px 20px; border:1px solid #dcebf5; border-radius:18px; background:#fff; text-align:center;} .st_head .emb{flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; margin-bottom:12px;} .st_head .emb img{display:block; width:100%; height:100%; object-fit:contain;} .st_head .name{display:flex; flex-direction:column; min-width:0;} .st_head b{font-size:19px; font-weight:800; color:#204c75; letter-spacing:-.5px;} .st_head em{display:block; margin-top:2px; font-style:normal; font-size:12px; font-weight:500; color:#9aa3b5;} .st_goal{display:flex; align-items:center; justify-content:center; padding:22px 14px; border-radius:18px; background:#f5fafe; text-align:center;} .st_goal p{font-size:17px; font-weight:600; color:#204c75; letter-spacing:-.5px; line-height:1.5;} .st_goal p b{font-weight:800; color:var(--uc);} .st_core{display:flex; flex-direction:column; justify-content:center; padding:20px 14px; border:1px solid #dcebf5; border-radius:18px; background:#fff; text-align:center;} .st_core p{font-size:17px; font-weight:700; color:#246ba5; letter-spacing:-.5px; line-height:1.5;} .st_core em{display:block; margin-top:6px; font-style:normal; font-size:13px; font-weight:600; color:#7b8497; line-height:1.4;} .st_core em u{text-decoration:none; font-weight:800; color:#e8484f;} .st_core em u.c_b{color:#f0a500;} .st_core em u.c_r{color:#e8484f;} .st_core em u.c_i{color:#8a5cf0;} .st_core em u.c_d{color:#2f6fe0;} .st_core em u.c_g{color:#13a3a3;} .st_core em u.c_e{color:#2ea56b;} .st_task{padding:16px; border:1px solid #dcebf5; border-radius:16px; background:#fff;} .st_task li{position:relative; padding-left:11px; font-family:'Pretendard', sans-serif; font-size:15px; font-weight:600; color:#4b5468; letter-spacing:-.4px; line-height:1.55;} .st_task li + li{margin-top:4px;} .st_task li:before{content:""; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background:var(--uc);} /* ---------- Bridge STEAM Model ---------- */ .vision .md_flow{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; margin-bottom:60px;} .md_flow > li{position:relative; padding:24px 26px; border:1px solid #dcebf5; border-radius:20px; background:#fff;} .md_flow > li:not(:last-child):after{content:""; position:absolute; right:-14px; top:50%; z-index:2; width:10px; height:10px; margin-top:-5px; border-top:2px solid #9aa3b5; border-right:2px solid #9aa3b5; transform:rotate(45deg);} .md_flow .step{font-size:13px; font-weight:700; color:#246ba5; letter-spacing:1px;} .md_flow strong{display:block; margin-top:8px; font-size:20px; font-weight:800; color:#204c75; letter-spacing:-.5px;} .md_flow p{margin-top:6px; font-size:15px; color:#6b7488; letter-spacing:-.4px; line-height:1.5;} .md_flow .f_s1{border-color:#c4dcee; background:#e5f3fb;} .md_flow .f_s2{border-color:#204c75; background:#204c75;} .md_flow .f_out{border-color:#246ba5; background:linear-gradient(120deg, #246ba5, #348bc1);} .md_flow .f_s2 .step, .md_flow .f_out .step{color:#a9dcf5;} .md_flow .f_s2 strong, .md_flow .f_out strong{color:#fff;} .md_flow .f_s2 p, .md_flow .f_out p{color:rgba(255,255,255,.75);} .md_flow .f_s2 .bridge_txt, .md_flow .f_out .bridge_txt, .md_out .bridge_txt{padding:0 8px; border-radius:6px; background:#fff;} /* 단계 패널 */ .md_stage{position:relative; overflow:hidden; display:flex; align-items:center; gap:60px; padding:56px; border-radius:32px; background:#f5fafe;} .md_stage:before{content:"01"; position:absolute; right:40px; top:0; font-size:200px; font-weight:900; color:rgba(36,107,165,.04); line-height:1; letter-spacing:-8px; pointer-events:none;} .md_stage.stage2{flex-direction:row-reverse; background:linear-gradient(135deg, #204c75 0%, #246ba5 100%);} .md_stage.stage2:before{content:"02"; right:auto; left:40px; color:rgba(255,255,255,.04);} /* 순환 다이어그램 */ .md_cycle{position:relative; flex:0 0 440px; width:440px; height:440px;} .md_cycle:before{content:""; position:absolute; left:15%; top:15%; width:70%; height:70%; border-radius:50%; background:radial-gradient(circle, rgba(52,139,193,.12) 0%, rgba(52,139,193,0) 70%);} .cy_ring{position:absolute; left:0; top:0; overflow:hidden; width:100%; height:100%; border-radius:50%;} .cy_ring svg{display:block; width:100%; height:100%; animation:cyRotate 40s linear infinite;} .cy_ring .r_base{fill:none; stroke:#c4dcee; stroke-width:.5;} .cy_ring .r_flow{fill:none; stroke:#246ba5; stroke-width:.8; stroke-linecap:round; stroke-dasharray:2 4;} @keyframes cyRotate{from{transform:rotate(0deg);} to{transform:rotate(360deg);}} /* 교수학습준거 컬러 (외곽 링 ↔ md_process 연동) */ .vision .p1{--pc:#348bc1; --pt:#fff;} .vision .p2{--pc:#329b9a; --pt:#fff;} .vision .p3{--pc:#204c75; --pt:#fff;} .vision .stage2 .p1{--pc:#a9dcf5; --pt:#204c75;} .vision .stage2 .p2{--pc:#9be0d3; --pt:#204c75;} .vision .stage2 .p3{--pc:#fff; --pt:#204c75;} /* 외곽 링(교수학습준거 3단계) + 중앙 링(Bridge · Builder) */ .cy_map{position:absolute; left:0; top:0; z-index:1; display:block; width:100%; height:100%; overflow:visible;} .cy_map text{user-select:none;} .cy_arc{cursor:pointer; outline:0; transition:opacity .3s ease;} .cy_arc .a_band{fill:none; stroke:var(--pc); stroke-width:28; transition:stroke-width .3s ease;} .cy_arc .a_tip{fill:var(--pc);} .cy_arc .a_txt{fill:var(--pt); font-size:14px; font-weight:700; letter-spacing:-.2px;} .cy_arc .a_num{display:none; fill:var(--pt); font-family:'Outfit', 'Pretendard', sans-serif; font-size:18px; font-weight:700; dominant-baseline:central;} .cy_arc:focus-visible .a_band{stroke-width:32;} .md_stage.is-pfocus .cy_arc{opacity:.3;} .md_stage.is-pfocus .cy_arc.on{opacity:1;} .cy_core{filter:drop-shadow(0 12px 22px rgba(36,107,165,.28));} .cy_core .c_rim{fill:none; stroke:rgba(36,107,165,.08); stroke-width:8;} .cy_core .c_half{fill:none; stroke-width:34;} .cy_core .c_bridge{stroke:#246ba5;} .cy_core .c_builder{stroke:#204c75;} .cy_core .c_txt{fill:#fff; font-size:17px; font-weight:800; letter-spacing:.5px;} .cy_core .c_mid circle{fill:#fff;} .cy_core .c_mid text{fill:#204c75; font-size:12px; font-weight:800; letter-spacing:-.3px;} .cy_core .c_mid tspan{fill:var(--kc);} .cy_node{position:absolute; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:20%; height:20%; margin:-10% 0 0 -10%; padding:0 4px; border:0; border-radius:50%; background:#fff; box-shadow:0 10px 24px rgba(32,76,117,.12), inset 0 0 0 2px var(--kc); cursor:pointer; transition:transform .3s ease, background .3s ease, opacity .3s ease;} .cy_node b{font-size:26px; font-weight:900; color:var(--kc); line-height:1; transition:color .3s ease;} .cy_node span{font-size:12px; font-weight:600; color:#4b5468; letter-spacing:-.3px; line-height:1.2; text-align:center; word-break:keep-all; transition:color .3s ease;} .cy_node.k_s{left:50%; top:19.09%;} .cy_node.k_t{left:79.4%; top:40.45%;} .cy_node.k_e{left:68.17%; top:75.01%;} .cy_node.k_a{left:31.83%; top:75.01%;} .cy_node.k_m{left:20.6%; top:40.45%;} .cy_node:focus-visible{outline:2px solid var(--kc); outline-offset:4px;} .cy_node.on{transform:scale(1.1); background:var(--kc);} .cy_node.on b, .cy_node.on span{color:#fff;} .md_stage.is-focus .cy_node{opacity:.55;} .md_stage.is-focus .cy_node.on{opacity:1;} /* 단계 정보 */ .md_info{position:relative; z-index:1; flex:1 1 auto; min-width:0;} .md_step{display:inline-block; padding:6px 14px; border-radius:100px; background:#246ba5; font-size:13px; font-weight:700; color:#fff; letter-spacing:1px;} .md_tit{display:block; margin-top:14px; font-size:30px; font-weight:800; color:#204c75; letter-spacing:-1px; line-height:1.3;} .md_tit small{margin-left:8px; font-size:18px; font-weight:600; color:#246ba5; letter-spacing:0;} .md_desc{margin:10px 0; font-size:17px; color:#4b5468; letter-spacing:-.4px; line-height:1.6;} .md_desc b{font-weight:700; color:#204c75;} .md_steam{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:28px;} .md_steam li{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #dcebf5; border-radius:16px; background:#fff; transition:opacity .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;} .md_steam li:last-child:nth-child(odd){grid-column:1 / -1;} .md_steam li > b{flex:0 0 40px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:12px; background:var(--kc); font-size:20px; font-weight:900; color:#fff;} .md_steam li div{min-width:0;} .md_steam li strong{display:block; font-size:16px; font-weight:700; color:#204c75; letter-spacing:-.4px; line-height:1.4;} .md_steam li em{display:block; margin-top:2px; font-style:normal; font-size:13px; color:#7b8497; line-height:1.4;} .md_steam li em u{text-decoration:none; font-weight:800; color:var(--kc);} .md_stage.is-focus .md_steam li{opacity:.45;} .md_stage.is-focus .md_steam li.on{opacity:1; border-color:var(--kc); transform:translateX(4px); box-shadow:0 10px 24px rgba(32,76,117,.1);} .md_sub{margin-top:24px;} .md_sub_tit{display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:15px; font-weight:700; color:#204c75;} .md_process{display:flex; gap:10px; margin-top:10px;} .md_process li{position:relative; flex:1 1 0; min-width:0; padding:14px 16px; border:1px solid #dcebf5; border-radius:14px; background:#fff; transition:opacity .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;} .md_process li:before{content:""; position:absolute; left:16px; top:-1px; width:22px; height:3px; border-radius:0 0 3px 3px; background:var(--pc);} .md_process li:not(:last-child):after{content:""; position:absolute; right:-9px; top:50%; z-index:1; width:7px; height:7px; margin-top:-4px; border-top:2px solid #9aa3b5; border-right:2px solid #9aa3b5; transform:rotate(45deg);} .md_process li span{display:block; font-size:12px; font-weight:600; color:#246ba5; line-height:1.4;} .md_process li b{display:block; margin-top:4px; font-size:15px; font-weight:700; color:#204c75; letter-spacing:-.4px; line-height:1.4; transition:color .3s ease;} .md_stage.is-pfocus .md_process li{opacity:.45;} .md_stage .md_process li.on{opacity:1; border-color:var(--pc); background:var(--pc); box-shadow:0 10px 24px rgba(32,76,117,.16);} .md_stage .md_process li.on:before{opacity:0;} .md_stage .md_process li.on span, .md_stage .md_process li.on b{color:var(--pt);} .md_gov{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;} .md_gov li{padding:8px 14px; border-radius:100px; background:#e5f3fb; font-size:14px; font-weight:500; color:#246ba5; letter-spacing:-.3px;} /* 2단계 (다크) */ .stage2 .cy_ring .r_base{stroke:rgba(255,255,255,.15);} .stage2 .cy_ring .r_flow{stroke:#a9dcf5;} .stage2 .md_cycle:before{background:radial-gradient(circle, rgba(169,220,245,.18) 0%, rgba(169,220,245,0) 70%);} .stage2 .cy_core{filter:drop-shadow(0 12px 22px rgba(0,0,0,.3));} .stage2 .cy_core .c_rim{stroke:rgba(255,255,255,.1);} .stage2 .cy_core .c_bridge{stroke:#348bc1;} .stage2 .cy_core .c_builder{stroke:#329b9a;} .stage2 .md_step{background:#fff; color:#204c75;} .stage2 .md_tit{color:#fff;} .stage2 .md_tit small{color:#a9dcf5;} .stage2 .md_desc{color:rgba(255,255,255,.7);} .stage2 .md_desc b{color:#fff;} .stage2 .md_steam li{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06);} .stage2 .md_steam li strong{color:#fff;} .stage2 .md_steam li em{color:rgba(255,255,255,.6);} .stage2 .md_sub_tit{color:#fff;} .stage2 .md_process li{border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06);} .stage2 .md_process li:not(:last-child):after{border-color:rgba(255,255,255,.4);} .stage2 .md_process li span{color:#a9dcf5;} .stage2 .md_process li b{color:#fff;} .stage2 .md_gov li{background:rgba(255,255,255,.1); color:#fff;} /* 단계 연결 */ .md_link{display:flex; align-items:center; gap:20px; margin:28px 0;} .md_link .line{flex:1 1 auto; height:0; border-top:1px dashed #c4dcee;} .md_link p{display:flex; align-items:center; gap:6px; padding:10px 22px; border:1px solid #dcebf5; border-radius:100px; background:#fff; box-shadow:0 8px 20px rgba(32,76,117,.06); font-size:16px; font-weight:700; color:#204c75;} .md_link p > i{font-size:18px; color:#246ba5;} /* 사회진출 */ .md_out{position:relative; overflow:hidden; display:flex; align-items:center; gap:40px; margin-top:28px; padding:44px 48px; border-radius:32px; background:linear-gradient(120deg, #246ba5, #348bc1);} .md_out:before{content:""; position:absolute; right:-100px; top:-140px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);} .md_out .out_tit{position:relative; flex:0 0 300px; font-size:28px; font-weight:600; color:#fff; letter-spacing:-1px; line-height:1.5;} .md_out .out_tit b{font-weight:800;} .md_out ul{position:relative; flex:1 1 auto; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;} .md_out li{display:flex; flex-direction:column; align-items:center; padding:26px 16px; border:1px solid rgba(255,255,255,.2); border-radius:20px; background:rgba(255,255,255,.12); text-align:center;} .md_out li .ico{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#fff; font-size:26px; color:#246ba5;} .md_out li em{margin-top:14px; font-style:normal; font-size:12px; font-weight:700; color:rgba(255,255,255,.65); letter-spacing:1px;} .md_out li b{margin-top:2px; font-size:22px; font-weight:800; color:#fff; letter-spacing:-.5px;} @media (max-width: 1400px){ .vis_stit span{font-size:34px;} .vs_label{flex-basis:170px;} .vs_arrow{padding-left:194px;} .vs_vision strong{font-size:30px;} .vs_value li{padding:26px 28px;} .vs_goal .g_txt strong{font-size:26px;} .vs_talent strong{font-size:27px;} .st_grid{grid-template-columns:120px repeat(5, minmax(0, 1fr)); column-gap:10px;} .st_head b{font-size:17px;} .st_goal p, .st_core p{font-size:16px;} .st_task li{font-size:14px;} .md_stage{gap:44px; padding:48px;} .md_cycle{flex-basis:400px; width:400px; height:400px;} .cy_node b{font-size:24px;} .cy_node span{font-size:11px;} .md_tit{font-size:27px;} } @media (max-width: 1240px){ .st_grid{grid-template-columns:100px repeat(5, minmax(0, 1fr)); column-gap:8px;} .st_lbl b{font-size:16px;} .st_bar span{font-size:15px;} .st_head{padding:18px 6px 16px;} .st_head .emb{flex-basis:54px; width:54px; height:54px; margin-bottom:10px;} .st_head b{font-size:16px;} .st_head em{font-size:11px;} .st_goal, .st_core{padding:18px 10px;} .st_goal p, .st_core p{font-size:15px;} .st_core em{font-size:12px;} .st_task{padding:14px 12px;} .st_task li{font-size:13px;} .vision .md_flow{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:44px;} .md_flow > li:not(:last-child):after{display:none;} .md_stage, .md_stage.stage2{flex-direction:column; gap:40px;} .md_cycle{flex:0 0 auto; width:440px; height:440px;} .cy_node b{font-size:26px;} .cy_node span{font-size:12px;} .md_info{width:100%;} .md_out{flex-direction:column; align-items:stretch; gap:28px;} .md_out .out_tit{flex:0 0 auto; text-align:center;} } @media (max-width: 1024px){ .vis_sec + .vis_sec{margin-top:110px;} .vis_stit{margin-bottom:44px;} .vis_stit span{font-size:30px;} .vs_row{flex-direction:column; gap:12px;} .vs_label{flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:10px; padding:14px 22px; border-radius:16px;} .vs_label:after{display:none;} .vs_label b{font-size:20px;} .vs_arrow{padding:16px 0 12px;} .vs_arrow span{width:110px; height:38px;} .st_grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px;} .st_lbl, .st_bar{display:none;} .st_univ{display:block; overflow:hidden; border:1px solid #dcebf5; border-radius:24px; background:#fff; box-shadow:0 14px 34px rgba(32,76,117,.06);} .st_head{flex-direction:row; justify-content:flex-start; gap:14px; padding:18px 24px; border:0; border-radius:0; background:var(--uc); text-align:left;} .st_head .emb{flex-basis:52px; width:52px; height:52px; margin-bottom:0; padding:6px; border-radius:50%; background:#fff;} .st_head b{font-size:20px; color:#fff;} .st_head em{font-size:12px; color:rgba(255,255,255,.7);} .st_goal, .st_core, .st_task{display:block; padding:18px 24px; border:0; border-top:1px solid #dcebf5; border-radius:0; background:#fff; text-align:left;} .st_goal{border-top:0; background:#f5fafe;} .st_goal:before, .st_core:before, .st_task:before{content:attr(data-lbl); display:block; margin-bottom:6px; font-size:13px; font-weight:700; color:var(--uc); letter-spacing:-.3px;} .st_goal p, .st_core p{font-size:16px;} .st_goal p br, .st_core p br{display:none;} .st_core em{font-size:13px;} .st_task li{font-size:14px;} } @media (max-width: 767px){ .vision{padding-bottom:80px;} .vis_sec + .vis_sec{margin-top:80px;} .vis_stit{gap:8px; margin-bottom:30px;} .vis_stit em{gap:8px; font-size:12px; letter-spacing:1px;} .vis_stit em:before, .vis_stit em:after{width:16px;} .vis_stit span{font-size:24px;} .vs_row + .vs_row{margin-top:16px;} .vs_label{padding:12px 18px; border-radius:14px;} .vs_label em{font-size:11px;} .vs_label b{font-size:18px;} .vs_vision{gap:12px; min-height:0; padding:30px 20px; border-radius:20px;} .vs_pill{padding:5px 12px; font-size:12px;} .vs_vision strong{font-size:22px;} .vision .m_br{display:inline;} .vs_value{flex-direction:column; gap:12px;} .vs_value li{gap:16px; padding:20px; border-radius:20px;} .vs_value .ico{flex-basis:52px; width:52px; height:52px; border-radius:16px; font-size:24px;} .vs_value .txt em{font-size:22px;} .vs_value .txt b{font-size:16px;} .vs_value .en{font-size:12px;} .vs_goal{flex-direction:column; gap:20px; padding:26px 20px; border-radius:20px; text-align:center;} .vs_goal .g_txt p{font-size:16px;} .vs_goal .g_txt strong{font-size:21px;} .vs_goal .g_num{flex:0 0 auto; width:100%; height:auto; padding:20px; border-radius:16px;} .vs_goal .g_num .lbl{font-size:14px;} .vs_goal .g_num b{font-size:38px;} .vs_goal .g_num b em{font-size:18px;} .vs_talent{flex-direction:column; gap:12px; min-height:0; padding:24px 20px; border-radius:20px; text-align:center;} .vs_talent .ico{flex-basis:48px; width:48px; height:48px; font-size:24px;} .vs_talent strong{font-size:21px;} .st_grid{grid-template-columns:minmax(0, 1fr); gap:14px;} .st_univ{border-radius:20px;} .st_head{gap:12px; padding:16px 20px;} .st_head .emb{flex-basis:46px; width:46px; height:46px; padding:5px;} .st_head b{font-size:18px;} .st_goal, .st_core, .st_task{padding:16px 20px;} .st_goal p, .st_core p{font-size:15px;} .st_core em{font-size:12px;} .vision .md_flow{grid-template-columns:minmax(0, 1fr); gap:10px; margin-bottom:36px;} .md_flow > li{padding:18px 20px; border-radius:16px;} .md_flow .step{font-size:12px;} .md_flow strong{margin-top:4px; font-size:18px;} .md_flow p{font-size:14px;} .md_stage, .md_stage.stage2{gap:30px; padding:32px 20px; border-radius:24px;} .md_stage:before{font-size:120px; letter-spacing:-4px;} .md_stage.stage2:before{left:20px;} .md_cycle{width:300px; height:300px;} .cy_arc .a_txt{display:none;} .cy_arc .a_num{display:block;} .cy_core .c_mid text{font-size:13px; letter-spacing:-.5px;} .cy_node{gap:0; padding:0;} .cy_node b{font-size:24px;} .cy_node span{display:none;} .md_step{padding:5px 12px; font-size:12px;} .md_tit{margin-top:12px; font-size:23px;} .md_tit small{display:block; margin:4px 0 0; font-size:15px;} .md_desc{font-size:15px;} .md_steam{grid-template-columns:minmax(0, 1fr); gap:8px; margin-top:20px;} .md_steam li{gap:12px; padding:12px 14px; border-radius:14px;} .md_steam li > b{flex-basis:34px; width:34px; height:34px; border-radius:10px; font-size:17px;} .md_steam li strong{font-size:15px;} .md_steam li em{font-size:12px;} .md_sub{margin-top:20px;} .md_sub_tit{font-size:14px;} .md_process{flex-direction:column; gap:8px;} .md_process li{padding:12px 14px; border-radius:12px;} .md_process li:before{left:14px;} .md_process li:not(:last-child):after{display:none;} .md_process li b{font-size:14px;} .md_gov{gap:6px;} .md_gov li{padding:7px 12px; font-size:13px;} .md_link{gap:10px; margin:20px 0;} .md_link p{padding:8px 16px; font-size:14px;} .md_out{gap:24px; margin-top:20px; padding:30px 20px; border-radius:24px;} .md_out .out_tit{font-size:21px;} .md_out ul{gap:8px;} .md_out li{padding:18px 6px; border-radius:16px;} .md_out li .ico{width:42px; height:42px; font-size:20px;} .md_out li em{margin-top:10px; font-size:10px; letter-spacing:0;} .md_out li b{font-size:16px;} } @media (max-width: 480px){ .vs_vision strong{font-size:20px;} .vs_goal .g_txt strong{font-size:19px;} .vs_goal .g_num b{font-size:34px;} .vs_talent strong{font-size:19px;} .md_cycle{width:260px; height:260px;} .cy_node b{font-size:21px;} .md_out li em{display:none;} .md_out li b{margin-top:10px; font-size:15px;} } @media (max-width: 360px){ .md_cycle{width:240px; height:240px;} .cy_node b{font-size:19px;} } /* -------------------------------- sub1_3 : 참여대학 -------------------------------- */ .univ{padding-bottom:160px; color:#204c75; word-break:keep-all;} .univ *, .univ *:before, .univ *:after{box-sizing:border-box;} .univ ul{list-style:none; margin:0; padding:0;} .univ .m_br{display:none;} /* 인트로 */ .univ_intro{margin-bottom:60px; text-align:center;} .univ_intro .u_eng{display:inline-flex; align-items:center; gap:12px; font-style:normal; font-size:15px; font-weight:700; color:#246ba5; letter-spacing:2px; text-transform:uppercase;} .univ_intro .u_eng:before, .univ_intro .u_eng:after{content:""; display:block; width:28px; height:1px; background:#246ba5; opacity:.35;} .univ_intro .u_tit{display:block; margin-top:12px; font-size:38px; font-weight:700; color:#204c75; letter-spacing:-1.2px; line-height:1.35;} .univ_intro .u_tit b{font-weight:800; color:#246ba5;} .univ_intro .u_txt{margin-top:14px; font-size:18px; color:#6b7488; letter-spacing:-.5px; line-height:1.6;} .univ_wrap{position:relative;} /* ---------- 지도 ---------- */ .univ_map{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:56px 40px 40px; border-radius:32px; background:linear-gradient(160deg, #f5fafe 0%, #e5f3fb 100%);} .univ_map:before{content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(52,139,193,.12) 0%, rgba(52,139,193,0) 70%);} .map_box{position:relative; width:380px; height:553px; margin-left:70px;} .map_svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 20px 30px rgba(32,76,117,.12));} .map_svg .map_land path{fill:url(#univMapFill); stroke:#fff; stroke-width:2; stroke-linejoin:round;} .map_svg .map_dot path{fill:url(#univMapDot);} /* 핀 */ .univ .pin{position:absolute; z-index:2; width:0; height:0;} .univ .pin.p_skku{left:27.95%; top:25.21%;} .univ .pin.p_gachon{left:31.53%; top:28.26%; z-index:3;} .univ .pin.p_cnu{left:36.91%; top:51.74%;} .univ .pin.p_konyang{left:33.08%; top:55.88%; z-index:3;} .univ .pin.p_handong{left:89.49%; top:57.61%;} .univ .pin.on{z-index:5;} .univ .pin .dot{position:absolute; left:-8px; top:-8px; width:16px; height:16px; border:3px solid #fff; border-radius:50%; background:#246ba5; box-shadow:0 4px 10px rgba(36,107,165,.35); transition:transform .3s ease, background .3s ease;} .univ .pin .dot:before, .univ .pin .dot:after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:rgba(36,107,165,.45); animation:univPulse 2.4s ease-out infinite; pointer-events:none;} .univ .pin .dot:after{animation-delay:1.2s;} .univ .pin.p_gachon .dot:before{animation-delay:.3s;} .univ .pin.p_gachon .dot:after{animation-delay:1.5s;} .univ .pin.p_cnu .dot:before{animation-delay:.6s;} .univ .pin.p_cnu .dot:after{animation-delay:1.8s;} .univ .pin.p_konyang .dot:before{animation-delay:.9s;} .univ .pin.p_konyang .dot:after{animation-delay:2.1s;} .univ .pin.p_handong .dot:before{animation-delay:.45s;} .univ .pin.p_handong .dot:after{animation-delay:1.65s;} @keyframes univPulse{ 0%{transform:scale(1); opacity:.8;} 100%{transform:scale(4.2); opacity:0;} } .univ .pin .tag{position:absolute; top:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:96px; transform:translateY(-50%);} .univ .pin .emb{display:flex; align-items:center; justify-content:center; width:76px; height:76px; padding:8px; border-radius:50%; background:#fff; box-shadow:0 10px 24px rgba(32,76,117,.16), 0 0 0 1px #dcebf5; transition:transform .3s ease, box-shadow .3s ease;} .univ .pin .emb img{display:block; width:100%; height:100%; object-fit:contain;} .univ .pin .name{padding:3px 10px; border-radius:100px; background:#204c75; box-shadow:0 6px 14px rgba(32,76,117,.18); font-size:13px; font-weight:700; color:#fff; letter-spacing:-.3px; line-height:1.4; white-space:nowrap; transition:background .3s ease;} .univ .pin.d_l .tag{right:12px;} .univ .pin.d_r .tag{left:12px;} .univ .pin.d_b .tag{top:12px; right:-24px; transform:none;} .univ .pin:hover .dot, .univ .pin:focus-visible .dot, .univ .pin.on .dot{transform:scale(1.25); background:#204c75;} .univ .pin:hover .emb, .univ .pin:focus-visible .emb, .univ .pin.on .emb{transform:scale(1.08); box-shadow:0 14px 30px rgba(36,107,165,.25), 0 0 0 2px #246ba5;} .univ .pin:hover .name, .univ .pin:focus-visible .name, .univ .pin.on .name{background:#246ba5;} .univ .pin:focus-visible{outline:none;} .univ .pin:focus-visible .emb{outline:2px solid #246ba5; outline-offset:3px;} /* ---------- 컨소시엄 배너 ---------- */ .univ_banner{position:relative; overflow:hidden; display:flex; align-items:center; gap:28px; margin-top:30px; padding:40px 56px; border-radius:100px; background:#204c75;} .univ_banner:before{content:""; position:absolute; right:-80px; top:-160px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(169,220,245,.22) 0%, rgba(169,220,245,0) 70%);} .univ_banner .b_ico{position:relative; flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.12); font-size:30px; color:#fff;} .univ_banner p{position:relative; font-size:20px; font-weight:500; color:rgba(255,255,255,.8); letter-spacing:-.6px; line-height:1.65;} .univ_banner p b{font-weight:700; color:#fff;} @media (max-width: 1400px){ .univ_intro .u_tit{font-size:34px;} .univ_map{padding:48px 30px 36px;} .univ_banner p{font-size:18px;} } @media (max-width: 1240px){ .univ_banner{padding:36px 44px; border-radius:40px;} } @media (max-width: 1024px){ .univ_intro{margin-bottom:44px;} .univ_intro .u_tit{font-size:30px;} .univ_intro .u_txt{font-size:17px;} .univ_banner br{display:none;} } @media (max-width: 767px){ .univ{padding-bottom:80px;} .univ .m_br{display:inline;} .univ_intro{margin-bottom:30px;} .univ_intro .u_eng{gap:8px; font-size:12px; letter-spacing:1px;} .univ_intro .u_eng:before, .univ_intro .u_eng:after{width:16px;} .univ_intro .u_tit{margin-top:8px; font-size:24px;} .univ_intro .u_txt{margin-top:10px; font-size:15px;} .univ_map{padding:36px 16px 24px; border-radius:24px;} .map_box{width:280px; height:408px; margin-left:50px;} .univ .pin .dot{left:-7px; top:-7px; width:14px; height:14px; border-width:2px;} .univ .pin .dot:before, .univ .pin .dot:after{width:14px; height:14px; margin:-7px 0 0 -7px;} .univ .pin .tag{gap:4px; width:72px;} .univ .pin .emb{width:54px; height:54px; padding:6px;} .univ .pin .name{padding:2px 8px; font-size:11px;} .univ .pin.d_l .tag{right:10px;} .univ .pin.d_r .tag{left:10px;} .univ .pin.d_b .tag{top:10px; right:-18px;} .univ_banner{flex-direction:column; gap:16px; margin-top:24px; padding:30px 20px; border-radius:24px; text-align:center;} .univ_banner .b_ico{flex:0 0 auto; width:52px; height:52px; font-size:24px;} .univ_banner p{font-size:15px;} } @media (max-width: 480px){ .map_box{width:250px; height:364px; margin-left:46px;} .univ .pin .tag{width:64px;} .univ .pin .emb{width:48px; height:48px; padding:5px;} .univ .pin .name{font-size:10px;} .univ .pin.d_l .tag{right:8px;} .univ .pin.d_r .tag{left:8px;} .univ .pin.d_b .tag{top:8px; right:-16px;} } @media (max-width: 360px){ .univ_map{padding:30px 10px 20px;} .map_box{width:214px; height:312px; margin-left:40px;} .univ .pin .tag{gap:3px; width:56px;} .univ .pin .emb{width:42px; height:42px; padding:4px;} .univ .pin .name{padding:2px 6px; font-size:10px; letter-spacing:-.5px;} .univ .pin.d_l .tag{right:8px;} .univ .pin.d_r .tag{left:8px;} .univ .pin.d_b .tag{top:8px; right:-14px;} } /* sub1_3 : 대학별 상세정보 */ .univ_detail{margin-top:120px;} .univ_detail .ud_stit{display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:50px; text-align:center;} .univ_detail .ud_stit em{display:inline-flex; align-items:center; gap:12px; font-style:normal; font-size:15px; font-weight:700; color:#246ba5; letter-spacing:2px; text-transform:uppercase;} .univ_detail .ud_stit em:before, .univ_detail .ud_stit em:after{content:""; display:block; width:28px; height:1px; background:#246ba5; opacity:.35;} .univ_detail .ud_stit span{font-size:36px; font-weight:800; color:#204c75; letter-spacing:-1.2px; line-height:1.3;} .ud_card{overflow:hidden; border:1px solid #dcebf5; border-radius:28px; background:#fff; box-shadow:0 14px 34px rgba(32,76,117,.05);} .ud_card + .ud_card{margin-top:24px;} .ud_head{display:flex; align-items:center; gap:22px; padding:28px 36px; border-bottom:1px solid #dcebf5; background:linear-gradient(90deg, #f5fafe 0%, #fff 70%);} .ud_emb{flex:0 0 80px; display:flex; align-items:center; justify-content:center; width:80px; height:80px; padding:8px; border-radius:50%; background:#fff; box-shadow:0 8px 20px rgba(32,76,117,.12), 0 0 0 1px #dcebf5;} .ud_emb img{display:block; width:100%; height:100%; object-fit:contain;} .ud_ttl{flex:1 1 auto; min-width:0;} .ud_num{display:block; font-size:13px; font-weight:800; color:#246ba5; letter-spacing:1px;} .ud_name{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin-top:4px; font-size:24px; font-weight:800; color:#204c75; letter-spacing:-.8px; line-height:1.35;} .ud_name em{padding:5px 14px; border-radius:100px; background:#246ba5; font-style:normal; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.3px; line-height:1.4;} .ud_link{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 18px 0 22px; border:1px solid #204c75; border-radius:100px; font-size:15px; font-weight:700; color:#204c75; transition:background .3s ease, color .3s ease;} .ud_link i{font-size:18px;} .ud_link:hover, .ud_link:focus-visible{background:#204c75; color:#fff;} .ud_body{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr);} .ud_sec{padding:32px 36px;} .ud_sec.ud_region{border-left:1px solid #dcebf5; background:#f5fafe;} .ud_sec_tit{display:flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:#7b8497; letter-spacing:-.3px;} .ud_sec_tit i{font-size:18px; color:#246ba5;} .ud_vision{margin-top:16px; padding:18px 22px; border-radius:16px; background:#204c75;} .ud_vision em{display:block; font-style:normal; font-size:13px; font-weight:600; color:rgba(255,255,255,.6);} .ud_vision b{display:block; margin-top:4px; font-size:20px; font-weight:800; color:#fff; letter-spacing:-.6px; line-height:1.4;} .univ .ud_ability{margin-top:18px;} .ud_ability li{display:flex; align-items:flex-start; gap:14px;} .ud_ability li + li{margin-top:12px;} .ud_ability .yr{flex:0 0 52px; padding:3px 0; border-radius:8px; background:#e5f3fb; font-size:13px; font-weight:800; color:#246ba5; text-align:center; line-height:1.5;} .ud_ability p{font-size:16px; font-weight:500; color:#204c75; letter-spacing:-.4px; line-height:1.6;} .ud_ability small{display:block; font-size:13px; font-weight:400; color:#9aa3b5;} .ud_row{margin:16px 0 0;} .ud_row + .ud_row{margin-top:22px; padding-top:22px; border-top:1px dashed #dcebf5;} .ud_row dt{font-size:14px; font-weight:700; color:#246ba5;} .ud_row dd{margin:8px 0 0;} .ud_loc{display:flex; align-items:center; gap:4px; font-size:18px; font-weight:800; color:#204c75; letter-spacing:-.5px;} .ud_loc i{font-size:18px; color:#246ba5;} .univ .ud_kw{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;} .ud_kw li{padding:4px 12px; border:1px solid #c4dcee; border-radius:100px; background:#fff; font-size:13px; font-weight:600; color:#4b5468;} .ud_kw li:before{content:"#"; margin-right:1px; color:#9aa3b5;} .ud_row dd p{display:flex; gap:10px; font-size:16px; color:#4b5468; letter-spacing:-.4px; line-height:1.6;} .ud_row dd p + p{margin-top:6px;} .ud_row dd p span{flex:0 0 auto; font-weight:700; color:#204c75;} @media (max-width: 1400px){ .univ_detail .ud_stit span{font-size:32px;} .ud_head{padding:26px 30px;} .ud_sec{padding:28px 30px;} .ud_name{font-size:22px;} } @media (max-width: 1240px){ .ud_ability p, .ud_row dd p{font-size:15px;} } @media (max-width: 1024px){ .univ_detail{margin-top:100px;} .univ_detail .ud_stit{margin-bottom:40px;} .univ_detail .ud_stit span{font-size:28px;} .ud_body{grid-template-columns:minmax(0, 1fr);} .ud_sec.ud_region{border-top:1px solid #dcebf5; border-left:0;} } @media (max-width: 767px){ .univ_detail{margin-top:70px;} .univ_detail .ud_stit{gap:8px; margin-bottom:28px;} .univ_detail .ud_stit em{gap:8px; font-size:12px; letter-spacing:1px;} .univ_detail .ud_stit em:before, .univ_detail .ud_stit em:after{width:16px;} .univ_detail .ud_stit span{font-size:22px;} .ud_card{border-radius:20px;} .ud_card + .ud_card{margin-top:16px;} .ud_head{flex-wrap:wrap; align-items:flex-start; gap:14px; padding:22px 20px;} .ud_emb{flex-basis:60px; width:60px; height:60px; padding:6px;} .ud_ttl{flex:1 1 calc(100% - 74px);} .ud_num{font-size:12px;} .ud_name{gap:6px 8px; font-size:19px;} .ud_name em{padding:4px 10px; font-size:12px;} .ud_link{justify-content:center; width:100%; height:42px; font-size:14px;} .ud_sec{padding:22px 20px;} .ud_sec_tit{font-size:14px;} .ud_vision{margin-top:12px; padding:14px 16px; border-radius:12px;} .ud_vision em{font-size:12px;} .ud_vision b{font-size:17px;} .univ .ud_ability{margin-top:14px;} .ud_ability li{gap:10px;} .ud_ability .yr{flex-basis:44px; font-size:12px;} .ud_ability p, .ud_row dd p{font-size:14px;} .ud_ability small{font-size:12px;} .ud_row dt{font-size:13px;} .ud_row + .ud_row{margin-top:18px; padding-top:18px;} .ud_loc{font-size:16px;} .ud_kw li{padding:3px 10px; font-size:12px;} .ud_row dd p{flex-direction:column; gap:0;} } @media (max-width: 360px){ .ud_name{font-size:18px;} } /* -------------------------------- sub1_4 : 조직도·참여인력 -------------------------------- */ .orgc{padding-bottom:160px; color:#204c75; word-break:keep-all;} .orgc *, .orgc *:before, .orgc *:after, .orgc_pop *, .orgc_pop *:before, .orgc_pop *:after{box-sizing:border-box;} .orgc ul, .orgc_pop ul{list-style:none; margin:0; padding:0;} .orgc .m_br{display:none;} /* 최고관리자 메뉴 */ .orgc_admin{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:30px; padding:16px 20px; border:1px dashed #c4dcee; border-radius:18px; background:#f5fafe;} .orgc_admin .a_tit{display:inline-flex; align-items:center; gap:6px; margin-right:auto; font-size:15px; font-weight:700; color:#246ba5;} .orgc_admin .a_tit i{font-size:18px;} .orgc_admin a{display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 18px; border:1px solid #204c75; border-radius:100px; font-size:14px; font-weight:700; color:#204c75; transition:background .3s ease, color .3s ease;} .orgc_admin a i{font-size:17px;} .orgc_admin a.pt, .orgc_admin a:hover, .orgc_admin a:focus-visible{background:#204c75; color:#fff;} .orgc_admin a.pt:hover, .orgc_admin a.pt:focus-visible{background:#246ba5; border-color:#246ba5;} .orgc_admin p{width:100%; font-size:14px; color:#4b5468; line-height:1.6;} /* ---------- 조직도 ---------- */ .orgc_chart{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; padding:70px 60px 50px; border-radius:40px; background:linear-gradient(180deg, #f5fafe 0%, #e5f3fb 55%, #f5fafe 100%);} .orgc_chart:before{content:""; position:absolute; inset:0; background-image:radial-gradient(#c4dcee 1.2px, transparent 1.2px); background-size:22px 22px; -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%); mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%); pointer-events:none;} .orgc_chart:after{content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(52,139,193,.16) 0%, rgba(52,139,193,0) 70%); pointer-events:none;} .orgc_chart > *{position:relative; z-index:1;} /* 성균관대학교 */ .orgc_top{display:inline-flex; align-items:center; gap:14px; padding:10px 30px 10px 10px; border-radius:100px; background:#fff; box-shadow:0 14px 30px rgba(32,76,117,.1), 0 0 0 1px #dcebf5;} .orgc_top .emb{display:flex; align-items:center; justify-content:center; width:56px; height:56px; padding:6px; border-radius:50%; background:#f5fafe;} .orgc_top .emb img{display:block; width:100%; height:100%; object-fit:contain;} .orgc_top strong{font-size:22px; font-weight:800; color:#204c75; letter-spacing:-.6px;} /* 연결선 */ .orgc_line{display:block; width:2px; height:56px; background:#246ba5; opacity:.35;} /* 사업단 */ .orgc_hq{position:relative; overflow:hidden; border:0; font-family:inherit; cursor:pointer; display:flex; align-items:center; gap:22px; width:680px; max-width:100%; padding:30px 34px; border-radius:28px; background:#204c75; box-shadow:0 24px 50px rgba(36,107,165,.28); color:#fff; text-align:left; transition:transform .4s ease, box-shadow .4s ease;} .orgc_hq:after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%); transform:skewX(-20deg); transition:left .8s ease;} .orgc_hq > span{position:relative; z-index:1;} .orgc_hq .hq_ico{flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); font-size:30px;} .orgc_hq .hq_txt{flex:1 1 auto; min-width:0;} .orgc_hq .hq_txt em{display:block; font-style:normal; font-size:13px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:2px; text-transform:uppercase;} .orgc_hq .hq_txt strong{display:block; margin-top:4px; font-size:26px; font-weight:800; letter-spacing:-.8px; line-height:1.35;} .orgc_hq .hq_more{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 16px 0 20px; border-radius:100px; background:#fff; font-size:14px; font-weight:700; color:#246ba5;} .orgc_hq .hq_more b{font-weight:800;} .orgc_hq .hq_more i{font-size:18px; transition:transform .3s ease;} .orgc_hq:hover, .orgc_hq:focus-visible{transform:translateY(-4px); box-shadow:0 30px 60px rgba(36,107,165,.36);} .orgc_hq:hover:after, .orgc_hq:focus-visible:after{left:130%;} .orgc_hq:hover .hq_more i, .orgc_hq:focus-visible .hq_more i{transform:translate(2px, -2px);} .orgc_hq:focus-visible{outline:3px solid #348bc1; outline-offset:4px;} /* 참여학과 */ .orgc_dept{width:100%; margin-top:18px; padding:56px 40px 40px; border-radius:32px; background:rgba(255,255,255,.65); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);} .orgc_dept .dept_lbl{position:absolute; left:50%; top:0; display:inline-flex; align-items:center; gap:6px; padding:10px 22px; border-radius:100px; background:#204c75; box-shadow:0 10px 24px rgba(32,76,117,.2); font-size:15px; font-weight:700; color:#fff; white-space:nowrap; transform:translate(-50%, -50%);} .orgc_dept .dept_lbl i{font-size:17px; color:#a9dcf5;} .orgc_dept .dept_lbl b{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; margin-left:2px; padding:0 6px; border-radius:100px; background:#fff; font-size:13px; font-weight:800; color:#204c75;} .dept_list{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px;} .dept_list li{display:flex;} .dept_btn{position:relative; overflow:hidden; font-family:inherit; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; width:100%; min-height:200px; padding:26px 24px 22px; border:1px solid #dcebf5; border-radius:22px; background:#fff; box-shadow:0 8px 20px rgba(32,76,117,.04); text-align:left; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;} .dept_btn:before{content:""; position:absolute; inset:0; background:#204c75; opacity:0; transition:opacity .35s ease;} .dept_btn > *{position:relative; z-index:1;} .dept_btn .d_num{position:absolute; top:22px; right:24px; font-size:13px; font-weight:800; color:#c4dcee; letter-spacing:1px; transition:color .35s ease;} .dept_btn .d_ico{display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:#e5f3fb; font-size:26px; color:#246ba5; transition:background .35s ease, color .35s ease;} .dept_btn .d_name{display:block; margin-top:18px; font-size:19px; font-weight:800; color:#204c75; letter-spacing:-.6px; line-height:1.4; overflow-wrap:anywhere; transition:color .35s ease;} .dept_btn .d_eng{display:block; margin-top:4px; margin-bottom:14px; font-style:normal; font-size:13px; font-weight:500; color:#9aa3b5; letter-spacing:-.2px; line-height:1.45; transition:color .35s ease;} .dept_btn .d_cnt{display:flex; align-items:center; gap:4px; width:100%; margin-top:auto; padding-top:16px; border-top:1px solid #dcebf5; font-size:14px; font-weight:600; color:#4b5468; transition:color .35s ease, border-color .35s ease;} .dept_btn .d_cnt b{font-weight:800; color:#246ba5; transition:color .35s ease;} .dept_btn .d_cnt.is_empty{color:#9aa3b5;} .dept_btn .d_cnt i{display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-left:auto; border-radius:50%; background:#f5fafe; font-size:16px; color:#204c75; transition:background .35s ease, color .35s ease, transform .35s ease;} .dept_btn:hover, .dept_btn:focus-visible{border-color:transparent; box-shadow:0 22px 40px rgba(36,107,165,.22); transform:translateY(-6px);} .dept_btn:hover:before, .dept_btn:focus-visible:before{opacity:1;} .dept_btn:hover .d_num, .dept_btn:focus-visible .d_num{color:rgba(255,255,255,.35);} .dept_btn:hover .d_ico, .dept_btn:focus-visible .d_ico{background:rgba(255,255,255,.14); color:#fff;} .dept_btn:hover .d_name, .dept_btn:focus-visible .d_name{color:#fff;} .dept_btn:hover .d_eng, .dept_btn:focus-visible .d_eng{color:rgba(255,255,255,.6);} .dept_btn:hover .d_cnt, .dept_btn:focus-visible .d_cnt{border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.85);} .dept_btn:hover .d_cnt b, .dept_btn:focus-visible .d_cnt b{color:#fff;} .dept_btn:hover .d_cnt i, .dept_btn:focus-visible .d_cnt i{background:#fff; color:#246ba5; transform:translateX(3px);} .dept_btn:focus-visible{outline:3px solid #348bc1; outline-offset:3px;} /* ---------- 참여인력 레이어팝업 ---------- */ html.orgc-open, html.orgc-open body{overflow:hidden;} .orgc_pop{position:fixed; left:0; top:0; z-index:10000; display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:40px 30px; color:#204c75; word-break:keep-all;} .orgc_pop[hidden], .orgc_pop .op_panel[hidden]{display:none;} .orgc_pop .op_dim{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(16,40,64,.55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s ease;} .orgc_pop .op_box{position:relative; display:flex; flex-direction:column; width:100%; max-width:1080px; max-height:100%; border-radius:32px; background:#fff; box-shadow:0 40px 80px rgba(16,40,64,.3); overflow:hidden; opacity:0; transform:translateY(40px) scale(.97); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1); outline:none;} .orgc_pop.on .op_dim{opacity:1;} .orgc_pop.on .op_box{opacity:1; transform:none;} .orgc_pop .op_panel{display:flex; flex-direction:column; flex:1 1 auto; min-height:0;} .op_head{position:relative; overflow:hidden; flex:0 0 auto; display:flex; align-items:center; gap:20px; padding:36px 110px 32px 44px; background:#204c75; color:#fff;} .op_head > *{position:relative;} .op_head .op_ico{flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); font-size:30px;} .op_head .op_ttl{flex:1 1 auto; min-width:0;} .op_head .op_ttl em{display:block; font-style:normal; font-size:13px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:2px; text-transform:uppercase;} .op_head .op_tit{display:block; margin-top:4px; font-size:28px; font-weight:800; letter-spacing:-.8px; line-height:1.35;} .op_head .op_cnt{flex:0 0 auto; padding:8px 16px; border-radius:100px; background:rgba(255,255,255,.14); font-size:15px; font-weight:600; color:rgba(255,255,255,.85);} .op_head .op_cnt b{font-weight:800; color:#fff;} .orgc_pop .op_close{position:absolute; border:0; font-family:inherit; cursor:pointer; top:30px; right:32px; z-index:3; display:flex; align-items:center; justify-content:center; width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,.14); font-size:26px; color:#fff; transition:background .3s ease, color .3s ease, transform .3s ease;} .orgc_pop .op_close:hover, .orgc_pop .op_close:focus-visible{background:#fff; color:#246ba5; transform:rotate(90deg);} .op_body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:36px 44px 44px; background:#f5fafe;} .stf_list{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;} .stf_card{padding:24px; border:1px solid #dcebf5; border-radius:22px; background:#fff; box-shadow:0 8px 20px rgba(32,76,117,.04); transition:transform .3s ease, box-shadow .3s ease;} .stf_card:hover{box-shadow:0 16px 30px rgba(32,76,117,.1); transform:translateY(-3px);} .orgc_pop.on .stf_card{animation:orgcCard .5s cubic-bezier(.2,.8,.2,1) both;} .orgc_pop.on .stf_card:nth-child(2){animation-delay:.04s;} .orgc_pop.on .stf_card:nth-child(3){animation-delay:.08s;} .orgc_pop.on .stf_card:nth-child(4){animation-delay:.12s;} .orgc_pop.on .stf_card:nth-child(5){animation-delay:.16s;} .orgc_pop.on .stf_card:nth-child(6){animation-delay:.2s;} .orgc_pop.on .stf_card:nth-child(7){animation-delay:.24s;} .orgc_pop.on .stf_card:nth-child(8){animation-delay:.28s;} .orgc_pop.on .stf_card:nth-child(n+9){animation-delay:.32s;} @keyframes orgcCard{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} } .stf_card .s_top{position:relative; display:flex; align-items:center; gap:14px;} .stf_card .s_avt{flex:0 0 58px; display:flex; align-items:center; justify-content:center; overflow:hidden; width:58px; height:58px; border-radius:50%; background:#e5f3fb;} .stf_card .s_avt img{display:block; width:100%; height:100%; object-fit:cover;} .stf_card .s_who{flex:1 1 auto; min-width:0; padding-right:30px;} .stf_card .s_pos{display:inline-block; padding:3px 10px; border-radius:100px; background:#e5f3fb; font-size:13px; font-weight:700; color:#246ba5; line-height:1.5;} .stf_card .s_name{display:block; margin-top:4px; font-size:20px; font-weight:800; color:#204c75; letter-spacing:-.6px; line-height:1.35;} .stf_card .s_edit{position:absolute; top:-4px; right:-4px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#f5fafe; font-size:16px; color:#4b5468; transition:background .3s ease, color .3s ease;} .stf_card .s_edit:hover, .stf_card .s_edit:focus-visible{background:#204c75; color:#fff;} .stf_card .s_info{margin:18px 0 0; padding-top:16px; border-top:1px dashed #dcebf5;} .stf_card .s_info > div{display:flex; align-items:flex-start; gap:10px;} .stf_card .s_info > div + div{margin-top:8px;} .stf_card .s_info dt{flex:0 0 28px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:#f5fafe; font-size:15px; color:#246ba5;} .stf_card .s_info dd{flex:1 1 auto; min-width:0; margin:0; font-size:15px; font-weight:500; color:#4b5468; letter-spacing:-.3px; line-height:28px; overflow-wrap:anywhere;} .stf_card .s_info dd a{color:inherit; transition:color .3s ease;} .stf_card .s_info dd a:hover, .stf_card .s_info dd a:focus-visible{color:#246ba5; text-decoration:underline;} .stf_empty{padding:70px 20px; border:1.5px dashed #c4dcee; border-radius:22px; background:#fff; text-align:center;} .stf_empty i{font-size:48px; color:#c4dcee;} .stf_empty p{margin-top:10px; font-size:17px; font-weight:500; color:#7b8497;} .stf_add{display:flex; align-items:center; justify-content:center; gap:6px; height:54px; margin-top:20px; border:1.5px dashed #c4dcee; border-radius:16px; background:#fff; font-size:15px; font-weight:700; color:#246ba5; transition:background .3s ease, border-color .3s ease;} .stf_add i{font-size:18px;} .stf_add:hover, .stf_add:focus-visible{border-color:#246ba5; background:#e5f3fb;} @media (max-width: 1400px){ .orgc_chart{padding:60px 40px 44px;} .orgc_hq{width:640px;} .orgc_hq .hq_txt strong{font-size:24px;} .orgc_dept{padding:54px 32px 32px;} .dept_btn{min-height:190px; padding:24px 22px 20px;} .dept_btn .d_name{font-size:18px;} .op_head .op_tit{font-size:26px;} } @media (max-width: 1240px){ .dept_list{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px;} .orgc_pop .op_box{max-width:960px;} .stf_list{gap:14px;} .stf_card{padding:22px;} .stf_card .s_name{font-size:19px;} .stf_card .s_info dd{font-size:14px;} } @media (max-width: 1024px){ .orgc{padding-bottom:120px;} .orgc_chart{padding:56px 30px 40px; border-radius:32px;} .orgc_top strong{font-size:20px;} .orgc_line{height:48px;} .orgc_hq{gap:18px; width:600px; padding:26px 28px;} .orgc_hq .hq_ico{flex-basis:56px; width:56px; height:56px; font-size:26px;} .orgc_hq .hq_txt strong{font-size:22px;} .orgc_dept{padding:50px 26px 28px; border-radius:28px;} .dept_btn{min-height:180px; padding:22px 20px 18px; border-radius:20px;} .dept_btn .d_ico{width:48px; height:48px; border-radius:14px; font-size:24px;} .dept_btn .d_name{margin-top:16px; font-size:17px;} .dept_btn .d_eng{font-size:12px;} .dept_btn .d_cnt{font-size:13px;} .orgc_pop{padding:30px 24px;} .orgc_pop .op_box{border-radius:28px;} .op_head{gap:16px; padding:30px 96px 28px 34px;} .op_head .op_ico{flex-basis:56px; width:56px; height:56px; font-size:26px;} .op_head .op_tit{font-size:24px;} .op_head .op_cnt{font-size:14px;} .orgc_pop .op_close{top:26px; right:26px; width:46px; height:46px; font-size:24px;} .op_body{padding:30px 34px 36px;} .stf_list{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width: 767px){ .orgc{padding-bottom:80px;} .orgc .m_br{display:inline;} .orgc_admin{gap:8px; margin-bottom:20px; padding:14px 16px; border-radius:14px;} .orgc_admin .a_tit{width:100%; margin-right:0; font-size:14px;} .orgc_admin a{flex:1 1 0; justify-content:center; height:40px; padding:0 12px; font-size:13px;} .orgc_admin p{font-size:13px;} .orgc_chart{padding:40px 16px 26px; border-radius:24px;} .orgc_chart:after{right:-100px; top:-100px; width:260px; height:260px;} .orgc_top{gap:10px; padding:7px 22px 7px 7px;} .orgc_top .emb{width:44px; height:44px; padding:5px;} .orgc_top strong{font-size:18px;} .orgc_line{height:36px;} .orgc_hq{flex-wrap:wrap; gap:14px; width:100%; padding:22px 20px; border-radius:22px;} .orgc_hq .hq_ico{flex-basis:48px; width:48px; height:48px; font-size:22px;} .orgc_hq .hq_txt{flex:1 1 calc(100% - 62px);} .orgc_hq .hq_txt em{font-size:11px; letter-spacing:1px;} .orgc_hq .hq_txt strong{margin-top:2px; font-size:18px;} .orgc_hq .hq_more{justify-content:center; width:100%; height:42px; font-size:13px;} .orgc_dept{margin-top:14px; padding:40px 14px 16px; border-radius:22px;} .orgc_dept .dept_lbl{gap:4px; padding:8px 16px; font-size:13px;} .orgc_dept .dept_lbl i{font-size:15px;} .orgc_dept .dept_lbl b{min-width:22px; height:22px; font-size:12px;} .dept_list{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;} .dept_btn{min-height:0; padding:18px 16px 14px; border-radius:18px;} .dept_btn .d_num{top:16px; right:16px; font-size:12px;} .dept_btn .d_ico{width:42px; height:42px; border-radius:12px; font-size:21px;} .dept_btn .d_name{margin-top:12px; font-size:16px;} .dept_btn .d_eng{font-size:11px; margin-bottom:10px;} .dept_btn .d_cnt{padding-top:12px; margin-top:14px; font-size:12px;} .dept_btn .d_cnt i{width:26px; height:26px; font-size:14px;} .dept_btn:hover, .dept_btn:focus-visible{transform:translateY(-3px);} /* 팝업 → 바텀시트 */ .orgc_pop{align-items:flex-end; padding:0;} .orgc_pop .op_box{max-width:none; max-height:88%; border-radius:24px 24px 0 0; transform:translateY(100%);} .orgc_pop .op_box:before{content:""; position:absolute; left:50%; top:8px; z-index:3; width:40px; height:4px; margin-left:-20px; border-radius:4px; background:rgba(255,255,255,.4);} .op_head{flex-wrap:wrap; gap:6px 12px; padding:28px 70px 20px 20px;} .op_head .op_ico{flex-basis:46px; width:46px; height:46px; font-size:21px;} .op_head .op_ttl{flex:1 1 calc(100% - 58px);} .op_head .op_ttl em{font-size:11px; letter-spacing:1px;} .op_head .op_tit{margin-top:2px; font-size:20px;} .op_head .op_cnt{margin-left:58px; padding:5px 12px; font-size:12px;} .orgc_pop .op_close{top:22px; right:16px; width:40px; height:40px; font-size:22px;} .op_body{padding:20px 16px 30px;} .stf_list{grid-template-columns:minmax(0, 1fr); gap:10px;} .stf_card{padding:18px; border-radius:18px;} .stf_card:hover{transform:none;} .stf_card .s_top{gap:12px;} .stf_card .s_avt{flex-basis:50px; width:50px; height:50px;} .stf_card .s_pos{padding:2px 9px; font-size:12px;} .stf_card .s_name{font-size:18px;} .stf_card .s_edit{top:0; right:0; width:32px; height:32px; font-size:15px;} .stf_card .s_info{margin-top:14px; padding-top:12px;} .stf_card .s_info > div + div{margin-top:6px;} .stf_card .s_info dt{flex-basis:26px; width:26px; height:26px; font-size:14px;} .stf_card .s_info dd{font-size:14px; line-height:26px;} .stf_empty{padding:50px 16px; border-radius:18px;} .stf_empty i{font-size:40px;} .stf_empty p{font-size:15px;} .stf_add{height:48px; margin-top:14px; border-radius:14px; font-size:14px;} } @media (max-width: 640px){ .dept_list{grid-template-columns:minmax(0, 1fr); gap:8px;} .dept_btn{flex-direction:row; align-items:center; gap:12px; padding:14px 14px 14px 14px; border-radius:16px;} .dept_btn .d_num, .dept_btn .d_eng{display:none;} .dept_btn .d_ico{flex:0 0 40px; width:40px; height:40px; font-size:20px;} .dept_btn .d_name{flex:1 1 auto; min-width:0; margin-top:0; font-size:16px;} .dept_btn .d_cnt{flex:0 0 auto; width:auto; margin-top:0; padding-top:0; border-top:0; font-size:13px;} .dept_btn .d_cnt i{margin-left:6px;} } @media (max-width: 480px){ .orgc_top strong{font-size:17px;} .orgc_hq .hq_txt strong{font-size:17px;} .dept_btn .d_name{font-size:15px;} .dept_btn .d_cnt .t{display:none;} .op_head .op_tit{font-size:18px;} } @media (max-width: 360px){ .orgc_chart{padding:36px 12px 22px;} .orgc_dept{padding:38px 10px 12px;} .orgc_hq{padding:20px 16px;} .orgc_hq .hq_txt strong{font-size:16px;} .dept_btn{gap:10px; padding:12px;} .dept_btn .d_ico{flex-basis:36px; width:36px; height:36px; font-size:18px;} .stf_card{padding:16px;} .stf_card .s_name{font-size:17px;} } /* -------------------------------- sub1_5 : 찾아오시는 길 -------------------------------- */ .loca{padding-bottom:160px; color:#204c75; word-break:keep-all;} .loca *, .loca *:before, .loca *:after{box-sizing:border-box;} .loca ul{list-style:none; margin:0; padding:0;} .loca .m_br{display:none;} .loca p, .loca dd{word-break:keep-all;} /* ---------- 지도 + 연락처 ---------- */ .loca_top{display:grid; grid-template-columns:minmax(0, 1fr) 440px; gap:24px;} /* 구글 지도 */ .loca_map{position:relative; overflow:hidden; min-height:580px; border-radius:32px; background:#e5f3fb; box-shadow:0 20px 50px rgba(32,76,117,.1), 0 0 0 1px #dcebf5;} .loca_map iframe{position:absolute; left:0; top:0; display:block; width:100%; height:100%; border:0;} .loca_map .map_badge{position:absolute; right:24px; top:24px; z-index:2; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 20px 0 8px; border-radius:100px; background:#fff; box-shadow:0 12px 26px rgba(32,76,117,.18); font-size:15px; font-weight:800; color:#204c75; letter-spacing:-.4px; pointer-events:none;} .loca_map .map_badge i{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#246ba5; font-size:17px; color:#fff;} /* 연락처 카드 */ .loca_card{position:relative; display:flex; flex-direction:column; padding:44px 40px 40px; border:1px solid #dcebf5; border-radius:32px; background:#f5f6f8; color:#111;} .loca_card .c_head em{display:block; font-style:normal; font-size:13px; font-weight:700; color:#8a93a6; letter-spacing:2px; text-transform:uppercase;} .loca_card .c_head strong{display:block; margin-top:6px; font-size:25px; font-weight:700; color:#111; letter-spacing:-.8px; line-height:1.35;} .loca_card .c_info{margin:28px 0 0;} .loca_card .c_info > div{padding:18px 0; border-top:1px solid #dcebf5;} .loca_card .c_info > div:last-child{padding-bottom:0;} .loca_card .c_info dt{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:600; color:#6b7280;} .loca_card .c_info dt i{font-size:16px; color:#246ba5;} .loca_card .c_info dd{margin:6px 0 0; font-size:17px; font-weight:500; color:#111; letter-spacing:-.4px; line-height:1.6; overflow-wrap:anywhere;} .loca_card .c_info dd .zip{color:#8a93a6;} .loca_card .c_info dd a{color:inherit; transition:color .3s ease;} .loca_card .c_info dd a:hover, .loca_card .c_info dd a:focus-visible{color:#246ba5; text-decoration:underline;} /* 복사 버튼 (주소 / 내비게이션) */ .loca_card .c_copy, .way_box .w_copy{display:flex; align-items:center; gap:5px; width:max-content; height:30px; margin:10px 0 0; padding:0 12px; border:1px solid #dcebf5; border-radius:100px; background:#fff; font-family:inherit; font-size:13px; font-weight:600; color:#333; cursor:pointer; transition:background .3s ease, color .3s ease, border-color .3s ease;} .loca_card .c_copy i, .way_box .w_copy i{font-size:14px;} .loca_card .c_copy:hover, .loca_card .c_copy:focus-visible, .loca_card .c_copy.on, .way_box .w_copy:hover, .way_box .w_copy:focus-visible, .way_box .w_copy.on{border-color:#204c75; background:#204c75; color:#fff;} .loca_card .c_copy:focus-visible, .way_box .w_copy:focus-visible{outline:3px solid #348bc1; outline-offset:2px;} /* 네이버 / 카카오 지도 버튼 */ .loca_card .c_btns{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-top:30px;} .loca_card .c_map{display:flex; align-items:center; gap:10px; height:60px; padding:0 14px 0 16px; border:1px solid #dcebf5; border-radius:16px; background:#fff; box-shadow:0 6px 16px rgba(32,76,117,.05); font-size:15px; font-weight:700; color:#111; letter-spacing:-.4px; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;} .loca_card .c_map .logo{flex:0 0 28px; display:flex; align-items:center; justify-content:center; width:28px; height:28px;} .loca_card .c_map .logo img{display:block; max-width:100%; max-height:100%;} .loca_card .c_map .t{flex:1 1 auto; min-width:0; white-space:nowrap;} .loca_card .c_map i{flex:0 0 auto; font-size:18px; color:#9aa3b5; transition:color .3s ease, transform .3s ease;} .loca_card .c_map:hover, .loca_card .c_map:focus-visible{border-color:#cfd6e0; box-shadow:0 14px 26px rgba(32,76,117,.12); transform:translateY(-3px);} .loca_card .c_map.naver:hover i, .loca_card .c_map.naver:focus-visible i{color:#03c75a; transform:translate(2px, -2px);} .loca_card .c_map.kakao:hover i, .loca_card .c_map.kakao:focus-visible i{color:#1e88f5; transform:translate(2px, -2px);} .loca_card .c_map:focus-visible{outline:3px solid #348bc1; outline-offset:3px;} /* 인스타그램 */ .loca_card .c_sns{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:28px;} .loca_card .sns_btn{flex:0 0 52px; display:block; width:52px; height:52px; border-radius:50%; box-shadow:0 10px 22px rgba(221,42,123,.25); transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;} .loca_card .sns_btn img{display:block; width:100%; height:100%; border-radius:50%;} .loca_card .sns_btn:hover, .loca_card .sns_btn:focus-visible{box-shadow:0 14px 30px rgba(221,42,123,.4); transform:translateY(-3px) rotate(-8deg) scale(1.06);} .loca_card .sns_btn:focus-visible{outline:3px solid #8ab8ff; outline-offset:3px;} .loca_card .c_sns p{font-size:15px; color:#333; line-height:1.4;} .loca_card .c_sns p em{display:block; font-style:normal; font-size:12px; font-weight:700; color:#8a93a6; letter-spacing:1.5px; text-transform:uppercase;} .loca_card .c_sns p b{font-weight:700; color:#111;} /* ---------- 교통 안내 ---------- */ .loca_way{margin-top:100px;} .way_tit{margin-bottom:34px; text-align:center;} .way_tit em{display:block; font-style:normal; font-size:14px; font-weight:700; color:#2879ae; letter-spacing:2px; text-transform:uppercase;} .way_tit strong{display:block; margin-top:8px; font-size:32px; font-weight:800; color:#204c75; letter-spacing:-1px;} .way_grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px;} .way_box{position:relative; overflow:hidden; padding:44px 40px 40px; border:1px solid #dcebf5; border-radius:28px; background:linear-gradient(180deg, #f5fafe 0%, #fff 100%); transition:box-shadow .4s ease, border-color .4s ease;} .way_box:hover{border-color:#c4dcee; box-shadow:0 20px 44px rgba(32,76,117,.08);} .way_box .w_head{display:flex; align-items:center; gap:16px;} .way_box .w_ico{flex:0 0 60px; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:18px; background:linear-gradient(135deg, #348bc1 0%, #246ba5 100%); box-shadow:0 12px 24px rgba(36,107,165,.25); font-size:28px; color:#fff;} .way_box .w_head strong{display:block; font-size:24px; font-weight:800; color:#204c75; letter-spacing:-.8px;} /* 차량 */ .way_box .w_txt{margin-top:26px; font-size:17px; font-weight:500; color:#4b5468; letter-spacing:-.4px; line-height:1.7;} .way_box .w_txt b{font-weight:700; color:#246ba5;} .way_box .w_navi{display:flex; align-items:center; gap:16px; margin-top:22px; padding:22px 24px 22px 26px; border:1px solid #dcebf5; border-radius:20px; background:#fff; box-shadow:0 8px 20px rgba(32,76,117,.04);} .way_box .w_navi .n_txt{flex:1 1 auto; min-width:0;} .way_box .w_navi strong{display:block; font-size:20px; font-weight:800; color:#204c75; letter-spacing:-.6px;} .way_box .w_navi p{margin-top:4px; font-size:15px; color:#7b8497;} .way_box .w_copy{flex:0 0 auto; height:40px; margin:0; padding:0 16px; font-size:14px;} .way_box .w_copy i{font-size:15px;} /* 대중교통 */ .way_box .w_line{margin-top:22px;} .way_box .w_line li{display:flex; align-items:flex-start; gap:16px; padding:18px 0;} .way_box .w_line li + li{border-top:1px dashed #dcebf5;} .way_box .w_line li:last-child{padding-bottom:0;} .way_box .l_no{flex:0 0 40px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; font-size:18px; font-weight:800; color:#fff; box-shadow:0 6px 14px rgba(32,76,117,.15);} .way_box .l_no.ln4{background:#00a5de;} .way_box .l_no.ln3{background:#ef7c1c;} .way_box .l_no.ln1{background:#0052a4;} .way_box .l_txt{flex:1 1 auto; min-width:0;} .way_box .l_txt strong{display:block; font-size:18px; font-weight:800; color:#204c75; letter-spacing:-.5px; line-height:1.4;} .way_box .l_txt p{margin-top:4px; font-size:16px; color:#4b5468; letter-spacing:-.3px; line-height:1.6;} .way_box .l_txt p b{font-weight:700; color:#246ba5;} /* 도착 안내 */ .way_arrive{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:24px; padding:22px 30px; border-radius:100px; background:#204c75; color:#fff;} .way_arrive .a_ico{flex:0 0 40px; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.12); font-size:20px; color:#a9dcf5;} .way_arrive p{font-size:18px; font-weight:500; letter-spacing:-.5px; line-height:1.5;} .way_arrive p b{font-weight:800; color:#a9dcf5;} @media (max-width: 1400px){ .loca_top{grid-template-columns:minmax(0, 1fr) 410px;} .loca_map{min-height:560px;} .loca_card{padding:40px 34px 36px;} .loca_card .c_head strong{font-size:23px;} .way_box{padding:40px 34px 36px;} .way_tit strong{font-size:30px;} } @media (max-width: 1240px){ .loca_top{grid-template-columns:minmax(0, 1fr) 380px; gap:20px;} .loca_card{padding:36px 30px 32px;} .loca_card .c_head strong{font-size:22px;} .loca_card .c_info dd{font-size:16px;} .loca_card .c_map{gap:8px; padding:0 12px 0 14px; font-size:14px;} .way_grid{gap:20px;} .way_box .w_head strong{font-size:22px;} .way_box .w_txt{font-size:16px;} .way_box .l_txt strong{font-size:17px;} .way_box .l_txt p{font-size:15px;} } @media (max-width: 1024px){ .loca{padding-bottom:120px;} .loca_top{grid-template-columns:minmax(0, 1fr);} .loca_map{min-height:440px; border-radius:28px;} .loca_card{padding:36px 32px 32px; border-radius:28px;} .loca_card .c_info{display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); column-gap:30px;} .loca_card .c_info > div:first-child{grid-row:span 2;} .loca_card .c_info > div:first-child, .loca_card .c_info > div:last-child{padding-bottom:18px;} .loca_card .c_btns{margin-top:10px;} .loca_card .c_map{height:56px; font-size:15px;} .loca_card .c_sns{padding-top:24px;} .loca_way{margin-top:80px;} .way_tit{margin-bottom:28px;} .way_tit strong{font-size:28px;} .way_grid{grid-template-columns:minmax(0, 1fr); gap:18px;} .way_box{padding:34px 30px 30px; border-radius:24px;} .way_box .w_ico{flex-basis:54px; width:54px; height:54px; border-radius:16px; font-size:25px;} .way_arrive{margin-top:18px; padding:20px 26px;} .way_arrive p{font-size:17px;} } @media (max-width: 767px){ .loca{padding-bottom:80px;} .loca .m_br{display:inline;} .loca_top{gap:14px;} .loca_map{min-height:320px; border-radius:22px;} .loca_map .map_badge{display:none;} .loca_card{padding:28px 20px 24px; border-radius:22px;} .loca_card .c_head em{font-size:11px; letter-spacing:1px;} .loca_card .c_head strong{margin-top:4px; font-size:20px;} .loca_card .c_info{display:block; margin-top:20px;} .loca_card .c_info > div{padding:14px 0;} .loca_card .c_info > div:first-child{padding-bottom:14px;} .loca_card .c_info > div:last-child{padding-bottom:0;} .loca_card .c_info dt{font-size:13px;} .loca_card .c_info dt i{font-size:15px;} .loca_card .c_info dd{margin-top:4px; font-size:15px;} .loca_card .c_copy{height:28px; margin-top:8px; padding:0 10px; font-size:12px;} .loca_card .c_btns{margin-top:22px; gap:8px;} .loca_card .c_map{height:52px; border-radius:14px; font-size:14px;} .loca_card .c_sns{gap:12px; padding-top:20px;} .loca_card .sns_btn{flex-basis:46px; width:46px; height:46px;} .loca_card .c_sns p{font-size:14px;} .loca_way{margin-top:60px;} .way_tit{margin-bottom:20px;} .way_tit em{font-size:12px; letter-spacing:1px;} .way_tit strong{margin-top:4px; font-size:24px;} .way_grid{gap:14px;} .way_box{padding:26px 20px 22px; border-radius:22px;} .way_box:hover{box-shadow:none;} .way_box .w_head{gap:12px;} .way_box .w_ico{flex-basis:48px; width:48px; height:48px; border-radius:14px; font-size:22px;} .way_box .w_head strong{font-size:20px;} .way_box .w_txt{margin-top:18px; font-size:15px;} .way_box .w_navi{gap:12px; margin-top:16px; padding:16px 16px 16px 18px; border-radius:16px;} .way_box .w_navi strong{font-size:17px;} .way_box .w_copy{height:36px; padding:0 12px; font-size:13px;} .way_box .w_navi p{font-size:14px;} .way_box .w_line{margin-top:14px;} .way_box .w_line li{gap:12px; padding:14px 0;} .way_box .l_no{flex-basis:34px; width:34px; height:34px; font-size:16px;} .way_box .l_txt strong{font-size:16px;} .way_box .l_txt p{font-size:14px;} .way_arrive{justify-content:flex-start; gap:12px; margin-top:14px; padding:16px 18px; border-radius:18px;} .way_arrive .a_ico{flex-basis:36px; width:36px; height:36px; font-size:18px;} .way_arrive p{font-size:15px;} } @media (max-width: 480px){ .loca_map{min-height:280px;} .loca_card .c_head strong{font-size:18px;} .loca_card .c_btns{grid-template-columns:minmax(0, 1fr);} .way_tit strong{font-size:22px;} .way_box .w_head strong{font-size:19px;} } @media (max-width: 360px){ .loca_map{min-height:250px;} .loca_map .map_badge{font-size:12px;} .loca_card{padding:24px 16px 20px;} .loca_card .c_info dd{font-size:14px;} .way_box{padding:22px 16px 20px;} .way_box .w_txt{font-size:14px;} .way_box .l_txt p{font-size:13px;} .way_arrive{padding:14px 16px;} .way_arrive p{font-size:14px;} } /* ================================================================================================ 교육 및 연구 : 교과프로그램 / 비교과프로그램 (sub2_1_a · sub2_1_b · sub2_2_a) ================================================================================================ */ .edu{padding-bottom:160px; color:#204c75; word-break:keep-all;} .edu *, .edu *:before, .edu *:after, .edu_pop *, .edu_pop *:before, .edu_pop *:after{box-sizing:border-box;} .edu ul, .edu ol, .edu dl, .edu dd, .edu_pop ul, .edu_pop dl, .edu_pop dd{list-style:none; margin:0; padding:0;} .edu button, .edu_pop button{font-family:inherit; cursor:pointer;} .edu .m_br{display:none;} .edu [hidden]{display:none !important;} .edu p, .edu_pop p{word-break:keep-all;} /* ---------- 공통 : 대학 탭 ---------- */ .edu_utab{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; padding:10px; border-radius:26px; background:#f5fafe;} .edu_utab button{display:flex; align-items:center; justify-content:center; gap:10px; height:68px; padding:0 14px; border:0; border-radius:18px; background:transparent; font-size:18px; font-weight:700; color:#4b5468; letter-spacing:-.4px; transition:background .3s ease, color .3s ease, box-shadow .3s ease;} .edu_utab button .emb{flex:0 0 38px; display:flex; align-items:center; justify-content:center; width:38px; height:38px; padding:4px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px #dcebf5;} .edu_utab button .emb img{display:block; width:100%; height:100%; object-fit:contain;} .edu_utab button .n{display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; padding:0 8px; border-radius:100px; background:#dcebf5; font-size:13px; font-weight:800; color:#246ba5; transition:background .3s ease, color .3s ease;} .edu_utab button:hover, .edu_utab button:focus-visible{background:#fff; color:#204c75;} .edu_utab button.on{background:#204c75; color:#fff; box-shadow:0 14px 28px rgba(32,76,117,.22);} .edu_utab button.on .n{background:rgba(255,255,255,.16); color:#fff;} .edu_utab button:focus-visible{outline:3px solid #348bc1; outline-offset:2px;} /* ---------- 공통 : 레이어팝업 ---------- */ /* -------------------------------- sub2_1_a : 융합교육과정 -------------------------------- */ .cv_panel{margin-top:40px;} .cv_phead{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; padding-bottom:26px; border-bottom:2px solid #204c75;} .cv_phead .lft{display:flex; align-items:center; gap:16px;} .cv_phead .emb{flex:0 0 64px; display:flex; align-items:center; justify-content:center; width:64px; height:64px; padding:8px; border-radius:50%; background:#f5fafe;} .cv_phead .emb img{display:block; width:100%; height:100%; object-fit:contain;} .cv_phead em{display:block; font-style:normal; font-size:13px; font-weight:700; color:#9aa3b5; letter-spacing:1px; text-transform:uppercase;} .cv_phead h3{margin:2px 0 0; font-size:28px; font-weight:800; color:#204c75; letter-spacing:-.8px;} .cv_phead h3 span{margin-left:6px; font-size:18px; font-weight:600; color:#7b8497;} .cv_phead h3 span b{font-weight:800; color:#246ba5;} .cv_list{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px;} .cv_item{--tc:#348bc1; --tb:#e5f3fb; position:relative; display:flex; flex-direction:column; padding:28px 28px 24px; border:1px solid #dcebf5; border-radius:24px; background:#fff;} .cv_item.cv_track{--tc:#267d7c; --tb:#e3f4f3;} .cv_item.cv_major{--tc:#204c75; --tb:#e5f3fb;} .cv_item .c_top{display:flex; align-items:center; gap:6px;} .cv_item .c_badge{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:100px; background:var(--tb); font-size:13px; font-weight:800; color:var(--tc);} .cv_item .c_credit{display:inline-flex; align-items:center; gap:3px; height:28px; padding:0 10px; border-radius:100px; background:#f5fafe; font-size:13px; font-weight:700; color:#4b5468;} .cv_item .c_no{margin-left:auto; font-size:14px; font-weight:800; color:#c4dcee; letter-spacing:1px;} .cv_item .c_tit{display:block; margin-top:16px; font-size:20px; font-weight:800; color:#204c75; letter-spacing:-.6px; line-height:1.45;} .cv_item .c_meta{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; padding-top:14px; border-top:1px dashed #dcebf5;} .cv_item .c_meta > div{display:flex; align-items:center; gap:6px; font-size:15px;} .cv_item .c_meta dt{font-weight:600; color:#9aa3b5;} .cv_item .c_meta dd{font-weight:700; color:#204c75;} .cv_item .c_desc{position:relative; overflow:hidden; max-height:80px; margin-top:14px; transition:max-height .45s ease;} .cv_item .c_desc:after{content:""; position:absolute; left:0; right:0; bottom:0; height:40px; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 100%); transition:opacity .3s ease;} .cv_item .c_desc p{font-family:'Pretendard', sans-serif; font-size:15px; font-weight:500; color:#4b5468; line-height:1.75; letter-spacing:-.3px;} .cv_item.is_open .c_desc{max-height:600px;} .cv_item.is_open .c_desc:after{opacity:0;} .cv_item .c_more{display:inline-flex; align-items:center; gap:2px; align-self:flex-start; margin-top:12px; padding:0; border:0; background:none; font-size:14px; font-weight:700; color:var(--tc);} .cv_item .c_more i{font-size:18px; transition:transform .3s ease;} .cv_item.is_open .c_more i{transform:rotate(180deg);} /* 융합트랙 대표 카드 */ .cv_item.is_feat{grid-column:1 / -1; overflow:hidden; padding:44px 48px; border:0; background:linear-gradient(120deg, #267d7c 0%, #246ba5 55%, #204c75 100%); color:#fff;} .cv_item.is_feat:before{content:""; position:absolute; right:-80px; top:-120px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(126,231,221,.28) 0%, rgba(126,231,221,0) 70%);} .cv_item.is_feat > *{position:relative;} .cv_item.is_feat .c_badge{background:rgba(255,255,255,.16); color:#fff;} .cv_item.is_feat .c_credit{background:#fff; color:#267d7c;} .cv_item.is_feat .c_no{color:rgba(255,255,255,.3);} .cv_item.is_feat .c_tit{font-size:30px; color:#fff; letter-spacing:-1px;} .cv_item.is_feat .c_meta{border-top-color:rgba(255,255,255,.2);} .cv_item.is_feat .c_meta dt{color:rgba(255,255,255,.6);} .cv_item.is_feat .c_meta dd{color:#fff;} .cv_item.is_feat .c_desc{max-height:none;} .cv_item.is_feat .c_desc:after, .cv_item.is_feat .c_more{display:none;} .cv_item.is_feat .c_desc p{max-width:1100px; font-size:17px; color:rgba(255,255,255,.85);} /* 공동참여대학 (과정명만) */ .cv_list:not(.is_detail){grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;} .cv_list:not(.is_detail) .cv_item{padding:22px 22px 24px;} .cv_list:not(.is_detail) .cv_item .c_tit{margin-top:14px; font-size:18px;} .cv_link{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:24px; padding:20px 26px; border-radius:20px; background:#f5fafe;} .cv_link p{display:flex; align-items:flex-start; gap:6px; font-size:15px; color:#4b5468; line-height:1.6;} .cv_link p i{font-size:18px; color:#246ba5;} .cv_link a{flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; height:44px; padding:0 20px; border-radius:100px; background:#204c75; font-size:14px; font-weight:700; color:#fff; transition:background .3s ease;} .cv_link a:hover, .cv_link a:focus-visible{background:#246ba5;} /* -------------------------------- sub2_1_b : 정규교과목 -------------------------------- */ .rc_filter{padding:26px 28px; border-radius:28px; background:#f5fafe;} .rc_filter .f_row{display:flex; align-items:center; justify-content:space-between; gap:14px;} .rc_filter .f_row + .f_row{margin-top:16px; padding-top:16px; border-top:1px solid #dcebf5;} .rc_year{display:flex; gap:6px;} .rc_year button{height:46px; padding:0 22px; border:0; border-radius:100px; background:#fff; font-size:16px; font-weight:800; color:#4b5468; transition:all .3s ease;} .rc_year button.on{background:#204c75; color:#fff;} .rc_sch{position:relative; width:380px; margin-left:auto;} .rc_sch i{position:absolute; left:20px; top:50%; margin-top:-10px; font-size:20px; color:#7b8497; pointer-events:none;} .rc_sch input{width:100%; height:50px; padding:0 20px 0 50px; border:1px solid #dcebf5; border-radius:100px; background:#fff; font-size:15px; color:#204c75; outline:none; transition:border-color .3s ease, box-shadow .3s ease;} .rc_sch input:focus{border-color:#246ba5; box-shadow:0 0 0 4px rgba(36,107,165,.1);} .rc_univ{display:flex; flex-wrap:wrap; gap:8px;} .rc_univ button{display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 16px 0 10px; border:1px solid #dcebf5; border-radius:100px; background:#fff; font-size:15px; font-weight:700; color:#4b5468; transition:all .3s ease;} .rc_univ button:first-child{padding-left:18px;} .rc_univ button .emb{display:flex; width:26px; height:26px; padding:2px; border-radius:50%; background:#f5fafe;} .rc_univ button .emb img{display:block; width:100%; height:100%; object-fit:contain;} .rc_univ button .n{font-size:13px; font-weight:800; color:#246ba5;} .rc_univ button:hover, .rc_univ button:focus-visible{border-color:#246ba5; color:#246ba5;} .rc_univ button.on{border-color:#246ba5; background:#246ba5; color:#fff;} .rc_univ button.on .n{color:#a9dcf5;} .rc_dept select{height:44px; min-width:220px; padding:0 40px 0 18px; border:1px solid #dcebf5; border-radius:100px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2316264f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 18px center; font-size:15px; font-weight:600; color:#204c75; -webkit-appearance:none; appearance:none; outline:none;} .rc_dept select:focus{border-color:#246ba5;} .rc_bar{display:flex; align-items:center; justify-content:space-between; gap:16px; margin:40px 0 14px;} .rc_total{font-size:17px; font-weight:600; color:#4b5468;} .rc_total b{font-size:20px; font-weight:800; color:#246ba5;} .rc_head, .rc_item{display:grid; grid-template-columns:70px minmax(0, 1fr) 130px 210px 110px; align-items:center; gap:16px;} .rc_head{height:56px; padding:0 22px; border-radius:16px; background:#204c75; font-size:15px; font-weight:700; color:#fff;} .rc_head span, .rc_item > span{text-align:center;} .rc_head .h_name, .rc_item .r_name{text-align:left;} .rc_list li{border-bottom:1px solid #dcebf5;} .rc_item{width:100%; min-height:70px; padding:14px 22px; background:#fff; font-size:16px; color:#4b5468; text-align:left;} .rc_item .r_no{font-size:14px; font-weight:700; color:#9aa3b5;} .rc_item .r_name{font-size:17px; font-weight:600; color:#333; letter-spacing:-.4px; line-height:1.45;} .rc_item .r_code{font-family:'Outfit', 'Pretendard', sans-serif; font-size:15px; font-weight:600; color:#246ba5; letter-spacing:.5px;} .rc_item .r_dept{font-size:15px; font-weight:600;} .rc_item em{font-style:normal; color:#c4dcee;} .u_badge{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:100px; background:#e5f3fb; font-size:13px; font-weight:800; color:#246ba5;} .u_badge.u_1{background:#e3f4f3; color:#267d7c;} .u_badge.u_2{background:#246ba5; color:#fff;} .u_badge.u_3{background:#dcebf5; color:#204c75;} .u_badge.u_4{background:#204c75; color:#fff;} .rc_empty{padding:80px 20px; text-align:center;} .rc_empty i{font-size:48px; color:#c4dcee;} .rc_empty p{margin-top:8px; font-size:17px; color:#7b8497;} .rc_more_wrap{margin-top:34px; text-align:center;} .rc_more{display:inline-flex; align-items:center; gap:6px; height:54px; padding:0 34px; border:1px solid #204c75; border-radius:100px; background:#fff; font-size:16px; font-weight:700; color:#204c75; transition:background .3s ease, color .3s ease;} .rc_more span{font-weight:600; color:#7b8497; transition:color .3s ease;} .rc_more:hover, .rc_more:focus-visible{background:#204c75; color:#fff;} .rc_more:hover span, .rc_more:focus-visible span{color:rgba(255,255,255,.7);} /* -------------------------------- sub2_2_a : 비교과 프로그램 구조 안내 -------------------------------- */ .st_sec{position:relative; margin-top:140px;} .st_lead{margin:-30px 0 40px; font-size:18px; color:#4b5468; line-height:1.6; text-align:center;} .st_lead b{font-weight:800; color:#246ba5;} /* 히어로 */ .st_hero{position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) 520px; align-items:center; gap:50px; padding:80px 80px; border-radius:40px; background:linear-gradient(125deg, #204c75 0%, #246ba5 55%, #348bc1 100%); color:#fff;} .st_hero:before{content:""; position:absolute; left:-120px; bottom:-220px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(169,220,245,.22) 0%, rgba(169,220,245,0) 70%);} .st_hero:after{content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px); background-size:24px 24px; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 30%, #000 100%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 30%, #000 100%); pointer-events:none;} .st_hero > *{position:relative; z-index:1;} .st_hero .h_eng{display:inline-block; padding:8px 16px; border-radius:100px; background:rgba(255,255,255,.12); font-style:normal; font-size:13px; font-weight:700; color:#a9dcf5; letter-spacing:1.5px; text-transform:uppercase;} .st_hero .h_tit{margin:22px 0 0; font-weight:800; letter-spacing:-1.5px; line-height:1.25;} .st_hero .h_tit > span{display:block;} .st_hero .h_tit .l1{font-size:34px; color:rgba(255,255,255,.7);} .st_hero .h_tit .l2{margin-top:6px; font-size:56px;} .st_hero .h_tit .l2 b{background:linear-gradient(90deg, #9fe0dc 0%, #a9dcf5 100%); -webkit-background-clip:text; background-clip:text; color:transparent;} .st_hero .bridge_txt{letter-spacing:0;} .st_hero .bridge_txt i:nth-child(1){color:#ffc94d;} .st_hero .bridge_txt i:nth-child(2){color:#ff8a8f;} .st_hero .bridge_txt i:nth-child(3){color:#b79bff;} .st_hero .bridge_txt i:nth-child(4){color:#8ab8ff;} .st_hero .bridge_txt i:nth-child(5){color:#6be0e0;} .st_hero .bridge_txt i:nth-child(6){color:#7fe0a8;} .st_hero .h_desc{margin-top:24px; font-size:19px; color:rgba(255,255,255,.78); line-height:1.7;} .st_hero .h_desc b{font-weight:700; color:#fff;} .st_hero .h_stage{display:flex; align-items:center; gap:14px;} .st_hero .s_card{flex:1 1 0; min-width:0; padding:30px 26px; border-radius:26px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);} .st_hero .s_card.s2{background:#fff; color:#204c75; box-shadow:0 30px 60px rgba(0,0,0,.25);} .st_hero .s_no{display:block; font-size:12px; font-weight:800; color:#a9dcf5; letter-spacing:2px;} .st_hero .s2 .s_no{color:#267d7c;} .st_hero .s_card strong{display:block; margin-top:10px; font-family:'Outfit', 'Pretendard', sans-serif; font-size:30px; font-weight:700; letter-spacing:-.5px; line-height:1.15;} .st_hero .s_card p{margin-top:10px; font-size:16px; font-weight:600; opacity:.8;} .st_hero .s_yr{display:inline-block; white-space:nowrap; margin-top:18px; padding:6px 12px; border-radius:100px; background:rgba(255,255,255,.14); font-size:13px; font-weight:700;} .st_hero .s2 .s_yr{background:#e3f4f3; color:#267d7c;} .st_hero .s_arr{flex:0 0 48px; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.14); font-size:22px; animation:stArr 1.6s ease-in-out infinite;} @keyframes stArr{ 0%, 100%{transform:translateX(0);} 50%{transform:translateX(5px);} } /* 인재상의 변화 흐름 */ .fl_road{position:relative; display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:18px;} .fl_road:before{content:""; position:absolute; left:8%; right:8%; top:38px; height:4px; border-radius:4px; background:linear-gradient(90deg, #348bc1 0%, #246ba5 25%, #329b9a 55%, #204c75 85%, #163b5e 100%); opacity:.25;} .fl_road li{--rc:#246ba5; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;} .fl_road li.r_start{--rc:#2879ae;} .fl_road li.r_2{--rc:#2e8f8e;} .fl_road li.r_3{--rc:#267d7c;} .fl_road li.r_4{--rc:#204c75;} .fl_road li.r_goal{--rc:#163b5e;} .fl_road .r_pin{display:flex; flex-direction:column; align-items:center; justify-content:center; width:80px; height:80px; border:5px solid #fff; border-radius:50%; background:var(--rc); color:#fff; box-shadow:0 12px 26px rgba(32,76,117,.18);} .fl_road .r_pin b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:24px; font-weight:700; line-height:1;} .fl_road .r_pin i{font-size:18px; line-height:1;} .fl_road .r_pin i + b{margin-top:2px; font-size:13px; letter-spacing:1px;} .fl_road strong{display:block; margin-top:20px; font-size:18px; font-weight:800; color:var(--rc); letter-spacing:-.5px; line-height:1.4;} .fl_road p{margin-top:8px; font-size:14px; color:#4b5468; line-height:1.6;} .fl_value{display:flex; align-items:stretch; gap:18px; margin-top:70px;} .fl_value .v_card{flex:1 1 0; min-width:0; padding:36px 38px; border-radius:28px;} .fl_value .v_builder{border:1px solid #c4dcee; background:#f5fafe;} .fl_value .v_agent{background:linear-gradient(125deg, #329b9a 0%, #267d7c 50%, #246ba5 100%); color:#fff; box-shadow:0 24px 50px rgba(38,125,124,.25);} .fl_value .v_lbl{display:inline-block; padding:6px 14px; border-radius:100px; background:#204c75; font-size:13px; font-weight:800; color:#fff; letter-spacing:.5px;} .fl_value .v_agent .v_lbl{background:#fff; color:#267d7c;} .fl_value strong{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; margin-top:18px; font-size:24px; font-weight:800; letter-spacing:-.7px;} .fl_value strong em{font-family:'Outfit', 'Pretendard', sans-serif; font-style:normal; font-size:15px; font-weight:700; color:#2879ae; letter-spacing:.5px;} .fl_value .v_agent strong em{color:#9fe0dc;} .fl_value strong i{font-style:normal; font-weight:400; opacity:.5;} .fl_value p{margin-top:12px; font-size:17px; line-height:1.65; opacity:.85;} .fl_value p b{font-weight:800;} .fl_value .v_arr{flex:0 0 56px; display:flex; align-items:center; justify-content:center; align-self:center; width:56px; height:56px; border-radius:50%; background:#fff; font-size:26px; color:#267d7c; box-shadow:0 10px 24px rgba(32,76,117,.12);} .fl_comp{display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:24px 40px; margin-top:24px; padding:40px 44px; border:1px solid #dcebf5; border-radius:28px; background:#fff; box-shadow:0 12px 30px rgba(32,76,117,.05);} .fl_comp .c_head strong{font-size:22px; font-weight:800; letter-spacing:-.6px;} .fl_comp .c_head p{margin-top:8px; font-size:16px; color:#4b5468; line-height:1.65;} .fl_comp .c_head p b{font-weight:800; color:#267d7c;} .fl_comp .c_letters{grid-column:1 / -1; display:flex; align-items:center; gap:8px;} .fl_comp .lt{position:relative; flex:1 1 0; display:flex; align-items:center; justify-content:center; height:78px; border-radius:16px; font-family:'Outfit', 'Pretendard', sans-serif; font-size:34px; font-weight:700; color:#204c75;} .fl_comp .lt.b0{background:#e5f3fb;} .fl_comp .lt.b1{background:#e3f4f3;} .fl_comp .lt.b2{background:#d3eaf7;} .fl_comp .lt.b3{background:#c4e1f2;} .fl_comp .lt.b4{background:#329b9a; color:#fff;} .fl_comp .lt.b5{background:#204c75; color:#fff;} .fl_comp .lt[class*=" a"]{background:linear-gradient(160deg, #329b9a 0%, #267d7c 100%); color:#fff; box-shadow:0 10px 20px rgba(38,125,124,.25);} .fl_comp .lt em{position:absolute; top:-9px; right:-4px; padding:2px 6px; border-radius:100px; background:#267d7c; font-family:'Pretendard', sans-serif; font-style:normal; font-size:10px; font-weight:800; color:#fff; letter-spacing:.5px;} .fl_comp .lt_plus{flex:0 0 34px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#204c75; font-size:18px; color:#fff;} .fl_comp .c_sum{grid-row:1; grid-column:2; display:flex; align-items:center; gap:10px;} .fl_comp .c_sum li{display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:18px; background:#f5fafe;} .fl_comp .c_sum li b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:36px; font-weight:700; line-height:1; color:#204c75;} .fl_comp .c_sum li span{font-size:13px; font-weight:600; color:#4b5468; line-height:1.4;} .fl_comp .c_sum li.pt{background:#e3f4f3;} .fl_comp .c_sum li.pt b{color:#267d7c;} .fl_comp .c_sum li.arr{padding:0; background:none; font-size:20px; color:#9aa3b5;} /* 프로그램 유형 오빗 */ .tp_orbit{position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 400px minmax(0, 1fr); grid-template-rows:repeat(5, auto); gap:16px 40px; align-items:center; padding:60px 50px; border-radius:40px; background:linear-gradient(180deg, #f5fafe 0%, #e5f3fb 100%);} .tp_orbit .o_list{display:contents;} .tp_orbit .o_item{--tc:#348bc1; position:relative; display:flex; align-items:center; gap:14px; height:84px; padding:0 22px 0 14px; border-radius:100px; background:#fff; box-shadow:0 10px 24px rgba(32,76,117,.06), inset 0 0 0 1px #dcebf5; transition:transform .35s ease, box-shadow .35s ease;} .tp_orbit .o_item:nth-child(-n+5){grid-column:1;} .tp_orbit .o_item:nth-child(n+6){grid-column:3; flex-direction:row-reverse; padding:0 14px 0 22px; text-align:right;} .tp_orbit .o_item:nth-child(1), .tp_orbit .o_item:nth-child(6){grid-row:1;} .tp_orbit .o_item:nth-child(2), .tp_orbit .o_item:nth-child(7){grid-row:2;} .tp_orbit .o_item:nth-child(3), .tp_orbit .o_item:nth-child(8){grid-row:3;} .tp_orbit .o_item:nth-child(4), .tp_orbit .o_item:nth-child(9){grid-row:4;} .tp_orbit .o_item:nth-child(5), .tp_orbit .o_item:nth-child(10){grid-row:5;} .tp_orbit .o_item:after{content:""; position:absolute; top:50%; width:40px; height:2px; background:linear-gradient(90deg, var(--tc), rgba(255,255,255,0)); opacity:.35;} .tp_orbit .o_item:nth-child(-n+5):after{left:100%;} .tp_orbit .o_item:nth-child(n+6):after{right:100%; transform:scaleX(-1);} .tp_orbit .o_item:hover{transform:translateY(-3px); box-shadow:0 18px 34px rgba(32,76,117,.12), inset 0 0 0 2px var(--tc);} .tp_orbit .o_no{flex:0 0 46px; display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%; background:var(--tc); font-family:'Outfit', 'Pretendard', sans-serif; font-size:15px; font-weight:700; color:#fff;} .tp_orbit .o_ico{flex:0 0 auto; font-size:24px; color:var(--tc);} .tp_orbit .o_nm{flex:1 1 auto; min-width:0;} .tp_orbit .o_nm b{display:block; font-size:19px; font-weight:800; color:#204c75; letter-spacing:-.5px;} .tp_orbit .o_nm em{display:block; font-style:normal; font-size:12px; font-weight:600; color:#9aa3b5; letter-spacing:.3px;} .tp_orbit .o_core{grid-column:2; grid-row:2 / 5; position:relative; display:flex; align-items:center; justify-content:center; height:360px;} .tp_orbit .o_ring{position:absolute; left:50%; top:50%; width:340px; height:340px; margin:-170px 0 0 -170px; border:2px dashed #c4dcee; border-radius:50%; animation:stSpin 40s linear infinite;} .tp_orbit .o_ring:before{content:""; position:absolute; left:50%; top:-7px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:#348bc1; box-shadow:0 0 0 5px rgba(52,139,193,.2);} @keyframes stSpin{to{transform:rotate(360deg);}} .tp_orbit .o_circle{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; width:270px; height:270px; border-radius:50%; background:radial-gradient(circle at 30% 25%, #348bc1 0%, #246ba5 55%, #204c75 100%); color:#fff; text-align:center; box-shadow:0 30px 60px rgba(36,107,165,.35), 0 0 0 14px rgba(255,255,255,.7);} .tp_orbit .o_circle em{font-style:normal; font-size:15px; font-weight:600; color:#a9dcf5;} .tp_orbit .o_circle strong{margin-top:8px; font-size:30px; font-weight:800; letter-spacing:-1px; line-height:1.3;} .tp_orbit .o_circle span{margin-top:10px; padding:5px 12px; border-radius:100px; background:rgba(255,255,255,.14); font-size:12px; font-weight:700; letter-spacing:1px;} .tp_orbit .o_stat{grid-column:2; display:flex; align-items:center; justify-content:center; gap:4px; height:84px; padding:0 26px; border-radius:22px; background:#fff; box-shadow:0 10px 24px rgba(32,76,117,.06), inset 0 0 0 1px #dcebf5;} .tp_orbit .o_stat.s_top{grid-row:1;} .tp_orbit .o_stat.s_btm{grid-row:5;} .tp_orbit .o_stat b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:42px; font-weight:700; color:#246ba5; letter-spacing:-1px; line-height:1;} .tp_orbit .o_stat em{margin-right:14px; font-style:normal; font-size:16px; font-weight:700; color:#246ba5;} .tp_orbit .o_stat span{font-size:15px; font-weight:700; color:#204c75; line-height:1.35;} /* 운영 프로세스 */ .tp_proc{margin-top:30px; padding:44px 44px 40px; border:1px solid #dcebf5; border-radius:32px; background:#fff; box-shadow:0 12px 30px rgba(32,76,117,.05);} .tp_proc .p_head{text-align:center;} .tp_proc .p_head strong{font-size:24px; font-weight:800; letter-spacing:-.7px;} .tp_proc .p_head p{margin-top:8px; font-size:16px; color:#4b5468; line-height:1.6;} .tp_proc .p_head p b{font-weight:700; color:#246ba5;} .tp_proc .p_steps{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:14px; margin-top:34px;} .tp_proc .p_steps li{--pc:#348bc1; --pb:#e5f3fb; position:relative; display:flex; flex-direction:column; padding:26px 22px 22px; border-radius:24px; background:var(--pb);} .tp_proc .p_steps li.ph_d{--pc:#267d7c; --pb:#e3f4f3;} .tp_proc .p_steps li.ph_v{--pc:#204c75; --pb:#e5f3fb;} .tp_proc .p_steps li.ph_l{--pc:#2879ae; --pb:#e5f3fb;} .tp_proc .p_steps li:not(:last-child):after{content:""; position:absolute; right:-12px; top:50%; z-index:2; width:10px; height:10px; margin-top:-5px; border:solid #9aa3b5; border-width:2px 2px 0 0; transform:rotate(45deg);} .tp_proc .p_phase{font-family:'Outfit', 'Pretendard', sans-serif; font-size:14px; font-weight:700; color:var(--pc); letter-spacing:.5px;} .tp_proc .p_no{align-self:flex-start; margin-top:12px; padding:5px 12px; border-radius:100px; background:var(--pc); font-size:12px; font-weight:800; color:#fff; letter-spacing:.5px;} .tp_proc .p_steps strong{margin-top:14px; font-size:19px; font-weight:800; color:#204c75; letter-spacing:-.5px; line-height:1.4;} .tp_proc .p_steps p{flex:1 1 auto; margin-top:8px; font-size:14px; color:#4b5468; line-height:1.65;} .tp_proc .p_tag{align-self:flex-start; display:inline-flex; align-items:center; gap:4px; margin-top:16px; padding:6px 12px; border-radius:100px; background:#fff; font-size:13px; font-weight:700; color:var(--pc);} .tp_proc .p_goal{display:flex; align-items:center; justify-content:center; gap:8px; width:320px; max-width:100%; height:56px; margin:26px auto 0; border-radius:100px; background:#204c75; font-size:17px; font-weight:800; color:#fff; box-shadow:0 14px 30px rgba(32,76,117,.22);} .tp_proc .p_goal i{font-size:22px; color:#a9dcf5;} /* PDCA */ .pd_tabs{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;} .pd_tabs button{position:relative; display:flex; align-items:center; gap:12px; height:88px; padding:0 26px; border:1px solid #dcebf5; border-radius:24px; background:#fff; text-align:left; transition:all .35s ease;} .pd_tabs button i{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px; background:#e5f3fb; font-size:24px; color:#246ba5; transition:all .35s ease;} .pd_tabs button b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:24px; font-weight:700; color:#204c75; letter-spacing:.5px;} .pd_tabs button span{margin-left:auto; font-size:15px; font-weight:700; color:#9aa3b5;} .pd_tabs button:hover, .pd_tabs button:focus-visible{border-color:#c4dcee;} .pd_tabs button.on{border-color:transparent; background:linear-gradient(135deg, #348bc1 0%, #246ba5 55%, #204c75 100%); box-shadow:0 20px 40px rgba(36,107,165,.25);} .pd_tabs button.on i{background:rgba(255,255,255,.16); color:#fff;} .pd_tabs button.on b{color:#fff;} .pd_tabs button.on span{color:rgba(255,255,255,.7);} .pd_tabs button.on:after{content:""; position:absolute; left:50%; bottom:-9px; width:18px; height:18px; margin-left:-9px; background:#246ba5; transform:rotate(45deg); border-radius:0 0 4px 0;} .pd_tabs button:focus-visible{outline:3px solid #348bc1; outline-offset:2px;} .pd_panel{margin-top:26px; animation:stFade .45s ease both;} @keyframes stFade{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;} } .pd_list{display:grid; gap:14px;} .pd_list li{display:grid; grid-template-columns:230px minmax(0, 1fr); gap:10px 30px; align-items:center; padding:28px 32px; border:1px solid #dcebf5; border-radius:24px; background:#fff;} .pd_list .p_tit{grid-row:1 / 3; display:flex; align-items:center; gap:10px; font-size:20px; font-weight:800; color:#204c75; letter-spacing:-.6px; line-height:1.4;} .pd_list .p_tit:before{content:""; flex:0 0 6px; width:6px; height:28px; border-radius:6px; background:linear-gradient(180deg, #348bc1, #267d7c);} .pd_list .p_cmp{display:grid; grid-template-columns:minmax(0, 1fr) 40px minmax(0, 1fr); align-items:stretch; gap:10px;} .pd_list .p_old, .pd_list .p_new{padding:14px 18px; border-radius:16px;} .pd_list .p_old{background:#f5fafe;} .pd_list .p_new{background:#e3f4f3;} .pd_list .p_cmp em{display:block; font-style:normal; font-size:12px; font-weight:800; color:#7b8497; letter-spacing:.5px;} .pd_list .p_new em{color:#267d7c;} .pd_list .p_cmp p{margin-top:4px; font-size:16px; font-weight:700; color:#204c75; line-height:1.5;} .pd_list .p_old p{font-weight:600; color:#4b5468;} .pd_list .p_arr{display:flex; align-items:center; justify-content:center; font-size:22px; color:#267d7c;} .pd_list .p_desc{font-size:15px; color:#7b8497; line-height:1.6;} /* 성과 대시보드 */ .db_board{position:relative; overflow:hidden; padding:50px 50px 46px; border-radius:40px; background:linear-gradient(160deg, #204c75 0%, #246ba5 60%, #2b7db6 100%); color:#fff;} .db_board:before{content:""; position:absolute; right:-160px; top:-160px; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(52,139,193,.35) 0%, rgba(52,139,193,0) 70%);} .db_board > *{position:relative;} .db_top{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;} .db_ttl .live{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#a9dcf5; letter-spacing:1px; text-transform:uppercase;} .db_ttl .live i{width:8px; height:8px; border-radius:50%; background:#5cbcba; box-shadow:0 0 0 0 rgba(92,188,186,.6); animation:stLive 1.8s ease-out infinite;} @keyframes stLive{ 0%{box-shadow:0 0 0 0 rgba(92,188,186,.6);} 100%{box-shadow:0 0 0 10px rgba(92,188,186,0);} } .db_ttl strong{display:block; margin-top:8px; font-size:26px; font-weight:800; letter-spacing:-.8px;} .db_src{font-size:13px; color:rgba(255,255,255,.45);} .db_kpi{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:30px;} .db_kpi li{display:flex; flex-direction:column; padding:24px 26px; border-radius:22px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);} .db_kpi i{font-size:24px; color:#a9dcf5;} .db_kpi span{margin-top:12px; font-size:15px; font-weight:600; color:rgba(255,255,255,.65);} .db_kpi b{margin-top:4px; font-size:18px; font-weight:700; color:rgba(255,255,255,.8);} .db_kpi b em{margin-right:3px; font-family:'Outfit', 'Pretendard', sans-serif; font-style:normal; font-size:42px; font-weight:700; color:#fff; letter-spacing:-1px;} .db_charts{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px;} .db_chart{padding:26px 26px 22px; border-radius:22px; background:#fff; color:#204c75;} .db_chart .c_head{display:flex; align-items:center; justify-content:space-between; gap:10px;} .db_chart .c_head strong{display:flex; align-items:center; gap:6px; font-size:17px; font-weight:800;} .db_chart .c_head strong i{font-size:20px; color:#246ba5;} .db_chart .c_badge{padding:6px 12px; border-radius:100px; background:#e5f3fb; font-size:13px; font-weight:800; color:#246ba5;} .db_chart .c_bars{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; height:230px; margin-top:24px; padding:0 8px;} .db_chart .c_bars li{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;} .db_chart .c_bars b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:18px; font-weight:700; color:#204c75; opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; transition-delay:calc(var(--d) + .6s);} .db_chart .c_bars .bar{display:block; width:100%; max-width:64px; height:0; margin-top:8px; border-radius:12px 12px 4px 4px; background:#348bc1; transition:height 1.1s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d);} .db_chart .c_bars li:nth-child(2) .bar{background:#5cbcba;} .db_chart .c_bars li:nth-child(3) .bar{background:linear-gradient(180deg, #6fb6e0 0%, #348bc1 100%);} .db_chart .c_bars em{margin-top:10px; font-style:normal; font-size:14px; font-weight:700; color:#7b8497;} .db_board.in-view .c_bars .bar{height:calc(var(--h) * .72);} .db_board.in-view .c_bars b{opacity:1; transform:none;} .db_chart.ch_satis .c_badge{background:#e3f4f3; color:#267d7c;} .db_bottom{display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:14px; margin-top:14px;} .db_mix{padding:26px 28px; border-radius:22px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);} .db_mix .m_tit{display:inline-block; font-size:17px; font-weight:800;} .db_mix .m_legend{float:right; display:flex; gap:14px;} .db_mix .m_legend li{display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:rgba(255,255,255,.7);} .db_mix .m_legend li:before{content:""; width:10px; height:10px; border-radius:3px; background:currentColor;} .db_mix .m_legend .g_pub:before, .db_mix .stack .g_pub{background:#348bc1;} .db_mix .m_legend .g_pri:before, .db_mix .stack .g_pri{background:#5cbcba;} .db_mix .m_legend .g_aca:before, .db_mix .stack .g_aca{background:#a9dcf5;} .db_mix .m_rows{clear:both; display:grid; gap:12px; margin-top:22px;} .db_mix .m_rows li{display:grid; grid-template-columns:52px minmax(0, 1fr) 50px; align-items:center; gap:12px;} .db_mix .y{font-family:'Outfit', 'Pretendard', sans-serif; font-size:16px; font-weight:700; color:rgba(255,255,255,.75);} .db_mix .t{font-size:14px; font-weight:700; color:rgba(255,255,255,.75); text-align:right;} .db_mix .stack{display:flex; overflow:hidden; height:30px; border-radius:8px; background:rgba(255,255,255,.08);} .db_mix .stack i{display:flex; align-items:center; justify-content:center; width:0; overflow:hidden; font-style:normal; transition:width 1.2s cubic-bezier(.2,.8,.2,1);} .db_mix .stack i b{font-size:13px; font-weight:800; color:#204c75;} .db_board.in-view .db_mix .stack i{width:var(--w);} .db_net{display:grid; gap:10px;} .db_net li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 24px; border-radius:18px; background:linear-gradient(90deg, rgba(52,139,193,.25), rgba(52,139,193,.08)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);} .db_net span{font-size:15px; font-weight:600; color:rgba(255,255,255,.75);} .db_net b{font-size:15px; font-weight:700; color:rgba(255,255,255,.75);} .db_net b em{margin:0 2px; font-family:'Outfit', 'Pretendard', sans-serif; font-style:normal; font-size:30px; font-weight:700; color:#fff;} /* 협력 네트워크 */ .nw_wrap{display:grid; grid-template-columns:360px minmax(0, 1fr); gap:20px; align-items:stretch;} .nw_hub{position:relative; overflow:hidden; display:flex; flex-direction:column; padding:40px 34px; border-radius:32px; background:linear-gradient(160deg, #246ba5 0%, #204c75 100%); color:#fff;} .nw_hub:before{content:""; position:absolute; right:-100px; bottom:-100px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(169,220,245,.3) 0%, rgba(169,220,245,0) 70%);} .nw_hub > *{position:relative;} .nw_hub em{font-style:normal; font-size:13px; font-weight:800; color:#a9dcf5; letter-spacing:1.5px;} .nw_hub strong{margin-top:14px; font-size:32px; font-weight:800; letter-spacing:-1px; line-height:1.3;} .nw_hub p{margin-top:10px; font-size:17px; color:rgba(255,255,255,.7);} .nw_hub .h_num{display:flex; flex-direction:column; align-items:center; margin-top:auto; padding:26px 20px; border-radius:100px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);} .nw_hub .h_num b{font-family:'Outfit', 'Pretendard', sans-serif; font-size:56px; font-weight:700; line-height:1;} .nw_hub .h_num span{margin-top:6px; font-size:16px; font-weight:700;} .nw_grp{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;} .nw_grp > li{position:relative; overflow:hidden; padding:30px 28px 28px; border:1px solid #dcebf5; border-radius:28px; background:#fff; box-shadow:0 10px 26px rgba(32,76,117,.05);} .nw_grp > li:before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--gc);} .nw_grp .g_head{display:flex; align-items:center; gap:14px;} .nw_grp .g_ico{flex:0 0 52px; display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:16px; background:var(--gc); font-size:26px; color:#fff;} .nw_grp .g_head strong{display:block; font-size:21px; font-weight:800; letter-spacing:-.6px;} .nw_grp .g_head p{margin-top:2px; font-size:14px; color:#7b8497;} .nw_grp .g_no{align-self:flex-start; margin-left:auto; font-family:'Outfit', 'Pretendard', sans-serif; font-size:16px; font-weight:700; color:#c4dcee;} .nw_grp .g_chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:20px;} .nw_grp .g_chips li{padding:8px 14px; border:1px solid #dcebf5; border-radius:100px; background:#f5fafe; font-size:14px; font-weight:600; color:#204c75; transition:all .3s ease;} .nw_grp .g_chips li:hover{border-color:var(--gc); background:#fff; color:var(--gc);} .nw_marquee{margin-top:40px; -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 8%, #000 92%, rgba(0,0,0,0) 100%); overflow:hidden;} .nw_marquee .mq_row + .mq_row{margin-top:12px;} .nw_marquee .mq_track{display:flex; gap:12px; width:max-content; animation:stMarquee 70s linear infinite;} .nw_marquee .rev .mq_track{animation-direction:reverse;} .nw_marquee:hover .mq_track{animation-play-state:paused;} .nw_marquee span{flex:0 0 auto; display:flex; align-items:center; height:62px; padding:0 28px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px #dcebf5; font-size:17px; font-weight:800; color:#204c75; letter-spacing:-.4px; white-space:nowrap;} @keyframes stMarquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } /* 단계별 바로가기 */ .st_go{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; margin-top:120px;} .st_go a{position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:230px; padding:40px 44px; border-radius:32px; color:#fff; transition:transform .4s ease, box-shadow .4s ease;} .st_go a.g_1{background:linear-gradient(135deg, #348bc1 0%, #246ba5 55%, #204c75 100%);} .st_go a.g_2{background:linear-gradient(135deg, #329b9a 0%, #267d7c 50%, #204c75 100%);} .st_go a:before{content:""; position:absolute; right:-60px; bottom:-90px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.08);} .st_go a > *{position:relative;} .st_go .g_no{font-family:'Outfit', 'Pretendard', sans-serif; font-size:14px; font-weight:700; color:rgba(255,255,255,.6); letter-spacing:2px;} .st_go strong{margin-top:auto; font-size:30px; font-weight:800; letter-spacing:-1px;} .st_go p{margin-top:8px; font-size:16px; color:rgba(255,255,255,.75);} .st_go i{position:absolute; right:40px; top:36px; display:flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:50%; background:#fff; font-size:26px; color:#204c75; transition:transform .4s ease;} .st_go a:hover, .st_go a:focus-visible{transform:translateY(-6px); box-shadow:0 30px 50px rgba(36,107,165,.25);} .st_go a:hover i, .st_go a:focus-visible i{transform:rotate(45deg);} @media (prefers-reduced-motion: reduce){ .tp_orbit .o_ring, .nw_marquee .mq_track, .st_hero .s_arr, .db_ttl .live i{animation:none;} .db_chart .c_bars .bar, .db_mix .stack i{transition:none;} } /* ---------- 교육 및 연구 반응형 ---------- */ @media (max-width: 1400px){ .st_hero{grid-template-columns:minmax(0, 1fr) 460px; padding:70px 60px;} .st_hero .h_tit .l2{font-size:48px;} .st_hero .h_tit .l1{font-size:30px;} .tp_orbit{grid-template-columns:minmax(0, 1fr) 340px minmax(0, 1fr); gap:14px 30px; padding:50px 36px;} .tp_orbit .o_ring{width:300px; height:300px; margin:-150px 0 0 -150px;} .tp_orbit .o_circle{width:240px; height:240px;} .tp_orbit .o_circle strong{font-size:26px;} .tp_orbit .o_nm b{font-size:17px;} .tp_orbit .o_item:after{width:30px;} .fl_road strong{font-size:17px;} .rc_head, .rc_item{grid-template-columns:60px minmax(0, 1fr) 120px 190px 100px;} } @media (max-width: 1170px){ .edu{padding-bottom:100px;} .edu_utab button{flex-direction:column; gap:4px; height:auto; padding:14px 8px; font-size:16px;} .edu_utab button .n{position:absolute; margin:-4px 0 0 44px;} .edu_utab button{position:relative;} .cv_list{grid-template-columns:repeat(2, minmax(0, 1fr));} .cv_list:not(.is_detail){grid-template-columns:repeat(3, minmax(0, 1fr));} .cv_item.is_feat{padding:36px 36px;} .cv_item.is_feat .c_tit{font-size:26px;} .rc_sch{width:320px;} .rc_head, .rc_item{grid-template-columns:50px minmax(0, 1fr) 110px 170px 90px; gap:12px;} .rc_item .r_name{font-size:16px;} .st_sec{margin-top:110px;} .st_hero{grid-template-columns:1fr; gap:40px; padding:60px 50px;} .st_hero .h_stage{max-width:560px;} .fl_road{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px 18px;} .fl_road:before{display:none;} .fl_comp{grid-template-columns:1fr; padding:34px 32px;} .fl_comp .c_sum{grid-row:auto; grid-column:1;} .fl_comp .lt{height:64px; font-size:28px;} .tp_orbit{grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:none; gap:12px; padding:40px 30px;} .tp_orbit .o_core{grid-column:1 / -1; grid-row:1; height:320px;} .tp_orbit .o_stat.s_top, .tp_orbit .o_stat.s_btm{grid-column:auto; grid-row:2;} .tp_orbit .o_item:nth-child(n){grid-column:auto; grid-row:auto; flex-direction:row; padding:0 22px 0 14px; text-align:left;} .tp_orbit .o_item:after{display:none;} .tp_proc{padding:36px 30px 32px;} .tp_proc .p_steps{grid-template-columns:repeat(3, minmax(0, 1fr));} .tp_proc .p_steps li:after{display:none;} .pd_tabs button{flex-direction:column; justify-content:center; gap:4px; height:auto; padding:18px 10px;} .pd_tabs button i{width:40px; height:40px; font-size:20px;} .pd_tabs button b{font-size:20px;} .pd_tabs button span{margin-left:0; font-size:13px;} .pd_list li{grid-template-columns:1fr; padding:24px 26px;} .pd_list .p_tit{grid-row:auto;} .db_board{padding:40px 34px;} .db_kpi{grid-template-columns:repeat(2, minmax(0, 1fr));} .db_charts{grid-template-columns:repeat(3, minmax(0, 1fr));} .db_chart{padding:22px 18px 18px;} .db_chart .c_head{flex-direction:column; align-items:flex-start;} .db_bottom{grid-template-columns:1fr;} .db_net{grid-template-columns:repeat(3, minmax(0, 1fr));} .db_net li{flex-direction:column; align-items:flex-start; padding:18px 20px;} .nw_wrap{grid-template-columns:1fr;} .nw_hub{display:grid; grid-template-columns:minmax(0, 1fr) 260px; align-items:center; gap:10px 30px; padding:36px 34px;} .nw_hub em, .nw_hub strong, .nw_hub p{grid-column:1;} .nw_hub strong{margin-top:0;} .nw_hub p{margin-top:0;} .nw_hub .h_num{grid-column:2; grid-row:1 / 4; margin-top:0;} .st_go{margin-top:90px;} .st_go strong{font-size:26px;} } @media (max-width: 980px){ .cv_phead{flex-direction:column; align-items:flex-start;} .rc_filter .f_row{flex-direction:column; align-items:stretch;} .rc_sch{width:100%;} .rc_dept select{width:100%;} .rc_head{display:none !important;} .rc_list{border-top:2px solid #204c75;} .rc_item{grid-template-columns:auto auto minmax(0, 1fr); grid-template-areas:"name name name" "code dept univ"; gap:8px 14px; padding:18px 6px;} .rc_item .r_no{display:none;} .rc_item .r_name{grid-area:name;} .rc_item .r_code{grid-area:code; text-align:left;} .rc_item .r_dept{grid-area:dept; text-align:left;} .rc_item .r_univ{grid-area:univ; justify-self:end;} .fl_value{flex-direction:column;} .fl_value .v_arr{transform:rotate(90deg);} .db_charts{grid-template-columns:1fr;} .db_chart .c_head{flex-direction:row; align-items:center;} .db_chart .c_bars{height:200px;} .nw_grp{grid-template-columns:1fr;} } @media (max-width: 767px){ .edu{padding-bottom:60px;} .edu .m_br{display:block;} .edu_utab{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; padding:6px; border-radius:20px;} .edu_utab button{padding:12px 6px; border-radius:14px; font-size:15px;} .edu_utab button .emb{flex-basis:32px; width:32px; height:32px;} .edu_utab button .n{min-width:24px; height:20px; margin:-6px 0 0 36px; font-size:12px;} .cv_panel{margin-top:30px;} .cv_phead{margin-bottom:20px; padding-bottom:20px;} .cv_phead .emb{flex-basis:52px; width:52px; height:52px;} .cv_phead h3{font-size:22px;} .cv_phead h3 span{display:block; margin:2px 0 0; font-size:15px;} .cv_list, .cv_list:not(.is_detail){grid-template-columns:1fr; gap:10px;} .cv_item{padding:22px 20px 20px; border-radius:20px;} .cv_item .c_tit{font-size:18px;} .cv_item .c_meta > div{font-size:14px;} .cv_item .c_desc p{font-size:14px;} .cv_item.is_feat{padding:28px 22px;} .cv_item.is_feat .c_tit{font-size:22px;} .cv_item.is_feat .c_desc p{font-size:15px;} .cv_list:not(.is_detail) .cv_item{padding:18px 20px;} .cv_list:not(.is_detail) .cv_item .c_tit{margin-top:10px; font-size:16px;} .cv_link{flex-direction:column; align-items:flex-start; padding:18px 20px;} .cv_link p{font-size:14px;} .rc_filter{padding:18px 16px; border-radius:22px;} .rc_year button{height:40px; padding:0 18px; font-size:15px;} .rc_sch input{height:46px; font-size:14px;} .rc_univ{gap:6px;} .rc_univ button{height:38px; padding:0 12px 0 8px; font-size:14px;} .rc_univ button:first-child{padding-left:14px;} .rc_univ button .emb{width:22px; height:22px;} .rc_dept select{height:42px; font-size:14px;} .rc_bar{margin:28px 0 10px;} .rc_total{font-size:15px;} .rc_total b{font-size:18px;} .rc_item{padding:16px 4px;} .rc_item .r_name{font-size:15px;} .rc_item .r_code, .rc_item .r_dept{font-size:13px;} .u_badge{height:24px; padding:0 9px; font-size:12px;} .rc_more{height:48px; padding:0 26px; font-size:15px;} .st_sec{margin-top:80px;} .st_lead{margin:-14px 0 26px; font-size:15px;} .st_hero{gap:30px; padding:40px 22px; border-radius:28px;} .st_hero .h_eng{padding:6px 12px; font-size:11px; letter-spacing:1px; white-space:nowrap;} .st_hero .h_tit{margin-top:16px;} .st_hero .h_tit .l1{font-size:22px;} .st_hero .h_tit .l2{font-size:32px;} .st_hero .h_desc{margin-top:16px; font-size:15px;} .st_hero .h_desc br{display:none;} .st_hero .h_stage{gap:8px;} .st_hero .s_card{padding:20px 16px; border-radius:20px;} .st_hero .s_no{font-size:10px; letter-spacing:1px;} .st_hero .s_card strong{font-size:21px;} .st_hero .s_card p{font-size:14px;} .st_hero .s_yr{margin-top:12px; font-size:11px;} .st_hero .s_arr{flex-basis:34px; width:34px; height:34px; font-size:16px;} .fl_road{grid-template-columns:1fr; gap:0;} .fl_road:before{display:block; left:31px; right:auto; top:30px; bottom:30px; width:3px; height:auto; background:linear-gradient(180deg, #348bc1 0%, #246ba5 25%, #329b9a 55%, #204c75 85%, #163b5e 100%);} .fl_road li{display:grid; grid-template-columns:64px minmax(0, 1fr); gap:2px 16px; align-items:start; padding:10px 0; text-align:left;} .fl_road .r_pin{grid-row:1 / 3; width:64px; height:64px; border-width:4px;} .fl_road .r_pin b{font-size:19px;} .fl_road .r_pin i + b{font-size:11px;} .fl_road strong{margin-top:8px; font-size:17px;} .fl_road p{margin-top:2px; font-size:14px;} .fl_value{gap:10px; margin-top:40px;} .fl_value .v_card{padding:26px 22px; border-radius:22px;} .fl_value strong{font-size:19px;} .fl_value p{font-size:15px;} .fl_value .v_arr{width:44px; height:44px; font-size:20px;} .fl_comp{gap:20px; padding:26px 20px; border-radius:22px;} .fl_comp .c_head strong{font-size:19px;} .fl_comp .c_head p{font-size:14px;} .fl_comp .c_letters{flex-wrap:wrap; gap:6px;} .fl_comp .lt{flex:0 0 calc((100% - 30px) / 6); height:48px; border-radius:12px; font-size:22px;} .fl_comp .lt_plus{display:none;} .fl_comp .lt em{top:-7px; right:-2px; font-size:8px; padding:1px 4px;} .fl_comp .c_sum{gap:6px;} .fl_comp .c_sum li{gap:8px; padding:10px 12px; border-radius:14px;} .fl_comp .c_sum li b{font-size:26px;} .fl_comp .c_sum li span{font-size:11px;} .fl_comp .c_sum li.arr{font-size:16px;} .tp_orbit{grid-template-columns:1fr; gap:8px; padding:30px 16px; border-radius:28px;} .tp_orbit .o_core{height:260px;} .tp_orbit .o_ring{width:240px; height:240px; margin:-120px 0 0 -120px;} .tp_orbit .o_circle{width:196px; height:196px; box-shadow:0 20px 40px rgba(36,107,165,.3), 0 0 0 10px rgba(255,255,255,.7);} .tp_orbit .o_circle em{font-size:13px;} .tp_orbit .o_circle strong{font-size:22px;} .tp_orbit .o_circle span{font-size:10px;} .tp_orbit .o_stat.s_top, .tp_orbit .o_stat.s_btm{grid-row:auto; height:70px; border-radius:18px;} .tp_orbit .o_stat b{font-size:34px;} .tp_orbit .o_stat span{font-size:14px;} .tp_orbit .o_item:nth-child(n){height:64px; gap:10px; padding:0 18px 0 10px;} .tp_orbit .o_no{flex-basis:40px; width:40px; height:40px; font-size:13px;} .tp_orbit .o_ico{font-size:20px;} .tp_orbit .o_nm b{font-size:16px;} .tp_orbit .o_nm em{font-size:11px;} .tp_proc{margin-top:20px; padding:28px 18px 24px; border-radius:24px;} .tp_proc .p_head strong{font-size:19px;} .tp_proc .p_head p{font-size:14px;} .tp_proc .p_steps{grid-template-columns:1fr; gap:10px; margin-top:24px;} .tp_proc .p_steps li{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:4px 10px; padding:20px 18px; border-radius:18px;} .tp_proc .p_phase{grid-column:1 / -1;} .tp_proc .p_no{grid-row:2; margin-top:4px;} .tp_proc .p_steps strong{grid-row:2; margin-top:4px; font-size:17px;} .tp_proc .p_steps p{grid-column:1 / -1; font-size:14px;} .tp_proc .p_tag{grid-column:1 / -1; margin-top:10px;} .tp_proc .p_goal{height:50px; font-size:15px;} .pd_tabs{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px;} .pd_tabs button{gap:2px; padding:12px 4px; border-radius:16px;} .pd_tabs button i{width:34px; height:34px; border-radius:12px; font-size:17px;} .pd_tabs button b{font-size:15px; letter-spacing:0;} .pd_tabs button span{font-size:12px;} .pd_tabs button.on:after{bottom:-7px; width:14px; height:14px; margin-left:-7px;} .pd_panel{margin-top:18px;} .pd_list{gap:10px;} .pd_list li{gap:12px; padding:20px 18px; border-radius:20px;} .pd_list .p_tit{font-size:17px;} .pd_list .p_tit:before{height:22px;} .pd_list .p_cmp{grid-template-columns:1fr; gap:6px;} .pd_list .p_arr{height:22px; transform:rotate(90deg);} .pd_list .p_cmp p{font-size:14px;} .pd_list .p_desc{font-size:14px;} .db_board{padding:30px 16px 20px; border-radius:28px;} .db_top{flex-direction:column; align-items:flex-start; gap:6px; padding:0 6px;} .db_ttl strong{font-size:20px;} .db_src{font-size:12px;} .db_kpi{gap:8px; margin-top:20px;} .db_kpi li{padding:18px 16px; border-radius:18px;} .db_kpi i{font-size:20px;} .db_kpi span{margin-top:8px; font-size:13px;} .db_kpi b{font-size:15px;} .db_kpi b em{font-size:28px;} .db_charts{gap:8px; margin-top:8px;} .db_chart{padding:20px 16px 16px; border-radius:18px;} .db_chart .c_head strong{font-size:15px;} .db_chart .c_badge{font-size:12px;} .db_chart .c_bars{gap:12px; height:180px; margin-top:16px;} .db_chart .c_bars b{font-size:15px;} .db_chart .c_bars em{font-size:13px;} .db_bottom{gap:8px; margin-top:8px;} .db_mix{padding:20px 16px; border-radius:18px;} .db_mix .m_tit{display:block; font-size:15px;} .db_mix .m_legend{float:none; margin-top:10px;} .db_mix .m_rows{margin-top:16px;} .db_mix .m_rows li{grid-template-columns:42px minmax(0, 1fr) 40px; gap:8px;} .db_mix .y{font-size:14px;} .db_mix .t{font-size:13px;} .db_mix .stack{height:26px;} .db_net{grid-template-columns:1fr; gap:8px;} .db_net li{flex-direction:row; align-items:center; padding:14px 18px; border-radius:16px;} .db_net span, .db_net b{font-size:14px;} .db_net b em{font-size:24px;} .nw_wrap{gap:12px;} .nw_hub{grid-template-columns:1fr; padding:30px 22px; border-radius:24px;} .nw_hub strong{font-size:24px;} .nw_hub p{font-size:15px;} .nw_hub .h_num{grid-column:1; grid-row:auto; margin-top:16px; padding:18px;} .nw_hub .h_num b{font-size:44px;} .nw_hub .h_num span{font-size:14px;} .nw_grp{gap:10px;} .nw_grp > li{padding:24px 18px 20px; border-radius:22px;} .nw_grp .g_ico{flex-basis:44px; width:44px; height:44px; border-radius:14px; font-size:22px;} .nw_grp .g_head strong{font-size:18px;} .nw_grp .g_head p{font-size:13px;} .nw_grp .g_chips{margin-top:16px; gap:5px;} .nw_grp .g_chips li{padding:6px 11px; font-size:13px;} .nw_marquee{margin-top:24px;} .nw_marquee .mq_row + .mq_row{margin-top:8px;} .nw_marquee .mq_track{gap:8px;} .nw_marquee span{height:48px; padding:0 18px; border-radius:12px; font-size:14px;} .st_go{grid-template-columns:1fr; gap:10px; margin-top:60px;} .st_go a{min-height:170px; padding:28px 24px; border-radius:24px;} .st_go .g_no{font-size:12px;} .st_go strong{font-size:22px;} .st_go p{font-size:14px;} .st_go i{right:22px; top:24px; width:48px; height:48px; font-size:22px;} } @media (max-width: 520px){ .edu_utab button .nm{font-size:14px;} .rc_item .r_dept{display:none;} .cv_item .c_top{flex-wrap:wrap;} .st_hero .h_tit .l1{font-size:19px;} .st_hero .h_eng{font-size:10px; letter-spacing:.5px;} .st_hero .h_tit .l2{font-size:27px;} .st_hero .s_card strong{font-size:18px;} .db_kpi b em{font-size:24px;} .pd_tabs button span{display:none;} } /* -------------------------------- sub6_1 · sub6_2 : 개인정보취급방침 · 이메일무단수집거부 -------------------------------- */ .policy{padding-bottom:160px; color:#333; word-break:keep-all;} .policy *, .policy *:before, .policy *:after{box-sizing:border-box;} .policy ul, .policy ol{list-style:none; margin:0; padding:0;} .policy p{margin:0; font-size:17px; line-height:1.75; color:#444; letter-spacing:-.3px;} .policy p + p{margin-top:12px;} .policy a{color:#246ba5; text-decoration:underline; text-underline-offset:3px;} .policy a:hover, .policy a:focus-visible{color:#204c75;} .policy b{font-weight:700; color:#204c75;} /* 상단 안내 */ .policy_top{position:relative; display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:32px; align-items:center; margin-bottom:40px; padding:48px 52px; border-radius:32px; background:linear-gradient(120deg, #204c75 0%, #246ba5 100%); color:#fff; overflow:hidden; box-shadow:0 20px 50px rgba(32,76,117,.18);} .policy_top:before{content:""; position:absolute; right:-80px; top:-120px; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.07); pointer-events:none;} .policy_top .p_ico{display:flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:28px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); font-size:46px; color:#fff;} .policy_top .p_txt em{display:block; font-style:normal; font-family:'Outfit', sans-serif; font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.7);} .policy_top .p_txt strong{display:block; margin-top:8px; font-size:28px; font-weight:700; letter-spacing:-.8px; line-height:1.3; color:#fff;} .policy_top .p_txt p{margin-top:14px; font-size:16px; line-height:1.7; color:rgba(255,255,255,.85);} .policy_top .p_date{position:relative; display:flex; flex-direction:column; gap:10px; min-width:180px;} .policy_top .p_date span{display:flex; flex-direction:column; padding:14px 18px; border-radius:16px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);} .policy_top .p_date em{font-style:normal; font-size:12px; font-weight:600; letter-spacing:1px; color:rgba(255,255,255,.7);} .policy_top .p_date b{margin-top:4px; font-family:'Outfit', 'Noto Sans KR', sans-serif; font-size:17px; font-weight:600; color:#fff;} /* 목차 */ .policy_toc{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px;} .policy_toc a{display:flex; align-items:center; gap:12px; min-height:60px; padding:0 18px; border:1px solid #dcebf5; border-radius:16px; background:#f5f6f8; font-size:15px; font-weight:600; color:#333; text-decoration:none; letter-spacing:-.4px; line-height:1.35; transition:background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;} .policy_toc a em{flex:0 0 28px; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#fff; border:1px solid #dcebf5; font-family:'Outfit', sans-serif; font-style:normal; font-size:13px; font-weight:600; color:#246ba5;} .policy_toc a:hover, .policy_toc a:focus-visible{border-color:#204c75; background:#204c75; color:#fff; transform:translateY(-2px);} .policy_toc a:hover em, .policy_toc a:focus-visible em{border-color:transparent; color:#204c75;} /* 조항 */ .policy_sec{margin-top:56px; padding-top:40px; border-top:1px solid #e3e8ef; scroll-margin-top:100px;} .policy_sec .s_tit{display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:0 0 20px; line-height:1.3;} .policy_sec .s_tit em{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:100px; background:#e5f3fb; font-style:normal; font-size:13px; font-weight:700; color:#246ba5; letter-spacing:0;} .policy_sec .s_tit strong{font-size:24px; font-weight:700; color:#204c75; letter-spacing:-.7px;} .policy_sec > p + .p_num, .policy_sec > p + .p_list, .policy_sec > p + .p_tbl, .policy_sec > p + .p_contact, .policy_sec > p + .p_org{margin-top:16px;} .policy_sec .p_num + p, .policy_sec .p_list + p, .policy_sec .p_tbl + p, .policy_sec .p_contact + p, .policy_sec .p_org + p{margin-top:18px;} /* 번호 목록 */ .policy .p_num{counter-reset:pnum;} .policy .p_num > li{position:relative; padding-left:34px; font-size:17px; line-height:1.75; color:#444; letter-spacing:-.3px;} .policy .p_num > li + li{margin-top:12px;} .policy .p_num > li:before{counter-increment:pnum; content:counter(pnum); position:absolute; left:0; top:5px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#204c75; font-family:'Outfit', sans-serif; font-size:12px; font-weight:600; color:#fff;} /* 하이픈 목록 */ .policy .p_list > li{position:relative; padding-left:14px; font-size:16px; line-height:1.7; color:#555; letter-spacing:-.3px;} .policy .p_list > li + li{margin-top:6px;} .policy .p_list > li:before{content:""; position:absolute; left:0; top:13px; width:6px; height:2px; background:#246ba5;} .policy .p_num > li > .p_list, .policy .p_num > li > .p_tbl{margin-top:10px;} /* 표 */ .policy .p_tbl{overflow-x:auto; border-radius:16px; border:1px solid #dcebf5;} .policy .p_tbl table{width:100%; min-width:560px; border-collapse:collapse; font-size:15px; line-height:1.6; letter-spacing:-.3px;} .policy .p_tbl th, .policy .p_tbl td{padding:14px 18px; border-bottom:1px solid #e3e8ef; border-left:1px solid #e3e8ef; text-align:left; vertical-align:middle; color:#444;} .policy .p_tbl th:first-child, .policy .p_tbl td:first-child{border-left:0;} .policy .p_tbl thead th{background:#204c75; color:#fff; font-weight:600; border-bottom:0; border-left-color:rgba(255,255,255,.15);} .policy .p_tbl tbody th{background:#f5f6f8; font-weight:700; color:#204c75;} .policy .p_tbl tbody tr:last-child th, .policy .p_tbl tbody tr:last-child td{border-bottom:0;} .policy .tag{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:100px; font-size:12px; font-weight:700;} .policy .tag.req{background:#fdecec; color:#d0342c;} .policy .tag.opt{background:#e5f3fb; color:#246ba5;} /* 참고 */ .policy .p_note{display:flex; align-items:flex-start; gap:8px; margin-top:14px; padding:14px 18px; border-radius:14px; background:#f5f6f8; font-size:15px; color:#555;} .policy .p_note i{flex:0 0 auto; margin-top:3px; font-size:18px; color:#246ba5;} /* 연락처 카드 */ .policy .p_contact{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px;} .policy .c_box{padding:28px 30px; border:1px solid #dcebf5; border-radius:24px; background:#f5f6f8;} .policy .c_box em{display:flex; align-items:center; gap:6px; font-style:normal; font-size:14px; font-weight:600; color:#6b7280;} .policy .c_box em i{font-size:17px; color:#246ba5;} .policy .c_box strong{display:block; margin-top:8px; font-size:21px; font-weight:700; color:#111; letter-spacing:-.6px; line-height:1.35;} .policy .c_box strong small{font-size:14px; font-weight:500; color:#6b7280; margin-left:6px;} .policy .c_box ul{margin-top:16px; padding-top:16px; border-top:1px solid #dcebf5;} .policy .c_box li{display:flex; align-items:flex-start; gap:8px; font-size:15px; line-height:1.6; color:#333;} .policy .c_box li + li{margin-top:6px;} .policy .c_box li i{flex:0 0 auto; margin-top:4px; font-size:16px; color:#246ba5;} .policy .c_box li a{color:#333; text-decoration:none; overflow-wrap:anywhere;} .policy .c_box li a:hover, .policy .c_box li a:focus-visible{color:#246ba5; text-decoration:underline;} /* 구제기관 */ .policy .p_org{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px;} .policy .p_org a{display:flex; flex-direction:column; height:100%; padding:22px 22px 20px; border:1px solid #dcebf5; border-radius:20px; background:#fff; box-shadow:0 6px 16px rgba(32,76,117,.05); text-decoration:none; color:#111; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;} .policy .p_org a:hover, .policy .p_org a:focus-visible{border-color:#cfd6e0; box-shadow:0 14px 26px rgba(32,76,117,.12); transform:translateY(-3px); color:#111;} .policy .p_org strong{font-size:16px; font-weight:700; letter-spacing:-.5px; line-height:1.35;} .policy .p_org span{margin-top:10px; font-family:'Outfit', 'Noto Sans KR', sans-serif; font-size:17px; font-weight:600; color:#204c75;} .policy .p_org em{margin-top:4px; font-style:normal; font-size:13px; color:#8a93a6; overflow-wrap:anywhere;} /* 하단 */ .policy_foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:56px; padding:22px 30px; border-radius:20px; background:#f5f6f8; border:1px solid #dcebf5;} .policy_foot p{font-size:15px; color:#555;} .policy_foot p em{font-style:normal; font-weight:700; color:#204c75; margin-right:6px;} .policy_foot p .bar{display:inline-block; width:1px; height:12px; margin:0 12px; background:#cfd6e0; vertical-align:-1px;} .policy_foot .p_top{display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 20px; border-radius:100px; background:#204c75; font-size:14px; font-weight:600; color:#fff; text-decoration:none; transition:background .3s ease;} .policy_foot .p_top:hover, .policy_foot .p_top:focus-visible{background:#246ba5; color:#fff;} /* 이메일무단수집거부 : 핵심 안내 */ .nm_point{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;} .nm_point li{padding:32px 30px; border:1px solid #dcebf5; border-radius:24px; background:#f5f6f8;} .nm_point .n_ico{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px; background:#fff; border:1px solid #dcebf5; font-size:28px; color:#246ba5;} .nm_point strong{display:block; margin-top:18px; font-size:19px; font-weight:700; color:#204c75; letter-spacing:-.5px;} .nm_point p{margin-top:8px; font-size:15px; line-height:1.65; color:#555;} /* 이메일무단수집거부 : 법조문 */ .nm_law{padding:30px 34px; border-left:4px solid #246ba5; border-radius:0 20px 20px 0; background:#f5f6f8;} .nm_law + .nm_law{margin-top:16px;} .nm_law h4{margin:0 0 14px; font-size:18px; font-weight:700; color:#204c75; letter-spacing:-.5px; line-height:1.4;} .nm_law ol > li{position:relative; padding-left:28px; font-size:16px; line-height:1.75; color:#444; letter-spacing:-.3px;} .nm_law ol > li + li{margin-top:8px;} .nm_law ol > li > em{position:absolute; left:0; top:0; font-style:normal; font-weight:700; color:#246ba5;} .nm_law ol > li > .p_list{margin-top:8px;} @media (max-width: 1170px){ .policy{padding-bottom:120px;} .policy_top{grid-template-columns:80px minmax(0, 1fr); gap:24px; padding:40px;} .policy_top .p_ico{width:80px; height:80px; border-radius:24px; font-size:38px;} .policy_top .p_date{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap;} .policy_top .p_date span{flex:1 1 160px;} .policy_toc{grid-template-columns:repeat(3, minmax(0, 1fr));} .policy .p_org{grid-template-columns:repeat(2, minmax(0, 1fr));} } @media (max-width: 767px){ .policy{padding-bottom:80px;} .policy p, .policy .p_num > li{font-size:15px;} .policy .p_list > li{font-size:14px;} .policy_top{display:block; margin-bottom:24px; padding:28px 24px; border-radius:24px;} .policy_top .p_ico{width:60px; height:60px; border-radius:18px; font-size:30px;} .policy_top .p_txt{margin-top:18px;} .policy_top .p_txt strong{font-size:21px;} .policy_top .p_txt p{font-size:14px;} .policy_top .p_date{margin-top:18px; gap:8px;} .policy_top .p_date span{padding:10px 14px;} .policy_top .p_date b{font-size:15px;} .policy_toc{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;} .policy_toc a{min-height:50px; padding:0 12px; font-size:13px; border-radius:12px;} .policy_toc a em{flex-basis:24px; width:24px; height:24px; font-size:12px;} .policy_sec{margin-top:40px; padding-top:28px;} .policy_sec .s_tit strong{font-size:19px;} .policy .p_num > li{padding-left:30px;} .policy .p_num > li:before{top:4px; width:22px; height:22px; font-size:11px;} .policy .p_tbl th, .policy .p_tbl td{padding:11px 12px; font-size:13px;} .policy .p_contact{grid-template-columns:minmax(0, 1fr); gap:10px;} .policy .c_box{padding:22px 20px; border-radius:18px;} .policy .c_box strong{font-size:18px;} .policy .p_org{grid-template-columns:minmax(0, 1fr); gap:8px;} .policy .p_org a{padding:18px 20px;} .policy_foot{flex-direction:column; align-items:flex-start; margin-top:40px; padding:20px;} .policy_foot p .bar{display:none;} .policy_foot p em:nth-of-type(2){display:block; margin-top:6px;} .nm_point{grid-template-columns:minmax(0, 1fr); gap:10px;} .nm_point li{padding:22px 20px; border-radius:18px;} .nm_point strong{margin-top:14px; font-size:17px;} .nm_law{padding:20px 20px; border-radius:0 14px 14px 0;} .nm_law h4{font-size:16px;} .nm_law ol > li{padding-left:24px; font-size:14px;} }