@charset "utf-8";


.tbl-respon.wide {width:100%; overflow:auto;}
.tbl-respon.wide .tip {display:block;}
.tbl-respon.wide .tbl {width:1400px;}
.tbl.fit th, .tbl.fit td {padding:.44em; font-size:.9em;}


@media all and (min-width:780px){
	.tbl-respon.wide .tbl {width:1200px!important;}
	
}


/* 보건위생 메인 */
#main_content{position:relative; width:100%; margin-top:2.352941em;}
#main_content * {box-sizing: border-box;}
#main_content > div{position:relative; width:100%;}
#main_content > div + div {margin-top:30px;}
#main_content a[target="_blank"]:after {display:none;}

#main_content #visual {width:640px; height:540px; float:left; border:1px solid #ddd; border-radius:15px; overflow:hidden;}
#main_content #visual a {display:block;}
#main_content #visual a img {display:block; width:100%;}
#main_content #quick { width:420px; height:540px; float:right; border:1px solid #ddd; border-radius:15px; padding:10px 15px;}
#main_content #quick li {width:33.333333%; float:left; text-align:center;}
#main_content #quick li a {display:block; height:130px; font-size:16px; }
#main_content #quick li a span {display:block; width:70px; height:70px; margin:0 auto 5px; border-radius:40px; overflow:hidden;}
#main_content #quick li a em {display:block; color:#333; line-height:1.2;}

#main_content #quick li a .ico01 {background:url(../img/sub08/0800_ico01.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico02 {background:url(../img/sub08/0800_ico02.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico03 {background:url(../img/sub08/0800_ico03.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico04 {background:url(../img/sub08/0800_ico04.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico05 {background:url(../img/sub08/0800_ico05.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico06 {background:url(../img/sub08/0800_ico06.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico07 {background:url(../img/sub08/0800_ico07.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico08 {background:url(../img/sub08/0800_ico08.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico09 {background:url(../img/sub08/0800_ico09.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico10 {background:url(../img/sub08/0800_ico10.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico11 {background:url(../img/sub08/0800_ico11.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico12 {background:url(../img/sub08/0800_ico12.svg) no-repeat center center; background-size:100% auto;}
#main_content #quick li a .ico13 {background:url(../img/sub08/0800_ico13.svg) no-repeat center center; background-size:100% auto;}

#main_content #quick li a:hover span,
#main_content #quick li a:focus span {background-color:#F0ECFF;}
#main_content #quick li a:hover em,
#main_content #quick li a:focus em {font-weight:700; text-decoration:underline;}

#main_content #quick li[data-name="보건증"] a span {background-color:#F0ECFF;}
#main_content #quick li[data-name="보건증"] a em {font-weight:700;}

#main_content #board {position:relative; width:640px; height:370px; float:left;}
#main_content #board h3{font-size:32px; font-weight:700; color:#AF366C; margin-bottom:15px;}
#main_content #board ul{border-top:2px solid #333;}
#main_content #board ul li {position:relative; width:100%; padding:15px 10px 15px 20px; border-bottom:1px solid #ddd;}
#main_content #board ul li:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:10px; height:10px; border:3px solid #AF366C; border-radius:5px; box-sizing:border-box;}
#main_content #board ul li a {display:inline-block; vertical-align: middle; width:calc(100% - 100px); font-weight:700; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#main_content #board ul li span {display:inline-block; vertical-align: middle; font-size:16px; color:#777;}
#main_content #board .more{position:absolute; top:.25em; right:0; width:40px; height:40px; border-radius:20px; text-indent:-9999px; overflow:hidden; background:#37375b url(../img/sub08/0800_more.svg) no-repeat center center; background-size:100% auto;}
#main_content #board ul li a:hover,
#main_content #board ul li a:focus {text-decoration:underline;}

#main_content #board .none{width:100%; text-align:center;}

#main_content #banner{position:relative; width:420px; height:310px; float:right;}
#main_content .allLook {position:relative; display:block; background: linear-gradient(118deg, #138BCE 0.67%, #5A1EBB 99.44%); border-radius:3em; margin-bottom:5px;}
#main_content .allLook:after {content:''; position:absolute; bottom:0; right:30px; width:130px; height:60px; background:url(../img/sub08/0800_img01.svg) no-repeat bottom right; background-size: auto 100%;}
#main_content .allLook span {color:#fff; font-size:24px; font-weight:700; padding:10px 30px; line-height:60px;}
#main_content .time {border-radius: 30px 15px 15px 15px; background: linear-gradient(118deg, #5546A8 0.67%, #8734A3 99.44%); padding:2px;}
#main_content .time:after {content:''; position:absolute; top:-100px; right:-100px; width:240px; height:240px; border:70px solid rgba(255, 255, 255, .1); border-radius:120px; box-sizing:border-box; }
#main_content .time .tit {color:#fff; font-size:24px; font-weight:700; text-align:left; padding:10px 30px; word-break:keep-all;}
#main_content .time div {padding:8px 20px; border-radius:13px 30px 13px 13px; background:#fff; }
#main_content .time dl {width:100%; display:table; padding:3px 0; font-size:16px;}
#main_content .time dt {display:table-cell; vertical-align:top; width:110px;  }
#main_content .time dt span {position:relative; display:block; font-weight:700;  padding-left:10px;}
#main_content .time dt span:before {content:''; position:absolute; left:0; top:50%; margin-top:-2px; width:4px; height:4px; background:#8734A3; border-radius:2px;}
#main_content .time dd {display:table-cell; vertical-align:top;}

#main_content .preInfo {position:relative; display:block; background:linear-gradient(118deg, #ba25d3 0.67%, #8419d5 99.44%); border-radius:3em; margin-bottom:5px;}
#main_content .preInfo span {color:#fff; font-size:24px; font-weight:700; padding:10px 30px; line-height:60px;}
#main_content .preInfo:after {content:''; position:absolute; bottom:0; right:30px; width:130px; height:60px; background:url(../img/sub08/0800_img02.svg) no-repeat bottom right; background-size: auto 100%;}

@media all and (max-width:1400px) {
    #main_content #quick {width:400px; padding:10px 5px;}
    #main_content #banner {width:400px;}
}

@media all and (max-width:1024px) {
    #main_content #visual {width:100%; height:auto; float:none;}
    #main_content #quick {width:100%; height:auto; padding:15px; margin-top:30px; float:none;}
    #main_content #quick li {width:20%;}
    #main_content #board {width:calc(100% - 430px); }
}

@media all and (max-width:820px) {
    #main_content #board {width:100%; height:auto; float:none; }
    #main_content #banner {width:100%; max-width:100%; height:auto; float:none; margin-top:30px;}
}

@media all and (max-width:768px) {
    #main_content #quick li {width:25%;}
    #main_content .time ul li span { font-size:15px;}
}

@media all and (max-width:520px) {
    #main_content #quick {padding:10px;}
    #main_content #quick li {width:33.33333%;}
    #main_content #quick li a {height:130px; font-size:15px;}
    #main_content #quick li a span {width:70px; height:70px; margin:0 auto;}
    
    #main_content #board h3 {font-size:24px;}
    #main_content #board .more {top:5px; width:30px; height:30px;}
    #main_content #board ul li span { font-size:15px;}

    #main_content #board ul li {padding:15px 10px 15px 15px;}
    #main_content #board ul li:before {top:35%; width:8px; height:8px; border-width:2px;}
    #main_content #board ul li a {display:block; width:100%;}
    #main_content #board ul li span {display:block; width:100%;}

	/* #main_content .allLook:after,
	#main_content .preInfo:after  {height:50px;} */
	
    #main_content .time {border-radius:30px 10px 10px 10px;}
    #main_content .time div {border-radius:8px 30px 8px 8px; padding:0 15px;}
}

@media all and (max-width:420px) {
    #main_content #quick li {width:50%;}
    
    #main_content .allLook:after,
	#main_content .preInfo:after  {display:none;}
    #main_content .allLook, 
    #main_content .time .tit,
	#main_content .preInfo {text-align:center;}
    #main_content .allLook span, 
    #main_content .time .tit,
	#main_content .preInfo span {font-size:20px;}
}



/* 한눈에 보이는 보건소 */
.allLook {position:relative;}
.allLook .item {position:relative; display:table; width:100%; padding:1.5em; border-radius:.5em; border:1px solid #ddd;}
.allLook .item + .item {margin-top:1em;}
.allLook .title {display:table-cell; width:12em; vertical-align:middle; word-break:keep-all;}
.allLook .title span {position:relative; display:block; font-weight:700; padding-top:5em; text-align:center;}
.allLook .link {display:table-cell; vertical-align:middle; padding-left:2em;}
.allLook .link li {position:relative; width:50%; float:left; margin:.25em 0; padding-left:.75em;}
.allLook .link li:before {content:''; position:absolute; left:0; top:.6em; width:4px; height:4px; background:#ddd;}
.allLook .link li a {color:#555;}
.allLook .link li a:hover {text-decoration:underline; color:#FF6CA9;}

.allLook .item .title span:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:4.5em; height:4.5em;}
.allLook .item:nth-child(1) .title span:before {background:url(../img/sub08/0204_ico01.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(2) .title span:before {background:url(../img/sub08/0204_ico02.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(3) .title span:before {background:url(../img/sub08/0204_ico03.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(4) .title span:before {background:url(../img/sub08/0204_ico04.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(5) .title span:before {background:url(../img/sub08/0204_ico05.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(6) .title span:before {background:url(../img/sub08/0204_ico06.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(7) .title span:before {background:url(../img/sub08/0204_ico07.svg) no-repeat center center; background-size:100% auto;}
/*.allLook .item:nth-child(8) .title span:before {background:url(../img/sub08/0204_ico08.svg) no-repeat center center; background-size:100% auto;}*/
.allLook .item:nth-child(8) .title span:before {background:url(../img/sub08/0204_ico09.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(9) .title span:before {background:url(../img/sub08/0204_ico10.svg) no-repeat center center; background-size:100% auto;}
.allLook .item:nth-child(10) .title span:before {background:url(../img/sub08/0204_ico11.svg) no-repeat center center; background-size:100% auto;}


@media all and (max-width:900px) {
	.allLook .link li {width:100%; float:none; }
}

@media all and (max-width:580px) {
	.allLook .item {display:block;}
	.allLook .title {display:block; width:100%; padding-bottom:1.5em;}
	.allLook .link {display:block; width:100%; padding-left:0;}
}



/* 오시는길 */
.mapWrap {position:relative;}
.mapWrap:after {content:''; display:block; border:1px solid #ddd; border-radius:1.176em; position:absolute; top:1.764em; right:0; bottom:0; left:1.764em; z-index:-1;}
.mapWrap .mapBoxWrap {margin-top:10px; margin-right:1.764em; border-radius:1.176em; overflow:hidden;}
.mapWrap .mapBoxWrap .map_box {margin-top:0; border-radius:1.176em;}
.mapWrap .mapBoxWrap .map_border {display:none;}
.mapWrap .mapInfo {padding:1.764em 1.764em 1.764em 4.117em;}
.mapWrap .mapInfo >ul >li {padding:.324em 0 .324em 9.176em; margin-bottom:.588em; position:relative;}
.mapWrap .mapInfo >ul >li:last-child {margin-bottom:0;}
.mapWrap .mapInfo >ul >li:before {content:''; display:block; width:2.117em; height:2.117em; background-size:auto !important; border-radius:50%; position:absolute; top:0; left:0;}
.mapWrap .mapInfo >ul >li.add:before {background:#333 url(/depart/img/sub08/ico_map_info01.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li.cal:before {background:#333 url(/depart/img/sub08/ico_map_info02.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li.fax:before {background:#333 url(/depart/img/sub08/ico_map_info03.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li.tim:before {background:#333 url(/depart/img/sub08/ico_map_info04.svg) no-repeat 50% 50%;}
.mapWrap .mapInfo >ul >li >strong {display:inline-block; position:absolute; top:.324em; left:3.294em;}
.mapTraffic {padding:1.764em 1.764em 1.764em 9.411em; margin-top:2.352em; background:#f8f8f8; border-radius:2.94em 1.176em 1.176em 1.176em; position:relative;}
.mapTraffic .icon {width:5.882em; height:5.882em; background:#fff; border-radius:1.764em; position:absolute; top:-1.176em; left:1.764em; box-shadow:0 4px 16px rgba(0,0,0,.08);}
.mapTraffic .icon img {display:block; position:absolute; top:50%; left:50%; height:3.764em; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);}
.mapTraffic >p {margin-bottom:.9em;font-size:1.294em; font-weight:600; color:#E3276B;}
.tab_detail {display:none;}

.map_con .box {height:auto; padding:1em; border:1px solid #7681a8; border-top-width:0; position:relative; left:-1px;}
.map_con .box .title {font-weight:600;}
.map_con .box .body {font-size:.82em;}
.map_con .box .map_call {font-size:.82em; color:#666;}

@media all and (max-width:640px) {
	.mapWrap:after {display:none;}
	.mapWrap .mapBoxWrap {margin-right:0;}
	.mapWrap .mapInfo {padding:1.764em 0; border-bottom:1px solid #ddd;}
	.mapTraffic {padding:5.8em 1.764em 1.764em;}
	.mapTraffic >p {position:absolute; top:1.7em; left:7em;}
}



/* 초월보건지소 */
.sub8_030301{margin-bottom:50px;}
.box-img01 {display:block;}


/* 치매치료관리비지원 */
.dementia_process { margin-top:20px; background:url(/depart/img/sub08/bg_process.png) 20px 89px no-repeat; }
.dementia_process > ul > li { margin-top:20px; }
.dementia_process > ul > li:first-child { margin-top:0; }
.dementia_process > ul > li > ul > li { float:left; font-size:15px; letter-spacing:-1px; }
.dementia_process ul li li div { width:95%; margin:0 auto; text-align:center; padding:10px 0; box-sizing:border-box; border-radius:10px; background:#f1f9e6; border:2px solid #daebc2; }
.dementia_process ul li li div p { box-sizing:border-box; }
.dementia_process li.step01 { width:40%; margin-left:4%; }
.dementia_process li.step02 { position:relative; width:56%; }
.dementia_process li.step02 div { background:#fff3e5; border:2px solid #ffe8cb; }
.dementia_process li.step02 div span { display:block; }
.dementia_process li.step02:before { content:''; border-top:10px solid #92a3a0; border-left:10px solid transparent; border-right:10px solid transparent; width:0px; height:0px; position:absolute; margin-top:-14px; margin-left:-5px; left:50%; }
.dementia_process > ul > li:first-child li.step02:before { display:none; }
.dementia_process ul li ul li li { position:relative; text-align:left; padding-left:18px; }
.dementia_process ul li ul li li:before { content:''; position:absolute; width:11px; height:11px; left:0; top:4px; background:url(/common/img/common/spr_bu.png) no-repeat 0 -109px; }
.dementia_process ul li ul:after { content:''; display:block; clear:both; }
.dementia_process li.var { position:relative; }
.dementia_process li.var:after{ content:''; display:block; width:27px; height:1px; border-top:2px solid #0567ad; position:absolute; left:20px; top:50%; margin-top:-1px; }

@media all and (max-width:1024px){
	#main_content .left_area{width:100%; text-align:center;}	#main_content .right_area{float:left; width:100%;}

	#info{padding-bottom:2em;}
	#link{float:left; width:50%; margin:0;}
	#link li {width:32%;}
	#link li:first-child,#link li:nth-child(2) {margin:0 2% 0 0;}
	#link li a{height:126px; padding:30px 0 0 0;}
	#link li a .ico{margin-bottom:20px;}
	#banner{float:right; width:50%; max-width:428px;}
	#board ul{top:40px;}
}
@media all and (max-width:975px){
	.dementia_process { background-position:10px 89px; }
	.dementia_process li.var:after { left:10px; }
}

@media all and (max-width:820px){
	#link,
	#banner{float:none; width:100%; margin:0 auto;}
	#link{margin-bottom:1em;}
	#link li {width:32%; font-size:14px;}
	#link li a{height:90px; padding:1.2em 0 0 0;}
	#link li a .ico{margin-bottom:0.8em;}
	#link li a em br{display:none;}
}

@media all and (max-width:770px){
	#info li{font-size:14px; line-height:130%;}
	#info li .ico{width:80px; height:80px; background-position:21px 18px;}
	#info li.list2 .ico{background-position:-102px 18px;}
	#info li.list3 .ico{background-position:-230px 18px;}
	#info li.list4 .ico{background-position:-355px 18px;}
	#info li.list5 .ico{background-position:-480px 18px;}

	#board {height:315px;}
	#board h3{font-size:20px;}
	#board ul li:first-child a .title{font-size:18px;}
	#board ul {top:35px;}
	#board ul li{padding:0.2em 0;}
	#board .more{width:25px; height:25px; background-size:25px;}
	#board ul li:first-child div{width:80px; height:65px; padding:0.4em 0 0 0; margin:0 0.7em 0 0; font-size:13px;}
	#board ul li:first-child div .day{font-size:40px;}

	.dementia_process { background-position:0 89px; }
	.dementia_process li.var:after { left:0; }
}

@media all and (max-width:510px){
	.dementia_process { background:none; }
	.dementia_process li.var:after { display:none; }
	.dementia_process li.step01 { margin-left:0; }
	.dementia_process li.step02 { width:60%; }
}

/* 보건소 연혁 */
.historyLine dl {display:table; width:100%; border-bottom:1px dashed #ddd;}
.historyLine dl:first-child >* {padding-top:0;}
.historyLine dt {display:table-cell; width:250px; padding:2em 0; border-right:1px solid #D22259;}
.historyLine dl:first-child dt {position:relative;}
.historyLine dl:first-child dt:after {content:''; width:3px; height:1em; background:#fff; position:absolute; right:-2px; top:0;}
.historyLine dt span {display:block; position:relative; padding-right:1em; font-size:1.4em; font-weight:600; color:#D22259; line-height:1.1;}
.historyLine dt span:after {content:''; position:absolute; width:13px; height:13px; top:50%; margin-top:-6.5px; right:-7.5px; background:#fff; border:3px solid #D22259; border-radius:50%; box-sizing:border-box; z-index:2;}
.historyLine dd {display:table-cell; padding:2em 0 2em 1.76em; vertical-align:top;}
.historyLine dd li {display:table; padding-bottom:1em; padding-left:.7em; position:relative; color:#666;}
.historyLine dd li:last-child {padding-bottom:0;}
.historyLine dd li:before {content:''; position:absolute; width:4px; height:4px; background:#333; border-radius:50%; top:.6em; left:0;}
.historyLine dd li strong {display:table-cell; width:12em; color:#333;}
.historyLine dd li span {display:table-cell; padding-left:10px;}

@media all and (max-width:768px) {
	.historyLine dl {display:block; position:relative; padding-left:20px;}
	.historyLine dl:before {content:''; width:1px; height:100%; background:#D22259; position:absolute; top:0; left:20px;}
	.historyLine dt {display:block; width:auto; padding:2em 25px 1em; border:0;}
	.historyLine dl:first-child dt:after {right:auto; left:-1px;}
	.historyLine dt span:after {right:auto; left:-31.5px;}
	.historyLine dd {display:block; padding:0 0 2em 25px;}
}
@media all and (max-width:640px) {
	.history-box dt, .history-box dd {display:table-row !important;}
	.history-box dt {width:100%; text-align:center;}
	.history-box dd .title {margin-top:1.5em;}
	.historyLine dd li {display:block;}
	.historyLine dd li strong {display:block; width:auto; padding-bottom:.3em;}
	.historyLine dd li span {display:block; padding:0;}
	.history-box.con .box-list.col-2 > div {width:100% !important; margin-top:1em!important;}
}

/* 보건진료소 */
.menu_tab01, .menu_tab02, .menu_tab03, .menu_tab04, .menu_tab05, .menu_tab06, .menu_tab07, .menu_tab08, .menu_tab09, .menu_tab010, .menu_tab011 {display: none;}
@media (max-width: 644px){
	.map_wrap p, .map_wrap ul{float: none;margin: 0 auto;width: 90%;}
}

@media all and (max-width:450px) {
	#info{padding-bottom:1em;}
	#info li{width:33%; margin:0 0 1em;}
	#info li.list4,
	#info li.list5{width:50%;}
	#info li.list4 em br,
	#info li.list5 em br{display:none;}
	#link li {font-size:13px;}

	#banner{height:145px; background-size:contain;}
	#banner div em{font-size:20px; letter-spacing:-1px;}
}

@media all and (max-width:390px) {
	#board ul li:first-child a{width:65%;}
}
@media all and (max-width:365px) {
	#board {height:335px;}
}

/* 민원업무안내 - 모자보건팀 */
.step.con040110>li .txt02{min-height: 50px;}
@media (max-width: 500px){
	.step.con040110>li .txt02{min-height: auto;}
}

/* 모바일 건강관리 사업 */
@media all and (max-width:1010px){
	.res_li>li { width:33.33333333333333% !important; }
}
@media all and (max-width:791px){
	.res_li>li { width:50% !important; }
}
@media all and (max-width:533px){
	.res_li>li { width:100% !important; }
	.res_li>li div { width:100% !important; }
	.res_li>li:after, .step>li.first:before { display:none !important; }
}

/* 그리니 크리니 어린이 건강놀이터 운영 */
.mih53{min-height: 53px;}

/* 난임부부지원 */
.line_h {line-height: 2em !important;}

/* 보건사업 > 임신출산지원 > 산모.신생아 건강관리지원사업 */
.service-tbl .tbl th, .tbl td {padding:.5em;}

/* 예방접종 */ 

.inoculationr_box {display:block;position:relative;background: #FAFBFC;border-radius:1.176em;padding: 2.35em 2.35em 2.35em 16.23em;border: 1px solid #e1e1e1;}
.inoculationr_box .icon {display:block;position:absolute;top:50%;left: 3em;width: 10em;height:8.23em;border-radius:2.94em;background:#fff;box-shadow: 0px 4px 3em rgba(0, 0, 0, 0.05);margin:-4.115em 0 0 0;}
.inoculationr_box .icon img {display:block;position:absolute;top:50%;left:50%;/* height:5.88em; */transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);}
.inoculationr_box .icon + h4,
.inoculationr_box .icon + h5,
.inoculationr_box .icon + h6 {margin-top:0 !important; margin-left:0 !important;}
.inoculationr_box .box-tit {margin-bottom:.9em;font-size:1.294em; font-weight:600; color:#5546A8;}

@media all and (max-width:640px) {
	.inoculationr_box {margin-left:0; padding:2em;}
	.inoculationr_box .icon {display:block;position: relative;top: 0;left: auto;right: auto;margin: auto;margin-bottom: 2em;}
}

/* 이용안내 > 민원업무안내 > 감염병관리팀 */
.process > ul {margin:0 -1em;}
.process > ul > li > ul > li {position:relative; float:left; width:16.66%; font-size:.882em; letter-spacing:-1px; padding:0 1em;}
.process ul li li div { width:100%; height:7.66em; margin:0 auto; text-align:center; padding:0 .5em; box-sizing:border-box; border-radius:10px; background:#F3F6FE; border:2px solid #d3dfff;}
.process li.step01 > div, .process li.step06 > div{display:table; margin-bottom:.5em;}
.process li.step02 {display:table;}
.process li.step03, .process li.step05 {position:relative; display:table;}
.process li.step02 div {display:table-cell; vertical-align:middle; height:24em; background:#FFF7FA; border:2px solid #ffcfe1;}
.process li.step02 div span {display:block;}
.process li.step01 div p, .process li.step06 div p {display:table-cell; vertical-align:middle;}
.process li.step01 > div:last-child, .process li.step06 > div:last-child {margin-bottom:0;}
.process li.step03 div, .process li.step05 div {display:table-cell; vertical-align:middle; height:24em; padding:1em; box-sizing:border-box;}
.process li.step04 {display:table;}
.process li.step04 div {display:table-cell; vertical-align:middle; height:24em; background:#FFF7FA; border:2px solid #ffcfe1; padding:1em; box-sizing:border-box;}
.process > ul > li > ul > li:before {content:''; border-top:10px solid #92a3a0; border-left:10px solid transparent; border-right:10px solid transparent; width:0px; height:0px; position:absolute; margin-right:-10px; top:50%; right:0; transform:rotate( -90deg );}
.process > ul > li:first-child li.step06:before {display:none;}
.process ul li ul:after {content:''; display:block; clear:both;}

@media all and (max-width:885px){
	.process > ul > li > ul > li {width:33.3%; margin-bottom:1em;}
	.process > ul > li:first-child li.step03:before {display:none;}
}

@media all and (max-width:445px){
	.process > ul > li > ul > li {width:100%; margin-bottom:2em;}
	.process > ul > li:first-child li.step03:before {display:block;}
	.process ul li li div {height:auto !important; padding:1em;}
	.process > ul > li > ul > li:before {top:auto; bottom:-1.5em; right:50%; transform:none;}
}

.test-process > ul {margin:0 -1em;}
.test-process > ul > li > ul {overflow:hidden; padding-bottom:2em;}
.test-process > ul > li > ul > li {position:relative; float:left; width:25%; font-size:.882em; letter-spacing:-1px; padding:1em;}
.test-process ul li li div { width:100%; height:13.1em; margin:0 auto; text-align:center; padding:1em; box-sizing:border-box; border-radius:10px; background:#F3F6FE; border:2px solid #d3dfff;}
.test-process li.step01 {display:table; margin-bottom:.5em;}
.test-process li.step01 > div {margin-bottom:.5em;}
.test-process li.step02 {display:table;}
.test-process li.step03, .test-process li.step05, .test-process li.step07 {position:relative; display:table;}
.test-process li.step02 div {display:table-cell; vertical-align:middle; background:#FFF7FA; border:2px solid #ffcfe1;}
.test-process li.step02 div span {display:block;}
.test-process li.step01 > div:last-child, .test-process li.step06 > div:last-child {margin-bottom:0;}
.test-process li.step05 div, .test-process li.step07 div {display:table-cell; vertical-align:middle; padding:1em; box-sizing:border-box;}
.test-process li.step04 {display:table;}
.test-process li.step04 div {background:#FFF7FA; border:2px solid #ffcfe1; padding:1em; box-sizing:border-box;}
.test-process > ul > li > ul > li:before {content:''; border-top:10px solid #92a3a0; border-left:10px solid transparent; border-right:10px solid transparent; width:0px; height:0px; position:absolute; margin-right:-10px; top:50%; right:0; transform:rotate( -90deg );}
.test-process .step04:before {top:auto; left:50%; bottom:-1.5em; right:auto; transform:initial;}
.test-process li.step05 {width:100%; margin-top:2em;}
.test-process li.step05 div {width:48.7%; height:auto; background: #FFF7FA; border: 2px solid #ffcfe1;}
.test-process .step05:before {top:auto; left:75%; bottom:-1.5em; right:auto; transform:initial;}
.test-process li.step06 {width:100%; margin-top:2.5em;}
.test-process li.step06 > div {width:23.6%; float:right; height:9em;}
.test-process .step06:before {top:auto; left:86.5%; bottom:-1.5em; right:auto; transform:initial;}
.test-process li.step06 .left {margin-right:1em;}
.test-process li.step07 {width:100%; margin-top:2em;}
.test-process li.step07 div {width:24%; height:auto; }
.test-process .step07:before {top:auto; left:86.5%; bottom:-1.5em; right:auto; transform:initial;}
.test-process .step07.arrow:before {border:none;}
.test-process li.step01 p, .test-process li.step02 p, .test-process li.step03 p, .test-process li.step04 p, .test-process li.step06 p {padding-bottom:1em;}

@media all and (max-width:900px){
	.test-process > ul > li > ul > li {width:50%;}
	.test-process ul li li div {height:12em;}
	.test-process .step02:before {display:none;}
}

@media all and (max-width:746px){
	.test-process li.step06 > div {height:11em;}
}

@media all and (max-width:640px){
	.test-process .step06:before, .test-process .step07:before {left:85%;}
}

@media all and (max-width:590px){
	.test-process > ul > li > ul > li {width:100%;}
	.test-process ul li li div {height:auto;}
	.test-process li.step06 > div {height:12.66em;}
	.test-process li.step05 div, .test-process li.step06 > div, .test-process li.step07 div {width:100%}
	.test-process li.step06 > div {padding:1em!important; height:auto;}
	.test-process li.step06 .left {margin-right:0;}
	.test-process li.step06 .right {margin-bottom:1em;}
	.test-process .step02:before {display:block;}
	.test-process > ul > li > ul > li:before {top:auto; left:50%; bottom:-.5em !important; right:auto; transform:initial; transform: translateX(-50%);}
	.test-process li {margin-top:0 !important;}
	.test-process .step05:before, .test-process .step06:before, .test-process .step07:before {left:50%;}
}

/*레이어 팝업*/
.conts .layer_pop a[target="_blank"]:after {content:none;}
.layer_pop{position:absolute;top:0;left:0;margin-left:0;width:400px;z-index: 9999;}
.layer_pop p{position:absolute;bottom:-31px;left:0;width:100%;height:35px;background:#000;}
.layer_pop p a{float:right;font-size:15px;font-weight: 600;margin: 5px 10px 0 0;color:#fff;}

.layer_pop_01{position:absolute;top:260px;left:30%;margin-left:0;width:530px;z-index: 9999;}
.layer_pop_01 p{position:absolute;bottom:-31px;left:0;width:100%;height:35px;background:#000;}
.layer_pop_01 p a{float:right;font-size:15px;font-weight: 600;margin: 5px 10px 0 0;color:#fff;}

@media all and (max-width:768px){
	.layer_pop{width:350px !important; left:50%; margin-left:-175px;}
	.layer_pop img {width:100%;}

	.layer_pop_01{width:350px !important; left:50%; margin-left:-175px; top: 600px;}
	.layer_pop_01 img {width:100%;}
}

/*********************
	Common Style
**********************/
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}



/********************
	Tab Style
********************/
.tab-group{position:relative;width: 100%;}

.tab-group .tabs {
    position: absolute;
	width: 100%;
    bottom: 0rem;
	right:0rem;
}
.tab-group .tabs li {
    width: auto;
    padding: 9px;
    display: inline-block;
    box-sizing: border-box;
    transition: 0.5s;
    font: 15px "NanumS";
    vertical-align: middle;
    background: #3688ee;
    margin-right: 10px;
}
.tab-group .tabs li button{color:#fff;}
.tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.tab-group .tabs li button.on .selected {display:block;}
.tab-group .tab-con {display:none; height:100%; width:100%;}
.tab-group .tab-con.on {display:block;}
.blind {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}


/*레이어팝업*/
.layerPopup {position: absolute;z-index: 9999999;top:10px;left:10px;background:#fff;border:1px solid #000;overflow:hidden;}
.layerPopup .pop-con {position:relative;}
.layerPopup .pop-control {display:block; position:relative; background:#000; color:#fff; padding:10px 40px 10px 10px; font-size:11px; min-width:200px; height:40px; overflow:hidden;}
.layerPopup .pop-control .dayCloseCheck {display:block; position:absolute; top:0; left:0; opacity:0; z-index:-9999; height:0 !important; width:0 !important;}
.layerPopup .pop-control .dayCloseCheck + label {display:inline-block; position:relative; line-height:20px; padding:0; cursor:pointer;}
.layerPopup .pop-control .dayCloseCheck + label:before {content:""; display:inline-block; width:12px; height:12px; vertical-align:middle; background:#fff; border:3px solid #fff; border-radius:100%; margin-right:.5em; box-sizing:border-box;}
.layerPopup .pop-control .dayCloseCheck:focus + label {text-decoration:underline;}
.layerPopup .pop-control .dayCloseCheck:checked + label:before {background:#0089ff;}
.layerPopup .pop-control .pop-close {display:block; position:absolute; top:10px; right:10px; width:20px; height:20px; background:transparent; overflow:hidden; text-indent:-999px;}
.layerPopup .pop-control .pop-close:before {content:"⨯"; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; line-height:20px; text-indent:0; color:#fff; font-size:2em;}

#layerpopup_mycode {top: 0;left: 0;}

@media screen and (max-width:1024px){
	#layerpopup_mycode{top: 140px;left:0;}
}

@media screen and (max-width:745px){
	.layerPopup {width:100%;}
	.layerPopup img{width:100%;}
}