.ft_PS {font-family: 'Poppins-SemiBold';} .wrap {position: relative; overflow: hidden;} /** 헤더 베이스 **/ .header{position:fixed;top:0;left:0;right:0;z-index:1000;height:80px;padding:0 50px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.4);background:transparent;transition:background .18s ease,box-shadow .18s ease;} .header.show{display:flex;} .header.d-flex{display:flex;} /** sticky/active 색상 **/ .header.is-sticky{background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.08);border-bottom:1px solid rgba(255,255,255,.4);} .header.active{background:#fff;border-bottom:1px solid rgba(140,140,140,.4);} /** 레이아웃 **/ .headWrap{position:relative;width:100%;display:flex;align-items:center;justify-content:flex-start;gap:26px;} .header .logo{display:flex;align-items:center;gap:26px;} /** 로고 a 래퍼 **/ .header .logo .gbtLogo{display:inline-flex;align-items:center;justify-content:center;height:30px;line-height:0;} .header .logo .siteLogo{display:inline-flex;align-items:center;justify-content:center;height:30px;line-height:0;} /** 로고 이미지 공통(절대배치 금지) **/ .header .logo img{position:static !important;left:auto !important;top:auto !important;visibility:visible !important;} /** 로고 이미지 크기/트랜지션 **/ .header .logo .gbtLogo img{height:30px;display:block;transition:transform .2s ease;} .header .logo .siteLogo img{height:30px;display:block;transition:transform .2s ease;} /** 로고 hover 확대 **/ .header .logo .gbtLogo:hover img{transform:scale(1.12);} .header .logo .siteLogo:hover img{transform:scale(1.12);} /** 기본(어두운 배경)에서 1번 보이기 **/ .header .gbtLogo img:nth-of-type(1){display:block;} .header .gbtLogo img:nth-of-type(2){display:none;} .header .siteLogo img:nth-of-type(1){display:block;} .header .siteLogo img:nth-of-type(2){display:none;} /** active에서 2번 보이기(밝은 배경용) **/ .header.active .gbtLogo img:nth-of-type(1){display:none;} .header.active .gbtLogo img:nth-of-type(2){display:block;} .header.active .siteLogo img:nth-of-type(1){display:none;} .header.active .siteLogo img:nth-of-type(2){display:block;} /** sticky에서도 2번 보이기 **/ .header.is-sticky .gbtLogo img:nth-of-type(1){display:none;} .header.is-sticky .gbtLogo img:nth-of-type(2){display:block;} .header.is-sticky .siteLogo img:nth-of-type(1){display:none;} .header.is-sticky .siteLogo img:nth-of-type(2){display:block;} /** 방문자 배지(밝은 헤더일 때만 색 전환) **/ .header.active .visit-badge{color:#000;background:#f8f8f8;} .header.is-sticky .visit-badge{color:#000;background:#f8f8f8;} .header.active .all-badge{color:#000;background:#f8f8f8;} .header.is-sticky .all-badge{color:#000;background:#f8f8f8;} /** 메뉴 색상(상태별) **/ .header:not(.is-sticky) .menu>ul>li>a{color:#fff;} .header.is-sticky .menu>ul>li>a{color:#111;} .header.active .menu>ul>li>a{color:#000;} /** 햄버거 색상(상태별) **/ .header.active .menuBox .hMenu a span{background:#000;} .header.is-sticky .menuBox .hMenu a span{background:#000;} /** 서브메뉴 상단 라인(밝은 헤더일 때 노출) **/ .header:is(.is-sticky,.active) .menuBox .menu .subMenu{position:absolute;overflow:visible;z-index:22222;} .header:is(.is-sticky,.active) .menuBox .menu .subMenu::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#e0e0e0;opacity:.95;pointer-events:none;z-index:22223;} /** active 상태 hover 언더라인(기존 동작 유지) **/ .header.active .menuBox .menu>ul>li>a{position:relative;} .header.active .menuBox .menu>ul>li>a:hover{color:#2A3384;transition:color .3s;} .header.active .menuBox .menu>ul>li>a:after{position:absolute;content:"";width:100%;height:4px;background-color:#2A3384;bottom:0;left:50%;transform:translateX(-50%) scaleX(0);transition:transform .3s;} .header.active .menuBox .menu>ul>li>a:hover:after{transform:translateX(-50%) scaleX(1);} /** // 로고끝 **/ .header.is-sticky .visit-badge {color:#000; background:#f8f8f8;} .header.is-sticky .all-badge {color:#000; background:#f8f8f8;} .header.is-sticky .menu > ul > li > a{ color:#111; } .header.active .menuBox .hMenu a span {background:#000;} .header.is-sticky .menuBox .hMenu a span {background:#000;} .header:not(.is-sticky) .menu > ul > li > a{ color:#fff; } .header:is(.is-sticky, .active) .menuBox .menu .subMenu{position: absolute; overflow: visible;z-index: 22222;} .header:is(.is-sticky, .active) .menuBox .menu .subMenu::before{content: "";position: absolute;left: 0; right: 0; top: 0; height: 1px;background: #e0e0e0;opacity: .95;pointer-events: none;z-index: 22223; } .header.is-sticky .menuBox .menu .subMenu::before,.header.active .menuBox .menu .subMenu::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;background:#e0e0e0; opacity:.95; pointer-events:none; z-index:22223;} .header.active .menuBox .menu > ul > li > a {color: #000; position: relative;} .header.active .menuBox .menu > ul > li > a:hover {color: #2A3384; transition: all .3s; position: relative;} .header.active .menuBox .menu > ul > li > a:after {position: absolute; content: ""; width: 100%; height: 4px; background-color: #2A3384; bottom: 0; left: 50%; transform: translateX(-50%) scaleX(0); transition: transform 0.3s;} .header.active .menuBox .menu > ul > li > a:hover:after {transform: translateX(-50%) scaleX(1);} .header.active .menuBox .menu > ul > li > a.active {width: 100%; height: 4px; background-color: #2A3384; position: absolute; bottom: 0; left: 0; content: "";} .header.active .menuBox .hMenu a span {background-color: #000;} .header.active .menuBox .hMenu a:hover span {background-color: #2A3384; transition: all .3s;} .menuBox {display: flex; align-items: center; height: 100%;} .menuBox .menu {height: 100%;} .menuBox .menu > ul {display: flex;} .menuBox .menu ul li {margin-left: 20px;} .menuBox .menu ul li:hover .subMenu {opacity: 1; visibility: visible; transition: all .3s;} .menuBox .menu > ul > li {height: 100%; line-height: 80px; padding: 0; width: 145px; text-align: center;} .menuBox .menu > ul > li:nth-of-type(1) {margin-left: 0;} .menuBox .menu ul li > a {color: #fff; font-size: 20px; padding: 0; font-weight: 500;} .menuBox .menu > ul > li > a {display: block;} .menuBox .hMenu {display:none; margin-left: 80px;} .menuBox .hMenu a {display: block;} .menuBox .hMenu a span {display: block; background-color: #fff; width: 30px; height: 2px; margin-top: 6px; float: none; clear: both;} .menuBox .hMenu a span:nth-of-type(1) {margin-top: 0;} .menuBox .hMenu a span.lineS {width: 20px; float: right;} .menuBox .hMenu a span.lineL {margin-top: 14px;} .menuBox .menu .subMenu {display: flex; position: absolute; width: 100%; top:80px; left: 0; padding: 35px 50px 35px 0; justify-content: end; opacity: 0; visibility: hidden; transition: .3s; z-index: 22222;} .menuBox .menu .subMenu.active {opacity: 1; visibility: visible; transition: .3s;} .menuBox .menu .subMenu.menubg01 {background: url(/serviceAssets/img/menubg001.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu.menubg02 {background: url(/serviceAssets/img/menubg002.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu.menubg03 {background: url(/serviceAssets/img/menubg003.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu.menubg04 {background: url(/serviceAssets/img/menubg004.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu.menubg05 {background: url(/serviceAssets/img/menubg007.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu.menubg06 {background: url(/serviceAssets/img/menubg05.jpg) no-repeat left center #fff; background-size: 637px;} .menuBox .menu .subMenu .sMenubox {display: flex;} .menuBox .menu .subMenu .sMenubox ul li {width: 145px; text-align: center; line-height: 1;} .menuBox .menu .subMenu .sMenubox ul li a {color: #000; font-weight: 400; font-size: 18px; padding: 10px; margin: 5px 0; display: inline-block;} .menuBox .menu .subMenu .sMenubox ul li a:hover {color: #2A3384; font-weight: 600;} #menu {width: 100%; padding:0 200px ; display:flex; align-items:center; min-height: 100vh; height:100%; overflow:auto; position: fixed;top: 0px;right: -100%;z-index: 99999;background:url(/serviceAssets/img/riseBgLogo.png) no-repeat #2A3384; background-position:95% 92%; text-align: center;transition: All 0.2s ease;-webkit-transition: All 0.2s ease;-moz-transition: All 0.2s ease;-o-transition: All 0.2s ease;} #menu.open {right: 0px;} #menu .riseCenter {position:absolute; bottom:20px; left:20px;} #menu .risevv {position:absolute; top:60px; left:300px; display:none;} .page_cover.open {display: block;} .page_cover {width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background-color: rgba(0,0,0,0.4);z-index: 4;display: none;} .newMenu {width:100%; height:auto; position:relative; } .newMenu ul {display:flex; flex-direction:column;} .newMenu ul li {display:flex; width:100%; text-align:left;border-bottom:1px solid #8C90B0; position:relative;} .newMenu ul li .bigMenu {font-size:40px; font-weight:600; color:#fff; height:130px; display:flex; align-items:center;} .newMenu ul li .bigMenu:after {content:''; clear:both; display:block; position:absolute; bottom:-2px; width:170px; height:3px; background:#fff;} .newMenu ul li div {height:130px; display:flex; align-items:center; padding-left:100px;} .newMenu ul li div .smallMenu {margin-right:80px; color:#fff; font-size:18px; display: inline-block; font-weight:200;} .newMenu ul li div .smallMenu:last-child {margin-right:0;} .newMenu ul li div .smallMenu:hover {color:#90cbff; transition:0.3s;} .newMenu img.riseLogoWhite {position:absolute; bottom:-160px; right:0; width:150px;} .close {width: 40px;height: 40px;position: absolute; cursor: pointer; top:50px; right:50px; z-index:99999; } .close:before, .close:after {content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 2px;background-color: #fff;} .close:before {transform: translate(-50%, -50%) rotate(45deg);transition: transform 0.5s ease;} .close:after {transform: translate(-50%, -50%) rotate(-45deg);transition: transform 0.5s ease;} .close:hover:before {transform: translate(-50%, -50%) rotate(225deg);} .close:hover:after {transform: translate(-50%, -50%) rotate(135deg);} .riseMbLogo {display:none;} .fp-viewing-5 .subNav {display:none;} .badge {display:flex; gap:8px;} .all-badge{display:inline-flex; align-items:center; gap:10px;padding:6px 12px; border-radius:999px;background:rgba(255,255,255,.14); color:#fff; line-height:1;backdrop-filter:saturate(140%) blur(4px);-webkit-backdrop-filter:saturate(140%) blur(4px);} .all-badge .all-label{font-size:13px; opacity:.9;} .all-badge .all-count{font-size:14px; font-weight:600;} .all-badge .all-count em{font-style:normal; font-weight:700; letter-spacing:.5px;} .all-badge.mbVisit {display:none;} .visit-badge{display:inline-flex; align-items:center; gap:10px;padding:6px 12px; border-radius:999px;background:rgba(255,255,255,.14); color:#fff; line-height:1;backdrop-filter:saturate(140%) blur(4px);-webkit-backdrop-filter:saturate(140%) blur(4px);} .visit-badge .v-label{font-size:13px; opacity:.9;} .visit-badge .v-count{font-size:13px; font-weight:600;} .visit-badge .v-count em{font-style:normal; font-weight:700; letter-spacing:.5px;} .mbVisitAll {display:none;} @media (max-width: 1800px) { .menuBox .hMenu {margin-left: 60px;} } @media (max-width:1760px) { .header {padding:0 20px;} .menuBox .menu .subMenu {padding:35px 20px 35px 0;} } @media (max-width:1700px) { .badge {flex-direction:column; gap:0;} .visit-badge {border-radius:8px 8px 0 0; justify-content:space-between;} .all-badge {border-radius:0 0 8px 8px; justify-content:space-between;} } @media (max-width: 1600px) { .header {padding: 0 60px;} .header .logo img:nth-last-of-type(1){left: 60px;} .menuBox .menu .subMenu {padding: 35px 60px 35px 0;} .menuBox .menu > ul > li {width: 105px;} .menuBox .menu .subMenu .sMenubox ul li {width: 105px;} .menuBox .menu .subMenu .sMenubox ul li a {padding: 10px 0; } } @media (max-width:1500px) { .header {padding:0 50px;} .menuBox .menu .subMenu {padding: 35px 50px 35px 0;} .menuBox .menu ul li > a {font-size:18px;} .menuBox .menu .subMenu.menubg01 {background: url(/serviceAssets/img/menubg01.jpg) no-repeat left center #fff; background-size: 560px;} .menuBox .menu .subMenu.menubg02 {background: url(/serviceAssets/img/menubg02.jpg) no-repeat left center #fff; background-size: 560px;} .menuBox .menu .subMenu.menubg03 {background: url(/serviceAssets/img/menubg03.jpg) no-repeat left center #fff; background-size: 560px;} .menuBox .menu .subMenu.menubg04 {background: url(/serviceAssets/img/menubg04.jpg) no-repeat left center #fff; background-size: 560px;} .menuBox .menu .subMenu.menubg05 {background: url(/serviceAssets/img/menubg007.jpg) no-repeat left center #fff; background-size: 560px;} .menuBox .menu .subMenu.menubg06 {background: url(/serviceAssets/img/menubg05.jpg) no-repeat left center #fff; background-size: 560px;} } @media (max-width: 1400px) { .header {padding:0 30px;} .menuBox .menu > ul > li {width: 85px;} .menuBox .menu ul li > a {font-size: 18px;} .menuBox .menu .subMenu {padding: 20px 30px 20px 0;} .menuBox .menu .subMenu.menubg01 {background-size: 519px;} .menuBox .menu .subMenu.menubg02 {background-size: 519px;} .menuBox .menu .subMenu.menubg03 {background-size: 519px;} .menuBox .menu .subMenu.menubg04 {background-size: 519px;} .menuBox .menu .subMenu.menubg05 {background-size: 519px;} .menuBox .menu .subMenu.menubg06 {background-size: 519px;} .menuBox .menu .subMenu .sMenubox ul li {width: 85px;} .menuBox .menu .subMenu .sMenubox ul li a {font-size: 16px; padding: 8px 0;} } @media (max-width:1300px) { .menuBox .menu > ul > li {width:80px;} .menuBox .menu .subMenu .sMenubox ul li {width: 80px;} .menuBox .hMenu {display:block; margin-left:40px;} .menuBox .menu {display: none;} } @media (max-width: 1200px) { .header {height:70px;} .headWrap {justify-content:space-between;} #menu {padding:0 100px;} #menu .riseCenter {display:none;} .newMenu ul li div {height:110px;padding-left:80px;} .newMenu ul li .bigMenu {height:110px; font-size:30px;} .newMenu ul li .bigMenu:after {width:130px;} } @media (max-width: 991px) { .header {padding: 0 30px; height:70px;} .header .logo img:nth-last-of-type(1){left: 40px;} .newMenu ul li {flex-direction:column; padding:20px 0;} .newMenu ul li div {padding-left:0; height:auto;} .newMenu ul li .bigMenu {height:auto; padding-bottom:15px;} .newMenu ul li .bigMenu:after {display:none;} .newMenu ul li div .smallMenu {margin-right:25px;} #menu .risevv {display:block; top:60px; left:80px;} #menu {padding:0 80px; background:#2A3384; padding:150px 80px 0 80px; align-items:flex-start;} .riseMbLogo {display:block; position:absolute; top:50px; left:310px;} .newMenu ul li:last-child {border-bottom:none;} } @media (max-width: 768px) { .header {padding: 0 20px; height:60px;} .header .logo img:nth-last-of-type(1) {left: 20px;} .newMenu ul li div .smallMenu {font-size:16px;} .newMenu ul li .bigMenu {font-size:26px;} .close {width:30px; height:30px; top:30px; right:30px;} .newMenu ul li:first-child {padding-top:0;} .all-badge {padding:6px 9px;} .visit-badge {padding:6px 9px;} .header .logo {flex-direction:column; align-items:flex-start; gap:5px;} .riseMbLogo {top:75px; left:40px; width:175px;} .header {height:80px;} .header .logo .gbtLogo img{height:25px;} .header .logo .siteLogo img{height:25px;} #menu .risevv {top:30px; left:30px;} } @media (max-width: 640px) { .all-badge {display:none;} #menu {padding:160px 30px 0 30px;} .visit-badge.visit-badge-sub {display:flex;position: absolute;bottom: -43px;left: auto;right: -50px;} .visit-badge {display:none;} .mbVisitAll {display:flex; position:absolute; right:30px; flex-direction:column;} .mbVisitAll .mbVisit {display:flex;} .mbVisitAll .mb-visit-all {display:flex; align-items: center;gap: 10px;padding: 6px 9px;border-radius: 0 0 8px 8px;background: rgba(255, 255, 255, .14);color: #fff;line-height: 1;backdrop-filter: saturate(140%) blur(4px);-webkit-backdrop-filter: saturate(140%) blur(4px);} .mb-label {font-size:13px; line-height:1;} .mb-count {font-size:13px; font-weight:600;} .mbVisitAll.mbSubVisit {display:flex; position:absolute; right:20px; top:90px; flex-direction:column;} } @media (max-width:480px) { #menu {padding:120px 30px 0 30px;} .newMenu ul li .bigMenu {font-size:24px;} .riseMbLogo {width:135px; top:65px;left:30px;} .header {padding:0 15px;} #menu .risevv {top:30px; left:30px; width:150px;} .menuBox .hMenu {margin-left:20px;} .mb-visit-all {right:20px; top:30px;} .visit-badge.mbVisit {right:20px; top:60px;} .mbVisitAll {right:10px;} .mbVisitAll.mbSubVisit {right:10px;} } @media (max-width:420px) { .newMenu ul li div .smallMenu {font-size:14px;} #menu {padding:130px 20px 0 20px;} .close {top:20px; right:20px; width:20px; height:20px;} .newMenu ul li .bigMenu {font-size:20px;} .riseMbLogo {width:135px; left:20px;} .newMenu ul li div .smallMenu {margin-right:15px;} .riseMbLogo {top:54px;} #menu .risevv {left:20px; top:20px;} } @media (max-width:360px) { .visit-badge.mbVisit {padding:6px 12px;} } /**풀페이지 퀵메뉴 **/ .mt-47 {margin-top: 47px !important;} .mt-47 .sMenu{overflow:visible !important;} .subNav {position: fixed; top: 50%; left: 60px; z-index: 11; transform: translateY(-50%);} .subNav ul li {position: relative;} .subNav > ul > li {margin: 23px 0;} .subNav > ul > li > a {position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff;} .subNav > ul > li > a p {width: 100px !important; display: inline-block; font-size: 20px; color: #fff; font-weight: 400; position: absolute; z-index: 1; width: auto; top: 0; left: 28px; top: 50%; transform: translateY(-50%);} .subNav ul li a.long_tit p {width: 140px !important;} .subNav ul li.active > a:before {content: ""; width: 144px; height: 40px; position: absolute; top: 50%; left: -22px; transform: translateY(-50%); border-radius: 30px; background-color: rgba(255,255,255,0.2); z-index: -1;} .subNav ul li.active > a {background-color: #fff;} .subNav ul li.active a.long_tit:before {width: 178px;} .subNav ul li ul.sMenu {height: 0; overflow: hidden; transition: all .3s; padding-left: 26px; margin-top: 24px;} .subNav ul li ul.sMenu li {margin-top: 14px;} .subNav ul li ul.sMenu li:nth-of-type(1) {margin-top: 0;} .subNav ul li ul.sMenu li:before {display: none;} .subNav ul li.active ul.sMenu {height: auto;} .subNav ul li ul.sMenu li a {font-size: 16px; font-weight: 300; color: #fff; position: relative; padding-left: 24px;} .subNav ul li ul.sMenu li a:before {position: absolute; content: ""; width: 0px; height: 0px; top: 50%; transform: translateY(-50%); left: 0; border-top: 4px solid transparent; border-left: 6px solid #fff; border-bottom: 4px solid transparent;} .fp-viewing-div4 .subNav > ul > li > a , .fp-viewing-div5 .subNav > ul > li > a {border: 1px solid #000;} .fp-viewing-div4 .subNav > ul > li > a p , .fp-viewing-div5 .subNav > ul > li > a p {color: #000;} .fp-viewing-div4 .subNav ul li.active > a , .fp-viewing-div5 .subNav ul li.active > a {background-color: #000;} .fp-viewing-div4 .subNav ul li.active > a:before , .fp-viewing-div5 .subNav ul li.active > a:before {background-color: rgba(136,136,137,0.2);} .fp-viewing-div4 .subNav ul li ul.sMenu li a , .fp-viewing-div5 .subNav ul li ul.sMenu li a {color: #000;} .fp-viewing-div4 .subNav ul li ul.sMenu li a:before , .fp-viewing-div5 .subNav ul li ul.sMenu li a:before {border-top: 4px solid transparent; border-left: 6px solid #000; border-bottom: 4px solid transparent;} .section {position: relative;} @media (max-width: 1400px) { .subNav {left: 40px;} } @media (max-width: 991px) { .subNav > ul > li {margin: 20px 0;} .subNav > ul > li > a p {font-size: 18px;} .subNav ul li ul.sMenu li {margin-top: 10px;} .subNav ul li.active > a:before {width: 134px;} .subNav ul li.active a.long_tit:before {width: 158px;} } @media (max-width: 768px) { .subNav {display: none;} } /** 2025 09 23추가 **/ /* 칩 목록(대학 리스트)이 길 때 스크롤 */ .univBox .univCont .listBox .rightBox .slideCont {height: auto;padding: 0 30px 10px;overflow: hidden;} .univBox .univCont .listBox .rightBox .slideCont .univList {overflow-y: auto;padding-right: 6px;} .univBox .univCont .listBox .rightBox .slideCont .univList::-webkit-scrollbar{ width:8px; } .univBox .univCont .listBox .rightBox .slideCont .univList::-webkit-scrollbar-thumb{background: rgba(255,255,255,.35); border-radius: 999px;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li{cursor: pointer;transition: transform .12s ease, background-color .12s ease, color .12s ease, border-color .12s ease;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li:hover{transform: translateY(-1px);background: rgba(255,255,255,.12);} .univBox .univCont .listBox .rightBox .slideCont .univList ul li.is-active{background:#fff; color:#0E1A60; border-color:#fff; font-weight:700;} .univBox .univCont .listBox .rightBox .slideCont .univList {color : #fff;} .univDetail{margin: 12px 30px 28px;background: rgba(0,0,0,.28);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);border-radius: 20px;padding: 18px 18px 22px;color:#fff;box-shadow: 0 10px 24px rgba(0,0,0,.18) inset, 0 6px 16px rgba(0,0,0,.10);} .univDetail .uHead{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;} .univDetail .uTit{font-size:17px; font-weight:700; opacity:.9;} .univDetail .uPhoto{border-radius:10px; overflow:hidden; margin:10px 0 14px; background:#111;} .univDetail .uPhoto img{display:block; width:100%; height:220px; object-fit:cover;} .univDetail .uPhoto .noImage{display:none;} .univDetail .uPhoto .noImage img {object-fit:none; } .univDetail .uInfo{text-align:center;} .univDetail .uInfo strong{display:block; font-size:17px;} .univDetail .uInfo p{line-height:1.6; font-size:16px;} .sectionWrap {background:url(/serviceAssets/img/m-bg1.jpg) no-repeat; background-size:cover; background-position:center;} #section3 {background:url(/serviceAssets/img/m-bg2.jpg) no-repeat; background-size:cover; background-position:top;} .mapCont{position:relative;} .map-overlay{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;} .region{transform:translate(0,0) scale(1);transition:transform .16s ease;} .region .shape{fill:rgba(36,86,200,.22);stroke:rgba(10,28,90,.55);stroke-width:1;} .region.is-active .shape{fill:rgba(36,86,200,.34);} .region text{fill:#fff; font-weight:700; text-anchor:middle; dominant-baseline:middle;paint-order:stroke fill; stroke:#1a2b6e; stroke-width:2; opacity:.98; user-select:none;} #section0{position:relative;} .uni-area{position:absolute;left:0;right:0;bottom:40px;z-index:50;pointer-events:none;} .uni-carousel{position:relative;width:100%; margin:0 auto; padding:20px 0; pointer-events:auto;} .uni-track{margin:0;opacity:0;transition:opacity .25s ease;} .uni-track.slick-initialized{opacity:1;} .uni-card{display:flex !important; cursor:pointer; align-items:center; justify-content:flex-start; flex-direction:column; background:rgb(0 0 0 / 25%); height:300px; backdrop-filter:blur(6px); border-radius:16px;overflow:hidden;padding:20px;color:#fff;text-decoration:none; margin:0 10px;} .uni-card div {width:100%; display:flex; padding:15px 0 0 ; justify-content:center; align-items:center; flex-direction:column;} .thum{max-width:100%;height:120px;object-fit:cover; } .uni-badge{ inline-size: auto ;block-size: 36px; min-height:38px; display: grid;place-items: center;padding: 4px 20px;border-radius: 999px;background:#fff;overflow: hidden; margin-bottom:10px;} .uni-badge img { max-inline-size: 100%;max-block-size: 70%;width: auto;height: auto;object-fit: contain;display:block;} .uni-ttl{display:block;font-size:17px; display: -webkit-box; -webkit-line-clamp: 2; min-height:40px; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;font-weight:500;line-height:1.2;margin:5px 0 0 0; text-align:center;} .uni-meta{display:block;font-size:15px; padding-top:5px;} .uni-ctrl{position:absolute;left:12px;right:12px;top:-24px;display:flex;gap:14px;align-items:center;justify-content:flex-start; pointer-events:auto;} .uni-ctrl span {font-size:20px;} .uni-prev,.uni-next,.uni-toggle{width:30px;height:18px; cursor:pointer; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;border:0;transition:transform .15s ease;} .uni-prev:hover,.uni-next:hover,.uni-toggle:hover{ transform:translateY(-1px); } .uni-prev{ background-image:url('/serviceAssets/img/m_arrow.png'); } .uni-next{ background-image:url('/serviceAssets/img/m_arrow2.png'); } .uni-toggle.is-playing { background-image:url('/serviceAssets/img/m_stop.png'); } .uni-toggle.is-paused { background-image:url('/serviceAssets/img/m_try.png'); } .uni-prevB,.uni-nextB,.uni-toggleB{width:30px;height:18px; cursor:pointer; display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:contain;border:0;transition:transform .15s ease;} .uni-prevB:hover,.uni-nextB:hover,.uni-toggleB:hover{ transform:translateY(-1px); } .uni-prevB{ background-image:url('/serviceAssets/img/m_arrow_b.png'); } .uni-nextB{ background-image:url('/serviceAssets/img/m_arrow2_b.png'); } .uni-toggleV.is-playing { background-image:url('/serviceAssets/img/m_stop_b.png'); } .uni-toggleV.is-paused { background-image:url('/serviceAssets/img/m_try_b.png'); } .uni-card:hover{ transform:translateY(0px); box-shadow:0 8px 20px rgba(0,0,0,.18); transition:.2s; } .uni-card div p {display:flex; border-top:1px solid #3a3a3a; padding-top:10px; font-size:15px; width:100%; text-align:center; display:flex; justify-content:center;} @media (max-width:1199px) { .uni-ttl {font-size:16px;} .uni-card {padding:15px; margin:0 5px; height:290px;} .univDetail .uPhoto img {height:170px;} } @media (max-width:991px) { .univDetail .uInfo strong {font-size:17px;} .univDetail .uTit {font-size:15px; font-weight:500;} .univDetail .uInfo p {font-size:15px} .univDetail {backdrop-filter:none; background:transparent; box-shadow:none;border-radius:0; margin:10px;} } @media (max-width:640px) { .sectionWrap {background:url(/serviceAssets/img/m-bg3.jpg) no-repeat; background-size:cover; background-position:center;} .uni-card {height:260px;} } @media (max-width:480px) { .uni-ttl {font-size:15px;} .uni-card div p {font-size:13px;} .sectionWrap {background:url(/serviceAssets/img/m-bg5.jpg) no-repeat; background-size:cover; background-position:center;} } @media (max-width:418px) { .uni-card div {padding:10px 0 0 0;} .uni-card {height:270px;} } @media (max-width:360px) { .uni-meta {font-size:14px; padding-top:0;} .uni-ttl {font-size:15px; margin-top:5px;} .uni-card div p {font-size:15px;} .uni-badge {height:38px; padding:0 20px;} } /** 메인 section1 **/ .visualSlisde {width: 100%; height: 100%; position: relative;} .visualSlisde .visual {position: relative; width: 100%; height: 100vh;} .visualSlisde .visual01 {background: url(/serviceAssets/img/mainImg.jpg) no-repeat 50% 50%; background-size: cover;} .visualSlisde .visual02 {background: url(/serviceAssets/img/visual_1_.jpg) no-repeat 50% 50%; background-size: cover;} .visualSlisde .visual03 {background: url(/serviceAssets/img/visual_1_.jpg) no-repeat 50% 50%; background-size: cover;} .visualSlisde .slick-dots {position: absolute; bottom: 100px; left: 50%; transform: translateX(calc(-50% - 54px)); display: flex;} .visualSlisde .slick-dots li {margin-left: 42px;} .visualSlisde .slick-dots li button {position: relative; color: transparent; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; padding: 0;} .visualSlisde .slick-dots li.slick-active button:before {position: absolute; content: ""; width: 26px; height: 26px; border-radius: 50%; background-color: rgba(255,255,255,0.2); top: 50%; left: 50%; transform: translate(-50%, -50%);} .ctrlBtn {position: absolute; bottom: 100px; left: 50%; transform: translateX(calc(-50% + 67px));} .ctrlBtn button.btn_pause {width: 12px; height: 21px; background: url(/serviceAssets/img/visual_stop.png) no-repeat 50% 50% transparent;} .ctrlBtn button.btn_pause.on {background: url(/serviceAssets/img/visual_play.png) no-repeat 50% 50% transparent;} .section .slogan {position: absolute; top: 50%; left: 50%; gap:20px; height:100%;flex-direction:column; transform: translate(-50%, -50%); color: #fff; width: 100%; display: flex; align-items: center; justify-content:space-between; padding:150px 160px 20px 160px; z-index: 1;} /* 폰트색상 블랙/ 화이트 */ .section .slogan.white {color:#fff;} .section .slogan.black {color:#000;} .section .slogan .mainSlogan span.black {-webkit-text-stroke:2px solid #000;} .section .slogan .msBox {width: 100%; padding:0 10px;} .section .slogan .mainSlogan {font-size: 50px; margin-bottom: 30px;} .section .slogan .mainSlogan p {line-height: 0.95; margin-top: 16px; opacity: 0;} .section .slogan .mainSlogan p:nth-of-type(1) {margin-top: 0; animation: padeUp1 2s linear forwards; -webkit-animation: padeUp1 1.5s linear forwards;} .section .slogan .mainSlogan p:nth-of-type(2) {animation: padeUp1 1.5s 1s linear forwards; padding-top:12px;-webkit-animation: padeUp1 1.5s 1s linear forwards;} .section .slogan .mainSlogan p:nth-of-type(3) {animation: padeUp1 1.5s 2s linear forwards; -webkit-animation: padeUp1 1.5s 2s linear forwards;} .section .slogan .mainSlogan p:nth-last-of-type(1) {animation: padeUp1 1.5s 3s linear forwards; -webkit-animation: padeUp1 1.5s 3s linear forwards;} .section .slogan .mainSlogan span {font-size: 60px; -webkit-text-stroke: 2px #fff; color: transparent; padding-right:2px;} .section .slogan .subSlogan {font-size: 26px; font-weight: 300; line-height:1.4; margin-top: 0; opacity: 0; animation: padeUp1 1.5s 4s linear forwards; -webkit-animation: padeUp1 1.5s 4s linear forwards;} .section .slogan .subSlogan span {font-weight: 600;} .section .slogan .subSlogan br {display:none;} .infoDown {position: absolute; top: 50%; right: 40px; color: #fff; transform: translateY(-50%) rotate(270deg); text-align: center;} .infoDown p {font-family: 'Poppins-Light';} .infoDown p span {position: relative; width: 16px; height: 24px; vertical-align: middle; margin-right: 12px; transform: rotate(-270deg); border-radius: 10px; border: 2px solid #fff; display: inline-block; } .infoDown p span:before {width: 2px; height: 6px; background-color: #fff; top: 2px; left: 5px; content: ""; position: absolute; animation: scrollAni 1.15s linear infinite; -webkit-animation: scrollAni 1.15s linear infinite; transition: all .3s;} .visualSlisde .slick-dots li button {display:none;} .visualSlisde .slick-list {height:968px;} .visualSlisde .visual {height:968px;} .section .slogan .mainSlogan .cousine {font-family:'Cousine'; font-size:60px;} @keyframes scrollAni{ 0% {opacity: 0; transform: translateY(0);} 100% {opacity: 1; transform: translateY(7px);} } @-webkit-keyframes scrollAni{ 0% {opacity: 0; transform: translateY(0);} 100% {opacity: 1; transform: translateY(7px);} } @keyframes padeUp1{ 0% {opacity: 0; transform: translateY(100px);} 100% {opacity: 1; transform: translateY(0);} } @-webkit-keyframes padeUp1{ 0% {opacity: 0; transform: translateY(100px);} 100% {opacity: 1; transform: translateY(0);} } @media (max-width:1650px) { .section .slogan {padding:150px 100px 20px 100px;} .section .slogan .mainSlogan p {margin-top:12px;} } @media (max-width:1500px) { .section .slogan {padding: 150px 50px 20px 50px;} } @media (max-width: 1400px) { .section .slogan .mainSlogan span {font-size: 60px;} .infoDown {right: 20px;} } @media (max-width: 1200px) { .section .slogan .mainSlogan {margin-bottom: 30px;} .section .slogan .mainSlogan p {margin-top: 10px;} .visualSlisde .slick-list {height:880px;} .section .slogan .subSlogan {font-size: 22px;} .infoDown {right: -10px;} .infoDown p {font-size: 16px; letter-spacing: 0.75px;} .section .slogan {padding:120px 50px 20px 50px;} .section .slogan .mainSlogan p:nth-of-type(2) {padding-top:5px;} .section .slogan .mainSlogan {display:flex; align-items:flex-start; flex-direction:column;} } @media (max-width: 991px) { .infoDown {right: -40px;} .section .slogan {padding:120px 30px 20px 30px;} } @media (max-width:767px) { .section .slogan .mainSlogan {font-size:40px;} .section .slogan .mainSlogan span {-webkit-text-stroke:1px #fff; font-size:50px;} .section .slogan .mainSlogan span.black {-webkit-text-stroke:1px #000;} .section .slogan .mainSlogan .cousine {font-size:50px;} .visualSlisde .slick-list {height:820px;} .section .slogan .subSlogan {font-size:20px;} } @media (max-width: 640px) { .section .slogan .subSlogan {font-size: 20px;} .visualSlisde .slick-dots {bottom: 140px; transform: translateX(calc(-50% - 44px));} .ctrlBtn {bottom: 140px; transform: translateX(calc(-50% + 72px));} .infoDown {top: auto; right: auto; left: 50%; bottom: 80px; transform: translate(-50% , 0) rotate(0deg)} .infoDown p {display:none;} .infoDown p span {transform: rotate(0);} .uni-ctrl span {font-size:17px;} } @media (max-width: 480px) { .section .slogan .mainSlogan {font-size: 44px; margin-bottom: 20px;} .section .slogan .mainSlogan p {font-size:36px; margin-top:5px;} .section .slogan .mainSlogan span {font-size: 50px;} .section .slogan .subSlogan {font-size: 18px;} .visualSlisde .slick-dots {bottom: 100px;} .ctrlBtn {bottom: 100px;} .infoDown {bottom: 40px;} .visual .slogan {width:100%;} .visual .slogan .subSlogan {padding:0 40px;} .visualSlisde .slick-list {height:800px;} .section .slogan .msBox {padding:0 5px;} .uni-ttl {min-height:38px;} } @media (max-width:420px) { .visualSlisde .slick-list {height:750px;} } @media (max-width:360px) { .section .slogan .mainSlogan p {font-size:28px;} .section .slogan .mainSlogan span {font-size:40px;} .section .slogan .mainSlogan .cousine {font-size:40px;} .section .slogan .mainSlogan {margin-bottom:15px;} .section .slogan .subSlogan {font-size:17px;} } /** 메인 section2 **/ .newsBox {display: flex; width: 100%; height: auto; padding:160px 100px 280px 100px; gap:6%;} .newsBox .box {position: relative; width: 50%; height: auto;} .newsBox .box.leftBox { display: flex; flex-direction: column; justify-content: space-between; min-height:764px; width:48%; max-width:48%;} .newsBox .box.leftBox:after {display: none;} .newsBox .box.leftBox .tit p {color: #000;} .newsBox .box.leftBox .tit p.mTit {font-size: 50px; letter-spacing: -2px; margin-top: 10px;} .newsBox .box.leftBox .tit p.mTit span {letter-spacing: 0; -webkit-text-stroke: 1px #000; color: transparent; display: inline-block; margin-right: 10px;} .newsBox .box.leftBox .tit p.sTit {padding-right: 20px; word-break: keep-all; font-size: 30px; margin-top: 18px; font-weight: 300;} .newsBox .box.leftBox .tit a.moreBtn {display: inline-block; padding: 10px 46px; border: 1px solid #fff; color: #fff; font-size: 22px; font-weight: 600; margin-top: 20px;} .newsBox .box.leftBox .tit a.moreBtn:hover {background:#fff; color:#2A3384; transition:0.3s;} .newsBox .box.leftBox .videoBox {position: relative; width: 100%; height: 70%; background:url(/serviceAssets/img/thumbnail.jpg) no-repeat; background-size: contain; margin-top: 80px;} .newsBox .box.leftBox .videoBox a { width: 140px; height: 140px; background: url(/serviceAssets/img/video_play.png) no-repeat 60% 50% rgba(255,255,255,0.4); border-radius: 50%; position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); cursor: pointer; transition: all .3s;} .newsBox .box.leftBox .videoBox a:hover {opacity: 0.5; transition: all .3s;} .newsBox .box.rightBox {display: flex; align-items: center; justify-content: flex-start; flex-direction: column; width:48%; max-width:48%;} .newsBox .box.rightBox .boxCont {width: 100%;} .newsBox .box.rightBox .tit {font-size: 30px; font-weight: 300; display:flex; justify-content:space-between; align-items:flex-end;} .newsBox .box.rightBox .tit p span {font-weight: 700;} .newsBox .box.rightBox .tab_tit {position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: 48px;} .newsBox .box.rightBox .tab_tit ul {display: flex; width: 100%;} .newsBox .box.rightBox .tab_tit ul li {width: 20%; height: 60px; display: flex; justify-content: center; align-items: center; background-color: #757991; color: #fff; margin-left: 10px; transition: all .3s; cursor: pointer; font-size: 20px; font-family: 'LeferiBaseRegular';} .newsBox .box.rightBox .tab_tit ul li:nth-of-type(1) {margin-left: 0;} .newsBox .box.rightBox .tab_tit ul li.active {background-color: #465BD9; transition: all .3s;} .newsBox .box.rightBox .tab_tit ul li img {margin-right: 26px;} .newsBox .box.rightBox a.moreBtn {font-size: 22px; font-weight: 600; color: #000;} .newsBox .box.rightBox a.moreBtn img {vertical-align: baseline; margin-left: 6px;} .newsBox .box.rightBox a.moreBtn img.arrow_white {display: none;} .newsBox .box.rightBox .tab_content {padding: 32px 0;} .newsBox .box.rightBox .tab_content .list > ul > li {padding: 26px 0; border-top: 1px solid #000; display: flex; justify-content: space-between; cursor: pointer;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-of-type(1) {border-top: 2px solid #000; padding: 30px 0; justify-content: start;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-last-of-type(1) {border-bottom: 2px solid #000; padding-bottom: 30px;} .newsBox .box.rightBox .tab_content .list > ul > li p {overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; letter-spacing: -1px;} .newsBox .box.rightBox .tab_content .list > ul > li.subList p {width: 74%; font-size: 20px; font-weight: 300;} .newsBox .box.rightBox .tab_content .list > ul > li.subList span {margin-right: 60px; font-size: 18px; font-weight: 400;} .newsBox .box.rightBox .tab_content .list > ul > li .day {width: 100px; padding:18px;height: auto; display: flex; justify-content: center; align-items: center; text-align: center; border: 1px solid #000; margin-right: 40px;} .newsBox .box.rightBox .tab_content .list > ul > li .day p {font-weight: 900; font-size: 26px; line-height: 1; } .newsBox .box.rightBox .tab_content .list > ul > li .day span {font-size: 14px; font-weight: 300;} .newsBox .box.rightBox .tab_content .list > ul > li .data {width: calc(100% - 130px);} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-size: 22px; } .newsBox .box.rightBox .tab_content .list > ul > li .data .subData {margin-top: 16px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-weight: 300; font-size: 20px; margin-top: 4px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p:nht-of-type(1) {margin-top: 0;} @media (max-width: 1800px) { .newsBox .box.rightBox .tab_tit ul li {font-size: 18px;} .newsBox {padding:100px; gap:60px;} } @media (max-width: 1600px) { .newsBox .box.leftBox .tit p.sTit {font-size: 22px;} .newsBox .box.rightBox .tab_tit ul li {height: 52px;} .newsBox .box.rightBox .tab_tit a.moreBtn {position: absolute; bottom: -24px; right: 0; font-size: 20px;} .newsBox .box.rightBox .tab_tit a.moreBtn img {height: 12px;} .newsBox .box.leftBox .videoBox a {top:33%;} .newsBox .box.rightBox .tab_content {padding:40px 0;} } @media (max-width:1500px) { .newsBox {padding:80px 50px 100px;} .newsBox .box.leftBox .tit p.mTit {line-height:1; margin-top:0;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-size:17px;} } @media (max-width: 1400px) { .newsBox {padding:80px 50px 100px 50px;} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-size:20px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-size:17px;} .newsBox .box.rightBox .tab_tit ul li {font-size: 16px;} .newsBox .box.rightBox .tab_tit ul li img {margin-right: 14px; height: 20px;} .newsBox .box.rightBox a.moreBtn {font-size: 18px;} .newsBox .box.rightBox .tab_content .list > ul > li {padding:20px 0;} .newsBox .box.rightBox .tab_content .list > ul > li .day {margin-right: 30px;} .newsBox .box.rightBox .tab_content .list > ul > li .data {width: calc(100% - 120px);} .newsBox .box.rightBox .tab_content .list > ul > li.subList p {font-size: 17px;} .newsBox .box.rightBox .tab_content .list > ul > li.subList span {margin-right: 20px; font-size:17px;} .newsBox .box.leftBox .videoBox a {top:29%; width:100px; height:100px;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-last-of-type(1) {padding-bottom:20px;} } @media (max-width: 1200px) { .newsBox {display: block; height: auto; padding:50px 50px 100px 50px; background:linear-gradient(0deg, rgb(13 21 46 / 60%), rgb(13 16 53 / 0%));} .newsBox .box {padding-top: 0;} .newsBox .box.leftBox {width: 100%; background-image: none; max-width:100%; min-height:auto;} .newsBox .box.leftBox {height: 650px;} .newsBox .box.leftBox .videoBox a {width: 100px; height: 100px; background-size: 42px; top:50%; left:50%; transform:translate(-50% , -50%);} .newsBox .box.rightBox {width: 100%; padding: 50px 0 0 0; max-width:100%;} .newsBox .box.rightBox .tab_tit ul li {background:#fff; color:#000;} .newsBox .box.rightBox .tab_tit ul li.active {color:#fff;} .newsBox .box.rightBox .tit {color: #fff;} .newsBox .box.rightBox .tab_tit {margin-top: 28px;} .newsBox .box.rightBox a.moreBtn {color: #fff;} .newsBox .box.rightBox a.moreBtn img.moreArrow {display: none;} .newsBox .box.rightBox a.moreBtn img.arrow_white {display: inline-block;} .newsBox .box.rightBox .tab_content .list > ul > li {border-top: 1px solid #fff; color: #fff;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-of-type(1) {border-top: 2px solid #fff;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-last-of-type(1) {border-bottom: 2px solid #fff;} .newsBox .box.rightBox .tab_content .list > ul > li .day {border: 1px solid #fff;} .newsBox .box.leftBox .tit p.mTit {margin:20px 0;} .newsBox .box.leftBox .videoBox {margin-top:0; height:100%; background-size:cover;} .newsBox .box.leftBox .tit p.sTit {margin-top:0; padding-bottom:20px;} } @media (max-width:1099px) { } @media (max-width: 991px) { .newsBox {padding:50px 30px;} .newsBox .box.leftBox {height: 540px;} .newsBox .box.leftBox .tit p.mTit {font-size: 46px;} .newsBox .box.leftBox .tit p.sTit {margin-top: 10px;} .newsBox .box.leftBox .tit a.moreBtn {padding: 8px 34px; font-size: 18px; margin-top: 14px;} .newsBox .box.leftBox .videoBox a {width: 80px; height: 80px; background-size: 30px;} .newsBox .box.rightBox {padding: 30px 0;} .newsBox .box.rightBox .tit {font-size: 26px;} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-size: 20px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-size: 18px;} .newsBox .box.rightBox .tab_content .list > ul > li.subList p {font-size: 16px;} .newsBox .box.rightBox .tab_content .list > ul > li.subList span {font-size: 16px;} } @media (max-width: 767px) { .newsBox {padding-bottom: 40px;} .newsBox .box.leftBox {padding: 50px 20px 30px;} .newsBox .box.leftBox .tit p.mTit {margin:0; font-size:34px;} .newsBox .box.leftBox .tit p.sTit {font-size: 20px;} .newsBox .box.rightBox {padding: 40px 0 0;} .newsBox .box.rightBox .boxCont {padding: 0 20px 100px 20px;} .newsBox .box.rightBox .tit {font-size: 24px;} .newsBox .box.rightBox .tab_content {padding: 30px 0 0;} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-size: 18px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-size:16px;} .newsBox {padding:0;} .uni-prev, .uni-next, .uni-toggle {width:28px; height:14px;} } @media (max-width: 640px) { .newsBox {background:transparent;} .newsBox .box.rightBox .tab_tit ul {gap: 4px; grid-template-columns:repeat(5, minmax(20%, auto))} .newsBox .box.rightBox .tab_tit ul li {width: calc(33.33% - 7px); height: 40px; font-size: 15px; margin-left: 0; background:#eaecee;} .newsBox .box.rightBox .tab_tit ul li img {height: 16px;} .newsBox .box.rightBox .tab_tit a.moreBtn {font-size: 16px;} .newsBox .box.rightBox .tab_content .list > ul > li {padding: 22px 0; color:#000; border-top:1px solid #000;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-of-type(1) {padding: 24px 0; border-top:1px solid #000;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-last-of-type(1) {padding-bottom: 24px; border-bottom:1px solid #000;} .newsBox .box.rightBox .tab_content .list > ul > li .day {width: 80px; margin-right: 20px; border:1px solid #000;} .newsBox .box.rightBox .tab_content .list > ul > li .day p {font-size: 22px;} .newsBox .box.rightBox .tab_content .list > ul > li .data {width: calc(100% - 100px);} .newsBox .box.leftBox .tit p.mTit {font-size:35px;} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-weight:500;} .newsBox .box.rightBox .tit p{color:#000; line-height:1.4;} } @media (max-width:540px) { .newsBox .box.leftBox .videoBox {background-size:100%;} .newsBox .box.leftBox .videoBox a {top:50%;} .newsBox .box.leftBox {height:450px;} .newsBox .box.rightBox {padding:0;} .newsBox .box.rightBox .boxCont {padding:50px 20px 100px 20px;} } @media (max-width: 480px) { .newsBox {padding-bottom: 30px;} .uni-prev, .uni-next, .uni-toggle {width:23px;} .newsBox .box.leftBox {padding:40px 15px 30px; height:400px;} .newsBox .box.rightBox .boxCont {padding:0 20px 30px 20px;} .newsBox .box.leftBox .tit p.mTit {margin: 0; font-size: 30px;} .newsBox .box.leftBox .tit a.moreBtn {padding: 6px 34px; font-size: 16px;} .newsBox .box.leftBox .videoBox a {width: 60px; height: 60px; } .newsBox .box.rightBox {padding: 30px 0 0;} .newsBox .box.rightBox .tit {font-size: 20px;} .newsBox .box.rightBox .tab_tit {margin-top: 18px;} .newsBox .box.rightBox .tab_tit ul li {font-size:14px;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-of-type(2) {border-top:none;} .newsBox .box.rightBox .tab_content .list > ul > li.subList p {font-size:14px;} .newsBox .box.rightBox .tab_content {padding: 20px 0 0;} .newsBox .box.rightBox .tab_content .list > ul > li {padding: 16px 0;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-of-type(1) {border:1px solid #000; padding:10px; display:block;} .newsBox .box.rightBox .tab_content .list > ul > li:nth-last-of-type(1) {padding-bottom: 16px;} .newsBox .box.rightBox .tab_content .list > ul > li .day {width: 100%; margin-right: 0; margin-bottom: 14px; padding:0; border:none;} .newsBox .box.rightBox .tab_content .list > ul > li .day .mainDay {display: flex; width: 100%; background:#fff; border:none; color:#000; flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: 8px 10px;} .newsBox .box.rightBox .tab_content .list > ul > li .day span {font-size: 16px; font-weight:600;} .newsBox .box.rightBox .tab_content .list > ul > li .day p {font-size: 16px; letter-spacing: 0; font-weight: 600; margin-left: 4px; background:#2A3384; color:#fff; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100%;} .newsBox .box.rightBox .tab_content .list > ul > li .data {width: 100%;} .newsBox .box.rightBox .tab_content .list > ul > li .data p.listTit {font-size: 16px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData {margin-top: 10px;} .newsBox .box.rightBox .tab_content .list > ul > li .data .subData p {font-size: 15px;} .newsBox .box.rightBox .tab_content .list > ul > li.subList span {font-size: 14px; width:auto; margin-right:5px;} .newsBox .box.rightBox a.moreBtn {font-size: 16px;} .newsBox .box.rightBox a.moreBtn img {vertical-align: middle; margin-top: -2px;} } @media (max-width:420px) { .newsBox .box.leftBox {height:360px;} } @media (max-width:400px) { .newsBox .box.rightBox .tab_tit ul li {font-size:11px; height: 35px;} } @media (max-width:380px) { .newsBox .box.leftBox .tit p.sTit {font-size:17px;} .newsBox .box.rightBox {padding:10px 0 0;} .newsBox .box.rightBox .boxCont {padding:60px 15px 30px 15px;} } @media (max-width:360px) { .newsBox .box.leftBox {height:300px; padding:30px 20px 10px;} } /**비디오팝업**/ .video_popup.on {display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 99999; background-color: rgba(0,0,0,0.5);} .video_popup .video-wrapper {position: relative; width: 80%; height: 80%; /* padding-bottom: 45%; */ z-index: 999999;} .video_popup .video-wrapper iframe {position: absolute; width: 100%; height: 100%;} .video_popup.on .popup-closer {position: absolute; top: 6%; right: 10%; transform: translateX(4px); width: 30px; height: 30px; background: url(/serviceAssets/img/popup_close.png) no-repeat 50% 50%; border-radius: 50%; z-index: 99999; cursor: pointer;} /** 메인 section3 **/ .projectWrap {width:100%; height:100vh; } .projectWrap .proTit {color:#fff; font-weight:300; font-size:46px; position:relative; padding-top:80px; text-align:center;} .projectWrap .proTit b {font-weight:600;} .secBox {display: flex; align-items: center; height:87%; padding:100px 160px;} .secBox ul {display:flex; align-items: stretch; width: 100%; height:80%;} .secBox ul li {display:flex; flex-direction:column; justify-content:center; flex: 1; height: 100%; transform: translateY(9%); transition:all 0.5s ease; border-left:1px solid rgb(255 255 255 / 22%);} .secBox ul li .iconBox {display: flex; align-items: center; padding-right: 10px;} .secBox ul li .iconBox > p {color: #fff; margin-left: 20px; font-weight: 700; font-size: 30px;} .secBox ul li .iconBox::before {content:''; display:inline-flex; align-items:center; width:15px; height:15px; position:absolute; left:-8px; border-radius:50%; border:2px solid #fff; top:-15px; } .secBox ul li .iconBox .imgHover {position:relative; width:78px; height:78px; background:rgb(255 255 255 / 60%); display:flex; border-radius:50%; margin-left:30px; align-items:center; justify-content:center;} .secBox ul li .iconBox .imgHover .img1 {background:url(/serviceAssets/img/projectIcon1.png) no-repeat 50% 50%; background-size: 50px; position:absolute; width:54px; height:48px;} .secBox ul li .iconBox .imgHover .img2 {background:url(/serviceAssets/img/projectIcon2.png) no-repeat 50% 50%; background-size: 40px; position:absolute; width:40px; height:48px;} .secBox ul li .iconBox .imgHover .img3 {background:url(/serviceAssets/img/projectIcon3.png) no-repeat 50% 50%; background-size: 50px; position:absolute; width:62px; height:48px;} .secBox ul li .iconBox .imgHover .img4 {background:url(/serviceAssets/img/projectIcon4.png) no-repeat 50% 50%; background-size: 50px; position:absolute; width:64px; height:48px;} .secBox ul li .txtBox {margin:32px 0 30px 30px;} .secBox ul li .txtBox h3 {margin-bottom: 6px; color:#fff; font-size:24px; line-height:1; font-weight: 400; letter-spacing:-2px;} .secBox ul li .txtBox p {color:#fff; font-size:24px; line-height:1.2;} .secBox ul li .txtHover {margin:0 0 24px 20px; transition:all 0.5s ease; opacity: 0;} .secBox ul li .txtHover p {color:#fff; font-size:18px; font-weight:200; line-height:0; transition: all 0.5s ease;} .secBox ul li:hover {height: 100%; transform: translateY(0);} .secBox ul li:hover .imgHover {background:#D5E3FF; transition:0.3s;} .secBox ul li:hover .iconBox::before {background:#fff; transition:0.3s;} .secBox ul li:hover .iconBox .img1 {background:url(/serviceAssets/img/projectIcon1-1.png) no-repeat 50% 50%; transition:0.3s; background-size: 50px; position:absolute; width:54px; height:48px;} .secBox ul li:hover .iconBox .img2 {background:url(/serviceAssets/img/projectIcon2-1.png) no-repeat 50% 50%; transition:0.3s; background-size: 40px; position:absolute; width:40px; height:48px;} .secBox ul li:hover .iconBox .img3 {background:url(/serviceAssets/img/projectIcon3-1.png) no-repeat 50% 50%; transition:0.3s; background-size: 50px; position:absolute; width:62px; height:48px;} .secBox ul li:hover .iconBox .img4 {background:url(/serviceAssets/img/projectIcon4-1.png) no-repeat 50% 50%; transition:0.3s; background-size: 50px; position:absolute; width:64px; height:48px;} .secBox ul li:hover .txtHover {opacity: 1; margin:0 0 0 30px;} .secBox ul li:hover .txtHover p {line-height:1.6; transition: all 0.5s ease;} .secBox ul li:hover .txtHover p span {display:block;} .secBox ul li .viewBtn {width:180px; height:50px; margin:100px 0 0 30px; border:1px solid #fff; transition:all 0.3s ease;} .secBox ul li .viewBtn a {display:inline-flex; padding:12px 0 12px 40px; align-items: center; width:100%; height:100%; color:#fff; font-size:18px; font-weight:500; background:url(/serviceAssets/img/arrow_white.png) no-repeat 80% 50%; background-size:7px;} .secBox ul li:hover .viewBtn a {display:inline-flex; padding-left:40px; align-items: center; width:100%; height:100%; color:#000; font-size:18px; font-weight:500; background:url(/serviceAssets/img/arrow_black.png) no-repeat 80% 50%; background-size:7px; transition:0.3s;} .secBox ul li:hover .viewBtn {background:#fff; } .secBox ul.animated.fadeInUp {-webkit-animation-name:fadeInUp; animation-name:fadeInUp;} .fadeInUp {opacity:0;-webkit-transform: translateX(400px); transform: translateX(400px); }@-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(400px);} 50%{opacity: 0.3; }100% { opacity: 1; -webkit-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(400px); } 50%{opacity: 0.3; }100% { opacity: 1; transform: translateY(0); } } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .delay-800 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .ke-component figure {margin-top:20px !important;} @media (max-width: 1800px) { .secBox ul li .iconBox .imgHover {margin-left: 20px;} .secBox ul li .iconBox > p {font-size: 26px;} .secBox ul li .txtBox {margin: 32px 0 30px 20px;} .secBox ul li .viewBtn {margin: 100px 0 0 20px;} .secBox ul li:hover .txtHover {margin: 0 0 0 20px;} } @media (max-width: 1600px) { .secBox {padding: 50px 160px;} .secBox ul li .iconBox > p {font-size: 24px; margin-left: 10px;} .secBox ul li .iconBox .imgHover {width: 68px; height: 68px;} .secBox ul li .iconBox .imgHover .img1{background-size: 40px} .secBox ul li .iconBox .imgHover .img2{background-size: 32px} .secBox ul li .iconBox .imgHover .img3{background-size: 40px} .secBox ul li .iconBox .imgHover .img4{background-size: 40px} .secBox ul li:hover .iconBox .img1 {background-size: 40px} .secBox ul li:hover .iconBox .img2 {background-size: 32px} .secBox ul li:hover .iconBox .img3 {background-size: 40px} .secBox ul li:hover .iconBox .img4 {background-size: 40px} .secBox ul li .txtBox h3 {font-size: 20px;} .secBox ul li .txtBox p {font-size: 20px;} .secBox ul li {height:80%;} } @media (max-width: 1400px) { .secBox {padding: 0 60px 0 100px;} .secBox ul li {height:70%;} .secBox ul li .viewBtn {width: 160px;} .secBox ul li .viewBtn a {font-size: 16px; padding-left: 35px;} .secBox ul li:hover .viewBtn a {font-size: 16px; padding-left: 35px;} .secBox ul li .iconBox > p {font-size: 22px;} .secBox ul li .iconBox .imgHover {margin-left: 10px;} .secBox ul li .txtBox {margin: 22px 0 20px 10px;} .secBox ul li:hover .txtHover {margin: 0 0 0 10px;} .secBox ul li .viewBtn {margin: 100px 0 0 10px;} .projectWrap .proTit {font-size:40px; padding-top:180px;} } @media (max-width: 1200px) { .projectWrap .proTit {font-size: 40px; padding:20px 0 50px 0;} .projectWrap {height:100%;} .secBox {padding: 40px 50px 60px 50px;} .secBox ul {flex-wrap: wrap; overflow: hidden; height: auto; padding-top: 15px; margin-top: -45px; padding-left: 10px;} .secBox ul.animated.fadeInUp {animation: none; gap:20px 0;} .fadeInUp {opacity: 1; transform: none;} .secBox ul li .iconBox::before {left:-18px;} .secBox ul li {width: 48%; gap:5px; padding-left:10px; height: auto; float: left; margin: 45px 1% 0; transform: none; flex: auto;} .secBox ul li .iconBox .imgHover {margin-left: 10px;} .secBox ul li .txtHover {opacity: 1;} .secBox ul li .txtHover p {line-height: 1.4; padding:2px 10px; font-weight:500; font-size:14px; margin-bottom:5px; margin-right:3px; background:#fff; color:#000; border-radius:30px; display:inline-block;} .secBox ul li .txtHover p br {display: none;} .secBox ul li:hover .txtHover {margin: 0 0 30px 10px;} .secBox ul li .iconBox {position: relative;} .secBox ul li .viewBtn {margin: auto 0 0 10px;} .secBox ul li .txtHover {margin: 0 0 14px 10px;} } @media (max-width: 991px) { .secBox {padding:30px;} .projectWrap .proTit {font-size: 36px;} .secBox ul li .txtBox h3 {font-size: 18px;} .secBox ul li .txtBox p {font-size: 18px;} } @media (max-width: 767px) { .projectWrap .proTit {font-size: 32px;} .secBox {padding: 40px 20px 60px;} .secBox ul li .viewBtn {height: 40px;} .uni-carousel {padding:20px 0 0;} } @media (max-width: 640px) { .projectWrap {height: auto;} .projectWrap .proTit {padding-top: 40px; font-size: 28px;} .secBox ul li {padding: 0 10px 0 0; width: 100%;} .secBox ul li .iconBox > p {font-size: 20px;} .secBox ul li .txtBox {margin: 16px 0 10px 20px;} .secBox ul li .txtHover {margin: 10px 0 14px 20px;} .secBox ul li .viewBtn {width: 140px;} .secBox ul li .viewBtn a {font-size: 15px; padding-left: 25px;} .secBox ul li:hover .viewBtn a {font-size: 15px; padding-left: 20px;} .secBox ul li:hover .txtHover {margin: 0 0 14px 20px;} .news span {line-height:1.6 !important; font-size:15px !important;} .secBox ul li .iconBox::before {left:-8px;} .section .slogan {padding:120px 20px 30px 20px;} .secBox ul li .iconBox > p {margin-left:20px;} .secBox ul li .viewBtn {margin:auto 0 0 20px;} .secBox ul li .iconBox .imgHover {margin-left:20px;} } @media (max-width: 480px) { .projectWrap .proTit {font-size: 24px; padding:40px 0 0 0;} .secBox {padding: 30px 15px 40px;} .secBox ul li {width: 100%;} .secBox ul li .iconBox .imgHover {width:60px; height:60px;} .secBox ul li .iconBox .imgHover .img1 {background-size:34px;} .secBox ul li .iconBox .imgHover .img2 {background-size:24px;} .secBox ul li .iconBox .imgHover .img3 {background-size:34px;} .secBox ul li .iconBox .imgHover .img4 {background-size:34px;} .secBox ul li:hover .iconBox .img1 {background-size:34px;} .secBox ul li:hover .iconBox .img2 {background-size:24px;} .secBox ul li:hover .iconBox .img3 {background-size:34px;} .secBox ul li:hover .iconBox .img4 {background-size:34px;} .secBox ul li .iconBox::before {width:10px; height:10px; top:-9px; left:-6px;} .secBox ul li .txtBox p {font-size:15px;} .section .slogan{padding:110px 10px 20px 10px;} .ke-component figure {position:relative; width:100%; overflow:hidden;} .ke-component figure img {display:block; width:100% !important; height:auto !important; object-fit:cover; object-position:center;} } @media (max-width:420px) { .uni-carousel {padding:10px 0 0;} } @media (max-width:360px) { .projectWrap .proTit {font-size:21px;} .secBox ul li .txtBox h3 {font-size:20px; font-weight:500;} .section .slogan {padding:100px 10px 15px 10px;} } /** 메인 section4 **/ #section3 {z-index: 1; overflow: hidden;} #section3:after {position: absolute; top: 0; opacity: 0.05; z-index: -1; right: 0; content: ""; width: 592px; height: 690px; background: url(/serviceAssets/img/section4_bg_top.png) no-repeat 50% 50%;} .univBox {padding: 50px 100px 100px 100px; display: flex; align-items: center; justify-content: center; height: 100%;} .univBox .univsBox {width: 100%;} .univBox .univCont {display: flex;} .univBox .univCont .mapBox {width: 471px;} .univBox .univCont .mapBox > p {font-size: 40px; color:#fff; font-weight: 200; letter-spacing: -2px; margin-bottom: 40px;} .univBox .univCont .mapBox > p span {font-weight: 600;} .univBox .univCont .mapBox .mapCont img {max-width: 100%;} .univBox .univCont .mapBox .mapCont area {cursor: pointer;} .univBox .univCont .mapBox .mapInfo {display: flex; align-items: center; margin-top: 20px;} .univBox .univCont .mapBox .mapInfo .iconBox {width: 58px; height: 58px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 16px;} .univBox .univCont .mapBox .mapInfo .infoBox {font-size: 18px; font-weight: 300;} .univBox .univCont .mapBox .mapInfo .infoBox p {font-size:20px;color:#fff;} .univBox .univCont .mapBox .mapInfo .infoBox p span {font-weight: 500;} .univBox .univCont .listBox {width: calc(100% - 511px); align-items: stretch; display: flex; gap:20px; margin-left: 50px;} .univBox .univCont .listBox > div {width: 50%; border-radius: 20px;} .univBox .univCont .listBox .boxTit {background-color: #2A3384; border-radius: 20px 20px 0 0; color: #fff; position: relative; padding: 40px 30px;} .univBox .univCont .listBox .leftBox .boxTit {background:linear-gradient(0deg, #192880, #5069FF);} .univBox .univCont .listBox .boxTit p {font-size: 30px; font-weight: 500;} .univBox .univCont .listBox .boxTit span {font-weight: 200; font-size: 22px; display: inline-block; margin-top: 6px;} .univBox .univCont .listBox .boxTit img {position: absolute; top: 50%; transform: translateY(-50%); right: 30px;} .univBox .univCont .listBox .leftBox .boxCont {background-color: #fff; border-radius: 0 0 20px 20px; height: calc(100% - 148px); overflow: hidden; box-shadow: 7px 7px 10px rgba(124,130,146,0.20);} .univBox .univCont .listBox .leftBox .boxCont ul {display: flex; flex-wrap: wrap; height:100%;} .univBox .univCont .listBox .leftBox .boxCont ul li {width: 50%; display: flex; justify-content: flex-start; align-items: center; padding: 30px 20px; border-top: 1px solid #eee;} .univBox .univCont .listBox .leftBox .boxCont ul li:nth-of-type(odd) {border-right: 1px solid #eee;} .univBox .univCont .listBox .leftBox .boxCont ul li:nth-of-type(1) , .univBox .univCont .listBox .leftBox .boxCont ul li:nth-of-type(2) {border-top: 0;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox {width: 86px; height: 86px; display: flex; align-items: center; justify-content: center; margin-right: 16px; border-radius: 20px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {font-size: 18px; font-weight: 500; margin-top: 0;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit br {display:none;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {font-size: 18px; font-weight: 400; margin-top: 18px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p span {font-weight: 800; display: inline-block; margin-right: 4px;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorV {background-color: #EEEEFF;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorB {background-color: #E7F1FF;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorR {background-color: #FFE4D9;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorO {background-color: #EBE2FF;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorG {background-color: #DDF7EC;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorS {background-color:#C9F7FA;} .univBox .univCont .listBox .rightBox {background: url(/serviceAssets/img/list_silde_bg.jpg) no-repeat 50% 50%; background-size: cover; position: relative; min-height: 0;max-height: 730px;overflow-y: auto;} .univBox .univCont .listBox .rightBox::-webkit-scrollbar{ width:8px; } .univBox .univCont .listBox .rightBox::-webkit-scrollbar-thumb{background: rgba(255,255,255,.35); border-radius: 999px;} .univBox .univCont .listBox .rightBox .boxTit {background-color: transparent;} .univBox .univCont .listBox .rightBox .slideCont {padding: 0 30px;} .univBox .univCont .listBox .rightBox .slideCont .slick-dots {display: flex; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);} .univBox .univCont .listBox .rightBox .slideCont .slick-dots li button {width: 10px; height: 10px; background-color: transparent; color: transparent; border-radius: 50%; border: 1px solid #fff; padding: 0; margin:0 3px;} .univBox .univCont .listBox .rightBox .slideCont .slick-dots li.slick-active button {background-color: #fff; margin:0 3px;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li {display: inline-block; margin: 1% 0.5%; padding: 5px 18px; font-size: 16px; border: 1px solid #fff; border-radius: 50px; color: #fff;} .univBox p.ptxt {margin-top: 20px; margin-bottom: 16px; font-size: 26px; font-weight: 700;} .univBox .sumBox {display: flex; gap: 26px;} .univBox .sumBox .box {width: 20%; background-color: #fff; height: 210px; border-radius: 15px; box-shadow: 7px 7px 9px rgba(87,103,135,0.14); display: flex; justify-content: center; align-items: center; text-ailgn: center;} .univBox .sumBox .box .sBox {width: 100%; text-align: center;} .univBox .sumBox .box .sBox .txtBox {margin-top: 14px;} .univBox .sumBox .box .sBox .txtBox p.inTit {font-size: 21px;} .univBox .sumBox .box .sBox .txtBox span.nums {font-size: 35px; font-weight: 700; padding-right:5px;} .univBox .sumBox .box .sBox .txtBox p {font-size: 24px; margin-top: 10px;} .univBox .univCont .mapInfo2 {display:none;} .univBox .univCont .mapMbBox {width:100%; display:none;} .univBox .univCont .mapMbBox .mapMbTit {text-align:center;font-size:28px; padding-bottom:30px;} .univBox .univCont .mapMbBox .mapMbTit span {font-weight:700;} .univBox .univCont .mapMbBox .formGroup button {background: url(/serviceAssets/img/search_icon1.png) no-repeat #000 50% 50%; color:#fff; width:48px; border-radius:7px; margin-left:4px; height:45px;} .univBox .formGroup {position: relative;margin-bottom: 20px;} .select-type5 {display:none;} .select-type5 select {background-color: white; border:none; padding: 0 10px; z-index: 10; height: 45px; width: 100%; outline: none; border-radius: 6px; transition: 0.2s cubic-bezier(0, .2, .2, 1) border-color; transition-delay: 0.1s; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #333; background: url(/serviceAssets/img/select_off.png)no-repeat #fff; background-position: right 15px center !important; font-size: 16px; cursor: pointer;} .select-type5 select:focus {border-color: #2A3384; background: url(/serviceAssets/img/select_on.png) no-repeat #fff; cursor: pointer;} .select-type5 select::placeholder {font-size: 15px; color: #bbb;} .select-type5 .border {display: block; position: absolute; left: 0; bottom: 0; top: 0; width: 0; opacity: 0; border-radius: 16px;} .select-type5 .border:before {content: ''; display: block; position: absolute; right: 50%; bottom: 0; top: 0; border: solid 1px #2A3384; border-right: 0; border-left: 0; width: 0; transition: 0.2s cubic-bezier(0, .2, .2, 1) all;} .select-type5 .border:after {content: ''; display: block; position: absolute; top: 0; left: 50%; bottom: 0; border: solid 1px #2A3384; border-left: 0; border-right: 0; width: 0; transition: 0.2s cubic-bezier(0, .2, .2, 1) all;} .select-type5 select:focus ~ .border {opacity: 1; width: 88%;} .select-type5 select:focus ~ .border:before {width: 46%;} .select-type5 select:focus ~ .border:after {width:0;} .root_daum_roughmap {width: 100% !important;} @media (max-width:1830px) { .univBox .univCont .listBox .leftBox .boxCont ul li {padding: 30px 15px 30px 15px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit br {display:block;} } @media (max-width:1820px) { .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox {margin-right:12px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {font-size:17px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {font-size:17px; margin-top:8px;} } @media (max-width:1760px) { .univBox .univCont .listBox .leftBox .boxCont ul li {flex-direction:column; padding: 20px 30px; align-items:center; justify-content:center; } .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox {width:24px; height:24px; margin-right:0;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox img {height:30px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {text-align:center;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {margin-top:6px; font-size:18px; text-align: center;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox {margin-top:10px;} .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorV , .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorB , .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorR, .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorO , .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorG , .univBox .univCont .listBox .leftBox .boxCont ul li .imgBox.colorS {background:transparent;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li {padding:7px 20px; font-size:15px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit br {display:none;} .univBox .univCont .listBox .boxTit img {width:42px;} } @media (max-width:1600px) { .univBox .sumBox .box .sBox .txtBox span.nums {font-size:24px;} .univBox .sumBox .box .sBox .txtBox p.inTit {font-size:18px;} .univBox .sumBox .box {height:170px;} .univBox .sumBox .box .sBox img {height:32px;} .univBox {padding:0 100px 100px;} .univBox .univCont .listBox {gap:20px;} } @media (max-width:1500px) { .univBox {padding:60px 60px 100px 60px;} .univBox .univCont .listBox {width:100%;} .univBox .univCont {flex-direction:column;} .univBox .univCont {align-items:center;} .univBox .univCont .mapBox .mapInfo {margin-top:0; margin-bottom:20px;} .univBox .univCont .listBox {margin-left:0;} .univBox .univCont .mapBox .mapInfo {display:none;} .univBox .univCont .mapInfo2 {display:flex; align-items:center; padding-bottom:20px;} .univBox .univCont .mapInfo2 .iconBox {background:#fff; width:40px; height:40px; border-radius:10px; position:relative;} .univBox .univCont .mapInfo2 .iconBox img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:20px;} .univBox .univCont .mapInfo2 .infoBox p {padding-left:10px; color:#fff; font-size:22px;} .univBox .univCont .mapInfo2 .infoBox p span {font-weight:700;} .univBox .sumBox {gap:15px;} .univBox .univCont .listBox .rightBox {max-height:670px; height:100%;} .univBox .univCont .listBox .boxTit {padding:30px;} .univBox .univCont .listBox {height:670px;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li {margin:0.5% 0.2%;} .univBox .univCont .listBox .leftBox .boxCont {height:calc(100% - 128px);} .univBox .univCont .listBox {padding-top:50px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {margin-top:12px; font-size:20px;} } @media (max-width:1400px) { .univBox .univCont .listBox {gap:30px;} .univBox {padding:60px 100px 100px 100px;} } @media (max-width:1200px) { .univBox {padding:100px 50px 50px;} .univBox .univCont .mapInfo2 {padding-bottom:0;} .univBox .univCont .listBox .leftBox .boxCont {height:calc(100% - 119px);} } @media (max-width:1199px) { .univBox .univCont .listBox {height:660px;} .univBox .univCont .listBox .rightBox {max-height:660px;} .univBox p.ptxt {font-size: 22px;} .univBox .sumBox .box .sBox .txtBox p {font-size:18px;} .univBox .sumBox .box .sBox .txtBox span.nums {font-size:18px;} .univBox .sumBox .box {height:130px;} .univBox .sumBox .box .sBox img {height:26px;} .univBox .sumBox .box .sBox .txtBox p {margin-top:6px;} .univBox .sumBox .box .sBox .txtBox {margin-top:10px;} .univBox .univCont .mapBox > p {font-size:32px; text-align:center;} .univBox .univCont .listBox .boxTit p {font-size:25px;} .univBox .univCont .listBox .boxTit span {font-size:19px;} .univBox .sumBox .box .sBox .txtBox p.inTit {font-size:16px;} } @media (max-width:991px) { .univBox {padding:100px 30px 50px;} .univBox .sumBox {display:block;} .univBox .sumBox:after {display:block; content:''; clear:both;} .univBox .sumBox .box {width:32.3%; float:left; margin-right:1.5%;} .univBox .sumBox .box.marR {margin-right:0;} .univBox .sumBox .box.marT {margin-top:10px;} .univBox .univCont .mapInfo2 p {font-size:16px;} .univBox .univCont .listBox {height:600px; gap:15px;} .univBox .univCont .listBox .rightBox {max-height:600px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {font-size:16px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {margin-top:4px;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li {padding:4px 14px; font-size:14px;} .univBox .univCont .mapInfo2 .infoBox p {font-size:19px;} .univBox .univCont .mapInfo2 .iconBox {display:none;} } @media (max-width:895px) { .univBox .univCont .listBox {gap:10px;} .univBox .univCont .listBox > div {width:100%;} .univBox .univCont .listBox .rightBox .slideCont .slick-dots {bottom:-30px;} .univBox .univCont .listBox .leftBox .boxCont ul li {padding:25px 20px;} .univDetail .uInfo strong {font-size:17px; margin-bottom:0;} .univDetail .uInfo p {font-size:15px;} .univBox .univCont .listBox {height:600px;} .univBox .univCont .listBox .rightBox {max-height:600px; padding:0;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {font-size:17px;} } @media (max-width:767px) { .univBox {padding:40px 20px;} .univBox .univCont .mapBox > p {text-align:center; margin-bottom:30px;} .univBox .univCont .listBox .boxTit {padding:20px;} .univBox .univCont .listBox .rightBox .slideCont {padding:0 20px;} .univDetail {margin:5px;} .univBox .univCont .listBox .leftBox .boxTit {height:100px;} .univBox .univCont .listBox .leftBox .boxCont {height:calc(100% - 100px);} } @media (max-width:640px) { #section3 {background:linear-gradient(0deg, #fff, #4e67c1);} .select-type5 {display:flex;} .univBox .univCont .mapMbBox {width:100%; display:block;} .univBox .univCont .listBox {flex-direction:column; height:auto;} .univBox .univCont .listBox .rightBox {max-height:inherit;} .univDetail .uPhoto img {height:auto;} .univDetail .uInfo strong {font-weight:500;} .univBox .univCont .mapMbBox .mapMbTit {display:none;} .univBox .univCont .mapInfo2 .infoBox p {padding-left:0; font-size:17px;} } @media (max-width:480px) { .univBox {padding:40px 15px;} .univBox .univCont .mapMbBox .mapMbTit {font-size:24px;} .univBox .formGroup {margin-bottom:15px;} .univBox .univCont .mapBox > p {font-size:27px;} .univBox .univCont .mapInfo2 .infoBox p {display:none;} .univBox .univCont .listBox {padding-top:0;} .univBox .univCont .listBox .boxTit {border-radius:10px 10px 0 0;} .univBox .univCont .listBox .leftBox .boxCont {border-radius:0 0 10px 10px;} .univBox .univCont .listBox > div {border-radius:10px;} .univBox .sumBox .box {border-radius:10px;} .univBox .univCont .listBox .boxTit p {font-size:22px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {font-size:18px; padding-top:3px;} .univBox .sumBox .box {height:116px;} .univBox .sumBox .box .sBox img {height:20px;} .univBox .univCont .listBox .boxTit span {font-size:17px;} .univBox .univCont .listBox .boxTit img {width:30px;} .mapCont {display:none;} } @media (max-width:420px) { .univBox .univCont .listBox .rightBox .slideCont {padding:0 20px;} .univBox .univCont .listBox .boxTit {padding:25px 20px;} .univBox .univCont .listBox .rightBox .slideCont .univList ul li {padding:5px 20px;} .univBox .univCont .listBox .boxTit p {font-size:20px;} .univBox .univCont .listBox .boxTit span {font-size:16px;} } @media (max-width:380px) { .univBox .sumBox .box {height:100px;} .univBox .sumBox .box .sBox .txtBox p.inTit {font-size:14px;} .univBox .sumBox .box {width:100%; margin-right:0; margin-top: 10px;} .univBox .sumBox .box:nth-of-type(1) {margin-top: 0;} .univBox .sumBox .box.marT {margin-top:6px;} .univBox .sumBox .box .sBox .txtBox p {font-size:15px;} .univBox .sumBox .box .sBox .txtBox span.nums {font-size:15px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p.tit {font-size:17px;} .univBox .univCont .listBox .leftBox .boxCont ul li .txtBox p {font-size:16px;} } /** 찾아오시는길 **/ .mapWrap {width:100%; display:flex; flex-direction:column; justify-content:space-between;} .mapWrap .mapConBox {width: 100%; display: flex; align-items: center;} .mapWrap .mapBox .mapdata > p {font-size: 26px; margin: 40px 0 20px; font-weight: 600;} .mapWrap .mapBox .mapdata .dBox p {font-size: 20px; margin-top: 10px;} .mapWrap .mapBox .mapdata .dBox p:nth-of-type(1) {margin-top: 0;} .mapWrap .mapCon { width:100%; height:100%; position:relative; padding:50px 160px; display:flex; justify-content:flex-start; align-items: center; } .mapWrap .mapCon .mapBox {width: 50%;} .mapWrap .mapCon .txtBox {width: 50%; padding-left: 70px;} .mapWrap .mapCon .txtBox > p {font-size: 30px; font-weight: 600; margin-bottom: 20px;} .mapWrap .mapCon .txtBox .tBox {padding: 20px 30px; box-shadow: 0 0 7px rgba(122,124,129,0.15); border-radius: 15px; margin-top: 14px;} .mapWrap .mapCon .txtBox .tBox:nht-of-type(1) {margin-top: 0;} .mapWrap .mapCon .txtBox .tBox > p {font-size: 20px; font-weight: 600; margin-bottom: 16px;} .mapWrap .mapCon .txtBox .tBox > p img {display: inline-block; margin-right: 12px;} .mapWrap .mapCon .txtBox .tBox ul li {position: relative; padding-left: 14px; margin-top: 2px;} .mapWrap .mapCon .txtBox .tBox ul li:before {position: absolute; top: 14px; left: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #2A3384; content: "";} .mapWrap .mapCon .txtBox .tBox ul li:nth-of-type(1) {margin-top: 0;} .mapWrap .mapCon .txtBox .tBox ul li p {position: relative; padding-left: 30px; margin-top: 8px; display: inline-block; font-size: 18px; color: #474A52;} .mapWrap .mapCon .txtBox .tBox ul li p:before {position: absolute; top: 4px; left: 12px; width:7px; height: 12px; background: url(/serviceAssets/img/map_arrow.png) no-repeat 50% 50%; content: "";} .mapWrap .mapCon .txtBox .tBox ul li p:nth-of-type(1) {padding-left: 0;} .mapWrap .mapCon .txtBox .tBox ul li p:nth-of-type(1):before {display: none;} .mapWrap .mapCon .txtBox .tBox ul li p span {color: #000;} .mapWrap .mapCon .txtBox .tBox ul li p span.fmd {font-weight: 600;} .mapWrap .mapCon .txtBox .tBox .route {display: flex;} .mapWrap .mapCon .txtBox .tBox .route .rBox {display: flex; align-items: center; margin-left: 24px;} .mapWrap .mapCon .txtBox .tBox .route .rBox:nth-of-type(1) {margin-left: 0;} .mapWrap .mapCon .txtBox .tBox .route .rBox span {padding: 4px 10px; background-color: #2A3384; color: #fff; display: inline-block; margin-right: 14px;} .mapWrap .mapCon .txtBox .tBox .route .rBox p {color: #474A52; font-size: 18px;} .root_daum_roughmap .border1 {border:none !important;} .root_daum_roughmap .border2 {border:1px solid #fff !important;} .root_daum_roughmap .border3 {border:1px solid #fff !important;} .root_daum_roughmap_landing .border4 {border:1px solid #fff !important;} .root_daum_roughmap .wrap_controllers {position:absolute !important; margin-top:-45px !important; border:none !important; z-index:556 !important ; padding:15px 20px !important; background:#000 !important;} .root_daum_roughmap .wrap_controllers:hover { background:#19287f !important; transition:0.3s !important; cursor:pointer !important;} .root_daum_roughmap .wrap_controllers .tit_controllers img {filter: brightness(0) invert(1) !important;} .root_daum_roughmap .wrap_controllers .wrap_btn_roadview .txt {font-size:16px !important; color:#fff !important; font-family:'pretendard' !important; padding-left:10px !important; line-height:13px !important;} .bannerWrap {padding:0 200px; height:70px;border-top:1px solid #ebebeb; box-sizing:content-box;} .notiWrap {display:flex;} .notiWrap .left {display:flex; align-items:center;} .notiWrap .left span {font-size:22px; font-weight:700; width:150px;} .flow_banner:before,.flow_banner:after {content: "";position: absolute;top: 0;width: 100px; /* Adjust the gradient width */height: 100%;z-index: 10;pointer-events: none;} .flow_banner:before {left: 0;background: linear-gradient(to right, white, transparent);} .flow_banner:after {right: 0;background: linear-gradient(to right, white, transparent);transform:rotate(180deg);} .flow_banner {overflow: hidden;position: relative;display: flex;} .flow_banner .list {display: flex;} .flow_banner .list > li {white-space: nowrap;display:flex; align-items:center; color: #fff;padding:0 40px; height:70px;} .flow_banner .list > li img {} .flow_banner .list > li .coopLogo1 {width:150px;} .flow_banner .list > li .coopLogo2 {width:180px;} .flow_banner .list > li .coopLogo3 {width:160px;} .flow_banner .list > li .coopLogo4 {width:160px;} .flow_banner .list > li .coopLogo5 {width:180px;} .flow_banner .list > li .coopLogo6 {width:230px;} .flow_banner .list > li .coopLogo7 {width:220px;} .flow_banner .list > li .coopLogo8 {width:175px;} .flow_banner .list > li .coopLogo9 {width:200px;} .flow_banner .list > li .coopLogo10 {width:235px;} .flow_banner .list > li .coopLogo11 {width:100px;} .flow_banner .list > li .coopLogo12 {width:100px;} .flow_banner .list > li .coopLogo13 {width:153px;} .flow_banner .list > li .coopLogo14 {width:150px;} .flow_banner .list > li .coopLogo15 {width:130px;} @keyframes flowRolling {0% {transform: translateX(0);}100% {transform: translateX(-100%);}} @media (max-width:1800px) { .mapWrap .mapCon .txtBox .tBox {padding: 20px;} .mapWrap .mapCon .txtBox .tBox ul li p {padding-left: 20px;} .mapWrap .mapCon .txtBox .tBox ul li p:before {left: 6px;} } @media (max-width:1700px) { .bannerWrap {padding:0 100px;} .flow_banner .list > li {padding:0 40px;} } @media (max-width:1600px) { .mapWrap .mapCon .txtBox {padding-left: 50px;} .mapWrap .mapConBox {align-items: normal;} .mapWrap {height:auto;} } @media (max-width:1400px) { .bannerWrap {padding:0 50px;} .mapWrap .mapBox .mapdata .dBox p {font-size: 18px;} .mapWrap .mapCon .txtBox {padding-left: 50px;} .mapWrap .mapCon .txtBox > p {margin-bottom: 16px;} .mapWrap .mapCon .txtBox .tBox ul li p {font-size: 16px;} .mapWrap .mapCon .txtBox .tBox .route .rBox p {font-size: 17px;} .mapWrap .mapCon .txtBox .tBox .route .rBox span {font-size: 16px;} .mapWrap .mapCon {padding:50px 100px; justify-content:flex-start;} .notice-wrap {width:100%;} .notice-wrap .left {display:none;} .slider-controls {display:none;} .notice-wrap {padding:0;} } @media (max-width:1199px) { .mapWrap {height: auto;} .mapWrap .mapCon {padding:60px;} .mapWrap .mapConBox {display: block;} .mapWrap .mapCon .mapBox {width: 100%;} .mapWrap .mapCon .txtBox {width: 100%; padding-left: 0; margin-top: 40px;} .mapWrap .mapCon .txtBox .tBox > p {margin-bottom: 10px;} .mapWrap .mapBox .mapdata > p {margin-top: 20px;} .mapWrap .mapCon .txtBox div span {font-size:17px;} .bannerWrap {background:#fff; z-index:8;} .notice-wrap .right {width:100%; padding:0 20px;} .bannerWrap {padding:0 50px;} .notiWrap .left {display:none;} } @media (max-width:991px) { .notice-wrap {justify-content:flex-start;} .bannerWrap {padding:0 30px;} } @media (max-width:767px) { .mapWrap .mapCon {padding: 20px 20px 40px 20px;} .mapWrap .mapBox .mapdata > p {font-size: 24px;} .mapWrap .mapCon .txtBox > p {font-size: 24px;} .bannerWrap {padding:0;} .flow_banner .list > li {padding:0 20px;} .flow_banner .list > li .coopLogo1 {width:130px;} .flow_banner .list > li .coopLogo2 {width:160px;} .flow_banner .list > li .coopLogo3 {width:140px;} .flow_banner .list > li .coopLogo4 {width:140px;} .flow_banner .list > li .coopLogo5 {width:160px;} .flow_banner .list > li .coopLogo6 {width:210px;} .flow_banner .list > li .coopLogo7 {width:200px;} .flow_banner .list > li .coopLogo8 {width:155px;} .flow_banner .list > li .coopLogo9 {width:180px;} .flow_banner .list > li .coopLogo10 {width:215px;} .flow_banner .list > li .coopLogo11 {width:80px;} .flow_banner .list > li .coopLogo12 {width:80px;} .flow_banner .list > li .coopLogo13 {width:133px;} .flow_banner .list > li .coopLogo14 {width:130px;} .flow_banner .list > li .coopLogo15 {width:110px;} } @media (max-width:640px){ .notice-wrap {height:70px;} .bannerWrap {height:70px;} .notice-wrap .right {margin-top:-6px;} } @media (max-width:480px) { .mapWrap .mapBox .mapdata > p {margin-bottom: 10px; font-size: 20px;} .mapWrap .mapBox .mapdata .dBox p {font-size: 16px; margin-top: 6px;} .mapWrap .mapCon .txtBox {margin-top: 14px;} .mapWrap .mapCon .txtBox > p {font-size: 20px;} .mapWrap .mapCon .txtBox .tBox {padding: 14px;} .mapWrap .mapCon .txtBox .tBox > p {font-size: 18px;} .mapWrap .mapCon .txtBox .tBox > p img {height: 24px; margin-right: 10px;} .mapWrap .mapCon .txtBox .tBox:nth-of-type(1) > p img {height: 20px;} .mapWrap .mapCon .txtBox .tBox ul li {padding-left: 10px;} .mapWrap .mapCon .txtBox .tBox ul li p {padding-left: 14px; margin-top: 6px;} .mapWrap .mapCon .txtBox .tBox ul li p:before {left: 3px;} .mapWrap .mapCon .txtBox .tBox .route {display: block;} .mapWrap .mapCon .txtBox .tBox .route .rBox {margin-left: 0; margin-top: 8px;} .mapWrap .mapCon .txtBox .tBox .route .rBox span {font-size: 14px;} .mapWrap .mapCon .txtBox h1 {font-size:23px; padding:0 0 15px 0;} .mapWrap .mapCon .txtBox div span {font-size:15px; padding-bottom:7px;} .notice-wrap .right {padding:0 0 0 10px ;} .root_daum_roughmap .wrap_map {height:350px !important;} .mapWrap .mapCon .txtBox {align-items:flex-start; text-align:left; height:auto; margin-top:26px;} .root_daum_roughmap .wrap_controllers {background:rgb(0 0 0 / 51%) !important;} .root_daum_roughmap .wrap_controllers:hover {background:rgb(0 0 0 / 51%) !important;} .bannerWrap {box-shadow:none; border-top:1px solid #e0e0e0;} } @media (max-width:420px) { .mapWrap .mapCon .txtBox .tBox ul li p {font-size:14px;} .mapWrap .mapCon .txtBox div span {font-size:14px;} .mapWrap .mapCon .txtBox .tBox .route .rBox span {padding:2px 8px;} .mapWrap .mapCon .txtBox .tBox .route .rBox p {font-size:14px;} } /** 서브페이지 기본 공통 **/ .subVisual {position: relative; width: 100%; height: 600px; overflow: hidden;} .subVisual .bg {position: relative; width: 100%; height: 100%;} .subVisual01 {background: url(/serviceAssets/img/subVisual_1.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual02 {background: url(/serviceAssets/img/subVisual_2.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual03 {background: url(/serviceAssets/img/subVisual_3.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual04 {background: url(/serviceAssets/img/subVisual_4.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual05 {background: url(/serviceAssets/img/subVisual_5.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual06 {background: url(/serviceAssets/img/subVisual_07.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual02.subVisual08 {background: url(/serviceAssets/img/subVisual_3.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} .subVisual03.subVisual09 {background: url(/serviceAssets/img/subVisual_4.jpg) no-repeat 50% 50%; background-size: cover; animation: zoomIn 4s ease-in-out; transform: scale(1.0);} @keyframes zoomIn{ from {transform: scale(1);} to {transform: scale(1.0);}} .subVisual .titBox {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; color: #fff; text-align: center; display: flex; align-items: center; justify-content: center; padding-top: 79px;} .subVisual .titBox .stitBox span.stit {font-size: 33px; font-weight: 500; display: block;} .subVisual .titBox .stitBox p.mtit {font-size: 70px; font-weight: bold; line-height: 1; margin-top: 20px;} .subVisual .titBox .navBox {margin-top: 80px; display: flex; justify-content: center;} .subVisual .titBox .navBox.navBox2 ul {min-width:200px;} .subVisual .titBox .navBox ul {display: flex; justify-content: space-between; width: 90%; min-width: 300px;} .subVisual .titBox .navBox ul li {position: relative; font-size: 20px;} .subVisual .titBox .navBox ul li a {color: #fff;} .sNav_menu {display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #CECECE;} .sNav_menu a {position: relative; display: inline-block; color: #000; font-weight: 500; padding: 27px 0; font-size: 19px; margin-left: 75px;} .sNav_menu a:nth-of-type(1) {margin-left: 0;} .sNav_menu a.active {color: #2A3384; font-weight: 700;} .sNav_menu a.active:before {position: absolute; bottom: -1px; left: 0; width: 100%; height: 4px; background-color: #2A3384; content: "";} .subCont {max-width: 1400px; margin: 0 auto; padding: 80px 0;} @media (max-width: 1600px) { .subCont {padding: 80px 60px;} } @media (max-width: 1400px) { .subVisual {height: 500px;} } @media (max-width: 1200px) { .subVisual {height: 460px;} .subVisual .titBox .stitBox span.stit {font-size: 26px;} .subVisual .titBox .stitBox p.mtit {font-size: 60px;} .subVisual .titBox .navBox {margin-top: 70px;} .subVisual .titBox .navBox ul {width: 100%;} .subVisual .titBox .navBox ul li:nth-of-type(1) a img {width: 20px; margin-top: -5px;} .sNav_menu a {padding: 20px 0;} .subCont {padding:60px;} .subCont.con2 {padding:60px;} } @media (max-width: 991px) { .subVisual .titBox .stitBox p.mtit {font-size: 50px;} .subVisual .titBox .navBox ul {min-width: 280px;} .subVisual .titBox .navBox ul li {font-size: 18px;} .subCont {padding: 50px 40px;} .subCont.con2 {padding:50px 40px;} .subVisual .titBox .navBox.navBox2 ul {min-width:190px;} } @media (max-width:840px) { .sNav_menu a {font-size:17px;} } @media (max-width: 768px) { .pagination .pc {display: none;} .pagination .mb {display: block;} .subCont {padding: 40px 20px;} .sNav_menu a {margin-left: 60px;} } @media (max-width: 640px) { .subVisual {height: 400px;} .subVisual .titBox {padding-top:150px;} .subVisual .titBox .stitBox span.stit {font-size: 20px;} .subVisual .titBox .stitBox p.mtit {font-size: 40px;} .subVisual .titBox .navBox {margin-top: 60px;} .subVisual .titBox .navBox ul {min-width: 250px; margin-bottom:40px;} .subVisual .titBox .navBox ul li {font-size: 16px;} .subVisual .titBox .navBox ul li:nth-of-type(1) a img {width: 18px; margin-top: -3px;} .subVisual .titBox .navBox ul li img {width: 10px;} .sNav_menu a {margin-left: 40px; font-size: 15px; padding: 16px 0;} .sNav_menu a.active:before {height:3px;} .subVisual .titBox .navBox {margin-top:70px;} .subVisual .titBox .navBox.navBox2 ul {min-width:160px;} } @media (max-width: 480px) { .subVisual {height: 380px;} .subVisual .titBox {padding-top:170px;} .subVisual .titBox .stitBox span.stit {font-size: 18px;} .subVisual .titBox .stitBox p.mtit {font-size: 34px;} .subVisual .titBox .navBox {margin-top: 70px; margin-bottom:30px;} .subVisual .titBox .navBox ul {min-width: 190px;} .subVisual .titBox .navBox ul li {font-size: 14px;} .subVisual .titBox .navBox ul li:nth-of-type(1) a img {width: 16px;} .sNav_menu a {margin-left: 20px; padding: 14px 0;} .subCont {padding: 30px 20px;} .subCont.con2 {padding:30px 20px;} .subVisual .titBox .navBox.navBox2 ul {min-width:150px;} } /** 페이지네이션 **/ .pagination {text-align: center; margin-top: 60px;} .pagination:after {display: block; visibility: hidden; clear: both; content: "";} .pagination .pc {text-align: center;} .pagination .mb {display: none;} .pagination-type1 .pg_page, .pagination-type1 .pg_current {display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #DBDBDB;} .pagination-type1 .pg_page {color: #8E919F; font-size: 18px; height:40px; line-height: 40px; padding: 0 5px; min-width: 40px; text-decoration: none; border-radius: 8px;} .pagination-type1 .pg_page:hover {background-color: #fafafa;} .pagination-type1 .pg_start {text-indent: -999px; overflow: hidden; background: url('/serviceAssets/img/page_frist.png') no-repeat 50% 50% #eee; background-size:14px;padding: 0; border: 1px solid #eee;} .pagination-type1 .pg_prev {text-indent: -999px; overflow: hidden; background: url('/serviceAssets/img/page_prev.png') no-repeat 50% 50% #eee; background-size:8px;padding: 0; border: 1px solid #eee;} .pagination-type1 .pg_end {text-indent: -999px; overflow: hidden; background: url('/serviceAssets/img/page_end.png') no-repeat 50% 50% #eee; background-size:14px; padding: 0; border: 1px solid #eee;} .pagination-type1 .pg_next {text-indent: -999px; overflow: hidden; background: url('/serviceAssets/img/page_next.png') no-repeat 50% 50% #eee; background-size:8px; padding: 0; border: 1px solid #eee;} .pagination-type1 .pg_start:hover, .pagination-type1 .pg_prev:hover, .pagination-type1 .pg_end:hover, .pagination-type1 .pg_next:hover {background-color: #fafafa;} .pagination-type1 .pg_current {display: inline-block; background: #2A3384; border: 1px solid #2A3384; color: #fff; font-weight: bold; height:40px; line-height: 40px; padding: 0 10px; min-width: 40px; border-radius: 8px;} .pagination-type1 #page {display: inline-block; width: 80px; height: 60px; text-align:center; vertical-align: middle; border: 0; border-radius: 10px; padding: 6px 15px 6px 10px; line-height: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #333; background: url(/serviceAssets/img/page_mb_arrow.png) no-repeat #eee; background-position: right 15px center !important; font-size: 16px; cursor: pointer;} .pagination-type1 a.pg_prev{position:relative; width:40px; height:40px; display:inline-block; overflow:hidden;color:transparent; text-shadow:none; } .pagination-type1 a.pg_prev::after{content:""; position:absolute; left:50%; top:50%;width:8px; height:12px; transform:translate(-50%,-50%);background:url('/serviceAssets/img/page_prev.png') no-repeat center/contain;} .pagination-type1 a.pg_next{position:relative; width:40px; height:40px; display:inline-block; overflow:hidden;color:transparent; text-shadow:none;} .pagination-type1 a.pg_next::after{content:""; position:absolute; left:50%; top:50%;width:8px; height:12px; transform:translate(-50%,-50%);background:url('/serviceAssets/img/page_next.png') no-repeat center/contain;} @media (max-width: 1200px) { .pagination-type1 .pg_prev {background-size: 8px;} .pagination-type1 .pg_start {background-size: 15px;} .pagination-type1 .pg_next {background-size: 8px;} .pagination-type1 .pg_end {background-size: 15px;} } @media (max-width: 768px) { .pagination {margin-top: 40px;} .pagination-type1 #page {height: 40px;} .pagination .pc {display: none;} .pagination .mb {display: block;} } @media (max-width:480px) { .pagination {text-align:right;} } /** 체크박스 **/ .formGroup input[type=checkbox] + label:after, .formGroup input[type=checkbox] + label:before, .formGroup input[type=checkbox] + label {transition: 0.3s;} .formGroup input[type=checkbox] {display: none;} .formGroup input[type=checkbox] + label {position: relative; padding: 6px 10px 6px 30px;} .formGroup.checkbox-type2 input[type=checkbox] + label:after, .formGroup.checkbox-type2 input[type=checkbox] + label:before {content: ''; display: block; position: absolute; border-radius: 3px; width: 20px; height: 20px; line-height: 20px; background: #fff; top: 18px; left: 10px; transform: translate(-50%, -50%);} .formGroup.checkbox-type2 input[type=checkbox] + label:after {z-index: 1; box-shadow: 0 0 0 1px #ccc inset, 0 0 0 20px #fff inset, 0 0 0 0 #2A3384 inset;} .formGroup.checkbox-type2 input[type=checkbox] + label:before {z-index: -1;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:after {font: normal normal normal 13.3333333333px FontAwesome; content: ""; text-align: center; color: #fff; line-height: 20px; box-shadow: 0 0 0 1px #2A3384 inset, 0 0 0 0 #fff inset, 0 0 0 20px #2A3384 inset;} .formGroup.checkbox-type2 input[type=checkbox]:not(:checked):hover + label {color: #2A3384;} .formGroup.checkbox-type2 input[type=checkbox]:not(:checked):hover + label:after {box-shadow: 0 0 0 2px #2A3384 inset, 0 0 0 16px #fff inset, 0 0 0 20px #2A3384 inset;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:before {background: #2A3384; width: 45px; height: 45px; opacity: 0;} @media (max-width: 480px) { .formGroup.checkbox-type2 input[type=checkbox] + label:after, .formGroup.checkbox-type2 input[type=checkbox] + label:before {width: 16px; height: 16px; top: 16px;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:before {width: 16px; height: 16px;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:after {line-height: 16px; font-size: 10px;} } /** 인사말 **/ .subCont_01 {padding: 80px 100px;} .infoBox {position: relative;} .infoBox > p.tit {font-size: 50px; text-align: center; font-weight: 600; letter-spacing: -1px;} .greetCbox {width: 100%; height: 700px; background: url(/serviceAssets/img/greeting_img_1.jpg) no-repeat 50% 50%; background-size: cover; margin-top: 100px; display: flex; justify-content: end;} .greetCbox .greetCtit {font-size: 70px; font-weight: 600; color: #fff; margin: 136px 196px 0 0;} .greetCbox .greetCtit span {font-size: 45px; font-weight: 300; display: inline-block;} .greetCtxt {display: flex; justify-content: end;} .greetCtxt .txtBox {position: relative; width: 1420px; padding: 100px 100px 0; background: #fff; margin-top: -286px;} .greetCtxt .txtBox p.intro {font-size: 32px; font-weight: 500;} .greetCtxt .txtBox .sintro {margin-top: 30px;} .greetCtxt .txtBox .sintro p {font-size: 24px; font-weight: 300; line-height: 1.6; margin-top: 40px;} .greetCtxt .txtBox .sintro p:nth-of-type(1) {margin-top: 0} .greetCtxt .txtBox .sintro p span {font-weight: 600;} .greetCtxt .txtBox .outtro {margin-top: 60px; font-size: 26px; font-weight: 300;} .greetCtxt .txtBox .outtro p span {font-weight: 700; display: inline-block; margin-left: 8px;} .drtWrap {position:absolute; bottom:0; right:0; display:flex; gap:30px; flex-direction:column; align-items:center; justify-content:center;} .drtWrap .centerDrt {width:200px; height:200px; border-radius:50%; display:flex; align-items:center; justify-content:center; overflow:hidden;} .drtWrap .centerDrt img {width:100%; object-fit:cover;} .drtWrap .bgLogo {width:200px;} @media (max-width: 1800px) { .greetCtxt .txtBox {width: 1200px;} } @media (max-width: 1600px) { .subCont_01 {padding: 80px 60px;} .greetCbox {margin-top: 80px;} .greetCtxt .txtBox {width: 1100px; padding: 80px 80px 0;} .greetCtxt .txtBox p.intro {font-size: 30px;} .greetCtxt .txtBox .sintro p {font-size: 22px;} .drtWrap {gap:15px;} .drtWrap .centerDrt {width:150px; height:150px; right:-50px; bottom:-50px;} .drtWrap .bgLogo {width:150px;} } @media (max-width: 1400px) { .greetCbox {height: 600px;} .greetCbox .greetCtit {font-size: 60px; margin: 76px 76px 0 0;} .greetCtxt .txtBox {width: 950px; padding: 60px 60px 0; margin-top: -296px;} .greetCtxt .txtBox p.intro {font-size: 28px;} .greetCtxt .txtBox .sintro p {font-size: 20px;} .greetCtxt .txtBox .outtro {font-size: 24px;} } @media (max-width: 1200px) { .infoBox > p.tit {font-size: 40px;} .subCont_01 {padding: 60px;} .greetCbox {margin-top: 50px; height: 500px;} .greetCbox .greetCtit {font-size: 55px; } .greetCbox .greetCtit span {font-size: 35px;} .greetCtxt .txtBox {width: 800px; padding: 40px 40px 0; margin-top: -236px;} .greetCtxt .txtBox p.intro {font-size: 26px;} .greetCtxt .txtBox .sintro p {font-size: 17px; margin-top: 30px;} .greetCtxt .txtBox .outtro {font-size: 22px;} } @media (max-width: 991px) { .subCont_01 {padding: 50px 40px;} .greetCbox {margin-top: 50px; height: 300px; align-items: center;} .greetCbox .greetCtit {font-size: 46px; margin: 0 40px 0 0;display:flex; flex-direction:column;} .greetCtxt .txtBox {width: 100%; padding: 40px 0 0 0; margin-top: 0;} .greetCbox .greetCtit p{padding-top:5px;} .greetCbox .greetCtit span {text-align:right;} } @media (max-width:840px) { .drtWrap .centerDrt {width:100px; height:100px;} .drtWrap .bgLogo {width:100px;} } @media (max-width: 768px) { .subCont_01 {padding: 40px 20px;} .infoBox > p.tit {font-size: 34px;} .greetCbox {height: 260px; margin-top: 30px;} .greetCbox .greetCtit {font-size: 36px;} .greetCbox .greetCtit span {font-size: 26px;} .greetCtxt .txtBox p.intro {font-size: 22px;} .greetCtxt .txtBox .sintro {margin-top: 20px;} .greetCtxt .txtBox .sintro p {font-size: 16px; margin-top: 20px;} .greetCtxt .txtBox .sintro br {display: none;} .greetCtxt .txtBox .outtro {font-size: 20px; margin-top: 40px;} .drtWrap .bgLogo {display:none;} } @media (max-width: 640px) { .infoBox > p.tit {font-size: 30px;} .greetCbox {height: 200px; margin-top: 20px;} .greetCbox .greetCtit {font-size: 28px; margin: 0 20px 0 0;} .greetCbox .greetCtit span {font-size: 20px;} .greetCtxt .txtBox {padding: 30px 0 0 0;} .greetCtxt .txtBox p.intro {font-size: 18px;} .greetCtxt .txtBox .sintro p {margin-top: 16px;} .greetCtxt .txtBox .outtro {font-size: 18px;} } @media (max-width: 480px) { .subCont_01 {padding: 30px 20px;} .infoBox > p.tit {font-size: 24px;} .greetCbox {height: 180px; margin-top: 20px;} .greetCbox .greetCtit {font-size: 20px;} .greetCbox .greetCtit span {font-size: 16px;} .greetCtxt .txtBox {padding: 20px 0 0 0;} .greetCtxt .txtBox p.intro {font-size: 17px;} .greetCtxt .txtBox .sintro {margin-top: 14px;} .greetCtxt .txtBox .sintro p {margin-top: 10px;} .greetCtxt .txtBox .outtro {font-size: 19px; } .greetCtxt .txtBox .outtro p {font-weight:500;} .drtWrap .centerDrt {width:80px; height:80px;} .greetCtxt .txtBox .outtro p {font-size:17px;} } /* 연혁 */ .subCont_02 {padding: 80px 0 80px 100px;} .subCont_02.historyBg {background: url(/serviceAssets/img/history_bg.png) no-repeat; background-position: 10% 180%;} .subCont_02 .infoBox {position: relative;} .subCont_02 .infoBox .slogan {position: relative; height: 300px; background-image: linear-gradient(45deg, #2A3384, #0B0B0B); padding: 90px 0 0 214px; z-index: 0;} .subCont_02 .infoBox .slogan:before {position: absolute; top: 0; left: 0; width: 110px; height: 118px; background: url(/serviceAssets/img/history_item.png) no-repeat 50% 50%; content: "";} .subCont_02 .infoBox .slogan P {font-size: 40px; color: #fff; font-weight: 200;} .subCont_02 .infoBox .slogan P span {font-weight: 600;} .subCont_02 .infoBox .slogan span.spanBg {position: absolute; bottom: 0; right: 0; z-index: -1;} .subCont_02 .infoBox .historyBox {margin-top: 100px; display: flex;} .subCont_02 .infoBox .historyBox .leftBox {width: 35%; padding-right: 80px;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {height: 855px; background: url(/serviceAssets/img/history_img_1.jpg) no-repeat 50% 50%; background-size: cover; padding: 70px 60px;} .subCont_02 .infoBox .historyBox .leftBox p {color: #fff; font-size: 36px; margin-top: 6px; font-weight: 300; font-family: 'Poppins-Light';} .subCont_02 .infoBox .historyBox .leftBox p span {font-weight: 600; font-family: 'Poppins-SemiBold';} .subCont_02 .infoBox .historyBox .leftBox p:nth-of-type(1) {margin-top: 0;} .subCont_02 .infoBox .historyBox .rightBox {width: 65%;} .subCont_02 .infoBox .historyBox .rightBox .history {display: flex; padding-top:30px; border-top: 6px solid #2A3384;} .subCont_02 .infoBox .historyBox .rightBox .history .year {width: 120px; padding-top: 36px;} .subCont_02 .infoBox .historyBox .rightBox .history .year span {font-size: 24px; font-family: 'Poppins-Medium';} .subCont_02 .infoBox .historyBox .rightBox .history .year p {font-size: 46px; font-family: 'Poppins-SemiBold'; color: #2A3384;} .subCont_02 .infoBox .historyBox .rightBox .history .story {padding: 0 100px; width: calc(100% - 120px);} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li {display: flex; width: 100%; padding: 36px 0; border-bottom: 1px solid #DFDFDF;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li span {width: 120px; margin-right: 30px; font-size: 20px; font-family: 'Poppins-Medium';} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li p {width: calc(100% - 130px); font-size: 20px;} .subCont_02 .infoBox .bannerBox {display: flex; padding: 0 200px 0 100px; margin-top: 140px; justify-content: center; align-items: center;} .subCont_02 .infoBox .bannerBox .box {width: 50%;} .subCont_02 .infoBox .bannerBox .txtBox {font-size: 50px; font-weight: 700; padding-right: 60px; line-height: 1.4;} .subCont_02 .infoBox .bannerBox .imgBox {display: flex; justify-content: end;} .subCont_02 .infoBox .bannerBox .imgBox .imgWrap {width: 0; opacity: 0; transition: all 1s; height: 500px; background: url(/serviceAssets/img/history_img_2.jpg) no-repeat 50% 50%; background-size: cover;} .subCont_02 .infoBox .historyBox .rightBox .history .his2 {border-top:none; padding:0;} .subCont_02 .infoBox .bannerBox .imgBox .imgWrap.open {width: 100%; opacity: 1; transition: all 1s;} .subCont_02 .infoBox .historyBox .rightBox .history .year.year2 {padding-top:0;} @media (max-width: 1800px) { .subCont_02 .infoBox .slogan span.spanBg img {width: 520px;} } @media (max-width: 1600px) { .subCont_02 {padding: 80px 0 80px 60px;} .subCont_02 .infoBox .slogan {padding: 80px 0 0 174px;} .subCont_02 .infoBox .historyBox .leftBox {width: 40%;} .subCont_02 .infoBox .historyBox .rightBox {width: 60%;} .subCont_02 .infoBox .historyBox .rightBox .history .story {padding: 0 60px;} .subCont_02 .infoBox .bannerBox .txtBox p {font-size:40px;} } @media (max-width: 1400px) { .subCont_02 .infoBox .slogan {height: 280px;} .subCont_02 .infoBox .slogan P {font-size: 36px;} .subCont_02 .infoBox .slogan span.spanBg img {width: 420px;} .subCont_02 .infoBox .historyBox {margin-top: 80px;} .subCont_02 .infoBox .historyBox .leftBox {padding-right: 40px;} .subCont_02 .infoBox .historyBox .leftBox p {font-size: 32px;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {height: 785px; padding: 70px 50px;} .subCont_02 .infoBox .historyBox .rightBox .history .year {width: 100px; padding-top: 30px;} .subCont_02 .infoBox .historyBox .rightBox .history .year span {font-size: 22px;} .subCont_02 .infoBox .historyBox .rightBox .history .year p {font-size: 40px; line-height: 1.1;} .subCont_02 .infoBox .historyBox .rightBox .history .story {width: calc(100% - 100px); padding: 0 40px;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li {padding: 30px 0;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li p {font-size: 17px; width: calc(100% - 100px);} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li span {margin-right: 10px; font-size: 17px; width: 100px;} .subCont_02 .infoBox .historyBox .rightBox .history {padding-top:10px;} } @media (max-width:1300px) { .subCont_02 .infoBox .bannerBox {padding:0 50px 0 0;} } @media (max-width: 1200px) { .subCont_02 {padding: 60px 0 60px 60px;} .subCont_02 .infoBox .slogan {padding: 60px 0 0 134px; height: 260px;} .subCont_02 .infoBox .slogan:before {background-size: 80px; width: 80px; height: 86px;} .subCont_02 .infoBox .slogan P {font-size: 32px;} .subCont_02 .infoBox .slogan span.spanBg img {width: 380px;} .subCont_02 .infoBox .historyBox .leftBox {width: 35%;} .subCont_02 .infoBox .historyBox .leftBox p {font-size: 28px; margin-top: 4px;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {height: 585px; padding: 50px 30px;} .subCont_02 .infoBox .historyBox .rightBox {width: 65%;} .subCont_02 .infoBox .bannerBox .txtBox p {font-size:35px;} } @media (max-width: 991px) { .subCont_02 {padding: 50px 0 50px 0;} .subCont_02 .infoBox .slogan {padding: 60px 0 0 0; height: 220px; background-image:linear-gradient(173deg, #1c2230, #1c2232); display:flex; justify-content:center; align-items:end;} .subCont_02 .infoBox .slogan P {font-size: 28px; text-align:center;} .subCont_02 .infoBox .slogan span.spanBg img {display:none;} .subCont_02 .infoBox .historyBox {display: block; margin-top: 0px;} .subCont_02 .infoBox .historyBox .leftBox {width: 100%; padding:0;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {height: 285px; display: flex; justify-content: center; align-items: flex-start; background-position: 50% 70%; padding:15px 50px 30px;} .subCont_02 .infoBox .historyBox .leftBox p {margin-top: 0; margin-left: 10px; font-size:30px;} .subCont_02 .infoBox .historyBox .leftBox p:nth-of-type(1) {margin-left: 0;} .subCont_02 .infoBox .historyBox .rightBox {width: 100%; padding:0 40px; } .subCont_02 .infoBox .historyBox .rightBox .history {border-top:0;} .subCont_02 .infoBox .slogan:before {background:url(/serviceAssets/img/history_item2.png) no-repeat 59% 50% #fff; } .subCont_02 .infoBox .bannerBox {padding:0 50px 0; flex-direction:column; margin-top:100px;} .subCont_02 .infoBox .bannerBox .imgBox {width:100%;} .subCont_02 .infoBox .bannerBox .txtBox {width:100%; padding-right:0; padding-bottom:50px;} .subCont_02 .infoBox .historyBox .rightBox .history .story {padding:0 0 0 40px;} } @media (max-width: 768px) { .subCont_02 {padding: 40px 0 40px 0;} .subCont_02 .infoBox .slogan {padding: 40px 0 0; height: 160px;} .subCont_02 .infoBox .slogan:before {background-size: 50px; width: 50px; height: 50px;} .subCont_02 .infoBox .slogan P {font-size: 24px;} .subCont_02 .infoBox .slogan span.spanBg img {width: 240px;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {padding:15px 30px 30px; height:200px;} .subCont_02 .infoBox .historyBox .rightBox {padding:0 0 0 40px;} .subCont_02 .infoBox .bannerBox .txtBox {padding-bottom:30px;} .subCont_02 .infoBox .historyBox .rightBox .history .story {padding:0 40px;} } @media (max-width: 640px) { .subCont_02 .infoBox .slogan {padding: 30px 0 0 0; height: 130px;} .subCont_02 .infoBox .slogan:before {background-size: 60px; width: 60px; height: 60px;} .subCont_02 .infoBox .slogan P {font-size: 22px;} .subCont_02 .infoBox .slogan span.spanBg img {width: 200px;} .subCont_02 .infoBox .historyBox .leftBox p {font-size:25px;} .subCont_02 .infoBox .historyBox .rightBox .history {flex-direction:column;} .subCont_02 .infoBox .historyBox .rightBox .history .story {width:100%; padding:0;} .subCont_02 .infoBox .historyBox .rightBox {padding:0 30px;} .subCont_02 .infoBox .historyBox .rightBox .history.his2 {padding:30px 0;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul {border-top:3px solid #2A3384; margin-top:20px;} .subCont_02 .infoBox .bannerBox {padding:0 30px; margin-top:50px;} .subCont_02 .infoBox .bannerBox .txtBox p {font-size:30px;} } @media (max-width:560px) { .subCont_02 .infoBox .historyBox .leftBox .imgBox {flex-direction:column;} .subCont_02 .infoBox .historyBox .leftBox p {margin-left:0;} .subCont_02 .infoBox .slogan {justify-content:flex-start; padding:15px 30px;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li {padding:20px 0;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li p {line-height:22px; font-size:15px;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li span {line-height:22px; font-size:15px;} .subCont_02 .infoBox .bannerBox .imgBox .imgWrap.open {height:300px;} } @media (max-width: 480px) { .subCont_02 {padding: 30px 0 ;} .subCont_02 .infoBox .slogan {height:150px;} .subCont_02 .infoBox .slogan:before {background-size: 24px; width: 24px; height: 26px;} .subCont_02 .infoBox .slogan P {text-align:left; line-height:1.4;} .subCont_02 .infoBox .slogan P span {display: block;} .subCont_02 .infoBox .slogan span.spanBg img {width: 160px;} .subCont_02 .infoBox .slogan:before {width:50px; height:50px; background-size:50px;} .subCont_02 .infoBox .bannerBox .txtBox p {font-size:23px;} .subCont_02 .infoBox .bannerBox .txtBox {padding-bottom:20px;} .subCont_02 .infoBox .slogan {background-image:linear-gradient(173deg, #1a1c29, #1b1e2f);} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li:last-child {border-bottom:none;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li span {width:100%; padding-bottom:3px; font-weight:600; font-size:16px;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li {flex-direction:column; padding:15px 0;} .subCont_02 .infoBox .historyBox .rightBox .history .story ul li p {width:100%;} .subCont_02 .infoBox .bannerBox {margin-top:0;} .subCont_02 .infoBox .historyBox .rightBox {padding: 0 20px;} .subCont_02 .infoBox .bannerBox {padding:0 20px;} } @media (max-width:380px) { .subCont_02 .infoBox .slogan P {font-size:19px;} .subCont_02 .infoBox .historyBox .rightBox .history .year p {font-size:35px;} .subCont_02 .infoBox .historyBox .rightBox .history .year span {font-size:19px;} .subCont_02 .infoBox .slogan {padding:15px 20px;} .subCont_02 .infoBox .historyBox .leftBox .imgBox {padding:15px 20px 30px;} .subCont_02 .infoBox .bannerBox .imgBox .imgWrap.open {height:240px;} } /* 조직도 */ .subCont_03 {padding: 80px 100px;} .memberWrap {background:url(/serviceAssets/img/team_background.png)no-repeat ; background-position:bottom;} .memberWrap .memberBox {padding:80px 0 20px 0;} .memberWrap .memberBox .centerD {width:250px; height:250px; background:url(/serviceAssets/img/team_bg.png) no-repeat;border-radius:40px; display:flex; align-items:center; justify-content:center; flex-direction:column; position:relative; } .memberWrap .memberBox .centerD p {color:#fff; font-size:30px; font-weight:600; padding-top:20px;} .memberWrap .memberBox .mBox {width:100%; display:flex; align-items:center; justify-content:center; padding-bottom:80px;} .memberWrap .memberBox .centerD:before {content:''; clear:both; display:block; position:absolute; background:#ddd; width:1px; height:80px; bottom:-80px;} .memberWrap .memberBox span.border {display:block; width:75.8%; height:2px; background:#ddd; margin:0 auto; position:relative;} .memberWrap .memberBox span.border:before {display:block; content:''; clear:both; background:url(/serviceAssets/img/sqaure1.png) no-repeat; position:absolute; width:24px; height:24px; top:50%; left:50%; transform:translate(-50%,-50%);} .memberWrap .memberBox .mBox2 {display:flex; justify-content:space-between; padding-top:80px; height: auto; gap:20px; margin-bottom: 30px;} .memberWrap .memberBox .mBox2 .ulBox {height:100%; width:40%; background:#f6f6f6;} .memberWrap .memberBox .mBox2 .ulBox span {background:#2A3384; color:#fff; padding:15px; display:block; text-align:center; font-size:23px; font-weight:600; position:relative; } .memberWrap .memberBox .mBox2 .ulBox span:before {content:''; clear:both; display:inline-block; width:8px; height:8px; background:#fff; transform:rotate(45deg); margin-right:10px; vertical-align:middle;} .memberWrap .memberBox .mBox2 .ulBox span:after {width:2px; height:80px; display:block; content:''; clear:both; position:absolute; top:-80px; background:#ddd;left:50%;} .memberWrap .memberBox .mBox2 .ulBox ul {background:#f6f6f6; padding:20px 20px 20px 50px;} .memberWrap .memberBox .mBox2 .ulBox ul li {padding:10px 0; font-size:17px; font-weight:600; position:relative;} .memberWrap .memberBox .mBox2 .ulBox ul li:before{display:block; content:''; clear:both; position:absolute; background:#2A3384; width:7px; height:7px; transform:rotate(45deg); top:17px; left:-30px;} .memberWrap .memberBox .mBox2 .ulBox ul li:after{display:block; content:''; clear:both; position:absolute; background:#A1A8BA; width:7px; height:7px; transform:rotate(45deg); top:17px; left:-22px;} .memberWrap .memberBox .mBox2 .ulBox span.bor2:after {left:49.7%;} .memberWrap .memberBox .tableWrap {margin-top:20px; } .memberWrap .memberBox .tableWrap table thead tr th {background:#E1E8F5; padding:10px 15px; color:#000; font-size:18px;} .memberWrap .memberBox .tableWrap table tbody tr td {background:#fdfdfd; font-size:17px; padding:15px;} .memberWrap .memberBox .mbBox {display:none;} .searchBox2 {display: flex; justify-content: end; align-items: center;} .searchBox2 .select {width: 150px; height: 55px;} .searchBox2 .select select {width: 100%; height: 100%; padding: 0 30px 0; font-size: 18px; color: #7B7D8A; font-weight: 600; background: url(/serviceAssets/img/select_arrow.png) no-repeat #fff; background-position: 80% 50%; background-size: 14px; cursor: pointer; border: 2px solid #F6F6F6; border-radius: 10px 0 0 10px;} .searchBox2 .select select option {padding: 10px; font-size: 18px; border-radius: 0;} .searchBox2 .search {position: relative; width: 500px; height: 55px;} .searchBox2 .search input[type="text"] {width: 100%; height: 100%; border: 0; background-color: #f6f6f6; border-radius: 0 10px 10px 0; padding: 0 74px 0 20px; color: #7B7D8A;} .searchBox2 .search input[type="text"]::placeholder {color: #7B7D8A; font-weight: 600;} .searchBox2 .search button.schBtn {width: 36px; height: 36px; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; background: url(/serviceAssets/img/search_icon.png) no-repeat 50% 41% #f6f6f6; background-size: 19px;} @media (max-width:1900px) { .memberWrap .memberBox span.border {width:76%;} } @media (max-width:1600px) { .subCont_03 {padding:80px 100px;} .memberWrap .memberBox {padding:80px 0 0 0;} } @media (max-width:1400px) { .memberWrap .memberBox .centerD {width:200px; height:200px;} .memberWrap .memberBox .centerD img {width:80px;} .memberWrap .memberBox .centerD p {padding-top:10px;} .memberWrap .memberBox .tableWrap table tbody tr td {font-size:17px;} .memberWrap .memberBox .mBox2 .ulBox {width:45%;} .memberWrap .memberBox .mBox2 {gap:10px;} .memberWrap .memberBox span.border:before {display:none;} .memberWrap .memberBox .mBox2 .ulBox span:after {display:none;} .memberWrap .memberBox span.border {display:none;} .memberWrap .memberBox .centerD:before {display:none;} .memberWrap .memberBox .mBox {padding-bottom:0;} .memberWrap .memberBox .mBox2 {display: grid; grid-template-columns: repeat(1, 1fr); height:auto; gap:20px;} .memberWrap .memberBox .mBox2 .ulBox {width:100%;} .searchBox2 {margin-top:30px;} } @media (max-width:1099px) { .subCont_03 {padding:50px;} .memberWrap .memberBox {padding:50px 0 0 0;} .memberWrap .memberBox .mBox2 .ulBox span {font-size:20px; padding:10px;} .memberWrap .memberBox span.border {width:51%;} .memberWrap .memberBox .tableWrap {margin-top:50px;} } @media (max-width:991px) { .subCont_03 {padding:50px 40px;} .memberWrap .memberBox .tableWrap table tbody tr td {font-size:16px;} .memberWrap .memberBox .tableWrap table thead tr th {font-size:17px;} .tableWrap table tbody tr td {padding:15px 10px;} .memberWrap .memberBox .mBox2 .ulBox ul li {font-size:16px;} .memberWrap .memberBox .mBox2 {gap:20px 10px; padding-top:50px;} .searchBox2 .select {height: 50px;} .searchBox2 .search {width: calc(100% - 150px); height: 50px;} .searchBox2 .search input[type="text"] {font-size:17px;} .memberWrap .memberBox .centerD p {font-size:23px;} .searchBox2 .select select {font-size:17px; padding:0 20px 0; background-position:85% 50%;} .searchBox2 {margin-top:50px;} .memberWrap .memberBox .tableWrap {margin-top:15px;} .memberWrap .memberBox .mBox2 {margin-bottom: 0px;} } @media (max-width:768px) { .searchBox2 .select {width: 160px;} .searchBox2 .select select {background-position: 80% 50%; background-size: 13px; font-size: 16px;} .searchBox2 .search input[type="text"] {font-size: 16px;} .searchBox2 .search button.schBtn{background-size:16px;} } @media (max-width:767px) { .subCont_03 {padding:50px 30px 0 30px;} .memberWrap .memberBox .mBox2 .ulBox span {font-size:20px;} .memberWrap .memberBox .mbBox {display:flex; flex-direction:column; margin-bottom:50px;} .memberWrap .memberBox .mbBox ul {background:url(/serviceAssets/img/rizeWhiteLogo100.png) no-repeat #2A3384 95% 80%; border-radius:15px; width:100%; padding:15px; margin-bottom:20px; color:#fff;} .memberWrap .memberBox .mbBox ul li {padding:5px;} .memberWrap .memberBox .mbBox ul li:first-child {font-size:23px; font-weight:700;} .memberWrap .memberBox .tableWrap {margin-top:30px;} .memberWrap .memberBox .mbBox ul:last-child {margin-bottom:0;} } @media (max-width:700px) { .memberWrap .memberBox .mBox2 .ulBox {width:100%;} .memberWrap .memberBox .mBox2 {grid-template-columns: repeat(1, 1fr);} .memberWrap .memberBox span.border {display:none;} .memberWrap .memberBox .mBox2 .ulBox span:after {display:none;} .memberWrap .memberBox .mBox2 .ulBox ul {padding:20px 20px 20px 50px;} .memberWrap .memberBox .mBox2 .ulBox span{padding:10px; text-align:left; padding-left:30px;} } @media (max-width:640px){ .memberWrap .memberBox .mbBox ul {background-size:66px; margin-bottom:10px; border-radius:0;} .memberWrap .memberBox .tableWrap {margin-top:20px;} .searchBox2 .select {width: 140px;} .searchBox2 .select select {background-position: 103px 50%; background-size: 13px; font-size: 16px; border-radius:5px 0 0 5px; padding:0 20px 0;} .searchBox2 .search {width: calc(100% - 140px);} .searchBox2 .search input[type="text"] {font-size: 16px; border-radius:0px 5px 5px 0px;} .searchBox2 .search button.schBtn {background-size: 16px;} } @media (max-width:540px) { .searchBox2 .select select {background-position:98px 50%;} } @media (max-width:480px) { .subCont_03 {padding:30px 20px 0 20px;} .memberWrap .memberBox .mbBox {margin-bottom:30px;} .memberWrap .memberBox .mbBox ul li:first-child {font-size:21px;} .memberWrap .memberBox .mbBox ul li {font-size:16px;} .memberWrap .memberBox .mBox2 {padding-top:0; gap:10px;} .memberWrap .memberBox .mBox2 .ulBox ul {padding: 10px 10px 10px 40px;} .memberWrap .memberBox .mBox2 .ulBox span {padding-left:22px; font-size:18px;} .memberWrap .memberBox .mBox2 .ulBox ul li {font-size:16px; padding:7px 0; font-weight:500;} .memberWrap .memberBox .mbBox ul {background:url(/serviceAssets/img/rizeWhiteLogo100.png) no-repeat #2A3384 95% 84%; background-size:66px;} .memberWrap .memberBox .centerD {width:150px; height:150px; background-size:cover; padding:20px; border-radius:20px;} .memberWrap .memberBox .centerD p {font-size:20px;} .memberWrap .memberBox .centerD img {width:50px;} .memberWrap .memberBox .centerD:before {display:none;} .memberWrap .memberBox .mBox {padding-bottom:30px;} .memberWrap .memberBox {padding:40px 0 0 0;} .searchBox2 .select { width:100px; height:45px;} .searchBox2 .select select {border-radius:0; padding:0 10px;} .searchBox2 .search { width:calc(100% - 100px); height:45px;} .searchBox2 .select select {background-position: 87% 50%;} .searchBox2 .search input[type="text"] {border-radius:0; padding:0 20px;} .memberWrap .memberBox .mBox2 .ulBox span:before {margin-top:-4px; margin-left:-3px; width:7px; height:7px;} .memberWrap .memberBox .mBox2 .ulBox ul li:after {display:none;} .memberWrap .memberBox .mBox2 .ulBox ul li:before {top:14px; left:-21px;} .searchBox2 .search button.schBtn {right:0; width:46px;} } @media (max-width:420px) { .searchBox2 .search input[type="text"] {padding:0 15px;} } @media (max-width:380px) { .memberWrap .memberBox .mBox2 .ulBox ul {padding: 10px 10px 10px 40px;} .memberWrap .memberBox .mBox2 .ulBox ul li {font-size:15px;} .searchBox2 .select {width:80px;} .searchBox2 .search {width:calc(100% - 80px);} } /* CI */ .ciWrap .ciCon {padding:100px 180px 0 ;} .ciWrap .ciCon .meaning{background:url(/serviceAssets/img/graBg.png) no-repeat #f7f7f7; position:relative; background-size:contain; padding:60px 150px; display:flex; } .ciWrap .ciCon .meaning .ciTxt {display:flex; justify-content:space-between; flex-direction:column; padding-left:50px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:26px; font-weight:600;} .ciWrap .ciCon .meaning .ciTxt p b {color:#2A3384;} .ciWrap .ciCon .meaning .ciTxt span {font-size:25px; font-weight:700;} .ciWrap .ciCon .meaning .ciTxt h4 {padding-top:15px; font-size:22px; font-weight:300;} .ciWrap .ciCon .meaning .riseUp {position:absolute; right:50px; bottom:50px; width:300px;} .ciWrap .ciCon .box {padding-top:80px;} .ciWrap .ciCon .box h2 {font-size:30px; font-weight:600;} .ciWrap .ciCon .box span {padding-top:30px; line-height:1.5; font-size:19px; display:block; font-weight:300; letter-spacing:-1px;} .ciWrap .ciCon .box span b {font-weight:600;} .ciWrap .ciCon .box .btnBox {padding-top:30px;} .ciWrap .ciCon .box .btnBox .aiBtn {margin-right:10px;} .ciWrap .ciCon .box .btnBox a {background:#2A3384; color:#fff; width:240px; height:60px; text-align:center; display:inline-block; font-size:20px; line-height:60px;} .ciWrap .ciCon .box .btnBox a img {display:inline-block; padding-left:10px;} .ciWrap .ciCon .box .btnBox a:hover {background:#000; transition:0.3s;} .ciWrap .ciCon .box .btnBox a b { padding-right:10px; font-weight:500;} .ciWrap .ciCon .box h4 {font-family: 'Poppins-Light'; color:#3f52c2; font-weight:100; font-size:20px; padding-top:6px;} .ciWrap .ciCon .box .sBox {width:100%; display:flex; justify-content:space-between; padding-top:50px;} .ciWrap .ciCon .box .sBox .tBox {background:#f8f8f8; width:32%; display:flex; align-items:center; padding:50px 20px; flex-direction:column;justify-content:center;} .ciWrap .ciCon .box .sBox .tBox p {padding-top:30px;font-size:15px; font-weight:500;} .ciWrap .ciCon .box .sBox .tBox .txtBox {font-size:15px; padding-left:20px;} .ciWrap .ciCon .box .sBox .tBox .txtBox p {padding-top:0; font-size:15px;} .ciWrap .ciCon .box .sBox .tBox .txtBox span {padding-top:20px; font-size:14px; line-height:1.2;} .ciWrap .ciCon .box .sBox .tBox.box2 {display:flex; flex-direction:row;} .ciWrap .ciCon .box .sBox .sImg {width:124px;} .ciWrap .ciCon .box .gridImg {width:100%; display:flex; align-items:center; justify-content:center; padding-top:50px;} .ciWrap .ciCon .box .sBox .tBox2 {width:24%; justify-content:flex-end; background:#fff; border:1px solid #f0f0f0;} .ciWrap .ciCon .box .sBox .tBox2 .pdR30 {padding-right:30px;} .ciWrap .ciCon .box .sBox .tBox2 .pdB20 {padding-bottom:20px;} .ciWrap .ciCon .box .sBox .tBox2 .w140 {width:140px;} .ciWrap .ciCon .box .sBox .tBox2 .colBox {display:flex; flex-direction:column;} .ciWrap .ciCon .box .sBox .tBox2 .pdB30 {padding-top:0; padding-bottom:30px;} .ciWrap .ciCon .box .chart {display:flex; justify-content:space-between; flex-direction:column; width:49%;} .ciWrap .ciCon .box .chart .colorGraph {width:100%; display:flex;} .ciWrap .ciCon .box .chart .colorGraph .graph{width:25%;} .ciWrap .ciCon .box .chart .colorGraph .graph p{font-size:13px; padding:10px; text-align:right;} .ciWrap .ciCon .box .chart .colorGraph .graph.graph1 p{background:#D4D6E6; color:#4F5B86;} .ciWrap .ciCon .box .chart .colorGraph .graph.graph2 p{background:#AAADCE; color:#fff;} .ciWrap .ciCon .box .chart .colorGraph .graph.graph3 p{background:#7F85B5; color:#fff;} .ciWrap .ciCon .box .chart .colorGraph .graph.graph4 p{background:#555C9D; color:#fff;} .ciWrap .ciCon .box .chart .colorGraph .graph div {background:#2A3384; width:100%; padding:15px 5px; color:#fff; font-size:15px; text-align:center;} .ciWrap .ciCon .box span.sTxt {font-weight:600; font-family:'Poppins-Light'; text-align:center;} .ciWrap .ciCon .box .chartWrap {display:flex; justify-content:space-between; padding-top:50px;} .ciWrap .ciCon .box .chart .subGraph .graph.graph5 p {background:#CCF0F9; color:#4F5B86;} .ciWrap .ciCon .box .chart .subGraph .graph.graph6 p {background:#99E0F3; color:#fff;} .ciWrap .ciCon .box .chart .subGraph .graph.graph7 p {background:#66D1EE; color:#fff;} .ciWrap .ciCon .box .chart .subGraph .graph.graph8 p {background:#33C1E8; color:#fff;} .ciWrap .ciCon .box .chart .subGraph .graph div {background:#00B2E2;} .ciWrap .ciCon .box.graphic .opacity {width:600px; height:300px; background:url(/serviceAssets/img/opacity.png) no-repeat #fafafa; background-position:50% 20%; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; margin-top:50px;} .ciWrap .ciCon .box.graphic .opacity img {padding-top:80px;} .ciWrap .ciCon .box.graphic .opacity h5 {position:absolute; top:40px; right:40px; font-size:18px;} .ciWrap .ciCon .box.graphic p {font-size:17px; padding-top:10px;} .ciWrap .ciCon .meaning .ciTxt p br {display:none;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:none;} @media (max-width:1700px) { .ciWrap .ciCon {padding:100px 100px 0;} } @media (max-width:1600px) { .ciWrap .ciCon {padding:60px 0 0 0 ;} .ciWrap .ciCon .meaning {padding:60px 100px 60px 150px;} } @media (max-width:1300px) { .ciWrap .ciCon .meaning {padding:60px 80px 60px 113px;} .ciWrap .ciCon .meaning img {} .ciWrap .ciCon .meaning .ciTxt p {font-size:24px;} } @media (max-width:1199px) { .ciWrap {padding:80px;} .ciWrap .ciCon .meaning img {width:100px;} .ciWrap .ciCon .meaning .ciTxt span {font-size:19px;} .ciWrap .ciCon .meaning .ciTxt h4 {font-size:19px; padding-top:8px;} .ciWrap .ciCon .meaning {padding:60px 80px 60px 88px;} .ciWrap .ciCon .meaning .riseUp {display:none;} .ciWrap .ciCon .box {padding-top:50px;} .ciWrap .ciCon .box .sBox .tBox2 .colBox2 {display:flex; flex-direction:column; align-items:center;} .ciWrap .ciCon .box .sBox .tBox2 .pdR30 {padding-right:0; padding-bottom:20px;} .ciWrap .ciCon .box .sBox .tBox {padding:20px;} .ciWrap .ciCon .box .sBox .tBox .txtBox span br {display:none;} .ciWrap .ciCon .box h2 {font-size:25px;} .ciWrap .ciCon .box span br {display:none;} .ciWrap .ciCon .box span {font-size:17px; padding-top:20px;} .ciWrap .ciCon .box .btnBox a {width:200px; height:50px; line-height:50px;} .ciWrap .ciCon .box .sBox {padding-top:30px;} .ciWrap .ciCon .box .sBox .tBox img.small {width:140px;} .ciWrap .ciCon .box h4 {font-size:18px;} .ciWrap .ciCon .box .sBox .tBox p {font-size:13px; padding-top:20px;} .ciWrap .ciCon .box .sBox .tBox .txtBox p {font-size:13px;} .ciWrap .ciCon .box .sBox .tBox .txtBox span {line-height:1.2; font-size:13px; padding-top:10px;} .ciWrap .ciCon .box .chart .colorGraph .graph div {font-size:13px;} } @media (max-width:1121px) { .ciWrap {padding:50px;} .ciWrap .ciCon .box .sBox.mbsBox1 {display:flex; justify-content:space-between;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {width:36%;} .ciWrap .ciCon .box .gridImg img {width:500px;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox:first-child {width:26%;} .ciWrap .ciCon .box .sBox {display:block;} .ciWrap .ciCon .box .sBox:after {display:block; content:''; clear:both;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2 {width:49%;float:left; height:245px; justify-content:center;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:first-child {width:49%; margin-bottom:1.9%;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:nth-child(odd) {margin-right:1.9%;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:nth-child(2) {margin-bottom:1.9%;} } @media (max-width:991px) { .ciWrap .ciCon {padding:50px 0 0 0;} .ciWrap .ciCon .meaning {padding:60px 50px 60px 80px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:22px;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:none;} } @media (max-width:950px) { .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:block;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr{ text-align:center;} } @media (max-width:916px) { .ciWrap {padding:50px 40px;} .ciWrap .ciCon .meaning {padding:50px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:20px;} .ciWrap .ciCon .box .chartWrap {flex-direction:column;} .ciWrap .ciCon .box .chart {width:100%;} .ciWrap .ciCon .box .chart .colorGraph .graph div {font-size:14px;} .ciWrap .ciCon .box span {font-size:16px;} .ciWrap .ciCon .box.graphic .opacity {width:100%;} .ciWrap .ciCon .box .btnBox a {width:180px; font-size:18px;} .ciWrap .ciCon .box .sBox .tBox img.small {width:120px;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2 {height:230px;} .ciWrap .ciCon .box .mbsBox1 .box2 .sImg {width:100px;} .ciWrap .ciCon .box span.sTxt {padding-bottom:30px; padding-top:10px;} .ciWrap .ciCon .box .chart:last-child span.sTxt {padding-bottom:0;} } @media (max-width:840px) { .ciWrap {padding:50px 30px;} .ciWrap .ciCon .box {padding-top:40px;} .ciWrap .ciCon .box span {padding-top:15px;} .ciWrap .ciCon .box .btnBox {padding-top:20px;} .ciWrap .ciCon .meaning {padding:30px 30px 30px 40px;} .ciWrap .ciCon .meaning .ciTxt span {font-size:18px;} .ciWrap .ciCon .meaning .ciTxt h4 {font-size:18px;} .ciWrap .ciCon .box h2 {font-size:22px;} .ciWrap .ciCon .box .sBox.mbsBox1 {display:block;} .ciWrap .ciCon .box .sBox.mbsBox1:after {display:block; content:''; clear:both;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {float:left;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {width:59%;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox:first-child {margin-right:2%; width:39%;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox.box2 {width:100%; margin-top:2%;} .ciWrap .ciCon .box .mbsBox1 .box2 .sImg {width:120px;} .ciWrap .ciCon .box .sBox .tBox .txtBox p {font-size:15px;} .ciWrap .ciCon .box .sBox .tBox p {font-size:15px;} .ciWrap .ciCon .box .sBox .tBox .txtBox span {font-size:14px;} .ciWrap .ciCon .box.graphic .opacity {height:230px; background-position:50% 28%; background-size:300px;} .ciWrap .ciCon .box.graphic .opacity img {width:140px; padding-top:70px;} .ciWrap .ciCon .box.graphic .opacity h5 {font-size:16px; top:25px; right:30px;} .ciWrap .ciCon .box.graphic p {font-size:15px;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:none;} } @media (max-width:767px) { .ciWrap .ciCon .meaning {padding:30px;} .ciWrap .ciCon .meaning img {width:75px;} .ciWrap .ciCon .meaning .ciTxt {padding-left:30px;} .ciWrap .ciCon .meaning .ciTxt h4 {display:inline-block; padding-left:8px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:19px;} .ciWrap .ciCon .box h2 {font-size:20px;} .ciWrap .ciCon .box h4 {font-size:17px;} } @media (max-width:670px) { .ciWrap .ciCon .meaning .ciTxt p {text-align:right;line-height:1.4;} .ciWrap .ciCon .meaning .ciTxt p br {display:block;} .ciWrap .ciCon .meaning {justify-content:space-between; padding:30px 40px;} .ciWrap .ciCon .meaning .ciTxt span {font-size:16px; padding-right:10px; font-weight:500;} .ciWrap .ciCon .meaning .ciTxt h4 {font-size:15px; margin-top:10px; background:#2a3384; color:#fff; padding:5px 15px; border-radius:30px;} .ciWrap .ciCon .meaning img {width:20%;} } @media (max-width:658px) { .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {height:180px;} .ciWrap .ciCon .box .btnBox a {width:160px; height:40px; line-height:40px; font-size:17px;} .ciWrap .ciCon .box .btnBox a img {width:24px;} .ciWrap .ciCon .box .btnBox .aiBtn {margin-right:5px;} .ciWrap .ciCon .box .chartWrap {padding-top:30px;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:block;} } @media (max-width:580px) { .ciWrap {padding: 40px 20px;} .ciWrap .ciCon .meaning {padding:20px 30px; align-items:center;} .ciWrap .ciCon .meaning .ciTxt p {font-size:18px;} .ciWrap .ciCon .meaning img {width:80px; height:79px;} .ciWrap .ciCon .meaning .ciTxt span {text-align:right; padding-right:0; padding-top:12px; font-size:15px; display:block;} .ciWrap .ciCon .meaning .ciTxt:after {display:block; content:''; clear:both;} .ciWrap .ciCon .meaning .ciTxt h4 {float:right; border-radius:5px; margin-top:5px;} .ciWrap .ciCon .box span {padding-top:10px;} .ciWrap .ciCon .box .gridImg img {width:100%;} .ciWrap .ciCon .box .gridImg {padding-top:30px;} } @media (max-width:480px) { .ciWrap .ciCon {padding:40px 0 0 0;} .ciWrap .ciCon .meaning {padding:20px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:17px;} .ciWrap .ciCon .meaning .ciTxt {padding-left:15px;} .ciWrap .ciCon .box {padding-top:30px;} .ciWrap .ciCon .box h4 {font-size:16px;} .ciWrap .ciCon .box span {font-size:15px;} .ciWrap .ciCon .box .sBox .tBox2 .w140 {width:120px;} .ciWrap .ciCon .box .sBox {display:flex; flex-direction:column;} .ciWrap .ciCon .box .sBox.mbsBox2 {gap:10px;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:nth-child(odd) {width:100%; margin-right:0;margin-bottom:0;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:nth-child(2) {width:100%; margin-right:0;margin-bottom:0;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2 {width:100%;} .ciWrap .ciCon .box .sBox.mbsBox1 {display:flex; flex-direction:column;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox:first-child {width:100%;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {width: 100%;} .ciWrap .ciCon .box .sBox.mbsBox1 {gap:10px;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox.box2 {margin-top:0;} .ciWrap .ciCon .box .sBox .tBox2 .colBox2 {flex-direction:row; justfiy-content:center;} .ciWrap .ciCon .box .sBox .tBox2 .pdR30 {padding-bottom:0; padding-right:60px;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2 {height:auto;} .ciWrap .ciCon .box .sBox .tBox p {padding-top:15px;} .ciWrap .ciCon .box .sBox .tBox2 .colBox {flex-direction:row; justify-content:center;} .ciWrap .ciCon .box .sBox .tBox2 .pdB20 {padding-bottom:0; padding-right:20px;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2 {flex-direction:column-reverse;} .ciWrap .ciCon .box .sBox .tBox2 .pdB30 {padding-bottom:0;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox {padding-top:0; gap:15px;} .ciWrap .ciCon .box .sBox.mbsBox2 .tBox2:last-child img {padding-top:20px;} .ciWrap .ciCon .box .chart .colorGraph {display:block;} .ciWrap .ciCon .box .chart .colorGraph:after {display:block; content:''; clear:both;} .ciWrap .ciCon .box .chart .colorGraph .graph {width:50%; float:left;} .ciWrap .ciCon .box .sBox.mbsBox1 .tBox {height:auto;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:none;} .ciWrap .ciCon .box span.sTxt {padding-bottom:20px;} .ciWrap .ciCon .box.graphic .opacity {margin-top:30px;} .ciWrap .ciCon .box .chart .colorGraph .graph div {text-align:right; padding:15px 10px;} } @media (max-width:404px) { .ciWrap {padding:30px 20px;} .ciWrap .ciCon {padding:30px 0 0 0 ;} .ciWrap .ciCon .meaning img{width:62px; height:61px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:15px; font-weight:500;} .ciWrap .ciCon .meaning .ciTxt p b {font-weight:500;} .ciWrap .ciCon .box .btnBox a {width:49%;} .ciWrap .ciCon .box .btnBox .aiBtn {margin-right:0;} .ciWrap .ciCon .box .btnBox {display:flex; gap:2%; width:100%; justify-content:space-between;} .ciWrap .ciCon .box .sBox .tBox p {text-align:left;} .ciWrap .ciCon .box .sBox .tBox .tBoxBr br {display:block;} .ciWrap .ciCon .box {padding-top:20px;} .ciWrap .ciCon .box.graphic .opacity {margin-top:20px;} } @media (max-width:380px) { .ciWrap .ciCon .box.graphic .opacity img {width:120px; padding-top:50px;} .ciWrap .ciCon .box.graphic .opacity {background-size:220px; height:200px;} .ciWrap .ciCon .box.graphic .opacity h5 {top:15px; right:20px; font-size:15px; font-weight:500;} .ciWrap .ciCon .box.graphic p {font-size:14px;} .ciWrap .ciCon .meaning {align-items:end;} .ciWrap .ciCon .meaning img {width:50px; height:49px;} .ciWrap .ciCon .meaning .ciTxt {padding-left:0;} .ciWrap .ciCon .box .sBox .tBox2 .w110 {width:120px;} } @media (max-width:344px) { .ciWrap .ciCon .meaning img {width:40px;height:39px;} .ciWrap .ciCon .meaning .ciTxt p {font-size:14px;} .ciWrap .ciCon .meaning .ciTxt span {font-size:14px;} .ciWrap .ciCon .meaning .ciTxt h4 {font-size:14px;} .ciWrap .ciCon .box h2 {font-size:18px;} .ciWrap .ciCon .box span {font-size:14px;} } /** 게시판 검색 & 페이지 공통 & 탭리스트 & 게시글 포인트 **/ .searchBox {display: flex; justify-content: center; align-items: center;} .searchBox .select {width: 150px; height: 55px;} .searchBox .select select {width: 100%; height: 100%; padding: 0 30px 0; font-size: 18px; color: #7B7D8A; font-weight: 600; background: url(/serviceAssets/img/select_arrow.png) no-repeat; background-position: 80% 50%; background-size: 14px; cursor: pointer; border: 2px solid #F6F6F6; border-radius: 10px 0 0 10px;} .searchBox .select select option {padding: 10px; font-size: 18px; border-radius: 0;} .searchBox .search {position: relative; width: 500px; height: 55px;} .searchBox .search input[type="text"] {width: 100%; height: 100%; border: 0; background-color: #f6f6f6; border-radius: 0 10px 10px 0; padding: 0 74px 0 20px; color: #7B7D8A;} .searchBox .search input[type="text"]::placeholder {color: #7B7D8A; font-weight: 600;} .searchBox .search button.schBtn {width: 36px; height: 36px; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; background: url(/serviceAssets/img/search_icon.png) no-repeat 50% 41% #f6f6f6; background-size: 19px;} .pageCount {display: flex;} .pageCount.mt-40 {margin-top: 40px;} .pageCount.ml-1 {margin-left: 1%;} .pageCount p {margin-left: 17px; font-size: 20px;} .pageCount p:nth-of-type(1) {margin-left: 0;} .pageCount p span.allPost, .pageCount p span.paging {font-weight: 600; color: #2A3384;} .tablist {margin:50px 0 20px 0;} .tablist ul {display:block;overflow:hidden;} .tablist ul:after {display:block; content:''; clear:both;} .tablist ul li {background: #fff; float:left;border:1px solid #e0e0e0; width:24.65%; margin:2px;} .tablist ul li a {color: #000; padding: 15px 30px; display: flex; position: relative; align-items: center; font-weight: 500; justify-content:center; } .tablist ul li a.active {background: #2A3384 !important; color: #fff !important;} .tablist ul li a b {margin-left: 10px; font-weight: 500; position:relative;} .tablist ul li a.active b {color: #fff;} .tablist ul li a.active b:after {display:block; content:''; clear:both; width:5px; height:5px; background:#fff; border-radius:50%; position:absolute; top:-3px; right:-7px;} .ntCont .notice ul li {cursor: pointer; border:3px solid #fff;} .ntCont .notice ul li:hover {border:3px solid #2A3384; transition:0.3s; box-shadow:none;} .ntCont .notice ul li .ntTit span {line-height:1;} .ntCont .notice ul li .ntTit span.nPoint {width: 140px; display: inline-block; background-color:#2A3384; text-align: center; font-size: 18px; margin-right: 16px; padding: 10px; color: #fff; font-weight: 600;} .ntCont .notice ul li .ntTit span.nPoint.blue {background-color: #000;} .ntCont .notice ul li .ntTit span.nPoint.gray {background-color: #8187a1;} .ncBtnBox {position:absolute;right:60px; bottom:80px;} .ncBtnBox .ncWbtn {width: 120px;height: 40px;background: #000;color: #fff;} @media (max-width:1253px) { .tablist ul li {width:24.5%;} } @media (max-width: 1200px) { .tablist {margin:40px 0 20px 0;} .ncBtnBox {bottom:60px;} .ncBtnBox .ncWbtn {width:100px;} } @media (max-width: 991px) { .searchBox .select {height: 50px;} .searchBox .search {width: 480px; height: 50px;} .pageCount p {font-size: 18px;} .pageCount.mt-40 {margin-top: 30px;} .tablist ul li a {font-size: 16px; padding:14px 20px;} .ntCont .notice ul li .ntTit span.nPoint {width: 120px; font-size: 16px; padding: 8px 6px 8px;} .ncBtnBox {right:40px; bottom:50px;} } @media (max-width:875px) { .tablist ul li {width:24%;} } @media (max-width: 768px) { .searchBox .select {width: 160px;} .searchBox .select select {background-position: 80% 50%; background-size: 13px; font-size: 16px;} .searchBox .search {width: 440px;} .searchBox .search input[type="text"] {font-size: 16px;} .searchBox .search button.schBtn{background-size:16px;} .pageCount.ml-1 {margin-left: 0;} .tablist {margin:30px 0 20px 0;} .tablist ul {flex-wrap: wrap;} .tablist ul li {width: 49%;border:none; background:#e7eaef;} .tablist ul li a {justify-content: space-between; padding: 15px 26px; } .tablist ul li a.acitve {} .tablist ul {margin-bottom:0;} } @media (max-width:637px) { .tablist ul li {width:48.2%;} } @media (max-width: 640px) { .searchBox .select {width: 140px;} .searchBox .select select {background-position: 103px 50%; background-size: 13px; font-size: 16px; border-radius:5px 0 0 5px; padding:0 20px 0;} .searchBox .search {width: 340px;} .searchBox .search input[type="text"] {font-size: 16px; border-radius:0px 5px 5px 0px;} .searchBox .search button.schBtn {background-size: 16px;} .ntCont .notice ul li .ntTit span.nPoint {display: block; margin-right: 0; margin-bottom: 10px; width: 100px; font-size: 14px; padding: 7px 6px;} } @media (max-width:540px) { .searchBox .select select {background-position:98px 50%;} } @media (max-width: 480px) { .searchBox {display: block;} .searchBox .select {width: 100%; height:45px;} .searchBox .select select {border-radius:0; padding:0 20px;} .searchBox .search {width: 100%; height:45px;} .searchBox .select select {background-position: 92% 50%;} .searchBox .search input[type="text"] {border-radius:0; padding:0 20px;} .pageCount p {font-size: 16px;} .tablist {padding:20px 0 0 0 ; margin:0;} .tablist ul {gap: 0;} .tablist ul li a {padding:12px 20px; font-size:15px;} .tablist.noti3 {padding-top:0;} .ncBtnBox {left:20px; right:auto; bottom:30px;} .ncBtnBox .ncWbtn {width:90px; font-size:15px; border-radius:6px;} } @media (max-width:380px) { .tablist ul li {width:100%; margin:3px 0;} } @media (max-width: 360px) { .searchBox .search button.schBtn {right: 14px;} } @media (max-width:330px) { .tablist ul li {width:100%;} } /** 공지사항 **/ .ntCont {margin-top: 50px;} .ntCont .notice {margin-top: 20px;} .ntCont .notice ul li {padding: 40px 50px; box-shadow:0 0 24px rgb(195 195 195 / 25%); margin-top: 30px;} .ntCont .notice ul li:nth-of-type(1) {margin-top: 0;} .ntCont .notice ul li .ntTit {display: flex; justify-content: space-between; align-items: center;} .ntCont .notice ul li .ntTit p {width: 80%; font-size: 24px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} .ntCont .notice ul li .ntTit span {width: 20%; text-align: right; font-size: 19px; color: #7B7D8A;} .ntCont .notice ul li .ntTit span.day {font-family: 'Poppins-Light';} .ntCont .notice ul li .ntNotice {margin-top: 25px; font-size: 19px; word-break: keep-all; line-height: 1.4; font-weight: 300;} .ntCont .notice ul li .ntNotice p {text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} @media (max-width: 1200px) { .ntCont .notice ul li {padding: 36px 40px;} .ntCont .notice ul li .ntTit p {font-size: 21px;} .ntCont .notice ul li .ntTit span {font-size: 19px;} .ntCont .notice ul li .ntNotice {font-size: 18px;} } @media (max-width: 991px) { .ntCont .notice ul li {padding: 26px 30px; margin-top: 30px;} .ntCont .notice ul li .ntTit p {font-size: 19px;} .ntCont .notice ul li .ntTit span {font-size: 17px;} .ntCont .notice ul li .ntNotice {font-size: 17px; margin-top: 20px;} } @media (max-width: 640px) { .ntCont .notice ul li {padding:20px; margin-top: 20px;} .ntCont .notice ul li .ntTit p {width: 74%; font-size: 18px;} .ntCont .notice ul li .ntTit span {width: 24%; font-size: 16px;} .ntCont .notice ul li .ntTit.end_ntTit {align-items: end;} .ntCont .notice ul li .ntNotice {font-size: 16px;} .ntCont .notice ul li .ntNotice p {font-size:15px;} } @media (max-width: 480px) { .ntCont {margin-top: 30px;} .ntCont .notice {margin-top: 10px;} .ntCont .notice ul li .ntTit {display: block;} .ntCont .notice ul li .ntTit p {width: 100%;} .ntCont .notice ul li .ntTit span {display: block; width: 100%; text-align: left; margin-top: 4px; font-size: 14px;} .ntCont .notice ul li .ntNotice {margin-top: 10px;} } /** 갤러리 **/ .galleryWrap {height:100%;} .galleryWrap .galleryList {width:100%;} .galleryWrap .galleryList:after {display:block; content:''; clear:both;} .galleryWrap .galleryList li {width:31.3%; margin:0 1%; padding:30px 0 20px 0; float:left;} .galleryWrap .galleryList li a {height:100%;} .galleryWrap .galleryList li a:hover {cursor:pointer;} .galleryWrap .galleryList li a .imgBox {height:300px; overflow:hidden; display:flex; justify-content:center; align-items:center; } .galleryWrap .galleryList li a .imgBox img {width:100%; height:100%; object-fit:cover;} .galleryWrap .galleryList li a {color:#000;} .galleryWrap .galleryList li a .titTxt h1 {font-size:18px;text-overflow: ellipsis;overflow: hidden; font-weight:500; word-break: break-word;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical; line-height:1.3em;} .galleryWrap .galleryList li a .titTxt span {color:#808080; padding-bottom:3px; display:block; font-family: 'Poppins-Light'; letter-spacing: 0;} .galleryWrap .galleryList li a .titTxt {margin-top:15px; height:60px; overflow:hidden;} @media (max-width:1199px) { .galleryWrap .galleryList li a .imgBox {height:230px; border-radius:5px;} } @media (max-width:840px) { .galleryWrap .galleryList li a .imgBox {height:200px; border-radius:0;} } @media (max-width:991px) { .galleryWrap .galleryList li a .titTxt h1 {font-size:16px;} .galleryWrap .galleryList li a .titTxt span {font-size:15px;} .galleryWrap .galleryList li {padding:20px 0;} } @media (max-width:640px) { .galleryWrap .galleryList {display:flex; flex-direction:column; margin-top:20px; } .galleryWrap .galleryList li {width:100%; padding:0 0 20px 0;} .galleryWrap .galleryList li a {display:flex; flex-direction:column; align-items:flex-start; } .galleryWrap .galleryList li a .imgBox {width:100% ; height:400px; overflow:hidden; margin-right:10px;} .galleryWrap .galleryList li a .titTxt {width:100%; height:auto; margin-top:10px; display:flex; flex-direction:column-reverse;} .galleryWrap .galleryList li a .titTxt span {padding-bottom:5px;} .galleryWrap .galleryList li a .titTxt h1 {font-size:20px;} .galleryWrap .galleryList li a .titTxt span {font-size:17px;} .galleryWrap .galleryList li:hover {cursor:pointer; background:#f8faff; transition:0.3s;} .galleryWrap .galleryList li a .imgBox img {width:100%; height:100%;} } @media (max-width:540px) { .galleryWrap .galleryList li a .imgBox {height:300px;} } @media (max-width:480px) { .galleryWrap .galleryList li a .imgBox {height:250px;} .galleryWrap .galleryList li a .titTxt h1 {font-size:18px; font-weight:500;} .galleryWrap .galleryList li {padding:0 0 20px 0;} .galleryWrap .galleryList li a .titTxt span {font-size:15px;} } /** 보도자료 **/ .newsPostWrap {margin:30px 0;} .newsPostWrap .con {display:flex; justify-content:space-between; width:100%; border:2px solid #fff; height:235px;background:#fff; box-shadow:0 0 24px rgb(194 196 202 / 25%);margin-bottom:30px; cursor: pointer;} .newsPostWrap .con .left {width:70%; display:flex; flex-direction:column; padding:30px 40px;} .newsPostWrap .con .left span {color:#7B7D8A; letter-spacing: 0; font-family: 'Poppins-Light';} .newsPostWrap .con .left .newsTit {color:#000; font-size:20px; font-weight:700; overflow: hidden;display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; margin:20px 0 30px 0;} .newsPostWrap .con .left .newsTxt {color:#7e7e7e; font-size:17px; overflow: hidden;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis;} .newsPostWrap .con .right {width:25%;} .newsPostWrap .con .right .imgWrap {width:100%; height:100%; display:flex; justify-content:center; align-items:center; overflow:hidden;} .newsPostWrap .con .right .imgWrap img {width:100%; height:100%; object-fit:cover;} .newsPostWrap .con:hover {border:2px solid #2A3384; transition:0.3s; box-shadow:none;} .news p > span {font-family:'Pretendard Variable' !important; font-size:17px !important; font-weight:400 !important; } .ntCont .notice ul li .ntNotice {overflow-wrap :anywhere;} @media (max-width:1199px) { .newsPostWrap .con .left .newsTit {font-size:17px; padding:0;} .newsPostWrap .con .left {width:64%; padding:30px;} .newsPostWrap .con .left .newsTxt {font-size:15px;} .newsPostWrap .con .right {width:32%;} } @media (max-width:840px) { .newsPostWrap .con {height:217px;} .newsPostWrap .con .left .newsTit {margin:10px 0;} .newsPostWrap .con .left span {font-size:16px;} } @media (max-width:767px) { .newsPostWrap .con {height:180px; margin-bottom:20px;} .newsPostWrap .con .right {width:60%;} .newsPostWrap .con .left .newsTit {margin-top:0; margin-bottom:10px;} } @media (max-width:640px) { .newsPostWrap .con {flex-direction:column; height:auto;} .newsPostWrap .con .left {width:100%;} .newsPostWrap .con .left .newsTit {margin:0 0 20px 0;} .newsPostWrap .con .right {width:100%; margin-top:0; padding-top:10px;} .news p > span {font-size:15px !important; font-weight:400 !important; } } @media (max-width:480px) { .newsPostWrap {margin-top:20px;} .newsPostWrap .con {margin-bottom:15px;} .newsPostWrap .con .left span {font-size:15px;} .newsPostWrap .con .left .newsTit {font-size:16px; margin:10px 0; padding:0;} .newsPostWrap .con .left .newsTxt {font-size:14px;} .newsPostWrap .con .left {padding:17px; padding:25px 20px 10px 20px;} .newsPostWrap .con .right {margin-top:10px;} } /** 뷰페이지 **/ .viewPage .titWrap .left {width:80%; display:flex; align-items:center; margin-bottom:10px;} .viewPage .titWrap .left .notIcon {padding:5px 10px; margin-right:10px; display:inline-block; display:flex; justify-content:center; text-align:center; background:#161010; color:#fff; border-radius:5px; font-weight:300; font-size:16px; align-items:center;} .viewPage .titWrap .left .notIcon.blue {background:#5a55ff;} .viewPage .titWrap .left .notIcon.gray {background:#8187a1;} .title {font-size:40px; color:#000; text-align:center; font-weight:800;} .viewPage .titWrap {display:flex;justify-content:space-between;align-items:flex-start;} .viewPage .titWrap .left h1 {font-size:35px; line-height:1.3; padding-bottom:0;} .viewPage .titWrap .right .printBtn {background:#2A3384; width:44px; height:44px; border-radius:10px; position:relative;} .viewPage .titWrap .right .printBtn img {width:24px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .viewPage .titWrap .right .linkBtn{background:#96C6FF;border-radius:10px; width:44px; height:44px; cursor:pointer; position:relative;} .viewPage .titWrap .right .linkBtn img {width:20px; position:absolute;top:50%; left:50%; transform:translate(-50%, -50%);} .viewPage .titWrap .right .linkBtn:hover{background-color:#ddd;} .viewPage .titWrap .right .dropdown {display: inline-block;position: relative;} .viewPage .titWrap .right .dropdown-options {position: absolute;overflow: auto; display:none;background-color:#fff;border-radius:5px;box-shadow:0px 10px 10px 0px rgb(101 101 101 / 40%);} .viewPage .titWrap .right .dropdown-options a img {width:30px;} .viewPage .titWrap .right .dropdown:hover .dropdown-options {display: block;} .viewPage .titWrap .right .dropdown-options a {display: block;color: #000000;padding: 5px;text-decoration: none;padding:8px;;} .viewPage .titWrap .right .dropdown-options a:hover {color: #0a0a23;background-color: #ddd;border-radius:5px;} .viewPage .txtWrap {overflow: hidden; margin-bottom:10px;} .viewPage .txtWrap .txtTit {display:flex; flex-direction:column; padding-bottom:30px; border-bottom:2px solid #000; font-size: 16px; color: #333;} .viewPage .txtWrap .txtTit:after {display:block; content:''; clear:both;} .viewPage .txtWrap .txtTit ul {width:100%; display:flex; justify-content:flex-start;} .viewPage .txtWrap .txtTit ul:affter {display:block; content:''; clear:both;} .viewPage .txtWrap .txtTit ul li {float:left; padding-right:30px;} .viewPage .txtWrap .txtTit ul li span {padding-right:15px; font-weight:500; color:#000;} .viewPage .txtWrap .txtTit ul li span:after {display:inline-block; content:''; clear:both; width:1px; height:12px; vertical-align:middle; background:#b7b7b7; margin-left:15px;} .viewPage .txtWrap .txtTit ul li span img {width:20px; display:inline-block; margin-right:8px; margin-top:-4px; opacity:0.7;} .viewPage .txtWrap .txtTit ul li span img.user {width:16px;} .viewPage .txtWrap .txtTit ul li span img.viewIcon {width:22px;} .viewPage .txtWrap .txtTit ul li span:after {content:''; } .viewPage .txtWrap .txtTit ul li b {color:#808080; font-weight:500;} .viewPage .txtWrap .txtBox {padding:30px 20px; border-bottom:1px solid #cecece; margin-bottom:40px;} /* .viewPage .txtWrap .txtBox div {margin-bottom:40px;} */ .viewPage .txtWrap .txtBox .newsView {color:#fff; font-weight:600; font-size:20px; background:#000; padding:10px 20px; display:block; width:200px; text-align:center;} .viewPage .txtWrap .txtBox .fileBox {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;} .viewPage .txtWrap .txtBox .fileBox span {display:inline-block; padding-right:20px; font-size:18px; font-weight:800;} .viewPage .txtWrap .txtBox .fileBox .fileView {color:#000; cursor:pointer; color:#65697d; font-size:18px;} .viewPage .txtWrap .txtBox .fileBox .fileDown {color:#fff; background:url(/serviceAssets/img/downloadicon.png) 80% 50% no-repeat #000; background-size:15px; width:150px; height:40px; line-height:40px; padding-left:30px; } .viewPage .txtWrap .txtBox .fileBox div {margin-bottom:0;} .viewPage .txtWrap .txtBox .newsView:hover{background:#a4a4a4; transition:0.3s;} .viewPage .txtWrap .txtBox .box {margin:20px 0;} .viewPage .txtWrap .txtBox .box:after {display:block; content:''; clear:both;} .viewPage .txtWrap .txtBox .box .news {line-height:2; overflow-wrap:anywhere;} .viewPage .txtWrap .txtBox .box .news b {font-weight:600px; text-align:center; font-size:28px; display:block;} .viewPage .txtWrap .txtBox .box .poster img {display:block; width:100%; max-width:1000px;} .pdListBox {height:50px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px;} .pdListBox .listBtn {border:1px solid #000; display:flex; align-items:center; justify-content:center; color:#000; font-size:18px; background:#fff;width:120px; height:100%; text-align:center;} .pdListBox div {height:100%; display:flex; gap:6px;font-size:18px;} .pdListBox div .pdEditBtn {background:#2A3384; color:#fff; width:120px; display:flex; justify-content:center; align-items:center;} .pdListBox div .pdDeleteBtn {background:#656771; color:#fff; width:120px; display:flex; justify-content:center; align-items:center;} .viewPage .txtWrap .txtBox .poster {margin:30px 0;} @media (max-width:1400px) { .viewPage .titWrap .left h1 {font-size:24px;} } @media(max-width:1199px) { .viewPage .titWrap .left .notIcon {font-size:15px;} } @media (max-width:991px) { .viewPage .titWrap {align-items:center;} .viewPage .titWrap .right .printBtn {display:none;} .viewPage .txtWrap .txtTit {margin:0; padding:15px 5px;} .viewPage .txtWrap .txtTit ul {justify-content: flex-start;} .viewPage .txtWrap .txtBox {padding:30px 0;} .viewPage .txtWrap .txtBox .newsView {width:135px; font-size:17px;} .viewPage .txtWrap .txtBox .box .news {font-size:15px; line-height:1.4em;} .viewPage .txtWrap .txtBox .fileBox span {font-size:16px;} .viewPage .txtWrap .txtBox .fileBox .fileView {font-size:16px;} .viewPage .txtWrap .txtBox .fileBox {margin-bottom:10px;} .viewPage .txtWrap .txtBox .box .news b {font-size:16px; text-align:left;} .viewPage .txtWrap .txtBox .fileBox .fileDown {font-size:15px;} .viewPage .txtWrap .txtBox .fileBox .fileDown {width:100px; height:30px; line-height:30px; font-size:15px; background:#000; text-align:center; padding-left:0;} } @media (max-width:767px) { .viewPage .titWrap .left h1 {font-size:20px;} .viewPage .txtWrap .txtTit ul li span img {display:none;} .viewPage .txtWrap .txtTit ul li span {font-size:14px;} .viewPage .titWrap .left {width:90%; margin-bottom:0;} .viewPage .titWrap .left h1 {padding-bottom:0;} .viewPage .txtWrap .txtBox .box .news b {font-size:18px;} .viewPage .txtWrap .txtTit ul li b {font-size:14px;} .pdListBox {height:40px; width:100%; gap:6px;} .pdListBox .listBtn {width:100px; height:100%; font-size:16px;} .pdListBox div {height:100%; display:flex; gap:6px; font-size:16px;} .pdListBox div .pdEditBtn {width:100px; display:flex; justify-content:center; align-items:center;} .pdListBox div .pdDeleteBtn {width:100px; display:flex; justify-content:center; align-items:center;} } @media (max-width:640px) { .viewPage .titWrap .right .linkBtn {width:30px; height:30px; border-radius:6px;} .viewPage .titWrap .right .linkBtn img {width:15px;} .viewPage .titWrap .right .dropdown-options a img {width:24px;} .viewPage .titWrap .right .dropdown-options a {padding:4px;} .viewPage .txtWrap .txtBox {padding:15px 0; border-bottom:none;} .viewPage .txtWrap .txtBox .box {margin-bottom:20px;} .viewPage .txtWrap .txtTit ul li b {background:transparent; padding:0;} .viewPage .txtWrap .txtTit ul li span {padding-right:10px;} .viewPage .txtWrap .txtBox .fileBox {align-items:flex-start; flex-direction:column; padding-top:10px;} .viewPage .txtWrap .txtBox .fileBox div {margin-bottom:10px;} .viewPage .txtWrap .txtBox .fileBox span {font-size: 16px;} .viewPage .txtWrap .txtBox .fileBox .fileView {font-size: 16px;} .viewPage .txtWrap .txtTit ul li span:after {margin-left:10px;} .viewPage .txtWrap .txtTit ul li {padding-right:18px;} .viewPage .txtWrap .txtBox .fileBox .fileDown {width:100%; height:40px; line-height:40px;} .viewPage .txtWrap .txtTit ul li span:after {height:10px; vertical-align:initial;} .viewPage .txtWrap .txtBox {margin-bottom:10px;} } @media (max-width:480px) { .viewPage .titWrap .right .linkBtn {width:26px; height:26px; border-radius:6px;} .viewPage .titWrap .right .dropdown-options a img {width:22px;} .viewPage .titWrap .right .dropdown:hover .dropdown-options {margin-left:-2px;} .title {font-size:24px;} .viewPage .titWrap .left h1 {font-size:16px;} .viewPage .titWrap .left .notIcon {width: 100px; margin-right: 0; margin-bottom: 10px;} .viewPage .txtWrap .txtBox .newsView {width:110px; font-size:15px; padding:8px 0;} .viewPage .titWrap .right .linkBtn img {width:14px;} .viewPage .txtWrap .txtBox .box {margin-top:15px;} .viewPage .txtWrap .txtBox .box .news {font-size:15px; line-height:1em;} .viewPage .txtWrap .txtBox .poster {margin:20px 0;} .viewPage .titWrap {position: relative;} .viewPage .titWrap .right .dropdown-options a {padding: 4px;} .viewPage .titWrap .right .dropdown-options a img {width: 16px;} .viewPage .titWrap .right {position: absolute; top: 0; right: 0;} .viewPage .txtWrap .txtBox .newsView {width:100%;} .viewPage .txtWrap .txtTit ul li {display:flex;} .viewPage .txtWrap .txtBox .fileBox .fileDown {height:34px; width:100%; text-align:center; padding-left:0; line-height:34px; background:#000;} .viewPage .txtWrap .txtBox .fileBox {margin-bottom:4px;} .viewPage .txtWrap .txtBox .fileBox > div {display:block;} .viewPage .txtWrap .txtBox .fileBox .fileView {width: 100%;} .viewPage .txtWrap .txtBox .fileBox span {display:block;} .viewPage .titWrap .left {display: block; width:90%;} .viewPage .txtWrap .txtBox .box .news b {font-size:15px;} .viewPage .txtWrap .txtBox .fileBox .fileView {font-size:14px;} .pdListBox {justify-content:space-between;} .pdListBox .listBtn {font-size:15px; width:90px;} .pdListBox div .pdEditBtn {width:70px; font-size:15px;} .pdListBox div .pdDeleteBtn {width:70px; font-size:15px;} } @media (max-width:380px) { .viewPage .txtWrap .txtTit ul {flex-direction:column;} .viewPage .txtWrap .txtTit {padding:10px 0; border-bottom:1px solid #808080;} .viewPage .txtWrap .txtTit ul li {padding:3px 5px 3px 0;} .viewPage .txtWrap .txtTit ul li span {width:50px; display:block;} .viewPage .txtWrap .txtTit ul li span:after {display:none;} .viewPage .txtWrap .txtBox .box {margin-top:10px;} } /** 비전 **/ .subCont .visionBox {width: 100%; display: flex; justify-content: center; align-items: center; height: 464px; background: url(/serviceAssets/img/vision_bg.jpg) no-repeat 50% 50%; background-size: cover;} .subCont .visionBox .vtxt {color: #fff; text-align: center;} .subCont .visionBox .vtxt p.stit {font-size: 35px; font-weight: 600; margin-bottom: 65px;} .subCont .visionBox .vtxt .sBox p {font-size: 50px; font-weight: 300;} .subCont .visionBox .vtxt .sBox p span {font-size: 65px; font-weight: bold;} .subCont .targetBox {margin-top: 50px; padding-top: 168px; text-align: center; position: relative;} .subCont .targetBox:before {position: absolute; top: 0; left: 0; width: 100%; height: 247px; content: ""; background: url(/serviceAssets/img/target_bg.png) no-repeat 50% 50%;} .subCont .targetBox p.ttit {font-size: 40px; font-weight: 700;} .subCont .targetBox .tCont {position: relative; display: flex; margin-top: 80px; justify-content: center; gap: 26px;} .subCont .targetBox .tCont:before {position: absolute; bottom: -230px; right: -400px;; width: 1092px; height: 466px; background: url(/serviceAssets/img/vision_target_bg.png) no-repeat 50% 50%; content: "";} .subCont .targetBox .tCont .box {position: relative; width: 33.33%; padding: 40px 30px; border-radius: 30px; display: flex; justify-content: center; align-items: center;} .subCont .targetBox .tCont .box.bgB {background-color: #89B1FF;} .subCont .targetBox .tCont .box.bgV {background-color: #656AEA;} .subCont .targetBox .tCont .box.bgDB {background-color: #4454A5;} .subCont .targetBox .tCont .box .sBox span {display: inline-block; padding: 4px 22px; background-color: #fff; border-radius: 50px; font-size: 24px;} .subCont .targetBox .tCont .box .sBox span b {display: inline-block; margin-left: 4px;} .subCont .targetBox .tCont .box .sBox p {font-size: 30px; font-weight: bold; color: #fff; margin: 30px 0;} .subCont .targetBox .tCont .box .sBox .iconBox {width: 140px; height: 140px; display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 50%; margin: 0 auto;} .subCont .targetBox .tCont .box .sBox .tBox {margin-top: 30px;} .subCont .targetBox .tCont .box .sBox .tBox p {font-size: 22px; font-weight: 400; margin-top: 8px; margin-bottom: 0;} .subCont .targetBox .tCont .box .sBox .tBox p:nth-of-type(1) {margin-top: 0;} @media (max-width: 1400px) { .subCont .targetBox p.ttit {font-size: 34px;} .subCont .targetBox .tCont .box .sBox p {font-size: 26px;} } @media (max-width: 1200px) { .subCont .visionBox {height: 424px;} .subCont .visionBox .vtxt p.stit {font-size: 30px;} .subCont .visionBox .vtxt .sBox p {font-size: 44px;} .subCont .visionBox .vtxt .sBox p span {font-size: 60px;} .subCont .targetBox p.ttit {font-size: 30px;} .subCont .targetBox .tCont {gap: 16px;} .subCont .targetBox .tCont .box {padding: 30px 20px;} .subCont .targetBox .tCont .box .sBox span {font-size: 22px;} .subCont .targetBox .tCont .box .sBox p {font-size: 24px; margin: 20px 0;} .subCont .targetBox .tCont .box .sBox .iconBox {width: 120px; height: 120px;} .subCont .targetBox .tCont .box .sBox img {height: 60px;} .subCont .targetBox .tCont .box .sBox .tBox {margin-top: 20px;} .subCont .targetBox .tCont .box .sBox .tBox p {font-size: 18px;} } @media (max-width: 991px) { .subCont .visionBox {height: 364px;} .subCont .visionBox .vtxt p.stit {font-size: 26px; margin-bottom: 55px;} .subCont .visionBox .vtxt .sBox p {font-size: 34px;} .subCont .visionBox .vtxt .sBox p span {font-size: 46px;} .subCont .targetBox .tCont {margin-top: 60px;} .subCont .targetBox .tCont .box {padding: 24px 14px;} .subCont .targetBox .tCont .box .sBox span {font-size: 18px;} .subCont .targetBox .tCont .box .sBox p {font-size: 20px;} .subCont .targetBox .tCont .box .sBox .iconBox {width: 80px; height: 80px;} .subCont .targetBox .tCont .box .sBox img {height: 40px;} .subCont .targetBox .tCont .box .sBox .tBox p {font-size: 16px;} } @media (max-width: 768px) { .subCont .visionBox {height: 304px;} .subCont .visionBox .vtxt p.stit {font-size: 22px; margin-bottom: 40px;} .subCont .targetBox {padding-top: 118px; margin-top: 30px;} .subCont .targetBox:before {background-size: 500px; height: 167px;} .subCont .targetBox p.ttit {font-size: 26px;} .subCont .targetBox .tCont {margin-top: 30px; display: block;} .subCont .targetBox .tCont .box {width: 400px; padding: 30px 20px; margin: 20px auto 0; margin-top: 20px;} .subCont .targetBox .tCont .box:nth-of-type(1) {margin-top: 0;} .subCont .targetBox .tCont .box .sBox span {font-size: 18px;} .subCont .targetBox .tCont .box .sBox p {font-size: 18px;} } @media (max-width: 640px) { .subCont .visionBox {height: 284px;} .subCont .visionBox .vtxt p.stit {font-size: 20px; margin-bottom: 30px;} .subCont .visionBox .vtxt .sBox p {font-size: 26px; line-height: 1.3;} .subCont .visionBox .vtxt .sBox p span {font-size: 36px;} .subCont .targetBox {padding-top: 100px; margin-top: 20px;} .subCont .targetBox:before {background-size: 372px; height: 130px;} .subCont .targetBox p.ttit {font-size: 22px;} .subCont .targetBox .tCont {margin-top: 20px;} .subCont .targetBox .tCont .box .sBox span {font-size: 16px;} .subCont .targetBox .tCont .box .sBox img {height: 40px; margin: 22px auto 22px;} .subCont .targetBox .tCont .box .sBox p {font-size: 15px;} } @media (max-width: 480px) { .subCont .visionBox {height: 264px;} .subCont .visionBox .vtxt p.stit {font-size: 18px; margin-bottom: 20px;} .subCont .visionBox .vtxt .sBox p {font-size: 20px;} .subCont .visionBox .vtxt .sBox p span {font-size: 28px;} .subCont .targetBox {padding-top: 78px;} .subCont .targetBox:before {background-size: 322px; height: 100px;} .subCont .targetBox p.ttit {font-size: 20px;} .subCont .targetBox .tCont {display: block; margin-top: 14px;} .subCont .targetBox .tCont .box {width: 100%; margin-top: 10px; padding: 20px;} .subCont .targetBox .tCont .box:nth-of-type(1) {margin-top: 0;} .subCont .targetBox .tCont .box .sBox p {margin: 16px 0;} .subCont .targetBox .tCont .box .sBox .tBox {margin-top: 16px;} } /** 온라인 문의 **/ .inquiryBox {display: flex; align-items: end;} .inquiryBox .box {width: 50%;} .inquiryBox .box.leftBox {text-align: center; padding-right: 50px;} .inquiryBox .box.leftBox > p {font-size: 32px; font-weight: 600;} .inquiryBox .box.leftBox .agreeBox {text-align: left; margin-top: 24px; background-color: #F7F7F7; height: 573px; word-break: keep-all; border-radius: 30px; padding-right: 1px; padding-top: 20px; padding-bottom: 20px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap {padding: 20px 60px 20px; height: 100%; overflow-y: scroll;} .inquiryBox .box.leftBox .agreeBox .agreeWrap::-webkit-scrollbar {width: 8px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap::-webkit-scrollbar-thumb {background: #C3C4CE;border-radius: 10px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap::-webkit-scrollbar-track {background: transparent;} .inquiryBox .box.leftBox .agreeBox p.tit {font-size: 18px; font-weight: 500;} .inquiryBox .box.leftBox .agreeBox .agreeCont {margin-top: 30px; font-size: 18px;} .inquiryBox .box.leftBox .agreeBox .agreeCont > p {line-height: 1.4;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list {margin-top: 20px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list p.list_tit {font-weight: 600;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont {line-height: 1.8;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont > p {margin-top: 14px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont ul li {font-size: 17px;} .inquiryBox .box.leftBox .checkCont {margin-top: 30px;} .inquiryBox .box.leftBox .checkCont .formGroup input[type=checkbox] + label {font-size: 20px; cursor: pointer; font-weight: 500;} .inquiryBox .box.rightBox {padding-left: 50px;} .inquiryBox .box.rightBox .formBox {margin-top: 20px;} .inquiryBox .box.rightBox .formBox:nth-of-type(1) {margin-top: 0;} .inquiryBox .box.rightBox .formBox p.from_tit {font-size: 20px; font-weight: 500;} .inquiryBox .box.rightBox .formBox p.from_tit img {margin-left: 8px; margin-top: -4px;} .inquiryBox .box.rightBox .formBox .formCont {margin-top: 8px;} .inquiryBox .box.rightBox .formBox select {width: 100%; padding: 0 30px; height: 50px; border-radius: 5px; background: url(/serviceAssets/img/select_arrow_2.png) no-repeat #F7F7F7; border: 0; background-position: 95% 50%; color: #78797A; font-size: 18px;} .inquiryBox .box.rightBox .formBox select option[value=""][disabled] {display: none;} .inquiryBox .box.rightBox .formBox input[type="text"], .inquiryBox .box.rightBox .formBox input[type="email"] {width: 100%; border: 2px solid #F4F4F4; border-radius: 5px; height: 50px; padding: 0 20px;} /* .inquiryBox .box.rightBox .formBox input[type="text"], */ /* .inquiryBox .box.rightBox .formBox input[type="email"]::placeholder {color: #78797A; font-weight: 300;} */ .inquiryBox .box.rightBox .formBox textarea {width: 100%; border: 2px solid #f4f4f4; height: 100px; padding: 14px 20px; border-radius: 5px;} /* .inquiryBox .box.rightBox .formBox textarea::placeholder {color: #78797A; font-weight: 300;} */ .inquiryBox .box.rightBox .fileBox {position: relative; height: 50px; width: 100%;} .inquiryBox .box.rightBox .fileBox input.upload-name {width: 100%; height: 50px; background-color: #fff !important; border: 2px solid #F4F4F4; padding: 0 200px 0 20px; border-radius: 5px;} .inquiryBox .box.rightBox .fileBox input.upload-name[disabled] {font-weight: 300; color: #78797A;} .inquiryBox .box.rightBox .fileBox #fileCus {display: none;} .inquiryBox .box.rightBox .fileBox label.file-select-label {position: absolute; top: 50%; transform: translateY(-50%); right: 104px; width: 90px; height: 34px; display: flex; justify-content: center; align-items: center; background-color: #2A3384; color: #fff; border: 1px solid #2A3384; border-radius: 50px; font-size: 16px; cursor: pointer;} .inquiryBox .box.rightBox .fileBox button {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 90px; height: 34px; background-color: #fff; color: #2A3384; border: 1px solid #2A3384; border-radius: 50px; font-size: 16px;} button.inquiryBtn {width: 100%; height: 70px; margin-top: 60px; font-size: 28px; font-weight: 700; color: #fff; background-image: linear-gradient(45deg, #2A3384, #000000); transition: all .3s;} @media (max-width: 1600px) { .inquiryBox .box.leftBox > p {font-size: 28px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap {padding: 20px 40px 20px;} } @media (max-width: 1200px) { .inquiryBox .box.leftBox {padding-right: 30px;} .inquiryBox .box.leftBox > p {font-size: 24px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap {padding: 10px 30px 10px;} .inquiryBox .box.leftBox .agreeBox .agreeCont {font-size: 16px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list {margin-top: 16px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont ul li {font-size: 16px;} .inquiryBox .box.leftBox .checkCont {margin-top: 20px;} .inquiryBox .box.leftBox .checkCont .formGroup input[type=checkbox] + label {font-size: 18px;} .inquiryBox .box.rightBox {padding-left: 30px;} .inquiryBox .box.rightBox .formBox p.from_tit {font-size: 18px;} .inquiryBox .box.rightBox .formBox p.from_info {font-size: 14px;} } @media (max-width: 991px) { .inquiryBox {display: block;} .inquiryBox .box {width: 100%;} .inquiryBox .box.leftBox {padding-right: 0;} .inquiryBox .box.leftBox .agreeBox {height: 300px;} .inquiryBox .box.rightBox {padding-left: 0; margin-top: 40px;} button.inquiryBtn {height: 60px; font-size: 24px;} } @media (max-width: 640px) { .inquiryBox .box.leftBox .agreeBox p.tit {font-size: 16px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap {padding: 10px 20px;} .inquiryBox .box.leftBox .agreeBox .agreeCont {margin-top: 14px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list {margin-top: 12px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont > p {margin-top: 10px;} .inquiryBox .box.leftBox .checkCont {margin-top: 14px;} .inquiryBox .box.rightBox {margin-top: 30px;} .inquiryBox .box.rightBox .formBox {margin-top: 14px;} .inquiryBox .box.rightBox .formBox input[type="text"], .inquiryBox .box.rightBox .formBox input[type="email"] {font-size: 16px;} .inquiryBox .box.rightBox .formBox textarea {font-size: 16px;} .inquiryBox .box.rightBox .fileBox input.upload-name {font-size: 16px;} button.inquiryBtn {margin-top: 30px; height: 50px; font-size: 20px;} } @media (max-width: 480px) { .formGroup.checkbox-type2 input[type=checkbox] + label:after, .formGroup.checkbox-type2 input[type=checkbox] + label:before {width: 16px; height: 16px; top: 16px;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:before {width: 16px; height: 16px;} .formGroup.checkbox-type2 input[type=checkbox]:checked + label:after {line-height: 16px; font-size: 10px;} .inquiryBox .box.leftBox > p {font-size: 20px;} .inquiryBox .box.leftBox .agreeBox {margin-top: 14px; height: 290px; border-radius: 20px;} .inquiryBox .box.leftBox .agreeBox .agreeWrap {padding: 0 20px;} .inquiryBox .box.leftBox .agreeBox p.tit {font-size: 15px;} .inquiryBox .box.leftBox .agreeBox .agreeCont {font-size: 14px;} .inquiryBox .box.leftBox .agreeBox .agreeCont .list .list_cont ul li {font-size: 14px;} .inquiryBox .box.leftBox .checkCont .formGroup input[type=checkbox] + label {font-size: 16px;} .inquiryBox .box.rightBox .formBox input[type="text"], .inquiryBox .box.rightBox .formBox input[type="email"] {height: 40px;} .inquiryBox .box.rightBox .formBox textarea {font-size: 14px;} .inquiryBox .box.rightBox .fileBox input.upload-name {padding: 0 20px; font-size: 14px; height: 40px;} .inquiryBox .box.rightBox .fileBox label.file-select-label {margin-top: 10px; font-size: 15px; position: static; transform: none; display: inline-block; text-align: center; line-height: 34px; border-radius: 10px;} .inquiryBox .box.rightBox .fileBox button {margin-top: 10px; position: static; transform: none; font-size: 15px; display: inline-block; border-radius: 10px; line-height: 33px;} button.inquiryBtn {margin-top: 60px;} .inquiryBox .box.rightBox .formBox input[type="text"], .inquiryBox .box.rightBox .formBox input[type="email"] {font-size: 14px;} .inquiryBox .box.rightBox .formBox p.from_tit {font-size: 16px;} .inquiryBox .box.rightBox .formBox p.from_info {font-size: 12px;} } /* 프로젝트 */ /* ================== 공통 ================== */ @font-face{font-family:'Paperlogy';src:url('/serviceAssets/fonts/Paperlogy-5Medium_1.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Paperlogy';src:url('/serviceAssets/fonts/Paperlogy-6SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Paperlogy';src:url('/serviceAssets/fonts/Paperlogy-7Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Paperlogy';src:url('/serviceAssets/fonts/Paperlogy-8ExtraBold_1.woff') format('woff');font-weight:800;font-style:normal;font-display:swap;} .proTit{text-align:center;font-weight:800;font-size:50px;} .proBox{display:flex;align-items:center;} .proBox .titBox{width:158px;height:158px;border-radius:50%;font-size:35px;font-weight:800;display:flex;justify-content:center;align-items:center;border:10px solid #2A3384;} .proBox .titBox2{font-size:26px;} .proBox .contBox{padding-left:190px;position:relative;width:calc(100% - 158px);} .proBox .contBox:before{position:absolute;top:50%;left:0;transform:translateY(-50%);width:180px; height:1px;border-top:2px solid #f0f0f0;content:"";} .proBox .contBox:after{position: absolute;top: 50%;left: 180px;transform: translateY(-50%);width: 24px;height: 24px;border: 6px solid #6C7EE5;background-color: #fff;border-radius: 50%;content: "";} .proBox .contBox .tBox{font-size:36px;padding:36px 40px;color:#fff;background:#2A3384;border-radius:10px;font-weight:600;text-align:center;} .proBox .contBox .tBox span{color:#BAC3F8;} .proBox.outline{margin-top:194px;} .proBox.outline .titBox{border:10px solid #EEE;} p.ft17{font-size:17px;color:#525799;font-weight:500;padding-bottom:5px;} img.pp_con {} .proBox.task{margin-top:40px;} .proBox.task .titBox{border:10px solid #DBECFF;} .proBox.task .contBox:before{width:93px;} .proBox.task .contBox:after{left:90px;border-top:none;border-right:none;border-bottom:none;background:transparent;width:1px;height:184px;border-radius:0;border-left:2px solid #f0f0f0;} .proBox.task .contBox ul{display:flex;flex-wrap:wrap;gap:30px 0;margin-left:-30px;} .proBox.task .contBox ul li{width:50%;padding-left:30px;position:relative;} .proBox.task .contBox ul li:before{position:absolute;top:50%;left:0;transform:translateY(-50%);width:30px;height:1px;border-top:2px solid #f0f0f0;content:"";} .proBox.task .contBox ul li:nth-of-type(2n+1):before{width:100px;left:-70px;} .proBox.task .contBox ul li:after{position:absolute;top:50%;left:20px;transform:translateY(-50%);width:24px;height:24px;border:6px solid #D5E4FF;background:#fff;border-radius:50%;content:"";} .proBox.task .contBox ul li .tsBox{position:relative;background:#ECF3FF;padding:20px 24px;height:100%;border-radius:10px;} .proBox.task .contBox ul li .tsBox p.stit{padding:10px 20px;font-size:22px;background:#fff;border-radius:5px;display:block;font-weight:600;} .proBox.task .contBox ul li .tsBox p.stit span{font-weight:400;} .proBox.task .contBox ul li .tsBox .stxt{margin-top:14px;font-size:20px;line-height:1.4;} .proBox.task .contBox ul li .tsBox .stxt span{font-weight:800;color:#2A3384;display:inline-block;margin-right:6px;} .proBox.task .contBox ul li .tsBox p.stit img{height:26px;float:right;} .proBox.unit{margin-top:40px;} .proBox.unit .titBox{border:10px solid #DBECFF;} .proBox.unit .contBox:after{border:6px solid #D5E4FF;} .proBox.unit .contBox ul{display:flex;flex-wrap:wrap;gap:30px 0;margin-left:-30px;} .proBox.unit .contBox ul li{width:33.3333%;padding-left:30px;position:relative;} .proBox.unit .contBox ul li:before{position:absolute;top:50%;left:-19%;transform:translateY(-50%);width:26%;height:1px;border-top:2px solid #f0f0f0;content:"";} .proBox.unit .contBox ul li:nth-of-type(2n+1):before{width:100px;left:-70px;} .proBox.unit .contBox ul li:after{position:absolute;top:50%;left:20px;transform:translateY(-50%);width:24px;height:24px;border:6px solid #D5E4FF;background:#fff;border-radius:50%;content:"";} .proBox.unit .contBox ul li .unBox{background:#ECF3FF;padding:28px 24px;height:100%;border-radius:10px;width:100%;} .proBox.unit .contBox ul li .unBox .untit{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:10px;padding:10px 14px;position:relative;} .proBox.unit .contBox ul li .unBox .untit img{height:25px;} .proBox.unit .contBox ul li .unBox .untit p{font-size:20px;font-weight:600;color:#192880;} .proBox.unit .contBox ul li .unBox .unCont{margin-top:20px;} .proBox.unit .contBox ul li .unBox .unCont .box{margin-top:10px;font-size:17px;line-height:1.4;font-weight:500;} .proBox.unit .contBox ul li .unBox .unCont .box:nth-of-type(1){margin-top:0;} .proBox.unit .contBox ul li .unBox .untit .iconBox2{width:40px;height:40px;position:absolute;top:20px;right:20px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:#fff;} .proBox.unit .contBox ul li .unBox .unCont .box br{display:none;} .proBox.outline .contBox .arrowBox {position: absolute; top: -194px; left: 0; width: 100%; padding-left: 190px;} .proBox.outline .contBox .arrowBox img {display: block; margin: 0 auto;} .proBox.outline .contBox .arrowBox img:nth-last-of-type(1) {margin: -30px auto 0;} .proBox .contBox.borDashed:before {width:93px;} .proBox .contBox.borDashed:after {height:53%;display: block;left: 90px;top: 108px;bottom: 0;transform: none;border-top: none;border-right: none;border-bottom: none;background: transparent;width: 1px;border-radius: 0;border-left: 2px solid #f0f0f0;} .proBox.outline2 .contBox:after{ height:191px; display:block;left:90px;top:36px;bottom:0;transform:none;border-top:none;border-right:none;border-bottom:none;background:transparent;width:1px;border-radius:0;border-left:2px solid #f0f0f0;} .proBox.outline2 .contBox ul{display:block;} .proBox.outline2 .contBox ul li{width:100%;padding-left:0;margin-top:20px;position:relative;} .proBox.outline2 .contBox ul li:nth-of-type(1){margin-top:0;} .proBox.outline2 .contBox ul li:before{position:absolute;top:50%;left:-100px;transform:translateY(-50%);width:93px;height:1px;border-top:2px solid #f0f0f0;content:"";} .proBox.outline2 .contBox ul li:after{position:absolute;top:50%;left:-10px;transform:translateY(-50%);width:24px;height:24px;border:6px solid #D2D2D2;background:#fff;border-radius:50%;content:"";} .proBox.unit .contBox ul li:before {z-index:-1;} ul.thiBox{display:block;} ul.thiBox li{width:100%;} ul.thiBox li .olBox{background:#F4F4F4;padding:22px 48px;border-radius:10px;font-size:22px;line-height:1.4;font-weight:400;} .proBox.unit .contBox ul li .unBox .untit img.h21 {height:20px;} .proBox.task.task2 .contBox:after {top:50%; height:218px;} .proBox.task.task3 .contBox:after {top:50%; height:218px;} /* ================== 반응형 ================== */ @media (max-width: 1600px){ .proBox.task .contBox ul li .tsBox .stxt {font-size: 18px;} .proBox.unit .contBox ul li .unBox .untit p {font-size: 18px;} .proBox.unit .contBox ul li .unBox:nth-of-type {margin-left:0;} .proBox .contBox.borDashed:after {height:52%; top:120px;} .proBox.unit .contBox ul li:before {left:-22%; width:31%;} .proBox.unit .contBox ul {margin-left:0; gap:20px 0;} .proBox.unit .contBox ul li:first-of-type {padding-left:0;} .proBox.unit .contBox ul li:nth-of-type(4) {padding-left:0;} .proBox.unit .contBox ul li {padding-left:20px;} .proBox.unit .contBox ul li:after {left:-10px;} .proBox.unit .contBox ul li:nth-of-type(2n+1):before {left:-100px;} .proBox.unit .contBox ul li:nth-of-type(4):before{left:-32%;} .proBox.unit .contBox ul li:nth-of-type(3):before {left:-16%;} .proBox.unit .contBox ul li:nth-of-type(5):before {left:-16%;} .proBox.task .contBox:after {top:50%; height:182px;} .proBox.task .titBox {border:10px solid #DBECFF;} .proBox .titBox {border:10px solid #2A3384;} } @media (max-width: 1400px){ .proTit {font-size: 46px;} .proBox .contBox .tBox {font-size: 30px; padding: 36px 30px;} .proBox.unit .contBox ul li .unBox {padding: 24px 14px;} .proBox.unit .contBox ul li .unBox .untit p {font-size: 16px;} .proBox.unit .contBox ul li .unBox .unCont .box {font-size: 16px; padding:0 14px;} .proBox.unit .contBox ul li .unBox .unCont .box br {display: none;} .proBox.unit .contBox ul li .unBox .unCont {margin-top:10px; display:flex; flex-direction:column; gap:5px;} .proBox.task .contBox ul li .tsBox p.stit {font-size: 20px;} .proBox.task .contBox ul li .tsBox .stxt {font-size: 16px;} .proBox.task .contBox ul li .tsBox .stxt p br {display: none;} .proBox.task .contBox ul li .tsBox .iconBox {width: 52px; height: 52px; right: 20px;} .proBox.unit .titBox {margin: 0 auto; border: 3px solid #DBECFF; } .proBox.unit .contBox {width: 100%; padding-left: 0; padding-top: 30px;} .proBox.unit .contBox:before {display: none;} .proBox.unit .contBox:after {display: none;} .proBox.unit {margin-top: 40px; display: block;} .proBox.unit .contBox ul li .unBox .untit .iconBox2 {top:13px; right:15px;} .proBox.outline .titBox3 {width:100%; border-radius:10px; height:auto; padding:20px;} .proBox.outline .contBox ul li:after {display:none;} .proBox.outline .contBox ul li:before {display: none;} .proBox.outline2 .contBox ul li:before {display: block;} .proBox.outline2 .contBox ul li:after {display:block;} .proBox .titBox {font-weight:700;} .proBox.outline .contBox ul {width:100%;} .proBox.unit .contBox.borDashed:after {display:none;} .proBox.task .contBox:after {top: 52%;height: 163px;} } @media (max-width:1343px) { .proBox.task .contBox:after {top: 50%;height: 172px;} .proBox.task .contBox:before {width: 91px;} } @media (max-width:1215px) { .proBox.task.task2 .contBox:after {top: 49%;height: 226px;} } @media (max-width: 1200px){ .proTit {font-size: 40px;} .proBox .titBox {width: 148px; height: 148px;} .proBox .titBox2 {font-size: 28px;} .proBox .contBox {padding-left: 120px; width: calc(100% - 148px);} .proBox .contBox:before {width: 110px;} .proBox .contBox:after {left: 110px;} .proBox .contBox .tBox {font-size: 24px; padding: 36px 30px;} .proBox.outline {margin-top: 164px;} .proBox.outline .contBox .arrowBox {top: -164px;} .proBox.outline .contBox .arrowBox {padding-left: 120px;} .proBox.outline .contBox ul li .olBox {font-size: 18px; padding: 20px 30px;} .proBox.outline .contBox ul li .olBox br {display: none;} .proBox.task {display: block;} .proBox.task .titBox {margin: 0 auto; width: 100%; border-radius: 10px; padding:20px; height:auto; border: 3px solid #DBECFF;} .proBox.task .contBox {width: 100%; padding-left: 0; padding-top: 20px;} .proBox.task .contBox:before {display: none;} .proBox.task .contBox:after {display: none;} .proBox.task .contBox ul {gap: 13px; margin-left: 0; justify-content:space-between;} .proBox.task .contBox ul li {padding-left: 0; width: calc(50% - 7px);} .proBox.task .contBox ul li:before, .proBox.task .contBox ul li:after {display: none;} .proBox.task .contBox ul li:nth-of-type(2n+1):before, .proBox.task .contBox ul li:nth-of-type(2n+1):after {display: none;} .proBox.task .contBox ul li .tsBox .stxt p br {display: block;} .proBox.unit {margin-top:50px;} .proBox.outline2 .contBox:after {left: 55px; height: 172px; top:32px;} .proBox.outline2 .contBox ul li:before {width: 66px; left: -63px;} .proBox.outline .contBox ul li {padding-left:13px;} .proBox.unit .contBox {padding-top:20px;} .proBox.unit .contBox ul li .unBox {padding:14px;} .proBox.unit .contBox ul li .unBox .unCont .box {padding:0 13px;} .proBox.outline2 .contBox ul li:after {left:0;} .proBox.unit .contBox ul {gap:13px 0;} } @media (max-width: 991px){ .proTit {font-size: 36px;} .proBox .titBox {width: 128px; height: 128px; font-size: 30px;} .proBox .titBox2 {font-size: 23px;} .proBox .contBox {padding-left: 80px; width: calc(100% - 128px);} .proBox .contBox:before {width: 70px;} .proBox .contBox:after {left: 70px;} .proBox .contBox .tBox {font-size: 22px; padding: 30px 20px; font-size: 20px;} .proBox.outline {display: block; margin-top: 210px;} .proBox.outline .titBox {margin: 0 auto;} .proBox.outline .contBox {width: 100%; padding-left: 0; padding-top: 20px;} .proBox.outline .contBox:before {display: none;} .proBox.outline .contBox:after {display: none;} .proBox.outline .contBox .arrowBox {padding-left: 0; top: -270px;} .proBox.outline .contBox .arrowBox img:nth-last-of-type(1) {width: 560px;} .proBox.outline .contBox ul li .olBox {font-size: 18px; padding: 24px 20px;} .proBox.unit {margin-top: 30px;} .proBox.unit .contBox ul li .unBox .untit p {font-size: 15px;} .proBox.unit .contBox ul li .unBox .untit img {height: 20px;} .proBox.unit .contBox ul li .unBox .unCont .box {font-size: 15px; padding:0;} .proBox.task {margin-top: 30px;} .proBox.outline .titBox4 {width:100%; border-radius:10px; height:auto; padding:20px;} .proBox.outline .contBox ul li:after {display:none;} .proBox.outline2 .titBox4 {border: 3px solid #EEEEEE;} .proBox.outline2 .contBox ul li {margin-top: 14px;} .proBox.outline2 .contBox ul li:before, .proBox.outline2 .contBox ul li:after {display: none;} .proBox.outline2 .contBox ul li:nth-of-type(1):before, .proBox.outline .contBox ul li:nth-of-type(1):after {display: none;} .proBox.outline2 .contBox ul li .olBox {justify-content: center; padding: 20px;} .proBox.unit .contBox ul li .unBox .untit {padding: 10px; border-radius:6px;} .proBox.outline .contBox ul li.marT20 {margin-top:0;} .proBox.outline .contBox .thiBox li {padding-left:0;} .proBox.unit .contBox ul {gap:13px 0;} .proBox.unit .contBox ul li .unBox .untit img.h21 {height:17px;} } @media (max-width:880px) { .proBox.unit .contBox ul li .unBox .untit .iconBox2 {display:none;} p.ft17 {line-height:1.2; padding-bottom:5px;} } @media (max-width: 768px){ .proTit {font-size: 30px;} .proBox {display: block;} .proBox .titBox {margin: 0 auto; border:3px solid #2A3384;} .proBox .contBox {padding-left: 0; width: 100%; padding-top: 20px;} .proBox .contBox:before {display: none;} .proBox .contBox:after {display: none;} .proBox.outline {margin-top: 164px;} .proBox.unit {margin-top: 30px;} .proBox.unit .contBox ul {display:flex; flex-wrap:wrap; gap:2%;} .proBox.unit .contBox ul li{width:49%; padding-left:0; margin-top:2%;} .proBox.unit .contBox ul li .unBox .untit img.h21 {height:20px;} .proBox.unit .contBox ul li:before, .proBox.unit .contBox ul li:after {display: none;} .proBox.unit .contBox ul li .unBox .untit p {font-size: 18px;} .proBox.unit .contBox ul li .unBox .untit img {height: 23px;} .proBox.unit .contBox ul li .unBox .unCont {display: flex; flex-wrap: wrap; gap: 10px;} .proBox.unit .contBox ul li .unBox .unCont .box {width: 100%; margin-top: 0; font-size:16px; padding:0 14px;} .proBox.task .titBox {height:auto; padding:15px;} .proBox.task .contBox ul li .tsBox {padding: 20px;} .proBox.task .contBox ul li .tsBox p.stit {font-size: 18px;} .proBox.task .contBox ul li .tsBox .stxt {font-size: 15px;} .proBox.task .contBox ul li .tsBox .iconBox {width: 42px; height: 42px; right: 14px;} .proBox.task .contBox ul li .tsBox p.stit img {height: 24px;} .proBox.unit .contBox ul li .unBox .untit .iconBox2 {display:flex;} .proBox.unit .contBox ul li .unBox .unCont .box br {display:none;} .proBox.outline .contBox ul li .olBox {padding:16px 30px; font-size:17px;} .proBox.unit .titBox {padding:15px;} .proBox.outline .contBox .arrowBox {top: -210px;} .proBox.outline .titBox {padding:15px;} .proBox .titBox5 {width:100%; border-radius:10px 10px 0 0; padding:15px; height:auto; font-size:23px; border-bottom:0;} .proBox .contBox .tBox {border-radius: 0 0 10px 10px;} .proBox .contBox {padding-top:0;} .proBox.unit .contBox ul li .unBox .untit {padding: 10px 14px;} .proBox.outline .contBox ul li.marT20 {margin-top:2%;} } @media (max-width: 640px){ img.pp_con {height:25px !important;} .proBox .titBox2 {font-size: 20px;} .proBox .contBox {padding-top: 20px;} .proBox .contBox:before {top: 30px; width: 50px;} .proBox .contBox:after {top: 50px; width: 20px; height: 20px; border: 3px solid #6C7EE5;} .proBox .contBox .tBox {font-size: 18px; padding: 24px 20px;} .proBox.outline {margin-top: 154px;} .proBox.outline .titBox {border: 3px solid #eee;} .proBox.outline .contBox {padding-top: 10px;} .proBox.outline .contBox:before {top: 24px; width: 40px;} .proBox.outline .contBox:after {top: 50px; border: 3px solid #D2D2D2;} .proBox.outline .contBox .arrowBox {top: -194px;} .proBox.outline .contBox .arrowBox img:nth-of-type(1) {width: 283px;} .proBox.outline .contBox .arrowBox img:nth-last-of-type(1) {margin-top: -20px; width: 440px;} .proBox.outline .contBox ul {display: block;} .proBox.outline .contBox ul li {width: 100%; padding-left: 0; margin-top: 10px;} .proBox.outline .contBox ul li:nth-of-type(1) {margin-top: 0;} .proBox.outline .contBox ul li:before, .proBox.outline .contBox ul li:after {display: none;} .proBox.outline .contBox ul li .olBox {font-size: 16px; padding: 20px;} .proBox.unit {margin-top: 30px;} .proBox.unit .titBox {border: 3px solid #DBECFF;} .proBox.unit .contBox ul li .unBox .unCont {margin-top: 16px;} .proBox.task .titBox {border: 3px solid #DBECFF;} .proBox.task .contBox {padding-top: 20px;} .proBox.task .contBox ul {gap: 10px;} .proBox.task .contBox ul li {width: 100%;} .proBox.task .contBox ul li .tsBox {padding: 16px;} .proBox.task .contBox ul li .tsBox .stxt {font-size: 16px;} .proBox.task .contBox ul li .tsBox p.stit img {height: 20px;} .proBox .titBox5 {width:100%; border:3px solid #2A3384; font-size:20px; border-bottom:none;} .proBox .contBox {padding-top:0;} .proBox.outline .contBox ul li.marT20 {margin-top:10px;} p.ft17 {font-size:16px;} } @media (max-width: 480px){ .proTit {font-size: 26px;} .proBox .contBox:before {width: 30px; top: 15px;} .proBox .contBox:after {top: 32px; width: 16px; height: 16px;} .proBox .contBox .tBox {font-size: 16px;} .proBox.outline {margin-top: 94px;} .proBox.outline .contBox:before {top: 15px; width: 30px;} .proBox.outline .contBox:after {top: 32px;} .proBox.outline .contBox .arrowBox {top: -140px;} .proBox.outline .contBox .arrowBox img:nth-of-type(1) {width: 183px;} .proBox.outline .contBox .arrowBox img:nth-last-of-type(1) {width: 280px; margin-top: -10px;} .proBox.outline .contBox ul li {margin-top: 10px;} .proBox.outline .contBox ul li .olBox {padding: 14px 20px;} .proBox.unit {margin-top: 20px;} .proBox.unit .contBox ul li .unBox .unCont .box {width: 100%;} .proBox.task {margin-top: 20px;} .proBox.task .titBox {height: 60px;} .proBox.task .contBox:before {top: 15px; width: 30px;} .proBox.task .contBox ul li .tsBox p.stit {font-size: 16px;} .proBox.task .contBox ul li .tsBox .stxt {font-size: 15px;} .proBox.unit .contBox ul li .unBox .unCont {gap: 8px;} } @media (max-width:350px) { .proBox .contBox .tBox {padding:20px 15px;} } /* 끝 */ /** footer **/ footer {position: relative; width: 100%; height:auto; padding:60px 100px; display: flex; flex-direction:column; align-items: center; background:#1A1B1F;} footer .fmenu {display:flex; width:100%; flex-direction:column;} /* footer .familyWrapBox {display: grid;grid-template-columns: repeat(2, minmax(200px, auto));justify-content: end;gap: 12px 16px;position: absolute;bottom: 60px;right: 100px;} */ footer .familyWrapBox {display:flex; justify-content:flex-end; gap:12px; position:absolute; right:100px; bottom:60px;} footer .family {position: relative; width: 200px; height: 40px; text-align: left;} footer .family div {width:200px; height:40px;} footer .family ul {position: absolute; display: none; bottom: 40px; padding: 10px 0; width: 100%; background: #1F222D; border: 1px solid #fff; border-bottom: 0; z-index: 999; transition: all .3s;} footer .family ul.open {display: block;} footer .family ul li {color: #fff; padding: 0 10px;} footer .family ul li a {display: block; font-size: 13px; color :#fff; padding: 5px 0;} footer .family button {border: 1px solid #fff; display: block; width: 100%; height: 100%; background: none; text-align: left; text-transform: uppercase; padding: 0 18px; font-size: 18px; font-weight: 300; font-size: 18px; color: #fff; display: flex; justify-content: space-between; align-items: center;} footer .family button span {font-size:16px; letter-spacing:0;} footer .family button img {transform: rotate( 0deg ); transition: all .3s;} footer .family button.on img {transform: rotate( 180deg ); transition: all .3s;} footer .fup {color:#fff; display:flex; justify-content:flex-end;} footer .fup .infoBox a {color:#fff;padding-right:25px;} footer .fup .infoBox a:last-of-type {padding-right:0; } footer .fup .infoBox a:last-of-type:after {display:none;} footer .fup .infoBox a:after {display:inline-block; content:''; clear:both; width:1px; height:13px; vertical-align:middle; background:#8a8a8a; margin-left:25px;} footer .adress {color:#fff; display:flex; width:100%;padding-top:20px; gap:20px; justify-content:space-between; flex-direction:column;} footer .adress .logoImg {width:10%; align-items:flex-start;height:100%;} footer .adress .logoImg img {} footer .adress .adressTxt {width:55%; height:100%; align-items:center; padding-left:20px} footer .adress .adressTxt div {width:100%; display:flex; flex-direction:column;} footer .adress .adressTxt .w50 {width:50px;} footer .adress .adressTxt div span {font-size:16px; line-height:1.8;} footer .adress .adressTxt div h4 {font-size:16px; line-height:1.8; font-weight:200;} footer .adress div {display:flex;} footer .adress div span { font-size:16px;} footer .adress .copyright {align-items:flex-start; justify-content:flex-start;} footer .adress div span b {font-weight:200;} footer .adress div p {font-size:16px;} .modal-body .scrollBox {margin:20px 0; padding:20px; border:1px solid #ddd; } .modal-content .popup-tit p {font-size:22px;} .modal-body .sTit:before {width:6px; height:6px; background:#2A3384; content:''; display:inline-block; transform:rotate(-45deg); margin-right:5px; vertical-align: middle;} .modal-body .scrollBox > p {color:#f14444; font-size:18px;} .modal-body .scrollBox .poliTit {margin:20px 0; } .modal-body .scrollBox .poliTit .bold { font-size:18px; font-weight:600;} .modal-body .scrollBox .poliTit .txt {margin-top:5px;} .modal-body .scrollBox .poliTit .txt ul { font-size:15px; margin-top:5px;} .modal-body .scrollBox .poliTit .txt ul li {padding:3px 0; position:relative;} .modal-body .scrollBox .poliTit .txt ul li:before {content:''; width:5px; height:5px; background:#bdbdbd; display:inline-block; vertical-align:middle; margin-right:8px; border-radius:50%;} .modal-body .scrollBox h5 {text-align:right; font-family:'SUIT'; font-size:16px;} .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 99999;justify-content: center;align-items: center;} .modal-dialog {background-color: #fff; max-width:100%; padding:30px; width:800px; height:700px; overflow: auto; position:absolute; bottom:auto; left:50%; top:50%; transform:translate(-50%,-50%);} .modal-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 15px;} .popup-tit {font-size: 1.2em;color: #333;margin: 0;} .modal-body .sTit {color:#2A3384;} .close-btn {width: 30px;height: 30px;position: absolute; cursor: pointer; top:20px; right:20px; z-index:99999; background:transparent; } .close-btn:before, .close-btn:after {content: '';position: absolute;top: 50%;left: 50%;width: 100%;height: 2px;background-color: #000;} .close-btn:before {transform: translate(-50%, -50%) rotate(45deg);transition: transform 0.5s ease;} .close-btn:after {transform: translate(-50%, -50%) rotate(-45deg);transition: transform 0.5s ease;} .close-btn:hover:before {transform: translate(-50%, -50%) rotate(225deg);} .close-btn:hover:after {transform: translate(-50%, -50%) rotate(135deg);} ::-webkit-scrollbar {width: 7px; } ::-webkit-scrollbar-thumb {background: #aed2ff;border-radius:30px;} ::-webkit-scrollbar-track {background: transparent;} @media (max-width:1500px) { footer .familyWrapBox {} footer .family {width:150px;} footer .family div {width:150px;} footer .family button span {font-family:14px;} } @media (max-width:1400px) { footer .adress {justify-content:flex-start;} footer .adress .adressTxt {width:50%; padding-left:30px; align-items:center;} footer .adress .copyright {width:40%;} footer {padding:50px;} footer .familyWrapBox {right:50px; bottom:50px;} } @media (max-width:1300px) { footer .adress {display:inline-block;} footer .adress .logoImg {width:160px; padding-top:10px;} footer .adress .logoImg:after {display:block; content:''; clear:both;} footer .adress .copyright {justify-content:flex-start; padding-top:15px; width:100%;} footer .adress .adressTxt {width:calc(100% - 140px); padding-top:10px; padding-left:0;} footer {height:auto;} } @media (max-width:1199px) { footer .familyWrapBox {position:inherit; bottom:auto; right:auto; width:100%; padding-top:20px;} } @media (max-width:1099px) { footer {padding:50px;} } @media (max-width:991px) { footer {padding:50px 30px;} footer .familyWrapBox {gap:10px; justify-content:flex-start; padding-top:30px;} footer .fup {align-items:center;} .modal-dialog {width:700px;} .modal-body .scrollBox {max-height:500px; overflow:auto;} .modal-body .scrollBox > p {font-size:15px;} .modal-body .scrollBox .poliTit .bold {font-size:16px;} .modal-body .scrollBox .poliTit .txt {font-size:15px;} .modal-dialog {overflow: hidden;} footer .adress .adressTxt {width:calc(100% - 133px); padding-left:0; padding-top:15px;} footer .family {width:160px;} footer .family div {width:160px;} footer .family button span {font-size:14px;} footer .fup .infoBox a {font-size:14px;} } @media (max-width:780px) { footer .fup {display:block;} footer .infoBox {display:flex;} footer .family {display:flex;} footer:after {display:block; content:''; clear:both;} footer .fup .infoBox a {font-size:16px;} footer .adress div p {font-size:14px;} footer .adress {display:flex; flex-direction:column;} } @media (max-width:767px) { footer {padding:40px 20px;} footer .family {width:25%;} footer .family div {width:100%;} .univBox .univCont .listBox .boxTit p {font-size:22px;} .thum {height:100px;} footer .adress .copyright {padding-top:6px;} } @media (max-width:640px) { .modal-content .popup-tit p {font-size:20px;} button.close-btn {width:30px; height:30px; } .modal-body .scrollBox > p {font-size:16px;} .modal-body .scrollBox .poliTit .bold {font-size:16px;} footer .familyWrapBox{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px 12px; position: static;width: 100%;padding-top: 30px;} footer .family{width: 100%;height: 40px;} footer .family > div{ width: 100%; } footer .family button{ width: 100%; } footer .family ul{width: 100%;left: 0; } } @media (max-width:580px) { footer .adress .logoImg img {padding-top:10px;} .modal-body .sTit {font-size:15px;} .modal-dialog {padding:20px;} button.close-btn {top:20px; height:20px; width:20px; height:20px;} } @media (max-width:480px) { footer {padding:40px 15px; height:350px;} footer .adress .logoImg {width:116px;} footer .adress .logoImg img {width:98px;} footer .adress {gap:0;} footer .adress .adressTxt div h4 {font-size:14px;} footer .adress .adressTxt div span {font-size:14px;} } @media (max-width:420px) { footer .adress .adressTxt div h4 {font-size:14px; line-height:1.5;} footer .adress .adressTxt div span {font-size:14px; line-height:1.5;} footer .adress div p {font-size:12px;} footer .family button span {font-size:12px;} footer .family div {width:100%;} } @media (max-width:380px) { footer {height:420px;} footer .adress div {flex-direction:column;} footer .adress .adressTxt {width:100%; align-items:flex-start; flex-direction:row;} } @media (max-width:360px) { .thum {height:120px;} } /** 메인 탑버튼**/ #topBtn {position: fixed; opacity: 0; box-shadow:0px 0px 2px 4px #1c1f3a; z-index: 99997; bottom: 40px; right: 40px; width: 76px; height: 76px; background-color: #121426; border-radius: 50%; display: flex !important; justify-content: center; align-items: center; transition: all .3s; visibility: hidden;} #topBtn:hover {background-color: #364ed6; transition: all .3s;} #topBtn.active {opacity: 1; transition: all 2s; visibility: visible;} @media (max-width:1400px) { #topBtn {right:20px; bottom:20px;} } @media (max-width:1199px) { #topBtn {width:50px; height:50px; right:10px; bottom:10px;} #topBtn img {width:16px;} } @media (max-width:640px) { #topBtn {bottom:0; right:0; border-radius:0;} } @media (max-width:480px) { #topBtn {width:50px; height:50px;} } /** 서브 탑버튼 **/ #topButton {position: fixed; z-index: 99997; bottom: 30px; right: 30px; width: 76px; height: 76px; background-color: #2A3384; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all .3s; cursor: pointer; transition-property: background-color, opacity, visibility;transition-duration: 0.3s, 0.5s, 0.5s; opacity: 0;} #topButton:hover {background-color: #364ed6; transition: all .3s;} @media (max-width: 1400px) { #topButton {right: 20px; bottom:20px;} } @media (max-width: 991px) { #topButton {width: 60px; height: 60px;} #topButton img {width: 18px;} } @media (max-width: 640px) { #topButton {bottom:0; right:0; border-radius:0;} } @media (max-width:480px) { #topButton {width:50px; height:50px;} } /** 지역주요통계 **/ .tableWrap {font-family:'Pretendard';} .tableWrap table thead tr {background:#2A3384;} .tableWrap table thead tr th {color:#fff; padding:10px;font-family:'Pretendard';} .tableWrap table thead tr th span{ font-weight:400; font-size:17px;display:block; padding-bottom:5px; color:#c4d9ff;} .tableWrap table thead tr th p {font-size:17px; font-weight:500;} .tableWrap table tbody tr td {text-align:center; padding:15px 5px; font-size:17px; font-family:'Pretendard'; border-bottom:1px solid #eaeaea;} .tableWrap table tbody .gbSet {background: #000641 !important; color: white;} .tableWrap table tbody tr .tdTit{background:#f7f7f7; font-weight:600; width:200px;} .tableWrap table tbody tr .mbTable {display:none;} .universeBox {margin-top:80px;} .universeBox.box2 {margin-top:15px;} .universeBox ul {display:flex; justify-content:space-between;} .universeBox ul li {background:#2A3384; width:100%; color:#fff; margin:0 0.5%; border-radius:10px; padding:20px;} .universeBox ul li div {display:flex; flex-direction:column;} .universeBox ul li p {font-size:28px; font-weight:700;padding-bottom:10px;} .universeBox ul li div span {padding-top:10px; font-size:18px;} @media (max-width:1199px) { .tableWrap table thead tr th span {font-size:16px;} .tableWrap table thead tr th p {font-size:15px; font-weight:600;} .tableWrap table tbody tr .tdTit {width:120px;} .tableWrap table tbody tr td {font-size:15px;} .universeBox ul li div span {font-size:16px; padding-top:6px;} } @media (max-width:991px) { .universeBox {margin-top:30px;} .universeBox ul li p {font-size:25px;} .universeBox.box2 {margin-top:8px;} } @media (max-width:767px) { .tableWrap table tbody tr td {display:none;} .tableWrap table thead {display:none;} .tableWrap table tbody tr .mbTable {display:block; border:2px solid #f0f0f0; margin-bottom:15px; padding:0;box-sizing:border-box; } .tableWrap table tbody tr .mbTable div p {background:#2A3384; color:#fff;font-size:17px; padding:8px;} .tableWrap table tbody tr .mbTable div ul {display:flex;justify-content:space-between;padding:15px 10px; overflow:hidden;} .tableWrap table tbody tr .mbTable div ul li {display:flex; flex-direction:column; padding:10px 20px; background:#f7f7f7; border-radius:10px;} .tableWrap table tbody tr .mbTable div ul li .mbTit {font-size:14px;padding-bottom:6px;color:#595cdc;} .tableWrap table tbody tr .mbTable div ul li .mbTxt {font-size:16px; font-weight:600; padding-bottom:8px; color:#444352;} .tableWrap table tbody tr .mbTable div ul li h4 {font-size:18px; color:#2A3384;} .tableWrap table tbody tr .noMargin {margin: 0px;} .universeBox ul li {padding: 15px;} .universeBox ul li p{font-size:24px;} .universeBox ul li div span {font-size:14px;} } @media (max-width:680px) { .tableWrap table tbody tr .mbTable {border-radius:0;} .tableWrap table tbody tr .mbTable div ul {padding:15px; border-radius:0;} .tableWrap table tbody tr .mbTable div ul li {padding:0;background:transparent;} .tableWrap table tbody tr .mbTable div ul li .mbTit {font-size:14px;padding-bottom:4px; text-align:left;} .tableWrap table tbody tr .mbTable div ul li .mbTxt {font-size:15px; font-weight:600; padding-bottom:6px; text-align:left;} .tableWrap table tbody tr .mbTable div ul li .gb{color: white;} .tableWrap table tbody tr .mbTable div p {border-radius:0; font-size:15px;} .tableWrap table tbody tr .mbTable div ul li h4 {font-size:16px; text-align:left;} } @media (max-width:640px) { .universeBox ul {display:block;} .universeBox ul li {margin:0 0 10px 0;} .universeBox ul li div {display:block;} .universeBox ul li div span {display:inline-block; padding:4px 10px; border-radius:50px; border:1px solid #fff; margin-bottom:5px;} } @media (max-width:540px) { .tableWrap table tbody tr .mbTable div ul {display:block;} .tableWrap table tbody tr .mbTable div ul:after {display:block; content:''; clear:both;} .tableWrap table tbody tr .mbTable div ul li {width:33%; float:left; border-radius:0;} .tableWrap table tbody tr .mbTable div ul .pdB {padding-bottom:10px;} .tableWrap table tbody tr .mbTable div ul .pdT {padding-top:10px; border-top:1px solid #e0e0e0;} .tableWrap table tbody tr .mbTable div ul li .mbTxt {font-size:14px; text-align:center;} .tableWrap table tbody tr .mbTable div ul li .mbTit {text-align:center;} .tableWrap table tbody tr .mbTable div ul li h4 {text-align:center; font-size:15px;} } @media (max-width:480px) { .universeBox {margin-top:20px;} .universeBox ul li p {font-size:22px;} } /***************** 대학별사업 *****************/ .notice.uvWrap .viewPage {border-top:none; margin-top:0;} .notice.uvWrap .viewPage.uvCon {position:relative;} .notice.uvWrap .viewPage.uvCon:after {display:block; content:''; clear:both;} .notice.uvWrap .viewPage.uvCon .uvSub {float:left; width:22%; } .notice.uvWrap .viewPage.uvCon .uvSub .tit {position:relative; width:100%; display:flex; flex-direction:column;} .notice.uvWrap .viewPage.uvCon .uvSub .tit h1 {letter-spacing:-3px;border-radius: 30px 30px 0 0;; background: linear-gradient(180deg, #96CDFF 0%, #667CF2 14.33%); padding:45px 0 60px 0; font-family:'WelcomeBold'; font-size:30px; text-align:center; color:#fff;} .notice.uvWrap .viewPage.uvCon .uvSub .tit h1 img {margin-left:8px; margin-top:-5px; width:16px; } .notice.uvWrap .viewPage.uvCon .uvSub .tit ul {background:#fff; border:1px solid #DFDFDF; border-radius:30px; margin-top:-30px; padding:10px 0; height:100%;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li { margin:0 20px; border-bottom:1px solid #e9e9e9;} /* .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li:hover a {background:url(/serviceAssets/img/twoarrow.png) no-repeat #fff; background-size:13px;background-position:96%;} */ .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li a {width:100%; padding:15px 10px;display:block; background:url(/serviceAssets/img/twoarrow.png) no-repeat; background-position:96%; background-size:13px; color:#000; font-size:18px; transition:0.5s;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li a span {display:none; width:30px; height:30px; background:#000; color:#fff; line-height:30px; text-align:center; margin-right:10px; border-radius:50%; font-size:16px;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li:last-of-type {border-bottom:none;} .notice.uvWrap .viewPage.uvCon .uvBox {float:right; width:73%;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu {display:none;position: relative; width: 200px; height: 40px; text-align: left; background:#000; } .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul {position: absolute; display: none; top: 40px; padding: 10px 0; width: 100%; background: #1F222D; border: 1px solid #fff; border-bottom: 0; z-index: 999; transition: all .3s;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul.open {display: block;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul li {color: #fff; padding: 0 20px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul li a {display: block; font-size: 14px; color :#fff; padding: 7px 0;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button {border: 1px solid #fff; display: block; width: 100%; height: 100%; background: none; text-align: left; text-transform: uppercase; padding: 0 18px; font-size: 18px; font-weight: 300; font-size: 18px; color: #fff; display: flex; justify-content: space-between; align-items: center;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button span {font-size:16px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button img {transform: rotate( 0deg ); transition: all .3s;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button.on img {transform: rotate( 180deg ); transition: all .3s;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title {background:#f6f6f6;border-top:2px solid #000; padding:20px 30px; display:flex; justify-content:space-between; width:100%; align-items:center;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title .unLogo div {display:inline-block; width:80px; height:80px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title .unLogo img {width:100%; object-fit:cover;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title h1{display:inline-block; font-size:45px; font-weight:800;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView { margin-right:15px;border-radius: 20px; background: #FFF; box-shadow: 0px 0px 18px 0px #DDE0E3; width:140px; height:120px; } .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap {border-radius: 20px; background: #FFF; box-shadow: 0px 0px 18px 0px #DDE0E3; width:140px; height:120px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView img {margin:15px 0 10px 0;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView span {font-size:14px; display:block; color:#000; font-weight:700; line-height:1.2;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap img {margin:15px 0 10px 0;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap span {font-size:14px; display:block; color:#000; font-weight:700; line-height:1.2; } .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {display:flex;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont {margin:50px 0; display:flex; justify-content:space-between;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .region {width:32%; background-size:27px !important; background:url(/serviceAssets/img/uv_icon3.png) no-repeat; background-position:93% 20%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .adress {width:35%; background-size:27px !important; background:url(/serviceAssets/img/uv_icon4.png) no-repeat; background-position:93% 20%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .business {width:29%; background-size:27px !important; background:url(/serviceAssets/img/uv_icon5.png) no-repeat; background-position:93% 20%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div {padding:20px; border:1px solid #E2E2E2; border-radius:10px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div p {font-size:20px; font-weight:800; padding-bottom:15px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div span {font-weight:600;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div a {color:#000; font-weight:bold;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div a img {margin-left:8px; margin-top:-3px;} .notice.uvWrap .viewPage.uvCon .uvBox .pdf {border:1px solid #000; width:100%; height:1000px;} @media (max-width:1700px) { .wrap .notice.uvWrap {padding:0;} } @media (max-width:1400px) { .notice.uvWrap .viewPage.uvCon .uvSub {width:23%;} .notice.uvWrap .viewPage.uvCon .uvBox {width:74%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title h1 {font-size:30px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title .unLogo div {width:60px; height:60px;} } @media (max-width:1199px) { .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView img {display:none;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap img {display:none;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {flex-direction:column;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView {background:#5c74f6; box-shadow:none; width:140px; height:40px; margin-right:0; display:flex; align-items:center; justify-content:center; border-radius:5px; margin-bottom:10px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap {background:#87c9ff; box-shadow:none; width:140px; height:40px; margin-right:0; display:flex; align-items:center; justify-content:center; border-radius:5px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap span {color:#fff;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView span {color:#fff;} .notice.uvWrap .viewPage.uvCon .uvSub {width:26%;} .notice.uvWrap .viewPage.uvCon .uvBox {width:70%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView span br {display:none;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap span br {display:none;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li a span {width:20px; height:20px; line-height:20px; font-size:13px;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li a {font-size:16px; padding:15px 0;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul li:hover a {background:url(/serviceAssets/img/twoarrow.png) no-repeat #fff; background-size:22px;background-position:96%;} .notice.uvWrap .viewPage.uvCon .uvSub .tit ul {height:530px;} } @media (max-width:991px) { .notice.uvWrap .viewPage.uvCon .uvSub {display:none;} .notice.uvWrap .viewPage.uvCon .uvBox {width:100%;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu {display:block; width:100%; height:50px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button {border:1px solid #000;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button .ir {font-size:20px; font-weight:bold;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul {top:50px; border:none; height:300px; overflow:auto;} .notice.uvWrap .viewPage.uvCon .uvBox .pdf {height:600px;} } @media (max-width:767px) { .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont {flex-direction:column; margin:20px 0;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .region {width:100%; background:none;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .adress {width:100%; background:none;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont .business {width:100%; background:none; margin-bottom:0;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div {padding:15px; margin-bottom:10px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div p {padding-bottom:5px; font-size:18px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div span {font-size:15px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div a {font-size:15px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div a img {width:13px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title h1 {font-size:25px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title {padding:15px;} } @media (max-width:640px) { .notice.uvWrap .viewPage.uvCon .uvBox .pdf {height:400px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul {height:250px; max-height:300px; overflow:auto;} } @media (max-width:580px) { .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title {align-items:flex-start; flex-direction:column;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {flex-direction:row; margin-top:15px; } .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView {margin-bottom:0; margin-right:10px;} } @media (max-width:480px) { .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title .unLogo div {width:40px; height:40px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .title h1 {font-size:20px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu button .ir {font-size:17px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {margin-top:10px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu {height:40px;} .notice.uvWrap .viewPage.uvCon .uvBox .uvSmenu ul {top:40px; height: 200px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {width:100%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap:after {display:block; content:''; clear:both;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView {width:48%; float:left;height:30px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap {width:48%;float:right;height:30px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView span {font-size:13px; } .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap span {font-size:13px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div p {font-size:16px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div span {font-size:14px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div a {font-size:14px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont div {padding:10px;} } @media (max-width:360px) { .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap {flex-direction:column; margin-top:15px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvView {width:100%; margin-bottom:8px;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .btnWrap .uvMap {width:100%;} .notice.uvWrap .viewPage.uvCon .uvBox .unIntro .cont {margin:15px 0;} .notice.uvWrap .viewPage.uvCon .uvBox .pdf {height:360px;} } @media (max-width:991px) { .news span {line-height:2;} } @media (max-width:480px) { .ke-component span {border:1px solid red;} } /***************** 온라인문의 글쓰기 *****************/ .inq .inqTit {text-align:right; width:100%; display:block; padding:15px 0; font-size:18px;} .inq .inqTit:before {content:''; display:inline-block; width:8px; height:8px; background:#ff5353; transform:rotate(45deg); margin-right:8px; vertical-align:middle;} .inq .writeBox {border-top:2px solid #000; flex-direction:column;} .inq .writeBox .formGroup {width:100%; display:flex; gap:20px; border-bottom:1px solid #e2e2e2; border-style:dashed;} .inq .writeBox .formGroup.bor0 {border-bottom:none;} .inq .writeBox .formGroup .items {width:100%; padding:20px; display:flex; align-items:center;} .inq .writeBox .formGroup .items .tit {width:20%; text-align:left; font-size:20px;} .inq .writeBox .formGroup .items .tit.circle:after {content:''; display:inline-block; width:8px; height:8px; background:#ff5353; transform:rotate(45deg); margin-left:8px; vertical-align:middle;} /* .inq .writeBox .formGroup .items div { font-size:16px;position:relative;width:80%; display:flex; align-items:center;} */ .inq .writeBox .formGroup .items div .txt {width:100%; padding:15px; border-bottom:1px solid #ddd; border-top:none; border-left:none; border-right:none;} .inq .writeBox .formGroup .items div .sTxt {width:45%; padding:15px; border-bottom:1px solid #ddd; border-top:none; border-left:none; border-right:none;} .inq .writeBox .formGroup .items div span {margin-right:10px; width:5%; text-align:center;} .inq .writeBox .items div .smSelect { cursor: pointer;display: inline-block;width: 19%; height:50px; margin-left:10px; background:url(/serviceAssets/img/select_arrow.png) 87% 50% no-repeat #f7f7f7; background-size:12px;color: #585858;border: 0;border-radius: 5px;padding: 5px 1em; -webkit-appearance:none;} .formGroup2 input[type=checkbox] + label:after, .formGroup input[type=checkbox] + label:before, .formGroup input[type=checkbox] + label {transition: 0.3s;} .formGroup2 input[type=checkbox] {display: none;} .formGroup2 input[type=checkbox] + label {position: relative; padding: 8px 10px 6px 30px;} .formGroup2.checkbox-type2 input[type=checkbox] + label:after, .formGroup.checkbox-type2 input[type=checkbox] + label:before {content: ''; display: block; position: absolute; border-radius: 3px; width: 20px; height: 20px; line-height: 20px; background: #fff; top: 18px; left: 10px; transform: translate(-50%, -50%);} .formGroup2.checkbox-type2 input[type=checkbox] + label:after {z-index: 1; box-shadow: 0 0 0 1px #ccc inset, 0 0 0 20px #fff inset, 0 0 0 0 #2A3384 inset;} .formGroup2.checkbox-type2 input[type=checkbox] + label:before {z-index: -1;} .formGroup2.checkbox-type2 input[type=checkbox]:checked + label:after {font: normal normal normal 13.3333333333px FontAwesome; content: ""; text-align: center; color: #fff; line-height: 20px; box-shadow: 0 0 0 1px #2A3384 inset, 0 0 0 0 #fff inset, 0 0 0 20px #2A3384 inset;} .formGroup2.checkbox-type2 input[type=checkbox]:not(:checked):hover + label {color: #2A3384;} .formGroup2.checkbox-type2 input[type=checkbox]:not(:checked):hover + label:after {box-shadow: 0 0 0 2px #2A3384 inset, 0 0 0 16px #fff inset, 0 0 0 20px #2A3384 inset;} .formGroup2.checkbox-type2 input[type=checkbox]:checked + label:before {background: #2A3384; width: 45px; height: 45px; opacity: 0;} .formGroup2.checkbox-type3 input[type=checkbox] + label {position: relative; padding: 6px 10px 6px 40px;} .formGroup2.checkbox-type3 label {padding: 6px; border-radius: 5px; display: inline-flex; cursor: pointer; transition: background 0.2s ease; -webkit-tap-highlight-color: transparent;} .inq .writeBox .items div .txt2 {width:40%; padding:15px; border-bottom:1px solid #ddd; border-top:none; border-left:none; border-right:none;} .inq .writeBox .items div p{display:block; width:20%; color:#2A3384;} .inq .writeBox .items div .txt2::placeholder {color: #ddd;} .inq .writeBox .items div textarea {border:1px solid #e2e2e2; width:100%; height:300px; padding:20px;} .inq .writeBox .items div textarea{resize:none;} .inq .writeBox .items div .num {width:30% !important; height:50px; line-height:50px; background:#f5f5f5; color:#000; font-size:20px; font-weight:bold; font-style:italic; display:block;} .inq .writeBox .items div .txt3 {width:70%; padding:15px; border-bottom:1px solid #ddd; border-top:none; border-left:none; border-right:none;} .inq .writeBox .items div .numTxt {width:auto; color:#868686;} .inq .writeBox .items div .numTxt b {color:#000; margin:0 5px; font-size:15px;} .inq .writeBox .items .scrollBox {margin:20px 0; padding:20px; height:200px; overflow:auto; border:1px solid #e2e2e2; flex-direction:column;} .inq .writeBox .items .popup-tit p {font-size:22px;} .inq .writeBox .items .sTit:before {width:6px; height:6px; background:#85a0ff; content:''; display:inline-block; transform:rotate(-45deg); margin-right:5px; vertical-align: middle;} .inq .writeBox .items .scrollBox > p {color:#f14444; font-size:18px; width:100%;} .inq .writeBox .items .scrollBox .poliTit {margin:10px 0; width:100%;} .inq .writeBox .items .scrollBox .poliTit .bold { font-size:18px; font-weight:600;} .inq .writeBox .items .scrollBox .poliTit .txt {margin-top:5px; border-bottom:none;} .inq .writeBox .items .scrollBox .poliTit .txt ul { font-size:15px; margin-top:5px;} .inq .writeBox .items .scrollBox .poliTit .txt ul li {padding:3px 0; position:relative;} .inq .writeBox .items .scrollBox .poliTit .txt ul li:before {content:''; width:5px; height:5px; background:#bdbdbd; display:inline-block; vertical-align:middle; margin-right:8px; border-radius:50%;} .inq .writeBox .items .scrollBox h5 {width:100%;font-size:16px;} .formGroup2.form3 {width:100%; } .formGroup2.form3:after {display:block; content:''; clear:both;} .formGroup2.form3 ul {float:right;} .inq .writeBox .formGroup .items .numBox {width:60%;} .inq .writeBox .items div .numTxt {width:40%; font-size:15px;} .inq .writeBox .items div .numTxt b {font-size:15px;} .inqBtnWrap {display:flex; justify-content:center; align-items:center; width:100%; margin:30px 0;} .inqBtnWrap button {background:#fff; width:140px; height:50px; line-height:40px; border:1px solid #000; display:block; color:#000; text-align:Center; font-size:20px;} .inqBtnWrap .inqClose {width:140px; height:50px; line-height:40px; margin-right:8px;} .inqBtnWrap button:hover {transition:0.3s; color:#fff; background:#000;} .inqBtnWrap .inqClose {width:140px; height:50px; line-height:40px; margin-right:8px;} .inqBtnWrap button:hover {transition:0.3s; color:#fff; background:#000;} .inqBtnWrap2 {display:flex; justify-content:center; align-items:center; width:100%; margin-top:30px;} .inqBtnWrap2 button {width:140px; background:#fff; border-radius:50px; height:40px; line-height:40px; border:1px solid #000; display:block; color:#000; text-align:Center; font-size:20px;} .inqBtnWrap2 button.inqCor {margin-right:8px;} .inqBtnWrap2 button:hover {transition:0.3s; color:#fff; background:#000;} .formGroup.fileForm{position: relative; width: 100%;} .formGroupfileForm .fileBox input.upload-name[disabled] {font-weight: 300; color: #78797A;} .formGroupfileForm .fileBox #fileCus {display: none;} .formGroup.fileForm .fileBox button {position: absolute; top: 50%; transform: translateY(-50%); right: 10px; width: 90px; height: 34px; background-color: #fff; color: #2A3384; border: 1px solid #2A3384; font-size: 16px;} .formGroup.fileForm .fileBox #fileCus {display: none;} .formGroup.fileForm .fileBox label.file-select-label {position: absolute;top: 50%;transform: translateY(-50%);right: 0;width: 100px;padding: 6px;display: flex;justify-content: center;align-items: center;color: #000;background:#e2e2e2; font-size: 15px;cursor: pointer;border: none;height: 100%;background:#e2e2e2; } .formGroup.fileForm .fileBox input.upload-name {width: 100%;background-color: #fff !important;padding: 12px 10px;border: none;box-sizing:border-box;color: #78797A;pointer-events: none;border:1px solid #e2e2e2;} @media (max-width:1199px) { .inq .writeBox .formGroup .items .tit {font-size:18px;} .inq .writeBox .formGroup .items .tit {width:25%;} /* .inq .writeBox .formGroup .items div {width:75%;} */ .inq .writeBox .items div .smSelect {width:32%;} .inq .writeBox .formGroup2 .items div ul {} .inq .writeBox .items div textarea {height:200px;} .formGroup2 {width:20% !important;} .formGroup2.form3 {width:100% !important;} .inq .writeBox .items div p {width:30%;} } @media (max-width:991px) { .inq .writeBox .formGroup .items {flex-direction:column;} .inq .writeBox .formGroup .items .tit {width:100%;} /* .inq .writeBox .formGroup .items div {width:100%; margin-top:10px;} */ .inq .writeBox .items div textarea {height:150px;} .inq .writeBox .items .scrollBox > p {font-size:16px;} .inq .writeBox .items .scrollBox .poliTit .bold {font-size:15px;} .inq .writeBox .items .scrollBox .poliTit .txt {padding:0; font-size:14px;} .inq .writeBox .items .scrollBox .poliTit .txt ul li {font-size:14px;} .inq .writeBox .formGroup .items {padding:20px 0;} } @media (max-width:640px) { .wrap .noticeW .writeBtn {margin-top:20px;} .inq .writeBox .items div .num {width:50% ! important;} .inq .writeBox .items div .txt3 {width:50% !important;} .inqBtnWrap2 button {width:100px !important; font-size:15px; height:35px !important; line-height:32px !important;} .inqBtnWrap button {width:100px !important; font-size:15px; height:35px !important; line-height:32px !important;} .formGroup2 input[type=checkbox] + label {font-size:16px;} } @media (max-width:480px) { .wrap .noticeW .writeBtn {width:100px; height:35px; font-size:15px; background-size:13px;} .wrap .noticeW.inq .listBtn {margin-top:20px;} .inq .writeBox .items .formBox {width:100%; display:flex; flex-direction:column;} .inq .writeBox .items .formBox .formT {width:100%; margin-top:10px; text-align:right;} .inq .writeBox .items div .txt2 {width:100%;} .formGroup2 {width:100% !important; margin-top:0;} .formGroup2.form3 ul {float:left;} .inq .writeBox .formGroup.bor0 .items {padding:20px 0 0 0;} .inq .writeBox .items .box .numTxt {margin-left:10px;} .inq .writeBox .items .box .numTxt b {margin:0;} .inq .writeBox .formGroup .items .numBox {width:100%;} .inq .writeBox .items .box {width:100%; display:flex; flex-direction:column;} .inq .writeBox .items .box .numTxt {width:100%; margin-top:10px;} .inq .writeBox .items .box .num {width:40% !important;} .inq .writeBox .items div .txt3 {width:60% !important;} .inq .writeBox .items .scrollBox {padding:10px;} .inq .writeBox .items .box2 {flex-direction:column;} .inq .writeBox .items div .smSelect {width:100%; margin-top:20px; background-position:94% 50%;} .inq .writeBox .formGroup .items div .sTxt {width:47%;} .wrap .notice.inq {padding:20px;} .formGroup.fileForm .fileBox label.file-select-label {width:60px;} } @media (max-width:360px) { .inq .writeBox .formGroup .items .tit {font-size:16px;} .inq .inqTit {font-size:16px;} .inq .writeBox .items .formBox .formT {font-size:14px;} .inq .writeBox .items .scrollBox > p {font-size:15px;} } /* ===== 온라인문의 - 질의응답 ===== */ .qnaBound {display: flex;} .qnaBefore {background: #fff; margin: 6rem 3rem; width: 30rem;} .qnaBefore h3 {font-size: 30px; font-weight: 600; margin-bottom: 55px; white-space: nowrap;} .qnaBefore p {font-size: 21px; font-weight: 700; margin-bottom: 17px;} .qnaBefore a {font-size: 17px; color: #fff; background-color: #192880; display: flex; justify-content: center; align-items: center; text-align: center; width: 100%; height: 56px; margin-bottom: 10px; border-radius: 8px; padding: 1rem; min-height: 60px; min-width: 200px; box-sizing: border-box;} .qnaData {margin-bottom: 44px;} .qnaLink a {background-color: #000;} .qnaWrap {background:url(/serviceAssets/img/qna_bg.png) no-repeat #FAFAFA; width:100%; height:auto;display:flex; flex-direction:column; gap:80px; padding:100px 100px; background-position:bottom; position:relative;} .qnaWrap .qnaTit {text-align:center; font-size:50px;} .qnaWrap .qnaTitle {font-size:34px; font-family:'Pretendard-SemiBold'; text-align:center; color:#111; margin:0 0 40px 0;} .qnaWrap .qnaGrid {list-style:none; margin:0 auto; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px;} .qnaWrap .qnaItem a {display:flex;flex-direction:column; gap:20px; background:#fff; border-radius:20px; padding:60px 20px; text-align:center; box-shadow:5px 4px 11px rgb(17 28 62 / 13%); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;} .qnaWrap .qnaItem a div {height:70px; display:flex; align-items:center; justify-content:center;} .qnaWrap .qnaItem img {width:auto; height:68px;} .qnaWrap .qnaItem img.icon1 {height:60px;} .qnaWrap .qnaItem img.icon3 {height:64px;} .qnaWrap .qnaItem .txt {display:block; font-size:25px; color:#1F2333; font-weight:700; letter-spacing:-0.3px;} .qnaWrap .qnaItem a:hover {transform:translateY(-4px); box-shadow:0 16px 36px rgba(17,28,62,.10); border-color:#DCE3F0;} .qnaWrap .qnaItem a:hover .ico i {color:#233C9F;} .qnaWrap .qnaCta {text-align:center; margin-top:70px;} .qnaWrap .btnPrimary {display:inline-flex; align-items:center; justify-content:center; min-width:200px; height:60px; padding:0 24px; border-radius:8px; font-size:22px; color:#fff; background: linear-gradient(90deg, #192880 0%, #05081A 100%); font-weight:600;} .qnaWrap .btnPrimary:hover {filter:brightness(1.05);} .qnaModal{position:fixed; inset:0; z-index:99999;background:rgba(0,0,0,.45);display:flex; align-items:center; justify-content:center;padding:40px;} .qnaModal[hidden]{ display:none !important; } .qnaModalPanel{background:#fff; overflow:hidden;width:min(980px,calc(100vw - 40px)); max-height:calc(100vh - 140px);display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25);} .qnaModalHead{position:relative; background:linear-gradient(180deg,#1C2E8C 0%,#091134 100%);color:#fff; padding:18px 56px 18px 22px; font-size:20px; font-weight:700;} .qnaModalClose{position:absolute; right:12px; top:12px; width:36px; height:36px;border:0; border-radius:50%; background:rgba(255,255,255,.12);color:#fff; font-size:24px; cursor:pointer; display:flex; align-items:center; justify-content:center;} .qnaModalClose span {width:100%; height:100%;} .qnaModalClose:hover{filter:brightness(1.1);} .qnaModalBody{ padding:20px; overflow:auto; max-height:calc(100vh - 200px); } .sr-only {padding-bottom:15px;} .qnaModalFoot{ display:flex; justify-content:center; padding:16px 0 6px; } .qnaModal .btnClose{min-width:120px; height:44px; border:0;background:#000;color:#fff; font-weight:600; cursor:pointer;} .qnaEmpty{padding:40px 10px; text-align:center; color:#777;} .qnaList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; counter-reset:item;} .qnaList>li{background:#fff; padding:18px 16px; background:#f8f8f8;} .qnaList>li b{display:flex; align-items:center; gap:12px; font-size:19px; color:#1F2333;} .qnaList>li b:before{counter-increment:item; content:counter(item,decimal-leading-zero); display:inline-flex; align-items:center; justify-content:center; width:32px; height:24px; border-radius:4px; background:#0E1C5A; color:#fff; font-weight:700; font-size:13px;} .qnaList>li p{margin:8px 0 0 44px; color:#4B5162; line-height:1.5; font-size:17px;} @media (max-width:1600px) { .qnaWrap {padding:100px 100px;} .qnaWrap .qnaTit {font-size:40px;} .qnaWrap .qnaItem .txt {font-size:22px;} } @media (max-width:1400px) { .qnaWrap {padding:80px 80px;} .qnaWrap .qnaItem a {height: 230px;} .qnaBefore {margin: 4rem 2rem; width: 21rem;} } @media (max-width:1199px) { .qnaWrap {padding: 80px 100px; gap:50px;} .qnaWrap .qnaGrid {gap:18px;} .qnaWrap .qnaTit {font-size:35px;} .qnaWrap .qnaItem img {height:54px;} .qnaWrap .qnaItem img.icon1 {height:50px;} .qnaWrap .qnaItem img.icon3 {height:52px;} .qnaWrap .qnaItem a div {height:60px;} .qnaWrap .qnaItem .txt {font-size:20px;} .qnaWrap .qnaItem a {padding:50px 15px; height: 200px;} .qnaWrap .btnPrimary {min-width:180px; height:56px; padding:0; font-size:20px;} } @media (max-width: 991px){ .qnaBound {flex-direction: column;} .qnaWrap {padding:50px 40px; gap:40px;} .qnaWrap .qnaCta {margin-top:50px;} .qnaBefore {width: auto; margin:40px;} .qnaBefore h3 {margin-bottom: 30px;} .qnaBefore .qnaData {margin-bottom: 0;} .qnaBefore a {min-height: 56px;min-width: auto;} .qnaCheck {display: flex; gap: 10px;} .qnaCheck div {width: 100%;} .qnaModal {padding:20px;} .qnaModalPanel {width:100%; height:100%; max-height:100%;} .qnaModalBody {height:100%; max-height:100%;} .qnaList>li p {font-size:16px;} } @media (max-width:767px) { .qnaWrap .qnaTit {font-size:30px;} .qnaWrap .qnaGrid {gap:10px;} .qnaWrap .qnaItem .txt {font-size:18px;} .qnaWrap .qnaItem a {height: auto;} .qnaModal {padding:0;} .qnaModalTitle {font-size:18px;} .qnaList>li b {font-size:17px;} .qnaList>li p {font-size:15px;} .qnaList>li {padding:15px;} .qnaModalBody {padding:15px;} .qnaModal .btnClose {min-width:100px;} .qnaModalFoot {justify-content:flex-end;} } @media (max-width: 680px){ .qnaWrap {padding:40px 20px;} .qnaWrap .qnaCta {margin-top:30px;} .qnaWrap .qnaGrid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:15px;} .qnaWrap .qnaItem a {padding:28px 18px; height: auto;} .qnaWrap .qnaItem img.icon1 {height:43px;} .qnaWrap .qnaItem img {height:47px;} .qnaWrap .qnaItem img.icon3 {height:46px;} .qnaWrap .qnaItem a div {height:55px;} .qnaBefore {margin: 20px 0; padding: 0 20px;} } @media (max-width:480px) { .qnaWrap .qnaItem img {height:40px;} .qnaWrap .qnaItem img.icon1 {height:36px;} .qnaWrap .qnaItem img.icon3 {height:35px;} .qnaWrap .qnaItem a div {height:45px;} .qnaWrap .qnaItem .txt {font-size:17px;} .qnaWrap .qnaGrid {gap:10px;} .qnaWrap .btnPrimary {min-width:160px; height:50px; font-size:18px;} .qnaBefore a {font-size: 16px;} .qnaData {margin-bottom: 30px;} } @media (max-width:420px) { .qnaWrap .qnaItem a {border-radius:15px;} .qnaWrap .qnaItem .txt {font-size:16px;} .qnaWrap .qnaItem img {height:44px;} .qnaCheck {flex-direction: column;} } @media (max-width:400px) { .qnaWrap {gap:30px;} .qnaWrap .qnaItem a {padding:20px 15px;} } @media (max-width:380px) { .qnaWrap .qnaItem .txt {height:40px; display:flex; align-items:center; font-size:15px; font-weight:600;} .qnaWrap .qnaItem a {display:flex; align-items:center; justify-content:center; gap:5px;} .qnaWrap .btnPrimary {min-width:140px; height:46px; font-size:17px; border-radius:6px;} .qnaWrap .qnaTit {font-size:25px;} .qnaBefore a {font-size: 15px;} .qnaList>li {padding:12px;} .qnaModalBody {padding:10px;} .qnaModal .btnClose {height:40px; min-width:90px; font-size:16px;} .qnaList {gap:10px;} .qnaModalHead {padding:15px 56px 15px 22px;} .qnaModalClose {top:9px; right:9px;} } /*********** 온라인문의 //디자인서버전용 ************/ .subCont.max1600 {max-width:1600px;} .writeBox {width:100%; display:flex; justify-content:end; margin-top:20px;} .writeBtn2 {padding:10px 30px; background:#000; color:#fff; border:1px solid #000;} .writeBtn2:hover {background:#fff; color:#000; border:1px solid #000; transition:0.3s;} .inquiryBox {display: flex; align-items: end;} .marB20 {margin-bottom:20px;} .notice.notice-type4 {width:100%;} .notice-type4 .form {display: flex; justify-content: space-between;} .notice-type4 .form:before, .notice-type4 .form:after {display: none;} .notice-type4 .form span {font-size: 20px;} .notice-type4 .form span b {display: inline-block; margin: 0 2px 0 6px; color: #7b68ee;} .notice-type4 .form .right {display: flex;} .notice-type4 .form .right .form-group {width: 140px; height: 40px; margin-right: 6px;} .notice-type4 .form .right .form-group select {width: 100%; height: 100%; background: url(/serviceAssets/img/select.png) 87% 50% no-repeat #f7f7f7; background-size: 12px; -webkit-appearance: none; padding: 10px 14px; color: #585858; border: 0; border-radius: 5px; font-size: 14px;} .notice-type4 .form .right .sch {position: relative; width: 360px; height: 40px;} .notice-type4 .form .right .sch input {width: 100%; height: 100%; padding: 10px 14px; border-radius: 5px; border: 1px solid #f7f7f7; color: #585858; font-size: 14px;} .notice-type4 .form .right .sch button {position: absolute; right: 6px; top: 0; width: 40px; height: 40px; background: url(/serviceAssets/img/searchicon.png) no-repeat 50%;} .notice-type4 .tableWrap {margin-top: 20px; margin-bottom: 30px;} .notice-type4 .tableWrap .notice {border-top: 1px solid #000; border-bottom: 1px solid #000;} .notice-type4 .tableWrap .notice > a {display: block;} .notice-type4 .tableWrap .notice ul {display: flex; border-top: 1px solid #e3e3e3;} .notice-type4 .tableWrap .notice ul li {padding: 20px 15px; text-align: center;} .notice-type4 .tableWrap .notice ul li.n_num {width: 8%;} .notice-type4 .tableWrap .notice ul li.n_tit {width: 48%;} .notice-type4 .tableWrap .notice ul li.n_tit img {margin-left:5px;} .notice-type4 .tableWrap .notice ul li.n_file {width: 8%;} .notice-type4 .tableWrap .notice ul li.n_name {width: 12%;} .notice-type4 .tableWrap .notice ul li.n_day {width: 14%;} .notice-type4 .tableWrap .notice ul li.n_view {width: 10%;} .notice-type4 .tableWrap .notice ul.nh {border-top: 0;} .notice-type4 .tableWrap .notice ul.nh li {font-size: 20px; font-weight: bold;} .notice-type4 .tableWrap .notice ul.nb {align-items: center;} .notice-type4 .tableWrap .notice ul.nb li {font-size: 18px; font-weight: 500; color: #323232;} .notice-type4 .tableWrap .notice ul.nb li.n_tit {text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .notice-type4 .tableWrap .notice ul.nb li.n_day {font-weight: normal;} .notice-type4 .tableWrap .notice ul.nb li.n_view {font-weight: normal;} @media (max-width: 991px){ .notice-type4 .tableWrap .notice ul.nh li {font-size: 17px;} .notice-type4 .tableWrap .notice ul.nb li {font-size: 15px;} } @media (max-width: 768px){ .notice-type4 .form .right .sch {width: 260px;} .notice-type4 .tableWrap .notice ul li {padding: 15px 10px;} .notice-type4 .tableWrap .notice ul.nh {display: none;} .notice-type4 .tableWrap .notice ul li.n_num {display: none;} .notice-type4 .tableWrap .notice ul.nb {flex-wrap: wrap; padding: 0 10px;} .notice-type4 .tableWrap .notice a:nth-of-type(1) ul.nb {border-top: 0;} .notice-type4 .tableWrap .notice ul.nb li.n_tit {font-size: 16px; width: 92%; padding: 15px 10px 6px;} .notice-type4 .tableWrap .notice ul.nb li.n_name {order: 3; width: auto; padding-top: 0; color:#808080; font-weight:300;} .notice-type4 .tableWrap .notice ul.nb li.n_file {text-align: right; padding: 15px 10px 6px; display:none;} .notice-type4 .tableWrap .notice ul.nb li.n_day {order: 4; width: auto; padding-left: 0; padding-top: 0; color:#808080; font-weight:300;} .notice-type4 .tableWrap .notice ul.nb li.n_view {order: 5; width: auto; padding-left: 0; padding-top: 0;} .notice-type4 .tableWrap .notice ul li.n_tit img {width:13px;} } @media (max-width: 640px){ .notice-type4 .tableWrap .notice ul.nb li.n_tit {font-size: 16px;} .notice-type4 .form {display: block;} .notice-type4 .form .left {margin-bottom: 10px;} } @media (max-width: 480px){ .notice-type4 .tableWrap .notice ul.nb {padding: 0;} .notice-type4 .tableWrap .notice ul.nb li.n_tit {font-size: 14px; width: 100%; text-overflow: initial; white-space: normal; padding: 10px 10px 6px; line-height: 1.5; word-break: keep-all;} .notice-type4 .tableWrap .notice ul.nb li.n_file {text-align: center; width: auto; order: 6; padding-left: 0; padding-top: 0; padding-bottom: 10px;} .notice-type4 .tableWrap .notice ul.nb li.n_file img {height: 12px;} .notice-type4 .tableWrap .notice ul.nb li {font-size: 13px;} .notice-type4 .tableWrap .notice ul li {padding: 10px;} .notice-type4 .tableWrap {margin-top:10px; margin-bottom:20px;} .writeBtn2 {font-size:15px; padding:10px 20px;} } .inqBtnWrap2 {display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:30px;} .inqBtnWrap2 div {display:flex; align-items:center;} .inqBtnWrap2 button {width:100px; background:#2a3384; font-weight:500;border-radius:0px; height:50px; line-height:1; border:1px solid #2a3384; display:block; color:#fff; text-align:center; font-size:20px;} .inqBtnWrap2 a {width:120px; background:#fff; font-weight:500;border-radius:0px; height:50px; line-height:1; border:1px solid #000; display:flex; color:#000; align-items:center; justify-content:center;text-align:center; font-size:20px;} .inqBtnWrap2 button.inqCor {margin-right:5px;} .inqBtnWrap2 button:hover {transition:0.3s; color:#fff; background:#000;} .commentWrap {display:flex; gap:5px; flex-direction:column;} .commentBox {display:flex; width:100%; padding:40px;align-items:center;margin-bottom:20px; background:#f6f6f7; flex-direction:column; gap:20px;} .commentBox .user {width:100%; font-weight:500; font-size:18px;} .commentBox .comment {display:flex; width:100%; flex-direction:column;gap:20px;} .commentBox .comment div { width:100%; margin: 0; word-break: break-word;flex-grow: 1; line-height:1.3; font-weight:400; font-size:16px; color:#808080;} .commentBox .comment span {width: 100%;text-align: left;align-self:center; height:100%; font-size:15px; font-weight:400; color:#999999;} @media (max-width:780px) { .commentBox {flex-direction:column; gap:10px; padding:20px 25px;} .commentBox .comment {width:100%; flex-direction:column; gap:15px;} .commentBox .user {width:100%; font-size:17px;} .commentBox .comment div {width:100%; line-height:1.6;} .commentBox .comment span {width:100%; text-align:left;} } @media (max-width:680px) { .inqBtnWrap2 button {width:80px; font-size:15px; height:35px; line-height:1;} .inqBtnWrap2 a {width:100px; font-size:15px; height:35px;} } @media (max-width:480px) { .inqBtnWrap2 button {width:60px; font-size:15px; height:35px; line-height:1;} .inqBtnWrap2 a {width:80px; font-size:15px; height:35px;} } @media (max-width:380px) { .commentBox {padding:20px;} .commentBox .user {font-size:16px;} .commentBox .comment div {font-size:15px;} } .viewPage .txtBox ol, .viewPage .txtBox ul {list-style: revert;}