@charset "utf-8";

/*
Description	: (주)커뮤니케어

Web 		: http://faro.comunicare.co.kr/
Filename	: common.css
Version		: 2016-09-20 ver.Basic

*/
 

/* Reset CSS ----------------------------------------------------------------------------------------------------------------------------*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0; padding:0;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ul, ol, dl { list-style:none; }

fieldset, iframe { border:0;}
li img, dd img { vertical-align:top;}
table { border-collapse:collapse; border-spacing:0; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
hr { display:none;}
#skip, .skip { font-size:0; width:0; height:0; line-height:0; position:absolute; left:-1000em;}

li img, dd img { vertical-align:top;}

/* Base CSS*/

i,em,address { font-style:normal; font-weight:normal; }

html,body { margin:0;padding:0;height:100%;}

body { font-family:'NanumGothic', '나눔고딕', 'Dotum', '돋움',  'Verdana', 'Helvetica', sans-serif; font-size:0.875em; line-height:1.8em; }
h1 { text-transform:uppercase; font-size:4em; line-height:1em;font-family: 'Roboto-BoldCondensed';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot");src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot?#iefix") format('embedded-opentype'),url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.woff") format('woff')} /*대문자*/
h2 { font-size:2em; line-height:2em;font-family: 'Roboto-BoldCondensed';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot");src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot?#iefix") format('embedded-opentype'),url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.woff") format('woff')}

/* a */
a { color:#000; font:normal 0.875em 'Roboto-BoldCondensed', NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}
a:hover { color:#FC0; font:normal 0.875em 'Roboto-BoldCondensed', NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}
a:link, a:visited, a:active { color:#000; font:normal 0.875em 'Roboto-BoldCondensed', NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}

 
/* Font-Face ----------------------------------------------------------------------------------------------------------------------------*/


@font-face{font-family:'NanumGothic','나눔고딕', sans-serif;font-style:normal;font-weight:400;src:url("http://faro.comunicare.co.kr/font/NanumGothic-Regular.eot");src:local("http://faro.comunicare.co.kr/font/NanumGothic-Regular.eot"), url('http://faro.comunicare.co.kr/font/NanumGothic-Regular.woff') format('woff');}
@font-face{font-family:'NanumGothic','나눔고딕', sans-serif;font-style:normal;font-weight:700;src:url("http://faro.comunicare.co.kr/font/NanumGothic-Bold.eot");src:local("http://faro.comunicare.co.kr/font/NanumGothic-Bold.eot"), url('http://faro.comunicare.co.kr/font/NanumGothic-Bold.woff') format('woff');}
@font-face{font-family:'NanumGothic','나눔고딕', sans-serif;font-style:normal;font-weight:900;src:url("http://faro.comunicare.co.kr/font/NanumGothic-ExtraBold.eot");src:local("http://faro.comunicare.co.kr/font/NanumGothic-ExtraBold.eot"), url('http://faro.comunicare.co.kr/font/NanumGothic-ExtraBold.woff') format('woff');}


@font-face {font-family: 'Roboto-Bold',;font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-Bold.eot");src: url"(http://faro.comunicare.co.kr/font/Roboto-Bold.eot?#iefix") format('embedded-opentype'),url("http://faro.comunicare.co.kr/font/Roboto-Bold.woff") format('woff')}
@font-face {font-family: 'Roboto-BoldCondensed';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot");src: url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.eot?#iefix") format('embedded-opentype'),url("http://faro.comunicare.co.kr/font/Roboto-BoldCondensed.woff") format('woff')}
@font-face {font-family: 'Roboto-Black';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-Black.eot");src: url("http://faro.comunicare.co.kr/font/Roboto-Black.eot?#iefix") format('embedded-opentype'),url("http://faro.comunicare.co.kr/font/Roboto-Black.woff") format('woff')}
@font-face {font-family: 'Roboto-Medium';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-Medium.eot");src: url("http://faro.comunicare.co.kr/font/Roboto-Medium.eot?#iefix") format('embedded-opentype')}
@font-face {font-family: 'Roboto-Light';font-style: normal;src: url("http://faro.comunicare.co.kr/font/Roboto-Light.woff") format('woff'),}


/* common*/
.contents1 { position:relative;max-width:1001px;height:650px;float:left;  padding-top:75px;}
.contents2 { position:relative;max-width:1001px;height:750px;float:left;  padding-top:75px;}
.contents3 { position:relative;max-width:1001px;height:750px;float:left;  padding-top:75px;}
.contents4 { position:relative;max-width:1001px;height:1200px;float:left; padding-top:75px;}
.contents5 { position:relative;max-width:1001px;height:900px;float:left;  padding-top:75px;}



/* contents */
.top {_overflow:hidden;text-align:center; background:url(../images/bg_why.png); height:250px; }
.top .contents{position:relative; }
.top .menu{position:absolute;top:200px;left:0;width:100%;height:50px; background:#fff; border-top:1px solid #eee; border-bottom:4px solid #333; }

.wide { max-width:900px; margin:0 auto; overflow:auto}
.top .menu li{ display:inline; }
.top .menu a { display:inline-block;padding:12px 5%;font-size:1.5em;font-family: 'Roboto-BoldCondensed';}
.top .menu a.on { border-top:4px solid #2a3b97;}

.mainTitle {float:left; width:325px}
.top h1 { margin:30px auto 0; text-transform:uppercase; color:#4a8ad9;font-size:4em;font-family: 'Roboto-BoldCondensed';}
.top p { font-size:1.5em; color:#ddd; text-align:center;font:normal 1.5em 'Roboto-BoldCondensed'}

.main_top { height:150px; padding-top:135px; text-align:right}
.main_top img { width:200px;}
.top .menu_fixed{position:fixed !important;top:0 !important;z-index:100}



#page_1 { background-color:#fdfdfd; padding:20px; overflow:auto; clear:both;border-bottom:1px solid #ddd;}

#page_2 { background-color:#fdfdfd; padding:20px; overflow:auto; border-bottom:1px solid #ddd; 
		  background:url(../images/back.png) 100% 100% no-repeat;}

#page_3 { background-color:#fdfdfd; padding:20px; overflow:auto; border-bottom:1px solid #ddd;
		  background:url(../images/back.png) 100% 100% no-repeat;}

#page_4 { background-color:#fdfdfd; padding:20px; overflow:auto; border-bottom:1px solid #ddd;}

#page_5 { background-color:#fdfdfd; padding:20px; overflow:auto; border-bottom:1px solid #ddd; }


#page_1 h1, #page_2 h1, #page_3 h1, #page_4 h1, #page_5 h1 { float:right; margin-top:50px;}

.wrap { margin:20px 0 60px; overflow:auto}

.title { width:180px; float:left; clear:both; margin-bottom:20px;}

#page_1 .text, #page_2 .text, #page_3 .text, #page_4 .text, #page_5 .text { float:left; padding-left:30px; border-left:1px solid #ddd;}

.wrapImg { width:90%;} 
.wrapImg img { width:100%}

.date { font:bold 1em Roboto Condensed, NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial; margin-right:20px;}
.datebig { font:bold 2.4em Roboto Condensed, NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial; margin-right:20px;}

.add { margin-bottom:10px;line-height:200%; }
a.tel { font:normal 1em NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}
.traffic { margin-top:10px; font-weight:bold;}

.mm { display:none}

.busG { color:#060}
.busB { color:#06C}
.subway3 { color:#F60}
.subwayNew { color:#900}

#page_5 .add { color:#333; font:normal 1em NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}

#footer { text-align:center; color:#999; padding:15px 0;}


  
 
@media screen and (max-width:640px) {
body { font-size:0.63em; line-height:1.8em; }
.top .menu li{ display:inline-block;width:17%; text-align:center;}
.top .menu li.last {display:inline-block;width:22%; text-align:center;}
.top .menu a {display:inline-block;padding:12px 5%;font-size:1.5em;}

#page_1 h1, #page_2 h1, #page_3 h1, #page_4 h1, #page_5 h1 { float:right; margin-top:50px;text-transform:uppercase; color:#000;font-size:2em;font-family: 'Roboto-BoldCondensed';}


.main_top { height:260px; padding-top:140px; text-align:right}
.main_top img { width:200px;}
.wrapImg img { width:100%}

.contents1 { position:relative;max-width:1001px;height:580px;float:left; padding-top:20px;}
.contents2 { position:relative;max-width:1001px;height:580px;float:left; padding-top:20px;}
.contents3 { position:relative;max-width:1001px;height:580px;float:left; padding-top:20px;}
.contents4 { position:relative;max-width:1001px;height:950px;float:left; padding-top:20px;}
.contents5 { position:relative;max-width:1001px;height:950px;float:left; padding-top:20px;}

.pc { display:none}
.mm { display:inline}

#page_1 .text, #page_2 .text, #page_3 .text, #page_4 .text, #page_5 .text { float:left; padding-left:10px; border-left:1px solid #ddd;}

#page_5 .add { color:#333; font:normal 0.7em NanumGothic,'나눔고딕', Dotum,'돋움', Verdana, Arial;text-decoration:none;}

}

@media screen and (max-width:320px) {
body { font-size:0.750em; line-height:1.8em; }
.top .menu li{ display:inline-block;width:17%; text-align:center;}
.top .menu a {display:inline-block;padding:12px 0;font-size:1em}


#page_1 h1, #page_2 h1, #page_3 h1, #page_4 h1, #page_5 h1 { float:right; margin-top:50px;text-transform:uppercase; color:#000;font-size:1em;font-family: 'Roboto-BoldCondensed';}


.main_top { height:260px; padding-top:140px; text-align:right}
.main_top img { width:200px;}
.wrapImg img { width:100%}

.contents1 { position:relative;max-width:1001px;height:760px;float:left; padding-top:20px;}
.contents2 { position:relative;max-width:1001px;height:760px;float:left; padding-top:20px;}
.contents3 { position:relative;max-width:1001px;height:760px;float:left; padding-top:20px;}
.contents4 { position:relative;max-width:1001px;height:1300px;float:left; padding-top:20px;}
.contents5 { position:relative;max-width:1001px;height:1000px;float:left; padding-top:20px;}

.pc { display:none}
.mm { display:inline}

#page_1 .text, #page_2 .text, #page_3 .text, #page_4 .text, #page_5 .text { float:left; padding-left:10px; border-left:1px solid #ddd;}

}


.brochure-box {position: relative;border-bottom:1px solid #303030;padding:20px 0 0 0;}
.brochure {position:relative;width:900px;height:650px; margin:0 auto;}

.brochure-slides { position: absolute; top: 0; left: 0; width:900px;height:650px;}


#slides { display: none }

a.slidesjs-next, a.slidesjs-previous{
      position:absolute;top:300px;display:block;text-indent:-9999px;width:42px;height:42px;
	  background:url(../images/btn_slider.png) no-repeat;z-index:100;
    }

a.slidesjs-play, a.slidesjs-stop {
      position:absolute;bottom:14px;left:0;width:10px;height:10px;text-align:center;text-indent:-9999px;
	  background:url(../images/btn_slider.png) no-repeat;z-index:101;
    } 

a.slidesjs-next { right:15px;background-position:-43px 0; }
a.slidesjs-previous {left:15px;background-position:0 0; }
a.slidesjs-play { left:870px; background-position: -77px -42px; }
a.slidesjs-stop { left:870px; background-position: -67px -42px; }

.slidesjs-pagination { position:absolute;padding: 0 10px; bottom:15px;left:-50px;;width:100%;height:10px;z-index:101;}

.slidesjs-pagination li {float: right; margin: 0 1px; }

.slidesjs-pagination li a { display: block; width: 12px; height: 0; padding-top: 12px; 
							background-image: url(../images/btn_slider.png);
							background-position: -34px -54px;
							float: left;
							overflow: hidden;
}

.slidesjs-pagination li a.active, .slidesjs-pagination li a:hover.active {width: 30px; background-position:0px -41px; }
.slidesjs-pagination li a:hover {  background-position:-34px -54px;}

.brochure-footer { text-align:center; color:#999; padding:15px 0;}