/*sub*/ #sub {word-break:break-all; word-wrap:break-word;} .editor_view img {display:block; margin:0 auto;} #sub .board_comment ul.btns li a {width:auto; background:none; padding:0; margin:0;} #sub .tablist {margin-bottom:40px;/*! margin-top: 40px; */border-bottom: 1px solid #e5e5e5;} #sub .tablist ul {/*! display:flex; */ /*! justify-content:space-between; */ /*! align-items:stretch; */overflow: auto;-webkit-overflow-scrolling: touch;white-space: nowrap;-ms-overflow-style: none;box-sizing: content-box;display: block;/*! background: #f5f5f5; *//*! padding: 15px; */} #sub .tablist li {/*! display:flex; */ /*! align-items:center; */ /*! justify-content:center; */ background:#f5f5f5; padding:10px; text-align:center; color:#888; font-size:0.9em; /*! width:calc(33.33% - 10px); */font-weight: 500;/*! width: 120px; */position: relative;display: inline-block;margin-right: 1%;border-radius: 10px 10px 0px 0px;} #sub .tablist .item2 li{width:49%} #sub .tablist li.on {background:var(--main_color); color:#fff; font-weight:700;} #sub .subtab {border-left:1px solid #e5e5e5;} #sub .subtab:after {content:''; display:block; clear:both;} #sub .subtab dd {display:inline-block; float:left; text-align:center; border:1px solid #e0e0e0; border-left:0; padding:10px 0; font-size:0.9em; line-height:1.4em; position:relative; background:#f6f7f8;} #sub .subtab dd.line1 {padding:calc(10px + 0.7em) 0;} #sub .subtab dd.on {font-weight:500; background:#fff; border-bottom:0;} #sub .subtab dd.on:before {content:''; display:inline-block; width:100%; height:3px; background:#3b75b9; position:absolute; left:0; top:-1px;} #sub .subtab.item3 dd {width:33.33%;} #sub .box01 {padding:20px 3%; background:#fff; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .box02 {padding:20px 3%; border:5px solid #f6f7f8;} /*#sub .box03 {padding:20px 3%; background:#f6f7f8;border-radius: 10px;}*/ #sub .box04 {padding:20px 3%; background:#e8eff8;} #sub .btns a {background:#f0f0f0; color:#888; display:inline-block; width:140px; padding:1em 0; margin:0 0.2em;} #sub .btns a.type01 {background:#616d7b; color:#fff;} #sub .btns a.type02 {background:#3b75b9; color:#fff;} #sub .subtit01 {padding:5px 10px; background:#616d7b; color:#fff; font-weight:500; font-size:1.1em; display:inline-block; margin:0 0 20px;} #sub .subtit02 {padding:5px 10px; background:#3b75b9; background:var(--main_color); color:#fff; font-weight:500; font-size:1.1em; display:inline-block; /*! margin:0 0 20px; */align-content: center;text-align: center;} #sub .subtit03 {font-weight:700; font-size:1.25em; padding:0 0 10px; border-bottom:1px solid #404040;} #sub .txt_deco01 {padding:0 0.9em; position:relative; display:inline-block;} #sub .txt_deco01:before, #sub .txt_deco01:after {content:''; display:inline-block; width:0.6em; height:0.6em; position:absolute; top:0; background-size:100%; background-repeat:no-repeat;} #sub .txt_deco01:before {background-image:url('../img/ic_txt_deco01_01.png'); left:0;} #sub .txt_deco01:after {background-image:url('../img/ic_txt_deco01_02.png'); right:0;} #sub .txt_deco02 {box-shadow: 0 -0.7em 0 #fff2ab inset; padding: 0 0.1em;} #sub .txt_ref {position:relative; padding-left:1.2em; color:#616d7b; font-size:0.9em;} #sub .txt_ref:before {content:'\f05a'; font-family:'FontAwesome'; display:inline-block; vertical-align:baseline; position:absolute; left:0; top:0;} #sub .txt_check {position:relative; padding-left:1.2em;} #sub .txt_check:before {content:'\f058'; font-family:'FontAwesome'; display:inline-block; vertical-align:baseline; position:absolute; left:0; top:0;} #sub .bg01 {background:#f6f7f8;} #sub .bg02 {background:#f6f7f8;} #sub .bg01, #sub .bg02 {padding:40px 0 40px;} #sub .tab01 {width:100%; border-top:1px solid #616d7b;} #sub .tab01 th, #sub .tab01 td {padding:5px; vertical-align:middle; border-bottom:1px solid rgba(0,0,0,0.05); border-right:1px solid rgba(0,0,0,0.05);} #sub .tab01 th:last-child, #sub .tab01 td:last-child {border-right:0;} #sub .tab01 th.br, #sub .tab01 td.br {border-right:1px solid rgba(0,0,0,0.05);} #sub .tab01 th {background:#f6f7f8; font-weight:500; text-align:center;} #sub .tab01 td {word-wrap: break-word; word-break:break-all; font-size:0.9em;} #sub .tab01 td a.web:after {content:'\f015'; font-family:'FontAwesome'; display:inline-block; width:1.2em; height:1.2em; color:#fff; text-align:center; border-radius:2px; background:#3b75b9;} a.btn{background: var(--main_color); color:#fff; display:block; width:200px; text-align:center; padding:5px;} @media all and (min-width:768px) { #sub .tablist ul{/*! padding: 30px 20px; */} #sub .tablist {margin-bottom:60px;margin-top: 0px;} #sub .tablist li {/*! width:18%; */ /*! margin:0 0.5% 10px; */ line-height:50px; font-size:1em;padding: 5px 15px;} #sub .tablist .item2 li {width:20%;} #sub .tablist .item3 li, #sub .tablist .item5 li {width:20%;} #sub .tablist .item4 li{width:23.5%;} #sub .subtab dd {font-size:1em; padding:15px 0;} #sub .subtab dd.line1 {padding:calc(15px + 0.7em) 0;} #sub .bg01, #sub .bg02 {padding:50px 0 50px;} #sub .tab01 th, #sub .tab01 td {padding:10px;} a.btn{position: absolute; right:0; bottom:-5px} } @media all and (min-width:1080px) { #sub .tablist {margin-bottom:100px;} #sub .tablist li {/*! width:18%; */ margin:0 0.5%; line-height:50px; font-size:1em;padding: 5px 15px;border-radius: 20px 20px 0px 0px;} #sub .tablist .item5 li {width:19%;} #sub .tablist .item7 li {width:13.28%;} #sub .box01, #sub .box02, #sub .box04 {padding:25px;} #sub .bg01, #sub .bg02 {padding:60px 0 60px;} #sub .tab01 td {font-size:1em;} #sub .box02 li{line-height:1.7} } @media all and (min-width:1200px) { #sub .tablist ul{/*! padding: 40px 30px; */} #sub .subtab dd, #sub .subtab dd.line1 {padding:25px 0; font-size:1.1em;} #sub .subtit02 {padding:10px 20px;} a.btn{bottom:0px; right:10px;} } #sub div.null {text-align:center; color:#8994a2;} #sub div.null:before {content:'\f15c'; font-family:'FontAwesome'; font-size:3em; color:#8994a2;} #sub div.null h1 {font-size:1.5em; font-weight:700; color:#616d7b;} #sub div.null p {font-size:0.9em;} /*소개*/ #sub .intro01 h1 {font-size:1.75em; font-weight:700; word-break:break-all; word-wrap:break-word;} #sub .intro01 .img { padding:0 0 30px; text-align:center;} #sub .intro01 .img img {height:100%;width: 100%;border-radius: 10px;} #sub .intro01 p.tar{font-weight:600} #sub .intro02 .info01 {font-size:1.25em; font-weight:700;background: #f8f8f8;padding: 20px;border-radius: 15px;} #sub .intro02 .info02 {/*! margin-bottom: 30px; */border-radius: 15px;} #sub .intro02 .info02:last-child{margin-bottom:0px} #sub .intro02 .info02 h3 {background:#9cc84e; color:#fff; font-size:1.1em; font-weight:600; padding:15px 0;border-radius: 10px;} #sub .intro02 .info02 h3.col02{ background:var(--main_color);color: #fff !important;} #sub .intro02 .info02 h3.col03{ background:#f9b128;color: #fff !important;} #sub .intro02 .info02 li {/*! display:inline-block; */ width:100%; float:left; margin:0 0 10px;display: flex;flex-wrap: wrap;border: 3px solid #f6f7f8;} #sub .intro02 .info02 li:last-child{margin-bottom:0px;} #sub .intro02 .info02 li span{width: 6em;margin-right: 1em;background: #f6f7f8;padding: 10px 5px;display: flex;justify-content: center;align-items: center;font-weight: 500;/*! color: #fff; */border-radius: 5px;} #sub .intro02 .info02 li p {font-weight:500;width: calc(100% - 7em);text-align: left;display: flex;align-items: center;} #sub .intro02 .info02 li:nth-child(3), #sub .intro02 .info02 li:nth-child(4) {margin:0;} #sub .intro02 .info02 li img {width:100%; max-width:70px; margin:0 0 20px;} #sub .intro02 .info03 li {margin:0 0 10px; padding:0 0 20px;} #sub .intro02 .info03 li img {width:100%; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .intro02 .info03 li h3 {margin:20px 0 10px; font-size:1.1em; font-weight:600;} #sub .intro02 .info03 li h3:after {content:''; display:inline-block; width:0.4em; height:0.4em; border-radius:100px; background:#3bb887; margin:0 0 0 0.2em;} #sub .intro02 .info03 li p {font-size:0.9em;} #sub .intro03 .info01 .img {padding:25px; background:url('../img/sub_intro03_img_bg.png') center center / 10px; border:1px solid #e0e0e0; text-align:center; margin-bottom:20px;} #sub .intro03 .info01 .img img {height:180px;} #sub .intro03 .info01 h3 {font-size:1.25em; font-weight:700;} #sub .intro03 .info01 dd {display:inline-block; width:49%; margin:0 2% 0 0; float:left; text-align:center; background:#a9b2bc; color:#fff; line-height:36px; font-size:0.9em;} #sub .intro03 .info01 dd:last-child {margin:0;} #sub .intro03 .info01 dd a {display:block;} #sub .intro03 .info01 li {display:inline-block; width:50%; float:left; text-align:center; margin:0 0 10px;} #sub .intro03 .info01 li div.col {padding:10px 0; font-weight:600; color:#fff; margin:0 0 10px; text-transform:uppercase;} #sub .intro03 .info01 li:nth-child(1) div.col {background:#ffdd00;} #sub .intro03 .info01 li:nth-child(2) div.col {background:#fff200; color:rgba(0,0,0,0.5);} #sub .intro03 .info01 li:nth-child(3) div.col {background:#e2e41a;} #sub .intro03 .info01 li:nth-child(4) div.col {background:#50b848; background:linear-gradient(110deg, #50b848 0%, #00c0f3 100%);} #sub .intro03 .info01 li p {font-size:0.8em; color:#616d7b;} #sub .intro03 .info01 li p b {margin-right:2px;} #sub .intro03 .info02 .img {margin:0 auto 20px; max-width:600px;} #sub .intro03 .info02 .img li {display:inline-block; width:50%; float:left;} #sub .intro03 .info02 .img li p {text-align:center; font-size:0.9em; font-weight:500; color:#616d7b;} #sub .intro03 .info02 h1 {font-size:1.25em; font-weight:700;} #sub .intro03 .info02 ul.tag li {display:inline-block; padding:5px 12px 5px 10px; border-radius:100px; background:#fff; border:1px solid #e0e3e7; color:#939faa; font-size:0.9em; font-weight:500; margin:0 0.3em 10px 0;} #sub .intro03 .info02 ul.tag li:before {content:'#'; margin:0 5px 0 0;} #sub .intro03 .info02 .col li {display:inline-block; width:50%; float:left; text-align:center; margin:0 0 20px;} #sub .intro03 .info02 .col li div {padding:10px 0; font-weight:600; color:#fff; margin:0 0 10px; text-transform:uppercase;} #sub .intro03 .info02 .col li:nth-child(1) div {background:#8DD741;} #sub .intro03 .info02 .col li:nth-child(2) div {background:#FFEE00; color:rgba(0,0,0,0.5);} #sub .intro03 .info02 .col li:nth-child(3) div {background:#FFE6D4; color:rgba(0,0,0,0.5);} #sub .intro03 .info02 .col li:nth-child(4) div {background:#FFB5AB;} #sub .intro03 .info02 .col li:nth-child(5) div {background:#E2E41A;} #sub .intro03 .info02 .col li:nth-child(6) div {background:#5CD4F7; background:linear-gradient(110deg, #5CD4F7 0%, #89E48D 100%);} #sub .intro03 .info02 .col li p {font-size:0.8em; color:#616d7b;} @media all and (min-width:768px) { #sub .intro01 h1 {font-size: 1.85em;margin-bottom: 20px;} #sub .intro01 p{font-size:1.1em} #sub .intro02 .info01 {font-size:1.4em;} #sub .intro02 .info02 h3 { /*! padding:20px 0; */} #sub .intro02 .info02 li {margin-bottom:20px;} #sub .intro02 .info02 li p {font-size:1em; width:100%;text-align: center;padding: 10px 5px;justify-content: center;} #sub .intro02 .info03 li {display:inline-block; width:31.33%; float:left; margin:0 1%;} #sub .intro02 .right.flex{display:flex; flex-wrap:wrap; gap:2%;} #sub .intro02 .right.flex .info02{width:32%;} #sub .intro03 .info01 h3 {font-size:1.5em;} #sub .intro03 .info01 dd {width:140px; margin:0 10px 0 0;} #sub .intro03 .info01 li {width:25%; margin:0;} #sub .intro03 .info02 h1 {font-size:1.5em;} #sub .intro03 .info02 .col li {width:33.33%;} #sub .intro02 .info02 li span {width:100%;margin-right: 0;margin-bottom: 5px;} } @media all and (min-width:1080px) { #sub .intro02 .info01 {/*! font-size:1.75em; */} #sub .intro02 .info02 h3 {font-size:1.15em; padding:20px 5px;} #sub .intro02 .info03 li p {font-size:1em;} #sub .intro03 .info01 .img {margin-bottom:0;} #sub .intro03 .info01 h3 {font-size:1.75em;} #sub .intro03 .info02 .img {margin:0;} #sub .intro03 .info02 h1 {font-size:1.75em;} #sub .intro03 .info02 .col li {width:16.66%;} } /*연혁*/ #sub .history .tab dd {cursor:pointer; display:inline-block; background:#f5f5f5; line-height:40px; padding:0 10px; text-align:center; width:32.33%; margin:0 1.5% 10px 0; color:#888; font-size:0.9em; float:left;} #sub .history .tab dd:nth-child(3n) {margin:0 0 10px;} #sub .history .tab dd.on {background:#8994a2; color:#fff; font-weight:500;} #sub .history h3 {font-size:1.5em; font-weight:700;} #sub .history h3:after {content:''; display:inline-block; width:0.4em; height:0.4em; border-radius:100px; background:#3bb887; margin:0 0 0 0.2em;} #sub .history h5 {border-top:2px solid #616d7b; font-size:1.1em; font-weight:500; padding:10px;} #sub .history h5:after {content:''; display:inline-block; width:0.3em; height:0.3em; border-radius:100px; background:#3b75b9; margin:0 0 0 0.15em;} #sub .history ul {margin:0 0 20px;} #sub .history li {border-bottom:1px solid #e0e0e0; padding:5px 10px 5px 20px; font-size:0.9em; line-height:1.4em; position:relative;} #sub .history li:before {content:''; display:inline-block; width:0.2em; height:0.2em; border-radius:10px; background:#616d7b; position:absolute; left:10px; top:calc(5px + 0.6em);} @media all and (min-width:768px) { #sub .history .tab dd, #sub .history .tab dd:nth-child(3n) {width: calc(14.15% - 10px);margin:0 12px 10px 0;font-size:1em;line-height:50px;} #sub .history .tab dd:last-child {margin:0;} #sub .history h3 {font-size:1.75em;} #sub .history h5 {font-size:1.25em; width:20%; float:left; padding:20px;} #sub .history ul {width:80%; margin:0 0 30px; float:left;} #sub .history li {padding:20px 40px; font-size:1em; border-top:1px solid #e0e0e0; border-bottom:0;} #sub .history li:before {left:20px; top:calc(20px + 0.6em);} } @media all and (min-width:1080px) { #sub .history h3 {font-size:2.25em;} #sub .history h5 {font-size:1.5em;} #sub .history .tab dd, #sub .history .tab dd:nth-child(3n) {width: calc(12.444% - 10px);} } /*조직도*/ #sub .org .org_wrap {text-align:center; font-weight:500; position:relative;} #sub .org .org_wrap:before {content:'';display:inline-block;width:1px;height: 90%;background:#ddd;position:absolute;top:0;left: 50%;z-index:-1;} #sub .org .org_wrap ul {position:relative; margin:0 0 15px;} #sub .org .org_wrap ul.dep03.second{margin-bottom:30px;} #sub .org .org_wrap ul.dep03.second:after{content:'';display:block;background:#ddd;width: 77%;height:1px;bottom: -15px;position: relative;left: 11%;} #sub .org .org_wrap li {padding:5px 0; display:inline-block; float:left; background:#fff; font-size:0.9em;} #sub .org .org_wrap li small{font-size:0.8em;} #sub .org .org_wrap .dep01 li {width:32.5%; background:#9fa8b3; border:1px solid #9fa8b3; color:#fff;} #sub .org .org_wrap .dep01 li:nth-child(2) {width:29%; background:#fff; color:#616d7b; border-color:#c0c6cd; margin:0 3%;} #sub .org .org_wrap .dep01 li:nth-child(2):before {content:''; display:inline-block; width:3%; height:1px; background:#ddd; position:absolute; top:50%; left:32.5%;} /*#sub .org .org_wrap .dep01 li:nth-child(2):after {content:''; display:inline-block; width:3%; height:1px; background:#ddd; position:absolute; top:50%; right:32.5%;}*/ #sub .org .org_wrap .dep01.last li{position:relative; padding: 0;text-align: left;border: 0px;background: #f8f8f8;color: #616d7b;} #sub .org .org_wrap .dep01.last li:before{content:'';display:block;height: 30px;width:1px;background:#ddd;position: absolute;top: -15px;left: 50%;z-index: -9;} #sub .org .org_wrap .dep01.last li h6{background: #616d7b;text-align: center;color: #fff !important;padding: 5px 0px;} #sub .org .org_wrap h1 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); /*#616d7b*/ color:#fff; padding:10px 0; font-weight:600; margin:10px 0; position:relative; font-size:1.1em;} #sub .org .org_wrap .dep01.last li p{padding:15px;} #sub .org .org_wrap .dep02 li {display:inline-block; width:40%; float:left; background:#fff; color:#616d7b; border:1px solid #c0c6cd;} #sub .org .org_wrap .dep02 li:last-child {margin:0 0 0 20%;} #sub .org .org_wrap .dep02 li:last-child:before {content:'';display:inline-block;width: 20%;height:1px;background:#ddd;position:absolute;top:50%;left:40%;} #sub .org .org_wrap .dep02 li:before {content:'';display:inline-block;width: 10%;height:1px;background:#ddd;position:absolute;top:50%;left:40%;} #sub .org .org_wrap .dep02.lay li:before{display:none;} #sub .org .org_wrap .dep03 li {width:29%; margin:0 35.5%; background:var(--main_color); color:#fff;} #sub .org .org_wrap .dep03.second li{background:#ec804b; } #sub .org .org_wrap .dep03.second li:last-child{background:#f9b128 } #sub .org .org_wrap .dep03 li:last-child {margin:10px 35.5% 0;} #sub .org .org_wrap .dep04 li {width:40%; margin:0 0 0 60%; border:1px solid #c0c6cd; color:#616d7b;} #sub .org .org_wrap .dep04 li.lay{border: 0px;position: absolute;top: 36px;left: 0;margin: 0;background: #3b75b9;color: #fff;z-index: 1;} #sub .org .org_wrap .dep04 li:before {content:''; display:inline-block; width:10%; height:1px; background:#ddd; position:absolute; top:50%; left:50%;} #sub .org .org_wrap .dep04 li.lay:before{display:none;} #sub .org .org_wrap .dep05 {margin:0; displaY:flex; flex-wrap:wrap; justify-content:space-between;} #sub .org .org_wrap .dep05:after {display:none;} #sub .org .org_wrap .dep05 li {width:49%; margin:0 0 15px; padding:0; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .org .org_wrap .dep05 li h3 {background:#616d7b; color:#fff; padding:5px 0;} #sub .org .org_wrap .dep05 li dl {background:#fff; padding:5px; font-weight:400; font-size:0.9em;} #sub .org .info01 div.team {-webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .org .info01 h1 {background:#616d7b; color:#fff; text-align:center; padding:0.5em 0; font-weight:600; border-right:5px solid #3bb887;} #sub .org .info01 dl {background:#fff; font-size:0.9em;} #sub .org .info01 dl dd {padding:10px; border-top:1px solid #e1e4e7;} #sub .org .info01 dl dd strong{display:block;margin-bottom:5px;} #sub .org .info01 dl dd:first-child {border-top:0;} #sub .org .info01 ul {display:inline-block; width:calc(100% - 120px); vertical-align:top;} #sub .org .info01 h3 {display:inline-block; width:120px; vertical-align:top; color:#616d7b; font-weight:600; text-align:right;} #sub .org .org_wrap ul.dep02.lay{ margin-top: 50px; } #sub .org .org_wrap .dep02.lay li{position:relative;} #sub .org .org_wrap .dep02.lay li span{display:none;} #sub .org .org_wrap .dep02.lay li:last-child:before{ top: -42%; width: 60%; left: 20%; display: none; } #sub .org .org_wrap .dep02.lay:before{ content: ''; display: inline-block; width: 20%; height: 1px; background: #ddd; position: absolute; top: 50%; left: 40%; top: -33px; width: 60%; left: 20%; } #sub .org .org_wrap .dep02.lay li:after{ display:block; clear:both; content:""; width:1px; height: 35px; position:absolute; top: -34px; left: 50%; background: #dedede; margin-left: -0.5px; } #sub .org .org_wrap .dep02.lay2 li{ background: #ff9329; color: #fff; border: 0px; } #sub .org .org_wrap ul.dep06{ display: flex; } #sub .org .org_wrap ul.dep06 dl{ width: 40%; } #sub .org .org_wrap ul.dep06 dl:last-child{margin-left: 20%;} #sub .org .org_wrap ul.dep06 dl dd{ background: #616d7b; color: #fff; padding: 5px 0; font-weight: 300; font-size: 15px; margin-bottom: 5px; } #sub .org .org_wrap ul.dep06.lay dl dd{ background: #fff; /* border: 1px solid #ddd; */ padding: 0px; } #sub .org .org_wrap ul.dep06.lay{} #sub .org .org_wrap ul.dep06.lay .tlt{ background: #616d7b; display: block; padding: 4px 0; } #sub .org .org_wrap ul.dep06.lay .box{ display: block; background: #fff; color: #444; border: 1px solid #dedede; border-top: 0px; padding: 5px 0; } #sub .org .org_wrap .last{display:flex;flex-wrap:wrap; gap:3%} #sub .org .org_wrap .last li{width: 22.5%;} #sub .org .org_wrap .dep01.last li:nth-child(2){width:22.5%; margin:0} @media all and (min-width:378px) { #sub .org .org_wrap:before{height: 89%;} } @media all and (min-width:768px) { #sub .org .org_wrap h1, #sub .org .org_wrap .dep01, #sub .org .org_wrap .dep02, #sub .org .org_wrap .dep03, #sub .org .org_wrap .dep04 {max-width:1080px; margin:0 auto 15px;} #sub .org .info01 div.team {display:flex;} #sub .org .info01 h1 {width:200px; font-size:1.25em; padding-top:1em; border-right:0; border-bottom:5px solid #3bb887;} #sub .org .info01 dl {width:calc(100% - 200px);} #sub .org .info01 dl dd {padding:20px;} #sub .org .org_wrap .dep02.lay li span{display:inline-block;opacity: 0.8;margin-left: 5px;} } @media all and (min-width:1080px) { #sub .org .org_wrap .dep01 li, #sub .org .org_wrap li, #sub .org .org_wrap .dep01.last li h6{padding:10px 0px;} #sub .org .info01 dl {position:relative;} #sub .org .info01 dl:after {content:''; display:inline-block; width:1px; height:100%; background:#e1e4e7; position:absolute; left:50%; top:0;} #sub .org .info01 .t2 dl:after{height:100%;} #sub .org .info01 dl dd {display:inline-block; width:50%; float:left;} #sub .org .info01 dl dd:nth-child(2) {border-top:0;} #sub .org .info01 dl dd:nth-child(2n+1) {clear:both;} #sub .org .org_wrap .dep02.lay li:after{height: 130px;z-index: -1;} #sub .org .org_wrap ul.dep06 dl{display: flex;width: 50%;justify-content: center;} #sub .org .org_wrap ul.dep06 dl:after{ display:block; clear:both; content:""; width: 210px; height: 1px; background: #dedede; position: absolute; top: -30px; left: 0; left: 105px; } #sub .org .org_wrap ul.dep06 dl:first-child{ position: absolute; top: 0; right: 50%; margin-right: 42px; } #sub .org .org_wrap ul.dep06 dl:last-child{ margin-left: 0px; /* padding-right: 41px; */ position: absolute; top: 0; left: 50%; margin-left: 42px; } #sub .org .org_wrap ul.dep06 dl dd{ width: 95px; margin: 0 5px; position:relative; } #sub .org .org_wrap ul.dep06 dl dd:after { display: block; clear: both; content: ""; width: 1px; height: 30px; position: absolute; top: -30px; left: 50%; background: #dedede; margin-left: -0.5px; } #sub .org .org_wrap ul.dep06{ padding: 0 0%; max-width: 840px; margin: 0 auto 15px; /* position: absolute; */ /* bottom: -49px; */ /* width: 100%; */ height: 31px; margin-top: 66px; } #sub .org .org_wrap:before{height: 56.5%;} } @media all and (min-width:1200px) { #sub .org .org_wrap:before{height: 80%;} #sub .org .org_wrap ul.dep03.second:after{width: 76.5%;left: 11.3%;} #sub .org .org_wrap .dep05 li {width:32.33%;} #sub .org .org_wrap .dep05 li dl {padding:10px;} #sub .org .org_wrap .dep05 li:nth-child(1) dl, #sub .org .org_wrap .dep05 li:nth-child(2) dl {margin-top:10px;} #sub .org .org_wrap:before{ height: 87.5%; } #sub .org .org_wrap ul.dep06{ padding: 0 13%; margin-top: 64px; } #sub .org .org_wrap ul.dep06 dl{} #sub .org .org_wrap ul.dep06 dl:last-child{ margin-left: 3px; position: absolute; width: 500px; } #sub .org .org_wrap ul.dep06 dl:first-child{ /*! padding-right: 13%; */ /*! margin-left: -432px; */ /*! margin-left: 3px; */ /*! position: absolute; */ /*! width: 500px; */ } #sub .org .org_wrap ul.dep06 dl dd{width:120px} #sub .org .org_wrap ul.dep06 dl:after{ left: 80px; width: 260px; } #sub .org .org_wrap ul.dep06 dl:last-child:after{ width: 260px; left: 120px; } } /*오시는 길*/ #sub .map .map_wrap {width:100%;} #sub .map .info01 {position:relative;} #sub .map .info01 h1 {font-size:1.5em; font-weight:700; word-wrap:break-word; line-height:1.25em;} #sub .map .info01 h5 {font-size:1.1em;} #sub .map .info01 h5:before {content:'\f041'; font-family:'FontAwesome'; display:inline-block; margin:0 0.5em 0 0;} #sub .map .info01 li span.label {display:inline-block; width:80px; font-weight:600;} #sub .map .info01 a.btn {color:#fff; background:var(--main_color); line-height:40px; width:100%; text-align:center; display:block; margin:30px 0 0;} #sub .map .info02 .left {margin-bottom:30px;} #sub .map .info02 h5 {font-weight:600; margin:0 0 10px; color:#616d7b;} #sub .map .info02 h5 span {font-size:0.9em; color:#fff; padding:0 0.5em; border-radius:100px; margin:0 0.5em 0 0; font-weight:500;} #sub .map .info02 h5 span.type01 {background:#4ba168;} #sub .map .info02 h5 span.type02 {background:#da5f39;} #sub .map .info02 h5 span.type03 {background:#ebae42;} @media all and (min-width:480px) { #sub .map .info01 a.btn {display:inline-block; width:120px; line-height:40px; width:120px; position:absolute; right:0; bottom:0; margin:0;} } @media all and (min-width:768px) { #sub .map .info01 h1 {font-size:1.75em;} #sub .map .info01 h5 {font-size:1.25em;} #sub .map .info01 li {font-size:1.1em;} } @media all and (min-width:1080px) { #sub .map .info01 h1 {font-size:2em;} #sub .map .info01 h5 {font-size:1.35em;} #sub .map .info02 .left {margin-bottom:0;} } /*지역소개 - 전체보기*/ #sub .mapwrap {position:relative} #sub .mapwrap .map_tit h1 {font-size:1.5em; font-weight:700;} #sub .mapwrap .map_tit h3 {font-size:1.1em;} #sub .mapwrap .map_area {position:relative; display:block; margin:0 auto 30px; max-width:600px;} #sub .mapwrap:after {content:''; display:block; clear:both} #sub .mapwrap .map_area img {width:100%;} #sub .mapwrap .map_link{position:absolute; left:0; top:0; right:0; bottom:0; margin:auto; z-index:1;} #sub .mapwrap .map_link li {position:absolute; font-weight:500; padding:3px 10px; background:#fff; border-radius:500px; font-size:0.8em; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mapwrap .map_link li.on {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); font-weight:600; color:#fff;} #sub .mapwrap .map_link li.gn00 {left:56%; top:54%} #sub .mapwrap .map_link li.gn01 {left:29%; top:54%} #sub .mapwrap .map_link li.gn02 {left:42%; top:80%} #sub .mapwrap .map_link li.gn03 {left:25%; top:67%} #sub .mapwrap .map_link li.gn04 {left:72%; top:46%} #sub .mapwrap .map_link li.gn05 {left:67%; top:31%} #sub .mapwrap .map_link li.gn06 {left:58%; top:75%} #sub .mapwrap .map_link li.gn07 {left:82%; top:37%} #sub .mapwrap .map_link li.gn08 {left:37%; top:38%} #sub .mapwrap .map_link li.gn09 {left:46%; top:46%} #sub .mapwrap .map_link li.gn10 {left:50%; top:28%} #sub .mapwrap .map_link li.gn11 {left:40%; top:68%} #sub .mapwrap .map_link li.gn12 {left:17%; top:85%} #sub .mapwrap .map_link li.gn13 {left:7%; top:60%} #sub .mapwrap .map_link li.gn14 {left:15%; top:39%} #sub .mapwrap .map_link li.gn15 {left:3%; top:25%} #sub .mapwrap .map_link li.gn16 {left:14%; top:10%} #sub .mapwrap .map_link li.gn17 {left:30%; top:26%} #sub .mapwrap .active_map {position:absolute; left:0; top:0; right:0; bottom:0; margin:auto;} #sub .mapwrap .active_map ul li {opacity:0; position:absolute; transition:0.3s; width:100%; heignt:100%;} #sub .mapwrap .active_map ul li span {position:absolute; right:0; top:50px; font-size:1.5em; font-weight:500; letter-spacing:-2px; display:none;} #sub .mapwrap .active_map ul li.on {opacity:1 !important; transition:0.3s} #sub .map_list li {display:block; vertical-align:middle; width:23%; margin:0 1%; float:left; margin-bottom:10px; font-size:0.95em;} #sub .map_list:after {clear:both; display:block; content:'';} #sub .map_list li a {display:block; text-align:center; line-height:40px; height:40px; background:#f0f0f0; border-radius:100px;} #sub .map_list li.current a {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-weight:500;} #sub .map_board_list {position:relative; padding:20px 15px; background:#f0f6fa; border-radius:10px;} #sub .map_board_list h4 {color:#21325b; font-weight:700; font-size:1.2em; margin-bottom:10px;} #sub .map_board_list p {margin-bottom:20px; position:relative; padding-left:30px;} #sub .map_board_list p:before {content:'\f00c'; font-family:'FontAwesome'; display:block; position:absolute; left:0px; top:3px; font-size:15px; width:15px; height:15px; background:#ffffff; line-height:15px; text-align:center; border-radius:500px; color:#25255e;} @media all and (min-width:640px) { #sub .map_list li {width:12.28%;} } @media all and (min-width:768px) { #sub .mapwrap .map_tit h1 {font-size:1.75em;} #sub .map_link li {font-size:1em;} #sub .map_board_list h4 {font-size:1.4em;} #sub .map_board_list {border-radius:30px; padding:30px;} } @media all and (min-width:1080px) { #sub .mapwrap .map_tit h1 {font-size:2em;} #sub .mapwrap .map_tit h3 {font-size:1.25em;} #sub .map_list li {width:23%; font-size:1em;} #sub .map_list li a {line-height:45px; height:45px;} #sub .mapwrap .right {text-align:right;} #sub .mapwrap .map_area {display:inline-block; width:600px; margin:0;} #sub .map_board_list h4 {font-size:1.6em;} #sub .map_board_list p {font-size:1.1em; margin-bottom:30px;} #sub .map_board .map_board_list {float:left; width:47%; margin-right:3%; padding:60px 50px;} } /*지역소개*/ #sub .center .info01 li {display:inline-block; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); background:#fff; text-align:center; padding:5px 0; display:block; margin:0 0 10px; font-weight:500;} #sub .center .info01 li.dep {width:100%;} #sub .center .info01 li.dep dl {margin:20px 5% 0;} #sub .center .info01 li.dep dd {display:inline-block; width:48%; margin:0 1% 10px; float:left; font-weight:400; background:#aab2bc; background:linear-gradient(110deg, #aab2bc 60%, #9fa8b3 100%); color:#fff; padding:5px 0;} #sub .center .tab dd {cursor:pointer; display:inline-block; background:#f5f5f5; padding:10px; text-align:center; width:48%; margin:0 2% 10px 0; color:#888; font-size:0.9em; float:left;} #sub .center .tab dd:nth-child(2) {margin:0 0 10px;} #sub .center .tab dd.on {background:#8994a2; color:#fff; font-weight:500;} #sub h2.cat_name {font-size:1.1em; font-weight:600; padding:0 0 0 0.8em; background:#7e8a99; color:#fff; display:inline-block; padding:0.2em 1em; border-radius:100px;} #sub .center .board_ul {border-top:1px solid #616d7b;} #sub .center .board_ul li {border-bottom:1px solid rgba(0,0,0,0.05); display:flex; flex-wrap:wrap; align-items:center; padding:10px;} #sub .center .board_ul li:nth-child(odd) {background:#f6f7f8;} #sub .center .board_ul li.title_li {display:none;} #sub .center .board_ul li:not(.title_li) span.cate {color:#3b75b9;} #sub .center .board_ul li:not(.title_li) span.title {font-weight:500;} #sub .center .board_ul li .boardInfo {display:flex; flex-wrap:wrap; width:100%;} #sub .center .board_ul li span.add {width:100%;} #sub .center .board_ul li span.website {margin-left:auto;} #sub .center .board_ul li span.website a {font-size:0.9em; display:flex; justify-content:center;} #sub .center .board_ul li span.website a:after {content:'\f109'; font-family:'FontAwesome'; display:inline-block; width:24px; height:24px; font-size:14px; background:#3b75b9; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;} @media all and (min-width:640px) { #sub .center .info01 li {width:48%; margin:0 1% 15px; float:left; padding:10px 0;} #sub .center .info01 li.dep {width:98%;} #sub .center .board_ul li span.add {width:auto; margin-right:1em;} } @media all and (min-width:768px) { #sub .center .tab dd {width:32.33%; margin:0 1.5% 0 0; font-size:1em;} #sub .center .tab dd:nth-child(2) {margin:0 1.5% 0 0;} #sub .center .tab dd:nth-child(3) {margin:0;} } @media all and (min-width:1200px) { #sub .center .info01 li {font-size:1.1em;} #sub .center .info01 li.dep dd {width:31.33%; font-size:0.9em;} #sub .center .tab dd {line-height:50px; padding:0 10px;} #sub .center .board_ul li {display:flex;} #sub .center .board_ul li:nth-child(odd) {background:0;} #sub .center .board_ul li.title_li {display:flex; background:#f6f7f8;} #sub .center .board_ul li .board_h5, #sub .center .board_ul li h5 {width:40%; display:flex;} #sub .center .board_ul li .boardInfo {width:60%; display:flex;} #sub .center .board_ul li span {text-align:center;} #sub .center .board_ul li span.cate {width:60px;} #sub .center .board_ul li span.title {width:calc(100% - 60px);} #sub .center .board_ul li span.add {width:70%; margin-right:0;} #sub .center .board_ul li:not(.title_li) span.add {text-align:left;} #sub .center .board_ul li span.tel {width:20%;} #sub .center .board_ul li span.website {width:10%; margin-left:0;} } /*마음단디정보 - 정신건강정보*/ #sub .mental .opening {margin-bottom:80px;} #sub .mental .opening h1 {font-size:1.25em; font-weight:600;} #sub .mental .mental_top {border-top:10px solid #f5f5f5; border-bottom:10px solid #f5f5f5; padding:20px 0; position:relative;} #sub .mental .mental_top .img {position:absolute; right:0; top:-20px; width:80px; background:#fff;} #sub .mental .mental_top .txt h1 {font-size:1.75em; font-weight:700; color:#333; line-height:40px; margin:0 0 30px; position:relative;} #sub .mental .mental_top .txt h1:after {content:''; display:inline-block; width:0.4em; height:0.4em; border-radius:100px; background:#3b75b9; margin:0 0 0 0.2em;} #sub .mental .mental_top .txt h3 {font-weight:600; margin:0 0 10px;} #sub .mental .mental_top .txt p span.label {display:inline-block; padding:0 0.7em; background:#616d7b; color:#fff; margin:0 0.3em 0 0; font-weight:500; border-radius:100px; font-size:0.9em;} #sub .mental .ref {padding:20px 3%; border:1px solid rgba(0,0,0,0.1);} #sub .mental .ref h5 {font-weight:600; color:#616d7b; margin:0 0 10px;} #sub .mental p span.num {display:inline-block; background:#616d7b; color:#fff; width:1.2em; height:1.2em; border-radius:100px; vertical-align:baseline; text-align:center; line-height:1.2em; font-weight:500; font-size:0.9em; margin:0 0.1em;} #sub .mental .info01:after {content:''; display:block; clear:both;} #sub .mental .info01 .item {margin:0 0 20px;} #sub .mental .info01 .item:last-child {margin-bottom:0;} #sub .mental .info01 .item h3 {font-size:1.1em; font-weight:600; background:#aab2bc; background:linear-gradient(110deg, #aab2bc 60%, #9fa8b3 100%); padding:5px 10px; color:#fff;text-align: center;} #sub .mental .info01 .item p{background:#f6f7f8; padding:15px;} #sub .mental .info02 li {display:inline-block; padding:5px 10px 5px calc(15px + 1em); border-radius:20px; background:#fff; background:#ebedf0; font-weight:400; margin:0 0.3em 10px 0; position:relative;} #sub .mental .info02 li:last-child{margin:0} #sub .mental .info02.sm li {padding:10px 20px 10px 35px; } #sub .mental .info02.sm li:before {content:'\f00c'; font-family:'FontAwesome'; display:inline-block; color:#616d7b; position:absolute; left:10px; top:10px;} #sub .mental .info02 li:before {content:'\f00c'; font-family:'FontAwesome'; display:inline-block; color:#616d7b; position:absolute; } #sub .mental .info02 li.w100{width:100% !important;} .response .info02 li:before{left:10px;} @media all and (min-width:768px) { #sub .mental .mental_top {padding:30px 0;} #sub .mental .mental_top .img {width:100px; top:-30px;} #sub .mental .mental_top .txt h1 {font-size:2em;} #sub .mental .mental_top .txt h3 {font-size:1.1em;} #sub .mental .info01 .item {display:inline-block; width:48%; margin:0 1% 20px; float:left;} #sub .mental .info01 .item:nth-child(odd) {clear:both;} } @media all and (min-width:960px) { #sub .mental .mental_top .img {float:right; width:140px; position:relative; right:auto; top:-50px;} #sub .mental .mental_top .txt {float:left; width:calc(100% - 180px);} #sub .mental .mental_top .txt h3 {font-size:1.25em;} } @media all and (min-width:1080px) { #sub .mental .opening h1 {font-size:1.5em;} #sub .mental .mental_top {padding:40px 0;} #sub .mental .mental_top .txt h1 {font-size:2.5em; margin:0 0 50px;} #sub .mental .mental_top .txt p {font-size:1.1em;} #sub .mental .ref {padding:20px;} #sub .mental .info01 .item {display:inline-block; width:48%; margin:0 1% 20px; float:left;} #sub .mental .info01 .item:nth-child(odd) {clear:both;} #sub .mental .info01 .item h3 {font-size:1.2em;} } /*마음단디정보 - 정신건강정보 - 스트레스*/ #sub .mental .info0101 li {background:#fff; text-align:center; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0101 li:last-child {margin:0;} #sub .mental .info0101 h3 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:5px 0;} #sub .mental .info0101 h3 small {font-weight:400;} #sub .mental .info0101 h5 {font-size:1.1em; font-weight:600; padding:20px 0 10px;} #sub .mental .info0101 p {padding:0 3% 20px;} #sub .mental .info0102 li {margin-bottom:20px;} #sub .mental .info0102 li:last-child {margin-bottom:0;} #sub .mental .info0102 li h3 {font-size:1.1em; font-weight:600; margin:0 0 10px;} #sub .mental .info0102 li h3:before {content:'\f118'; font-family:'FontAwesome'; display:inline-block; margin:0 5px 0 0;} #sub .mental .info0102 li:last-child h3:before {content:'\f119';} #sub .mental .info0102 li dl {background:#fff; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); padding:0 10px;} #sub .mental .info0102 li dd {border-bottom:1px solid #e0e0e0; padding:10px 0;} #sub .mental .info0102 li dd:last-child {border-bottom:0;} #sub .mental .info0102 li dd:first-child:before {display:none;} #sub .mental .info0102 li dd:before {content:'\f0a9'; font-family:'FontAwesome'; display:inline-block; color:#616d7b; margin:0 5px 0 0;} @media all and (min-width:768px) { #sub .mental .info0101 li {display:inline-block; width:49%; margin:0 2% 0 0; float:left;} #sub .mental .info0102 li {display:inline-block; width:48%; margin:0 1% 20px; float:left;} #sub .mental .info0102 li h3 {margin:0 0 20px; font-size:1.25em;} } @media all and (min-width:1080px) { #sub .mental .info0101 h3 {font-size:1.5em;} #sub .mental .info0101 h5 {font-size:1.25em;} } /*마음단디정보 - 정신건강정보 - 우울*/ #sub .mental .info0201 li {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); padding:10px 3%;} #sub .mental .info0201 li:nth-child(6) {/*! margin-bottom:0; */} #sub .mental .info0201 li h3 {color:var(--main_color); font-size:1.1em; font-weight:600; margin:0 0 10px;} #sub .mental .info0201 li h3:before {content:'\f058'; font-family:'FontAwesome'; display:inline-block; vertical-align:baseline; margin:0 5px 0 0;} #sub .mental .info0201 li:nth-child(5) h3, #sub .mental .info0201 li:nth-child(6) h3, #sub .mental .info0201 li:nth-child(7) h3{margin-bottom:0px} @media all and (min-width:768px) { #sub .mental .info0201 li {display:inline-block; width:48%; padding:20px; margin:0 1% 20px; float:left;} #sub .mental .info0201 li:nth-child(odd) {clear:both;} #sub .mental .info0201 li:nth-child(7) {margin-bottom:0;} #sub .mental .info0201 li h3 {font-size:1.2em;} } @media all and (min-width:1080px) { } /*마음단디정보 - 정신건강정보 - 불안*/ #sub .mental .info0301 li {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0301 li:last-child {margin:0;} #sub .mental .info0301 h3 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:5px 0; text-align:center;} #sub .mental .info0301 p {padding:10px 3%;} #sub .mental .info0302 li {text-align:center; display:inline-block; width:48%; margin:0 1%; float:left;} #sub .mental .info0302 li img {width:100%; max-width:160px;} #sub .mental .info0302 li p {margin:10px 0 0; font-size:0.9em;} @media all and (min-width:768px) { #sub .mental .info0301 li {display:inline-block; width:49%; margin:0 2% 0 0; float:left;} #sub .mental .info0302 li {width:31.33%;} #sub .mental .info0302 li:nth-child(3n+1) {clear:both;} } @media all and (min-width:1080px) { #sub .mental .info0301 h3 {font-size:1.5em;} #sub .mental .info0302 li {width:19%; margin:0 1.25% 0 0;} #sub .mental .info0302 li:nth-child(3n+1) {clear:none;} #sub .mental .info0302 li:last-child {margin:0;} } /*마음단디정보 - 정신건강정보 - 조현병*/ #sub .mental .info0401 dd {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0401 dd:last-child {margin:0;} #sub .mental .info0401 h3 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:5px 0; text-align:center;} #sub .mental .info0401 ul {padding:0 20px 20px;} #sub .mental .info0401 ul.info02 {padding:20px 20px 0;} @media all and (min-width:768px) { #sub .mental .info0401 dd {display:inline-block; width:49%; margin:0 2% 0 0; float:left;} } @media all and (min-width:1080px) { #sub .mental .info0401 h3 {font-size:1.5em;} } /*마음단디정보 - 정신건강정보 - 양극성장애*/ #sub .mental .info0501 li {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0501 li:last-child {margin:0;} #sub .mental .info0501 h3 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:5px 0; text-align:center;} #sub .mental .info0501 p {padding:10px 3%;} @media all and (min-width:768px) { #sub .mental .info0501 li {display:inline-block; width:49%; margin:0 2% 0 0; float:left;} } @media all and (min-width:1080px) { #sub .mental .info0501 h3 {font-size:1.5em;} } /*마음단디정보 - 정신건강정보 - 알코올중독*/ #sub .mental .info0601 dd {margin:0 0 20px;} #sub .mental .info0601 dd:last-child {margin-bottom:0;} #sub .mental .info0601 dd h3 {font-size:1.1em; font-weight:600; color:#3b75b9; margin:0 0 20px;} #sub .mental .info0601 dd h3 span.num {display:inline-block; width:1.2em; height:1.2em; line-height:1.2em; background:#3b75b9; color:#fff; text-align:center; font-size:0.9em; margin:0 5px 0 0; border-radius:2px; vertical-align:text-bottom;} @media all and (min-width:768px) { #sub .mental .info0601 dd {display:inline-block; width:48%; margin:0 1% 20px; float:left;} #sub .mental .info0601 dd:nth-child(odd) {clear:both;} #sub .mental .info0601 dd h3 {font-size:1.25em;} } @media all and (min-width:1080px) { } /*마음단디정보 - 정신건강정보 - 아동청소년*/ #sub .mental .info0701 {position:relative;} #sub .mental .info0701 img {float:right; width:100px; border-radius:500px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 5%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 5%);} #sub .mental .info0701 .txt {float:left; width:calc(100% - 120px); word-break:break-all; word-wrap:break-word;} #sub .mental .info0701 .txt h1 {font-size:1.25em; font-weight:700; color:#333; margin:0 0 20px;} #sub .mental .info0701 .txt h1 small {font-weight:500;} #sub .mental .info0702 dd {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0702 dd:last-child {margin-bottom:0;} #sub .mental .info0702 dd h3 {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:5px 0; text-align:center;} #sub .mental .info0702 dd ul {padding:20px;} #sub .mental .info0703 dd {background:#fff; margin:0 0 10px; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%);} #sub .mental .info0703 dd:last-child {margin-bottom:0;} #sub .mental .info0703 dd h3 {font-size:1.1em; font-weight:500; background:#aab2bc; background:linear-gradient(110deg, #aab2bc 60%, #9fa8b3 100%); padding:5px 10px; color:#fff;} #sub .mental .info0703 dd ul {padding:20px;} @media all and (min-width:768px) { #sub .mental .info0701 {min-height:160px;} #sub .mental .info0701 img {float:left; width:120px;} #sub .mental .info0701 .txt {float:right; width:calc(100% - 140px);} #sub .mental .info0701 .txt h1 {font-size:1.75em;} #sub .mental .info0702 dd {display:inline-block; width:31.33%; float:left; margin:0 1%;} #sub .mental .info0703 dd {display:inline-block; width:31.33%; float:left; margin:0 1%;} #sub .mental .info0703 dd h3 {font-size:1.25em;} } @media all and (min-width:1080px) { #sub .mental .info0701 .txt h1 {font-size:2em;} #sub .mental .info0702 dd h3 {font-size:1.5em;} } /*마음단디정보 - 정신건강검진*/ #sub .mtest .mtest_tit h1 {font-size:1.5em; font-weight:700;} #sub .mtest .mtest_tab {text-align:center; margin:10px 0;} #sub .mtest .mtest_tab dd {display:inline-block; width:40%; cursor:pointer; margin:0 0 20px;} #sub .mtest .mtest_tab dd:nth-child(3), #sub .mtest .mtest_tab dd:nth-child(4) {margin:0;} #sub .mtest .mtest_tab dd img {width:80%; max-width:160px; background:#fff; border-radius:500px; margin:0 0 20px; transition:0.2s; box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.1);} #sub .mtest .mtest_tab dd.on img {background:#aab2bc; background:linear-gradient(110deg, #aab2bc 60%, #9fa8b3 100%);} #sub .mtest .mtest_tab dd h3 {font-size:1.1em; font-weight:600;} #sub .mtest .mtest_tab dd h3 span {position:relative; padding:0 0.2em 10px;} #sub .mtest .mtest_tab dd h3 span:after {content:''; display:inline-block; width:0; height:4px; background:#3b75b9; position:absolute; left:0; bottom:0; transition:0.2s;} #sub .mtest .mtest_tab dd:hover img {transform:translateY(-5px); box-shadow:0px 10px 20px 2px rgba(0, 0, 0, 0.05);} #sub .mtest .mtest_tab dd:hover h3 span:after {width:100%;} #sub .mtest .mtest_tab dd.on h3 span:after {width:100%;} #sub .mtest .mtest_cont {text-align:center; padding:30px 3%; background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff;} #sub .mtest .mtest_list {width:100%; max-width:640px; margin:0 auto; text-align:left;} #sub .mtest .mtest_list.item1 li {width:100%; margin:0;} #sub .mtest .mtest_list li {display:inline-block; width:100%; margin:0 0 10px; border:1px solid #fff; border-radius:2px; line-height:40px; transition:0.2s; text-align:center;} #sub .mtest .mtest_list li:hover {background:#fff; color:#3b75b9; font-weight:600;} #sub .mtest .mtest_list li a {display:block;} #sub .mtest .mtest_list li a[target="_blank"]:after {font-family:'FontAwesome'; font-size:0.8em; display:inline-block; content:"\f08e"; margin:0 0 0 5px; vertical-align:middle;} #sub .mtest h3.tit {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; text-align:center; padding:5px 0; font-size:1.1em; font-weight:500; margin:0 0 20px;} #sub .mtest .mtest_info li {line-height:36px; margin:0 0 10px;} #sub .mtest .mtest_info li:after {content:''; display:block; clear:both;} #sub .mtest .mtest_info li .fm_list {display:inline-block; width:70px; float:left; font-weight:500;} #sub .mtest .mtest_info li .fm_txt {display:inline-block; width:calc(100% - 70px); float:left;} #sub .mtest .mtest_info li .btn_change input[type="radio"] {display:none;} #sub .mtest .mtest_info li .btn_change input[type="radio"] + label {display:inline-block; padding:0 1em; background:#fff; border:1px solid #616d7b; color:#616d7b; font-weight:500;} #sub .mtest .mtest_info li .btn_change input[type="radio"]:checked + label {background:#616d7b; color:#fff;} #sub .mtest .mtest_info li input[type="text"] {border:0; border-bottom:2px solid #616d7b; background:0; width:80px;} #sub .mtest .mtest_info li select {display:inline-block; padding:0 1em; background-color:#fff; border:1px solid #616d7b; color:#616d7b; font-weight:500; min-width:150px;} #sub .mtest .mtest_test li {/* padding:20px 3%; *//* background:#fff; *//* -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); *//* box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); *//* margin:0 0 20px; */} #sub .mtest .mtest_test li .cont.check{ display: flex; flex-wrap: wrap; } #sub .mtest .mtest_test li .cont.check .txt3{ margin-top: 5px; } #sub .mtest .mtest_test li .cont.check input{width:100%;} .flexBox{display:flex;flex-wrap: wrap;} #sub .mtest .mtest_test li .cont.check span{width:50%;margin-bottom: 5px;} #sub .mtest .mtest_test li:after {content:''; display:block; clear:both;} #sub .mtest .mtest_test li .txt {margin:0 0 20px; padding-left:2em; position:relative;} #sub .mtest.lay .mtest_test li .txt {margin:0 0 20px;padding-left: 0px;position:relative;font-size: 17px;font-weight: 500;margin-bottom: 10px;/* padding-left: 34px; *//* position: relative; */line-height: 1.4;} #sub .mtest .mtest_test li .txt span.num {display:inline-block; width:1.6em; height:1.6em; background:#3bb887; color:#fff; text-align:center; font-weight:600; border-radius:100px; line-height:1.6em; position:absolute; left:0; top:0;} #sub .mtest .mtest_test li .txt span.tit {font-weight:500; line-height:1.6em;} #sub .mtest .mtest_test li dl {display:flex; align-items:stretch; justify-content:space-between;} #sub .mtest .mtest_test li .check dd {font-size:0.9em; text-align:center; color:#616d7b;} #sub .mtest .mtest_test .item2 li .check dd {width:49%;} #sub .mtest .mtest_test .item4 li .check dd {width:24%;} #sub .mtest .mtest_test .item5 li .check dd {width:19%;} #sub .mtest .mtest_test li .check.item3 dd {width:32.33%;} #sub .mtest .mtest_test li .check dd:last-child {margin-right:0;} #sub .mtest .mtest_test li .check dd input[type="radio"] {display:none;} #sub .mtest .mtest_test li .check dd input[type="radio"] + label {display:flex; line-height:1.1em; padding:0.5em 0; border:1px solid #aab2bc; height:100%; align-items:center; justify-content:center;} #sub .mtest .mtest_test li .check dd input[type="radio"]:checked + label {background:#616d7b; border-color:#616d7b; color:#fff;} #sub .mtest .mtest_result {text-align:center; background:#f6f7f8;} #sub .mtest .mtest_result h1.tit {background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; font-size:1.25em; font-weight:600; padding:0.5em 0; text-align:center;} #sub .mtest .mtest_result h1.tit span.score {color:#e2e41a;} #sub .mtest .mtest_result div.txt {padding:20px 3%; width:90%; margin:0 auto;} #sub .mtest .mtest_result div.txt h3 {font-size:1.1em; font-weight:600; margin:0 0 10px;} #sub .mtest .mtest_result .links {text-align:center; padding:0 0 60px;} #sub .mtest .mtest_result .links li {display:inline-block; width:20%; vertical-align:top; margin:0 1% 20px;} #sub .mtest .mtest_result .links li img {width:80%; max-width:70px; margin:0 0 10px; background:#d6dadf; padding:10px; border-radius:100px;} #sub .mtest .mtest_result .links li:hover img {background:#c0c6cd;} #sub .mtest .mtest_result .links li p {color:#333; line-height:1.25em; font-size:0.9em;} .input-tlt{ font-weight: 600; font-size: 20px; margin-bottom: 15px; } .mtest .write_apply{ font-size: 14px; } .comm_table{ border-left: 1px solid #dedede; border-bottom: 1px solid #dedede; width: 100%; } .comm_table th{background:#f8f8f8;border-top: 1px solid #000;border-right: 1px solid #dedede;padding: 10px;} .comm_table td{ border-right: 1px solid #dedede; padding: 10px; } .agree_check{} .agree_check label{ /* font-size: 15px; */ font-weight: 500; } .reserve_box {background:#fff; padding:30px 3%; text-align:left;} .reserve_box .btn_change input[type="text"] {display:none;} .reserve_box .btn_change input[type="radio"]:checked + label + input[type="text"] {display:inline-block;} .reserve_box .agreebox {background:#fff; padding:20px 3%; border:1px solid #e0e0e0; width:100%; height:150px; overflow-y:scroll;} .reserve_box .agreebox h5 {font-weight:600; font-size:1.1em;} .reserve_box .agree_check {background:#fff; border:1px solid #e0e0e0; border-top:0; padding:10px 3%;} .reserve_box .agree_check.bt {border-top:1px solid #e0e0e0;} .reserve_box .agree_check input[type="checkbox"] {display:none;} .reserve_box .agree_check input[type="checkbox"] + label:before {content:'\f058'; font-family:'FontAwesome'; display:inline-block; vertical-align:baseline; margin:0 0.5em 0 0; font-size:1.25em; color:#9ea9b3;} .reserve_box .agree_check input[type="checkbox"]:checked + label:before {color:#3b75b9;} .reserve_box .btns a {background:#f0f0f0; color:#888; display:inline-block; width:140px; padding:1em 0; margin:0 0.2em;} .reserve_box .btns a.type01 {background:#616d7b; color:#fff;} .reserve_box .btns a.type02 {background:#3b75b9; color:#fff;} @media all and (min-width:768px) { #sub .mtest .mtest_tit h1 {font-size:1.75em;} #sub .mtest .mtest_tab {margin:20px 0;} #sub .mtest .mtest_tab dd {width:25%; float:left; margin:0;} #sub .mtest .mtest_cont {padding:40px 20px;} #sub .mtest .mtest_list li {width:48%; margin:0 1% 10px; float:left;} #sub .mtest .mtest_info li {display:inline-block; width:33.33%; float:left;} #sub .mtest .mtest_result h1.tit {font-size:1.5em;} #sub .mtest .mtest_result div.txt {padding:40px;} #sub .mtest .mtest_result div.txt h3 {font-size:1.25em;} #sub .mtest .mtest_result .links li {width:140px; margin:0 1%;} .reserve_box .agreebox {padding:30px 20px;} .reserve_box .agree_check {padding:15px 20px;} } @media all and (min-width:1080px) { #sub .mtest .mtest_tit h1 {font-size:2em;} #sub .mtest .mtest_list li {width:31.33%;} #sub .mtest h3.tit {margin:0; width:80%; max-width:120px;} #sub .mtest .mtest_info li {width:auto; margin:0 50px 0 0;} #sub .mtest .mtest_test li {padding:30px;} #sub .mtest .mtest_test li .txt {display:inline-block; width:40%; float:left; margin:5px 0 0 0;} #sub .mtest.lay .mtest_test li .txt{ width: 30%; } #sub .mtest.lay .mtest_test li .cont{width: calc(70% - 30px);} #sub .mtest .mtest_test li .check {display:inline-block; width:calc(60% - 30px); margin:0 0 0 30px; float:left;} #sub .mtest .mtest_test li .cont.check{ display: flex; flex-wrap: wrap; } .flexBox{ width: 100%; display: flex; flex-wrap: nowrap; } #sub .mtest .mtest_test .item2 li .txt {width:60%;} #sub .mtest .mtest_test .item2 li .check {width:calc(40% - 30px);} #sub .mtest .mtest_result h1.tit {font-size:1.75em;} #sub .mtest .mtest_result div.txt h3 {font-size:1.5em;} } /*온라인상담*/ #sub .qna .info01 h1 {font-size:1.25em; font-weight:600;} #sub .qna a.qna {display:inline-block; width:60%; max-width:180px; background:#3bb887; color:#fff; line-height:50px; font-weight:500;} #sub .qna a.qna:after {font-family:'FontAwesome'; content:"\f105"; margin-left:0.5em;} /*뉴스레터*/ .newsletter_apply {background:#f4f4f4 url('../img/sub_newsletter_img.png') no-repeat right top / auto 0px; padding:20px 3%; text-align:center;} .newsletter_apply h1 {font-size: 1.25em; font-weight:700; margin:0 0 0.2em;} .newsletter_apply h3 {font-size:0.8em; margin:0 0 1em;} .newsletter_apply input[type="text"] {width:70%; line-height:45px; height:45px;} .newsletter_apply button { background:#3b75b9; border-color:#3b75b9; color:#fff; line-height:45px; height:45px;} .newsletter_apply .cbox{display:block; text-align:center; margin-top:10px; font-size:0.8em; font-weight:400; color: #666;} .clearfix .newsletter.left {width:100%; text-align:center;} .clearfix .newsletter.right {width:100%; display:block; text-align:center;} @media all and (min-width:768px) { .newsletter_apply {padding:30px;} .newsletter_apply h1 {font-size:1.5em;} .newsletter_apply h3 {font-size:1em;} .newsletter_apply .cbox{font-size:1em;} .clearfix .newsletter.right {padding:0 20%;} } @media all and (min-width:1080px) { .newsletter_apply {text-align:left; background-size:20%;} .newsletter_apply h1 {font-size:1.75em; line-height:50px; margin:0;} .newsletter_apply h3 {line-height:30px; margin:0;} .newsletter_apply input[type="text"], .newsletter_apply button {line-height:50px; height:50px; margin:15px 0 0;} } @media all and (min-width:1200px) { .newsletter_apply {background-position:100% top;} } /*마음안심버스*/ #sub .bus .tit {position:relative; height:24vw; max-height:200px; padding-right:40%;} #sub .bus .tit.no_img {height:auto; max-height:240px; padding-right:0;} #sub .bus .tit.apply {height:auto; max-height:1000px; padding-right:0;} #sub .bus .tit .br {display:block;} #sub .bus .tit h1 {font-size:1.5em; font-weight:700; line-height:1.25em;} #sub .bus .tit h1:after {content:''; display:inline-block; width:0.4em; height:0.4em; border-radius:100px; background:#3bb887; margin:0 0 0 0.2em;} #sub .bus .tit img {width:50%; max-width:400px; position:absolute; top:-1vw; right:0; z-index:-1;} /*#sub .bus .info01 li {text-align:center; margin:0 0 20px;} #sub .bus .info01 li:last-child {margin-bottom:0;} #sub .bus .info01 li img {display:block; width:50%; max-width:70px; margin:0 auto 10px;} #sub .bus .info01 li span.num {display:inline-block; width:1.4em; height:1.4em; color:#fff; border-radius:100px; line-height:1.4em; font-weight:600; background:#3bb887;} #sub .bus .info01 li h3 {font-size:1.1em; font-weight:600; margin:0 0 10px;}*/ #sub .bus .info01 li {margin:0 0 20px; padding:20px 0; border-bottom:1px dotted #aaa; position:relative;} #sub .bus .info01 li:last-child {margin-bottom:0; padding-bottom:0; border-bottom:0;} #sub .bus .info01 li img {position:absolute; right:0; top:0; width:50px;} #sub .bus .info01 li span.num {display:inline-block; width:1.4em; height:1.4em; color:#fff; border-radius:100px; line-height:1.4em; font-weight:600; background:#3bb887; margin-right:0.5em; text-align:center;} #sub .bus .info01 li h3 {font-size:1.1em; font-weight:600; margin:0 0 10px; line-height:1.25em;} #sub .bus .info01 li h5 {font-size:0.9em; color:#3b75b9; font-weight:500;} #sub .bus .info01 li h5, #sub .bus .info01 li p {padding-left:30px;} #sub .bus .info01 li a {display:inline-block; padding:0.2em 0.5em; border:1px solid #aab2bc; color:#616d7b; border-radius:2px; font-size:0.8em; margin:10px 0 0;} #sub .bus .bus_top dl.guide dd {display:inline-block; margin:0 10px 0 0;} #sub .bus .bus_top dl.guide dd span {display:inline-block; width:1.4em; height:1.4em; color:#fff; text-align:center; font-weight:500; font-size:0.9em; margin:0 5px 0 0;} #sub .bus .bus_top dl.guide dd span.able {background:#3b75b9;} #sub .bus .bus_top dl.guide dd span.wait {background:#aab2bc;} #sub .bus .bus_top dl.guide dd span.ok {background:#3bb887;} #sub .bus .bus_top .right a {display:block; padding:0.5em 1em; background:#3b75b9; background:linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color:#fff; margin:20px 0 0; text-align:center; border-radius:100px; font-weight:500; width:100%;} #sub .bus .ym h1 {font-size:1.75em; font-weight:600; display:inline-block; line-height:30px; margin:0 10px;} #sub .bus .ym a {display:inline-block; width:30px; height:30px; background-repeat:no-repeat; background-size:12px; background-position:center center; vertical-align:text-bottom;} #sub .bus .ym a.cal_prev {background-image:url('../img/main_ban_ic_prev.png');} #sub .bus .ym a.cal_next {background-image:url('../img/main_ban_ic_next.png');} #sub .bus table.bus_cal {width:100%; border-top:1px solid #616d7b;} #sub .bus table.bus_cal th, #sub .bus table.bus_cal td {border-bottom:1px solid rgba(0,0,0,0.05); border-right:1px solid rgba(0,0,0,0.05);} #sub .bus table.bus_cal th:last-child, #sub .bus table.bus_cal td:last-child {border-right:0;} #sub .bus table.bus_cal th.br, #sub .bus table.bus_cal td.br {border-right:1px solid rgba(0,0,0,0.05);} #sub .bus table.bus_cal th {padding:10px; background:#f6f7f8; font-weight:500; text-align:center;} #sub .bus table.bus_cal th:nth-child(1) {color:#ec3a3a;} #sub .bus table.bus_cal th:nth-child(7) {color:#3b75b9;} #sub .bus table.bus_cal td {padding:10px; word-wrap: break-word; word-break:break-all; font-size:0.9em;} #sub .bus table.bus_cal td:nth-child(1), #sub .bus table.bus_cal td.holiday {color:#ec3a3a;} #sub .bus table.bus_cal td span {display:block; width:20px; height:20px; margin:10px auto 0; color:#fff; text-align:center; font-weight:500;} #sub .bus table.bus_cal td span.able {background:#3b75b9;} #sub .bus table.bus_cal td span.able:before {content:'가';} #sub .bus table.bus_cal td span.wait {background:#aab2bc;} #sub .bus table.bus_cal td span.wait:before {content:'대';} #sub .bus table.bus_cal td span.ok {background:#3bb887;} #sub .bus table.bus_cal td span.ok:before {content:'완';} #sub .bus .bus_check input[type="checkbox"] {display:none;} #sub .bus .bus_check input[type="checkbox"] ~ label {font-weight:400;} #sub .bus .bus_check input[type="checkbox"] ~ label:before {font-family:'FontAwesome'; display:inline-block; content:"\f058"; margin:0 5px 0 0; vertical-align:middle; color:#d6dadf; font-size:1.4em; margin-top:-0.2em;} #sub .bus .bus_check input[type="checkbox"]:checked ~ label:before {color:#3b75b9;} #sub .bus .bus_tab dd {display:inline-block; width:50%; float:left; text-align:center; padding:15px 0; cursor:pointer; border:1px solid #ddd; background:#fafafa; position:relative; color:#777;} #sub .bus .bus_tab dd:last-child {border-left:0;} #sub .bus .bus_tab dd h3 {font-size:1.1em; font-weight:600; line-height:1.25em; margin:0 0 5px;} #sub .bus .bus_tab dd h3:before {font-family:'FontAwesome'; display:inline-block; content:"\f058"; margin:0 5px 0 0;} #sub .bus .bus_tab dd p {font-size:0.8em; opacity:0.8;} #sub .bus .bus_tab dd.on {border-bottom:0; background:#fff; color:#000;} #sub .bus .bus_tab dd.on:before {content:''; display:inline-block; width:100%; height:3px; background:#3b75b9; position:absolute; left:0; top:-1px;} #sub .bus .bus_tab dd.on h3:before {color:#3b75b9;} #sub .bus .bus_cont {padding:40px 0;} #sub .bus .tabcontent .write_apply .mr {margin-right:5px;} #sub .bus .tabcontent .write_apply input[type="text"].unit {max-width:calc(100% - 50px);} #sub .bus .tabcontent .write_apply .list01 dd {margin:0 0 5px;} #sub .bus .tabcontent .write_apply .list02 dd {display:inline-block; width:calc(100% - 80px); float:left; line-height:20px; padding:0.5em 0;} #sub .bus .tabcontent .write_apply .list02 dd:nth-child(even) {width:80px; text-align:right;} #sub .bus .tabcontent .write_apply .list02 dd input {height:20px; line-height:20px;} #sub .bus .tabcontent .write_apply .zip_wrap {position:relative; width:100%; max-width:500px;} #sub .bus .tabcontent .write_apply .zip_wrap input[type="text"] {padding-right:100px; width:100%;} #sub .bus .tabcontent .write_apply .zip_wrap .zip_btn {position:absolute; width:80px; right:0; top:0; background:#3b75b9; color:#fff; border:0; font-size:12px;} #sub .bus .tabcontent .write_apply input[type="checkbox"] + label.fix {display:inline-block; width:80px;} #sub .bus .tabcontent .write_apply input[type="checkbox"] + label + div.detail {display:none;} #sub .bus .tabcontent .write_apply input[type="checkbox"]:checked + label + div.detail {display:inline-block;} #sub .bus .tabcontent .write_apply input[type="checkbox"]:checked + label + div.detail.box {width:100%; background:#f6f7f8; padding:10px;} #sub .bus .tabcontent .write_apply input[type="checkbox"]:checked + label + div.detail input[type="text"] {width:100px; margin-left:10px;} #sub .bus .tabcontent .agree_box {line-height:40px;} #sub .bus .apply_tit h3 {font-size:1.5em; font-weight:700;} #sub .bus .apply_tit img {width:100%; max-width:960px; margin:30px auto 0; display:block;} #sub .bus .apply_tit .when {background:#f7f9fd; padding:20px; max-width:600px; margin:20px auto; font-weight:600;} #sub .bus .apply_tit .when span {background:#3b75b9; color:#fff; padding:5px 10px; border-radius:100px; margin:0 10px 0 0;} #sub .bus .apply_list dl {display:flex; flex-wrap:wrap; border:1px solid #dcdcdc; margin:0 0 10px; padding:10px 0;} #sub .bus .apply_list dl.cancel {color:#888; background:#fafafa;} #sub .bus .apply_list dt, #sub .bus .apply_list dd {padding:5px 10px;} #sub .bus .apply_list dd:first-of-type {font-weight:600;} #sub .bus .apply_list dd:last-of-type {color:#999; font-size:0.9em;} #sub .bus .apply_list dt {width:120px; text-align:center; font-weight:600;} #sub .bus .apply_list dd {width:calc(100% - 120px);} #sub .bus .apply_list img {width:100%; max-width:960px; margin:30px auto 0; display:block;} @media all and (min-width:768px) { #sub .bus .tit h1 {font-size:2em;} /*#sub .bus .info01 li {display:inline-block; width:31.33%; float:left; margin:0 1%;} #sub .bus .info01 li h3 {font-size:1.25em;}*/ #sub .bus .info01 li {display:inline-block; width:48%; float:left; margin:0 4% 30px 0; border-bottom:0;} #sub .bus .info01 li:nth-child(even) {margin-right:0;} #sub .bus .info01 li:nth-child(3), #sub .bus .info01 li:nth-child(4) {margin-bottom:0; padding-bottom:0;} #sub .bus .info01 li h3 {font-size:1.25em;} #sub .bus .info01 li h5, #sub .bus .info01 li p {padding-left:40px;} #sub .bus .bus_top {display:flex;} #sub .bus .bus_top .left {width:calc(100% - 150px);} #sub .bus .bus_top .right {width:150px;} #sub .bus .ym h1 {font-size:2em;} #sub .bus .bus_tab dd {padding:25px 0;} #sub .bus .bus_tab dd h3 {font-size:1.25em;} #sub .bus .tabcontent .write_apply .list01 dd {display:inline-block; padding-right:10px;} #sub .bus .tabcontent .write_apply .list01.full dd {display:block; padding-right:0;} #sub .bus .apply_tit h3 {font-size:1.75em;} #sub .bus .apply_list .list_wrap {display:flex; flex-wrap:wrap; margin:0 -1%;} #sub .bus .apply_list .list_wrap dl {width:48%; margin:10px 1%;} } @media all and (min-width:1080px) { #sub .bus .tit .br {display:inline-block;} #sub .bus .tit h1 {font-size:2.5em;} #sub .bus .info01 li img {width:60px;} #sub .bus a.apply_check {margin:0.5em 0 0;} #sub .bus .bus_tab dd h3 {font-size:1.5em;} #sub .bus .apply_tit h3 {font-size:2em;} #sub .bus .apply_list .list_wrap dl {width:31.33%;} } /*이벤트*/ #sub .event .tab {display:block; margin:0 auto; max-width:640px;} #sub .event .tab dd {display:inline-block; width:30.33%; margin:0 1.5%; float:left; text-align:center; position:relative; padding:0.5em 0; cursor:pointer;} #sub .event .tab dd:before {content:''; display:inline-block; width:80%; height:4px; position:absolute; left:10%; bottom:0; background:#e0e0e0;} #sub .event .tab dd:after {content:''; display:inline-block; width:0; height:4px; position:absolute; left:10%; bottom:0; background:#3b75b9; background:linear-gradient(90deg, #3b75b9 0%, #3bb887 100%); transition:0.2s;} #sub .event .tab dd.on:after {width:80%;} #sub .event .info01 {text-align:center; background:#f6f7f8; padding:30px 3%;} #sub .event .info01 h1 {font-size:1.5em; font-weight:600; line-height:1.25em; margin:0 0 20px; color:#999;} #sub .event .info01 p {color:#888;} #sub .event .event_list ul{position:relative} #sub .event .event_list ul li{margin-bottom:20px; position:relative; transition:0.3s; } #sub .event .event_list ul li img{width:100%} #sub .event .event_list ul li:last-child{margin-bottom:0px;} #sub .event .event_list ul li a{display:block; position:relative} #sub .event .event_list ul li:hover{transform:translateY(-10px); box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3); transition: .2s; } #sub .event .event_list.end ul li img{filter: grayscale(90%);} #sub .event .event_list.end ul li:hover img{filter: grayscale(0%);} @media all and (min-width:768px) { #sub .event .tab dd {font-size:1.15em; font-weight:500;} #sub .event .info01 {padding:50px;} #sub .event .info01 h1 {font-size:1.75em;} #sub .event .event_list ul li {width:49%; margin:0 2% 20px 0; float:left;} #sub .event .event_list ul li:nth-child(2n) {margin-right:0;} } @media only screen and (min-width: 1200px) { #sub .event .event_list ul li:after, .event_list ul li:before, #sub .event .event_list ul li a:after, .event_list ul li a:before{width:5px; height:0; position:absolute; display:block; content:""; background-color:#3bb887; transition:all 0.2s cubic-bezier(.25,.25,.53,.94); z-index:1;} /*#sub .event .event_list ul li:after{width:0px; height:5px;} #sub .event .event_list ul li a:after{width:0px; height:5px;} #sub .event .event_list ul li:before{width:5px; height:0px;} #sub .event .event_list ul li a:before{width:5px; height:0px;} #sub .event .event_list ul li:after{left:0; top:0} #sub .event .event_list ul li:before{left:0; bottom:0} #sub .event .event_list ul li a:after{right:0; bottom:0} #sub .event .event_list ul li a:before{right:0; top:0; } #sub .event .event_list ul li:hover:after{width:100%} #sub .event .event_list ul li:hover:before{height:100%;} #sub .event .event_list ul li:hover a:after{width:100%} #sub .event .event_list ul li:hover a:before{height:100%;}*/ } /*정신건강통계*/ #sub .stat .tit {position:relative; height:24vw; max-height:200px;} #sub .stat .tit .br {display:block;} #sub .stat .tit h1 {font-size:1.5em; font-weight:700; line-height:1.25em;} #sub .stat .tit h1:after {content:''; display:inline-block; width:0.4em; height:0.4em; border-radius:100px; background:#3bb887; margin:0 0 0 0.2em;} #sub .stat .tit img {width:50%; max-width:400px; position:absolute; top:-1vw; right:0; z-index:-1;} #sub .stat .bg01 ul.info01:after{display:none !important;} #sub .stat .info01 {display:flex; flex-wrap:wrap; justify-content:space-between;} #sub .stat .info01 li {width:100%; padding:20px 3%; background:#fff; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); margin:0 0 10px;} /*#sub .stat .info01 li:last-child {margin-bottom:0;}*/ #sub .stat .info01 li h3 {font-size:1.1em; font-weight:500; line-height:1.25em;} #sub .stat .info01 li h2 {font-size:2em; font-weight:700;} #sub .stat .info01 li h2 small {font-size:0.6em; margin-left:0.1em;} #sub .stat .info01 li h2 span{font-size:0.4em; color:#666; font-weight:400} #sub .stat .info01 li:nth-child(3n-2) h2 {color:#616d7b;} #sub .stat .info01 li:nth-child(3n-1) h2 {color:#3b75b9;} #sub .stat .info01 li:nth-child(3n) h2 {color:#3bb887;} #sub .stat .info01 li p.desc {font-size:0.9em; margin:0 0 10px;} #sub .stat .info01 li p.desc:before {content:'(';} #sub .stat .info01 li p.desc:after {content:')';} #sub .stat .info01 li p.ref {font-size:0.8em; color:#666;} #sub .stat .info02 li {display:inline-block; width:31.33%; float:left; margin:0 1% 10px;} #sub .stat .info02 li img {width:100%; border:1px solid #eee;} @media all and (min-width:640px) { #sub .stat .tit .br {display:inline-block;} } @media all and (min-width:768px) { #sub .stat .tit h1 {font-size:2em;} #sub .stat .info01 li {width:49%; padding:20px; margin:0 0 15px;} #sub .stat .info01 li h3 {font-size:1.25em;} #sub .stat .info01 li h2 {font-size:2.25em;} #sub .stat .info02 li {width:14.66%; margin:0 1%;} } @media all and (min-width:1080px) { #sub .stat .tit h1 {font-size:2.5em;} #sub .stat .info01 li {width:32.33%;} } /*발행물*/ #sub .issue .info01 li {background:#fff; -webkit-box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow:0px 5px 10px 0px rgb(0 0 0 / 10%); margin:0 0 10px; padding:10px 20px;} #sub .issue .info01 li:last-child {margin-bottom:0;} #sub .issue .info01 li h3 {font-weight:600; line-height:30px;} #sub .issue .info01 li h3:after {content:'\f13a'; font-family:'FontAwesome'; display:inline-block; float:right; color:#aab2bc;} #sub .issue .info01 li:last-child h3:after {display:none;} #sub .issue .info01 li h3 span.num {font-size:0.8em; color:#fff; background:#3b75b9; display:inline-block; width:1.6em; height:1.6em; line-height:1.6em; border-radius:100px; text-align:center; vertical-align:text-bottom; margin-right:0.2em;} #sub .issue .info01 li p {padding-left:1.8em; font-size:0.8em; color:#666; margin:5px 0 0;} #sub .issue .info01 li p a {display:inline-block; background:#616d7b; border-radius:2px; color:#fff; padding:0 0.5em;} #sub .issue .info01 li p a:after {font-family:'FontAwesome'; display:inline-block; content:"\f019"; margin:0 0 0 5px; vertical-align:middle;} @media all and (min-width:768px) { #sub .issue .info01 li {display:inline-block; width:49%; margin:0 0.5% 10px; float:left;} #sub .issue .info01 li h3:after {content:'\f138';} } @media all and (min-width:1080px) { #sub .issue .info01 li:nth-child(3), #sub .issue .info01 li:nth-child(4), #sub .issue .info01 li:nth-child(5) {width:32.33%;} #sub .issue .info01 li:nth-child(3) {clear:both;} } /*이메일무단수집거부*/ #sub .noemail h1 {font-size:1.5em; font-weight:600;} #sub .noemail p {margin:0 5%;} @media all and (min-width:1080px) { #sub .noemail h1 {font-size:2em;} } /*개인정보처리방침*/ #sub .privacy h4 {font-size:1.25em; font-weight:500;} /*사이트맵*/ #sub .sitemap ul {text-align:center;} #sub .sitemap li {display:inline-block; vertical-align:top; width:80%; margin:0 10% 30px; border-radius:10px; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); overflow:hidden;} #sub .sitemap li h1 {background:#616d7b; color:#fff; font-size:1.1em; font-weight:600; padding:10px 0;} #sub .sitemap li dd {padding:10px 0; margin:0 10px; border-bottom:1px dotted #616d7b; font-weight:500;} #sub .sitemap li dd:last-child {border-bottom:0;} #sub .sitemap li dd a:hover {color:#3b75b9;} #sub .sitemap li dd.dep div {margin:10px 0 0; padding:10px 0; background:#f6f7f8; border-radius:10px;} #sub .sitemap li dd.dep div a {display:block; font-size:0.9em; font-weight:400; color:#555; line-height:30px;} #sub .sitemap li dd.dep div a:hover{font-weight:600; color:#333} @media all and (min-width:768px) { #sub .sitemap ul {display:flex;flex-wrap:wrap;gap:2%;} #sub .sitemap li {width: 49%;margin: 0;margin-bottom: 20px;} } @media all and (min-width:1200px) { #sub .sitemap ul {align-items: flex-start;} #sub .sitemap li {width: 14.4%;} #sub .sitemap li:nth-child(2){width:18%;} } /*뮤직 테라피*/ .sub-content .inner{ padding: 0 10px; } .pp{} .pp .p1{ top: -58px; left: 3px; z-index: 1000; } .pp .p2{ top: -58px; right: -7px; z-index: 1000; } .pp .p3{} .pp img{ width: 50px; position: absolute; display: none; } .m-tlt{ text-align: center; font-weight: 500; font-size: 19px; color: #000; /* margin-bottom: 50px; */ border-top: 10px solid #f5f5f5; border-bottom: 10px solid #f5f5f5; padding: 30px 0; } .m-tlt span{ font-weight: 700; display: block; font-size: 22px; color: #888; } .m-tlt span:before{ display: inline-block; clear:both; content:""; width: 20px; height: 15px; background: url(http://onlinefair.gnmhc.or.kr/img/2023/dd1.png) no-repeat; background-size: 100%; margin-right: 10px; } .m-tlt span:after{ display: inline-block; clear:both; content:""; width: 20px; height: 15px; background: url(/img/2023/dd2.png) no-repeat; background-size: 100%; margin-left: 10px; } .m-bg{ /* background: #e8eff8; */ padding: 50px 0; } .m-row{ padding: 50px 0; background: #e8eff8; } .m-list-tlt{ font-size: 23px; font-weight: 600; margin-bottom: 20px; /* text-align: center; */ position: relative; padding-left: 18px; font-size: 1.25em; color: #303030; font-weight: 700; padding: 0 0 0 24px; background: url(../img/tit_dot.png) no-repeat left 6px / 18px; line-height: 30px; word-break: break-all; }.m-list-tlt:after { display: block; clear: both; /* content: ""; */ width: 5px; height: 62px; background: #00b082; position: absolute; top: -1px; left: 0; } .m-row .m-list-tlt:after{/* background:#ff7200; */} .m-bg .m-list-tlt span{color: #00b082;} .m-list-tlt span{color: #3b75b9 !important;display: block;} .m-list{} .m-list li{} .m-list li a{ position: relative; } .m-list li a .img:before { display: block; clear: both; content: ""; position:absolute; width:100%; height:100%; background: rgba(0,0,0,0.2); z-index: 1; transition:0.3s; } .m-list li:hover a .img:before{ background: rgb(255 255 255 / 50%);} .m-list li a .img:after{ display:block; clear:both; content:""; width: 50px; height: 32px; background: url(/img/2023/play.png); background-size: contain; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -25px; z-index: 2; } .m-list li .img{ position: relative; /* position: absolute; */ height: 0px; padding-bottom: 50%; /* border: 4px solid #ff7200; */ border-radius: 10px; overflow: hidden; } .m-list li .img span{ position: absolute; top: 0; left: 0; position: absolute; top: 50%; left: 50%; margin-top: -14px; margin-left: -25px; } .m-list li .img span img{ width: 50px; } .m-bg .m-list li .img{ /* border: 4px solid #ff7200; */ } .m-list li .img > img{ /* border-radius: 30px 10px 30px 10px; */ /* border: 4px solid #ff7200; */ position: absolute; width: 120%; top: 0; left: 50%; margin-left: -60%; max-width: unset; } .m-list li .tlt{ font-weight: 600; text-align: center; font-size: 18px; padding: 10px 0 15px; } .m-list li .tlt span{font-weight: 400;font-size: 0.9em;color: #666;} .m-bg .m-list li .tlt span.tlt-tg{background: linear-gradient(to right, #8ada84,#00b082);} .m-list li .tlt span.tlt-tg{background: linear-gradient(to right, #ff9806,#ff7a00);color: #fff;font-size: 0.7em;padding: 1px;display: inline-block;width: 41px;line-height: 22px;border-radius: 5px 10px;font-weight: 500;margin-right: 6px;transform: translate(0px, -3px);} .music-box{} .music-box .box{} .music-box iframe{} @media (min-width: 800px) { .pp{} .pp .p1{ top: 9px; left: 34px; z-index: 1000; } .pp .p2{ top: 27px; right: 75px; z-index: 1000; } .pp .p3{ top: -17px; right: 19px; } .pp img{ width: 69px; position: absolute; display: block; } .m-tlt{} .m-tlt span{} .m-bg{} .m-list-tlt{} .m-list{ display: flex; flex-wrap: wrap; } .m-list li{ width: calc(50% - 10px); margin-right: 20px; } .m-list li:nth-child(2n){margin-right:0px;} .m-list li a{} .m-list li .img{} .m-list li .img img{} .m-list li .tlt{} .m-list li .tlt span{} } @media (min-width: 1200px) { .m-list li .tlt span.tlt-tg{ width: 50px; line-height: 29px; margin-right: 10px; } .pp{} .pp .p1{ top: 3px; left: 0px; z-index: 1000; } .pp .p2{ top: 27px; right: 143px; z-index: 1000; } .pp .p3{ top: -17px; right: 0px; } .pp img{ width: unset; } .m-tlt{ font-size: 30px; /* margin-bottom: 80px; */ } .m-tlt span{ font-size: 36px; /* font-size: 2em; */ } .m-tlt span:after{ width: 30px; height: 30px; } .m-tlt span:before{ width: 30px; height: 30px; } .m-bg{ padding: 80px 0; } .m-row{padding: 70px 0;} .m-list-tlt{ font-size: 32px; margin-bottom: 30px; padding-left: 18px; font-size: 1.5em; padding-left: 30px; } .m-list-tlt:after{ height: 32px; top: 8px; } .m-list-tlt span{ display: inline-block; } .m-list{} .m-list li{ width: calc(25% - 30px); margin-right: 40px; } .m-list li:nth-child(2){margin-right:40px;} .m-list li a{} .m-list li .img{ padding-bottom: 60%; } .m-bg .m-list li .img{ /* border: 5px solid #00b082; */ } .m-list li .img{ /* border: 5px solid #ff7200; */ } .m-list li .tlt{ font-size: 22px; padding-bottom: 0px; } .m-list li .tlt span{} } .music-box{} .music-box .box{} .music-box iframe{ height: 500px !important; max-width: 1000px !important; } .player { padding-top: 56.25%; position: relative; } .player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .reg-btn{} .reg-btn ul{ display: flex; flex-wrap: wrap; } .reg-btn ul li{ width: 33.333333%; text-align: center; /* margin: 5px; */ } .reg-btn li a{ display: block; border: 1px solid #dedede; padding: 10px; margin: 5px; font-weight: 500; border-top: 0px; position: relative; padding-top: 10px; border-radius: 10px; overflow: hidden; border-top: 3px solid #00b582; transition:0.3s; } .reg-btn li a:hover{background:#00b082; color:#fff; border-color:#00b582;} .reg-btn li a:before{ display:block; clear:both; content:""; width: calc(100% + 2px); height: 3px; /* background: linear-gradient(to right, #8ada84,#00b082); */ position: absolute; top: 0; left: -1px; /* border-radius: 23px; */ } .region{} .region .grey{padding:0px;} .region .sub-layout{ padding: 50px 0; } .region .sub-layout.bottom{padding-bottom:0px;} .region-list{} .region-list .list-lay{ background: #fff; border-radius: 10px; padding: 20px; -webkit-box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); border-radius: 30px 10px 30px 10px; margin-bottom: 30px; } .region-list .list-lay:last-child{margin-bottom:0px;} .region-list .list-lay > li{ /* position: relative; */ margin-bottom: 10px; } .region-list li .img{ margin-top: 15px; } .region-list li .img img{border-radius:10px;} .region-list li:last-child{margin-bottom:0px;} .region-list li.top-tlt{ font-weight: 600; font-size: 20px; margin-bottom: 10px; margin-bottom: 20px; border-bottom: 1px dashed #dedede; padding-bottom: 10px; } .region-list li.top-tlt .tag{ /* font-weight: 500; */ font-size: 16px; display: block; } .region-list li.top-tlt .tag.t1{color: #00b582;} .region-list li.top-tlt .tag.t2{color: #fd8900;} .region-list li.top-tlt .tag.t3{color:#00a7fd;} .region-list li .tlt{ background: #ff8452; border-radius: 10px; padding: 4px 10px 4px; display: inline-block; color: #fff; /* position: absolute; */ top: -3px; left: 0px; background: linear-gradient(to right, #ff7200,#ff8600); font-weight: 500; margin-bottom: 8px; background: linear-gradient(to right, #8ada84,#00b082); /* width: 65px; */ text-align-last: justify; font-size: 13px; min-width: 60px; /* height: 25px; */ /* line-height: 25px; */ } .region-list .list-lay > li.lay .tlt{ /* width: 95px; */ } .region-list .t1 li .tlt{background:#00b582;} .region-list .t2 li .tlt{background:#fd8900;} .region-list .t3 li .tlt{background:#00a7fd;} .region-list li .cont{ /* padding-left: 79px; */ display: block; /* font-weight: 500; */ color: #000; word-break: break-all; } /*코로나19 마음건강검진*/ .check-wrap{ background: #f6f7f8; padding: 20px; background: #f6f7f8; } .sub_title.lay{ padding-bottom: 30px; } .sub_title.lay .pdinner{position:relative;} .cvdCheck{ font-weight: 600; background: url(/img/ic_checkBox.svg) no-repeat; padding-left: 24px; /* color: #3b75b9 !important; */ /* border: 1px solid #dedede; */ /* display: block; */ position: absolute; top: 38px; right: 3%; background-size: 20px; background-position: 14px center; background-color: #3b75b9; color: #fff; padding: 10px 20px; padding-left: 40px; } .check-wrap .top-row{ background: #fff; /* border-radius: 20px; */ padding: 30px; position: relative; /* padding-left: 96px; */ background: linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); color: #fff; } .check-wrap .top-row.lay-bt{margin-bottom:20px;} .check-wrap .bottom-row-cont{ background: #f4f4f4; /* border-radius: 20px; */ padding: 30px; position: relative; /* padding-left: 96px; */ background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; position: relative; } .check-wrap .bottom-row-cont:before{ display:block; clear:both; content:""; width:100%; height: 7px; background: linear-gradient(110deg, #3b75b9 60%, #2d598c 100%); position: absolute; top: 0; left: 0; } .check-wrap .top-row2{margin-bottom:10px;} .check-wrap .top-row br{display:none;} .check-wrap .top-row:before{ display:block; clear:both; /* content:""; */ background:url(../../img/check-img.png); width: 75px; height: 75px; background-size: 100%; position: absolute; top: 30px; left: 30px; display: none; } .check-wrap .top-row2:before{ display:block; clear:both; /* content:""; */ background:url(../../img/check-img2.png); width: 75px; height: 75px; background-size: 100%; position: absolute; top: 30px; left: 30px; display: none; } .check-wrap .top-row3:before{ display:block; clear:both; content:""; background:url(../../img/check-img3.png); width: 75px; height: 75px; background-size: 100%; position: absolute; top: 30px; left: 30px; display: none; } .check-wrap .top-row3 b{ /* color: #f38645; */ text-decoration: underline; } .check-wrap .im{ display: block; position: relative; padding-left: 21px; margin-top: 10px; } .check-wrap .im:before{ display:block; clear:both; content:""; width: 15px; height: 15px; background:url(../../img/ico-notice.png); background-size:100%; position: absolute; left: 0; top: 5px; } .check-wrap .tel{ display: block; position: relative; padding-left: 21px; margin-top: 3px; margin-bottom: 25px; font-weight: 500; } .check-wrap .tel:before{ display:block; clear:both; content:""; width: 15px; height: 15px; background: url(../../img/ico-notice2.png); background-size:100%; position: absolute; left: 0; top: 2px; } .check-list{} .check-wrap2 .check-list{margin-bottom: 20px;} .check-list.mt-lay{margin-bottom:30px;} .check-list .check-tlt{ /* color: #f38848; */ font-size: 22px; font-weight: 500; /* text-align: center; */ margin-bottom: 5px; position: relative; /* padding-left: 40px; */ } .check-list .check-tlt em{ /* border: 3px solid #f38848; */ /* padding: 1px 5px; */ margin-right: 6px; font-size: 25px; /* width: 18px; */ /* height: 23px; */ display: inline-block; /* position: absolute; */ /* left: 0px; */ line-height: 24px; font-weight: 800; /* text-align: center; */ /* top: 0px; */ color: #f38848; /* box-sizing: content-box; */ transform: translate(0px, 1px); } .check-list .check-tlt2{font-size:16px;margin-bottom: 12px;} .check-list .check-tlt2 em{font-size: 18px;} .check-list .check-txt2{ /* color: #f38848; */ font-size: 18px; font-weight: 500; /* text-align: center; */ margin-bottom: 15px; } .check-list .check-tlt span{ font-weight: 800; margin-left: 2px; border-bottom: 1px solid #000; } .check-list .check-txt{ margin-bottom: 20px; /* text-align: center; */ font-weight: 300; } .check-list .check-txt b{/* color:#f38848 */} .check-list .row{ /* border-radius: 20px; */ /* border: 5px solid #f4f4f4; */ padding: 5%; margin-bottom: 10px; padding: 20px 3%; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; } .check-list .row.yes{ /* border: 5px solid #e5e5e5; */ } .check-list .row.yes b{font-weight:bold; text-decoration:underline; } .check-list .row.yes .q{ padding-left: 0px; } .check-list .row .q{ font-size: 17px; font-weight: 500; margin-bottom: 10px; padding-left: 34px; position: relative; line-height: 1.4; } .check-list .row .q span{background:#f38848;border-radius: 50%;color: #fff;width: 26px;height: 26px;display: inline-block;text-align: center;line-height: 26px;font-size: 14px;position: absolute;top: 1px;left: 0px;display: inline-block;width: 1.6em;height: 1.6em;background: #3bb887;color: #fff;text-align: center;font-weight: 600;border-radius: 100px;line-height: 1.6em;position: absolute;left: 0;top: 0;} .check-list .row .a{ display: flex; flex-direction: row; flex-wrap: wrap; text-align: center; gap: 5px; justify-content: space-between; } .check-list .row .a.lay .etc{ width: 100%; } .check-list .row .a.lay .etc input{ width: 100%; height: 100%; } .check-list .row3{gap:0px;} .check-list .row .a input.op0{ display: none; } .cont.check input[type="radio"]{display: none; } .check-list .row .a .radio_label{ /* width: calc(50% - 2.5px); */ /* border: 1px solid #dedede; */ /* display: block; */ /* border-radius: 30px; */ /* height: 40px; */ /* line-height: 40px; */ /* font-size: 13px; */ /* font-weight: 600; */ color: #666; display: flex; line-height: 1.1em; padding: 0.5em 0; border: 1px solid #aab2bc; height: 100%; align-items: center; justify-content: center; width: 48%; } .cont.check label{ /* width: calc(50% - 2.5px); */ /* border: 1px solid #dedede; */ /* display: block; */ /* border-radius: 30px; */ /* height: 40px; */ /* line-height: 40px; */ /* font-size: 13px; */ /* font-weight: 600; */ color: #666; display: flex; line-height: 1.1em; padding: 0.5em 0; border: 1px solid #aab2bc; height: 100%; align-items: center; justify-content: center; width: 98%; margin: 0.5%; font-size: 15px; } .cont.check input[type="radio"]:checked + label { background: #444; color: #fff; border: 1px solid #444; /* width: 50%; */ } .check-list .row .a.lay .radio_label{ width: 100%; } .check-list .row2 .a .radio_label{width:100%;} .check-list .row3 .a{ display: flex; justify-content: flex-start; } .check-list .row3 .a .radio_label{ width: calc(33% - 2.5px); width: 32%; margin: 0px; } .check-list .row4 .a{ display: flex; flex-direction: row; gap: 0px; justify-content: space-between; } .check-list .row4 .a .radio_label{width: 49%;} .check-list .row2 .a .etc{ width: 100%; } .check-list .row2 .a .etc .text-input{ width: 100%; border-radius: 30px; line-height: 40px; height: 40px; background: #f4f4f4; } .check-list .row .a input:checked + .radio_label{background: #444;color: #fff;border: 1px solid #444;} .check-list .text-area{ /* border-radius: 20px; */ border: 5px solid #f4f4f4; padding: 5%; margin-bottom: 10px; padding: 10px; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; border: 0px; } .next-btn{ /* background:#f38848; */ /* border-radius: 30px; */ /* color: #fff; */ /* width: 200px; */ /* display: block; */ /* text-align: center; */ /* height: 50px; */ /* line-height: 50px; */ /* font-size: 16px; */ /* font-weight: bold; */ /* margin: 0 auto; */ /* margin-top: 20px; */ /* padding-top: 1px; */ /* letter-spacing: -0.5px; */ /* font-size: 18px; */ background: #f0f0f0; color: #888; display: inline-block; width: 140px; padding: 1em 0; margin: 0 0.2em; background: #616d7b; color: #fff; text-align: center; margin: 0 auto; display: block; } .source{ background: #f8f8f8; border-radius: 20px; margin-top: 30px; padding: 20px 30px; font-size: 13px; color: #444; } .btn-row{ text-align: center; margin-top: 20px; } .btn-row .next-btn{ display: inline-block; margin-top: 10px; margin-right: 5px; margin-left: 5px; } .btn-row .next-btn2{background:#444;} @media all and (min-width:768px) { .check-wrap{ padding: 50px; } .check-wrap .top-row{ font-size: 16px; padding-left: 108px; padding: 35px 40px; padding-left: 126px; line-height: 1.6; } .check-wrap .top-row2{margin-bottom:20px;} .check-wrap .top-row:before{display:block;left: 35px;top: 50%;margin-top: -37.5px;} .check-wrap .im{} .check-wrap .tel{ margin-bottom: 40px; } .check-list{} .check-list .check-tlt{ text-align: left; font-size: 26px; margin-bottom: 2px; } .check-list .check-tlt em{font-size: 29px;margin-right: 8px;} .check-list .check-tlt2{font-size: 20px;margin-bottom: 12px;} .check-list .check-tlt2 em{font-size: 24px;margin-right: 6px;} .check-list .check-txt{ text-align: left; font-size: 20px; } .check-list .row{ padding: 25px 30px; margin-bottom: 15px; } .check-list .check-txt2{font-size:20px;} .check-list .row .q{} .check-list .row .q span{top:-1px;} .check-list .row .a{ display: flex; flex-wrap: nowrap; } .check-list .row .a input.op0{} .check-list .row .a .radio_label{} .check-list .row2 .a{ display: flex; flex-wrap: wrap; } .check-list .row2 .a .radio_label{width: calc(50% - 5px);} .check-list .row3 .a{gap: 2px;display: flex;justify-content: space-between;} .check-list .row3 .a .radio_label{width: 8%;} .check-list .row .a input:checked + .radio_label{} .check-list .row2 .a .etc{ width: calc(50% - 5px); } } @media all and (min-width:1000px) { .sub_title.lay{ padding-bottom: 0px; } .cvdCheck{ padding-right: 15px; right: 20px; font-size: 18px; background-size: 22px; padding-left: 43px; top: 2px; } } @media all and (min-width:1200px) { .check-wrap{} .check-wrap .top-row{ font-size: 20px; padding: 45px 50px 42px; /* padding-left: 150px; */ margin-bottom: 5px; } .check-wrap .top-row.lay-bt{margin-bottom:40px;} .check-wrap .top-row2{margin-bottom:20px;} .check-wrap .top-row br{display:block;} .check-wrap .top-row:before{ width: 100px; height: 100px; margin-top: -50px; } .check-wrap .im{ font-size: 18px; display: inline-block; margin-right: 15px; padding-left: 22px; } .check-wrap .im:before{ width:17px; height:17px; top: 4px; } .check-wrap .tel{ display: inline-block; padding-left: 22px; margin-bottom: 0px; }.check-wrap .tel:before{ width:17px; height:17px; top: 1px; } .bottom-row{ /* margin-bottom: 45px; */ } .check-list{} .check-list .check-tlt{ font-size: 28px; margin-bottom: 10px; } .check-list .check-tlt em{font-size: 30px;margin-right: 9px;} .check-list .check-txt{ margin-bottom: 30px; } .check-list .check-tlt2{font-size: 21px;margin-bottom: 12px;} .check-list .check-tlt2 em{font-size: 24px;} .check-list .row{ padding: 30px 35px 29px; margin-bottom: 20px; } .check-list .check-txt2{font-size:22px;} .check-list .row:after{ display:block; clear:both; content:""; } .check-list .row .q{ float: left; font-size: 19px; width: calc(100% - 650px); padding-left: 37px; padding-right: 40px; /* margin-bottom: 20px; */ } .check-list .row .q span{top: -2px;width: 30px;height: 30px;font-size: 15px;line-height: 30px;} .check-list .row .a{ display: block; float: right; width: 650px; display: flex; align-items: stretch; justify-content: space-between; } .check-list .row2 .a{width:100%;} .check-list .row .a input.op0{} .check-list .row .a .radio_label{ /* float: left; */ /* width: calc(25% - 10px); */ /* font-size: 17px; */ /* height: 45px; */ /* line-height: 45px; */ /* margin-left: 10px; */ /* letter-spacing: -1px; */ font-size: 16.5px; /* width: 49%; */ } .check-list .row .a.lay{ display: flex; flex-wrap: wrap; } .check-list .row .a.lay .radio_label{ width: 32%; } .check-list .row2 .a .radio_label{ width: calc(33.3333333% - 10px); margin: 5px; margin-top: 0px; } .check-list .row3 .a .radio_label{width: calc(8% - 5px);margin: 0 2.5px;} .check-list .row .a input:checked + .radio_label{} .check-list .row .a.lay .etc{ width: 66%; } .next-btn{ margin-top: 40px; } .check-list .row2 .a .etc{ float: left; margin-left: 5px; width: calc(66.5% - 5px); } .check-list .row2 .a .etc .text-input{line-height:45px; height:45px; font-size:17px; padding-left:20px;} .check-list .row4 .a{width:100%;} .check-list .row4 .a .radio_label{width: calc(50% - 10px);} } /*검사조회 로그인*/ .check-check{ padding: 20px 3%; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; } .check-check .row{ text-align: center; max-width: 320px; margin: 0 auto; } .check-check .row input{height: 50px;/* border-radius: 4px; */display: block;margin-bottom: 5px;width: 100%;font-size: 16px;} .check-check .next-btn{ margin-top: 30px; } /*검사조회*/ .result-row{} .result-row{} .result-row .result{} .result-row .result > li{ /* border-radius: 20px; */ /* border: 5px solid #f4f4f4; */ padding: 20px; margin-bottom: 10px; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; } .result-row .result .tlt{ font-weight: 700; font-size: 16px; } .result-row .result2 .tlt{margin-bottom:10px;} .result-row .result .cont{ color: #444; } .result-row .result .in{} .result-row .result .in ul{ border-top: 1px solid #dedede; padding-top: 10px; margin-top: 10px; } .result-row .result .in ul li{ font-size: 13px; color: #666; } .result-row .result .in ul li span{} @media all and (min-width:768px) { .result-row{} .result-row{} .result-row .result{} .result-row .result > li{ padding: 30px; } .result-row .result > li:after{ display:block; clear:both; content:""; } .result-row .result .tlt{ float: left; width: 150px; } .result-row .result2 .tlt{width:100%;} .result-row .result .cont{ float: left; width: calc(100% - 150px); } .result-row .result2 .cont{width:100%;} .result-row .result .in{} .result-row .result .in ul{} .result-row .result .in ul li{} .result-row .result .in ul li span{} } @media all and (min-width:1200px) { .result-row{} .result-row{} .result-row .result{} .result-row .result:after{ display:block; clear:both; content:""; } .result-row .result > li{ width: calc(50% - 7.5px); float: left; margin-bottom: 15px; } .result-row .result > li:nth-child(1){margin-right: 15px;} .result-row .result2 > li{width:100%; margin-right:0px;} .result-row .result .tlt{ width: 200px; font-size: 18px; } .result-row .result2 .tlt{width:100%;} .result-row .result .cont{ width: calc(100% - 200px); font-size: 17px; } .result-row .result2 .cont{width:100%;} .result-row .result .in{} .result-row .result .in ul{} .result-row .result .in ul li{ font-size: 15px; } .result-row .result .in ul li span{} .check-wrap .bottom-row-cont{font-size: 18px;} .check-wrap .bottom-row-cont b{font-weight:600} .btn-row{margin-top:30px;} } /*개인정보입력*/ .check-wrap2 .input-wrap{margin-bottom: 20px;} .input-wrap{} .input-wrap ul{ /* border: 1px solid #dedede; */ /* border-radius: 20px; */ padding: 20px; background: #fff; -webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin: 0 0 20px; } .input-wrap li{ margin-bottom: 10px; border-bottom: 1px solid #dedede; padding-bottom: 10px; } .input-wrap li:last-child{border:none; margin-bottom:0px; padding-bottom:0px;} .input-wrap li .tlt{ width: 100%; display: block; font-size: 16px; font-weight: 500; margin-bottom: 4px; } .input-wrap li .cont{} .input-wrap li .cont span{display:inline-block;} .input-wrap li .cont .required{ } .input-wrap li .cont input[type='radio'],.input-wrap li .cont input[type='checkbox']{ height: 20px; transform: translate(0px, -1px); } .input-wrap li .cont label{} .input-wrap li .cont .de-input{ width: 100%; } .input-wrap li .cont .txt1{} .input-wrap li .cont .txt2{ font-size: 12px; color: #666; margin-top: 2px; display: block; } .input-wrap li .cont .txt3{ display: block; font-size: 12px; margin-bottom: 5px; } .input-wrap li .cont .lay{ display: inline-block; width: 10px; } .input-wrap .input-tlt{ font-size: 20px; margin-top: 30px; margin-bottom: 10px; } @media all and (min-width:768px) { .check-wrap2 .input-wrap{margin-bottom:20px;} .input-wrap{} .input-wrap ul{ display: table; width: 100%; padding: 20px 30px; } .input-wrap li{ display: table-row; border-bottom: 0px; width: 100%; } .input-wrap li .tlt{ display: table-cell; width: 150px; padding: 20px 0; border-bottom: 1px solid #dedede; padding-left: 10px; } .input-wrap li:last-child .tlt{border-bottom:0px;} .input-wrap li:last-child .cont{border-bottom:0px;} .input-wrap li .cont{ display: table-cell; width: calc(100% - 150px); padding: 20px 0; border-bottom: 1px solid #dedede; } .input-wrap li .cont .required{} .input-wrap li .cont label{} .input-wrap li .cont .de-input{} .input-wrap li .cont .txt1{} .input-wrap li .cont .txt2{} .input-wrap li .cont .txt3{} .input-wrap li .cont .lay{} .input-wrap .input-tlt{} } @media all and (min-width:1200px) { .check-wrap2 .input-wrap{margin-bottom:35px;} .input-wrap{} .input-wrap ul{} .input-wrap li{} .input-wrap li .tlt{ width: 200px; font-size: 18px; } .input-wrap li .cont{ width: calc(100% - 200px); font-size: 17px; } .input-wrap li .cont .required{} .input-wrap li .cont label{} .input-wrap li .cont .de-input{ height: 40px; width: 300px; } .input-wrap li .cont .txt1{} .input-wrap li .cont .txt2{ margin-top: 5px; font-size: 14px; } .input-wrap li .cont .txt3{ font-size: 14px; } .input-wrap li .cont .txt3 b{margin-left:5px;} .input-wrap li .cont .lay{} .input-wrap .input-tlt{ margin-top: 50px; margin-bottom: 15px; font-size: 24px; } } /*자살*/ .suicide .clearfix.top{display:flex; flex-wrap:wrap; flex-direction: column-reverse;} h1.sui_tit{margin-bottom:20px;font-weight:800; font-size:1.3em;text-align: center;} .suicide .right img{border-radius:10px;width: 400px;margin: 0 auto 20px;display: block;} .suicide .pointbox li{background: #f8f8f8;border-radius: 10px;padding: 15px;display: flex;flex-wrap: wrap;margin-bottom: 15px;justify-content: center;position: relative;align-items: first baseline;} .suicide .pointbox li:nth-child(2):before{display:block; content:'='; position: absolute; top:-22px; font-size:20px; font-weight:600; width:30px; height:30px; background: var(--main_color); text-align:center; color:#fff; line-height:27px; border-radius: 30px;} .suicide .pointbox li:nth-child(2):after{display:block; content:'+'; position: absolute; bottom:-22px; z-index:9; font-size:20px; font-weight:600; width:30px; height:30px; background: var(--main_color); text-align:center; color:#fff; line-height:27px; border-radius: 30px;} .suicide .pointbox li:last-child{background: #e1f8c2;border: 3px solid #97C15F;} .suicide .pointbox li p{font-weight: 800;font-size: 1.1em;margin-right: 10px;} .suicide .pointbox li small{color: #828282;font-weight: 400;} @media all and (min-width:768px) { h1.sui_tit{margin-bottom:30px; font-size:1.5em;} .suicide .pointbox{display:flex; flex-wrap:wrap; gap:2%; margin-bottom:20px;} .suicide .pointbox li{width:32%;} .suicide .pointbox li:nth-child(2):before{top:15px; left:-22px;} .suicide .pointbox li:nth-child(2):after{top:15px; right:-22px;} } @media all and (min-width:1080px) { .suicide .clearfix.top{display:flex; flex-wrap:wrap; flex-direction: row;align-items: center;} .suicide .clearfix.top p{font-size:1.1em; line-height:1.6; } h1.sui_tit{text-align: left;} } @media all and (min-width:1200px) { .suicide .right img{ font-size:2em;margin: 0;} h1.sui_tit{ font-size:1.8em;} } @media all and (min-width:1400px) { h1.sui_tit{ font-size:2em;} .suicide .pointbox li{padding:20px;} .suicide .pointbox li:nth-child(2):before{top:22px; left:-22px;} .suicide .pointbox li:nth-child(2):after{top:22px; right:-22px;} .suicide .pointbox li p{font-weight: 800;font-size: 1.3em;margin-right: 15px;} .suicide .pointbox li small{font-size:1.1em} } /*도움방법*/ .help_box{} .go_btn{background: #b4d775;color: #fff;padding: 7px 10px;border-radius: 5px;display: block;text-align: left;font-weight: 500;margin-bottom: 40px;position: relative;} .go_btn:hover{background: var(--main_color)} .go_btn:after{background:url(../img/go_ico.png)no-repeat; display:block; content:''; width:40px; height:40px; background-size:100%;position: absolute;right: 10px;top: 0;} .help_box .help_cont{} .help_box .help_cont li{padding: 15px;border: 5px solid #f6f7f8;margin-bottom: 20px;} .help_box .help_cont li img{border-radius: 10px;margin-bottom: 15px; width:400px; margin:0 auto 15px; display:block;} .help_box .help_cont li h3{font-size: 1.1em;font-weight: 700;/*! color: var(--main_color); */margin-bottom: 10px;} .help_box .help_cont li span{background: #333;color: #fff;width: 25px;display: inline-block;height: 25px;border-radius: 30px;text-align: center;line-height: 25px;font-size: 0.9em;} .help_box .help_cont li:last-child{margin:0;} @media all and (min-width:768px) { .help_box .help_cont li{display:flex; flex-wrap:wrap;align-items: center;padding: 20px;margin-bottom: 30px;} .help_box .help_cont li img{width:200px; margin-right:30px; margin-bottom:0px;} .help_box .help_cont li .txt{width:calc(100% - 230px)} } @media all and (min-width:1200px) { .go_btn{width:230px;padding-left: 15px;} } /*자살유족*/ .survivor{} .survivor .clearfix .right .box{display: flex; flex-wrap: wrap;margin-bottom: 15px;} .survivor .clearfix .right .box:last-of-type{margin-bottom:0px;} .survivor .clearfix .right .box .table{width:100%;margin-top: 15px;} .survivor .clearfix .right .box .table td{border-bottom:1px solid #ddd; padding:10px;} .survivor .clearfix .right .box .table td:first-child{text-align:center;vertical-align: middle;background: #eaeaea;font-weight: 500;} .survivor .clearfix .right .box .table th{background: #8e8e8e;color: #Fff;padding: 5px;} .survivor .clearfix .right .box .table th:first-child{border-right:1px solid #ddd} .survivor .clearfix .right .box span{width:100%;} .survivor .clearfix .right .box .txt{width:100%;background: #fff;padding: 10px; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);} .survivor .mourning_li li{background: #f6f7f8;padding: 50px 15px 15px; position: relative;margin-bottom: 20px;} .survivor .mourning_li span{position: absolute; top:0; left:0; display:block; background:var(--sub_color2); color:#fff; padding:5px; text-align:center; font-weight:500;width: 100px;} .survivor .mourning_li img{background:#fff;margin: 0;width: 100%;margin-bottom: 20px;} .survivor .mourning_li dl{display: flex;flex-wrap: wrap;} .survivor .mourning_li dt{width: 3em;font-weight: 700;color: #616d7b;margin-bottom: 5px;} .survivor .mourning_li dd{width: calc(100% - 3em);} .survivor .mourning_li dd:last-of-type{width:100%;} @media all and (min-width:768px) { .survivor .mourning_li {display: flex; flex-wrap:wrap; gap:5%;} .survivor .mourning_li li{width:47.5%;padding: 50px 30px 30px;} .survivor .mourning_li .info02 li{width:100%;} .survivor .mourning_li dt{margin-bottom: 10px;} .survivor .clearfix .right .box .table td{padding:15px;} .survivor .clearfix .right .box span{width:20%;} .survivor .clearfix .right .box .txt{width:100%;background: #fff;padding:20px 15px;} .survivor .clearfix .right .box{margin-bottom: 30px;} .survivor .clearfix .right .box .table{margin-top: 20px;} } @media all and (min-width:1200px) { .survivor .clearfix .right .box span{width:15%} .survivor .clearfix .right .box .txt{width:100%;padding: 25px 30px;} .survivor .clearfix .right .box{margin-bottom: 40px;} .survivor .mourning_li li{padding: 60px 40px 30px;margin-bottom: 40px;} .survivor .mourning_li li:nth-child(3), .survivor .mourning_li li:nth-child(4){margin-bottom: 0px;} .survivor .mourning_li dt{margin-bottom: 15px;} .survivor .mourning_li span{padding:7px;} } /*원스톱서비스*/ .onestop ul.one_service{} .onestop ul.one_service li{position:relative; margin-bottom: 40px;-webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);background: #fff;} .onestop ul.one_service li:before{width:30px; height:30px; display:block; content:'';background: #677484;border-radius: 50px; position:absolute;bottom:-35.5px; left: 50%; transform: translateX(-50%);} .onestop ul.one_service li:after{display: block; clear: both; content: ""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; bottom: -23px; left: 48.8%; transform: translate(-50%); transform: rotate(135deg);} .onestop ul.one_service li:last-child{margin:0;} .onestop ul.one_service li:last-child:before, .onestop ul.one_service li:last-child:after{display:none} .onestop ul.one_service li h5{background: linear-gradient(110deg, #aab2bc 60%, #9fa8b3 100%);color: #fff;text-align: center;padding: 7px;} .onestop ul.one_service li p{background: #fff;text-align: center;padding: 15px;} .table table{width:100%;border-left: 1px solid #f1f1f1;border-top: 1px solid #f1f1f1;} .table tr{border-bottom: 1px solid #f1f1f1;} .table td{padding: 5px 10px;border-right: 1px solid #f1f1f1; vertical-align:middle;} .table td:first-child{background: #fafcfd; font-weight:500} .table td span.bg{background: #a7afb9; color:#fff; width:20px; height:20px; line-height:20px; border-radius:50%; display: inline-block;text-align:center;} .table th{background: #a7afb9; color:#fff; padding:5px; border-right:1px solid #ffffff4f;vertical-align: middle;} .business .table tr.first th:first-child{background: #677484;} @media all and (min-width:768px) { .onestop ul.one_service{display: flex; flex-wrap:wrap; gap:2%;} .onestop ul.one_service li{width:32%} .onestop ul.one_service li:before{width:30px; height:30px; display:block; content:'';background: #677484;border-radius: 50px; position:absolute; bottom:30%; right:0; left:103%; z-index:9} .onestop ul.one_service li:after{display: block; clear: both; content: ""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; bottom: 38%; right: 0; left:101%; transform: rotate(45deg);z-index: 10;} .onestop ul.one_service li:nth-child(4){margin:0;} } @media all and (min-width:1200px) { .onestop ul.one_service li:nth-child(1){width:16%} .onestop ul.one_service li:nth-child(2){width:11%} .onestop ul.one_service li:nth-child(3){width:20%} .onestop ul.one_service li:nth-child(4){width:22%} .onestop ul.one_service li:nth-child(5){width:23%} .onestop ul.one_service li{margin-bottom:0px;} .table td{padding: 10px 20px;} } @media all and (min-width:1400px) { .onestop ul.one_service li:nth-child(1) p, .onestop ul.one_service li:nth-child(2) p, .onestop ul.one_service li:nth-child(4) p{padding-top: 28px;} .onestop ul.one_service li:before{ bottom:30%; right:0; left:106%;} .onestop ul.one_service li:after{bottom: 38.5%; right: 0; left:103%;} } /*자조모임*/ .meeting .info02 li{padding: 15px 20px 15px calc(30px + 1em) !important;} .meeting .info02 li:last-child{margin:0px !important;} .meeting .info02 li:before{left:20px; top:15px;} /*심리부검*/ .autopsy .info02 li:last-child{margin:0px !important;} .autopsy_ico li{background: #fff;padding: 20px;margin-bottom: 15px;} .autopsy_ico li:last-child{margin:0;} .suicide .right .autopsy_ico li img{width:50px; height:50px;margin: 0;float: right;} .autopsy_ico li h4{font-weight: 800;margin-bottom: 5px;} .autopsy_ico li p{} .autopsy .box{box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin-bottom:20px;} .autopsy .box:last-child{margin:0;} .autopsy .txt{padding:15px;} @media all and (min-width:768px) { .autopsy_ico{display:flex; flex-wrap:wrap; gap:2%;} .autopsy_ico li:nth-child(2), .autopsy_ico li:nth-child(3){width:49%} .autopsy .box{margin-bottom:30px;} .autopsy .txt{padding:25px 20px;} } @media all and (min-width:1200px) { .autopsy_ico li{width:100%;padding: 25px;} .suicide .right .autopsy_ico li img{width:60px; height:60px;margin: 0;} } /*통계*/ .stats{} .stats ul{display: flex;flex-wrap: wrap;} .stats ul li{-webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);width: 100%;padding: 20px 15px;margin-bottom: 20px;position: relative;align-content: center;} .stats ul li:before{display:block; content:''; width:3px; height:20px; background: #ddd; position: absolute; bottom:20px; right:28.5px;} .stats ul li:after{display:block; content:''; width:20px; height:3px; background: #ddd; position: absolute; bottom:28.5px; right:20px;} .stats ul li:hover:before, .stats ul li:hover:after{background: var(--main_color)} .stats ul li a{display: flex;align-items: center; flex-wrap:wrap;align-content: center;} .stats ul li a img{width: 70px;height: 70px;background: #f8f8f8;border-radius: 60px;padding: 10px;margin-right: 20px;} .stats ul li a .txt{width: calc(100% - 90px);} .stats ul li a .txt h6{font-weight: 600;font-size: 1.1em;margin-bottom: 5px; color:#4d4d4d;} .stats ul li:hover a .txt h6{color:#333; font-weight:700} .stats ul li a .txt p{display: inline-block;margin-right: 10px;} .stats ul li a .txt b{color:var(--main_color);font-weight: 800;} .menuin{background:#fff; padding:20px 15px;border-radius: 10px;} .menuin h3{text-align: left;} .menuin dl{background: #ececec;border-radius: 10px;padding: 15px;display: flex;flex-wrap: wrap;text-align: left;} .menuin dt{width: 5em;font-weight: 600;} .menuin dd{width: calc(100% - 5em);margin-bottom: 10px;line-height: 1.5;} .menuin dd:last-child{margin-bottom:0px;} @media all and (min-width:768px) { .stats ul{gap:2%} .stats ul li{width:49%;margin-bottom: 30px;} .menuin{padding:30px 30px} } @media all and (min-width:1200px) { .stats ul{} .stats ul li{padding:30px 15px;} .stats ul li:before{bottom:30px; right:38.5px;} .stats ul li:after{bottom:38.5px; right:30px;} .stats ul li{width:23.5%;margin-bottom: 40px;} .stats ul.list02 li{width:48.5%;} .menuin{padding:50px 70px} .stats ul li a .txt b{font-size:0.9em} } /*준비중*/ .ready{text-align: center;border: 7px solid #f1f1f1;padding: 20px;color: #555;} .ready b{display: block;background: #f1f1f1;width: 50px;height: 50px;line-height: 50px;border-radius: 50px;margin: 0 auto;color: #a5a5a5;font-size: 1.3em;font-weight: 800;} .ready h2{margin: 15px 0px 5px;font-weight: 700;font-size: 1.3em;} .ready p{} @media all and (min-width:980px) { .ready{padding: 30px;} .ready h2{font-size: 1.5em;} } @media all and (min-width:1200px) { .ready{padding: 50px; width:1000px;} .ready h2{font-size: 1.8em;margin: 30px 0px 5px;} .ready b{font-size: 2.3em; width:80px; height:80px; line-height:80px;} } /*주요사업안내*/ .business .top{margin-bottom: 40px;} .business .flex_box{display: flex;flex-wrap: wrap;flex-direction: column-reverse;} .business .flex_box .right img{width: 200px;display: block;margin: 0 auto;} .business .content .box{margin-bottom:20px;} .business .content .box.last{margin:0px;} .business .content .txt{background:#f1f1f1;padding: 15px;} .business .processbox{} .business .processbox li{background: #fff;/*! border-top: 3px solid #ddd; */padding: 15px;text-align: center;font-weight: 500;color: #575757;margin-bottom: 40px;position: relative;-webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);} .business .processbox li:last-child{margin-bottom:0px;} .business .processbox li:hover{color: #333;} .business .processbox li:before{width: 30px; height: 30px; display: block; content: ''; background: #677484; border-radius: 50px; position: absolute; bottom: -35.5px; left: 50%; transform: translateX(-50%);} .business .processbox li:after{display: block; clear: both; content: ""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; bottom: -23px; left: 48.8%; transform: translate(-50%); transform: rotate(135deg);} .business .processbox li:last-child:after, .business .processbox li:last-child:before{display:none} .business .box03 li{-webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%); margin-bottom: 20px;background: #fff;} .business .box03 li h5{text-align: center; background: #677484; color: #fff; padding: 5px;} .business .box03 li h5 span{background: #fff; color:#677484;width: 25px;display: inline-block;height: 25px;border-radius: 50%;line-height: 25px;text-align: center;font-weight: 700;} .business .box03 li p{padding: 15px;} .business .box03 li p span{font-size:0.95em; color:#666; display:block; margin-top:15px;border-top: 1px solid #e6e6e6;padding-top: 15px;} .business .box h5{text-align: center;background: #677484;color: #fff;padding: 5px;} .business .box ul{-webkit-box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);background: #fff;padding: 15px;} .business .box li{width: 100%;} .business .mental .info02 li:before{left:9px;} .business .expenses h5{text-align: center;background: #677484;color: #fff;padding: 5px;} .business .expenses .detail{background: #ebedf0;padding: 15px;text-align: center;padding-top: 25px;position: relative;z-index: -1;margin-bottom: 30px;} .business .expenses .detail:before{width:1px; height:80%; background: #94a3b561; content:''; display: block;position: absolute;left: 50%;z-index: -1;} .business .expenses .detail li.e01{background: #94a3b5;color: #fff;font-weight: 500;margin-bottom: 15px;padding: 5px;} .business .expenses .detail li.e01.last{display: none;} .business .expenses .detail li.e02 p{background: #fff;padding: 5px;margin-bottom: 15px;position: relative;} .business .expenses .detail li.e02 span{background: #94a3b5;color: #fff;font-weight: 500;margin-bottom: 15px;padding: 5px;display: block;} .business .leftbox h5{text-align: center;background: #677484;color: #fff;padding: 5px;} .business .leftbox ul{background: #fff;padding: 10px;} .business .leftbox ul.flex{display: flex;flex-wrap: wrap;gap: 2%;} .business .leftbox ul.flex li{background: #f0f0f0; padding:5px 10px; border-radius:5px; margin-bottom:10px;} .business .leftbox .last{text-align: center;padding: 10px;font-weight: 600;color: var(--main_color);border-top: 1px solid #ddd;background: #fff;} @media all and (min-width:768px) { .business .leftbox{display:flex; flex-wrap:wrap; position:relative;} .business .leftbox.three:before{display: block; clear: both; content: ""; width: 10px; height: 10px; border-top: 2px solid #677484; border-right: 2px solid #677484; position: absolute; top: -28px; right: 50%; transform: rotate(135deg);z-index: 99;} .business .leftbox h5{width:100px; align-content: center;} .business .leftbox ul{width:calc(100% - 100px);padding: 20px;} .business .leftbox ul.flex li{margin:0;padding: 5px 15px;} .business .leftbox.three ul{width:calc(100% - 250px)} .business .leftbox.three .last{width:150px; border-left:1px solid #ddd; border-top:0px; align-content: center;} .business .flex_box .left{width: calc(100% - 250px);} .business .flex_box .right{width: 250px;} .business .flex_box{flex-direction:row;align-items: flex-end;} .business .processbox{display:flex; flex-wrap:wrap; gap:3%;} .business .processbox li{width:22.75%; margin-bottom:0px; align-content: center;} .business .processbox li:after{bottom: 50%; left: 100%; transform: rotate(45deg);} .business .processbox li:before{width: 30px; height: 30px; display: block; content: ''; background: #677484; border-radius: 50px; position: absolute; bottom: 35%; right: 0; left: 106%; z-index: 9;} .business .processbox li:after{display: block; clear: both; content: ""; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; bottom: 43%; left:103%; transform: rotate(45deg);z-index: 10;} .business .box03{display:flex; flex-wrap:wrap; gap:2%} .business .box03 li{width:32%;} .business .box03 li.w20{width:18.4%;} .business .box03 li.w50{width:49%;} .business .box03 li h5{padding:7px} .business .box03 li p{padding: 20px;} .business .box h5{padding: 7px;} .business .box li{padding: 10px 10px 10px calc(20px + 1em) !important;} .business .box .npd li{padding: 0px 0px 0px 15px !important;} .business .mental .info02 li:before{left:12px;} .business .box ul{padding:20px;} .education.business .box li{padding: 0px !important;} .business .expenses .detail{padding:30px;display: flex;flex-wrap: wrap; align-items: center; justify-content: space-between;width: 100%;gap: 5%;} .business .expenses .detail li.e02 span{display:none} .business .expenses .detail li.e01.last{display: block;} .business .expenses .detail li.e01{width:20%;position: relative;margin: 0;} .business .expenses .detail .bundle{width:50%;display: flex; flex-wrap: wrap; justify-content: space-between;position: relative;} .business .expenses .detail:before{display:none} .business .expenses .detail .bundle:before{display:block; content:''; width: 1px;height: 54%;background: #94a3b575;position: absolute;top: 23%;left: -5%;} .business .expenses .detail .bundle:after{display:block; content:''; width: 1px;height: 54%;background: #94a3b575;position: absolute;top: 23%;right: -5%;} .business .expenses .detail li.e02{width:43%;} .business .expenses .detail li.e02 p:last-of-type{margin-bottom:0px;} .business .expenses .detail li.e02 p:before{content:''; display:block; position: absolute;background: #94a3b575;width: 122%;height: 1px;left: -16px;top: 50%;z-index: -1;} .business .expenses .detail li:first-child.e02 p:before{width:133%} .business .expenses .detail li.e01:after{content:''; display:block; position: absolute;background: #94a3b575; width:20px; height:1px; right: -18px;bottom: 50%;} .business .expenses .detail li.e01.last:after{left:-18px;} .business .expenses .detail li.e02 p{height:90px; align-content: center; } } @media all and (min-width:980px) { .business .flex_box .left{width:70%} .business .flex_box .right{width:30%;} .business .flex_box .right img{width:250px;} .business .expenses .detail li.e02 p:before{left: -25px;} .business .expenses .detail li.e01:after{right: -25px;width:30px;} .business .expenses .detail li.e01.last:after{left:-25px; width:30px;} } @media all and (min-width:1200px) { .business.info01 .top h1.sui_tit{margin-bottom:0px !important;} .business .content .txt{background:#f4f4f4;padding: 20px 25px;} .business .flex_box .right img{width:320px;} .business .processbox{gap:5%;} .business .processbox li{width:21.25%;} .business .processbox li:before{left:111%;} .business .processbox li:after{left:108.5%;} .business .box ul{padding:30px;} .business .leftbox.three:before{top: -33px;} } /*4050 그대에게*/ .edu_Process {width:100%; padding:0; margin:0; list-style:none;} .edu_Process li {background:#fff; border-radius:12px; padding:20px; margin-bottom:20px;} .edu_Process li.bg {background:#fff url(../img/business/4050_bg01.png) bottom right 10% no-repeat; background-size:100%; border-radius:10px; padding:30px; font-size:1.2em; font-weight:700; color:#393939; /*! margin:0 0 15px 0; */} .edu_Process li.bg h3{font-size: 1.1em;font-weight: 800;margin-bottom: 5px;} .edu_Process li.bg span {background:#88b834;font-weight: 500; color:#fff; padding:5px 12px; border-radius:50px; display:block; font-size:15px; margin-bottom:10px;width: 100px;text-align: center;} .edu_Process li p {font-size: 16px;font-weight: 400;color: #686868;} .edu_Process li.bg.b01 {background-image:url(../img/business/4050_bg01.png);} .edu_Process li.bg.b02 {background-image:url(../img/business/4050_bg02.png);} .edu_Process li.bg.b03 {background-image:url(../img/business/4050_bg03.png);} .edu_Process li.bg.b04 {background-image:url(../img/business/4050_bg04.png);} .edu_Process li.bg.b05 {background-image:url(../img/business/4050_bg05.png);} @media all and (min-width:500px) { .edu_Process li.bg, .edu_Process li.bg.b02, .edu_Process li.bg.b03, .edu_Process li.bg.b04, .edu_Process li.bg.b05 {background-size:80%;} } @media all and (min-width:768px) { .edu_Process li {padding:25px;} .edu_Process li.bg, .edu_Process li.bg.b02, .edu_Process li.bg.b03, .edu_Process li.bg.b04, .edu_Process li.bg.b05 {background-size:50%; font-size:1.3em; padding:40px 30px 40px 30px;} .edu_Process li.bg span{display: inline-block;margin: 0;margin-right: 10px;} .edu_Process li.bg h3{margin-bottom: 10px;} } @media all and (min-width:1200px) { .edu_Process li {padding:30px; margin-bottom:30px;} .edu_Process li.bg, .edu_Process li.bg.b02, .edu_Process li.bg.b03, .edu_Process li.bg.b04, .edu_Process li.bg.b05 {background-size:30%; font-size:1.3em; padding:40px;} .edu_Process li p {font-size: 20px;} .edu_Process li.bg span{font-size:17px} } /*자살통계*/ .mob_txt{font-size: 0.9em;text-align: left;width: 100%;background: #fff;padding: 15px;border-radius: 10px;display: block;border: 1px solid #e5e5e5;font-weight: 500;color: #666;} .mob_txt span{background: #C3C3C3;color: #fff;font-weight: 800;padding: 1px 10px;border-radius: 50px;display: inline-block;margin-right: 5px;} .pop_tit_top .info_box{text-align: right;font-weight: 500;color: #666;position: relative;margin-bottom: 20px;} .pop_tit_top .info_box span{width:15px; height:15px; display: block;position: absolute;right: 4.6em;top: 3px;} .pop_tit_top .info_box span.bbox{background: #00a8f3;} .pop_tit_top .info_box span.ybox{background: #f2a326;} .pop_tit_top .info_box.w50{display:flex; flex-wrap:wrap; justify-content: flex-end;} .pop_tit_top .info_box.w50 .in{width:80px} .pop_tit_top .info_box.w50 span{right: 2.2em;} .pop_tit_top .info_box.w50 span.bbox{right: 6.8em;} #box01 .chart-wrap {width: 100%; padding: 20px 10px; font-family: "Noto Sans KR", sans-serif;} #box01 .chart-wrap .chart-title {display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 15px;} #box01 .chart-wrap .legend-box {width: 10px;height: 10px;background: #1E88E5;display: inline-block;border-radius: 2px;} #box01 .chart-wrap .chart {display: flex;align-items: flex-end;height: 300px;gap: 14px;} #box01 .chart-wrap .bar-item {display: flex;flex-direction: column;align-items: center;width: 45px;} #box01 .chart-wrap .bar {width: 40px; background: #4a4a61; height: 0; border-radius: 4px 4px 0 0; animation: grow 1.2s ease-out forwards;} #box01 .chart-wrap .bar.national {background: #00a8f3;} #box01 .chart-wrap .bar.gyeongnam {background: #f4a100;} #box01 .chart-wrap .bar-value {margin-top: 5px; font-size: 14px; font-weight: 600;} #box01 .chart-wrap .bar-label { margin-top: 10px; /*! font-size: 13px; */font-weight: 700;color: #333;} /* 애니메이션: 아래에서 위로 */ @keyframes grow {from { height: 0; }to { height: calc((var(--val) / 40) * 260px); }} #box02 .line-chart-wrap{width:100%; margin:20px 0; overflow-x:auto;background: #f8f8f8;border-radius: 10px;padding: 20px 15px;} #box02 #lineChart{max-width:1000px; height:260px; display:block;margin: 0 auto;} #box02 .line-path { stroke-width: 4; fill: none; animation: drawLine 2s ease-out forwards;} #box02 .nation-line {stroke: #0195ff;} #box02 .gyeongnam-line {stroke: #f2a326;} #box02 .line-dot {stroke: #ffffff; stroke-width: 2;} #box02 .nation-line + .line-dot, #box02 .nation-line ~ .line-dot.nation-line {fill: #0195ff;} #box02 .gyeongnam-line + .line-dot, #box02 .gyeongnam-line ~ .line-dot.gyeongnam-line {fill: #f2a326;} /* 애니메이션: 왼쪽→오른쪽으로 선이 그려지는 효과 */ @keyframes drawLine {from {stroke-dashoffset: var(--len);}to {stroke-dashoffset: 0;}} #box03 .mob_txt{margin-top:15px;} #box03 .dual-chart { width: 100%;min-width: 320px; margin: 20px auto; display: flex; align-items: flex-end; gap: 55px; position: relative; font-family: "Noto Sans KR", sans-serif;padding: 0px 15px;} #box03 .dual-chart::before {content: none;} #box03 .dual-chart .year {position: relative; width: 80px; text-align: center; z-index: 1;} #box03 .dual-chart .bar-wrap {display: flex; justify-content: center; align-items: flex-end; gap: 12px; height: 200px;} #box03 .dual-chart .bar { width: 32px; height: 0; border-radius: 4px 4px 0 0; animation: growBar 1.2s ease-out forwards;} #box03 .dual-chart .bar.blue { background: #00a8ff; } #box03 .dual-chart .bar.orange { background: #f4a100; } #box03 .dual-chart .value-wrap {display: flex; justify-content: center; gap: 14px; margin-top: 6px;} #box03 .dual-chart .bar-value {font-size: 14px; font-weight: 700;} #box03 .dual-chart .year-label { margin-top: 10px; font-size: 1em;font-weight: 800;color: #333;} @keyframes growBar {from { height: 0; } to { height: calc((var(--val) / 45) * 200px); }} #box04 .hchart{width:100%;max-width:900px;margin:20px 0; position:relative;background: #f8f8f8;border-radius: 10px;padding: 20px 15px;} #box04 .hchart:before{content:none;} #box04 .hchart .row{display:flex;align-items:center;margin-bottom:14px;position:relative;z-index:1;} #box04 .hchart .label{width:50px;font-size:15px;color:#333;text-align:right;margin-right:20px;font-weight:700;} #box04 .hchart .bar{position:relative;flex:1;height:26px;background:#fff;border-radius:4px;margin-right:10px;overflow:hidden;} #box04 .hchart .bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;animation:growX 1.3s ease-out forwards;} #box04 .hchart .bar>span{position:absolute;left:calc((var(--val)/50)*100% + 6px);top:50%;transform:translateY(-50%);font-size:14px;font-weight:700;color:#515151;white-space:nowrap;z-index:2;} #box04 .hchart .purple .bar::before{background:#4b2ea3;} #box04 .hchart .green .bar::before{background:#62b32e;} #box04 .hchart .blue .bar::before{background:#14a3ff;} #box04 .hchart .orange .bar::before{background:#e88927;} /* 왼쪽에서 오른쪽으로 채워지는 애니메이션 (max 40 기준) */ @keyframes growX{from{width:0;}to{width:calc((var(--val)/50)*100%);}} /*모바일 드래그 공통*/ .chart-responsive{width:100%;overflow-x:auto;background: #f8f8f8;padding: 0px 15px;border-radius: 10px;} .chart-responsive .dual-chart{transform-origin:left top;} @media (max-width:480px){ .chart-responsive .dual-chart{transform:scale(calc(100vw / 320));} } @media all and (min-width:768px){ .mob_txt{font-size: 0.8em;padding: 10px} #box04 .hchart .label{width:100px;} #box04 .hchart{padding:30px 15px;} #box02 .line-chart-wrap{padding:30px 15px;} .pop_tit_top{display:flex; flex-wrap:wrap; justify-content: space-between; align-items: center;} } @media all and (min-width:1200px){ #box03 .mob_txt{margin-top: 20px;} #box04 .hchart .label{width:140px;} #box04 .hchart{max-width:1200px;margin-top:40px;} } @media all and (min-width:1500px){ .mob_txt{display:none} .chart-responsive{margin-top:40px;padding: 10px 20px;} #box02 .line-chart-wrap{padding:50px 20px;} #box04 .hchart{padding:50px 20px;} #box04 .hchart .label{font-size: 18px;} } /*통계페이지 상단 자료부분*/ .stats_top .location_info{position:relative; margin-bottom:25px;} .stats_top .location_info dl.tit{position:relative; max-width:280px; margin:0 auto; margin-bottom:25px;} .stats_top .location_info dl.tit dt{text-indent:-999999px; width:100px; height:100px; margin-right:20px; float:left; border-radius:500px; background-size:90% !important;} .stats_top .location_info dl.tit dt.map_gn{background:#ffffff url(../img/map/org_map_gn.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_cw_all{background:#ffffff url(../img/map/org_map_cw_all.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_cw{background:#ffffff url(../img/map/org_map_cw.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_ms{background:#ffffff url(../img/map/org_map_ms.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_jh{background:#ffffff url(../img/map/org_map_jh.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_jj{background:#ffffff url(../img/map/org_map_jj.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_ty{background:#ffffff url(../img/map/org_map_ty.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_sc{background:#ffffff url(../img/map/org_map_sc.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gh{background:#ffffff url(../img/map/org_map_gh.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_my{background:#ffffff url(../img/map/org_map_my.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gj{background:#ffffff url(../img/map/org_map_gj.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gn{background:#ffffff url(../img/map/org_map_gn.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_ys{background:#ffffff url(../img/map/org_map_ys.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gn{background:#ffffff url(../img/map/org_map_gn.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_ur{background:#ffffff url(../img/map/org_map_ur.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_ha{background:#ffffff url(../img/map/org_map_ha.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_cn{background:#ffffff url(../img/map/org_map_cn.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gs{background:#ffffff url(../img/map/org_map_gs.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_nh{background:#ffffff url(../img/map/org_map_nh.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_hd{background:#ffffff url(../img/map/org_map_hd.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_snc{background:#ffffff url(../img/map/org_map_snc.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_hy{background:#ffffff url(../img/map/org_map_hy.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_gc{background:#ffffff url(../img/map/org_map_gc.png) no-repeat center center;} .stats_top .location_info dl.tit dt.map_hc{background:#ffffff url(../img/map/org_map_hc.png) no-repeat center center;} .stats_top .static_info .gnrank dl.gn_cw:before{background:url(../img/map/gr_map_cw.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_ms:before{background:url(../img/map/gr_map_ms.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_jh:before{background:url(../img/map/gr_map_jh.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_jj:before{background:url(../img/map/gr_map_jj.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_ty:before{background:url(../img/map/gr_map_ty.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_sc:before{background:url(../img/map/gr_map_sc.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_gh:before{background:url(../img/map/gr_map_gh.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_my:before{background:url(../img/map/gr_map_my.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_gj:before{background:url(../img/map/gr_map_gj.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_ys:before{background:url(../img/map/gr_map_ys.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_ur:before{background:url(../img/map/gr_map_ur.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_ha:before{background:url(../img/map/gr_map_hn.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_cn:before{background:url(../img/map/gr_map_cn.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_gs:before{background:url(../img/map/gr_map_gs.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_nh:before{background:url(../img/map/gr_map_nh.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_hd:before{background:url(../img/map/gr_map_hd.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_snc:before{background:url(../img/map/gr_map_snc.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_hy:before{background:url(../img/map/gr_map_hy.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_gc:before{background:url(../img/map/gr_map_gc.png) no-repeat center center} .stats_top .static_info .gnrank dl.gn_hc:before{background:url(../img/map/gr_map_hc.png) no-repeat center center} .stats_top .location_info dl dd{width:calc(100% - 120px); float:left; font-size:1.2em; font-weight:600; line-height:1.3} .stats_top .location_info dl dd.per{font-size:2em;} .stats_top .location_info dl dd.per b{font-size:1.5em; font-weight:700} .stats_top .location_info dl dd span{color:var(--main_color);font-weight: 800;} .stats_top .location_info dl:after{content:''; clear:both; display:block} .stats_top .location_info p{padding-left:20px; border-left:3px solid #a2c183;} .stats_top .static_info .box{background:#ffffff; padding:15px 20px; \\:1px solid #e6e6e6; margin-bottom:20px; font-weight:600} .stats_top .static_info .box dt, .stats_top .static_info .box h4{font-size:1.1em; font-weight:600} .stats_top .static_info .box dd b{color:var(--main_color); font-weight:800} .stats_top .static_info dl.box{padding-left:120px; position:relative;} .stats_top .static_info dl.box:before{content:''; width:80px; height:80px; background:#f8f8fa; border-radius:500px; position:absolute; left:20px; top:0; bottom:0; margin:auto;} .stats_top .static_info dl.box:after{content:''; width:80px; height:80px; background-size:100% !important; border-radius:500px; position:absolute; left:20px; top:0; bottom:0; margin:auto;} .stats_top .static_info dl.box.average:after{background:url(../img/map/map_all.png) no-repeat center center;} .stats_top .static_info dl.box.average.gn:after{background:url(../img/map/bl_map_gn.png) no-repeat center center; background-size:80% !important} .stats_top .static_info dl.box.overyear:after{background:url(../img/map/ic_chart.png) no-repeat center center;} .stats_top .static_info .box .per{font-size:1.2em; } .stats_top .static_info .box .per.up, .stats_top .static_info .box .per.down, .stats_top .static_info .box .per.same{padding-left:20px; position:relative;} .stats_top .static_info .box .per.up:before, .stats_top .static_info .box .per.down:before{content:''; display:block; position:absolute; border-width:8px; top:25%; left:0; bottom:0; height:0; border-style:solid; border-color:transparent transparent #f89549;} .stats_top .static_info .box .per.down:before{top:auto; bottom:25%; border-color:#174ac0 transparent transparent} .stats_top .static_info .box .per.same:before{content:''; display:block; position:absolute; top:0; left:0; bottom:0; width:10px; height:2px; background:#808080; margin:auto;} .stats_top .static_info .box .per span{font-size:2em; font-weight:700} .stats_top .static_info .box .tit{font-size:1.8em;} .stats_top .static_info .gnrank {clear:both; padding:15px} .stats_top .static_info .gnrank h4{margin-bottom:10px; } .stats_top .static_info .gnrank dl{float:left; width:33.33%; text-align:center} .stats_top .static_info .gnrank dt{font-size:0.85em} .stats_top .static_info .gnrank dt span{display:inline-block; padding:1px 7px; background:var(--sub_color); color:#ffffff; border-radius:500px} .stats_top .static_info .gnrank:after{content:''; display:block; clear:both;} .stats_top .static_info .nmrank {clear:both;} .stats_top .static_info .nmrank h4{margin-bottom:10px; } .stats_top .static_info .nmrank dl{float:left; width:33.33%; text-align:center} .stats_top .static_info .nmrank dt{font-size:0.85em; color:#808080} .stats_top .static_info .nmrank dt span{display:inline-block; } .stats_top .static_info .nmrank:after{content:''; display:block; clear:both;} .stats_top .static_info .sido{clear:both; display:block} .stats_top .static_info .sido h4{margin-bottom:10px} .stats_top .static_info .sido dl{position:relative} .stats_top .static_info .sido dt{font-size:0.9em; color:#343946;} .stats_top .static_info .sido dd.tit{font-size:1.6em} .stats_top .static_info .sido .male{width:60%; float:left;} .stats_top .static_info .sido .male:after{content:''; clear:both; display:block;} .stats_top .static_info .sido .male dl{float:left; width:50%;} .stats_top .static_info .sido .old{width:40%; float:left;} .stats_top .static_info .sido dd.tit span{font-size:0.7em} .stats_top .static_info .sido:after{content:''; clear:both; display:block;} .stats_top .static_info .sido dl.ic_years dt span{display:inline-block; font-size:0.85em; padding:1px 5px; background:#f9a607; color:#ffffff; border-radius:500px} .stats_top .static_info .sido dl.ic_years dd:last-child{font-size:0.9em} @media all and (min-width:640px) { .stats_top h1.sui_tit.ver02{font-size:1.1em} .stats_top .static_info dl.box.average, .stats_top .static_info dl.box.overyear{width:48.5%; float:left; margin-right:3%} .stats_top .static_info dl.box.overyear{margin-right:0%} .stats_top .static_info dl.box.average.long{width:100%; float:none; margin-right:0} .stats_top .static_info .gnrank dl{padding-left:90px; position:relative; text-align:left;} .stats_top .static_info .gnrank dl:before{content:''; display:block; position:absolute; left:0px; top:0; bottom:0; width:70px; height:70px; margin:auto; background-size:100% !important} .stats_top .static_info .nmrank dt{font-size:0.9em; } .stats_top .static_info .sido dl{padding-left:90px; position:relative; text-align:left;} .stats_top .static_info .sido dl:before{content:''; display:block; position:absolute; left:0px; top:0; bottom:0; width:70px; height:70px; margin:auto; background-size:100% !important} .stats_top .static_info .sido dl.ic_male:before{background:url(../img/ic_male.png) no-repeat center center} .stats_top .static_info .sido dl.ic_female:before{background:url(../img/ic_female.png) no-repeat center center} .stats_top .static_info .sido dl.ic_years:before{background:url(../img/ic_years.png) no-repeat center center; bottom:auto; top:5px} } @media all and (min-width:1024px) { .stats_top h1.sui_tit.ver02{font-size:1.2em} .stats_top .conh3{text-align:left; margin-bottom:30px !important} .stats_top .location_info{float:left; width:40%; margin-right:3%;} .stats_top .location_info p{font-size:1.1em} .stats_top .location_info dl.tit{margin-bottom:30px; text-align:left; max-width:100%} .stats_top .location_info dl.tit dt {width:150px; height:150px; margin-right:30px} .stats_top .location_info dl dd{width:calc(100% - 180px)} .stats_top .location_info dl dd.per{font-size:2.8em} .stats_top .static_info{float:left; width:57%;} .stats_top:after{content:''; clear:both; display:block;} .stats_top .static_info .box{padding:20px 20px} .stats_top .static_info dl.box{padding-left:20px; padding-right:100px;} .stats_top .static_info dl.box:before, .stats_top .static_info dl.box:after{left:auto; right:20px;} .stats_top .static_info .sido dl{padding-left:70px; } .stats_top .static_info .nmrank h4{margin-bottom:20px} .stats_top .static_info .nmrank dl{ position:relative; text-align:left; } .stats_top .static_info .nmrank dt{font-size:1em; } } @media all and (min-width:1200px) { .stats_top h1.sui_tit.ver02{font-size:1.5em} .stats_top .location_info dl.tit dt {width:190px; height:190px; margin-right:50px} .stats_top .location_info dl dd{width:calc(100% - 240px); font-size:1.4em} .stats_top .location_info dl dd.per{margin-bottom:10px} .stats_top .location_info dl dd.per.long {font-size:2.3em} .stats_top .static_info .box{padding:30px} .stats_top .static_info dl.box{padding-left:30px; margin-bottom:25px } .stats_top .static_info .box:last-child{margin:0} .stats_top .static_info dl.box:before, .stats_top .static_info dl.box:after {right:30px;} .stats_top .static_info .sido dt{font-size:1.1em} .stats_top .static_info .sido dd.tit{font-size:1.8em} .stats_top .static_info .sido dl.ic_years dd:last-child{font-size:1em} .stats_top .static_info .sido dl{padding-left:80px; } }