@charset "UTF-8";
body::after {content: ""; visibility: hidden; opacity: 0; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1; transition: all 0.3s;}
body {overflow: auto !important; padding-right: 0 !important;}
body.active::after {visibility: visible; opacity: 1;}
.wrap {overflow: hidden; background: #fff5f5; position: relative; z-index: 1;}


/* 본문 바로가기*/
.skip_nav {position: absolute; width: 100%;}
.skip_nav a {display: flex; justify-content: center; align-items: center; position: absolute; top:0; transform: translateY(-100%); width: 100%; height: 50px; background: #000; color: #fff;z-index: 999  ; }
.skip_nav a:focus, .skip_nav a:active {transform: translateY(0);}


/* ///////////////////////////////////////header 영역/////////////////////////////////////// */
header { width: 100%; position: absolute; top: 0; left: 0; background-color: #fff; z-index: 9;}
/* ////////////////////headerTop 영역//////////////////// */
.header {width: 100%; height: 120px; margin: auto; position: relative;}
.hdWrap{ max-width: 1400px; height: 70px; margin: auto; position: relative;}
.header h1 {position:absolute; top: 10px; left: 0px; overflow: hidden; z-index: 9; height: 50px;}
.header h1 a {width: 100%; min-width: 140px; display: block; height: 100%; font-size: 24px; background: url(../images/logo.png) no-repeat; background-size: 100%;}
/*util area*/
.utilAreaWrap{ width: 100%; height: 50px; overflow: hidden; border-bottom: 1px solid #ffe9e2; box-sizing: border-box;}
.utilAreaWrap > ul{ max-width: 1400px; margin: 0 auto; position: relative; overflow: hidden;}
.utilAreaWrap > ul li {display: inline-block; height: 45px; line-height: 45px;}
.utilAreaWrap > ul > li > a{padding: 0 25px; font-size: 16px;}
.utilAreaWrap > ul > li:nth-child(1), .utilAreaWrap > ul > li:nth-child(2) {padding-right: 30px; position: relative; margin: 5px 0 0;}
.utilAreaWrap > ul > li:nth-child(1)::after {content: ""; position: absolute; right: 0; background: #d5d5d5; width: 2px; height: 20px; left: 137px; border-radius: 30px; top: 50%; transform: translateY(-60%);}
.utilAreaWrap > ul > li:nth-child(1) {width: 150px;}
.utilAreaWrap > ul > li:nth-child(2) {width: 170px; vertical-align: sub;}
.utilAreaWrap > ul > li:nth-child(1) > a {background: url(../images/logo2.png) no-repeat; background-size: contain; display: inline-block; width: 100%; height: 100%;}
.utilAreaWrap > ul > li:nth-child(2) > a {background: url(../images/logo3.png) no-repeat; background-size: contain; display: inline-block; width: 100%; height: 100%;}
.utilAreaWrap > ul li.on a{color: #fff; font-weight: 600;}
.utilArea {float: right;}
.utilArea select { width:125px; height:30px; background:url('../image/icon/icon_select.jpg') top right no-repeat; margin-right:15px;}
.utilArea option {height:30px;}
.utilArea li {display: flex !important; align-items: center;}
.utilArea a {font-size: 16px; padding: 2px 10px 2px 30px; border-radius: 5px; width: auto; height: auto; display: flex; justify-content: center; align-items: center; position: relative;}
.utilArea li:nth-child(1) a {margin-right: 15px;}
.utilArea li a.login::after {content: ""; position: absolute; background: url(../images/login.png) no-repeat 0 center; left: 0; width: 22px; height: 22px; background-size: contain;}
.utilArea li a.logout::after {content: ""; position: absolute; background: url(../images/logout.png) no-repeat 0 center; left: 0; width: 22px; height: 22px; background-size: contain;}
.utilArea li:nth-child(2) a::after {content: ""; position: absolute; background: url(../images/join.png) no-repeat 0 center; left: 0; width: 22px; height: 22px; background-size: contain;}
.utilArea a.name {color: #999; font-weight:400; font-size: 12px; padding: 2px 10px; background: #fff; border-radius: 5px; width: 84px; width: auto; height: 28px; display: flex; justify-content: center; align-items: center;}
.utilArea a img{padding-right: 3px;}
.utilArea li:nth-child(2) {position:relative;}

/* ////////////////////headerBtm 영역//////////////////// */
/*gnb area*/
.gnbArea {width: 30px; height: 30px; line-height: 30px; position:absolute; top: 50%; right: 0px; z-index: 4; background: url(../images/siteMap.png) no-repeat center; background-size: contain; transform: translateY(-50%);}
.gnbArea a {width: inherit; height: inherit; display: block;}
.gnbArea li:last-child a{ margin: 0 0 0 30px; z-index: 9999;}
.gnbArea a button{background: transparent; border: none;}
.gnbArea a button img {width: 30px; height: 30px;}
.btn_ham { display:none; position:absolute; top:80px; top:65px; right:40px; background-color: transparent; border: none;}
.btn_ham img {width: 100%;}
.bg_modal { display:none; width:100vw; height:100vh; background:rgba(0, 0, 0, .5); position:absolute; top:0; left:0; z-index:10;}
.gnbArea_m { display:none; width:46.8%; height:100vh; text-align:right; overflow-y:auto; background:#fff; padding:30px; position:absolute; top:0; right:0; z-index:10;}
.gnbArea_m .joinWrap {text-align:left; padding:30px 0;}
.gnbArea_m .joinWrap a { display:inline-block; font-size:20px; padding:10px; margin-right:5px; border-radius: 5px }
.gnbArea_m .joinWrap .btn_login, .gnbArea_m .joinWrap .btn_logout {color:#fff; background:#1768ac;}
.gnbArea_m .joinWrap .btn_join {color:#777; border:1px solid #ddd;}
.gnbArea_m .siteWrap {text-align:left; padding:30px 0;}
.gnbArea_m .siteWrap a { display:inline-block; font-size:20px; padding:10px; margin-right:5px; border-radius: 5px;}
.gnbArea_m .btn_close {width:20px; height:20px; background: url(../images/close.png); background-size: 100%; border: none;}
.gnbArea_m .gnb {text-align:left; border-top:1px solid #eee;}
.gnbArea_m .gnb > li {border-bottom:1px solid #eee; position:relative;}
.gnbArea_m .gnb > li.select > a::before {transform:rotate(180deg);}
.gnbArea_m .gnb > li > a {height:60px;  color:#343434; font-size:22px; line-height:60px;}
.gnbArea_m .lnb {display:none; margin-bottom:10px;}
.gnbArea_m .lnb > li > a { color:#777; font-size:16px; text-indent:20px; line-height:40px;}

/* gnb */
.main_gnbpc{ display: block; position: absolute; width: 100%; height: 70px; top: 45px; overflow: hidden; z-index: 3; background: transparent;}
.main_gnbpc.gnb_open {background: #fff; border-bottom: 1px solid #E5E7EE; height: 310px;}
.maingnb_menu{ width: 100%; max-width: 1200px; margin: 15px auto 0; box-sizing: border-box; overflow: hidden; display: flex; justify-content: space-evenly;}
.maingnb_menu > li{display: inline-block; vertical-align: top; text-align: center;}
.maingnb_menu > li > a{ position: relative; display: inline-block; padding: 12px 0px; color: #333;}
.maingnb_menu > li > a > strong{font-size: 20px; font-weight: 500;}
.maingnb_menu .gnbsubmenu{margin-top: 12px;}
.maingnb_menu .gnbsubmenu > li{ margin-bottom: 6px; clear: both; text-align: center;}
.maingnb_menu .gnbsubmenu > li > a{ font-size: 18px; font-weight: 500; color: #555;}
.maingnb_menu > li:hover > a > strong, .maingnb_menu .gnbsubmenu > li:hover > a > span {color: #d84d34;}
.maingnb_menu .gnbsubmenu > li > a > span{ position: relative; display: inline-block; padding: 4px 0; font-size: 17px;}
.maingnb_menu > li > a:after,
.maingnb_menu .gnbsubmenu > li > a > span:after{ content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 0; transition: 0.25s ease-in-out; z-index: 2}
.maingnb_menu > li > a:after{height: 3px; background-color: #d84d34;}
.maingnb_menu .gnbsubmenu > li > a > span:after,
.maingnb_menu .gnbsubmenu .gnb_submn3 > li > a > span:after{height: 1px; background-color: #d84d34; font-weight: bold;}
.maingnb_menu > li:hover > a:after, .maingnb_menu .gnbsubmenu > li:hover > a > span:after{width: 100%}

/* //////메인메뉴 영역/* ////// */
.header .headerBtm .headerBtm_contents .gnb .gnbMenu {display: flex; justify-content: space-between; align-items: center;}
.header .headerBtm .headerBtm_contents .gnb .gnbMenu li {width: 187px; height: 39px; text-align: center;}
.header .headerBtm .headerBtm_contents .gnb .gnbMenu li a {display: inline-block; padding: 7px 30px; font-size: 20px;}
.header .headerBtm .headerBtm_contents .gnb .gnbMenu .subMenu {transition: all 0.2s; border: 3px solid #ddd; background: #fff; border-radius: 10px; display: none;}
.header .headerBtm .headerBtm_contents .gnb.active .gnbMenu .subMenu {display: block;}
/* .header.active .headerBtm .headerBtm_contents .gnb .gnbMenu .subMenu {opacity: 1; visibility: visible; display: block;} */
.header .headerBtm .headerBtm_contents .siteMap {width: 30px; height: 30px;}
.header .headerBtm .headerBtm_contents .siteMap a {display: block; background: url(../images/siteMap.png); width: 100%; height: 100%; background-size: contain;}


/* 사이트 맵 */
.allMenu {display: none;}
.allMenu::before {content: ""; position: fixed; top: 0; left: 0; width: 100%; max-width: 580px; height: 100%; background-color: #ffe5e5; background-image: url(../images/handonheart.png); background-size: 60%; background-repeat: no-repeat; background-repeat: no-repeat; background-position: bottom;}
.allMenu.on {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #ffffff; z-index: 2000; padding: 0 0 0 580px; overflow-y: scroll}
.allMenu h2 {position: absolute; top: 15%; left: 150px; width: 100%; max-width: 580px; text-align: center; font-size: 2.5em; height: 100%; max-width: 580px; background: url(../images/logo.png) no-repeat; background-size: 50%;}
.allMenu .close {background: url(../images/close.png) no-repeat center; position: absolute; width: 50px; height: 50px; right: 30px; top: 30px;}
.allMenu .utilArea {float: none; margin: 20px auto;}
.allMenu .utilArea ul {justify-content: center;}
.allMenu .utilArea ul li {width: auto; height: 70px; margin: 0 2px;}
.allMenu .utilArea ul li:nth-child(1) {background: #f77272;}
.allMenu .utilArea ul li:nth-child(1) a {color: #fff;}
.allMenu .utilArea ul li:nth-child(2) {color: #777; border: 1px solid #ddd;} 
.allMenu .utilArea a {color: #000; font-size: 1.1em; height: 70px; width: 170px;}
.allMenu .gnbAll {width: 100%; padding: 0 60px 60px;}
.allMenu .gnbAll > li {width: 100%; padding: 45px 0; border-bottom: 1px solid #e0e0e0;}
.allMenu .gnbAll li strong {font-size: 2.5em; font-family: 'NanumSquareNeoBold'; padding: 0 60px 0 0;}
.allMenu .gnbAll li ul {display: inline-table;}
.allMenu .gnbAll li ul li {padding: 15px 5px; display: table-cell; padding: 0 26px 0 0; margin: 0 25px 0 0;}
.allMenu .gnbAll li ul li a {font-size: 1.1em;}
.allMenu .gnbAll > li:hover strong {color: #d84d34;}
.allMenu .gnbAll li ul li a:hover {color: #d84d34;}
.allMenu .utilArea li a::after {display: none;}




/* ///////////////////////////////////////sub header 영역/////////////////////////////////////// */
.subHeader {margin: 45px 0 0; background: url(../images/subBg.png) no-repeat center; width: 100%; background-size: cover; min-height: 410px; position: relative;}
.subHeader:before {content: ""; position: absolute; background: url(../images/subBg2.png) no-repeat 100% 100%; background-size: 75%; width: 1125px; height: 455px; left: 50%; transform: translateX(-50%);}
/* .subHeader {margin: 45px 0 0; background: url(../images/subBg.png) no-repeat center; width: 100%; background-size: cover; min-height: 612px; position: relative;}
.subHeader:before {content: ""; position: absolute; background: url(../images/subBg2.png) no-repeat 100% 100%; background-size: 75%; width: 1905px; height: 688px; left: 50%; transform: translateX(-50%);} */
.subTit {max-width: 1400px; margin: 0 auto; padding: 200px 0 0; display: flex; justify-content: flex-start; flex-direction: column; gap: 20px; position: relative; z-index: 3;}
.subTit .breadcrumb {display: flex; align-items: center; gap: 20px;}
.subTit a {display: inline-block; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; background: url(../images/next3.png) no-repeat 0 center; padding-left: 30px;}
.subTit a.home {background-image: url(../images/home.png); width: 50px; height: 50px; background-repeat: no-repeat; background-position: center;}
.subTit h2 {font-size: 45px; font-family:'NanumSquareNeoBold';}
.subhdCont .sharedBtn {width: 100%; max-width: 1400px; margin: 0 auto; text-align: right; position: relative;}
.subhdCont .sharedBtn a {display: inline-block; width: 42px; height: 42px; background-color: #fff; border: 1px solid #e5e7ee; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 50%;}
.share-options {position: absolute; top: 50px; right: 0; width: 120px; background-color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); display: none; z-index: 1000; text-align: center;}
.share-options a {display: inline-flex; align-items: center; justify-content: flex-end; padding: 10px; margin-bottom: 10px; background: #f9f9f9; border-radius: 8px; color: #555; text-decoration: none; font-weight: 600; font-size: 14px; transition: background-color 0.25s ease, color 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.1);}
.share-options a:last-child {margin-bottom: 0;}
.share-options a:hover {background-color: #ececec; color: #222; box-shadow: 0 2px 6px rgba(0,0,0,0.15);}
.share-options a::before { content: ""; display: inline-block; width: 20px; height: 20px; background-size: contain; background-repeat: no-repeat; vertical-align: middle;}

.share-blog::before {background-image: url(../images/naverblog_icon.png);}
.share-instagram::before {background-image: url(../images/instagram_icon.png);}
.subhdCont .sharedBtn > a:nth-child(1) {background-image: url(../images/print.png);}
.subhdCont .sharedBtn > a:nth-child(2) {background-image: url(../images/shared.png);}




/* ///////////////////////////////////////main 영역/////////////////////////////////////// */
.main {position: relative;}
.main h3 {font-size: 2em; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
/* ////////////////////section01 영역//////////////////// */
.main .section01 {height: 100vh; position: relative;}
.main .section01::after {content: ""; position: absolute; bottom: -70px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; aspect-ratio: 1125 / 455; background: url(../images/subBg2.png) no-repeat bottom center; background-size: contain; z-index: 0; pointer-events: none;}
.section01::before {content: ""; position: absolute; background: url(../images/subBg.png) no-repeat; left: 0; top: 0; width: 100%; height: 115%; background-size: cover;}
.main .section01 .mainContainer {max-width: 1400px; margin: 0 auto; display: flex; width: 100%; justify-content: center;}
.main .section01 .mainContainer .main_inner .visualBox {position: relative; top: 100%;}
.main .section01 .mainContainer .main_inner .visualBox .visualTxt {margin-bottom: 55px; position: relative; z-index: 3; text-align: center;}
.main .section01 .mainContainer .main_inner .visualBox .visualTxt h2 {font-size: 60px; margin-bottom: 30px; font-family: 'NanumSquareNeoBold';}
.main .section01 .mainContainer .main_inner .visualBox .visualTxt h2 span {color: #f2454f; font-size: 60px; font-family: 'NanumSquareNeoBold';}
.main .section01 .mainContainer .main_inner .visualBox .visualTxt p {width: 57%; font-size: 1.3em; margin: 0 auto; line-height: 1.5;}
.main .section01 .mainContainer .main_inner .visualBox button {width: 225px; height: 70px; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border: none; position: relative;z-index: 3; cursor: pointer; border-radius: 50px; font-size: 1.2em; left: 50%; transform: translateX(-50%); font-weight: bold;}
.main .section01 .mainContainer .main_inner .visualBox button:hover {text-decoration: underline; width: 300px; transition: all 0.2s;}
.main .section01 .mainContainer .main_inner .visualBox button:hover::after {content: ""; background: url(../images/next2.png) no-repeat center; background-size: 100%; position: absolute; right: 15%; top: 50%; transform: translateY(-50%); width: 30px; height: 30px;}
/* 애니메이션 */
@keyframes appear{
    from {
      opacity: 0;
    }
  
    to{
      opacity: 1;
    }
  }
  
  @keyframes appear_from_bottom{
    0%{
      transform: translateY(150px);
      opacity: 0;
    }
  
    100%{
      opacity: 1;
    }
  }
  
  .text1 {
    display:none;
    animation: appear_from_bottom ease 1.5s;
  }


/* ////////////////////section02 영역//////////////////// */
.main .section02 {position: relative; background: url(../images/quickImg.png) no-repeat 0 0; width: 100%; background-size: 100%;}
/*.main .section02::before {content: ""; position: absolute; right: 0; top: 40px; background: url(../images/subImg3.png) no-repeat center; background-size: 100%; width: 150px; height: 150px;}*/
.main .section02 h3 {width: 100%; max-width: 1400px; margin: 0 auto; padding: 70px 0 0;}
.main .section02 .quickMenuBox {width: 100%;}
.main .section02 .quickMenuBox ul {display: flex; flex-wrap: wrap; align-items: center; overflow: hidden; gap: 100px; justify-content: center;}
.main .section02 .quickMenuBox ul li {min-height: 244px; position: relative; transition: 0.3s; border: 3px solid transparent;}
.main .section02 .quickMenuBox ul li::after {width: 120px; height: 120px; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top:25px; background-size: 60%; background-repeat: no-repeat; background-position: center; z-index: 0;}
.main .section02 .quickMenuBox ul li:hover a {border: 3px solid #f24c3d;}
.main .section02 .quickMenuBox ul li:nth-child(1)::after {background-image: url(../images/menuIco1.png);}
.main .section02 .quickMenuBox ul li:nth-child(2)::after {background-image: url(../images/menuIco2.png);}
.main .section02 .quickMenuBox ul li:nth-child(3)::after {background-image: url(../images/menuIco3.png);}
.main .section02 .quickMenuBox ul li:nth-child(4)::after {background-image: url(../images/menuIco4.png);}
.main .section02 .quickMenuBox ul li a {display: block; padding: 135px 0 0; height: 200px; width: 200px; position: relative; transition:all .5s ease-in-out; text-align: center; font-size: 1.3em; border-radius: 100%; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; border: 3px solid transparent; z-index: 1;}
.main .section02 .quickMenuBox ul li::before {content: ""; height: 200px; width: 200px; background: #fff; position: absolute; border-radius: 100%;}

/* ////////////////////section03 영역//////////////////// */
.main .section03 {display: flex; position: relative; padding: 70px 0; width: 100%; background: #ffe9e2; justify-content: center;}
.main .section03 h3 {margin-bottom: 25px;}



/* //////공지사항/* ////// */
.main .section03 .notice {position: relative;}
.main .section03 .notice button {position: absolute; right: 25px; top: 0; width: 48px; height: 48px; border-radius: 100%; background: #fff;}
.main .section03 .notice button:hover {border-color: #000;}
.main .section03 .notice button::after {content: ""; background: url(../images/moreView.png) no-repeat center; background-size: 100%; display: inline-block; width: 30px; height: 30px; vertical-align: sub;}
.main .section03 .notice button:hover::after {transform: rotate(90deg); transition: transform 0.5s;}
.main .section03 .noticeBox {width: 755px; min-height: 332px; border-radius: 9px; margin: 0 18px 0 0; box-shadow: 0 3px 6px 0 rgba(221,41,41,0.14); background: #fff; display: flex; padding: 16px 0;}
.main .section03 .noticeBox ul {height: inherit; width: 100%; margin: 0 20px;}
.main .section03 .noticeBox ul li {height: auto; padding: 10px 30px; overflow: hidden; border-bottom: 1px solid #e0e0e0; width: 100%;}
.main .section03 .noticeBox ul li:last-child {border:none;}
.main .section03 .noticeBox ul li a {display: inline-block; padding-left: 30px; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 6.5em); font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.main .section03 .noticeBox ul li a::before {content: ""; position: absolute; width: 6px; height: 6px; background: #e0e0e0; border-radius: 50%; left: 0; top: 50%; transform: translateY(-50%);}
.main .section03 .noticeBox ul li a:hover {text-decoration: underline;}
.main .section03 .noticeBox ul li .date {float: right; color: #005099; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}


/* //////팝업존/* ////// */
.main .section03 .popupBox {border: 1px solid #ecf4ff; width: 644px; height: 332px; border-radius: 9px; box-shadow: 0 3px 6px 0 rgba(68,77,122,0.16); margin: 0;}
.post {text-align: center;} 
.postSlider {position: relative;}
.postSlider a {display: block; width: inherit; height: inherit;}
.postSlider .pageNum {position: absolute; top: -13%; right: 20%;}
.postSlider .pageNum .now {font-weight: bold;}
.slide_controller {position: absolute; top: -55px; right: 0;}
.slide_controller button {width: 40px; height: 40px; background: #fff; border: none; border-radius: 50%; position: relative; cursor: pointer; transition: all 0.3s ease-out; margin-left: 10px;}
.slick-dots li button { width: 100%; height: 100%; border-radius: 50%; background-color: #fff; border: none; padding: 0; font-size: 0; line-height: 0;}
.slick-dots li.slick-active button {background-color: #f7766f;}
.slide_controller .slick-prev::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-style: solid; border-width: 0 0 2px 2px; border-color: transparent transparent #000 #000; width: 10px; height: 10px; transition: all 0.3s ease; transform: rotate(45deg); margin: auto 12px auto auto;}
.slide_controller .slick-next::after {content: ""; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-style: solid; border-width: 0 0 2px 2px; border-color: transparent transparent #000 #000; width: 10px; height: 10px; transition: all 0.3s ease; transform: rotate(225deg); margin: auto auto auto 12px;}
.postSlider .thumb {height: 332px; width: inherit;}
.postSlider .thumb img {width: inherit; height: inherit; border-radius: 9px;}
.slideController .pager{display: flex; position: absolute; top: 1px; left: 74px;}
.slideController .pager p{font-size: 16px; color: #fff;}
.slideController .pager .total{position: absolute; top: 0; left: 180px;}
.slick-dots {display: flex; position: absolute; top: -50px; right: 120px; gap: 15px;}
.slick-dots li button {width: 20px; height: 20px; border-radius: 50%;}



/* ///////////////////////////////////////sub main 영역/////////////////////////////////////// */
.subMain {max-width: 1400px; display: flex; margin: 65px auto 95px; justify-content: space-between;}
.subMain .subNav {width: 265px; position: relative;}
.subMain .subNav h3 {font-size: 1.5em; position: relative; font-family:"NanumSquareNeo"; color: #fff; text-align: center; height: 120px; line-height: 95px; background: #f77272; border-radius: 30px 30px 0 0; z-index: 0; overflow: hidden;}
.subMain .subNav h3::before {content: ""; position: absolute; background: url(../images/heart.png) no-repeat 30% 30px; width: 100%; height: 100%; z-index: -1; background-size: contain; opacity: 0.5;}
.subMain .subNav nav li {height: 70px; width: 100%; line-height: 70px; position: relative;}
.subMain .subNav nav li::before {content: ""; width: 70%; left: 50%; transform: translateX(-50%); position: absolute; background: #e0e0e0; height: 2px; top: 100%;}
.subMain .subNav nav li:last-child:before {display: none;}
.subMain .subNav nav li a {font-family: "NanumSquareNeo"; display: inline-block; width: inherit; text-align: center; font-size: 1.1em;}
.subMain .subNav nav {background: #fff; border-radius: 30px; position: relative; top: -30px;}
.subMain .subNav nav li.active a {font-family: "NanumSquareNeo"; color: #f77272; font-weight: bold;}
.subMain .subNav nav li.active::after {content: ""; background: #fff5f5 url(../images/next4.png) no-repeat center; width: 20px; height: 20px; border: 1px solid #ffa5a5; border-radius: 50%; padding: 8px; right: 30px; top: 50%; transform: translateY(-50%); position: absolute;}
.subMain .subCont {width: 1100px;}
.subMain .subCont h4 {font-size: 22px;}
.subMain .subCont h4 span {font-size: 40px; color: #f2454f;}
.testArea.topLine {border-top: 2px solid #000;}
.testArea h4 {margin: 0 0 30px; display: inline-block; font-family: 'NanumSquareNeo';}
.subConTit {font-size: 20px;}


/* //////로그인/* ////// */
.subMain .subCont .loginBox .loginCont {padding: 38px 290px; background: #fff;}
.subMain .subCont .loginBox .loginCont p {margin-bottom: 30px; text-align: center; line-height: 1.5;}
.subMain .subCont .loginBox .loginCont p:last-child {margin: 10px 0 0;}
.subMain .subCont .loginBox .loginCont .loginArea input {width: 100%; height: 55px; border: 1px solid #e5e7ee; margin: 0 10px 10px 0; padding: 10px; background: #f8f8f8;}
.subMain .subCont .loginBox .loginCont .loginArea a {display: block; width: 100%; height: 55px; line-height: 55px; border-radius: 0;}
.subMain .subCont .loginBox .loginCont > a > span {position: relative;}
.subMain .subCont .loginBox .loginCont .aboutAcount {margin: 2rem 0 0; text-align: center;}
.subMain .subCont .loginBox .loginCont .aboutAcount > span:nth-child(1) {padding-right: 30px; position: relative;}
.subMain .subCont .loginBox .loginCont .aboutAcount > span:nth-child(1)::after {content: ""; right: 8%; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: #ddd; position: absolute;}



/* //////검사소개/* ////// */
.greetingTitBox {margin-bottom: 55px;}
.greetingTitBox .greetingTit h4 {position: relative; font-size: 40px; margin-bottom: 30px; font-family: 'NanumSquareNeo';}
.greetingTitBox .greetingTit strong {margin: 10px 0 30px; font-size: 24px; display: block; font-family: 'NanumSquareNeo';}
.greetingTitBox .greetingTit strong span {color: #f2454f; font-size: 24px;}
.greetingBox h5 {position: relative; margin: 0 0 30px; font-size: 1.5em;}
.greetingBox .boxTop p {margin-bottom: 15px;}
.greetingContBox .greetingTxt{flex: 1;}
.description3 {display: flex; flex-direction: column; gap: 10px; transition: all 0.3s ease; position: relative; justify-content: center; background: #fff; border: 2px solid #f77272; border-radius: 30px; box-shadow: -7.3px 6.7px 9px rgba(247, 114, 114, 0.14); padding: 50px 40px;}
.description3::before {content: ""; position: absolute; right: 0; background: url(../images/handonheart.png) no-repeat right bottom; opacity: 0.2; width: 100%; height: 100%;background-size: 20%;}
.description3 p {font-size: 1em; line-height: 1.5;}
.greetingContBox .greetingTxt li {letter-spacing: -0.8px;}
.greetingContBox .greetingTxt button {border: none; background: transparent; cursor: pointer;}
.description4 {background: #fff; border-radius: 30px; border: 2px solid #f77272; box-shadow: -7.3px 6.7px 9px rgba(247, 114, 114, 0.14);}
.pop .popUpBox img {width: 100%; height: 100%; }
.pop .popUpBox .tblrowBox th {padding: 0 10px;}
.description4 img {width: 70%;}

/* //////검사구성/* ////// */
.subMain .subCont.consist {text-align: center;}
.subMain .subCont.consist h4 {position: relative; font-size: 40px; margin-bottom: 30px; font-family: 'NanumSquareNeo';}
.subMain .subCont.consist strong {margin: 10px 0 30px; font-size: 24px; display: block; font-family: 'NanumSquareNeo';}
.subMain .subCont.consist strong span {font-size: 24px; color: #f2454f;}
.category li {width: 16%;}
.category li strong {position: relative; width: 100%; padding: 20px; text-align: center; height: 100%; background: #f7f8fa; border: 1px solid #eaeaea; border-radius: 20px; min-height: 50px; display: flex; justify-content: center; align-items: center;}
.category li:last-child strong {padding: 10px 20px;}
.category li strong span {position: absolute; display: flex; top: -11px; left: -11px; align-items: center; justify-content: center; background: #048abf; line-height: 62px; color: #fff; font-size: 16px; width: 40px; height: 40px; border-radius: 50%;}
.consist button {padding: 10px; font-weight: 600; font-size: 1em; text-align: center; border-radius: 30px; border: none; width: 175px; cursor: pointer; margin-bottom: 15px; display: inline-block; height: 50px;}
.consist button {background: #fff; border-radius: 30px;}
.consist button.active {border: 2px solid #f77272; box-shadow: -7.3px 6.7px 9px rgba(247, 114, 114, 0.14);}
.categoryCont {margin: 30px 0 0;}
.categoryCont table {border-collapse: collapse; border-spacing: 0; width: 100%;}
.categoryCont table th { position: relative; font-size: 20px;}
.categoryCont table td {padding: 20px; position: relative; border-bottom: 1px solid #e5e7ee; font-size: 16px; text-align: left; background: #fff;}
.categoryCont table tr:first-child {border-top: 1px solid #e5e7ee;}
.table-content thead th {border-bottom: 3px solid #e5e7ee; text-align: left; padding: 12px 12px 12px 50px; font-size: 30px; font-weight: bold;}
.categoryCont table th {text-align: center; font-weight: bold; border-right: 1px solid #e5e7ee; background: #fff5c2; font-size: 16px;}



/* //////검사진행 - 절차안내 /* ////// */
.boxTop p {position: relative; padding-left: 20px; line-height: 1.5; font-size: 1.1em;}
.boxTop p span {font-size: 1em;}
.boxTop p::before {position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background: #000; content: ""; transform: translateY(-50%);}
.boxTop p:last-child.ftRed {padding-left: 20px;}
.boxTop p:last-child.ftRed::before {display: none;}
.addService.boxTop p:nth-child(2):before {display: none;}
.boxTop p:last-child {margin: 0;}
.boxTop p.listStn {padding: 0;}
.boxTop p.listStn::before {display: none;}
.prograss2 {justify-content: space-around;}
.prograss2 li {width: 220px; padding: 110px 10px 10px; border: 4px solid #eee; text-align: center; background-color: #fff; aspect-ratio: 1 / 1; border-radius: 100%; position: relative;}
.prograss2 li::before {content: ""; position: absolute; width: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; height: 60px; left: 0; top: 20%;}
.prograss2 li strong {font-family: 'Spoqa Han Sans Neo', 'sans-serif'; font-size: 18px;}
.prograss2 li:nth-child(1):before {background-image: url(../images/menuIco1.png);}
.prograss2 li:nth-child(2):before {background-image: url(../images/menuIco2.png);}
.prograss2 li:nth-child(3):before {background-image: url(../images/menuIco4.png);}
.prograss2 li::after {text-align: center; border-radius: 50%; top: 50%; left: 135%; transform: translate(-50%, -50%); background: url(../images/rightArrow.png) no-repeat center; content: ""; width: 2rem; height: 2rem; background-size: contain; position: absolute;}
.prograss2 li:last-child::after {display: none;}
.certify {justify-content: space-evenly;}
.certify li {width: 45%; height: 255px; border-radius: 20px 20px 0 0; position: relative;}
.certify li:nth-child(1) a::before {background: url(../images/member.png) no-repeat center; background-size: 100%; content: ""; height: 100px; width: 140px; top: 25%; left: 50%; transform: translateX(-50%); position: absolute;}
.certify li:nth-child(2) a::before {background: url(../images/nonMember.png) no-repeat center; background-size: 100%; content: ""; top: 30%; left: 50%; transform: translateX(-50%); position: absolute; width: 89px; height: 90px;}
.certify li:nth-child(2) i {font-style: normal; display: block; font-size: 15px;}
.prograss2 li span {display: block; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.certify li a {display: flex; width: 100%; height: inherit; flex-direction: column; justify-content: space-between; cursor: pointer; position: relative; background: #fff;}
.certify li strong {margin-bottom: 30px; border-radius: 20px 20px 0 0; font-size: 20px; font-weight: 500; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.certify li:nth-child(1) strong {background: #e06363; color: #fff; height: 57px; line-height: 55px;}
.certify li:nth-child(2) strong {background: #383e53; color: #fff; height: 57px; line-height: 55px;}
.certify li span {width: 100%; padding: 0 0 25px; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}



/* //////검사진행 - 인적사항/* ////// */
.testList2 {margin: 0;}
.subContTit {margin-bottom: 20px;}
.testArea > .testList > ul > li {padding: 20px 0; border-bottom: 1px solid #d0dbe1;}
.testArea > .testList > ul > li:nth-child(1) {padding: 0 0 20px;}
.testArea > .testList > ul > li > .question {margin-bottom: 15px;}
.testArea .answer ul {display: flex; flex-wrap: wrap;}
.testArea .answer li {margin: 5px 0;}
.testArea .answer li:last-child label {margin-right: 10px;}
.testArea .answer li .radioArea {padding: 0 25px 0 0; display: flex; align-items: center;}
.testArea .answer li .radioArea.chkboxArea {flex-wrap: wrap;}
.testArea .answer li .radioArea label {padding-left: 10px;}
.testArea .answer li .radioArea input[type=checkbox] + label {padding: 0;}
.selectInput1 {border: 2px solid #e5e7ee; height: 45px; display: none; vertical-align: bottom; padding-left: 20px;}
.checkInput {border: 1px solid #e5e7ee; height: 35px; vertical-align: middle; padding: 0 10px;}
.checkInput.readonly {cursor: default;}
.ui-datepicker-trigger {width: 20px; height: 20px; transform: translate(-30px, 5px);}
.ui-datepicker .ui-datepicker-header {background: #ffdde1;}
.ui-datepicker td {padding: 0;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border: 1px solid transparent;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width: 50%; padding: 0 10px; background: url(../images/down.png) no-repeat 95% 50% #fff; background-size: 20%;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {top: 10px; width: 1em; height: 1em;}
.ui-datepicker .ui-datepicker-prev {background: url(../images/pause.png); background-size: contain;}
.ui-datepicker .ui-datepicker-next {background: url(../images/next.png); background-size: contain;}
.ui-datepicker-prev, .ui-datepicker-next {display: none;}
.ui-datepicker .ui-datepicker-month {position: relative;}
.ui-datepicker .ui-datepicker-month::after {content: "월"; position: absolute; right: -30px;  top: 50%; transform: translateY(-50%);}
.ui-datepicker .ui-datepicker-year {position: relative;}
.ui-datepicker .ui-datepicker-year::after {content: "년"; position: absolute;right: -30px; top: 50%;transform: translateY(-50%);}


/* //////검사진행 - 약관동의/* ////// */
.testArea .testTxt {padding: 20px 35px; margin-bottom: 30px;}
.popContent .testArea .testTxt {margin: 0; padding: 0; border: none;}
.testArea .btn, .subCont .btn {text-align:center; margin: 20px 15px; position: relative;}
.testArea .btn, .subCont .btn.chkBox {text-align: right;}
.testArea .btn, .subCont .btn.startTest {text-align: center;}
.subCont .btn button {margin: 0 5px;}
.answer {position: relative; z-index: 3;}

/* //////검사진행/////// */
.testList .testArea > p {margin-bottom: 20px;}
.step-progress {display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; margin: 20px 0; font-weight: 500; font-size: 16px;}
.step {position: relative; padding: 10px 12px; border-radius: 15px; background-color: #fff; color: #444; transition: background-color 0.3s ease; margin: 0 10px;}
.step.active {background-color: #ffe9e2; font-family: 'NanumSquareNeoBold'; font-weight: bold;}
.step:not(:last-child)::after {content: url("../images/next.png"); font-family: 'Material Icons'; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: #888;}
.nav-buttons {display: flex; justify-content: center; margin: 20px 0 0; gap: 10px;}
.testArea .nav-buttons button {margin: 0 5px;}
.progress-indicator {margin-top: 20px; text-align: center; font-size: 16px; font-weight: bold; color: #333;}
.step-content {display: none;}
.step-content:first-child {display: block;}

.progress {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border-radius: 30px;}
.progress ul {display: flex; justify-content: space-between; align-items: center; height: 45px; line-height: 45px; background: #fff; border-radius: 35px;}
.progress ul li {flex: 1; height: 100%; border-radius: 35px; text-align: center;}
.progress ul li.on {background: #f77272; color: #fff; font-weight: bold;}
.testcheckTop {background: #1768AC; color: #fff; text-align: center; font-size: 20px; margin: 20px 0 0; padding: 10px 0;}
.testcheckTbl table {border-collapse: collapse; border-spacing: 0; table-layout: fixed; width: 100%;}
.testcheckTbl table tr {border-bottom: 1px solid #d0dbe1;}
.testcheckTbl table th {background: #f5f7fa; padding: 5px 0; border-bottom: 1px solid #e5e7ee;}
.testcheckTbl table td, .testCheckTbl table th {padding: 10px 20px;}
.tempSave {position: absolute; right: 0;}
.radioRabel input + span {display: block; width: 100%; height: 100%; border-radius: calc(12.5*(var(--sjs-base-unit, var(--base-unit, 8px)))); border: 1px solid #E5E7EE; line-height: 45px; font-size: 16px;}
.radioRabel input:checked + span {background-color: #2589e5; font-weight: 600; color: #fff; border: none;}
.radioRabel {width: 200px; height: 48px; text-align: center; display: flex; justify-content: center; align-items: center; background: var(--sjs-questionpanel-backcolor, var(--sjs-question-background, var(--sjs-general-backcolor, var(--background, #fff))));
    border-radius: calc(12.5*(var(--sjs-base-unit, var(--base-unit, 8px)))); box-shadow: var(--sjs-shadow-small, 0px 1px 2px 0px rgba(0, 0, 0, 0.15)),inset 0 0 0 0px var(--sjs-general-backcolor, var(--background, #fff));transition: box-shadow var(--sjs-transition-duration, 150ms),background-color var(--sjs-transition-duration, 150ms); cursor: pointer; margin-bottom: 10px;}
.qu {border: 1px solid #f77272; padding: 15px 20px; margin: 5px 0; background: #fff;}
.subMain .subCont .qu h4 {font-size: 18px; font-family: 'Spoqa Han Sans Neo', 'sans-serif'}
.lastQu .flex {justify-content: flex-start;}
.lastQu label {margin-right: 10px;}
.radioBox ul {justify-content: flex-start;}
.form_radio {position: relative; margin-right: 30px;}
.form_radio label {padding-left: 2.3rem; cursor: pointer;}
.form_radio label::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0; width: 1.3rem; height: 1.3rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; content: "";}
.form_radio label::after {position: absolute; left: 0.45rem; top: 50%; z-index: 01; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #fff; content: ""; transform: translateY(-50%);}
.form_radio input:checked + label::before {border-color: #006bb7; opacity: 0.3;}
.form_radio input:checked + label::after {background-color: #006bb7;}
.description6 {display: flex
; flex-direction: column; gap: 10px; transition: all 0.3s ease; position: relative; justify-content: center; background: #fff; border: 2px solid #f77272; border-radius: 30px; box-shadow: -7.3px 6.7px 9px rgba(247, 114, 114, 0.14); padding: 50px 40px;}
.description6 p:last-child::before {display: none;}



/* //////검사결과/////// */
.description8 ul li:not(:nth-child(1)) {padding-left: 22px;}
.description8 ul li {line-height: 1.5;}
.chart-container {text-align: center; padding: 5px; flex: 1;}
.chart-container:nth-child(4), .chart-container:nth-child(5), .chart-container:nth-child(6) {box-shadow: none;}
.chart-container.radar canvas {display: block; margin: 0 auto; border-radius: 10px; border: 1px solid #eee; padding: 0 !important; box-sizing: content-box !important; background: #fff;}
.bar-chart {display: flex; flex-direction: column; gap: 14px; width: 180px; border: 1px solid #eee; border-radius: 10px; padding: 10px; margin: 0 auto; height: 172px; justify-content: center; background: #fff;}
.bar-item {display: flex; flex-direction: column; font-size: 13px; margin-bottom: 10px;}
.bar-label {margin-bottom: 4px; text-align: left; font-size: 16px;}
.bar-track {position: relative; height: 20px; background-color: #eee; border-radius: 10px; overflow: visible;}
.bar-fill {height: 100%; padding-left: 0.5rem; font-weight: bold; border-radius: 10px; font-size: 0.9em; background: #414141;}
.average-label {position: absolute; top: 100%; transform: translateX(-50%); font-size: 12px; color: #888; margin-top: 4px; white-space: nowrap;}
.average-line {position: absolute; top: 0; width: 2px; height: 100%; background-color: #ff5733; transform: translateX(-1px);}
.radar-legend {display: flex; justify-content: center; gap: 10px; margin-top: 10px; font-size: 12px;}
.legend-box {width: 12px; height: 12px; display: inline-block; margin-right: 4px; border-radius: 2px;}
.defense-status {display: flex; justify-content: space-around; width: 100%; max-width: 450px; border-radius: 10px; font-size: 16px; border: 1px solid #eee; background: #fff;}
.defense-item {width: 30%; text-align: center; padding: 10px; border-radius: 5px; font-weight: bold;}
.defense-result {padding: 10px 20px; border-radius: 8px; width: 100%;}
.healthy {padding: 12px 25px; text-align: center; flex: 1; margin-right: 10px; color: #009c7c; font-weight: bold;}
.normal {padding: 12px 25px; text-align: center; flex: 1; margin-right: 10px; color: #d36100; font-weight: bold;}
.vulnerable {padding: 12px 25px; text-align: center; flex: 1; margin-right: 10px; color: #dd0000; font-weight: bold;}
.legend-box.blue {background-color: #007bff;}
.legend-box.orange {background-color: #ff9800;}
.testDate label {margin-right: 10px; font-weight: bold; font-size: 1em;}
.testDate select {width: auto; border: 3px solid #e5e7ee;}
.testArea button {margin-left: 15px;}
.popup2 .testArea .testTxt .face li {margin: 10px 0; padding: 25px 15px;}
.testArea .testTxt .face li {padding: 40px 15px; border-radius: 20px; margin: 0 10px; flex: 1; position: relative;}
.testArea .testTxt .face li:nth-child(1) {margin-left: 0;}
.testArea .testTxt .face li span {display: block; text-align: center; font-size: 20px; margin: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 50px; line-height: 50px; border-radius: 0 0 30px 30px; color: #fff;}
.testArea .testTxt .face {display: flex; align-items: stretch; flex-wrap: wrap; margin: 0 -20px; min-height: 200px;}
.popup2 .testArea .testTxt .face {display: block; margin: 0 2px;}
.testArea .testTxt .face li.i01 {background: #f4fdfb;border: 2px solid #009c7c;background-clip: padding-box;}
.testArea .testTxt .face li.i02 {background: #fffcf6;border: 2px solid #d36100;background-clip: padding-box;}
.testArea .testTxt .face li.i03 {background: #fdf4f4;border: 2px solid #dd0000;background-clip: padding-box;}
.popup3 .testArea .testTxt .face li.i01 {background: transparent;border: 2px solid #009c7c;background-clip: padding-box;}
.popup3 .testArea .testTxt .face li.i02 {background: transparent;border: 2px solid #d36100;background-clip: padding-box;}
.popup3 .testArea .testTxt .face li.i03 {background: transparent;border: 2px solid #dd0000;background-clip: padding-box;}
.popup3 .testArea .testTxt .face li.i01::before {content: ""; position: absolute; width: 100%; height: 100%; background: #f4fdfb no-repeat; left: 0; top: 0; z-index: -1;}
.popup3 .testArea .testTxt .face li.i02::before {content: ""; position: absolute; width: 100%; height: 100%; background: #fffcf6 no-repeat; left: 0; top: 0; z-index: -1;}
.popup3 .testArea .testTxt .face li.i03::before {content: ""; position: absolute; width: 100%; height: 100%; background: #fdf4f4 no-repeat; left: 0; top: 0; z-index: -1;}
.testArea .testTxt .face li.i01 span {background: #009c7c;}
.testArea .testTxt .face li.i02 span {background: #d36100;}
.testArea .testTxt .face li.i03 {margin-right: 0;}
.testArea .testTxt .face li.i03 span {background: #dd0000;}
.testArea .testTxt .face li p {font-size: 15px; line-height: 1.3; margin: 30px 0 0;}
.testArea .testTxt .face li p i {padding: 7px 15px; font-style: normal; margin: 2px 1px; color: #111; background: #f9f9f9; border-radius: 50px; display: inline-block; border: 1px solid #e5e5e5;}
.testData {padding: 10px; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; background: #fff;}
.testData li {margin: 5px 25px;}
.testData li span {background: #f1f6fb; border: 1px solid #dde2e7; padding: 10px 20px; display: inline-block; min-width: 145px;}
.detailRst {margin-bottom: 30px; gap: 10px;}
.detailRst .detailTxt {display: flex; margin-bottom: 28px;}
.detailRst h5 {position: relative; padding: 0 2%; font-size: 18px; font-family: 'Spoqa Han Sans Neo', 'sans-serif'; display: block; width: 100%; margin-bottom: 15px;}
.detailRst p {flex: 1;}
.detailRst .graph {flex: 1;}
.detailRst .graph h6 {min-width: 120px;}
.detailRst .graph span {margin: 0 15px 5px 0;}
.popContent .detailRst .graph span {margin: 0; width: auto; margin: 5px 0;}
.popContent .detailRst .graph h3 span {font-weight: normal; font-size: 16px;}
.detailRst .graph li {padding: 25px 0; border-bottom: 1px solid #e5e5e5; align-items: flex-start;}
.detailRst .graph li:last-child {margin: 0;}
.detailRst .graph li .target {text-align: right; margin-right: 15px; flex: 1;}
.popup-page .detailRst {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 10px 0 40px;}
.popup-page .testTxt ol li {font-size: 0.9em;}
.popup-page .testArea {padding: 0;}
.popup-page .testTxt {padding: 25px; margin: 0 2px;}
.popup-page .boxTop p {font-size: 1em;}
.popup-page .bar-item {margin-bottom: 20px;}
.popContent .detailRst .graph li .target {padding: 20px 0; position: relative;}
.popContent .detailRst .graph li .target::after {content: ""; background: #e5e5e5; height: 1px; width: 100%; display: block;} 
.detailRst .graph li .num {margin-left: 15px; font-weight: normal; font-size: 15px; color: #Fff; height: 100%; line-height: 30px; display: block; width: 90%;}
.detailRst .graph li .color1 .num {background: #4d4d4d;}
.detailRst .graph li .color2 .num {background: #2E75B6;}
.detailRst .graph li .num span {font-size: 16px; color: #fff;}
.popContent .detailRst .graph li .num {position: inherit; right: auto; top: auto; color: #333;}
.popContent .detailRst .graph li .num * {color: #333;}
.rstProgress:last-child {border: none;}
.target span.color1 {position: relative; left: 0.5%; height: 30px; background: #4d4d4d; display: block; border-radius: 15px;}
.target span.color2 {position: relative; left: 0.5%; height: 30px; background: #2E75B6; display: block; border-radius: 15px;}
.popContent .target span.color1 {height: 20px;}
.popContent .target span.color2 {height: 20px;}
.player {margin-bottom: 15px;}
.player li {display: inline-block; width: 300px;}
.player a {display: block;}
.player .thumb {display: inline-block; width: 100%; margin: 30px 0 0;}
.player .thumb img { width: 100%; position: relative;}
.relate li {width: 193px; height: 47px; border-radius: 10px; border: 1px solid #e9e9e9; display: inline-block; text-align: center; line-height: 47px;}
.relate li a:hover {text-decoration: underline;}
.testRst span {box-shadow: inset 0 -10px 0 #f5e8b2; width: fit-content; font-family: 'Freesentation-8ExtraBold';}
.addService > div {flex-direction: row; display: flex;}
.addService > div > div:nth-child(2) {width: 30%; min-width: 230px; box-shadow: -7.3px 6.7px 9px rgba(247, 114, 114, 0.14);}
.addService > div > div:nth-child(2) img {width: 100%; height: 100%; border-radius: 8px;}
.addService span i {font-style: normal; margin: 0 15px;}
.addService .chkBox {text-align: left !important; display: flex; align-items: center;}
.agreeBtn {text-decoration: underline; border: none; background: transparent; cursor: pointer; }
.video-guide .video-thumb {padding: 0; border: none; background: none; cursor: pointer; display: inline-block; transition: transform 0.3s ease; margin: 0;}
.video-guide .video-thumb:hover, .video-guide .video-thumb:focus {transform: scale(1.02); outline: none;}
.video-guide .video-thumb img {display: block; width: 300px; height: auto; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);}
.wrap.pop {display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px;}
.popUpBox {background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); max-width: 800px; width: 100%; padding: 30px 40px;}
.popupHeader {display: flex; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; padding-bottom: 15px;}
.popupHeader img {width: 32px; height: 32px; margin-right: 10px;}
.popupHeader h4 {font-size: 22px; font-weight: 700; margin: 0; color: #333;}
.thumb {position: relative; width: 100%; border-radius: 12px; overflow: hidden; height: 606px;}
.thumb iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.support-service-list {display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; list-style: none;}
.support-service-list li {flex: 0 0 calc(50% - 10px); box-sizing: border-box; min-height: 168px;}
.support-service-list .card {display: flex; align-items: center; padding: 20px; height: 100%;}
.support-service-list .thumb {flex: 0 0 180px; height: 100px; margin-right: 20px; overflow: hidden; border-radius: 5px;}
.support-service-list .thumb img {width: 100%; height: 100%; border-radius: 5px; object-fit: fill;}
.support-service-list .info {flex: 1;}
.support-service-list .info strong {display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 6px;}
.support-service-list .info p {font-size: 0.9rem; color: #555; margin-bottom: 10px; letter-spacing: -1px;}
.btn-view {display: inline-block; padding: 6px 12px; background-color: #f77272; color: #fff; font-size: 0.9rem; border-radius: 4px; text-decoration: none; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.description2 {margin-bottom: 20px; font-size: 15px; color: #555;}
.description4 {font-size: 15px; color: #555; text-align: center;}
.description5 {box-shadow: 0 3px 6px 0 rgba(221, 41, 41, 0.14); background: #fff; border-radius: 9px;}
.bar-score {position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-weight: bold; z-index: 2; font-size: 0.68em;}


/*  pdf전용 팝업  */
.flex1 {display: flex; justify-content: flex-end; gap: 10px; margin: 10px 0 0;}
.hide-for-pdf {display: none !important;}
 body.pdf-mode .loading-overlay,
body.pdf-mode .close,
body.pdf-mode .btn-print {display: none !important;}
.popup2.popup3 {border: none; box-shadow: none; margin: 10px auto;}
.popup3.popup-page {padding: 0; overflow: visible;}
.popupBg2 .cover-logo-area {/* right: 0; *//* top: -100px; */width: 100%;text-align: right;/* padding: 5px 0; */height: 100px;/* margin: 20px 0; */}
.popup3 .description8 {margin: 0; padding: 0 20px;}
.popup3 .description8 .description6 {padding: 0; box-shadow: none;}
.popup2 .description8 li {font-size: 0.75em;}
.popup3 .description8 li {font-size: 0.9em; padding: 15px 10px;}
.popup-page .description8 li span {font-size: 1em;}
.popup3 .cover-title-area + div {margin: 30px 0;width: 100%;height: 250px;}
.popup3 .exemple > ul > li:nth-child(1)::after {width: 110px; left: 142px;}
.popup3 .exemple > ul > li:nth-child(2)::after {width: 386px; right: 181px;}
.popup3 .exemple > ul > li:nth-child(3)::after {width: 114px;}
.popup3 .pdf_page {padding: 1px 20px;}
.popupBg2.popup-page.active {width: 105%; max-width: 875px; overflow-x: hidden;}
.popup3 .cover-description {font-size: 17px;line-height: 1.8;color: #444;text-align: center;width: 100%; min-height: 200px; padding: 100px 0 30px; box-sizing: content-box; overflow: visible; transform: none; position: initial;}
.popup3 .section-title {margin: 20px 0;}
.popup2.popup3 .close {background-color: #3366cc;color: white;border: none;padding: 0.5rem 1rem;border-radius: 6px;font-size: 1rem;cursor: pointer;transition: background-color 0.3s ease; position: initial;}
.popup2.popup3 .btn-print {background-image: url(../images/pdf.png);}
.popup3 .cover-title-area {text-align: center; position: relative; width: 100%; height: 350px; margin: 30px 0;}

.cover-title-area.pdf_page {}
.popup3 .testArea .testTxt {margin: 0;}
.popup3 .testArea .face {display: block; width: 100%; margin: 0 auto;}
.popup3 .testArea .face li:nth-child(1), .popup3 .testArea .face li:nth-child(2), .popup3 .testArea .face li:nth-child(3) {margin: 10px 0; border-width: 2px; padding: 25px 15px;}
.pdf-half-circle {content: ""; position: absolute; top: -18px; right: 110px; width: 186px; height: 100px; background-color: #dbeaf8; border-top-left-radius: 93px 100px; border-top-right-radius: 93px 100px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; z-index: -1; pointer-events: none;}

/* 검사결과 팝업 */
.popup2 .popup-page:nth-child(3) .section-title + .testTxt {padding: 0; margin: 0;}
.popup2 .popup-page:nth-child(3) .description8 {padding: 15px;}
.popupBg {display: flex; justify-content: center; align-items: center; padding: 4rem 2rem 2rem 2rem; min-height: 100vh; background-color: rgba(0, 0, 0, 0.5);}
.popupBg2::after {display: none;}
.popupBg2 {background-color: transparent;}
.popup2 {background-color: #fff; width: 794px; min-height: 327mm; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); position: relative; border: 3px solid #3c6ca8;}
.popup2 .close {background-color: #3366cc;color: white;border: none;padding: 0.5rem 1rem;border-radius: 6px;font-size: 1rem;cursor: pointer;transition: background-color 0.3s ease; position: absolute; right: 0; top: -55px;}
.popup2 .btn-print {width: 42px;height: 42px;background-color: #fff;border: 1px solid #e5e7ee;border-radius: 50%;background-position: center;background-repeat: no-repeat;background-size: 50%;background-image: url(../images/print.png);}
.popup-page {display: none; padding: 40px 40px 60px; overflow-y: auto; height: 100%; box-sizing: border-box; }
.popup-page.active {display: block;}
.popup-controls {position: absolute; bottom: 20px; right: 30px; display: flex; gap: 10px;}
.popup-controls button {padding: 8px 18px; color: #fff; border: none; font-size: 14px; border-radius: 4px; cursor: pointer; transition: background-color 0.2s ease;}
.popup-controls button.prev-btn2 {background: #727272;}
.popup-controls button.next-btn2 {background: #1768ac;}
.cover-title {font-size: 2.5rem; text-align:center; margin: 15vh 0;}
.popup-user-info {position: absolute; right: 2rem; bottom: 2rem; transform: translateY(-50%); text-align: right; font-size: 18px; line-height: 1.8;}
.popup-user-info p {margin: 0 0 6px;}
.section-title {font-size: 1.8rem; font-weight: 700; padding: 12px 16px; background-color: #f0f7ff; border-left: 8px solid #1a4fa3; color: #1a4fa3; margin-bottom: 20px;}
.section-title + h3, .section-title + h3 + .tblBox, .popup3 > div > .tblBox {margin-bottom: 20px;}
.popup3 > div > h3 {margin: 0 0 20px;}
.popup3 .bar-chart-container {box-shadow: none;}
.exemple .section-title {font-size: initial;}
.testArea .exemple h4 {font-size: 0.89em; margin: 0 0 20px;}
.exemple .tblBox .tblHeader th {font-size: 0.85em;}
.exemple .tblBox td {font-size: 0.8em;}
.exemple .tblBox tbody tr td:nth-child(1), .exemple .tblBox tbody tr td:nth-child(2), .exemple .tblBox tbody tr td:nth-child(4) {text-align: center;} 
.exemple ul li {border-radius: 12px;}
.exemple > ul > li {padding: 15px 25px; margin: 5px 0; position: relative;}
.exemple > ul > li::after {content: ""; position: absolute; border-radius: 12px;}
.exemple > ul > li:nth-child(1) {border: 2px solid #fd8a73;}
.exemple > ul > li:nth-child(1)::after {width: 91px; height: 265px; background: transparent; border: 2px solid #fd8a73; top: -297px; left: 123px;}
.exemple > ul > li:nth-child(2) {border: 2px solid #1488d0;}
.exemple > ul > li:nth-child(2)::after {width: 322px; height: 265px; top: -450px; right: 156px; background: transparent; border: 2px solid #1488d0;}
.exemple > ul > li:nth-child(3) {border: 2px solid #a7cb83;}
.exemple > ul > li:nth-child(3)::after {border: 2px solid #a7cb83; background: transparent; width: 95px; height: 52px; top: -436px; left: 20px;}
.exemple > ul > li > div, .exemple > ul > li > div > ul > li, .exemple > ul > li > ul > li {font-size: 0.9em; margin: 10px 0 0 5px;}
.exemple > ul > li > div > ul {margin: 20px 0 0;}
.coverPage-modern {background: #fff; color: #333;}
.cover-logo-area {text-align: right;}
.cover-logo {width: 190px;height: auto;}
.cover-title-area {margin: 120px 0; text-align: center;position: relative; z-index: 0;}
.popup3 .cover-title-area::after {right: 165px;}
.popup3 .cover-title-area::before {right: 165px;}
.cover-title-area::before {content: "";position: absolute;top: 80px;right: 82px;width: 186px; height: 202px;background-color: #fff; z-index: -1;}
.cover-title-area::after {content: "";position: absolute;top: 32px;right: 82px;width: 186px;height: 202px;background-color: #dbeaf8;border-radius: 50%; z-index: -2;}
.cover-title-area strong {color: #0c4ca3;font-size: 40px;position: relative;left: -30px;}
.cover-main-title {font-size: 105px;color: #0c4ca3;position: relative;font-family: 'NanumSquareNeoBold';margin: 5px 0;letter-spacing: 2px;}
.cover-sub-title {font-size: 76px;font-weight: 500;color: #0c4ca3;position: relative;margin: 15px 0;font-family: 'NanumSquareNeoBold';}
.cover-eng-title {color: #0c4ca3; position: relative; font-size: 26px; line-height: 1.5; letter-spacing: 1px;}
.cover-info-box {border: 2px solid #3c6ca8;width: 100%;border-spacing: 0;border-collapse: separate;border-radius: 10px;overflow: hidden;margin: 0 auto;}
.cover-info-box tr:nth-child(1) th, .cover-info-box tr:nth-child(1) td {border-top: none;}
.cover-info-box th, .cover-info-box td {padding: 20px 12px; border-bottom: 1px solid #0c4ca3;}
.cover-info-box tr:last-child th, .cover-info-box tr:last-child td {border-bottom: none;}
.cover-info-box tr:nth-child(2) th {border-left: 1px solid #3c6ca8;}
.cover-info-box tr:nth-child(2) th:first-child {border-left: none;}
.cover-info-box td {border-right: none;}
.cover-info-box th {color: #036; border-left: none; border-right: 1px solid #3c6ca8;}
.cover-info-box ul {list-style: none; padding: 0; margin: 0;}
.cover-info-box li {display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 18px;}
.cover-info-box li:last-child {border-bottom: none;}
.cover-info-box strong {color: #0c4ca3; width: 120px; font-weight: 600;}
.cover-description {font-size: 17px;line-height: 1.8;color: #444;text-align: center;width: 100%;  position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);}
/* 바 차트 스타일 */
.bar-chart-container {border: 2px solid #e0e0e0; border-radius: 12px; background-color: #fafafa; padding: 20px; margin: 25px 2px 0 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: all 0.3s ease-in-out;}
.bar-chart2 {border: 1px solid #eee; border-radius: 10px; padding: 10px; height: 202px; display: flex; flex-direction: column; justify-content: center;}
.bar-chart-item {display: flex; flex-direction: column; gap: 10px;}
.bar-label li {font-size: 0.85em;}
.bar-label ul {margin: 15px 0 0;}
.popup-page .bar-track {width: 100%; height: 16px; background-color: #eee; border-radius: 8px; margin-bottom: 4px; position: relative; float: left;}
.popup-page .tblBox .bar-track {width: 80%;}
.popup-page .bar-track + span {float: right;}
.popup-page .bar-fill {height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-weight: bold; border-radius: 8px;}
.bar-fill.average {background-color: #5B9BD5;}
/* 훌륭 */
.bar-fill.tScore1 {background-color: rgba(0, 128, 0, 0.5);}
/* 보통 */
.bar-fill.tScore2 {background-color: rgb(255, 108, 0, 0.5);}
/* 취약 */
.bar-fill.tScore3 {background: rgba(255, 0, 0, 0.5);}
.bar-fill.user {background-color: rgba(255,152,0,0.5);}
.bar-legend {display: flex; justify-content: center; gap: 1.5rem; font-size: 0.9rem;}
.legend-box {display: inline-block; width: 10px; height: 10px; margin-right: 0.4rem; border-radius: 3px; vertical-align: middle;}
.legend-box.blue {background-color: #4a90e2;}
.legend-box.orange {background-color: #d36100;}
.description {gap: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); border-radius: 10px 0 0 10px; margin: 0 2px;}
.status-healthy {--bg-color: #e6f4ea; --text-color: #1f7c34; border-left: 8px solid #1f7c34;}
.status-average {--bg-color: #fef0e7; --text-color: #d36100; border-left: 8px solid #d36100;}
.status-weak {--bg-color: #ffe6e6; --text-color: #d32f2f; border-left: 8px solid #d32f2f;}
.description > div:first-child {display: flex; flex-direction: column; padding: 10px 24px; margin: 24px 0 0; border-radius: 10px 10px 0 0;  background-color: var(--bg-color); color: var(--text-color); transition: all 0.3s ease;}
.description > div:last-child {border-radius: 0 0 10px 10px; padding: 10px 24px; margin: 0 0 24px; background: #f0f7f9;}
.description h3 {font-size: 1.15rem; font-weight: 700; margin: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.description p, .description pre {font-size: 0.95rem; line-height: 1.6; margin: 0;}
.popup2 .popup-page .description pre {font-size: 0.8rem;}
.description p:first-of-type {padding: 10px 0 0;}
.description p:last-of-type {font-size: 0.95rem; line-height: 1.6; color: #555;}
.pop .tblrowBox h5 {margin: 30px 0 15px;}
.pop .tblrowBox table tr {height: 50px;}
.pop .tblrowBox th, .pop .tblrowBox td {font-size: 14px;}
.pop .tblrowBox td {padding: 0 20px;}
.pop .btn {margin: 30px 0;}
.description7 {margin: 20px 10px;}
.description7 li {font-size: 0.95em;}

/* 인쇄할때 로딩 */
.loading-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: none; flex-direction: column; justify-content: center; align-items: center; z-index: 9999;}
.spinner {width: 50px; height: 50px; border: 5px solid #ccc; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 10px;}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loading-overlay p {font-size: 16px; color: #333;}

/* 지원 프로그램 */
.program > div > div {margin: 12px 0;}
.boardList ul {width: 100%; margin: 30px 0 0; justify-content: flex-start;}
.boardList ul li {width: 33%; padding: 0 15px; margin-bottom: 100px;}
.boardList ul li .thum {width: 100%; height: 240px;}
.boardList ul li:hover .thum a {font-family: 'NanumSquareNeoBold'; cursor: pointer;}
.boardList ul li .thumImg {border: 1px solid #e9e9e9; position: relative; overflow: hidden; background: #000; width: 100%; height: 100%;}
.boardList ul li .thumImg a {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; width: 100%; height: 100%;}
.boardList ul li .thumImg a img {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); object-fit: fill; display: block; width: 100%; height: 100%;}
.boardList ul li .thumTxt {padding: 15px 0; font-size: 18px; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.boardList ul li .thumTxt strong {display: block; box-shadow: inset 0 -10px 0 #f5e8b2; width: fit-content; font-size: 20px; font-family: 'Spoqa Han Sans Neo', 'sans-serif';}
.tblDetailContents .thumb {display: block; margin: 30px 0 0;}
.tblDetailContents iframe {margin: 30px 0 0;}
.description5.description3::before {background-size: 18%;}
.boardTotal select {width: auto;}


/* 유관기관 안내 */
.tblBox {position: relative;}
.tblBox table {width: 100%; border-collapse: collapse; border-spacing: 0;}
/*개발페이지에만 있는 태그*/
.tblBox table pre {white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; font-size: 16px;}
.tblBox .tblHeader {background: #fff5c2; border-bottom: 1px solid #e8e8e8;}
.tblBox .tblHeader th {text-align: center; font-weight: bold; height: 40px; padding: 20px 0;}
.tblBox table td {word-break: break-all; border-bottom: 2px solid #d8d8d8; border-right: 2px solid #d8d8d8; padding: 15px; background: #fff; font-size: 16px;}
.tblBox table td:last-child {border-right: none; font-size: 16px;}
.tblBox table td[data-label="등록일"] {text-align: center;}
.tblBox table .instName {font-weight: bold;}
/*개발페이지에만 있는 태그*/
.tblBox table .instName pre + .name2 {color: #f77272;}
.tblBox table .instName, .tblBox table .number, .tblBox table .homepage {text-align: center;}
.tblBox table .instName span, .tblBox table .number span {display: block; font-size: 0.9em; padding: 10px 0 0;}
.tblBox table td.number li, .tblBox table td.homepage li {margin-bottom: 10px;}
.tblBox table td.homepage.tal a::after {left: 65%;}
.tblBox table td.homepage a {display: block; width: 100%; height: 100%; font-size: 16px;}
.tblBox table td.homepage a::after {content: ""; background: url(../images/homepage2.png) no-repeat center; width: 35px; height: 35px; background-size: contain; display: block; margin: 0 auto;}
.tblBox table td li strong {font-family: "Freesentation-7Bold"; display: block;}
.tblBox table td li:last-child {border: none;}
.tblBox .tblHeader li {text-align: center; font-weight: bold;}
.tblBox .subject ul {display: block;}
.tblBox .subject ul li {display: block; border: none; position: relative; padding-left: 15px;}
.tblBox .subject ul li::before {position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background: #000; content: ""; transform: translateY(-50%);}


/* 자주하는 질문*/
.qna li {margin: 10px 0; border-radius: 10px; background: #fff;}
.qna li > div {display: flex; justify-content: flex-start; position: relative; padding: 20px 10px; border: 1px solid #cdd4e3; border-radius: 10px;}
.qna li > div:hover {background-color: #ecf3fd;}
.qna li > div:nth-child(1):before {content: ""; background: url(../images/Q.png) no-repeat center; width: 30px; height: 30px; background-size: contain; margin: 0 30px 0 0;}
.qna li > div > div {display: flex; justify-content: center; align-items: center;}
.qna li cite {color: #175c8d; font-style: normal; margin-right: 10px;}
.qna li .answer {display: none;}
.qna li.on .answer {display: block; background: #f8f8f8; border: 1px solid #e5e5e5; padding: 25px; line-height: 1.5;}
.qna li.on .answer p a {text-decoration: underline;}
.qna li.on button::after {transform: translateY(-50%) rotate(180deg);}
.qna li button {position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; border: none; background: none; cursor: pointer; margin: 0;}
.qna li button::after {content: ""; background: url(../images/selectArrow.png) no-repeat center; width: 20px; height: 20px; background-size: contain; position: absolute; right: 30px; top: 50%; transform: translateY(-50%);}


/* 공지사항 */
.boardTop {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-family: "Freesentation-7Bold"; font-size: 22px;}
.search {display: flex;}
.search > input {margin-left: 15px;}
.search select {width: 120px; border: none; border: 2px solid #e5e7ee; -webkit-appearance: auto; appearance: auto;}
.search input {border: none; border: 2px solid #e5e7ee; font-size: 0.9em; padding-left: 10px;}
.search button {background: none; border: none; position: relative; display: block;}
.search button::after {content: ""; background: url(../images/search.png) no-repeat center; width: 30px; height: 30px; display: block; background-size: 100%; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
.tblBox .tblDetail .tblHeader {padding: 20px 30px;}
.tblBox .tblDetail .tblInfo {padding: 15px 30px; border-bottom: 1px solid #d8d8d8; background: #fff;}
.notice {overflow: unset;}
.notice td:nth-child(1) {text-align: center;}
.notice a {display: inline-block; width: 100%; font-size: 16px;}
.tblBox .tblDetail .tblInfo span {display: inline-block; margin-right: 30px;}
.tblBox .tblDetail .tblInfo span strong {font-weight: normal;}
.addFile {text-align: right; background: #fff; border-bottom: 1px solid #d8d8d8; display: flex; justify-content: flex-end; align-items: center;}
.addFile span {display: inline-block; padding: 10px; font-size: 16px; height: 100%;}
.addFile button {transform: translateY(3px);}
.addFile > span {width: 20%;}
.addFile ul {display: inline-block; width: auto;}
.addFile ul li {border: none; display: block; min-width: 180px; text-align: left;}
.addFile ul li a {height: inherit; display: inline-flex}
.tblDetailContents {padding: 30px; border-bottom: 1px solid #000; background: #fff;}
.tblDetailContents img, .tblDetailContents video {width: 100%; margin: 20px 0;}
.tblDetailContents p, .tblDetailContents a, .tblDetailContents li {font-size: 16px; line-height: 1.5;}
.tblDetailContents p {margin-bottom: 15px;}
.tblDetailContents a {display: inline-block; white-space: normal; word-break: break-all; overflow-wrap: break-word;}
.btnArea {text-align: center; margin: 20px 0;}
.notice tbody tr:hover{background-color: #ecf3fd;}


/* 설문조사 */
.survey input[type="text"] {border: 1px solid #e5e7ee; height: 35px; vertical-align: middle; padding: 10px;}
.survey .radioArea {padding: 0 25px 0 0; display: flex; align-items: center;}
.survey textarea {width: 100%; min-height: 200px; resize: none; white-space: pre-wrap; overflow-wrap: break-word; border: 1px solid #e5e7ee; padding: 10px;}
.testArea .survey .answer li.form_radio {margin-right: 30px;}
.survey .surveyInput {background: #f1f6fb; border: 1px solid #dde2e7; display: inline-block; min-width: 231px; min-height: 35px; padding: 5px;}
.survey .surveyTextarea {background: #f1f6fb; border: 1px solid #dde2e7; display: block; min-height: 200px; padding: 5px;}
.survey i {padding: 7px 15px; font-style: normal; margin: 0 1px; background: #f9f9f9; border-radius: 50px; display: inline-block; border: 1px solid #e5e5e5;}
.tblBox table td[data-label="설문기간"] {text-align: center;}
.answer-row {display: flex; align-items: flex-start; margin-bottom: 10px;}
.answer-label {font-weight: 600; font-size: 14px; margin-right: 12px; padding: 8px 20px; border-radius: 4px; white-space: nowrap;}
.answer-label.pre {background-color: #6C8AE4; color: white;}
.answer-label.post {background-color: #e06363; color: white;}
.radioBox ul.flex {display: flex; flex-wrap: wrap; gap: 8px;}

/* 회원정보 수정 */
.custom-disagree-popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 9999;}
.custom-disagree-popup .popup-content {background: white; padding: 20px 30px; border-radius: 10px; text-align: center;}
.layer-popup {display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
.layer-popup .content {position: fixed; top: 50%; left: 50%; width: 500px; max-width: 90%; transform: translate(-50%, -50%); z-index: 2000; height: 520px;}
.layer-popup .tabBox {float: left;}
.layer-popup .tabBox li {width: 30px; height: 15px; background: #ccc;}
.layer-popup .tabBox li.on {background: #ffdd21; border: none}
.layer-popup .tabBox li.on::after {display: none;}
.layer-popup .popup-content {background: #fff; padding: 30px 40px; border-radius: 10px; max-width: 500px; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
.layer-popup .popup-content2 {}
.layer-popup .popup-content2 > div:nth-child(1) {height: 500px;}
.layer-popup .popup-content2 > div:nth-child(2) {display: flex; background: #Fff; gap: 10px; align-items: center; justify-content: center;}
.layer-popup .popup-content2 img {width: 100%; height: 100%; display: block; border-bottom: 1px solid #ddd;}
.layer-popup .popup-content2 button {margin: 5px 0;}
.layer-popup .popup-content p {font-size: 1.1em; margin-bottom: 20px;}
.tblrowBox table {border-spacing: 0px; width: 100%; table-layout: fixed;}
.tblrowBox table tr {height: 70px;}
.tblrowBox th, .tblrowBox td {border-bottom: 1px solid #d8d8d8;}
.tblrowBox th {background: #fff5c2; padding: 0 15px 0 25px; text-align: left;}
.tblrowBox td {padding-left: 20px; background: #fff;}
.tblrowBox td input[type="email"] {border: 2px solid #e5e7ee; width: 342px; padding: 0 15px; height: 45px;}
.tblrowBox td input[type="text"], .tblrowBox td input[type="password"] {border: 2px solid #e5e7ee; width: 231px; padding: 0 15px; height: 45px;}
.tblrowBox td .tel input {width: 135px; font-size: 0.9em;}
.tblrowBox td .tel span {width: 15px; text-align: center; height: 42px; line-height: 42px;}
.boardBtm {margin: 10px 0 0;}
.mail input {width: auto !important;}
.mail select {width: 300px;}
.mail select + input {vertical-align: bottom;}
.gender {justify-content: flex-start}
.gender li {margin-right: 20px; width: auto; margin: 0 10px 0 0;}
.license {height: 100px !important;}
.license .list {justify-content: flex-start; align-items: center}
.license .list li {margin: 0 20px 5px 0;}
.license .list li:last-child label {margin-right: 10px;}
.radioArea {align-items: center;}
.addAgree {margin: 50px 0 20px;}
.addAgreeItm li {margin: 15px 0;}
.addAgree + .content .radioBox ul {justify-content: flex-end;}
.desc {margin: 15px 0; color: #555; font-size: 0.95em;}
.radioBox .flex1 {justify-content: flex-end;}

/* ///////////////////////////////////////footer 영역/////////////////////////////////////// */
.footer {width: 100%; background: #f5f5f5;}
.footer .footerTop {padding: 20px; border-top: 1px solid #e5e7ee; border-bottom: 1px solid #e5e7ee;}
.footer .footerTop .footerBox {display: flex; max-width: 1400px; margin: 0 auto;}
.footer .footerTop .footerBox .footerLeft ul {text-align: left;}
.footer .footerTop .footerBox .footerLeft ul li {display: inline-block; margin: 5px 30px;}
.footer .footerTop .footerBox .footerLeft ul li:nth-child(1) a {color: #e06363; font-weight: bold;}
.footer .footerBtm {max-width: 1400px; margin: 0 auto; padding: 25px 30px;}

.moBreadcrumb {display: none;}


/* ///////////////////////////////////////반응형/////////////////////////////////////// */
@media (max-height: 800px) {
  .main .section01::after {max-width: 940px;}
}
@media (max-height: 695px) {
  .main .section01::after {display: none;}
}
@media all and (min-width: 3000px) {
  .main .section01 {max-height: 1000px;}
  .section01::before {height: 150%;}
}
@media all and (max-width: 1536px) and (min-height: 730px){
  
  .layer-popup .tabBox {top: 5%;}
}
@media all and (max-width: 1400px) {
  .tabNon {display: none !important;}
	header, .content, .textWrap, .loginWrap, footer {width:100%;}
    footer .foot_menu{margin-left: 0; padding-bottom: 0;}
    .foot_menu ul{text-align: center;}

    /*header*/
    header {padding: 0; height: auto;}
    .header {height: auto;}
    .header h1 {left: 20px; top: 55%; transform: translateY(-50%);}
    h1 img {width:100%;}
    .utilArea {top:15px; right:40px;}
    .utilAreaWrap{display: none;}
    .gnbArea {display:none;}
    .main_gnbpc{display: none;}
    .btn_ham {display:block; top: 50%; margin-top: 0; right: 20px; width: 30px; transform: translateY(-50%);}
	.subHeader {margin: 0;}
  .subTit .breadcrumb {background: #fff; border-radius: 30px; padding: 0 20px;}
  .hdWrap {height: 70px;}
  .subHeader:before {background-position: center 100%; width: 100%; height: 100%; bottom: -45px;}

    /*content*/
    /* .content {padding: 0 20px;} */

    /*footer*/
    footer {text-align:center; margin-top: 30px;}
    footer .corpWrap {width:100%; margin: 0 20px;}


    /* 메인페이지 */
    
    .main .section01 .mainContainer, .main .section02, .main .section03 {padding: 50px 20px; flex-direction: column;}
	.main .section01 .mainContainer .main_inner .visualBox {margin: 0 auto 20px; text-align: center;}
  .main .section01 .mainContainer .main_inner .visualBox button {left: auto; transform: none;}
	.main .section01 .mainContainer .main_inner .visualBox::after {display: none;}
	.main .section01 .mainContainer .main_inner .visualBox .visualTxt p {width: auto; text-align: left;}
	.main .section01 .mainContainer .main_inner {flex-direction: column; margin: 100px 0 0;}
	.main .section01 .mainContainer .main_inner .mainLoginBox {width: 100%; margin: 0 auto;}
	.main .section01 .mainContainer .main_inner .mainLoginBox button, .main .section01 .mainContainer .main_inner .mainLoginBox input {width: 100%;}
    .main .section02 {margin: 0; background: url(../images/moquickImg.png) no-repeat; background-size: cover;}
    .main .section02::before {display: none;;}
    .main .section03 {height: auto;}
    .main .section03::after {display: none;}
	.main .section03::before {display: none;}
	.main .section03 .noticeBox {width: auto; height: auto; margin: 0; max-height: none;}
	.main .section03 .popupBox {width: auto; height: auto; margin: 25px 0 0;}
    .popup {margin: 30px 0 0;}



    /* 서브페이지 nav */
    .subMain .subCont {width: 100%; padding: 0 15px;}
    .subTit {padding: 200px 0 0; align-items: center;}
    .subMain {flex-direction: column; position: relative; margin: 25px auto 95px;}
    .subMain .subNav {display: none;}
    .moBreadcrumb {display: block; letter-spacing: -1px; text-align: center; position: absolute; top: -70px; left: 50%; transform: translateX(-50%);}
    .moBreadcrumb li {display: inline-block; padding: 0 20px; position: relative;}
    .moBreadcrumb li:nth-child(1)::after {content: ">"; position: absolute; left: 100%;}


    
    /* 로그인 */
    .subMain .subCont .loginBox .loginCont {padding: 10px;}
    .subMain .subCont .loginBox .loginCont p {margin: 30px 0; text-align: center;}
    .subMain .subCont .loginBox .loginCont .loginArea {margin-bottom: 10px; padding: 0 10px;}
    .subMain .subCont .loginBox .loginCont .loginArea input {width: 100%; height: 55px;}
    .subMain .subCont .loginBox .loginCont .loginArea a {width: 100%; height: 55px; line-height: 55px;}



    /* 검사 소개 */
    .intro .introContent .introTxt {margin-left: 25px;}

    
    /* 검사 구성 */
    .category li {margin-bottom: 10px; flex: none; width: 49%;}
    .category li strong {padding: 20px; height: 62px;}


    /* 검사 결과 */
    .popUpBox .detailRst .graph li {position: relative; padding: 25px; border-radius: 20px 20px 100px 20px; box-shadow: 3px 3px 10px rgba(76, 76, 76, 0.15); margin-bottom: 15px; background: #f4f6f8;}
    .popUpBox .detailRst .graph li p {padding: 30px; border-radius: 10px 10px 50px 10px; color: #fff;}
/*    .popUpBox .detailRst .graph li.good {border: 2px solid #009c7c;}*/
    .popUpBox .detailRst .graph li.good p {background: #009c7c;}
    /*.popUpBox .detailRst .graph li.soso {border: 2px solid #0073a1;}*/
    .popUpBox .detailRst .graph li.soso p {background: #0073a1;}
    /*.popUpBox .detailRst .graph li.bad {border: 2px solid #dd0000;}*/
    .popUpBox .detailRst .graph li.bad p {background: #dd0000;}
    .detailRst .graph li h3 {margin: 0 0 10px;}
    .detailRst .graph h6 {width: 100%; margin-bottom: 10px;}
    .detailRst .graph li .num {width: auto;}
}

@media all and (max-width: 1100px){
  .layer-popup .tabBox {top: 15%;}
    .subMain .subCont {width: 100%; padding: 10px;}
    .main .section02 .quickMenuBox ul li {margin: 0 31px 20px;}
    .certify li {width: 400px; height: 250px;}
    .certify li:nth-child(1)::before {top: 32%; width: 110px; height: 70px;}
    .certify li:nth-child(2)::before {top: 29%; width: 80px; height: 80px;}
    .boardList ul li {width: 50%;}
    .testArea .answer ul {flex-wrap: wrap;}
    .testArea .answer ul li {width: 100%; margin: 5px 0;}
    .testArea .answer ul li:last-child {margin: 0;}


    /* 검사 진행 */
    .progress ul {flex-wrap: wrap; height: auto;}
  .progress ul li {flex: none; width: 100%;}

  /* 지원 프로그램 */
  .thumb video {width: 100%;}
  /* 설문조사 */
  .testArea > .testList > ul > li .question + .answer-row {padding-bottom: 20px; border-bottom: 1px solid #d0dbe1;}
}
@media all and (max-width: 1024px){
  .prograss2 li::after {left: 111%;}
}
@media all and (max-width: 900px){
  .certify li {width: 40%; border: none; height: auto;}
  .certify li::before {display: none;}
  .certify li:nth-child(1) strong, .certify li:nth-child(2) strong {height: 90px; line-height: 90px; border-radius: 20px; margin-bottom: 0;}
  .certify li:nth-child(1) a::before, .certify li:nth-child(2) a::before {display: none;}
  .certify li span {padding: 20px 0 0;}
}
@media all and (max-width: 767px){
  .layer-popup .tabBox {top: 25%;}
.layer-popup .popup-content2 > div:nth-child(2) {flex-direction: column; padding: 10px 0 0;}
.layer-popup .popup-content2 > div:nth-child(2) .form_radio {width: 70%; margin: 5px 0;}
.layer-popup .popup-content2 button {margin: 0 0 10px;}
    /*header*/
    header {height:70px; padding:0 20px; padding: 0;}
    .utilAreaWrap{display:none;}
    .hdWrap{width: 100%; padding: 0 20px;}
    h1{bottom: 0;}
    .header h1 {width:120px; overflow: visible;}
    .utilArea {display:none;}
    .btn_ham {width: 30px; height: 30px;}
    .btn_ham img {width:100%;}

    /*gnb*/
    .btn_ham {top: 50%; transform: translateY(-50%);}
    .gnbArea_m {width:63.4%; padding:20px 10px;}
    .gnbArea_m .btn_close { width:16px; height:16px; margin-right:10px;}
    .gnbArea_m .joinWrap {padding:15px 0;}
    .gnbArea_m .joinWrap a {font-size:16px; padding:8px;}
    .gnbArea_m .siteWrap {position: absolute; bottom: 0; padding:15px 2px;}
    .gnbArea_m .siteWrap a {font-size:12px; padding:8px; margin: 2px 0px;}
    .gnbArea_m .gnb {margin:0 10px;}
    .gnbArea_m .gnb > li > a {height:45px; font-size:18px; line-height:45px;}
    .gnbArea_m .gnb > li > a::before {width:14px; height:7px; top:20px;}

    /*lnb*/
    .gnbArea_m .lnb > li > a {font-size: 13px; text-indent: 10px; line-height: 32px; letter-spacing: -1px;}
    .subHeader {margin: 0; height: 280px; min-height: auto;}
    .subHeader:before {display: none;}
    .subTit h2 {text-align: center;}
    .subTit .breadcrumb {justify-content: center;}

    /* container */
    #container{margin-top: 70px;}

    /*content*/
    #content {padding:25px 20px 40px; min-height: 500px;}

    /*footer*/
    .foot_menu ul li{margin: 1% 0; border: 0px solid #999; box-sizing: border-box; width: 45%; display: inline-block; padding: 8px 0;}
    .foot_menu ul li:nth-child(2):after{display: none;}
    .foot_menu ul li a{font-size: 12px; letter-spacing: -0.5px; text-align: center;}
    footer .corpWrap {margin:0; padding-top: 25px;}
    .footFsWrap{left: 0; top: 0; width: 100%;}
    .footFsWrap select{width: calc(100% - 57px);}
    footer .box_prov {display:none;}
    footer .box_comInfo {line-height:20px;}
    footer .box_comInfo address, footer .box_comInfo span {font-size:12px;}
    footer .markWrap {display:none;}
    footer .changeWrap {display:block; margin:15px auto 0;}
    footer .changeWrap a { display: inline-block; height:31px; color:#464f55; font-size:18px; line-height:31px; background:#fff; padding:0 15px;}
    footer .changeWrap a:first-child {margin-right:9px;}
	.grid1400{width: 100%; margin: 0 auto;}

  /* subHeader */
  .subTit {padding: 120px 0 0;}

	/* 메인페이지 */
  .main .section01 {background-position: right;}
  .main .section01::after {background: url(../images/subBg.png) no-repeat; background-size: cover; height: 100%;}
  
    .main .section01, .main .section02 {height: auto; background-size: cover;}
  .main .section01 .mainContainer .main_inner .visualBox .visualTxt h2 {font-size: 40px}
  .main .section01 .mainContainer .main_inner .visualBox .visualTxt h2 span {font-size: 40px;}
  .main .section01 .mainContainer .main_inner .visualBox .visualTxt p {font-size: 1.1em;}
  .main .section02 h3 {padding: 0;}
  .main .section02 .quickMenuBox ul {justify-content: space-between; gap: 0;}
	.main .section02 .quickMenuBox ul li {height: auto; margin: 10px auto; min-height: auto ;}
	.main .section02 .quickMenuBox ul li::after {width: 100px; height: 100px;}
	.main .section02 .quickMenuBox ul li a {padding: 125px 0 0; font-size: 1em;}
	.main .section03 {flex-direction: column;}
  .main .section03 .noticeBox {padding: 0;}
  .main .section03 .noticeBox ul li {padding: 15px; border-bottom: 1px solid #ecf0f8; display: flex; flex-direction: column;}
  .main .section03 .noticeBox ul li a {padding-left: 20px;}
  .main .section03 .notice button {top: 0;}
  .postSlider .pageNum {left: 30%; top: -15%;}
  
  /* 서브페이지 */
  .subMain .subCont {width: 100%;}
  
  /* 로그인 */
  .subMain .subCont .loginBox .loginCont p:nth-child(1) {padding: 0 30px;}
  
  /* 검사 소개 */
  .intro .introContent {flex-direction: column;}
  .intro .introContent .introTxt {width: 100%; margin: 0;}
  .intro .introContent .introTxt p {padding: 0;}
  .intro .introContent .introTxt p::before {left: -10px;}
  .greetingBox p {font-size: 0.9em;}
  .greetingTitBox .greetingTit::before {width: 35px; height: 35px; right: 10%;}
  .greetingTitBox .greetingTit::after {width: 35px; height: 35px; left: 10%;}
  .testArea .testTxt {gap: 25px; height: auto; padding: 30px;}
  .description3::before {background-position: center 100%;}
  .greetingTitBox .greetingTit h4, .subMain .subCont h4 span {font-size: 28px;}
  .greetingTitBox .greetingTit strong, .greetingTitBox .greetingTit strong span {font-size: 20px;}
  .greetingBox h5 {font-size: 1.2em;}
  .greetingContBox .greetingTxt li {font-size: 0.9em;}
  .description4 img {width: 100%;}
 


  /* 검사 구성 */
  .categoryCont > ul > li {width: 100%;}
  .categoryCont > ul > li > table {width: 100%;}
  .categoryCont table td {padding: 10px; font-size: 16px;}
  .subMain .subCont.consist h4 {font-size: 28px;}
  .subMain .subCont.consist strong, .subMain .subCont.consist strong span {font-size: 20px;}
  .consist > span {font-size: 0.9em;}
  
  
  /* 검사진행 - 인적사항 */
  .testArea .answer ul {flex-wrap: wrap;}
  .testArea .answer li .radioArea {flex-wrap: wrap; padding: 0;}
  .testArea .answer li .radioArea label {padding: 10px 10px 0; font-size: 16px;}
  .prograss2 li {margin: 10px 20px 0 10px; width: 150px; padding: 65px 10px 0; border: 2px solid #eee;}
  .prograss2 li::before {height: 35px;}
  .prograss2 li::after {left: 110%; width: 3rem; height: 3rem;}
  .certify li {width: 100%; border-radius: 10px; border: none; height: auto;}
  .certify li span {width: 100%; padding: 10px 0 25px;}
  .certify li strong {margin-bottom: 0; border-radius: 10px;}
  .description3 p {font-size: 0.9em;}
  .description3 .question p {padding-left: 0;}
  .boxTop p {padding-left: 20px; font-size: 0.9em;}
  .boxTop p::before {left: 0;}
  .prograss2 li strong {font-size: 16px;}
  .checkInput, .selectInput1 {width: 70%;}
    

  /* 검사진행 */
  .testcheckTop {padding: 10px 0;}
  .testcheckTbl colgroup {display: none;}
  .testcheckTbl tr:nth-child(1) {display: none;}
  .testcheckTbl tr {display: block; padding: 9px 10px 11px; border-left: 1px solid #d0dbe1; border-right: 1px solid #d0dbe1;}
  .testcheckTbl tr td:nth-child(1) {display: block; margin: 3px 0 2px; white-space: normal;}
  .testcheckTbl tr td:nth-child(2)::after, .testcheckTbl tr td:nth-child(3)::after, .testcheckTbl tr td:nth-child(4)::after, .testcheckTbl tr td:nth-child(5)::after, .testcheckTbl tr td:nth-child(6)::after {content: attr(aria-label); margin-left: 5px;}
  .testcheckTbl tr td {display: block; padding: 8px 0; border: none; text-align: left;}
  .testcheckTbl tr td input {vertical-align:top;}
  .radioRabel {width: 100%;}
  .form_radio {margin-bottom: 20px; width: 100%;}
  .tempSave {position: initial; width: 223px; display: block; margin: 10px auto;}
  
  /* 검사 결과*/
  /*.testArea .testTxt {margin: 15px 0 0;}*/
  .popContent .testArea .testTxt {margin: 0;}
  .detailRst {display: block;}
  .popContent .detailRst {padding: 0; margin: 30px 0;}
  .detailRst .detailTxt {flex-direction: column;}
  .testArea .testTxt .face li {flex: none; width: 100%; margin: 10px 0; padding: 10px;}
  .testArea .testTxt .face li span {width: 150px; height: 34px; line-height: 34px; font-size: 16px;}
  .testData {flex-direction: column;}
  .testData li {margin: 0; width: 100%;}
  .testData li span {width: 100%; margin: 10px 0;}
  .license .list li {width: 100%; margin: 5px;}
  .license .list .radioArea {justify-content: flex-start}
  .btn .agreeBtn {width: auto;}
  .support-service-list li {flex: 0 0 100%;}
  .addService > div  {flex-direction: column;}
  .addService > div > div:nth-child(2) {margin: 0 auto;}



    
  /* 지원 프로그램 */
  .program > div > div {margin: 0 0 10px;}
  .player li {width: 100%;}
  .tblBox table td.program a {padding: 10px; font-size: 16px;}
  .boardList ul li {width: 100%; border-bottom: 1px solid #d8d8d8;}
  .boardList ul li .thumImg a img {max-height: inherit;}
  .tblDetailContents iframe {width: 100%;}
  .support-service-list .card {flex-direction: column;}
  .support-service-list .thumb {margin-bottom: 20px; margin-right: 0;}
  .support-service-list .thumb img {width: 100%; height: 100%;}
  .support-service-list .info {flex: none; width: 100%;}
  .btn-view {width: 100%; text-align: center;}

  /* 유관기관 안내 */
  .tblBox { overflow-x: auto;}
  .tblBox table {width: 1000px;}
  .tblBox .tblHeader th {padding: 10px 0; font-size: 16px;}
  .tblBox table td {font-size: 16px; padding: 7px;}
  .tblBox table td li {font-size: 16px; text-align: center;}
  .tblBox table td li strong {font-size: 16px; width: 100%;}
  .tblBox table td::before, .tblBox table td li::before {display: table-caption;margin-right: 30px; width: 65px; content: attr(data-label); text-align: right; font-weight: bold;}
  .tblBox table td.program::before, .tblBx table td.dataFile::before {width: 60px; text-align: left; margin-bottom: 10px;}
  .testInfo table ul {width: 100%;}
  .testInfo table td::before, .testInfo table td li::before {width: 100px; text-align: right; margin: 0 10px 0 0;}
  .tblBox table pre {font-size: 16px;}


  /* 공지사항 */
  .boardTop {flex-direction: column; align-items: flex-start}
  .boardTop + span {display: block; width: 100%; margin-bottom: 10px;}
  .search {margin: 15px 0 0;}
  .search .select_box {margin: 0;}
  .notice table {width: 100%;}
  .notice table tr {border-bottom: 1px solid #d8d8d8;}
  .notice table td {display: -webkit-box; border: none; height: auto; word-break: auto-phrase; padding: 15px 0;}
    
    

  /* 자주하는 질문 */
  .qna li button::after {right: 10px;}
  .qna li > div > div {flex-direction: column; align-items: baseline;}
  .qna li > div > div > div {max-width: 250px; white-space: normal;}

  /* 회원정보수정*/
  .tblrowBox table {font-size: 13px;}
  .moCol {width: 120px !important;}
  .moColA {width: auto !important;}
  .tblrowBox td .tel {display: flex;}
  .tblrowBox td .tel input {width: 100%; flex: 1.5;}
  .btn {font-size: 13px;}
  .subCont .btn button {width: 100%; margin: 5px 0;}
  .tblrowBox td {padding: 5px;}
  .tblrowBox colgroup {display: none;}
  .tblrowBox table tr {display: flex; flex-direction: column; height: auto !important;}
  .tblrowBox th, .tblrowBox td {padding: 10px;}
  .radioBox.flex1 {flex-direction: column; gap: 25px;}

/* 약관동의 팝업 */
  .popUpBox .tblBox table {width: 100%;}

}

@media all and (max-width: 480px){

    /*header*/
    header h1 {width:154px; top:15px; left:20px;}
    .navWrap > ul > li{margin-left: 5px;}
    .navWrap > ul > li > a{font-size: 11px; letter-spacing: -1.5px;}
    .navWrap > ul .box_subNav > li a{ font-size: 11px; letter-spacing: -1.5px;}
	  .grid1400{width: 100%; margin: 0 auto;}


    /* 로그인 */
    
}

@media all and (max-width: 320px){
    .gnbArea_m .joinWrap a{font-size: 12px; padding: 6px;}
    .gnbArea_m .gnb > li > a{height: 40px; line-height: 40px; font-size: 16px;}
    .gnbArea_m .lnb > li > a{font-size: 12px; line-height: 30px;}
    .navWrap > ul > li{margin-left: 5px;}
    .navWrap > ul > li > a{font-size: 11px; letter-spacing: -2px;}
    .navWrap > ul .box_subNav > li a{font-size: 11px; letter-spacing: -2px;}
    .navWrap > ul > li > a::after{background-size: 20px; width: 20px; height: 20px; margin-left: 3px;}
    .foot_menu ul li{width: 100%; margin: 0 0 1% 0;}

}

/* 세부결과지 출력용 */
@media print {
  @page {size: A4 portrait; margin: 10mm 10mm 10mm 10mm;}
 .cover-title-area::before {display: none;}
.popupBg {border: none !important; box-shadow: none !important; background: none !important;}
  .popup-page .testTxt {padding: 20px 35px;}
  body, html {margin: 0; padding: 0; background: white !important;}
  #popup2 {width: 100% !important; background: white !important; box-shadow: none !important;}
  .popup3.popup-page {padding: 40px 40px 60px !important; overflow: visible; margin: 0 auto;}
  .popup3 .testArea .face {margin: 0 5px;}

  .popup-page {display: block !important; width: 100% !important; height: auto !important; background: white !important; page-break-after: always; overflow: visible !important; padding: 20mm !important;}
  .popup-page.cover-page {padding-top: 10mm !important;}
  .cover-main-title {font-size: 82px;}
  /* .popup-page .chart-container {width: 100px !important;} */
  .popup-page .personal-info {display: block !important; margin-bottom: 20px;}
  .prev-btn2, .next-btn2, .close, .background, .page-controls {display: none !important;}
  .bar-graph rect, .radar-chart path, .radar-chart polygon, canvas {background-color: inherit !important; color: inherit !important;}
  .popup-user-info {position: static !important; transform: none !important; right: auto !important; bottom: auto !important; text-align: right;}
  .cover-title-area strong {font-size: 30px;}
  .print-mode .detailRst.flex .chart-container {page-break-inside: avoid; margin-bottom: 15mm;}
  .radar-legend {display: block;}
  canvas {max-width: 90% !important; height: auto !important; }
.canvas-container {width: 100% !important;}
.popup3 .popup-page .detailRst {gap: 0;}
.popup3 .popup-page .detailRst > * {width: 100%;}
.popup3 .cover-description {margin: 50px 0;}
.popup3 .cover-title-area {margin: 120px 0 100px;}
.popup3 .radar-legend > div {font-size: 12px;}
.popup3.popup-page .testTxt, .popup3 .testArea .face {margin: 0 10px;}
.testArea .testTxt .face li {box-shadow: none;}
.cover-title-area::before {display: none;}
}
.page-number {position: absolute; bottom: 30px; left: 30px; font-size: 14px; margin-top: 10px; color: black;}
.page-number2 {text-align: center; margin: 30px 0;}