/* main page style */

.graft:after{content: "";display: block;clear: both;}
.graft .tit {float:left;width:18.91%;height:150px;background: #037bc1;color:#fff; line-height: 58px;text-align:center;}
.graft .tit span {display: inline-block;margin: 45px 0 0 0;font-weight: bold;font-size:1.5em}
.graft .material {float:right;/*height:148px;*/width:81%;border:1px solid #e3e3e3;border-left:0}
.graft .material ul {padding:0 60px 20px;}
.graft .material li {float:left;text-align: center}
.graft .material li a {display:inline-block;padding-top:24px;}
.graft .material li a span{display: block;color:#454545;padding-top: 10px}
.graft .material img {width:76px;-webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 100ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 100ms ease-in;
    -moz-transform: scale(1);
    transition: all 100ms ease-in;
    transform: scale(1); 
}
.graft .material li:hover img{
    -webkit-transition: all 100ms ease-in;
    -webkit-transform: scale(1.15);
    -ms-transition: all 100ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 100ms ease-in;
    -moz-transform: scale(1.15);
    transition: all 100ms ease-in;
    transform: scale(1.15);
}
.graft .material li:hover a span {color:#037bc1;}
.graft .material .slick-prev {left: 40px;z-index:1}
.graft .material .slick-next:before,
.graft .material .slick-prev:before {color: #000}
.graft .material .slick-next {right: 40px;z-index:1}

/* 인체조직 이식재 링크 포커스 스타일 - 웹접근성 */
.graft .material li a:focus {
	outline: 4px solid #037bc1 !important;
	outline-offset: 3px !important;
	background-color: rgba(3, 123, 193, 0.1);
	border-radius: 5px;
	padding: 24px 10px;
	margin: -24px -10px;
	box-shadow: 0 0 0 6px rgba(3, 123, 193, 0.15);
}
.graft .material li a:focus img {
	transform: scale(1.2);
	filter: drop-shadow(0 5px 10px rgba(3, 123, 193, 0.3));
}
.graft .material li a:focus span {
	color: #037bc1;
	font-weight: bold;
	text-decoration: underline;
}

/* 슬라이더 전체 너비 - 웹접근성 개선 */
.slider_main {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}
.slider_main img {
	width: 100%;
	display: block;
}

.slick-next{background: url(../img/common/slider_arrow_right.png) no-repeat !important;background-size:cover !important;z-index: 100}
.slick-prev{background: url(../img/common/slider_arrow_left.png) no-repeat !important;background-size:cover !important;z-index: 100}
.slick-prev:before,
.slick-next:before {content: "" !important;}
.slider_main .slick-dots {left: 60px;bottom: auto;top: 270px;width: auto;}
.slider_main .slick-dots li.slick-active button:before {content:"";width:30px;height:10px;border-radius:30px;background:#0057a0;border:0;opacity: 1;}
.slider_main .slick-dots li button:before {content:"";width:5px;height:5px;border-radius:30px;border:3px solid #0057a0;opacity: 1;}
.slider_main .slick-dots li {width:5px;}
.slider_main .slick-dots li.slick-active {width:25px;}
.slider_main .tablet,
.slider_main .mobile {display: none;}


/* 슬라이더 화살표 버튼 접근성 */
.slider_main .slick-prev,
.slider_main .slick-next {
	width: 50px;
	height: 50px;
	z-index: 100;
	transition: all 0.3s;
}
.slider_main .slick-prev {left: 20px;}
.slider_main .slick-next {right: 20px;}
.slider_main .slick-prev:hover,
.slider_main .slick-next:hover {
	transform: scale(1.1);
}
.slider_main .slick-prev:focus,
.slider_main .slick-next:focus {
	outline: 4px solid #ffeb3b !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 6px rgba(255, 235, 59, 0.3);
	transform: scale(1.1);
}

/* 슬라이더 dots 포커스 */
.slider_main .slick-dots li button:focus {
	outline: 3px solid #ffeb3b !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 5px rgba(255, 235, 59, 0.3);
}

	.popup_item .pop_img .desktop {width:100%;display:  block;}
	.popup_item .pop_img .tablet {width:100%;display:none;}
	.popup_item .pop_img .mobile {width:100%;display:none;}

.main_link_thumb {margin-top:30px;margin-bottom:30px;}
.main_link_thumb a:hover{text-decoration:underline;}
.main_link_thumb:after{content: "";display: block;clear: both}
.main_link_thumb li{float: left;width:285px;margin-left:46px}
.main_link_thumb li:after{content: "";display: block;clear: both}
.main_link_thumb li:first-child{margin-left: 0}
.main_link_thumb .thumb {width:285px;height:155px;background-repeat: no-repeat;background-position: center}
.main_link_thumb .thumb.type01{background-image: url(../img/main/main_intro_01.jpg)}
.main_link_thumb .thumb.type02{background-image: url(../img/main/main_intro_02.jpg)}
.main_link_thumb .thumb.type03{background-image: url(../img/main/main_intro_03.jpg)}
.main_link_thumb .thumb.type04{background-image: url(../img/main/main_intro_04.jpg)}
.main_link_thumb .txt_wrap{margin-top: 20px;color:#494949}
.main_link_thumb .txt_wrap .more{color: #0079bf;font-size:.9em;}
.main_link_thumb .txt_wrap .more:after{content: "";display: block;clear: both}
.main_link_thumb .txt_wrap .more p {float: right;width:26px;height:26px;background: url(../img/main/ico_more_plus.png) no-repeat;background-size: contain;}
.main_link_thumb .txt_wrap .more a:hover {background-image: url(../img/main/ico_more_plus_on.png)}
.main_link_thumb .txt_wrap .tit {font-size:1.2em;font-weight: bold}
.main_link_thumb .txt_wrap .desc {margin-top:10px}

/* 메인 링크 썸네일 포커스 스타일 - 웹접근성 */
.main_link_thumb li a:focus {
	outline: 5px solid #037bc1 !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 8px rgba(3, 123, 193, 0.2);
	border-radius: 3px;
}
.main_link_thumb li a:focus .thumb {
	transform: scale(1.05);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.main_link_thumb li a:focus .tit {
	color: #037bc1;
	text-decoration: underline;
}

.subcontractor {margin-bottom:30px;border:1px solid #eaeaea;}
.subcontractor:after {content: "";display: block;clear: both}
.subcontractor .medical {float: left;width:198px;height:108px;text-align: center;background-color: #fafafa}
.subcontractor .medical .tit {margin-top:20px}
.subcontractor .medical .unit_set {margin-top: 5px;}
.subcontractor .medical .unit_set .img{display: inline-block;width:23px;height:27px;background: url(../img/main/ico_medical.png) no-repeat center;background-size:100%;}
.subcontractor .medical .unit {color:#159eed}
.subcontractor .medical .unit .num{font-size:3em;font-weight: bold;}
.subcontractor .brand {float:right;width:64%;padding:2.8% 10%;}
.subcontractor .brand_list li{text-align: center;padding:0 20px;}
.subcontractor .brand_list img{display: inline-block;height: 34px;}
.subcontractor .brand_list .slick-next{right:-35px;background: url(../img/common/slider_arrow2_right.png) no-repeat !important;}
.subcontractor .brand_list .slick-prev{left: -35px;background: url(../img/common/slider_arrow2_left.png) no-repeat !important;}

.main_notice {margin-top: 30px;}
.tab_set {float:left;}
ul.tabs {
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px;
    border-left: 1px solid #eee;
    width: 566px;
    font-size:1.2em;
}
ul.tabs li {
    float: left;
    text-align:center;
    cursor: pointer;
    width:30%;
    height: 47px;
    line-height: 47px;
    padding: 0;
    border: 1px solid #eee;
    border-left: none;
    background: #fafafa;
    overflow: hidden;
    color:#333;
	position: relative;
}
/* 탭 버튼 스타일 - 웹접근성 */
ul.tabs button[role="tab"] {
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	font-size: 1em;
	color: #333;
	cursor: pointer;
	padding: 0;
	line-height: 47px;
	transition: all 0.2s;
}
ul.tabs button[role="tab"]:hover {
	background-color: rgba(3, 123, 193, 0.05);
	color: #037bc1;
}
ul.tabs li.active button[role="tab"] {
	color: #494949;
	font-weight: bold;
}
ul.tabs button[role="tab"]:focus {
	outline: 4px solid #037bc1 !important;
	outline-offset: -4px !important;
	background-color: rgba(3, 123, 193, 0.1);
	box-shadow: inset 0 0 0 2px #037bc1;
	z-index: 10;
	position: relative;
}
ul.tabs .more {display:none;position:absolute;right:0;top:0;width:9.7%;height:45px;border-right:1px solid #e3e3e3;border-bottom:1px solid #e3e3e3;border-top:1px solid #e3e3e3;background: #fff url(../img/common/ico_plus.png) no-repeat center;background-size: 30%;}
ul.tabs li.active {
    color: #494949;
    font-weight: bold;
    background: #FFFFFF;
    border: 1px solid #eee;
    border-bottom: 1px solid #fff;
}
ul.tabs li.active .more {display: block;}
.tab_container {
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;
    margin-top: 15px;
}
.tab_content {
    /*height: 220px;*/
	margin-bottom:20px;
    padding: 0;
    font-size: 12px;
    display: none;
}
.tab_container .tab_content ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container .tab_content ul li {
    padding:0 0 0 5px;
    height: 51px;
    line-height: 51px;
    list-style:none;
    font-size:1.2em;
    background: url(../img/common/bg_line_dot.png) repeat-x bottom;
}
.tab_container .tab_content ul li a {padding-left:15px;color:#878787;background:url(../img/common/blt_dot.png) no-repeat 0 center;
display: inline-block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    width:70%;
}
.tab_container .tab_content ul li a:hover {color:#000;}
.tab_container .tab_content ul li .date {float:right;color:#a2a2a2;    width: 24%;text-align: right;}
.tab_content .ico_new {display: inline-block;width:15px;height:15px;background: url(../img/common/ico_board_new.png) no-repeat;vertical-align: text-top;margin-left: 10px;}

/* 탭 콘텐츠 링크 포커스 스타일 - 웹접근성 */
.tab_container .tab_content ul li a:focus {
	outline: 3px solid #037bc1 !important;
	outline-offset: 2px !important;
	background-color: rgba(3, 123, 193, 0.1);
	color: #037bc1 !important;
	font-weight: bold;
	padding: 5px 15px;
	margin: -5px 0 -5px -15px;
	border-radius: 3px;
}

.main_bnr {float:left;width:330px;height:241px;margin-left: 26px;}
.main_bnr .mobile {display: none;}

/* 배너 링크 포커스 스타일 - 웹접근성 */
.main_bnr a:focus {
	outline: 5px solid #037bc1 !important;
	outline-offset: 3px !important;
	display: inline-block;
	border-radius: 5px;
	box-shadow: 0 0 0 8px rgba(3, 123, 193, 0.2);
}
.main_bnr a:focus img {
	transform: scale(1.02);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}
.main_gov3 {float:right;position: relative;width: 331px;height:241px;margin-left: 24px;background:#fafafa;border:1px solid #e3e3e3;}
.main_gov3 .tit {margin:30px 0 0 30px;}
.main_gov3 .icons {margin: 30px 0 0;}
.main_gov3 .icons li{float: left;width:33%;text-align: center;}
.main_gov3 .icons li .img {display: inline-block;width:56px;height:38px;background-repeat: no-repeat;background-position: top center;}
.main_gov3 .icons li.i1 .img {background-image: url(../img/main/ico_gov3_02_off.png);background-size: contain;}
.main_gov3 .icons li.i2 .img {background-image: url(../img/main/ico_gov3_04_off.png);background-size: contain;}
.main_gov3 .icons li.i3 .img {background-image: url(../img/main/ico_gov3_03_off.png);background-size: contain;}
.main_gov3 .icons li .txt {display: block;margin-top: 5px;}
.main_gov3 .icons li:hover .txt {color:#0980c7;}
.main_gov3 .icons li.i1:hover .img{background-image: url(../img/main/ico_gov3_02_on.png);}
.main_gov3 .icons li.i2:hover .img{background-image: url(../img/main/ico_gov3_04_on.png);}
.main_gov3 .icons li.i3:hover .img{background-image: url(../img/main/ico_gov3_03_on.png);}

/* 정부3.0 아이콘 링크 포커스 스타일 - 웹접근성 */
.main_gov3 .icons li a:focus {
	outline: 4px solid #037bc1 !important;
	outline-offset: 3px !important;
	display: inline-block;
	padding: 10px;
	margin: -10px;
	border-radius: 5px;
	background-color: rgba(3, 123, 193, 0.1);
	box-shadow: 0 0 0 6px rgba(3, 123, 193, 0.15);
}
.main_gov3 .icons li a:focus .txt {
	color: #037bc1;
	font-weight: bold;
}
.main_gov3 .icons li.i1 a:focus .img{background-image: url(../img/main/ico_gov3_02_on.png);}
.main_gov3 .icons li.i2 a:focus .img{background-image: url(../img/main/ico_gov3_04_on.png);}
.main_gov3 .icons li.i3 a:focus .img{background-image: url(../img/main/ico_gov3_03_on.png);}

/* 반응형 : tablet 까지 */
@media screen and (max-width: 1024px) {
    .slider_main .tablet {width:100%;display: block;}
    .slider_main .desktop {display: none;}
    .slider_main .slick-dots {left:3%;top:70%;}

	#pop .pop_img .desktop {width:100%;display: none;}
	#pop .pop_img .tablet {width:100%;display:  block;}
	#pop .pop_img .mobile {width:100%;display: none;}

    .mobile_wrapper {padding:0 15px 15px;}
    .graft .tit {width:27%;height: 100px;background-position: 15px 60px;}
    .graft .tit span {font-size:1.2em;margin: 20px 0 0 0;}
    .graft .material .slick-prev {left: 20px;}
    .graft .material .slick-next {right: 20px;}
    .graft .material ul {padding: 0 50px 10px;}
    .graft .material li a span {padding-top: 5px;}
    .graft .material {width:72.78%;}
    .graft .material img {width:54px;}
    .main_link_thumb {margin-top: 15px;}
    .main_link_thumb li {width:48%;margin-left: 4%;margin-bottom: 30px;}
	.main_link_thumb a:hover{text-decoration:underline;}
    .main_link_thumb li:nth-child(2n+1) {margin-left:0;}
    .main_link_thumb .thumb {width: 100%;background-size: cover;}
    .subcontractor .medical {width:24%}
    .subcontractor .brand {width:64%;padding: 5.2% 6%;}
    .subcontractor .brand_list img {height:27px;}
    .main_notice {width:100%;}
    .main_notice .tab_set {float: none;}
    .main_notice .tab_set ul.tabs li {width: 30%;}
    .main_notice .tab_set ul.tabs li.more {width:9%}
    .main_bnr {margin-left: 0;}
    .main_gov3 {width: 65%;margin-left: 3%;}
    .footer .info_txt li {color: #fff;}
    .footer .info_txt li a {color: #fff;}
    .footer .info_txt .cp li {color:#a4a4a4;}
	ul.tabs {
    position: relative;
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 50px;
    border-left: 1px solid #eee;
    width: 100%;
    font-size:1.2em;
}
}
@media screen and (max-width: 767px) {
    .main_bnr {width:100%;height: auto;background: url(../img/main/main_bnr01_mobile.jpg);background-size: contain;}
    .main_bnr .desktop {display: none;}
    .main_bnr .mobile {display: block;width:100%;}
    .main_gov3 {width:100%;margin-left: 0;margin-top: 20px;}
	.graft .material ul{padding: 0 50px 5px;}
	.graft .material li a{ display: inline-block; padding-top: 15px;}

	#pop .pop_img .desktop {width:100%;display:none;}
	#pop .pop_img .tablet {width:100%;display:block;}
	#pop .pop_img .mobile {width:100%;display: none;}

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

	#pop .pop_img .desktop {width:100%;display:none;}
	#pop .pop_img .tablet {display:none;}
	#pop .pop_img .mobile {width:100%;display:block;}

	.slider_main .slick-dots {top:auto;left:0;bottom:10px;width:100%;}
    .slider_main .tablet {display: none;}
    .slider_main .mobile {width:100%;display: block;}
    .graft .tit {width: 100%;line-height:25px;height:60px;background-image: none;font-size:1.0em;text-align: center;}
    .graft .tit span {font-weight: bold;margin: 18px 0 0 0;}
    .graft .material {width: 100%;}
    .graft .material img {width: 65px;}
    .graft .material .slick-prev{width:40px;height: 40px;left:5px;background-size: cover !important;}
    .graft .material .slick-next{width:40px;height: 40px;right:5px;background-size: cover !important;}
    .main_link_thumb li {width:100%;margin-left: 0;}
    .main_link_thumb .txt_wrap .more button {width:40px;height:40px;background-size: cover;}
    .main_link_thumb .txt_wrap .tit {margin-top: -10px;}
    .subcontractor .brand {width: 75%;padding: 5.2% 12%;}
    .subcontractor .brand_list img {height: 33px;}
    .subcontractor .medical {width: 100%;height: auto;border-bottom: 1px solid #eaeaea;}
    .subcontractor .medical .tit {display: inline-block;}
    .subcontractor .medical .unit_set {display: inline-block;vertical-align: middle;}
    .main_notice .tab_set ul.tabs li {width: 29%;font-size: .85em;}
    .main_notice .tab_set ul.tabs .more {width: 12.7%;}
    .main_notice .tab_set ul.tabs li.more {width: 14%;background-size:40%;}
    .main_bnr {width:100%;height: auto;background: url(../img/main/main_bnr01_mobile.jpg);background-size: contain;}
    .main_bnr .desktop {display: none;}
    .main_bnr .mobile {display: block;width:100%;}
    .main_gov3 {width:100%;margin-left: 0;margin-top: 20px;}
	.graft .material {float:right;/*height:148px;*/width:100%;border:1px solid #e3e3e3;}
	.main_link_thumb{margin-bottom:0;}
}

@media(max-width:480px){
	.popup01{
		left: 25% !important;
	}
}