#sVisual{height: 460px;position:relative;/*display: flex;flex-direction: column;justify-content: flex-end;*/} #sVisual .visual-wr{background: #000;position: relative;/* overflow:hidden; */display: flex;width: 100%;margin: 0 auto;height: 100%;z-index: 1; /*clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 85%, 95% 100%, 5% 100%, 0 85%, 0% 30%);*/} #sVisual .svWrap{position:relative;overflow: hidden;width: 100%;height: 100%;} #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); opacity: .6;} #sVisual .svWrap .sv-img1{background: url("/images/sub/visual2.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/visual2.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img4{background: url("/images/sub/visual2.jpg") no-repeat 50% 78%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img5{background: url("/images/sub/visual2.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img6{background:url("/images/sub/visual2.jpg") no-repeat 50% 50%;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img7{background:url("/images/sub/visual2.jpg") no-repeat 50% bottom;background-size:cover;overflow: hidden;background-attachment: fixed !important;} #sVisual .svWrap .sv-img8{background:url("/images/sub/visual2.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{padding-top: 100px; 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: 50px;} #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: 70px;color: #fff;font-family: "Oxanium", sans-serif;text-transform: uppercase;font-weight: normal;letter-spacing: -1px;} #sVisual .slogan .big-tit big b{font-weight:700;} #sVisual .slogan .big-tit small{font-family: 'pretendard';font-size: 30px;padding-left: 7px;font-weight: 500;color: #fff;position: relative;display: inline-block;padding-left: 130px;} #sVisual .slogan .big-tit small:before{content:"";width:100px;height:1px;background: #fff;position:absolute;left:0;top:50%;transform:translateY(-50%);} #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: 100px 0 100px;font-family: "Montserrat";} .sCont h3 {font-family: "Montserrat";} .sCont .sCont-title{display:block;padding: 0px 0 60px;color: #000;font-size: 46px;line-height:1.6;font-weight: 600;font-family: "Montserrat";font-weight:700; 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;} #sVisual .svWrap .sv-img1 {background-size: cover;} } @media (max-width: 1240px){ } @media (max-width: 1170px){ /* #sVisual .visual-wr {height: calc(100% - 90px);} */ #sVisual .slogan .big-tit big {font-size: 60px;} .sub-board-bottom{padding-bottom:100px;} } @media (max-width: 980px){ } @media (max-width: 767px){ #sVisual{height: 350px;} /* #sVisual .visual-wr{width:100%;height: calc(100% - 80px);} */ #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: 20px;height: calc(100% - 60px);transform: translateY(-0%);justify-content: center;} #sVisual .slogan .big-tit big {font-size: 34px; letter-spacing: 0;} #sVisual .slogan .big-tit small{font-size:22px; padding-left: 0; padding-top: 26px;} #sVisual .slogan .big-tit small:before {width: 2px; height: 20px; opacity: 0.5; left: 50%; top: 0; transform: translate(-50%, 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;font-family:'S-CoreDream';display: flex;justify-content: center;/* 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: #003087;color: #fff;font-size:18px;border-radius: 10px;position:relative; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);} .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;*/width: 700px;} .lnb .lnb-map > li:nth-last-of-type(1) a::after{right: 5%;} .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: #487ef1;} .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: #487ef1;} .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: 1240px){ #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: 16px; 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: 40px 0 0;} .sCont .sCont-title{font-size:42px;} } @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; } #location { position: absolute; bottom: 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:#0c4167; letter-spacing:-1px; line-height:1.2;} .contTit-big{display:block;margin:60px 0 15px;font-weight:700;font-size:34px;color: #212121;letter-spacing:-1px;line-height:1.2;} .contTit{display:block;margin:60px 0 15px;font-weight:700;font-size:28px;color:#2a2a2a;letter-spacing:-1px;line-height:1.2;font-family: 'S-CoreDream';} .contTit:first-child{/* margin-top:0; */} .contTit-s{display:block;margin:40px 0 13px;font-weight:700;font-size: 20px;color: #2469c3;word-spacing:-.5px;font-family: 'S-CoreDream';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:#253369;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:#9c6e37;} .un-bold{color:#333; text-decoration:underline; font-weight:600;} .point-color{color: #9c6e37;} 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:#253369;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:#9c6e37;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:#eff2fa; 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:#00bfe6; 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: #a6b8cd;} .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:#9c6e37; 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:#253369;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:#9c6e37;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:#00bfe6; 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:#fdb813;} .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;font-family: 'S-CoreDream-5Medium';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: #fdb813;} .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: #118ad9;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; font-family:'S-CoreDream-5Medium'; line-height:1; letter-spacing:.5px; text-align:left; font-style:normal; font-weight:normal; } .sub-tab2 li.active{border: 1px solid #4A5677;background: #4A5677;} .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: #f9f7f7;} .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: #253369;border-color: #253369;} .color-tab li a:focus, .color-tab li a:hover{border-color: #253369;color: #253369;text-decoration: none;z-index:2;} .color-tab li.on a:focus, .color-tab li.on a:hover{color:#fff;} .color-tab-one{font-family: 'S-CoreDream';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:#253369; border-color:#253369;} .color-tab-one li span:focus, .color-tab-one li span:hover{border-color:#253369; color:#253369; 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;} .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:#111; font-weight: 700;} .vs-tabs ul li.on a:before{content:'';width:100%;height:3px;background:#00e9cc;position:absolute;left:0;bottom:-8px;} .vs-tabs ul li a:hover:before{content:""; width:100%; height:3px; background:#00e9cc; 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:#00b29c;border-color:#00b29c;} .vs-tabs ul li a:focus, .vs-tabs ul li a:hover{border-color:#00b29c; color:#00b29c; 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 : Introduction -------------------------------- */ /* --------------- 상단탭 --------------- */ .tabBtn{width: 100%;display: flex; align-items: center; gap: 50px; margin-bottom: 100px;} .tabBtn li{width: 100%;} .tabBtn li a{display: block; width: 100%; border: 1px solid #ccc; color: #888; text-align: center; padding: 30px; font-size: 22px; cursor: pointer;transition: .2s ease-in;} .tabBtn li:hover a{background: #9dc0d1; border-color: #9dc0d1; color: #fff;} .tabBtn li.active a{background: #1aa7ec; border-color: #1aa7ec; color: #fff;} /* --------------- 첫번째 --------------- */ .messa .meImg{display: flex; gap: 25px; /*position: sticky;*/ top: 200px; padding-bottom: 100px;} .messa .meImg .meiWrap{ overflow: hidden; width: 100%; height: 450px; background-color: #000; clip-path: polygon(3% 0, 97% 0, 100% 10%, 100% 90%, 97% 100%, 3% 100%, 0 90%, 0 10%);} .messa .meImg .meiWrap img{width: 100%; filter: brightness(0.8);} .messa .meTxt{max-width: 1200px; margin: -200px auto 0; padding: 75px; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); box-shadow: 0 0 30px 0 rgba(0,0,0,.1);} .messa .meTxt h3>b{color: #88c0ee36; font-size: 120px;position: relative;display: inline-block; transform: translateY(30px); z-index: 1;} .messa .meTxt h3>b::before{content: '';width: 100%;height: 135%; position: absolute;top: 0;left: 0;background-image: linear-gradient(to top, #fff, #ffffff00);} .messa .meTxt h3{padding-bottom: 30px; font-size: 58px; line-height: 78px;} .messa .meTxt h3 span{position: relative; z-index: 2; font-family: "Montserrat"; font-weight:700;} .messa .meTxt h3 span b{color: rgba(0,0,0,.08);} .messa .meTxt h3 span b:after{font-size: 58px; color: #1aa7ec;} .messa .meTxt h3 span:nth-of-type(2) b:after{transition-delay: 0.2s;} .messa .meTxt h3 span:nth-of-type(3) b:after{transition-delay: 0.4s;} .messa .meTxt h3 span:nth-of-type(4) b:after{transition-delay: 0.6s;} .messa .meTxt ul li{font-size: 18px; line-height: 28px;font-family: "Open Sans";} .messa .meTxt ul li+li{margin-top: 25px;} .messa .meTxt .meName{padding-top: 50px; text-align: right; border-top: 1px dotted #ccc; margin-top: 50px;} .messa .meTxt .meName p{font-size: 22px; font-weight: 500; color: #333; font-family: "Open Sans";padding-bottom: 20px;} .messa .meTxt .meName p span{margin-right: 10px;font-size: 36px; font-weight: 600; font-family: "Open Sans";} @media (max-width: 1280px){ .sCont {padding: 60px 0 60px; width: 95%;} .tabBtn {gap: 10px; transition: .3s; margin-bottom: 80px;} .tabBtn li a {padding: 20px;} .messa .meImg{gap: 10px;} .messa .meTxt{margin: -300px 20px 0;} .messa .meImg .meiWrap img { width: 100%; height: 100% !important; /* 높이도 꽉 채움 */ object-fit: cover; /* 비율 유지하며 빈틈없이 채움 */ } .messa .meTxt h3>b { opacity: .4; } .messa .meTxt h3>b::before { height: 0; } } @media (max-width: 1024px){ .messa .meTxt{padding: 50px 40px;} .messa .meTxt h3{font-size: 38px; line-height: 52px;} .messa .meTxt h3 span b:after{font-size: 38px;} } @media (max-width: 768px){ .sCont {padding: 40px 0 40px;} .tabBtn { width: 95%; margin: 0 auto;margin-bottom: 60px;} .tabBtn li a {padding: 15px; font-size: 16px;} .messa .meImg .meiWrap {clip-path: none; height: 350px;} .messa .meTxt{padding: 30px 25px; border-radius: 10px; margin: -280px 10px 0;} .messa .meTxt h3{padding-bottom: 20px; font-size: 24px; line-height: 32px;} .messa .meTxt h3 span b:after{font-size: 24px;} .messa .meTxt ul li{font-size: 18px; line-height: 24px;} .messa .meTxt ul li+li{margin-top: 15px;} .messa .meTxt .meName p{font-size: 18px;} .messa .meTxt .meName p span{font-size: 18px;} .messa .meTxt h3>b {font-size: 80px;} } @media (max-width: 480px){ .tabBtn {margin-bottom: 40px;} .messa .meImg{position: static; padding-bottom: 30px;} .messa .meImg .meiWrap {height: 220px;} /* .messa .meImg .meiWrap{border-radius: 10px;} */ .messa .meTxt {padding-left: 10px; padding-right: 10px; margin: -100px 10px 0;} .messa .meTxt .meName {padding-top: 30px; margin-top: 30px} /* .messa .meTxt{margin: 0; padding: 0; box-shadow: none;} */ } /* --------------- 두번째 --------------- */ #greeting{position:relative;padding-bottom: 100px;word-break: keep-all;} #greeting .inner{max-width:1400px;} #greeting .inner .intro-title{padding: 35px 0 30px 40px; font-size: 32px; color: #333; font-family: 'pretendard';} #greeting .inner .intro-title span{display: block; padding: 20px 0; font-family: 'Oxanium'; line-height:1;font-weight: 600;background: linear-gradient(135deg, #19a6e9 0%, #0b6c99 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;font-size: 80px;} #greeting .inner .bottom-box{background:#fff;border-radius:0;padding:0;} #greeting .inner .bottom-box .text-area{display:block;} #greeting .inner .bottom-box .text-area .flex-wr{display:flex;margin-top: 0;align-items: stretch;gap: 0;} /* 좌측 프로필 영역 */ #greeting .inner .bottom-box .text-area .profile-card{flex-shrink:0;width: 380px;border-radius:0;box-shadow:none;position:relative;overflow:visible;display:flex;flex-direction:column;justify-content: flex-start;align-items:center;} #greeting .inner .bottom-box .text-area .profile-card .prof-img{clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);width: 340px;height:auto;overflow:hidden;margin-bottom:0;position:relative;z-index: 10;} #greeting .inner .bottom-box .text-area .profile-card .prof-img img{width:100%;height:auto;object-fit:cover;} /* 우측 콘텐츠 영역 */ #greeting .inner .bottom-box .text-area .txt{flex:1;padding: 65px 70px 65px 120px;background: #fafafa;position:relative;margin-left: -80px;} #greeting .inner .bottom-box .text-area p{font-size: 20px;line-height: 1.8;letter-spacing: -0.5px;text-align: left;font-weight: 500;color: #555;word-break: keep-all;font-family: 'pretendard';} #greeting .inner .bottom-box .text-area p + p{margin-top:28px;} /* #greeting .inner .bottom-box .text-area p:last-child{margin-top:40px;font-weight:500;color:#1c2c73;} */ .mList{padding: 20px;} .mList dl{display: flex;} .mList dl dt{width: 20px; font-size: 20px; color: #60d0b7; padding-top: 5px;} .mList dl dd{width: calc(100% - 20px);} .mList dl dd p{color: #999 !important;} /* 서명 영역 */ #greeting .inner .bottom-box .text-area .txt .signature-info{text-align:right;margin-top:60px;padding-top:40px;border-top:1px solid #e8e8e8;} #greeting .inner .bottom-box .text-area .txt .signature-info .date{font-size:16px;color:#888;margin-bottom:15px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-name{font-size: 24px;color:#1c2c73;font-weight: 500;letter-spacing:-.5px;font-family: 'Oxanium'; font-weight: 600;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title{font-size: 28px;color: #111;margin-top: 16px;font-weight: 700;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title span{font-size: 20px; color: #777; font-weight: 500; display: inline-block; padding-right: 8px; font-family: 'pretendard';} /* Highlight Animation */ #greeting .hl{position:relative;display:inline-block;font-weight:600;background:linear-gradient(90deg, #1aa7ec 50%, #bbb 50%) no-repeat;background-size:0% 100%;background-position:left;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:background-size 0.8s cubic-bezier(0.4, 0, 0.2, 1);} #greeting .hl.active{background-size:200% 100%;} @media (max-width: 1170px){ #greeting{padding-bottom: 80px;} #greeting .inner .intro-title{font-size:36px;padding: 30px 0 25px 30px;} #greeting .inner .bottom-box .text-area .profile-card{width:320px;} #greeting .inner .bottom-box .text-area .profile-card .prof-img{width:280px;} #greeting .inner .bottom-box .text-area .txt{padding:50px 60px 50px 100px;margin-left:-60px;} #greeting .inner .bottom-box .text-area p{font-size: 18px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-name{font-size: 20px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title{font-size: 26px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title span{font-size: 18px;} #greeting .inner .intro-title span {font-size : 60px} } @media (max-width: 991px){ #greeting{padding-bottom: 70px;} #greeting .inner .intro-title{font-size:32px;padding: 25px 0 20px 16px;} #greeting .inner .bottom-box .text-area .profile-card{width:280px;} #greeting .inner .bottom-box .text-area .profile-card .prof-img{width:240px;box-shadow: 0 10px 28px #ccd0d3;} #greeting .inner .bottom-box .text-area .txt{padding: 40px 40px 40px 65px;margin-left:-50px;} #greeting .inner .bottom-box .text-area p{font-size: 18px;line-height: 1.7;} #greeting .inner .bottom-box .text-area p + p{margin-top:24px;} #greeting .inner .bottom-box .text-area .txt .signature-info{margin-top: 50px; padding-top: 30px;} } @media (max-width: 767px){ #greeting{padding-bottom: 50px;} .mList {padding: 10px;} #greeting .inner .intro-title{font-size: 30px;padding: 20px;line-height: 1.35;} #greeting .inner .intro-title br{display:none;} #greeting .inner .intro-title span {font-size: 42px;} #greeting .inner .bottom-box .text-area .flex-wr{flex-direction:column;} #greeting .inner .bottom-box .text-area .profile-card{width:100%;align-items:center;margin-bottom:30px;} #greeting .inner .bottom-box .text-area .profile-card .prof-img{width:240px;box-shadow: 0 8px 24px #ccd0d3;} #greeting .inner .bottom-box .text-area .txt{padding: 35px 35px 45px 35px;margin-left:0;border-radius: 15px;} #greeting .inner .bottom-box .text-area p{} #greeting .inner .bottom-box .text-area p + p{margin-top: 20px;} #greeting .inner .bottom-box .text-area p:last-child{margin-top:3px;} #greeting .inner .bottom-box .text-area .txt .signature-info{margin-top: 40px;padding-top:30px;} #greeting .inner .bottom-box .text-area .txt .signature-info .date{font-size:15px;margin-bottom:12px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-name{font-size:22px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title{font-size:24px;margin-top:12px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title span{font-size: 18px;} } @media (max-width: 480px){ #greeting{padding-bottom: 40px;} #greeting .inner .intro-title{font-size: 20px;padding: 10px;} #greeting .inner .intro-title span {font-size: 28px;} #greeting .inner .bottom-box .text-area .profile-card{margin-bottom: 22px;} #greeting .inner .bottom-box .text-area .profile-card .prof-img{width:200px;} #greeting .inner .bottom-box .text-area .txt{padding: 20px;} #greeting .inner .bottom-box .text-area p{line-height:1.7;font-size: 18px;} #greeting .inner .bottom-box .text-area p + p{margin-top: 18px;} #greeting .inner .bottom-box .text-area .txt .signature-info{margin-top:40px;padding-top:25px;} #greeting .inner .bottom-box .text-area .txt .signature-info .date{font-size:14px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-name{font-size:20px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title{font-size:22px;} #greeting .inner .bottom-box .text-area .txt .signature-info .sign-title span{font-size: 18px;} } /* -------------------------------- sub1_2 : Mission & Vision -------------------------------- */ /* 타이틀 */ .mvTitle{position: relative; margin-bottom: 50px; display: flex; justify-content: center;} .mvTitle h2{position: relative; text-align: center; font-size: 22px; font-weight: 600; color: #003087;font-family: 'pretendard';} /* Sub2_1 : Research Overview */ .reOv .part1{text-align: center;} .reOv .part1 .rp1Bg{height: 500px; background: url('../images/sub/rp1_bg.jpg') 0 0 no-repeat; background-attachment: fixed; background-size: cover;} .reOv .part1 .inArea{margin: -250px auto 0!important; padding: 100px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-radius: 20px 20px 0 0; clip-path: polygon(5% 0, 95% 0, 100% 15%, 100% 100%, 0 100%, 0 15%);} .reOv .part1 h3{font-size: 48px; font-family:"Montserrat"; } .reOv .part1 h3 b{font-weight: 700; color: rgb(0, 0, 0, .08);} .reOv .part1 h3 b:after{font-size: 48px; color: #1aa7ec;} .reOv .part1 p{padding-top: 30px; font-size: 20px; line-height: 32px; font-weight: 500; color: #555; word-break: keep-all;font-family: "Open Sans";} .reOv .part2{position: relative; padding: 100px 0 120px; text-align: center;} .reOv .part2:before{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 75px; height: 2px; background: #eee;} .reOv .part2 .rp2Tit{padding-bottom: 45px;} .reOv .part2 .rp2Tit h3{font-size: 38px; line-height: 56px; color: #222;} .reOv .part2 .rp2Tit h3 b{font-weight: 700; color: rgb(0, 0, 0, .08);} .reOv .part2 .rp2Tit h3 b:after{font-size: 38px; color:#333;} .reOv .part2 .rp2Tit h3 b:nth-last-child(2):after{transition-delay: 0.2s;} .reOv .part2 .rp2Wrap{display: flex; gap: 16px;} .reOv .part2 .rp2Box{width: calc(100% / 3 - 8px); padding: 50px 35px; border-radius: 20px; border: 5px solid #f9f9f9;} .reOv .part2 .rp2Box .rp2Icon{display: flex; justify-content: center; align-items: center; position: relative; width: 170px; height: 170px; margin: 0 auto; background: #003087; border-radius: 50%; box-shadow: 5px 9px 20px rgb(6, 25, 61, .3);} .reOv .part2 .rp2Box .rp2Icon:before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 1px solid #eee; border-radius: 50%;} .reOv .part2 .rp2Box .rp2Icon i{font-size: 46px; color: #fff;} .reOv .part2 .rp2Box .rp2Txt h5{padding: 35px 0 10px; font-size: 24px; font-weight: 700; color:#003087;} .reOv .part2 .rp2Box .rp2Txt p{font-size: 19px; line-height: 24px; color: #333;font-family: 'pretendard';} .reOv .part3{position: relative; overflow: hidden; min-height: 100vh;} .reOv .part3 .rp3Tit{position: absolute; top: 0; left: 50%; width: 50%; padding: 100px 90px 0;} .reOv .part3 .rp3Tit h5{font-size: 42px;} .reOv .part3 .rp3Tit h5 b{font-weight: 700; color: rgba(0,0,0,.08);} .reOv .part3 .rp3Tit h5 b:after{font-size: 42px; color:#1aa7ec;} .reOv .part3 .rp3Tit p{padding-top: 12px; font-size: 20px; line-height: 30px; font-weight: 500; color: #555;} .reOv .part3 .rp3Box{position: absolute; padding: 10px 20px; background: #fff; border-radius: 100px; box-shadow: 0 0 20px 0 rgba(0,0,0,.1);} .reOv .part3 .rp3Box p{position: relative; font-size: 14px; font-weight: 500; color: #222;} .reOv .part3 .rp3Box p:after{content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%;} .reOv .part3 .rp3Box p:before{content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; animation: repm 3s infinite;} @keyframes repm{ from{width: 18px; height: 18px;} to{transform: translateX(-50%) scale(14); opacity: 0;} } .reOv .part3 .rp3Box.rp3Box1{top: 56%; left: 3%;} .reOv .part3 .rp3Box.rp3Box1 p:after{background: #569aff;} .reOv .part3 .rp3Box.rp3Box1 p:before{background: rgb(86, 154, 255, 0.4);} .reOv .part3 .rp3Box.rp3Box2{top: 53%; left: 17%;} .reOv .part3 .rp3Box.rp3Box2 p:after{background: #01caaa;} .reOv .part3 .rp3Box.rp3Box2 p:before{background: rgb(1, 202, 170, 0.4);} .reOv .part3 .rp3Box.rp3Box3{top: 58%; left: 20%;} .reOv .part3 .rp3Box.rp3Box3 p:after{background: #1a396f;} .reOv .part3 .rp3Box.rp3Box3 p:before{background: rgb(26, 57, 111, 0.4);} .reOv .part3 .rp3Box.rp3Box4{top: 43%; left: 24%;} .reOv .part3 .rp3Box.rp3Box4 p:after{background: #00bcd7;} .reOv .part3 .rp3Box.rp3Box4 p:before{background: rgb(0, 188, 215, 0.4);} .reOv .part3 .rp3Box.rp3Box5{top: 48%; left: 34.5%;} .reOv .part3 .rp3Box.rp3Box5 p:after{background: #1c6dc6;} .reOv .part3 .rp3Box.rp3Box5 p:before{background: rgb(28, 109, 198, 0.4);} .reOv .part3 .rp3Box.rp3Box6{top: 54.5%; left: 36%;} .reOv .part3 .rp3Box.rp3Box6 p:after{background: #f3af02;} .reOv .part3 .rp3Box.rp3Box6 p:before{background: rgb(243, 175, 2, 0.4);} .reOv .part3 .rp3Box.rp3Box7{top: 61%; right: 2.5%;} .reOv .part3 .rp3Box.rp3Box7 p:after{background: #fd200e;} .reOv .part3 .rp3Box.rp3Box7 p:before{background: rgb(253, 32, 14, 0.4);} @media (max-width: 1536px){ .reOv .part1 {margin: 0 auto;} .reOv .part1 .inArea{ margin: -200px 20px 0!important; } .reOv .part2{padding: 100px 20px 120px;} .reOv .part3{padding: 100px 20px; display: flex; flex-wrap: wrap;justify-content: space-between; gap: 50px 0;} .reOv .part3 .rp3Box, .reOv .part3 .rp3Tit{position: relative; top: 0 !important; left: 0 !important; text-align: center;} .reOv .part3>img{position: absolute; top: 0; left: 0; height:100%;} .reOv .part3 .rp3Tit{width: 100%; padding: 0; /*margin-bottom: 50px;*/} .reOv .part3 .rp3Box{width: calc(33.333% - 20px); display: flex; align-items: center; justify-content: center; padding: 20px 30px; min-height: 100px;} .reOv .part3 .rp3Box p{min-height: 100%; display: flex; align-items: center; justify-content: center;} .reOv .part3 .rp3Box p::before, .reOv .part3 .rp3Box p:after{bottom: -30px;} @keyframes repm{ from{width: 18px; height: 18px;} to{transform: translateX(-50%) scale(5); opacity: 0;} } } @media (max-width: 1440px){ .reOv .part1 h3, .reOv .part1 h3 b:after{font-size: 48px;} .reOv .part1 .inArea{margin: -250px 20px 0!important;} .reOv .part1 p{font-size: 16px; line-height: 30px;} .reOv .part2{padding: 100px 20px 120px;} .reOv .part2 .rp2Tit h3, .reOv .part2 .rp2Tit h3 b:after{font-size: 40px;} .reOv .part3 .rp3Tit h5, .reOv .part3 .rp3Tit h5 b:after{font-size: 40px;} .reOv .part2 .rp2Tit h3 b{color:#1aa7ec;} .reOv .part2 .rp2Tit h3 br {display: none;} .reOv .part2 .rp2Tit h3 b:after{display: none;} } @media (max-width: 1280px){ .reOv .part1 h3 b{color:#1aa7ec; font-size: 44px;} .reOv .part1 h3 b:after{display: none;} .reOv .part1 .inArea{padding: 80px;} .reOv .part2{padding: 80px 20px 100px;} .reOv .part2 .rp2Wrap{flex-wrap: wrap; gap: 20px;} .reOv .part2 .rp2Box{width: calc(100%/2 - 10px);} .reOv .part2 .rp2Tit h3, .reOv .part2 .rp2Tit h3 b:after{font-size: 36px; line-height: 50px;} .reOv .part3{padding: 80px 20px;} .reOv .part3 .rp3Tit h5, .reOv .part3 .rp3Tit h5 b:after{font-size: 38px;} .reOv .part3 .rp3Tit p{font-size: 18px; line-height: 28px;} } @media (max-width:1080px) { .reOv .part1 h3 b{font-size: 36px;} .reOv .part1 p{font-size: 14px;} .reOv .part1 .inArea{padding: 50px;} .reOv .part2{padding: 50px 20px 80px;} .reOv .part2:before{width: 55px;} .reOv .part2 .rp2Tit h3, .reOv .part2 .rp2Tit h3 b:after{font-size: 32px; line-height: 46px;} .reOv .part3 .rp3Box{width: calc(50% - 15px);} @keyframes repm{ from{width: 18px; height: 18px;} to{transform: translateX(-50%) scale(3); opacity: 0;} } } @media (max-width: 1024px){ .reOv .part1 .inArea{padding: 50px 30px;} .reOv .part1 h3{font-size: 32px;} .reOv .part1 p{padding-top: 20px; line-height: 28px;} .reOv .part1 h3 b{font-size: 32px;} .reOv .part2:before{width: 45px;} .reOv .part2{padding: 40px 20px 60px;} .reOv .part2 .rp2Tit h3{font-size: 32px; line-height: 38px;} .reOv .part2 .rp2Tit h3 b{color:#1aa7ec;} .reOv .part2 .rp2Tit h3 b:after{display: none;} .reOv .part3{padding: 80px 20px;} } @media (max-width:860px) { .reOv .part1 .inArea{ clip-path: (30px 0, 100% 0, 100% calc(100%-30px), 100% 100%, 0 100%, 0 30px);} .reOv .part1 .rp1Bg{height: 350px;} .reOv .part1 h3{font-size: 28px; line-height: 34px;} .reOv .part2 .rp2Tit h3{font-size: 22px; line-height: 28px;} .reOv .part1 p, .reOv .part2 .rp2Box .rp2Txt p, .reOv .part3 .rp3Tit p{font-size: 14px;line-height: 20px;} .reOv .part2 .rp2Box .rp2Txt h5{font-size: 20px;} .reOv .part2 .rp2Box .rp2Icon{width: 100px; height: 100px;} .reOv .part2 .rp2Box .rp2Icon:before{width: 120px; height: 120px;} .reOv .part3{padding: 50px 20px;} .reOv .part3 .rp3Tit h5, .reOv .part3 .rp3Tit h5 b:after{font-size: 32px;} .reOv .part3 .rp3Box{min-height: 90px;} .reOv .part3 .rp3Tit{margin-bottom: 0;} .reOv .part1 h3 b{font-size: 24px;} } @media (max-width: 640px){ .reOv .part1 .inArea{margin: -250px 15px 0!important;} .reOv .part2 .rp2Box{width: 100%; padding: 40px 30px;} .reOv .part3 .rp3Box{width: 100%;} .reOv .part2 {padding: 30px 10px 40px;} } @media (max-width: 520px){ .reOv .part1 h3 b{font-size: 28px;} .reOv .part2 .rp2Tit h3{font-size: 20px; line-height: 26px;} .reOv .part2 .rp2Box .rp2Icon:before{width: 100px; height: 100px;} .reOv .part2 .rp2Box .rp2Icon{width: 80px; height: 80px;} .reOv .part2 .rp2Box .rp2Icon i{font-size: 30px;} .reOv .part2 .rp2Box .rp2Txt h5{font-size: 18px;} .reOv .part1 p, .reOv .part2 .rp2Box .rp2Txt p, .reOv .part3 .rp3Tit p{font-size: 18px; line-height: 19px;} .reOv .part3 .rp3Tit h5, .reOv .part3 .rp3Tit h5 b:after{font-size: 28px;} .reOv .part3 .rp3Box p{font-size: 18px;} } @media (max-width: 440px){ .reOv .part1 .inArea{padding: 50px; clip-path: (15px 0, 15px 0, 100% calc(100%-15px), 100% 100%, 0 100%, 0 15px);} .reOv .part2:before{width: 30px;} .reOv .part2 .rp2Tit{padding-bottom: 30px;} .reOv .part2 .rp2Tit h3{font-size: 18px; line-height: 23px;} .reOv .part3 .rp3Tit h5, .reOv .part3 .rp3Tit h5 b:after{font-size: 24px;} } /* .edOv{margin-top: 150px;} */ .edOv .edTit{position: relative; padding: 20px 0 150px; text-align: center;} .edOv .edTit span{position: absolute; top: -10px; left: 0; width: 100%; font-family:'pretendard'; font-size: 150px; color: #f9f9f9; font-weight: 400;} .edOv .edTit h5{font-size: 28px; line-height: 40px; font-weight: 500; color: #333;} .edOv .edTit h5 b{color: #ddd;} .edOv .edTit h5 b:after{font-size: 28px; color: #1aa7ec;} .edOv .edTit h5.txtslide.active b:nth-of-type(2):after{transition-delay: 0.2s;} .edOv .edTit h5.txtslide.active b:nth-of-type(3):after{transition-delay: 0.4s;} .edOv .edWrap{position: relative;} .edOv .edWrap .lineGuide{position: absolute; width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%); background: #eee;} .edOv .edWrap .lineGuide .progress{position: absolute; width: 100%; height: 100%; top: 0; left: 50%; transform: translateX(-50%); background: #1aa7ec;} .edOv .edWrap .edBox{display: flex; position: relative; margin-bottom: 100px; overflow: hidden;} .edOv .edWrap .edBox:after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #003087;} .edOv .edWrap .edBox .edImg{width: 50%; padding-right: 90px;} .edOv .edWrap .edBox .edImg img{width: 100%;} .edOv .edWrap .edBox .edTxt{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .edOv .edWrap .edBox .edTxt .inArea{display: flex; justify-content: end; align-items: center; height: 100%; max-width: 1420px; margin: auto;} .edOv .edWrap .edBox .edTxt .edInner{width: 50%; padding-left: 90px;} .edOv .edWrap .edBox .edTxt h5{padding-bottom: 30px; font-size: 38px; line-height: 50px; font-weight: 700;} .edOv .edWrap .edBox .edTxt h5 b{font-weight: 700; color: #ddd;} .edOv .edWrap .edBox .edTxt h5 b:after{font-size: 38px; color: #003087;} .edOv .edWrap .edBox .edTxt p{font-size: 20px;line-height: 30px;font-weight: 500;color: #333; font-family: "Open Sans";} .edOv .edWrap .edBox .edTxt p+p{margin-top: 20px;} .edOv .edWrap .edBox.edBox2{flex-direction: row-reverse;} .edOv .edWrap .edBox.edBox2 .edImg{padding: 0 0 0 90px;} .edOv .edWrap .edBox.edBox2 .edInner{margin: 0 50% 0 0; padding: 0 90px 0 0;} .edOv .edWrap .edBox.edBox3:before{content: ''; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); width: 2px; height: 50%; background: #fff;} @media (max-width: 1536px){ .edOv .edWrap .edBox .edImg{padding-right: 60px;} .edOv .edWrap .edBox .edTxt .edInner{padding-left: 60px;} .edOv .edWrap .edBox.edBox2 .edImg{padding: 0 0 0 60px;} .edOv .edWrap .edBox.edBox2 .edInner{padding: 0 60px 0 0;} } @media (max-width: 1280px){ .edOv {width: 95%; margin: 0 auto;} .edOv .edWrap .dnCont .lineGuide{display: none;} .edOv .edWrap .edBox{display: block;} .edOv .edWrap .edBox:after{display: none;} .edOv .edWrap .edBox .edImg{width: 100%; padding: 0!important; border-radius: 20px; overflow: hidden;} .edOv .edWrap .edBox .edTxt{position: static; padding-top: 60px; text-align: center;} .edOv .edWrap .edBox .edTxt .edInner{width: 100%; padding: 0;} .edOv .edWrap .edBox.edBox2 .edInner{margin: 0;} } @media (max-width: 1024px){ .edOv .edWrap .edBox .edTxt h5{font-size: 32px; line-height: 42px;} .edOv .edWrap .edBox .edTxt h5 b:after{font-size: 32px;} } @media (max-width: 768px){ .edOv .edWrap .edBox{margin-bottom: 60px;} .edOv .edWrap .edBox .edImg{border-radius: 10px;} .edOv .edWrap .edBox .edTxt{padding-top: 35px;} .edOv .edWrap .edBox .edTxt h5{padding-bottom: 20px; font-size: 26px; line-height: 32px;} .edOv .edWrap .edBox .edTxt h5 b:after{font-size: 26px;} .edOv .edWrap .edBox .edTxt p{font-size: 18px; line-height: 24px;} .edOv .edWrap .edBox .edTxt p+p{margin-top: 10px;} } /* -------------------------------- sub1_3 : Organization -------------------------------- */ #sChart .subTit { height: 360px; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/sub/sChart_1.jpg') no-repeat center/cover; background-attachment: fixed; background-size: 80% auto; padding: 40px; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5)); border: 0 none; clip-path: polygon( 40px 0, /* 상단 왼쪽 시작점 */ calc(100% - 40px) 0, /* 상단 오른쪽 */ 100% 40px, /* 우측 상단 */ 100% calc(100% - 40px), /* 우측 하단 */ calc(100% - 40px) 100%, /* 하단 오른쪽 */ 40px 100%, /* 하단 왼쪽 */ 0 calc(100% - 40px), /* 좌측 하단 */ 0 40px /* 좌측 상단 */ ); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } #sChart .table { border-top: none; } #sChart .table_wrap_view { width: 100%; margin-top: 10px; color: #333; } #sChart .table_wrap_view h4 { font-size: 34px; font-weight: 700; color: #003087; margin-top: 80px; margin-bottom: 8px; text-align: center; font-family: "Montserrat"; } #sChart .table_wrap_view > p { font-size: 18px; color: #666; margin-bottom: 10px; line-height: 1.5; } #sChart .table_wrap_view h5 { color: #9c9c9c; font-weight: 600; font-size: 18px; font-family: "Montserrat"; } #sChart .table_wrap_view table { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 2px solid #343536 !important; border-bottom: 1px solid #e0e0e0; border-left: 0; border-right: 0; margin-bottom: 20px; margin-top: 40px; } #sChart .table_wrap_view .section-group:nth-child(3) table { margin-top: 15px; } #sChart .table_wrap_view .section-group:nth-child(3) .no-bg { margin-top: 30px; } /* #sChart .table_wrap_view table.no-bg tbody th, #sChart .table_wrap_view table.no-bg thead th { background-color: #fff !important; } */ #sChart .table_wrap_view th, #sChart .table_wrap_view td, #sChart .table_wrap_view ul, #sChart .table_wrap_view li { margin: 0; padding: 0; } #sChart .table_wrap_view th, #sChart .table_wrap_view td { border: 1px solid #e0e0e0; padding: 40px 10px; vertical-align: middle; line-height: 1.6; font-size: 18px; color: #444; } #sChart .table_wrap_view tr > th:first-child, #sChart .table_wrap_view tr > td:first-child { border-left: 0; } #sChart .table_wrap_view tr > th:last-child, #sChart .table_wrap_view tr > td:last-child { border-right: 0; } #sChart .table_wrap_view thead th { background-color: #f9f9f9; font-size: 18px; font-weight: 600; color: #222; text-align: center; padding: 20px 10px; } #sChart .table_wrap_view tbody th { background-color: #f9f9f9; font-weight: 600; text-align: center; color: #9c9c9c; word-break: break-word !important; white-space: normal !important; } #sChart .table_wrap_view tbody td { text-align: center; } #sChart .table_wrap_view tbody td p { word-break: keep-all; font-weight: 600; font-family: "Open Sans"; } #sChart .table_wrap_view tbody td ul { text-align: left; list-style: none; padding-left: 5px; } #sChart .table_wrap_view tbody td ul li { position: relative; padding-left: 25px; margin-bottom: 5px; color: #555; font-weight: 600; font-family: "Open Sans"; } #sChart .table_wrap_view tbody td ul li::before { content: ""; display: block; width: 4px; height: 4px; background-color: #b9b7b7; border-radius: 50%; position: absolute; left: 10px; top: 13px; } #sChart .table_wrap_view .h4-1 { font-size: 18px; color: #9e9e9e; text-align: center; font-family: 'pretendard'; font-weight: 500; } #sChart .table_wrap_view .h4-2 { font-size: 16px; color: #b4b4b4; font-family: 'pretendard'; font-weight: 500; margin-top:30px; display: flex; justify-content: flex-end; } #sChart .sum li { font-size: 16px; font-weight: 500; margin-top: 8px; margin-left: 12px; display: flex; font-family: "Open Sans"; font-weight:600; position: relative; } #sChart .sum li::before { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: #9c9c9c; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); } #sChart .sum li > span { color: #9c9c9c; margin-right: 5px; } #sChart .sum_wrap { margin-top: 80px; } #sChart .scroll-reveal { opacity: 1 !important; transform: none !important; } #sChart .section-group h4, #sChart .section-group p, #sChart .section-group table, #sChart .section-group .h4-2 { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); } #sChart .sum_wrap { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); } #sChart .section-group.active h4 { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } #sChart .section-group.active p:not(.h4-2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; } #sChart .section-group.active .h4-2, #sChart .section-group.active table { opacity: 1; transform: translateY(0); transition-delay: 0.5s; font-family: "Open Sans"; } #sChart .sum_wrap.active { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } /* 스크립트 탭 */ .custom-tab-menu { display: flex; justify-content: center; gap: 15px; margin-top: 20px; margin-bottom: 40px; border-bottom: none } .tab-btn { flex: 1; max-width: 300px; padding: 15px 10px; font-size: 16px; font-weight: 500; color: #888; background: #fff; border: 1px solid #ddd; cursor: pointer; transition: all 0.3s ease; text-align: center; white-space: nowrap; box-sizing: border-box; } .tab-btn:hover { background-color: #f9f9f9; color: #001f5c; border-color: #bbb; } .tab-btn.active { background-color: #001f5c; color: #fff; border-color: #001f5c; font-weight: 700; } @media (max-width: 1850px) { #sChart .subTit { background-size: cover; } #sChart .section-group.active .h4-2 {word-break: keep-all;} #sChart .section-group.active h4, #sChart .section-group.active .h4-1 {word-break: keep-all;} } @media (max-width: 1240px) { #sChart .subTit { height: 300px; background-size: cover; padding: 30px; } #sChart .subTit h3 { font-size: 38px !important; } #sChart .subTit p {word-break: keep-all;} #sChart .subTit p br {display: none;} #sChart .table_wrap_view h4 { font-size: 28px; margin-top: 60px; } #sChart .table_wrap_view th, #sChart .table_wrap_view td { padding: 30px 15px; font-size: 18px; } } /* 2. 일반 태블릿 (1024px 이하) */ @media (max-width: 1024px) { #sChart .subTit { height: 250px; clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px); /* 클립패스 수치 축소 */ } #sChart .subTit h3 { font-size: 32px !important; margin-top: 0 !important; } #sChart .subTit p { font-size: 18px; margin-top: 10px; } #sChart .table_wrap_view table { margin-top: 25px; } #sChart .table_wrap_view th, #sChart .table_wrap_view td { padding: 25px 10px; font-size: 18px; } } /* 768px 이하 모바일 구간에서만 작동 */ @media (max-width: 768px) { #sChart .subTit {clip-path: none; height: 300px; padding: 30px 40px; filter: none; text-align: center;} #sChart .subTit p {font-size: 16px; line-height: 1.4 !important; text-align: center;} #sChart .subTit h3 { font-size: 28px !important; margin-top: 0 !important; text-align: center; margin: 0 auto;} #sChart .section-group h4, #sChart .section-group p { width: 100%; transform: none; } #sChart .section-group .h4-2 { justify-content: flex-start; margin-bottom: 8px; } #sChart .subTit p {color: #ecebeb !important;} #sChart .table-scroll-box { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 auto; margin-top: 20px; width: 95%; } #sChart .table-scroll-box table { min-width: 750px !important; margin-top: 0 !important; } #sChart .table-scroll-box::-webkit-scrollbar { height: 6px; } #sChart .table-scroll-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } #sChart .table-scroll-box::-webkit-scrollbar-thumb { background: #babec0; border-radius: 10px; } #sChart .sum li {display: flex; flex-direction: column;} #sChart .sum li::before {top:12px;} .custom-tab-menu { flex-direction: column; border-bottom: none; } .custom-tab-menu { flex-direction: column; gap: 10px; } .tab-btn { width: 100%; max-width: 100%; } } @media (max-width: 480px) { #sChart .subTit { padding: 30px 20px; height: 380px;} #sChart .subTit h3 { font-size: 26px !important; } } /* Sub4_1 : Education Overview */ .euguide h3{margin-bottom: 50px; text-align: center; font-size: 36px; font-weight: 500;} .euguide h3 b{color: #ddd;} .euguide h3 b:after{font-size: 36px; color: #1aa7ec;} .euguide .part1 .ep1Box{display: flex; align-items: center; padding: 75px; border-radius: 30px;} .euguide .part1 .ep1Box .ep1Icon{display: flex; justify-content: center; align-items: center; position: relative; width: 150px; aspect-ratio: 1/1; margin: 0 auto; background: #333; border-radius: 50%; box-shadow: 5px 9px 30px rgba(0,0,0,.3);} .euguide .part1 .ep1Box .ep1Icon:before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 1px solid #e8e8e8; border-radius: 50%;} .euguide .part1 .ep1Box .ep1Icon i{font-size: 46px; color: #fff;} .euguide .part1 .ep1Box .ep1Txt{width: calc(100% - 200px); padding-left: 60px;} .euguide .part1 .ep1Box .ep1Txt h4{padding-bottom: 10px; font-size: 20px; color: #1aa7ec;} .euguide .part1 .ep1Box .ep1Txt p{font-size: 18px; line-height: 26px; font-weight: 500; color: #444;} .euguide .part1 .ep1Box:nth-child(odd){background: #f9f9f9;} .euguide .part1 .ep1Box2 .ep1Icon i{font-size: 36px;} .euguide .part1 .ep1Box2 .ep1Icon i+i{margin-left: 5px;} .euguide .part1 .ep1Box2 .ep1Icon i:nth-child(2){transform: scaleX(-1);} .euguide .part2{padding: 90px 0;} .euguide .part2 .ep2Cont{padding: 65px; background: #f9f9f9; border-radius: 30px;} .euguide .part2 .ep2Cont ul li{position: relative; padding-left: 25px; font-size: 18px; line-height: 26px; color: #333;} .euguide .part2 .ep2Cont ul li+li{margin-top: 10px;} .euguide .part2 .ep2Cont ul li i{position: absolute; top: 0; left: 0; font-size: 18px; color: #1aa7ec;} .euguide .part2 .ep2Cont ul li p{position: relative; padding-left: 15px;} .euguide .part2 .ep2Cont ul li p:before{content: ''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #aaa;} .euguide .part3 .ep3Cont{text-align: center;} .euguide .part3 .ep3Cont h5{display: inline-block; padding: 20px 50px; font-size: 20px; color: #fff; background: #222; border-radius: 100px;} .euguide .part3 .ep3Cont p{padding-top: 40px; font-size: 18px; font-weight: 500; color: #444;} @media (max-width:1440px) { .edOv .edTit span{font-size: 120px;} .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 26px;} .edOv .edTit h5{line-height: 40px;} .euguide .part1 .ep1Box .ep1Icon{width: 150px; box-shadow: 5px 9px 20px rgba(0, 0, 0, .3);} .euguide .part1 .ep1Box .ep1Icon:before{width: 180px; height: 180px;} .euguide .part1 .ep1Box .ep1Icon i{font-size: 40px;} .euguide .part2 .ep2Cont{padding: 55px;} } @media (max-width:1280px) { .edOv .edTit span{font-size: 100px;} .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 24px;} .edOv .edTit h5{line-height: 38px;} .edOv .edTit{padding: 0 0 100px;} .edOv .edWrap .edBox .edTxt p {word-break: keep-all;} .euguide h3, .euguide h3 b:after{font-size: 34px;} .euguide .part1 .ep1Box{padding: 50px; border-radius: 25px;} .euguide .part1 .ep1Box .ep1Txt h4{font-size: 18px;} .euguide .part1 .ep1Box .ep1Txt p{font-size: 18px; line-height: 24px;} .euguide .part2 .ep2Cont{padding: 50px 40px; border-radius: 25px;} .euguide .part2 .ep2Cont ul li{font-size: 18px;} .edOv .edWrap .lineGuide{display: none;} } @media (max-width:1080px) { .edOv .edTit span{font-size: 85px;} .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 22px;} .edOv .edTit h5{line-height: 34px;} .edOv .edTit{padding: 0 0 100px;} .euguide .part1 .ep1Box .ep1Icon{width: 120px;box-shadow: 3px 7px 20px rgba(0, 0, 0, .3);} .euguide .part1 .ep1Box .ep1Icon:before{width: 150px; height: 150px;} .euguide .part1 .ep1Box .ep1Icon i{font-size: 25px;} .euguide .part1 .ep1Box{padding: 50px 30px; border-radius: 20px;} .euguide .part1 .ep1Box .ep1Txt{padding-left: 20px;} .euguide .part2 .ep2Cont{border-radius: 20px;} } @media (max-width:860px) { .edOv .edTit span{font-size: 78px;} } @media (max-width:768px) { .edOv .edTit span{font-size: 72px; top: -30px;} .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 20px;} .edOv .edTit h5{line-height: 30px;} .edOv .edTit{padding: 0 0 50px;} .edOv .edTit br {display: none;} .euguide .part2{padding: 50px 0;} .euguide h3, .euguide h3 b:after{font-size: 26px; margin-bottom: 20px;} .euguide .part1 .ep1Box .ep1Icon{width: 100px;box-shadow: 3px 7px 15px rgba(0, 0, 0, .3);} .euguide .part1 .ep1Box .ep1Icon:before{width: 130px; height: 130px;} .euguide .part1 .ep1Box .ep1Icon i{font-size: 20px;} .euguide .part1 .ep1Box{border-radius: 15px;} .euguide .part2 .ep2Cont{padding: 40px 30px; border-radius: 15px;} .euguide .part3 .ep3Cont h5{font-size: 18px;} .euguide .part3 .ep3Cont p{font-size: 18px; padding-top: 20px;} } @media (max-width:680px) { .edOv .edTit span{font-size: 66px;} .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 18px;} .edOv .edTit h5{line-height: 26px;} .euguide .part1 .ep1Box{flex-direction: column;} .euguide .part1 .ep1Box .ep1Txt{padding-left: 0; padding-top: 40px;width: 100%;} .euguide .part1 .ep1Box .ep1Txt h4, .euguide .part1 .ep1Box .ep1Txt p{text-align: center;} .euguide .part1 .ep1Box .ep1Txt p{font-size: 18px;} .euguide .part2 .ep2Cont ul li{font-size: 18px;} } @media (max-width:610px) { .edOv .edTit span{display: none;} } @media (max-width:550px) { .edOv .edTit h5, .edOv .edTit h5 b:after{font-size: 18px;} .edOv .edTit h5{line-height: 22px;} .edOv .edWrap .edBox .edTxt p{font-size: 18px;} .euguide h3{font-size: 24px;} .euguide h3 b{color: #1aa7ec;} .euguide h3 b:after{display: none;} .euguide .part3 .ep3Cont h5{font-size: 18px; padding: 15px 35px;} } @media (max-width:480px) { .edOv .edWrap .edBox .edTxt h5 b:after{display: none;} .edOv .edWrap .edBox .edTxt h5 b{color: #1aa7ec;} .edOv .edWrap .edBox .edTxt h5{font-size: 20px; line-height: 28px;} .euguide h3{font-size: 22px;} .euguide .part2 .ep2Cont{padding: 30px 20px;} } /* 텍스트 슬라이드 애니메이션 */ .txtslide b { position: relative; display: inline-block; font-family: "Montserrat"; } .txtslide b::after { content: attr(data-label); position: absolute; left: 0; top: 0; width: 0; overflow: hidden; white-space: nowrap; transition: width 0.6s ease; } .txtslide.active b::after { width: 100%; } /* -------------------------------- sub1_3 : Organization -------------------------------- */ #Org{position:relative;} #Org .about-org{position:relative;overflow:hidden;background:#f5f5f5;padding: 80px 2%;text-align:center;display: flex;flex-direction: column;align-items: center;border-radius: 20px;word-break:keep-all;} #Org .about-org .snu-logo{margin: 0px auto 20px;} #Org .about-org .snu-logo > img{/* max-width: 172px; */width: 100%;} #Org .about-org .cirTit{position: relative;/* background: url("/images/sub/org_tit.png") no-repeat 50% bottom; */min-width:431px;width:100%;text-align:center;} #Org .about-org .cirTit span{display: inline-block;} #Org .about-org .cirTit span > img{max-width:100%;} #Org .about-org .cirTit:before{content:"";background:#000;width: 11px;height: 11px;border-radius:50%;display:inline-block;position:absolute;left:50%;bottom: -40px;transform:translate(-50%, 0%);outline:5px solid #f5f5f5;z-index:1;} #Org .about-org .cirTit:after{content:"";background:#ccc;width:2px;height: 360px;display:inline-block;position:absolute;left:50%;top: 165px;transform:translate(-50%, 0%);z-index:0;} #Org .about-org .deb2{position: relative;display: flex;justify-content: space-between;width: 100%;max-width: 900px;margin: 60px auto;align-items: center;} #Org .about-org .deb2:before{content:"";background:#ccc;width: 18%;height:2px;display:inline-block;position:absolute;left: 32%;top:50%;transform: translate(-0%, -50%);z-index:0;} #Org .about-org .deb2 span{padding: 20px;width: 250px;border-radius:50px;font-size: 20px;font-weight: 600;color: #fff;display:inline-block;font-family: 'Paperozi';} #Org .about-org .deb3{position: relative;display: flex;justify-content: space-between;width: 100%;max-width: 900px;margin: 60px auto;align-items: center;} #Org .about-org .deb3:before{content:"";background:#ccc;width: 37%;height:2px;display:inline-block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);z-index:0;} #Org .about-org .deb3 span{padding: 20px;width: 250px;border-radius:50px;font-size: 20px;font-weight: 600;color: #fff;display:inline-block;font-family: 'Paperozi';} #Org .about-org .deb3 .deb3-box{} #Org .about-org .deb3 .deb3-1{} #Org .about-org .box-st2{display: flex;flex-direction: column;gap: 15px;position: relative;} #Org .about-org .deb3 .deb3-1 .box-st2:before{right:-32px;} #Org .about-org .deb3 .deb3-2 .box-st2:before{left:-32px;} #Org .about-org .box-st1 > li{position: relative;} #Org .about-org .box-st1 > li:before{content:"";background: #999999;width: 8px;height: 8px;border-radius:50%;display:inline-block;position:absolute;right: -35px;top: 50%;transform: translate(0%, -50%);outline:5px solid #f5f5f5;z-index:1;} #Org .about-org .box-st2 > li{position: relative;} #Org .about-org .box-st2 > li:before{content:"";background: #999999;width: 8px;height: 8px;border-radius:50%;display:inline-block;position:absolute;right: -35px;top: 50%;transform: translate(0%, -50%);outline:5px solid #f5f5f5;z-index:1;} #Org .about-org .deb3 .deb3-2 .box-st2 > li:before{right:auto; left:-35px;} #Org .about-org .box-st1 > li span{background: #333;} #Org .about-org .box-st2 > li span{background: #0067db;} #Org .about-org .deb4{position: relative;margin-top: 60px;} #Org .about-org .box-st3{display: flex;justify-content: center;gap: 30px;position: relative;flex-wrap: wrap;} #Org .about-org .box-st3:before{content:"";background:#ccc;width: 78%;height:2px;display:inline-block;position:absolute;left:50%;top: -32px;transform:translate(-50%, 0%);z-index:0;} #Org .about-org .box-st3 > li{/* flex: 1 1 15%; */position: relative;width: 17%;cursor: pointer;transition: .3s;} #Org .about-org .box-st3 > li:hover > strong{transform:translateY(-10px);background: #0042c7;} #Org .about-org .box-st3 > li:before{content:"";background: #2ab8b9;width: 8px;height: 8px;border-radius:50%;display:inline-block;position:absolute;left:50%;top: -35px;transform:translate(-50%, 0%);outline:5px solid #f5f5f5;z-index:1;} #Org .about-org .box-st3 > li > strong{transition:.3s;border-radius: 30px;background: #003399;width: 100%;display: flex;justify-content: center;align-items: center;padding: 30px;color: #fff;height: 180px;position: relative;flex-direction: column;gap: 10px;} #Org .about-org .box-st3 > li > strong .icon{width: 90px;height: 90px;border-radius: 50%;filter: invert(100%);} #Org .about-org .box-st3 > li > strong .icon.icon1{background: url("/images/sub/18806037.png") no-repeat 50% 50% / 60px rgb(0,0,0,.1);} #Org .about-org .box-st3 > li > strong .icon.icon2{background: url("/images/sub/18806040.png") no-repeat 50% 50% / 60px rgb(0,0,0,.1);} #Org .about-org .box-st3 > li > strong .icon.icon3{background: url("/images/sub/18806043.png") no-repeat 50% 50% / 60px rgb(0,0,0,.1);} #Org .about-org .box-st3 > li > strong .icon.icon4{background: url("/images/sub/18806021.png") no-repeat 50% 50% / 60px rgb(0,0,0,.1);} #Org .about-org .box-st3 > li > strong .icon.icon5{background: url("/images/sub/521648.png") no-repeat 50% 50% / 60px rgb(0,0,0,.1);} #Org .about-org .box-st3 > li > strong b{font-size: 20px;padding: 0 20px;font-weight: 600;font-family: 'Paperozi';} #Org .about-org .box-st3 > li > .list-Dot{width: 100%;background: #fff;border-radius: 30px;margin-top: 20px;padding: 25px 30px;height: calc(100% - 180px);} #Org .about-org .box-st3 > li > .list-Dot > li{font-size: 16px; line-height: 1.3;} #Org .about-org .box-st3 > li > .list-Dot > li:before{top:6px; border-radius:50%; background:#cb1148;} #Org .about-org .box-st3 > li > .list-Dot > li + li{margin-top:5px;} /* sj 반응형 */ @media (max-width: 1400px) { #Org .about-org .box-st3 {gap: 10px;} #Org .about-org { padding: 80px 1%; } } @media (max-width: 1170px) { #Org .about-org { padding: 60px 4%; } #Org .about-org .box-st3 { gap: 30px; } #Org .about-org .cirTit { min-width: auto; } #Org .about-org .cirTit:after { height: 380px; top: 150px; } #Org .about-org .deb2, #Org .about-org .deb3 { max-width: 100%; } #Org .about-org .deb2 span, #Org .about-org .deb3 span { width: 220px; font-size: 18px; } #Org .about-org .box-st3 > li { width: 30%; } #Org .about-org .box-st3 > li > strong { height: 170px; } } @media (max-width: 767px) { #Org .about-org { padding: 40px 16px; border-radius: 14px; } /* #Org .about-org .cirTit:before, #Org .about-org .cirTit:after { display: none; } */ #Org .about-org .cirTit:after { height: 400px; } #Org .about-org .deb2, #Org .about-org .deb3 { flex-direction: column; gap: 30px; margin: 40px auto; } #Org .about-org .deb2 { margin-top: 80px; } #Org .about-org .deb2:before, #Org .about-org .deb3:before { display: none; } #Org .about-org .cirTit:after { height: 500px; margin-top: 10px; } #Org .about-org .box-st1 > li:before, #Org .about-org .box-st2 > li:before { display: none; } #Org .about-org .deb2 span, #Org .about-org .deb3 span { font-size: 18px; max-width: 300px; padding: 15px 0; } #Org .about-org .deb4 { margin-top: 40px; } #Org .about-org .box-st3 { gap: 16px; } #Org .about-org .box-st3:before { display: none; } #Org .about-org .box-st3 > li { width: 100%; } #Org .about-org .box-st3 > li:before { display: none; } #Org .about-org .box-st3 > li > strong { height: auto; padding: 24px; border-radius: 20px; } #Org .about-org .box-st3 > li > strong .icon { width: 70px; height: 70px; } #Org .about-org .box-st3 > li > strong b { font-size: 18px; text-align: center; } } @media (max-width: 480px) { #Org .about-org .snu-logo img { max-width: 160px; } #Org .about-org .deb2 span, #Org .about-org .deb3 span { font-size: 16px; padding: 16px; } #Org .about-org .box-st3 > li > strong b { font-size: 16px; } } /* -------------------------------- sub1_4 : Collaboration -------------------------------- */ #Goal .about-tit-box .tit{font-size: 32px;margin-bottom: 80px;padding-bottom: 45px;border-bottom: 1px dashed #ddd;} #Goal .list-hyphen{padding-left: 10px;} /* 설립 목적 상단 */ #Goal{position:relative;padding: 0 0 0px 0;} #Goal.sp3-1{} #Goal .dia{border-bottom: 0;} #Goal .sp-view{padding-bottom:100px;} #Goal .sp-top-tit{display:block;position:relative;max-width:1400px;width:100%;margin:0 auto;text-align:right;padding: 0 !important;} #Goal .sp-top-tit .detail-tit{z-index:10;position:absolute;left: 50%;top: 48%;display: inline-block;font-size: 38px;font-weight: 600;color: #111;letter-spacing: 0;transform: translate(-50%, -50%);line-height: 1.3;font-family: "Poppins", sans-serif;} #Goal .sp-top-tit .decorating-txt{display: block;font-size: 300px;font-weight: 600;font-style:normal;color: #f3f7fa;letter-spacing: -10px;line-height: 1.3;font-family: "Poppins", sans-serif;text-align: center;white-space: nowrap;} #Goal .sp-tit-bg{position: relative;margin-top: -90px;height: 360px;display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-start;padding-bottom: 80px;z-index: 10;} #Goal.sub1-2 .sp-tit-bg:before{filter: brightness(0.9);z-index:-1;content:"";position: absolute;left: 50%;margin-left: -45vw;top:0;height:100%;overflow: hidden;background-image: url("/images/main/visual2.jpg");background-attachment: fixed;width: 90vw;background-repeat: no-repeat;background-position: center center;background-size: cover;opacity: 1;border-radius: 50px;} #Goal .sp-tit-bg .area{position:relative;display: flex;z-index:10;font-weight:400;color:#fff;letter-spacing:-0.65px;line-height:1;align-items: flex-end;padding: 0 20px;} #Goal .sp-tit-bg .area big{font-family: 'Paperozi'; font-size: 50px;font-weight:600;text-transform:uppercase;margin-right: 40px;} #Goal .sp-tit-bg .area small{font-size:24px;font-weight:normal;} /* site wrap */ .site_wrap ul { display: flex; gap: 20px; justify-content: space-between; margin: 0; } .site_wrap ul li { flex: 1; min-width: 0; } .site_wrap ul a { display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; border-radius: 15px; background-color: #00468C; text-decoration: none; transition: all 0.3s ease; border: 1px solid transparent; } .site_wrap ul a:hover { transform: translateY(-5px); background-color: #00468C; box-shadow: 0 10px 20px rgba(0,0,0,0.2); border-color: #0056ff; } .site_wrap ul a img { max-width: 80%; height: auto; display: block; transition: transform 0.3s ease; } .site_wrap ul a:hover img { transform: scale(1.07); } @media (max-width: 1024px) { .site_wrap ul { flex-wrap: wrap; } .site_wrap ul li { flex: none; width: calc(50% - 10px); } } @media (max-width: 600px) { .site_wrap ul li { width: 100%; } .site_wrap ul a { height: 150px; } } @media (max-width: 1400px){ #Goal .about-tit-box .tit{font-size: 30px;margin-bottom: 70px;padding-bottom: 40px;} #Goal .sp-top-tit .decorating-txt{font-size: 250px;letter-spacing: -8px;} #Goal .sp-top-tit .detail-tit{font-size: 36px;} #Goal .sp-tit-bg .area{width: 90%;justify-content: center;align-items: center;flex-direction: column;gap: 15px;margin: 0 auto;} #Goal .sp-tit-bg .area big{font-size: 40px;margin-right: 0;} #Goal .sp-tit-bg .area small{font-size: 22px;font-size: 20px;line-height: 1.5;text-align: center;} } @media (max-width: 1300px){ #Goal .about-tit-box .tit{font-size: 28px;margin-bottom: 60px;padding-bottom: 35px;} #Goal .sp-view{padding-bottom:80px;} #Goal .sp-top-tit .decorating-txt{font-size:200px;letter-spacing: -6px;} #Goal .sp-top-tit .detail-tit{font-size: 32px;} #Goal .sp-tit-bg{margin-top: -60px;height: 300px;padding-bottom: 0;justify-content: center;} #Goal.sp3-1 .sp-tit-bg:before, #Goal.sub1-2 .sp-tit-bg:before{border-radius: 40px;} } @media (max-width: 991px){ #Goal .about-tit-box .tit{font-size: 26px;margin-bottom: 50px;padding-bottom: 30px;} #Goal .sp-view{padding-bottom:60px;} #Goal .sp-top-tit .decorating-txt{font-size:150px;letter-spacing: -5px;} #Goal .sp-top-tit .detail-tit{font-size: 28px;} #Goal .sp-tit-bg{margin-top: -50px;height: 280px;} #Goal.sp3-1 .sp-tit-bg:before, #Goal.sub1-2 .sp-tit-bg:before{border-radius: 30px;width: 95vw;margin-left: -47.5vw;} #Goal .sp-tit-bg .area big{font-size: 36px;margin-right: 0;} #Goal .sp-tit-bg .area small{} } @media (max-width: 767px){ #Goal .about-tit-box .tit{font-size: 22px;margin-bottom: 40px;padding-bottom: 25px;} #Goal .list-hyphen{padding-left: 5px;} #Goal .sp-view{padding-bottom: 40px;} #Goal .sp-top-tit .decorating-txt{font-size: 80px;letter-spacing: -3px;line-height: 1.1;} #Goal .sp-top-tit .detail-tit{font-size: 20px; text-align: center; width: 100%;line-height: 1.4;} #Goal .sp-tit-bg{margin-top: 0;height: 200px;padding:30px 20px;justify-content: center;align-items: center;} #Goal .sp-tit-bg .area{align-items: center;flex-direction: column;gap: 8px;padding: 0;} #Goal.sub1-2 .sp-tit-bg:before, #Goal.sp3-1 .sp-tit-bg:before{background-size:cover;border-radius:15px;background-attachment:unset;} #Goal .sp-tit-bg .area big{font-size: 24px;margin: 0;} #Goal .sp-tit-bg .area small{font-size: 16px;} } @media (max-width: 480px){ #Goal .about-tit-box .tit{font-size: 20px;margin-bottom: 30px;padding-bottom: 20px;} #Goal .sp-view{padding-bottom: 35px;} #Goal .sp-top-tit .decorating-txt{font-size: 60px;letter-spacing: -2px;} #Goal .sp-top-tit .detail-tit{font-size: 18px;padding: 0 15px;} #Goal .sp-tit-bg{padding:25px 15px;} #Goal.sub1-2 .sp-tit-bg:before, #Goal.sp3-1 .sp-tit-bg:before{} #Goal .sp-tit-bg .area big{font-size: 22px;} #Goal .sp-tit-bg .area small{font-size: 16px;} } @media (max-width: 380px){ #Goal .about-tit-box .tit{font-size: 18px;margin-bottom: 25px;padding-bottom: 18px;} #Goal .sp-top-tit .decorating-txt{font-size: 50px;} #Goal .sp-top-tit .detail-tit{} #Goal .sp-tit-bg{padding:20px 10px;} #Goal .sp-tit-bg .area big{font-size: 20px;} #Goal .sp-tit-bg .area small{font-size: 15px;} } /* ------- 전공소개 다이어그램 ------- */ /* ----------------------- 기대효과 ------------------------ */ #Purpose-dia{position: relative; padding-top: 70px;} #Purpose-dia .cent{position: absolute; z-index: -1; display: flex; justify-content: center; align-items: center; width: 100%; height: 580px;} #Purpose-dia .cent p{color: #121212; font-size: 20px; font-weight: 600; text-align: center; z-index: 1;} #Purpose-dia .cent img.arrow_ani{height: 100%; position: absolute; animation: circleRot 30s infinite;} @keyframes circleRot {from {transform: rotate(0deg);} to {transform: rotate(-360deg);}} #Purpose-dia .cent .cen{z-index: 100; max-width: 550px;} #Purpose-dia ul{height: 580px; display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap;} #Purpose-dia ul li{width: 38%; opacity: 0; transition: all .8s ease-out .4s;} #Purpose-dia ul.in-view li{opacity: 1; transform: translate(0,0) !important;} #Purpose-dia ul li:nth-child(1){transform: translate(40px, 40px); margin-top: -150px; width: 100%;} #Purpose-dia ul li:nth-child(2){transform: translate(-40px, 40px); margin-top: 110px; margin-left: 10%; transition-delay: .8s;} #Purpose-dia ul li:nth-child(3){transform: translate(40px, -40px); margin-top: 110px; margin-right: 10%; transition-delay: 1.2s;} #Purpose-dia ul li .cBox{position: relative; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #0064f0 0%, #01348b 100%); z-index: 1; overflow: hidden; box-shadow: 0px 5px 15px 5px rgb(0 0 0 / 10%);} #Purpose-dia ul li .cBox:before{content: ''; width: 200px; height: 200px; border: 1px dashed #ddd; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} #Purpose-dia ul li .Ctxt{margin-top: 20px; display: block;} #Purpose-dia ul li .Ctxt p{font-size: 19px; color: #f8f8f8; letter-spacing: -0.02em; line-height: 1.35;} #Purpose-dia ul li .Ctxt p.tit{font-size: 26px; font-weight: 700; color: #fff; font-family: 'Paperozi';} #Purpose-dia ul li .Cicono img{width: 64px; filter: brightness(0) invert(1);} /* 상세 섹션 */ .det{margin-top: 40px; padding: 0 20px;} .det > div{max-width: 1200px; margin: 0 auto;} .det section{margin-bottom: 50px; transform: translateY(30px); transition: all 0.6s ease;} .det section:nth-child(2){transition-delay: 0.2s;} .det section:nth-child(3){transition-delay: 0.4s;} .det .tit{display: flex; align-items: center; margin-bottom: 25px;} .det .icon{width: 70px; height: 70px; background: linear-gradient(135deg, #0064f0 0%, #01348b 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 5px 15px rgba(0, 100, 240, 0.3);} .det .icon img{width: 38px; filter: brightness(0) invert(1);} .det .tit h3{font-size: 28px; font-weight: 700; color: #01348b; font-family: 'Paperozi'; margin: 0;} .det .cnt{background: #f8f9fa; border-radius: 15px; padding: 30px 35px; border-left: 4px solid #3e67ac;} .det ul{list-style: none; padding: 0; margin: 0;} .det ul li{display: flex; align-items: flex-start; margin-bottom: 8px; line-height: 1.6;} .det ul li:last-child{margin-bottom: 0;} .det ul p{font-size: 19px; color: #333; padding-left: 14px; position: relative; font-weight: 500; letter-spacing: -0.025em;} .det ul p::before{content: ''; display: block; width: 5px; height: 5px; background: #0064f0; border-radius: 50%; position: absolute; left: 0; top: 11px;} @media (max-width: 1400px) { #Purpose-dia .cent{height: 540px;} #Purpose-dia .cent .cen{max-width: 510px;} #Purpose-dia .cent img.arrow_ani{height: 540px;} #Purpose-dia ul{height: 540px;} #Purpose-dia ul li .cBox{width: 210px; height: 210px;} #Purpose-dia ul li .cBox:before{width: 190px; height: 190px;} #Purpose-dia ul li .Ctxt p.tit{font-size: 25px;} #Purpose-dia ul li .Cicono img{width: 60px;} } @media (max-width: 1200px) { #Purpose-dia{padding-top: 60px;} #Purpose-dia .cent{height: 500px;} #Purpose-dia .cent .cen{max-width: 470px;} #Purpose-dia .cent img.arrow_ani{height: 500px;} #Purpose-dia ul{height: 500px;} #Purpose-dia ul li .cBox{width: 200px; height: 200px;} #Purpose-dia ul li .cBox:before{width: 180px; height: 180px;} #Purpose-dia ul li:nth-child(1){margin-top: -140px;} #Purpose-dia ul li:nth-child(2){margin-top: 100px;} #Purpose-dia ul li:nth-child(3){margin-top: 100px;} #Purpose-dia ul li .Ctxt p.tit{font-size: 24px;} #Purpose-dia ul li .Cicono img{width: 58px;} .det .tit h3{font-size: 26px;} .det .cnt{padding: 28px 32px;} .det ul p{font-size: 18px;} } @media (max-width: 1024px) { #Purpose-dia{padding-top: 50px;} #Purpose-dia .cent{height: 460px;} #Purpose-dia .cent .cen{max-width: 430px;} #Purpose-dia .cent img.arrow_ani{height: 460px;} #Purpose-dia ul{height: 460px;} #Purpose-dia ul li{width: 40%;} #Purpose-dia ul li .cBox{width: 190px; height: 190px;} #Purpose-dia ul li .cBox:before{width: 170px; height: 170px;} #Purpose-dia ul li:nth-child(1){margin-top: -130px;} #Purpose-dia ul li:nth-child(2){margin-top: 95px; margin-left: 8%;} #Purpose-dia ul li:nth-child(3){margin-top: 95px; margin-right: 8%;} #Purpose-dia ul li .Ctxt p.tit{font-size: 23px;} #Purpose-dia ul li .Cicono img{width: 56px;} .det{margin-top: 35px;} .det section{margin-bottom: 45px;} .det .icon{width: 65px; height: 65px; margin-right: 18px;} .det .icon img{width: 35px;} .det .tit h3{font-size: 25px;} .det .cnt{padding: 26px 30px;} .det ul p{font-size: 17.5px;} } @media (max-width: 991px) { #Purpose-dia{padding-top: 40px;} #Purpose-dia .cent{height: 440px;} #Purpose-dia .cent .cen{max-width: 400px;} #Purpose-dia .cent img.arrow_ani{height: 440px;} #Purpose-dia ul{height: 440px;} #Purpose-dia ul li{width: 42%;} #Purpose-dia ul li .cBox{width: 185px; height: 185px;} #Purpose-dia ul li .cBox:before{width: 165px; height: 165px;} #Purpose-dia ul li:nth-child(1){margin-top: -125px;} #Purpose-dia ul li:nth-child(2){margin-top: 90px; margin-left: 7%;} #Purpose-dia ul li:nth-child(3){margin-top: 90px; margin-right: 7%;} #Purpose-dia ul li .Ctxt p.tit{font-size: 22px;} #Purpose-dia ul li .Cicono img{width: 54px;} .det{margin-top: 30px; padding: 0 18px;} .det section{margin-bottom: 42px;} .det .icon{width: 62px; height: 62px; margin-right: 17px;} .det .icon img{width: 33px;} .det .tit h3{font-size: 24px;} .det .cnt{padding: 25px 28px;} .det ul p{font-size: 17px;} } @media (max-width: 768px) { #Purpose-dia{padding-top: 30px;} #Purpose-dia .cent{height: 400px;} #Purpose-dia .cent .cen{max-width: 360px;} #Purpose-dia .cent img.arrow_ani{height: 400px;} #Purpose-dia ul{height: 400px;} #Purpose-dia ul li{width: 44%;} #Purpose-dia ul li .cBox{width: 165px;height: 165px;} #Purpose-dia ul li .cBox:before{width: 145px;height: 145px;} #Purpose-dia ul li:nth-child(1){margin-top: -115px;} #Purpose-dia ul li:nth-child(2){margin-top: 85px; margin-left: 6%;} #Purpose-dia ul li:nth-child(3){margin-top: 85px; margin-right: 6%;} #Purpose-dia ul li .Ctxt{margin-top: 8px;} #Purpose-dia ul li .Ctxt p.tit{font-size: 19px;} #Purpose-dia ul li .Cicono img{width: 52px;} .det{margin-top: 28px; padding: 0 16px;} .det section{margin-bottom: 40px;} .det .icon{width: 58px; height: 58px; margin-right: 16px;} .det .icon img{width: 31px;} .det .tit h3{font-size: 23px;} .det .cnt{padding: 24px 26px;} .det ul p{font-size: 16.5px;} } @media (max-width: 640px) { #Purpose-dia{padding-top: 25px;} #Purpose-dia .cent{height: 370px;} #Purpose-dia .cent .cen{max-width: 330px;} #Purpose-dia .cent img.arrow_ani{height: 370px;} #Purpose-dia ul{height: 370px;} #Purpose-dia ul li{width: 38%;} #Purpose-dia ul li .cBox{width: 155px; height: 155px;} #Purpose-dia ul li .cBox:before{width: 135px; height: 135px;} #Purpose-dia ul li:nth-child(1){margin-top: -100px;} #Purpose-dia ul li:nth-child(2){margin-top: 75px; margin-left: 10%;} #Purpose-dia ul li:nth-child(3){margin-top: 75px; margin-right: 10%;} #Purpose-dia ul li .Ctxt p.tit{font-size: 19px;} #Purpose-dia ul li .Cicono img{width: 48px;} .det{margin-top: 26px; padding: 0 14px;} .det section{margin-bottom: 38px;} .det .icon{min-width: 55px;min-height: 55px;margin-right: 15px;} .det .icon img{width: 29px;} .det .tit h3{font-size: 22px;} .det .cnt{padding: 23px 24px;} .det ul li{margin-bottom: 7px;} .det ul p{font-size: 16px;} } @media (max-width: 480px) { #Purpose-dia{padding-top: 10px;} #Purpose-dia .cent{height: 330px;} #Purpose-dia .cent .cen{max-width: 280px;} #Purpose-dia .cent img.arrow_ani{height: 330px;} #Purpose-dia ul{height: 330px;justify-content: space-between;} #Purpose-dia ul li{width: 38%;} #Purpose-dia ul li .cBox{width: 130px;height: 130px;} #Purpose-dia ul li .cBox:before{width: 115px; height: 115px;} #Purpose-dia ul li:nth-child(1){margin-top: -50px;} #Purpose-dia ul li:nth-child(2){margin-left: 0;} #Purpose-dia ul li:nth-child(3){margin-right: 0;} #Purpose-dia ul li .Ctxt p.tit{font-size: 16px;} #Purpose-dia ul li .Cicono img{width: 44px;} .det{margin-top: 24px; padding: 0 12px;} .det section{margin-bottom: 30px;} .det .tit{flex-direction: row;align-items: center;margin-bottom: 15px;} .det .icon{width: 50px; height: 50px; margin-right: 14px;} .det .icon img{width: 26px;} .det .tit h3{font-size: 20px; line-height: 1.3;} .det .cnt{padding: 20px 22px;} .det ul li{margin-bottom: 6px;} .det ul p{font-size: 15.5px; line-height: 1.55;} } @media (max-width: 400px) { .det .tit h3{font-size: 18px;} } /* ---------------------- 섹션별 영역 ---------------------- */ .cont-sec{position:relative;} .cont-sec + .cont-sec{margin-top:60px;} .cont-sec + .cont-sec.top-line{border-top:1px dotted #ddd; padding-top:60px} .cont-sec:nth-child(1){padding:0;} .cont-sec.cont-left {display: flex;position: relative;border-bottom: 1px dotted rgba(221, 221, 221, 1);padding: 0px 0 40px;} .cont-sec.cont-left .tit-area {position: relative;width: 380px;padding: 0 60px 0 60px;} .cont-sec.cont-left .tit-area > strong{margin: 0 0;} .cont-sec.cont-left .cont-area {width: calc(100% - 380px);} .cont-sec.cont-left:last-child{padding-bottom:0; border:0;} @media (max-width: 1170px){ .cont-sec + .cont-sec{margin-top:50px;} .cont-sec + .cont-sec.top-line{padding-top:50px;} .cont-sec.cont-left{padding: 0px 0 35px;} .cont-sec.cont-left .tit-area{width: 320px;padding: 0 40px 0 40px;} .cont-sec.cont-left .cont-area{width: calc(100% - 320px);} } @media (max-width: 991px){ .cont-sec + .cont-sec{margin-top:40px;} .cont-sec + .cont-sec.top-line{padding-top:40px;} .cont-sec.cont-left{padding: 0px 0 30px;} .cont-sec.cont-left .tit-area{width: 230px;padding: 0 30px 0 30px;} .cont-sec.cont-left .cont-area{width: calc(100% - 240px);} } @media (max-width: 767px){ .cont-sec + .cont-sec{margin-top:30px;} .cont-sec + .cont-sec.top-line{padding-top:30px;} .cont-sec.cont-left{display:block;padding: 0px 0 25px;} .cont-sec.cont-left .tit-area{width: 100%;padding: 0 0 12px 0;border-bottom: 1px solid #eee;margin-bottom: 20px;} .cont-sec.cont-left .cont-area{width: 100%;} } @media (max-width: 480px){ .cont-sec + .cont-sec{margin-top:25px;} .cont-sec + .cont-sec.top-line{padding-top:25px;} .cont-sec.cont-left{padding: 0px 0 20px;} .cont-sec.cont-left .tit-area{padding: 0 0 10px 0;margin-bottom: 15px;} } /* 콜라보 상단 버튼 */ .gNav{width: 100%;display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 30px;} .gNav li{} .gNav li a{display: block; max-width: 100%; text-align: center; padding: 20px 0; font-size: 20px; font-weight: 400; background-color: #f5f5f5; color: #999; transition: .2s ease;} .gNav li:hover a{background-color: #9dc0d1; color: #fff;} .gNav li.active a{background-color: #1aa7ec; color: #fff;} /* -------------------------------- sub1_5 : 오시는길 -------------------------------- */ #contact{position:relative; word-break:keep-all;} #contact .contTit {display: block; margin: 60px 0 20px; font-weight: bold; font-size: 30px; color: #222; letter-spacing: -0.5px; line-height: 1.3; word-break: keep-all;} #contact .map-wrap{position:relative;} #contact .map{overflow:hidden;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-info{position:relative; display:flex; margin-top:3.85%; padding-bottom:3.69%;} #contact .map-info .left{/*width:30.76%;*/width: 50%;} #contact .map-info .map-tit{} #contact .map-info .map-tit big{display:block; font-size:26px; font-weight:bold; color:#1d1a4e;} #contact .map-info .map-tit big strong{color:#1aa7ec; font-size: 34px; font-family:'Sora';} #contact .map-info .map-tit small{display:block;font-size:24px;line-height: 1.5;letter-spacing: -0.025em;color: #858585;font-weight: 600;margin-top: 0.833em;} #contact .map-info .right{width:calc(100% - 50%); font-size: 18px; line-height: 1.8; color:#535353; letter-spacing:-0.025em;} #contact .map-info .map-txt dl{display:flex;font-size: 18px;line-height: 1.6;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1);} #contact .map-info .map-txt dl + dl{} #contact .map-info .map-txt dt{width:105px; position:relative; font-weight:600; padding-left:26px; color:#222; text-align:left;} #contact .map-info .map-txt dt i{color: #1aa7ec;display:inline-block;position: absolute;font-size: 20px;top: 4px;left:0;} #contact .map-info .map-txt dd{width:calc(100% - 105px); font-weight:500; color:#55585b; word-break: keep-all;} #contact .map-info .map-txt dd a{font-size: 18px;color: #444;} #contact .map-info .map-link{display:flex;margin-top:40px;gap: 20px;} #contact .map-info .map-link > li{width:50%;} #contact .map-info .map-link > li a{display: flex; align-items: center; justify-content: center; padding: 0 26px; height:58px; border: 1px solid #ddd; font-size: 18px; font-weight: 500; color: #333; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: all 0.3s;} #contact .map-info .map-link > li:first-child a{} #contact .map-info .map-link > li:nth-child(2) a{} #contact .map-info .map-link > li a:hover{transform:translateY(-5px); border-color:#222; color:#222;} #contact .map-info .map-link > li .icon{display:inline-block; vertical-align:middle; width: 28px; height: 28px; background: center/contain no-repeat; margin-right: 10px;} #contact .map-info .map-link > li .icon.icon-n{background-image:url("/images/sub/loca_naver.png");} #contact .map-info .map-link > li .icon.icon-k{background-image:url("/images/sub/loca_kakao.png");} #contact .loca-list{} #contact .loca-list img{max-width:100%;} #contact .loca-list ul{} #contact .loca-list li{display:flex; padding:50px 40px; border-radius:20px; border:1px solid rgba(224, 223, 226, 0.6);} #contact .loca-list li + li{margin-top:20px;} #contact .loca-list .icon{ font-weight:normal; width:120px; text-align:center; display:flex; flex-direction:column; align-items:center; font-size:19px; font-weight:700; color:#242424;} #contact .loca-list .icon i{font-size:70px; margin-top:10px;} #contact .loca-list .txt-wrap{width: calc(100% - 120px);padding-left: 40px;} #contact .loca-list .txt-wrap .left-tit{margin-bottom:5px; word-break:keep-all; color:#546476; display:block; font-size:18px; line-height:1.4;font-weight: normal;} #contact .loca-list .txt-wrap .left-tit br{display:none;} #contact .loca-list .txt-wrap .long-txt, #contact .loca-list .txt-wrap .shot-txt{border-radius:30px;padding:25px 35px;background:#f9f9f9;position:relative;} #contact .loca-list .txt-wrap .loca-list{line-height:1.6;display:block;position:relative;} #contact .loca-list .txt-wrap .long-txt .loca-t{margin-top: 10px; display:flex;min-height:40px;align-items:center;} #contact .loca-list .txt-wrap .loca-t{position:relative;line-height: 1.6;color: #111;font-weight: 500; font-size: 15px;} #contact .loca-list .txt-wrap i.sq-icon{width:25px;height:25px;margin: 0 5px 0 0;position:relative;} #contact .loca-list .txt-wrap i.sq-2{background:#209032;} #contact .loca-list .txt-wrap i.sq-3{background:#f17734;} #contact .loca-list .txt-wrap i.sq-4{background:#3088c0;} #contact .loca-list .txt-wrap i.sq-5{background:#5c35ac;} #contact .loca-list .txt-wrap i.sq-7{background:#718345;} #contact .loca-list .txt-wrap i.sq-blue{background:#2970d6;} #contact .loca-list .txt-wrap i.sq-green{background:#65bb4e;} #contact .loca-list .txt-wrap i.sq-org{background:#e76452;} #contact .loca-list .txt-wrap .long-txt + .long-txt, #contact .loca-list .txt-wrap .shot-txt + .shot-txt, #contact .loca-list .txt-wrap .long-txt .loca-list .loca-t + .loca-t{margin-top:10px;} #contact .loca-list .txt-wrap .short-txt {margin-top:20px;} #contact .loca-list .txt-wrap .short-txt p + p {margin-top:5px;} @media (max-width: 1024px){ #contact .contTit { font-size: 27px;} #contact .loca-list .txt-wrap .long-txt{padding-left:35px;} #contact .loca-list .txt-wrap > div b{margin-right:0; position:relative; left:auto; top:auto; width:100%; margin-bottom:10px;} } @media (max-width: 1240px){ #contact .contTit { font-size: 25px; line-height: 0; margin: 60px 0 40px; text-align: center;} #contact .map-info{margin-top:40px; padding-bottom:80px; flex-direction:column; align-items:center;} #contact .map-info .left{width:100%; text-align:center; margin-bottom:20px;} /* #contact .map-info .left br{display:none;} */ #contact .map-info .map-tit small{margin-top:0;} #contact .map-info .right{width:100%;} } @media (max-width: 767px){ #contact .contTit { font-size: 22px;} #contact .map-info .left{margin-bottom:10px;} #contact .map-info .map-tit big{font-size:22px;} #contact .map-info .map-tit big strong {font-size: 28px;} #contact .map-info .map-tit small{display:block; font-size:19px;} #contact .map-info .map-txt dl{font-size:16px; line-height:1.5;} #contact .map-info .map-txt dt{padding-left:25px;} #contact .map-info .map-txt dt i{font-size:18px; top:2px;} #contact .map-info .map-txt dd{width: calc(100% - 80px);} #contact .map-info .map-link{margin-top:20px; gap:10px; flex-direction:column; align-items:center;} #contact .map-info .map-txt dd a{font-size:16px;} #contact .map-info .map-link > li{width:100%;} #contact .loca-list .txt-wrap .long-txt, #contact .loca-list .txt-wrap .shot-txt{border-radius:10px; padding:20px;} #contact .loca-list li{border-radius:15px; padding:20px; flex-direction:column; align-items:center; gap:10px;} #contact .loca-list .txt-wrap{width:100%; padding-left:0;} #contact .loca-list .txt-wrap .left-tit{font-size:16px;} #contact .loca-list .txt-wrap > div b{border-radius:10px; font-size:16px; padding:0px;} #contact .loca-list .txt-wrap .long-txt{padding-left:20px;} #contact .loca-list .txt-wrap i.sq-icon{width:20px; height:20px;} } @media (max-width: 500px){ #contact .contTit { font-size: 20px;} } /* -------------------------------- sub3 : Research -------------------------------- */ #sProd .rch_wr{} #sProd .rch_wr .r_top_sec{padding: 40px 45px;margin-bottom: 30px;position: relative;background:#1b214c;background: linear-gradient(135deg, #1b214c 0%, #214280 100%);} #sProd .rch_wr .r_top_sec p{font-size: 18px; font-weight: 500; color: #fff; text-shadow:2px 2px 6px rgba(0,0,0,0.3); word-break: keep-all;} #sProd .rch_wr .r_title{font-size: 28px; font-weight: 700; position: relative; /* border-left: 4px solid #181d61; */ color: #004e6f; margin-bottom: 20px; /* padding-left: 20px; */ line-height: 1.2; letter-spacing: -0.2px; word-break: keep-all;} #sProd .rch_wr .r_con_sec {border-bottom: 1px dashed #ddd;padding-bottom: 40px;} #sProd .rch_wr .r_con_sec .txt_in{padding: 40px 0;} #sProd .rch_wr .r_con_sec .txt_in p{margin-bottom: 10px; font-family: 'Pretendard'; font-weight: 400; font-size: 18px; text-align: justify; line-height: 1.8; letter-spacing: -0.2px; text-indent: 50px; word-break: keep-all;} #sProd .rch_wr .r_con_sec .txt_in p:first-child{text-indent: 0;} #sProd .rch_wr .r_con_sec .img_in{padding: 10px;} #sProd .rch_wr .r_con_sec .img_in img{max-width:100%;} #sProd .rch_wr .r_con_sec .img_in .vd_rep{max-width:1000px;margin: 0 auto;} #sProd .rch_wr .r_con_sec .img_in .img_one{display: flex; justify-content: center; border: 1px solid #ecebeb;position: relative;padding: 30px 30px 50px;text-align: center;} #sProd .rch_wr .r_con_sec .link_in{max-width:500px;background: #f5f5f5;padding: 25px;border: 1px solid #eee;text-align: center;margin: 30px auto 0; } #sProd .rch_wr .r_con_sec .link_in p{font-size: 0.8em;font-weight: 500;color: #888;} #sProd .rch_wr .r_con_sec .link_in a{font-size: 0.8em;color: #e89700;} #sProd .rch_wr .r_con_sec .link_in a i{margin-right: 5px;} #sProd .rch_wr .r_con_sec .link_in a:hover{text-decoration: underline;} #sProd .rch_wr .r_con_sec.ani{opacity: 0;transform:translateY(5%);} #sProd .rch_wr .r_con_sec.ani.in-view{opacity: 1;transform:translateY(0);} #sProd .rch_wr.r_list .r_con_sec{border-bottom: 0;} #sProd .rch_wr.r_list .r_title{margin-bottom: 40px;} #sProd .tabcontent .img_in { display: flex; justify-content: center; /* 가로 중앙 정렬 */ align-items: center; /* 세로 중앙 정렬 (필요시) */ gap: 20px; /* 이미지 사이 간격 */ margin: 30px 0; /* 위아래 여백 */ } #sProd .tabcontent .img_in img {text-align: center;} /* 탭메뉴 */ #sProd .rch_wr .ab-tab{margin-top: 50px; display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;} #sProd .rch_wr .ab-tab li{display: table; width: 32%; height: 70px; margin: 15px 10px 15px 0; cursor:pointer; vertical-align: middle; border: 1px solid #eee; transition: all .6s;} #sProd .rch_wr .ab-tab li a{display: table-cell !important; padding:5px; overflow:hidden; display:block; height:100%; text-align:center; vertical-align:middle; font-size:20px; font-weight: 500; line-height:24px; letter-spacing:-.5px; border-radius:15px; color: #888; word-break: keep-all; transition: all .6s;} #sProd .rch_wr .ab-tab li:last-child{margin-right:0;} #sProd .rch_wr .ab-tab li:first-child span{border-left:none;} #sProd .rch_wr .tabcontent{ width: 100%; max-width: 1600px; margin: 0 auto;} #sProd .rch_wr .txt-left-tit{padding-bottom: 70px;} #sProd .rch_wr .txt-left-tit .tit1{color: #fff; background-color: #001f5c; padding: 30px; position: relative; margin: 0px 0 30px 0; font-size: 42px; font-weight: 700; letter-spacing: -.4px; text-align: center;} #sProd .rch_wr .tit1::before{content:''; position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); display: inline-block; width: 1px; height: 50px; background: #cdcdcd;} #sProd .rch_wr .tabcontent .ab-txt{padding-bottom: 40px; border-bottom: 1px dashed #eee;} #sProd .rch_wr .tabcontent .ab-txt h3{margin-bottom: 20px; font-weight: 400; font-size: 26px; font-weight: 700; color: #004e6f; word-break: keep-all;} /* #sProd .rch_wr .tabcontent .center-txt p{margin-bottom: 10px; padding-top: 40px; font-family: 'Pretendard'; font-weight: 400; font-size: 20px; text-align: center; line-height: 1.5; letter-spacing: -0.2px; color: #555; word-break: keep-all;} */ #sProd .rch_wr .tabcontent .ab-txt ul.dot_list{} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li{position: relative; margin-bottom: 15px; padding-left: 20px; font-family: 'Pretendard'; font-weight: 400; font-size: 20px; line-height: 1.5; letter-spacing: -0.2px; word-break: keep-all;} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li:last-child{margin-bottom: 0;} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li::before{content:''; position: absolute; top: 12px; left: 0; display: block; width: 6px; height: 6px; border-radius: 50%; background: #cdcdcd;} #sProd .rch_wr .img_in{ display: flex; align-items: center; justify-content: center;} #sProd .rch_wr .img_in a{display: block; width: 100%;} #sProd .rch_wr .img_in img{width: 100%; max-width: 1200px; margin: 0 auto;} #sProd .rch_wr .img_in > div + div{margin-top: 40px;} #sProd .rch_wr .img_in .img_one{display: flex; justify-content: center; position: relative; text-align: center;} #sProd .rch_wr .ab-tab li:hover{background: #009fe3; border-color: #009fe3;} #sProd .rch_wr .ab-tab li:hover span{font-weight: 500; color: #fff;} #sProd .rch_wr .ab-tab li.active{background: #009fe3; border-color: #009fe3;} #sProd .rch_wr .ab-tab li.active span{font-weight: 500; color: #fff;} #sProd .rch_wr .img_in.two{width: 100%; max-width: 800px; margin: 0 auto;} #sProd .rch_wr .img_in .box_center{display: flex; justify-content: center; gap: 20px; text-align: center;margin-bottom: 30px;padding-bottom: 40px;} #sProd .rch_wr .img_in .box_center .box_two{width: calc(50% - 10px);} #sProd .rch_wr .img_in .box_center .box_two > div{} #sProd .rch_wr .img_in .box_center .box_two img{} #sProd .rch_wr .img_in .box_center .box_two p{margin-top: 15px; font-size: 17px; color: #222;} #sProd .rch_wr .img_in .box_center img{} #sProd .rch_wr .img_in p.caption{margin-top:10px; text-align: center; font-size: 24px; color: #222;} #sProd .rch_wr .s_tit{margin-top: 50px;}#sProd .rch_wr .tabcontent .txt-left-tit .tit1 #sProd .rch_wr.r_list .r_con_sec .img_in.ani{opacity: 0;transform:translateY(5%);} #sProd .rch_wr.r_list .r_con_sec .img_in.ani.in-view{opacity: 1;transform:translateY(0);} #sProd.product .rch_wr .ab-tab li{width: 17%;} #sProd .subTit { font-size: 32px; font-weight: 700; margin-bottom: 10px; margin-top: 40px; font-family: 'Pretendard'; /* text-align: center; */ line-height: 1.5; letter-spacing: -0.2px; color: #555; word-break: keep-all; position: relative; padding-left: 18px; } #sProd .subTit::before { content: ''; position: absolute; top: 5px; left: 0; width: 10px; height: 10px; /* border-radius: 50%; */ background: #003087; } #sProd .tit1 + .center-txt .subTit { margin-top: 100px; } #sProd .center-txt p { font-size: 20px; font-weight: 500; /* text-align: center; */ line-height: 1.5; color: #555; margin-top: 8px; margin-left: 18px; word-break: keep-all; } /* sup 태그 스타일 조정 */ sup { font-size: 0.6em; vertical-align: super; position: relative; top: -0.2em; } /* sub3_4 차트 */ .tech-flow-chart { width: 100%; max-width: 1000px; margin: 0 auto; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #333; } .tech-flow-chart .row { display: flex; justify-content: space-between; align-items: stretch; margin-bottom: 20px; gap: 20px; } .tech-flow-chart .flow-box { flex: 1; border: 2px dashed #ccc; background: #fff; display: flex; flex-direction: column; } .tech-flow-chart .box-header { padding: 15px; text-align: center; color: #fff; font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; } .tech-flow-chart .blue-header { background: linear-gradient(180deg, #5369fc 0%, #3e50c4 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: -2px -2px 0 -2px; } .tech-flow-chart .box-content { padding: 20px; flex-grow: 1; } .tech-flow-chart .box-content ul { list-style: none; padding: 0; margin: 0; } .tech-flow-chart .box-content ul li { position: relative; padding-left: 15px; margin-bottom: 8px; font-size: 0.95rem; line-height: 1.4; font-weight: 600; } .tech-flow-chart .box-content ul li::before { content: "•"; position: absolute; left: 0; color: #333; } .tech-flow-chart .wide-box { flex: 1; padding: 20px; text-align: center; color: #fff; font-weight: bold; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .tech-flow-chart .green-box { background: linear-gradient(180deg, #4da03c 0%, #357a27 100%); position: relative; box-shadow: 0 -10px 15px -5px rgba(0,0,0,0.1); } .tech-flow-chart .light-blue-box { background: #bde0fe; color: #000; font-weight: 600; } .tech-flow-chart .chart-caption { font-size: 0.9rem; font-weight: bold; margin-top: 10px; } /* 다운로드 테이블 래퍼 */ .down-table-wrap { width: 100%; margin-top: 60px; border-top: 2px solid #003087; } .down-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .down-table col.col-tit { width: auto; } .down-table col.col-btn { width: 150px; } .down-table th { padding: 15px 20px; background-color: #f5f8ff; color: #333; font-size: 16px; font-weight: 600; text-align: center; border-bottom: 1px solid #ddd; } .down-table th:first-child { text-align: left; padding-left: 30px; } .down-table td { padding: 20px; border-bottom: 1px solid #eee; vertical-align: middle; } .down-table .tit-cell { font-size: 17px; color: #333; font-weight: 500; line-height: 1.4; word-break: keep-all; text-align: left; padding-left: 30px; } .down-table .tit-cell i { color: #003087; margin-right: 10px; font-size: 20px; vertical-align: middle; margin-top: -3px; display: inline-block; } .down-table .btn-cell { text-align: center; } .btn-table-down { display: inline-flex; align-items: center; justify-content: center; gap: 5px; background-color: #003087; color: #fff; font-size: 14px; padding: 8px 15px; border-radius: 4px; text-decoration: none; transition: 0.3s; white-space: nowrap; } .btn-table-down:hover { background-color: #001f5c; color: #fff; } @media (max-width:1280px){ #sProd .rch_wr .r_top_sec {margin-bottom: 10px; padding: 3%;} #sProd .rch_wr .tabcontent .ab-txt{padding: 35px 3%;} #sProd .rch_wr .tabcontent .ab-txt p{font-size: 16px;} #sProd .rch_wr .tabcontent .txt-left-tit{padding-bottom: 30px;} #sProd .rch_wr .r_con_sec .txt_in p{font-size: 16px;} #sProd .rch_wr .ab-tab li{width: 30%;} #sProd .rch_wr .ab-tab li span{font-size: 18px;} #sProd .subTit {font-size: 28px;} } @media (max-width: 991px){ #sProd .rch_wr .r_top_sec{padding: 32px 30px;} #sProd .rch_wr .r_top_sec p{font-size: 17px;} #sProd .rch_wr .ab-tab{margin-top: 35px;} #sProd .rch_wr .ab-tab li{height: 64px; } #sProd .rch_wr .ab-tab li span{font-size: 16px;} #sProd .rch_wr .ab-tab{} #sProd .rch_wr .ab-tab{gap: 10px;} #sProd.product .rch_wr .ab-tab li{width: calc(50% - 10px); margin: 0;} #sProd .rch_wr .tabcontent .txt-left-tit .tit1{font-size: 30px; margin: 30px 0;} #sProd .rch_wr .tabcontent .tit1::before{height: 42px; bottom: -58px;} #sProd .rch_wr .tabcontent .ab-txt{padding: 20px 3%;} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li{font-size: 19px; margin-bottom: 10px;} #sProd .rch_wr .tabcontent .center-txt p{font-size: 18px;} } @media (max-width: 768px){ #sProd .rch_wr .r_top_sec {padding: 24px 22px;} #sProd .rch_wr .r_top_sec p{font-size: 16px;} #sProd .rch_wr .r_title{font-size: 25px;} #sProd .rch_wr .tabcontent{padding-top: 25px;} #sProd .rch_wr .tabcontent .txt-left-tit .tit1{margin: 25px 0;} #sProd .rch_wr .tabcontent .tit1::before{height: 20px; bottom: -36px;} #sProd .rch_wr .tabcontent .ab-txt{padding: 20px 3%;} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li{font-size: 18px;} #sProd .rch_wr .img_in {flex-direction: column;} #sProd .rch_wr .img_in > div { width: 100% !important;} #sProd .subTit {font-size: 24px; padding-left: 0; text-align: center;} #sProd .subTit::before {display: none;} #sProd .center-txt {text-align: center;} #sProd .center-txt p {margin-left: 0;} #sProd .tit1 + .center-txt .subTit {margin-top: 60px;} #sProd .subTit {margin-top: 30px;} .tech-flow-chart .row { flex-direction: column; gap: 15px; } .tech-flow-chart .arrow-next, .tech-flow-chart .arrow-prev { display: none; } .tech-flow-chart .box-header { font-size: 1rem; padding: 12px; } .down-table thead { display: none; } .down-table, .down-table tbody, .down-table tr, .down-table td { display: block; width: 100%; box-sizing: border-box; } .down-table tr { border-bottom: 1px solid #ddd; padding: 20px 10px; background-color: #fff; } .down-table .tit-cell { padding: 0 0 15px 0 !important; border-bottom: none !important; font-size: 16px; text-align: center } .down-table .btn-cell { width: 100%; padding: 0 !important; border-bottom: none !important; text-align: center } .btn-table-down { width: 100%; /* max-width: 300px; */ padding: 10px 0; font-size: 14px; justify-content: center; } } @media screen and (max-width: 640px) { .down-table thead { display: none; } .down-table col.col-btn { width: 110px; } .down-table td { padding: 15px 10px; } .down-table .tit-cell { padding-left: 10px; font-size: 15px; } .btn-table-down { padding: 8px 10px; } } @media (max-width: 600px){ #sProd .rch_wr .r_top_sec p{font-size: 15px;} #sProd .rch_wr .r_con_sec .txt_in{padding: 0;} #sProd .rch_wr .r_con_sec .txt_in p{font-size: 14px;} #sProd .rch_wr .r_top_sec p{font-size: 16px; line-height: 1.4;} #sProd .rch_wr .tabcontent .ab-txt h3{font-size: 18px;} #sProd .rch_wr .tabcontent .ab-txt p{font-size: 14px;} #sProd .rch_wr #list-2 .img_in{flex-wrap: wrap;} #sProd .rch_wr #list-2 .img_in .img_one{width: 100%;} #sProd .rch_wr .ab-tab li{width: 100%; height: 50px; margin: 5px 0 0;} #sProd .rch_wr .ab-tab li span br{display: none;} #sProd .rch_wr .tabcontent .txt-left-tit .tit1{font-size: 24px;} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li{font-size: 17px;} #sProd .rch_wr .tabcontent .center-txt p{font-size: 16px;} } @media (max-width: 580px){ #sProd .rch_wr .r_top_sec p{font-size: 14px;} #sProd .rch_wr .tabcontent{padding-top: 20px;} /* #sProd .rch_wr .tabcontent .center-txt p{padding-top: 20px;} */ #sProd.product .rch_wr .ab-tab li{width: 100%;} #sProd .rch_wr .ab-tab li span{font-size: 15px;} #sProd .rch_wr .tabcontent .txt-left-tit .tit1{font-size: 20px;} #sProd .rch_wr .img_in .box_center .box_two p{font-size: 14px;} #sProd .rch_wr .img_in p.caption{font-size: 16px;} } @media (max-width: 450px){ #sProd .rch_wr .ab-tab li span{font-size: 14px;} #sProd .rch_wr .tabcontent .txt-left-tit{padding-bottom: 10px} #sProd .rch_wr .tabcontent .ab-txt ul.dot_list li{font-size: 16px;} #sProd .rch_wr .tabcontent .center-txt p{font-size: 15px;} } /* 서브페이지 끝 */ /* 테두리 원형 테이블 */ .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 #353541; 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:#f9fafc; 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:#f1f7fd;} .table td.color-2{background:#edfbf2;} .td-bg1{background:#fff2f2;} .td-bg2{background:#f1f7fd;} .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:#4f687e;color:#fff;font-size:18px;font-weight:normal;font-family:'LotteMartHappy';text-align:center;} .table-color.bg-gr thead th{background-color:#96c700;} .table-color.bg-bl thead th{background-color:#00bfe6;} .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:#f1f7fd;} .table-color td.color-2{background:#edfbf2;} .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:#deaf22;} .table2{position:relative; width:100%; margin:20px 0; background-color:#fff; border-top:2px solid #353541; 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:#0065be; 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;font-family: 'S-CoreDream';} .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: #2469c3;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:#4f687e; width:100%; display:block; border-radius:5px;} .respo-table.bg-bl tbody th{background:#00bfe6;} .respo-table.bg-gr tbody th{background:#96c700;} .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:#4f687e; 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:#4f687e; 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:#684ab3; 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: #2469c3;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: #2469c3;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;font-family: 'S-CoreDream';} .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: #2469c3;font-weight:normal;} .ui-topbox .txtwrap p > strong{color: #2469c3;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;font-family: 'S-CoreDream';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;} } /* -------------------------------- sub8_2 : 이메일무단수집거부 -------------------------------- */ .empoli{padding: 50px; text-align: center; border: 5px solid #eee; border-radius: 30px;} .empoli h5{display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; margin: 0 auto; border-radius: 50%; border: 1px solid #ddd;} .empoli i{font-size: 78px; color: #003876;} .empoli p{padding-top: 25px; font-size: 20px; font-weight: 500; line-height: 30px; color: #333; word-break: keep-all;} .empoli p b{color: #003876;} @media (max-width: 640px){ .empoli{padding: 25px 20px 30px; border: 4px solid #eee; border-radius: 20px;} .empoli h5{width: 65px; height: 65px;} .empoli i{font-size: 56px;} .empoli p{font-size: 16px; line-height: 22px;} } /* -------------------------------- 준비중 -------------------------------- */ .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;font-family: 'S-CoreDream';} .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:#2469c3; 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:#2469c3;font-weight:600;} .ui-comming .tit p{font-size:17px; color:#666;}