@charset "utf-8";
/*
프로젝트 : 차세대웹기술지원센터
작성자 : 김민식
최종 업데이트일자 : 2021.05.28
*/

@media all and (max-width:1700px){	/* 230419 추가 */
	#header .inner {
		width: 95%;
	}
}

@media all and (max-width:1400px){
	#topButton {display: none;}
	/* header */
	/* .visual_btn_wrap {margin-top: 16%;} */
	#gnb > ul > li > a {padding: 0 35px;}
}

@media all and (max-width:1230px){
	#gnb {display:none}		
	#drop_menu {display: none}
	.under_tablet {display:inline-block}
	.none_tablet {display:none}
	#header .inner { width: 95%;}
	.path_wrap{padding-top:80px !important;}
	.visual {width: 100%; }	
	.click_box_container {width: 100%;}
	.clinic_wrap {width: 95%;}
	.click_box { width: 30%;}	
	.clinic_left_box {width: 45%;}
	.clinic_right_box {width: 85%;}
	.dot_light_pattern {  width: 90%;}
	.inform_wrap { width: 95%;}
	.inform_tab_li a { width: 65%;}
	.date_box {width: 15%;}
	.svc_wrap {width: 95%;}
	.svc_shortcut_box { width: 49%;}
	.browser_wrap { width: 95%;}
	.browser_box { width: 19%;}
	.footer_top { width: 95%;}
	.footer_bottom {    width: 95%;}
	.visual_txt_top,.visual_txt_middle,.visual_txt_bottom   {width: 100%;}

	/* main renew */
	#header {
		height: 80px;
	}
	.inner.main {				/* 230512 */
		width: 95%;
	}
	.drop_menu02 {
		display: block;
	}
	.drop_menu02 {
		position: absolute;
		right: 0;
	}
}

@media all and (max-width:1115px){
	/* .visual {height: 840px;} */
	.click_box {height: 220px;}
	.click_box_icon img {width:5vw}
	h3.click_box_txt {margin-top: 5vw;}
	.clinic_section {height: 470px;}
	.clinic_wrap {margin: 60px auto;}
	.clinic_left_box {  height:350px}
	.clinic_right_box {height: 370px; margin-top: 35px;}	
	.clinic_inner {padding: 0px 60px 0 0;}
	h3.clinic_h { font-size: 30px;}
	p.clinic_p { word-break:keep-all; margin-top: 20px;}
	.dot_light_pattern {height: 120px;  bottom: 20px;}
	.inform_wrap {margin: 60px auto;}
	.plus_objet {font-size: 13px;}
	h2.section_tit_h {font-size: 30px;}
	.svc_left_box h2 { font-size: 30px;}	
	.svc_inner_icon img {width:4vw}
	.browser_percent { font-size: 35px;}
	.chrome_ci {background: url(/images/renew/browser_chrome_icon.png)no-repeat 120px -20px;}
	.edge_ci {background: url(/images/renew/browser_edge_icon.png)no-repeat 120px -20px;}
	.ie_ci {background: url(/images/renew/browser_ie_icon.png)no-repeat 120px -20px;}
	.whale_ci {background: url(/images/renew/browser_whale_icon.png)no-repeat 120px -20px;}
	.safari_ci {background: url(/images/renew/browser_safari_icon.png)no-repeat 120px -20px;}
}

@media all and (max-width:1080px){	
	p.clinic_p { font-size: 15px;}
	.clinic_inner { bottom: 55px;}
	/*210528(s)*/
	#header .inner h1 a {width: 270px; background: url("/images/renew/logo_tab_wht.png") no-repeat 100%/100%;}	
	.logo_change_blk {background: url("/images/renew/logo_tab_blk.png") no-repeat 100%/100% !important;}
	/* //210528(e)*/
}

@media all and (max-width:1024px){      
	.visual_txt_top>span { font-size: 18px;}
	.visual_txt_middle strong { font-size: 50px;}
	.visual_txt_bottom>p { font-size: 20px;}	
	h3.click_box_txt {font-size: 18px;}
	.clinic_section {height: 420px;}
	.clinic_left_box {width:43%; height: 310px;}
	.clinic_right_box {height: 320px; margin-top: 2em;}	
	.clinic_inner { bottom: 45px; padding: 0px 30px 0 0; width: 55%;}
	p.clinic_p {margin-top: 15px; line-height: 25px;}
	.clinic_btn {margin-top: 20px;}
	.dot_light_pattern {bottom: 10px;}
	/* .inform_section { height: 550px;} */
	.svc_section {height: 520px;}
	.svc_shortcut_box {height: 248px;}
	ul.tabs li { font-size: 16px;}
	.date_box {height:70px;}
	.inform_top_tit { font-size: 16px;}
	.inform_top_cnt { font-size: 14px;}
	h2.section_tit_h {font-size: 25px;}
	.inform_tab_li, .inform_tab_li a, .inform_tab_date { font-size: 15px;}
	.tech_box {padding: 10px 20px;}
	.tech_point, .tech_comp { font-size: 13px;}
	.tech_text { font-size: 15px;}
	/* .inform_section {height: 550px;} */
	.inform_wrap {margin: 40px auto;}
	.svc_section {height: 500px;}
	.svc_shortcut_box {  height: 240px;}	
	.svc_inner_txt { font-size: 18px;}
	.browser_percent { font-size: 30px;}
	.chrome_ci {background: url(/images/renew/browser_chrome_icon.png)no-repeat 100px -20px;}
	.edge_ci {background: url(/images/renew/browser_edge_icon.png)no-repeat 100px -20px;}
	.ie_ci {background: url(/images/renew/browser_ie_icon.png)no-repeat 100px -20px;}
	.whale_ci {background: url(/images/renew/browser_whale_icon.png)no-repeat 100px -20px;}
	.safari_ci {background: url(/images/renew/browser_safari_icon.png)no-repeat 100px -20px;}
	.address_box ul:first-child { margin-right:18px;}		/* 230517 수정(30->18) */

	/* main renew */
	.visual > .inner {
	    height: 750px;
	}
	.noti_box { padding: 13px 20px; }
	.big_dd { padding: 3px 0; }
	.plus_object { top: 10%; }
	.tab-content > ul { min-height: 296px; }
	.nodata { height: 294px; line-height: 294px; }
}

@media all and (max-width:960px){
	a.click_box_cnt {text-align: center;}
	/*210426(s)*/
	h3.click_box_txt {float:none; text-align: center; margin-top:4vw;}
	/* // 210426(e)*/
	h3.clinic_h { font-size: 30px;}
	.inform_tab_li a {width: 60%;}
	.date_box {width: 20%;}
	.the_new { width: 70%;}
	.svc_section { height:750px;}
	.svc_left_box {width: 100%;   height: auto; margin:50px auto;}
	/*210426(s)*/
	.svc_left_box h2 {position:inherit;  bottom:0;   margin: 0 auto; text-align: center;}
	.svc_right_box { width: 75%; height: auto; padding:0;  box-sizing: border-box; margin: 0 auto; float:none;}
	/* // 210426(e)*/
	.svc_shortcut_box {height: 261px;}
	/*210426(s)*/
	.svc_inner_icon img { width:6vw;}
	/* // 210426(e)*/
	.svc_inner_txt { font-size: 20px;    margin-top: 1em;}
	.browser_inner {justify-content: center;}
	.browser_box {width: 30%;}
	.browser_box:nth-child(1),.browser_box:nth-child(2),.browser_box:nth-child(4) {margin-right: 3%;}
	.browser_box:nth-child(4),.browser_box:nth-child(5) {margin-top: 3%;}
	/*210526(s)*/
	.chrome_ci {background: url(/images/renew/browser_chrome_icon.png)no-repeat 170px -20px;}
	.edge_ci {background: url(/images/renew/browser_edge_icon.png)no-repeat 170px -20px;}
	.ie_ci {background: url(/images/renew/browser_ie_icon.png)no-repeat 170px -20px;}
	.whale_ci {background: url(/images/renew/browser_whale_icon.png)no-repeat 170px -20px;}
	.safari_ci {background: url(/images/renew/browser_safari_icon.png)no-repeat 170px -20px;}
	/* // 210526(e)*/
	.ft_link>ul li a {font-size: 12px;}
	.go_link {font-size: 12px;}
	.address_box ul, .call_box p { font-size: 12px;}
	.famliy_link select {font-size: 12px;}


	/* main renew */
	.visual_txt_middle {font-size: 38px;} 
}

@media all and (max-width:830px){
	.inform_tab_li a {width: 55%;}
	.chrome_ci {background: url(/images/renew/browser_chrome_icon.png)no-repeat 18vw -20px;}
	.edge_ci {background: url(/images/renew/browser_edge_icon.png)no-repeat 18vw -20px;}
	.ie_ci {background: url(/images/renew/browser_ie_icon.png)no-repeat 18vw -20px;}
	.whale_ci {background: url(/images/renew/browser_whale_icon.png)no-repeat 18vw -20px;}
	.safari_ci {background: url(/images/renew/browser_safari_icon.png)no-repeat 18vw -20px;}
	.logo_box img {width: 110px}
	.date_box { width: 70px;}
	div#mouse {display: none;}

	/* main_renew */
	.visual > .inner { height: auto; }
	.visual > .inner > .inner-line , .inform_section > .inner {
		flex-direction: column;
	}
	.visual > .inner > .inner-line > .v-content {
		width: 100%;
	}
	.inform_left_box {
		margin-right: 0;
		width: 100%; 
		padding-right: 0;  
		margin-bottom: 45px;
	}
	.inform_right_box {width: 100%; padding-left: 0; margin-left: 0;}
	.visual_txt_wrap {
		text-align: center; padding-top: 20%;;
	}
	.visual_txt_middle {font-size: 45px;} 
	.visual_btn_wrap { padding: 10% 0; }
	.plus_object { top: 0;}
	.plus-n {top: 0 !important;}
	h2.left_h {
		margin-bottom: 3%;
	}
	.noti_wrap{ margin-top:3%;}
	ul.tabs {  margin:0;  padding: 2% 0 3%; }

	.visual_btn_wrap .btn_clinic > .text { font-size: 18px; }
	.visual_btn_wrap .btn_clinic > .text > h4 {font-size: 30px;}
	
	.footer { height: 255px; }
}


@media all and (max-width:768px){
	#header {height: 60px;}
	.btn_wrap { height: 60px;}
	.closebtn {margin:10px 15px;}
	#header .inner {padding: 15px 0px;}    
	/*210527(s)*/
	#header .inner h1 a {width: 170px; height: 30px; background: url("/images/renew/logo_small_wht.png") no-repeat 100%/100%;}
	/* // 210527(e)*/
	.overlay_tit {
		top: 50%; transform: translateY(-50%);  font-size: 16px;
	}
	/*210527(s)*/
	.logo_change_blk {background: url("/images/renew/logo_small_blk.png") no-repeat 100%/100% !important;}
	/* //210527(e)*/
	/* .drop_menu02 {margin-top: 5px;} */
	.visual_txt_top>span {font-size: 16px;}
	/* .visual_txt_middle strong { font-size: 45px;} */
	/* .visual_txt_bottom>p {font-size: 14px;} */
	h3.click_box_txt { font-size: 16px;}
	.click_box {height: 200px;}
	/* div#mouse {display: none;} */
	/* .visual {height: 650px;} */
	.clinic_section { height: 320px;}
	.clinic_wrap { margin: 50px auto;}
	.clinic_left_box {width: 40%; height: 210px;     background-size: cover; }
	.clinic_right_box {height: 240px;}
	.clinic_inner {bottom: 25px; padding: 0px 40px 0 0;  width: 55%;}
	h3.clinic_h {font-size: 28px;}
	p.clinic_p {font-size:12px; margin-top: 10px; line-height: 20px;}
	.clinic_btn_txt {font-size: 14px;}
	.clinic_btn { width: 170px;    height: 45px;}
	/* .inform_section {height: 1000px;} */
	/* .inform_left_box {width: 100%; padding-right: 0;  margin-bottom: 30px;} */
	/* .inform_right_box {width: 100%; padding-left: 0;} */
	ul.tabs li { font-size: 18px;}
	/* .date_box { width: 70px;} */
	.the_new { width: 80%;}
	.inform_right_box {height: auto;}
	.plus_objet { font-size: 15px;     margin-top: 15px;}
	.svc_right_box {width: 80%;}
	.svc_inner_txt {font-size: 18px;}
	.browser_wrap { margin: 60px auto;}

}
@media all and (max-width:730px){	
	.visual_txt_top>span {font-size: 14px;}
	.visual_txt_middle strong { font-size: 40px;}
	/* .visual_txt_bottom>p {font-size: 12px;} */
	.click_box_icon img {width: 7vw;}
	.clinic_left_box {width: 30%; height: 160px; background-size: cover;}
	.clinic_inner { bottom:45px;  padding: 0px 40px 0 0;  width: 65%;}
	.clinic_right_box { height: 289px;}
	.dot_light_pattern { bottom: -20px;}
	/* .address_box {display: none;} */
	.footer_bottom {width: 95%; display: flex; flex-flow: column; text-align: center;  align-items: center;}
	/* .footer {height:240px} */

	/* main renew */
	.visual_txt_middle {font-size: 38px;}
	.visual_txt_bottom>p {font-size: 18px;}
	.visual_btn_wrap .btn_three > a { font-size: 22px; }
	.footer { height: auto; }
	.footer_inner_wrap {
		flex-flow: column-reverse wrap; 
		margin: 20px 0;
		position: relative;
	}
	.address_box { padding-top: 30%; }
	.address_box ul {float: none;}
	.address_box ul:first-child { margin: 0; }
	.address_box .add-p {display: inline-block; }
	.wa_box.under_tablet {
		position: absolute;
    	top: 0;
    	left: 7%;
	} 
	.logo_box {
		position: absolute;
    	right: 7%;
    	top: 10%;
	}
	.call_box { padding-bottom: 10px; }
}


@media all and (max-width:600px){	
.popup_wrap { width: 90%;}
.popup_box:first-child {margin:0 0 2vw 0}
.popup_box .popup_btn a {font-size: 15px;}
}





@media all and (max-width:520px){	
	/* .visual {height: 700px;} */
	/* .visual_txt_wrap {top: 20%;} */
	.click_box_wrap {top: 50%;}
	.click_box_container {width: 95%;}
	.click_box {width: 100%; height:100px; margin-right:0; margin-bottom:2%}
	a.click_box_cnt {box-sizing: border-box; padding: 20px 30px;  display: flex;   flex-flow: row wrap;   justify-content: space-between;}
	h1.click_box_icon{display:inline-block; }
	.click_box_icon img {width: 10vw;}
	h3.click_box_txt {font-size: 18px; margin-top:0; text-align:right;}
	.clinic_left_box {display: none;}
	.clinic_wrap {margin: 20px auto;}
	.clinic_right_box {width: 100%; margin-top:0;}
	.clinic_inner { width: 85%;     bottom: 50px; }
	.clinic_objet {width:100%; height:100%; background:url(/images/renew/clinic_illust.png)no-repeat 60vw 160px ;}
	.dot_light_pattern {bottom: 0px;}
	.svc_section {height: 680px;}
	.svc_inner_icon img { width: 8vw;}
	.svc_right_box {width: 100%;}
	.svc_shortcut_box:nth-child(odd) {margin:0 0 2% 0;}
	.svc_shortcut_box:nth-child(2) {margin: 0 0 2% 0;}
	.svc_shortcut_box {width:100%;  height: 110px}
	.svc_icon_wrap {display: flex;  flex-flow: row wrap; justify-content: space-between;  box-sizing: border-box;  padding: 0px 30px;}
	h3.svc_inner_icon {display: inline-block;}
	h4.svc_inner_txt {display: inline-block;  vertical-align: middle;     top:0;     margin-top: 0.3em; font-size:20px;}
}

@media all and (max-width:500px){	
	/* .inform_section { height: auto;} */
	.the_new {		width: 70%;	}
	.svc_left_box h2 { font-size: 25px;}
	h4.svc_inner_txt {font-size: 18px;}
	.svc_section { height: auto; box-sizing: border-box; padding-bottom: 20px;}
	.browser_box { width: 100%; height:80px; border-bottom:1px solid #eee!important; margin-bottom:2%}
	.chrome_ci {background: url(/images/renew/browser_chrome_icon.png)no-repeat 75vw -35px;}
	.edge_ci {background: url(/images/renew/browser_edge_icon.png)no-repeat 75vw -35px;}
	.ie_ci {background: url(/images/renew/browser_ie_icon.png)no-repeat 75vw -35px;}
	.whale_ci {background: url(/images/renew/browser_whale_icon.png)no-repeat 75vw -35px;}
	.safari_ci {background: url(/images/renew/browser_safari_icon.png)no-repeat 75vw -35px;}
	.browser_box:nth-child(1), .browser_box:nth-child(2), .browser_box:nth-child(4) { margin-right:0; }
	.browser_box:nth-child(4), .browser_box:nth-child(5) {margin-top:0; }
	.browser_txt { bottom: 0px;}
	.famliy_link {display: none;}
	.ft_link {  float: unset; }
	.footer_top {display: flex;  flex-flow: row;   justify-content: center;}
	.visual_txt_bottom>p {width: 70%; margin: 0 auto;}
	ul.tabs {
		margin: 0;
		padding: 4% 0 5%;
	}
}

@media all and (max-width:414px){	
	/* .visual { height: 600px;} */
	.click_box_wrap {top: 52%;	}
	a.click_box_cnt {padding: 10px 20px;}
	.visual_txt_middle strong { font-size: 30px;}
	h3.click_box_txt {font-size: 16px; margin-top: 1vw;}
	.click_box { height: 80px;	}
	/* h2.section_tit_h {font-size: 20px;} */
	.plus_objet { font-size: 13px;  margin-top: 10px;}
	/* .tab-content li { padding: 15px 10px;} */
	/* ul.tabs li {width:25%; text-align: center; font-size: 16px; padding:5px 15px } */
	.inform_top_tit { font-size: 15px;}
	.inform_tab_li, .inform_tab_li a, .inform_tab_date {font-size: 14px;}
	.tech_text { font-size: 14px;}
	.svc_shortcut_box { height: 80px;}
	/*210423 (s) 모달창 추가*/
	#modal .modal_content {width:90%;}
	.modal_tit { font-size:16px;}
	.modal_txt {font-size: 15px;}
	/*// 210423 (e)*/



	/* main renew */
	.visual { background: url('../images/renew/m_bg_banner.jpg') no-repeat; }	/* 230703 센터 지움 */
	/* .visual_txt_wrap { margin-top: 30%; } */
	.visual_txt_middle { font-size: 28px; }
	.visual_txt_bottom { margin-top: 30px; }
	.visual_txt_bottom>p { font-size: 14px;} 
	.visual_txt_wrap { padding-top: 30%; }
	.visual_btn_wrap { flex-direction: column; padding-top: 16%;}
	.visual_btn_wrap .btn_clinic { 
		border: 0; 
		padding: 5% 5% 7%; 
		background-color: rgba(0, 0, 0, 0.4);
	}
	.visual_btn_wrap .btn_clinic > .text { font-size: 14px; }
	.visual_btn_wrap .btn_clinic > .text > h4 { font-size: 20px; }
	.visual_btn_wrap .btn_clinic > .text > p { margin: 10px 0 20px; font-size: 14px; }
	.visual_btn_wrap .btn_three { 
		text-align: left; 
		border: 0;
		background-color: rgba(0, 0, 0, 0.4);
		margin: 10px 0px 0 0;
		padding: 7% 15px;
		position: relative;
	}
	.visual_btn_wrap .btn_three > img { 
		width: 18%; 
	    margin: 0;
		position: absolute;
		right: 20px;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	.visual_btn_wrap .btn_three > a {
		font-size: 20px;
		position: absolute;
		right: 35px;
		transform: translateY(-50%);
		height: auto;
	}
	.inform_section > .inner { padding: 10% 0 12%; }
	.plus_object { font-size: 13px;}
	ul.tabs li { width: 32%; padding: 0; text-align: center; font-size: 16px; }
	
	ul.tabs a h3{font-size:16px;}
		
	ul.tabs li::after { top: 0; left: 0; }
	.date_box {    
		width: 65px;
		height: 65px;
	}
	.ddyyyymm { font-size: 13px; }
	.big_dd { font-size: 35px; }
	h2.section_tit_h {font-size: 20px; padding-left: 10px;}
	h2.left_h {margin-bottom: 4%;}
	.tab-content > ul { min-height: 238px; }
	.noti_box { padding: 6px 10px; margin-bottom: 5px; }
	.noti_box span { font-size: 14px; }
	.noti_box .title { font-size: 14px; }
	.nodata { font-size: 15px; height: 236px; line-height: 236px; }
}
@media all and (max-width:405px){	
	/* ul.tabs li {width:24%; } */
}

@media all and (max-width:375px){	
	.clinic_objet {background: url(/images/renew/clinic_illust.png)no-repeat 52vw 160px;}
	.visual_txt_bottom>p {width: 80%;}
	.clinic_inner { padding: 0px 20px 0 0;}
	.tech_box {padding: 10px;}
}

@media all and (max-width:370px){	
	/* ul.tabs li {width:23%; } */
}

@media all and (max-width:330px){	
	/* ul.tabs li {width:22%; } */
}

@media all and (max-width:325px){	
	.the_new {width: 65%;}
	.svc_left_box h2 { font-size: 22px;}
	h3.click_box_txt {font-size: 14px; margin-top: 3vw;}
	h4.svc_inner_txt { font-size: 16px;}
	/*210426(s)*/
	#popup_box .popup_btn {height: 40px;}	
	#popup_box .popup_btn a {height:40px; font-size: 13px;}
	#popup_box .popup_btn a:before { top: 10px;}
	#popup_box .popup_btn a:after { top: 10px;}
	/* // 210426(e)*/

}

/*웹접근성 SubMap 수정*/
@media all and (max-width:1230px){
	.submap_zone_parent{ padding-top:80px; }
}
@media all and (max-width:960px){
	.submap_zone_parent, .submap_zone, .sub_map_pixin{ height:100% !important; }
	.sub_map_pixin{ width:100%; }
	.sub_map_fxwrap{ flex-flow:row wrap; }
	.sub_map_fxitem{ width:100%; }
	.map_depth_vlist_wrap{ z-index:1; }
}