@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); 

body.bg { background:url(../images/bg_top.jpg) top center repeat-x;}
.mobileArea { display: none; }

.visual{ width:100%; height:325px; background-position:center;text-align:center; overflow:hidden;   }
.visual #title { font-family: '맑은 고딕'; font-size:2.6em; color:#fff; text-transform:uppercase;  margin-top:185px; display:inline-block; line-height:1.5em; border-top:1px rgba(255,255,255,0.8) solid;  border-bottom:1px rgba(255,255,255,0.8) solid; font-weight: lighter; padding-bottom:5px; }

#container {
*display:inline-block; width:1200px; overflow:hidden; margin: 0 auto 0; }
#container:after { display:block; clear:both; content:'' }





/* 상단타이틀영역 */
.titleArea { position:relative;  margin-top:70px; text-align:center; }
.titleArea > #subtitle { font-family: '맑은 고딕'; font-size:3.5em; font-weight: normal; letter-spacing:-1px; color:#343434; background:url(../images/bg_title.png) center bottom no-repeat; padding-bottom:25px; }
.titleArea > .text { font-family: '맑은 고딕';  font-size:1.3em; color:#555; margin-top:25px; }



/* 컨텐츠영역 */
#content{  }

#content .wrapper{ margin: 70px 0 0 0; }
#content .wrapper2{ margin: 70px 0 0 0; padding-bottom:30px; border-bottom:1px #CCC dashed; }
#content .wrapper3{ margin: 70px 0 0 0; padding-bottom:40px; background:url(../images/line_01.png) repeat-x bottom;;}



.soo  {overflow:hidden;}
.soo > .pic { float:left; width:610px; height:610px; }
.soo > .pic img { box-shadow:20px 20px 0px rgba(0, 0, 0, 0.1)}
.soo > .contents {float:left; margin-left:70px; width:500px; text-align:center; }
.soo > .contents > .text1{font-family: 'Nanum Myeongjo', serif; color: #111; font-size:2.1em; margin-top:25px;  }
.soo > .contents > .text2{font-family: '맑은 고딕'; color: #333; font-size: 1.3em; margin-top:25px; line-height:1.6em;  }
.soo > .contents .btn { text-align:center; margin-top:25px; }
.soo > .contents .btn a{ display:inline-block; background:#ff4d4d; line-height:42px; padding:0 35px;font-family: '맑은 고딕'; font-size:1.3em; color:#fff; }
.soo > .contents .btn a:hover{ background:#111;}

.soo > .contents .csBannerArea {border-top:1px #dadada solid; margin-top:95px;}
.soo > .contents .csBanner{ border-bottom:1px #dadada solid; padding:22px; overflow:hidden; text-align:left;}
.soo > .contents .csBanner .icon{ float:left; width:80px; height:80px; }
.soo > .contents .csBanner .icon img { box-shadow:4px 4px 0px rgba(0, 0, 0, 0.1)}
.soo > .contents .csBanner .contents {margin-left:25px;float:left;}
.soo > .contents .csBanner .title{font-family:  '맑은 고딕'; color: #111; font-size:1.3em; margin-top:15px; font-weight:bold;   }
.soo > .contents .csBanner .text{font-family: '맑은 고딕'; color: #333; font-size: 1.2em; margin-top:7px; line-height:1.6em;  }



 @media all and (max-width:992px) {
.visual{ width:100%; height:250px; background-position:center;text-align:center; overflow:hidden; background-size:cover   }
.visual #title { font-family: '맑은 고딕'; font-size:2.2em; color:#fff; text-transform:uppercase;  margin-top:135px; display:inline-block; line-height:1.5em; border-top:1px rgba(255,255,255,0.8) solid;  border-bottom:1px rgba(255,255,255,0.8) solid; font-weight: lighter; padding-bottom:5px; }

#container {
*display:inline-block; width:100%; overflow:hidden; margin: 0 auto 0; }
#container:after { display:block; clear:both; content:'' }





/* 상단타이틀영역 */
.titleArea { position:relative;  margin-top:70px; text-align:center; }
.titleArea > #subtitle { font-family: '맑은 고딕'; font-size:3.5em; font-weight: normal; letter-spacing:-1px; color:#343434; background:url(../images/bg_title.png) center bottom no-repeat; padding-bottom:25px; }
.titleArea > .text { font-family: '맑은 고딕';  font-size:1.3em; color:#555; margin-top:25px; }



/* 컨텐츠영역 */
#content{  }

#content .wrapper{ margin: 7% 0 0 0; }
#content .wrapper2{ margin: 7% 0 0 0; padding-bottom:30px; border-bottom:1px #CCC dashed; }
#content .wrapper3{ margin: 7% 0 0 0; padding-bottom:40px; background:url(../images/line_01.png) repeat-x bottom;;}



.soo  {overflow:hidden;}
.soo > .pic { float: none; display:block; text-align:center; width:100%; height:auto; }
.soo > .pic img { box-shadow: none; width:90%; max-width:590px; }
.soo > .contents {float:none; margin:0 auto; width:90%;max-width:590px;  text-align:center; }
.soo > .contents > .text1{font-family: 'Nanum Myeongjo', serif; color: #111; font-size:2.1em; margin-top:25px;  }
.soo > .contents > .text2{font-family: '맑은 고딕'; color: #333; font-size: 1.3em; margin-top:25px; line-height:1.6em;  }
.soo > .contents .btn { text-align:center; margin-top:25px; }
.soo > .contents .btn a{ display:inline-block; background:#ff4d4d; line-height:42px; padding:0 35px;font-family: '맑은 고딕'; font-size:1.3em; color:#fff; }
.soo > .contents .btn a:hover{ background:#111;}

.soo > .contents .csBannerArea {border-top:1px #dadada solid; margin-top:45px;}
.soo > .contents .csBanner{ border-bottom:1px #dadada solid; padding:22px; overflow:hidden; text-align:left;}
.soo > .contents .csBanner .icon{ float:left; width:80px; height:80px; }
.soo > .contents .csBanner .icon img { box-shadow:4px 4px 0px rgba(0, 0, 0, 0.1)}
.soo > .contents .csBanner .contents {margin-left:25px;float:left;}
.soo > .contents .csBanner .title{font-family:  '맑은 고딕'; color: #111; font-size:1.3em; margin-top:15px; font-weight:bold;   }
.soo > .contents .csBanner .text{font-family: '맑은 고딕'; color: #333; font-size: 1.2em; margin-top:7px; line-height:1.6em;  }
	 
 }

 @media all and (max-width:768px) {
.visual{ width:100%; height:220px; background-position:center;text-align:center; overflow:hidden; background-size:cover   }
.visual #title { font-family: '맑은 고딕'; font-size:1.5em; color:#fff; text-transform:uppercase;  margin-top:115px; display:inline-block; line-height:1.5em; border-top:1px rgba(255,255,255,0.8) solid;  border-bottom:1px rgba(255,255,255,0.8) solid; font-weight: lighter; padding-bottom:5px; }

#container {
*display:inline-block; width:100%; overflow:hidden; margin: 0 auto 0; }
#container:after { display:block; clear:both; content:'' }





/* 상단타이틀영역 */
.titleArea { position:relative;  margin-top:7%; text-align:center; }
.titleArea > #subtitle { font-family: '맑은 고딕'; font-size:1.8em; font-weight: normal; letter-spacing:-1px; color:#343434; background:url(../images/bg_title.png) center bottom no-repeat; padding-bottom:15px; }
.titleArea > .text { font-family: '맑은 고딕';  font-size:1em; color:#555; margin-top:15px; }



/* 컨텐츠영역 */
#content{  }

#content .wrapper{ margin: 7% 0 0 0; }
#content .wrapper2{ margin: 7% 0 0 0; padding-bottom:30px; border-bottom:1px #CCC dashed; }
#content .wrapper3{ margin: 7% 0 0 0; padding-bottom:40px; background:url(../images/line_01.png) repeat-x bottom;;}



.soo  {overflow:hidden;}
.soo > .pic { float: none; display:block; text-align:center; width:100%; }
.soo > .pic img { box-shadow: none; width:95%; max-width:590px; }
.soo > .contents {float:none; margin:0 auto; width:95%;max-width:590px;  text-align:center; }
.soo > .contents > .text1{font-family: 'Nanum Myeongjo', serif; color: #111; font-size:1.4em; margin-top:25px;  }
.soo > .contents > .text2{font-family: '맑은 고딕'; color: #333; font-size: 1em; margin-top:15px; line-height:1.6em;  }
.soo > .contents .btn { text-align:center; margin-top:20px; }
.soo > .contents .btn a{ display:inline-block; background:#ff4d4d; line-height:32px; padding:0 25px;font-family: '맑은 고딕'; font-size:1.1em; color:#fff; }
.soo > .contents .btn a:hover{ background:#111;}

.soo > .contents .csBannerArea {border-top:1px #dadada solid; margin-top:25px;}
.soo > .contents .csBanner{ border-bottom:1px #dadada solid; padding:10px; overflow:hidden; text-align:left;}
.soo > .contents .csBanner .icon{ float:left; width:50px; height:50px; }
.soo > .contents .csBanner .icon img { width:100%;}
.soo > .contents .csBanner .contents {margin-left:15px;float:left;}
.soo > .contents .csBanner .title{font-family:  '맑은 고딕'; color: #111; font-size:1em; margin-top:8px; font-weight:bold;   }
.soo > .contents .csBanner .text{font-family: '맑은 고딕'; color: #333; font-size: 1em; margin-top:3px; line-height:1.6em;  }

}