@charset "utf-8";

@media screen and (max-width:750px) {
#hd_pop div div{width:350px !important; height:auto !important;}
#hd_pop div div img{width:100% !important;}
}

/*main_layout*/
#main_layout #visual {position:relative; height:750px !important}
#main_layout #visual p.scroll_down {padding-bottom:52px; background:url(http://www.osci.kr/images/main/scroll_down.png) no-repeat center bottom; position:absolute; bottom:80px; left:50%; margin-left:-45px; z-index:6666; cursor:pointer; display:none}
#main_layout #visual p.scroll_down span {color:#fff;  font-size:13px; font-family:Roboto}
#main_layout #visual .slide_box *:focus {outline:0;}
#main_layout #visual .slide_box .slick-list, #main_layout #visual .slide_box .slick-track {width:100%; overflow:hidden; zoom:1; height:750px}
#main_layout #visual .slide_box button {position:absolute; top:50%; margin-top:-40px; left:0; z-index:10; width:55px; height:80px; border:0; font-size:0; background:url(http://www.osci.kr/images/main/visual_prev.png) no-repeat center top; z-index:9998;}
#main_layout #visual .slide_box button.slick-next {left:auto; right:0; background:url(http://www.osci.kr/images/main/visual_next.png) no-repeat center top;}
#main_layout #visual .slide_box button:hover {background-position:center bottom;}
#main_layout #visual .slide_box .slick-slide {width:100%; background-repeat:no-repeat; background-position:center center; background-size:cover; background-attachment:fixed; float:left; position:relative;}
#main_layout #visual .slide_box .slide_01 {background-image:url(../img/main/m_banner1.jpg);}
#main_layout #visual .slide_box .slide_02 {background-image:url(../img/main/m_banner2.jpg);}
#main_layout #visual .slide_box .slide_03 {background-image:url(../img/main/m_banner3.jpg);}
#main_layout #visual .slide_box ul.text {position:absolute; top:50%; margin-top:-170px; width:100%;}
#main_layout #visual .slide_box .slide_01 ul.text {margin-top:-170px;}
#main_layout #visual .slide_box ul.text li {color:#fff; text-align:center; padding:0 80px;}
#main_layout #visual .slide_box ul.text li.big {font-size:50px; line-height:63px;  font-weight:400;}
#main_layout #visual .slide_box ul.text li.deco {width:30px; height:3px; background-color:#fff; margin:20px auto; padding:0;}
#main_layout #visual .slide_box ul.text li.small {font-size:20px; line-height:30px; margin-bottom:40px;}
#main_layout #visual .slide_box ul.text li.btn a {color:#fff; font-size:13px; display:inline-block; height:38px; line-height:38px; border:1px solid #fff; border-radius:20px;  padding:0 40px 0 20px; background:url(http://www.osci.kr/images/main/more_case_w.png) no-repeat right 15px center; transition:all 0.1s ease-out;}
#main_layout #visual .slide_box ul.text li.btn a:hover {color:#55b9ff; background:url(http://www.osci.kr/images/main/more_case_b.png) no-repeat right 15px center #fff;}

#main_layout .main_title {text-align:center; margin-bottom:60px;}
#main_layout .main_title ul li.eng {font-size:40px; }
#main_layout .main_title ul li.eng span {}
#main_layout .main_title ul li.deco {width:30px; height:3px; background-color:#bbb; margin:20px auto;}
#main_layout .main_title ul li.kor {font-size:15px; line-height:25px; font-weight:300;}
#m_area2 .main_button a {display:inline-block; font-size:13px; font-weight:300; color:#fff; height:38px; line-height:38px; border:1px solid #3a3e47; background:url(http://www.osci.kr/images/main/more_case_w.png) no-repeat right 15px center #3a3e47; border-radius:20px; padding:0 40px 0 20px; transition:all 0.1s ease-out;}
#m_area2 a:hover {border:1px solid #55b9ff; background:url(http://www.osci.kr/images/main/more_case_b.png) no-repeat right 15px center #fff; color:#55b9ff;}

#main_layout #m_area2 {padding:0px 0 30px ;}
#main_layout #m_area2 .list {overflow:hidden; zoom:1;}
#main_layout #m_area2 .list>div {float:left; }
#main_layout #m_area2 .list>div ul {position:relative; padding:19px 0 0 30px;}
#main_layout #m_area2 .list>div ul li.icon {font-size:0; letter-spacing:0; word-spacing:0; position:absolute; top:0; left:0;}
#main_layout #m_area2 .list>div ul li.icon i {width:58px; text-align:center; height:58px; line-height:58px; vertical-align:middle; color:#55b9ff; font-size:30px; border:1px solid #bec8d2; border-radius:30px; transition:all 0.1s ease-out;}
#main_layout #m_area2 .list>div:hover ul li.icon i {border:1px solid #55b9ff; background-color:#55b9ff; color:#fff;}
#main_layout #m_area2 .list>div ul li.title {font-size:15px; line-height:20px;  padding:13px 0; font-family:Roboto; text-transform:uppercase}
#main_layout #m_area2 .list>div ul li.text {font-size:25px; line-height:35px; position:relative; color:#2c2c2c }
#main_layout #m_area2 .list>div ul li.text span {position:absolute; top:0; left:0; font-size:12px; color:#7dc9ff;}
#main_layout #m_area2 .list .group_01 { background:url(../img/main/doctor_bg.jpg); width:50%; height:445px}
#main_layout #m_area2 .list .group_01 ul { margin-top:60px; margin-left:20px}
#main_layout #m_area2 .list .group_02 { background:#f4f4f4; }
#main_layout #m_area2 .list .group_03 { background:#9399a7;}
#main_layout #m_area2 .m_info_area {/* padding:20px 0px 20px 50px;*/padding:40px 0px 40px 50px; width:45.7%;/* padding:11px 0 12px 50px*/ }
#main_layout #m_area2 .m_info_area h2 { float:left; text-align:center; font-size:22px; line-height:30px;}
#main_layout #m_area2 .m_info_area p { margin-top:10px}
#main_layout #m_area2 .m_info_area ul { float:left; font-size:14px; line-height:20px;width:75%; font-family:Roboto, NanumSR }
#main_layout #m_area2 .m_info_area ul span { float:left; }
#main_layout #m_area2 .m_info_area ul li { clear:both; margin-bottom:3px; display:inline-block; width:100% }
#main_layout #m_area2 .m_info_area ul .bg { background:#616161; color:#fff; width:100px; padding:3px 0; text-align:center; border-radius:15px;  margin-right:15px}
#main_layout #m_area2 .list .group_02 h2 { margin-top:42px}
#main_layout #m_area2 .list .group_03 h2 { margin-top:30px; color:#fff}
#main_layout #m_area2 .list .group_02 li:nth-last-child(2) .bg { background:#F90}
#main_layout #m_area2 .list .group_03 li:first-child .bg { background:#3a3e47}
#main_layout #m_area2 .list .group_03 li:last-child .bg { background:#61697e}
#main_layout #m_area2 .list .group_03 .call { font-family:Roboto; font-size:30px; line-height:24px; color:#3a3e47}
#main_layout #m_area2 .list .group_03 li:last-child { color:#fff; font-size:15px; line-height:23px}
#main_layout #m_area2 .list .group_03 ul { padding:51px 0 38px 30px}
#main_layout #m_area2 .list .group_02 li:last-child { margin-top:10px}
#main_layout #m_area2 .main_button {padding-top:30px; margin-left:47px }


#main_layout #s_banner {overflow:hidden; zoom:1; width:1200px; margin:30px auto}
#main_layout #s_banner>div {width:25%; float:left; height:0; padding-bottom:30%; background-repeat:no-repeat; background-position:center center; background-size:cover; cursor:pointer; position:relative;}
#main_layout #s_banner>div.group_01 {background-image:url(../img/main/s_ba1.jpg);}
#main_layout #s_banner>div.group_02 {background-image:url(../img/main/s_ba2.jpg);}
#main_layout #s_banner>div.group_03 {background-image:url(../img/main/s_ba3.jpg);}
#main_layout #s_banner>div.group_04 {background-image:url(../img/main/s_ba4.jpg);}
#main_layout #s_banner>div>ul {position:absolute; top:50%; margin-top:85px; left:0; width:100%; z-index:2; transition:all 0.1s ease-out;}
#main_layout #s_banner>div>ul>li {color:#fff;}
#main_layout #s_banner>div>ul>li.icon { margin-left:20px}
#main_layout #s_banner>div>ul>li.icon>p { float:left; font-size:18px; font-family:Roboto}
#main_layout #s_banner>div>ul>li.icon>p span { display:block;font-size:21px; font-family:NanumSR; line-height:30px; font-weight:bold}
#main_layout #s_banner>div>ul>li.icon>p:last-child { margin-top:16px}
#main_layout #s_banner>div:nth-child(odd)>ul>li.icon>p span{ color:#de5800}
#main_layout #s_banner>div:nth-child(even)>ul>li.icon>p { color:#666666}
#main_layout #s_banner>div:nth-child(even)>ul>li.icon>p span{ color:#3a3a3a}
#main_layout #s_banner>div>ul>li.deco {width:30px; height:3px; background-color:#fff; margin:20px auto;}
#main_layout #s_banner>div>ul>li.text {font-size:20px; line-height:25px; clear:both}
#main_layout #s_banner>div>ul>li.text ul {padding-top:15px; border-top:1px solid #fff; margin:15px 20px; display:none; color:#fff !important}
#main_layout #s_banner>div>ul>li.text ul li {font-size:15px; line-height:20px; font-weight:300; color:#fff; position:relative; padding:0 12px; margin-bottom:8px; text-align:left;}
#main_layout #s_banner>div>ul>li.text ul li span {position:absolute; top:0; left:0; opacity:0.6; color:#fff;}
#main_layout #s_banner>div p.blind {position:absolute; top:0; left:0; width:100%; height:100%; background-image:none; z-index:1; transition:all 0.5s ease-out;}
#main_layout #s_banner>div:hover>ul {margin:0; top:100px; color:#fff !important}
#main_layout #s_banner > div:hover:nth-child(2n+1) > ul > li.icon > p span { color:#fff}
#main_layout #s_banner > div:hover:nth-child(even) > ul > li.icon>p { color:#fff}
#main_layout #s_banner > div:hover:nth-child(even) > ul > li.icon>p span { color:#fff}
#main_layout #s_banner>div:hover>ul>li.text ul {display:block;}
#main_layout #s_banner>div:hover p.blind {background-image:url(../img/main/s_ba_bg.png);}
#s_banner .more { right:10px; top:17px; font-family:Roboto; position:absolute }
#s_banner .more a { background:#fff; border-radius:50%; text-align:center; width:50px; height:50px; display:block; line-height:50px; font-size:14px; color:#ee9039; text-transform:uppercase}
#s_banner .more2 a { color:#b29c8e}
#s_banner  .a_bt { display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;}


.mo_call { display:none}

@media screen and (max-width:1680px) {
	#main_layout #s_banner>div>ul>li.icon>i {font-size:75px;}	
	#main_layout #s_banner>div:hover>ul {}
	#main_layout #s_banner>div>ul>li.icon>i {font-size:50px;}
	#main_layout #s_banner>div>ul>li.deco {margin:10px auto;}
	#main_layout #s_banner>div>ul>li.text ul {margin:20px 40px;}
	#main_layout #s_banner>div:hover>ul {}
}

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

@media screen and (max-width:1366px) {
	#main_layout #visual .slide_box ul.text li.big {font-size:40px; line-height:45px;}
	#main_layout #visual .slide_box ul.text li.small {font-size:16px; line-height:26px;}
	#main_layout #visual .slide_box ul.text li.deco {margin:20px auto;}
	
	#main_layout #service.type_02 .wrap {padding:0;}
	
	#main_layout #s_banner>div:hover>ul {}
	#main_layout #s_banner>div>ul>li.text ul {margin:15px 30px; padding-top:15px;}
	#main_layout #s_banner>div>ul>li.text ul li {font-size:13px; line-height:18px;}

}

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

	#main_layout #s_banner>div {}
	#main_layout #visual .slide_box ul.text {margin-top:-133px}
	#main_layout #visual .slide_box .slide_01 ul.text { margin-top:-133px}
}

@media screen and (max-width:1024px) {
	
	#main_layout #visual .slide_box .slide_01 ul.text { margin-top:-130px}
	#main_layout .main_title {margin-bottom:40px;}
	#main_layout .main_title ul li.eng {font-size:30px; line-height:35px;}
	#main_layout .main_title ul li.deco {width:20px; margin:15px auto;}
	#main_layout .main_button {padding-top:40px;}
	#main_layout #m_area2 { width:100%}
	
	#main_layout #m_area2 .list>div ul {padding:0 0 0 70px;}
	#main_layout #m_area2 .list>div ul li.icon i {width:48px; height:48px; line-height:48px; font-size:20px;}
	#main_layout #m_area2 .list>div ul li.title {padding:12px 0; font-size:16px; line-height:25px;}
	#main_layout #m_area2 .m_info_area { width:47.7%; padding:29px 0 20px 22px}
	#main_layout #m_area2 .m_info_area ul { width:80%}
	#main_layout #m_area2 .list > div ul { padding:0 0 0 10px}
	#main_layout #m_area2 .m_info_area h2 { font-size:20px}
	#main_layout #m_area2 .list .group_02 h2 { margin-top:23px}
	#main_layout #m_area2 .list .group_03 ul { padding:51px 0 38px 14px}
	#main_layout #s_banner { width:95%; margin:20px auto}
	#main_layout #s_banner > div { }
	#main_layout #s_banner > div > ul > li.icon > p { font-size:15px}
	#main_layout #s_banner > div > ul { margin-top:57px}
	#main_layout #m_area2 .main_button { margin-left:30px}
	
	
	
	

}

@media screen and (max-width:900px) {
	#main_layout #s_banner>div {width:50%;}
	#main_layout #s_banner > div.group_01 { background-size:70%; background-position:center; background-color:#f4c35a}
	#main_layout #s_banner > div.group_02 { background-size:70%; background-position:center; background-color:#e8e8e8}
	#main_layout #s_banner > div.group_03 { background-size:70%; background-position:center; background-color:#f4c35a}
	#main_layout #s_banner > div.group_04 { background-size:70%; background-position:center; background-color:#dedddd}
	#main_layout #s_banner > div { padding-bottom:37%}
	#main_layout #m_area2 .list .group_01 { display:none}
	#main_layout #m_area2 .m_info_area { width:50%; padding:0; text-align:center}
	#main_layout #m_area2 .m_info_area h2 { float:none; margin-bottom:10px}
	#main_layout #m_area2 .m_info_area ul { float:none; width:97%; text-align:left}
	#main_layout #visual .slide_box ul.text li.big { font-size:39px;}
	#main_layout #m_area2 .list .group_02 { padding:0 0 13px 0}
	#main_layout #m_area2 .list .group_02 li:last-child { text-align:center; margin-top:5px}
	#main_layout #m_area2 .list .group_03 ul { padding:30px 0 67px 14px}
	#main_layout #m_area2 .m_info_area ul .bg { padding:1px 0; font-size:13px}
	
	
}

@media screen and (max-width:800px) {
	#main_layout #visual {height:400px !important;}
	#main_layout #visual .slick-slide {height:400px !important; background-attachment:inherit !important;}
	#main_layout #visual p.scroll_down {display:none;}
	#main_layout #visual .slide_box button {width:30px; height:44px; background-size:100% !important; margin-top:-22px;}
	#main_layout #visual .slide_box ul.text {margin-top:-33px;}
	#main_layout #visual .slide_box .slide_01 ul.text {margin-top:-33px;}
	#main_layout #visual .slide_box .slide_02 ul.text {margin-top:-33px;}
	#main_layout #visual .slide_box ul.text li.big {font-size:25px; line-height:32px;}
	#main_layout #visual .slide_box ul.text li.deco {margin:15px auto; width:20px;}
	#main_layout #visual .slide_box ul.text li.small {font-size:14px; line-height:21px; margin-bottom:20px;}
	#main_layout #visual .slide_box ul.text li.btn a {height:30px; line-height:30px; font-size:12px;}
	#main_layout #service .list>div {width:32%; margin:0 0.5% 6px 0.5%; float:none; display:inline-block;}
	#main_layout #s_banner>div {width:50%;  padding:59px 0; height:auto; background-size:50%; background-position:right; height:66px;}
	#main_layout #s_banner > div.group_01 { background-color:#f4c45c;background-position:right;background-size:50%; }
	#main_layout #s_banner > div.group_02 { background-color:#e7e7e7; background-position:right;background-size:50%;}
	#main_layout #s_banner > div.group_03 { background-color:#f4c45c; background-position:right;background-size:50%;}
	#main_layout #s_banner > div.group_04 { background-color:#dedddd; background-position:right;background-size:50%;}
	#main_layout #s_banner>div>ul {position:relative; top:auto; left:auto; margin:0;}
	#main_layout #s_banner>div>ul>li.text ul {margin:20px 40px 0 40px;}
	#main_layout #s_banner>div:hover>ul>li.deco {display:block;}
	#main_layout #s_banner>div:hover>ul {top:-40px;}
	#main_layout #s_banner > div > ul > li.text ul {}
	
	#main_layout #m_area2 .m_info_area ul .bg { width:65px; margin-right:10px}
	#main_layout #m_area2 .m_info_area p img { width:50px}
	#main_layout #m_area2 .m_info_area ul li { margin-bottom:0}
	#main_layout #m_area2 .list .group_03 li:last-child { font-size:14px}
	#main_layout #m_area2 .list .group_03 ul { padding:21px 0 38px 14px}
	
	.mo_call { display:block; width:100%; text-align:center; font-size:17px; line-height:35px; margin:15px auto 0; background:#515764; padding:5px; }
	.mo_call a { width:100%; display:block; color:#fff}
	.mo_call a:hover { border:0 !important; background:#515764 !important; color:#fff !important}
	.mo_call img { width:30px;}
	
	#s_banner .more { display:none}

	
	
}

@media screen and (max-width:640px) {
	#main_layout #visual .slide_box ul.text li.small br {display:none;}
	#main_layout .main_title ul li.eng {margin-bottom:10px;}
	#main_layout .main_title ul li.deco {display:none;}
	#main_layout .main_title ul li.kor {font-size:14px; line-height:24px; padding:0;}
	#main_layout .main_title ul li.kor br {display:none;}
	#main_layout #m_area2 .list>div {float:none; width:auto;}
	#main_layout #m_area2 .list>div.group_02 { padding:20px 0;  border-bottom:1px dotted #ddd;}
	#main_layout #m_area2 .list .group_03 h2 { margin-top:0; padding-top:30px}
	

	
	

}

@media screen and (max-width:480px) {
	#main_layout #visual {height:300px !important;}
	#main_layout #visual .slick-slide {height:300px !important; background-attachment:inherit !important;}
	#main_layout #visual .slide_box ul.text {position:relative; margin:0 !important; top:0; padding-top:120px; letter-spacing:-1px}
	#main_layout #visual .slide_02 ul.text {padding-top:120px;}
	#main_layout #visual .slide_03 ul.text, #main_layout #visual .slide_04 ul.text {padding-top:120px;}
	#main_layout #visual .slide_box ul.text li {padding:0 40px;}
	#main_layout #visual .slide_box ul.text li.big {font-size:18px; line-height:25px; margin-bottom:5px;}
	#main_layout #visual .slide_box ul.text li.big br {display:none;}
	#main_layout #visual .slide_box ul.text li.deco {display:none;}
	#main_layout #visual .slide_box ul.text li.small {font-size:12px; line-height:19px;}
	#main_layout #m_area2 {padding:40px 0;}
	#main_layout #s_banner {}
	#main_layout #s_banner > div > ul > li.icon img { width:55px}
	#main_layout #s_banner > div { width:100%; padding:40px 0}
	#main_layout #s_banner > div > ul > li.text ul { margin:10px 20px 0}
	#main_layout #s_banner > div > ul > li.icon > p:last-child { margin-top:7px}
	#main_layout #s_banner > div > ul > li.icon > p span { font-size:18px}
	#main_layout #s_banner>div:hover>ul {top:-23px;} 
	
	#main_layout #m_area2 { padding:0; margin:0 auto; width:95%}
	#main_layout #m_area2 .wrap { padding:0}
	#main_layout #m_area2 .list > div.group_02 { margin:0}
	#main_layout #m_area2 .list .group_02 h2 { margin:0 0 10px 0}
	#main_layout #m_area2 .list .group_03 { display:none}
	
	

	
}

@media screen and (max-width:320px) {
	#main_layout #visual .slide_box ul.text {padding-top:90px;}
	#main_layout #visual .slide_box ul.text li {text-align:left;}
	#main_layout #visual .slide_box ul.text li.big {font-size:15px; line-height:20px;}
	#main_layout .main_title {margin-bottom:30px;}
	#main_layout .main_title ul li.eng {font-size:25px; line-height:30px;}
	#main_layout .main_title ul li.kor {padding:0; font-size:13px; line-height:18px;}
	#main_layout #m_area2 .list>div ul {padding:60px 0 0 0;}
	#main_layout #m_area2 .list>div ul li.icon {left:50%; margin-left:-25px;}
	#main_layout #m_area2 .list>div ul li.title {padding:0; margin-bottom:15px; text-align:center;}
	#main_layout #service .list>div>ul.show>li.text {font-size:13px; line-height:18px;}
	#main_layout #service .list>div>ul.over li.title {font-size:14px; line-height:19px;}
	#main_layout #s_banner>div {padding:20px 0;}
	#main_layout #s_banner>div>ul>li.deco {width:20px;}
	#main_layout #s_banner>div>ul>li.text ul {margin:20px 30px 0 30px;}
}