/******** Common *********/
html {background:#f2f2f2;}
.mainWrap h2 {font-size:18px; font-weight:400; margin-bottom:15px;}
.mainWrap h2.black {color:#212121; letter-spacing: -0.6px;}
.mainWrap h2.white {color:#fff;}
.mainWrap h2.purple {color:#2f2c6f;}
.mainWrap .contents {margin:0;}
.mainWrap .text {font-size:13px;}
.OB_footer {margin-top:0; padding: 0px 0px 40px;}


/******** Visual *********/
#mainVisual{position:relative; background:#090909; overflow:hidden; padding: 5px;}
#mainVisual #visual{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%;}
#mainVisual #visual [id^="area_"]{position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-position:50% top; background-repeat:no-repeat;}
#mainVisual #visual #area_0{background: url("/resources/images/OB/main/BOAO_mainBg01.jpg") repeat-x;}
#mainVisual #visual #area_1{background: url("/resources/images/OB/main/BOAO_mainBg02.jpg") repeat-x;}
#mainVisual #visual #area_2{background: url("/resources/images/OB/main/BOAO_mainBg03.jpg") repeat-x;}
#mainVisual #visual #area_3{background: url("/resources/images/OB/main/BOAO_mainBg04.jpg") repeat-x;}
#mainVisual #visual #area_0, #mainVisual #visual #area_1, #mainVisual #visual #area_2, #mainVisual #visual #area_3 {height:390px; background-size: cover;}

#mainVisual .grab{position:relative; z-index:10; padding:0;}
#mainVisual .area{position:relative; float:none; width:100%; height:370px; margin:0 auto;}
#mainVisual .area .areabg{position:absolute; bottom:0; left:0; width:100%; background:url(/resources/images/main/publicity_bgA75.png) 0 0 repeat;}
#mainVisual .area .txt{padding:20px 5% 60px;}
#mainVisual .area .txt strong{color:#fff; font-size:30px; font-weight:bold; line-height: 0.9;}
#mainVisual .area .txt strong em{color:#ffda5a;}
#mainVisual .area .txt p.kor {color:#fff; letter-spacing: -0.08em; font-size:20px;}
#mainVisual .area .txt p.en {color:#fff; opacity:0.7; letter-spacing:normal; font-size:14px; margin-top: 15px;}
#mainVisual .area .txt a{display:inline-block; margin-top:10px; padding:8px 20px; width:100%; border:1px solid #a6a7a8; text-align:center; color:#d5d6d6; font-size:1em; font-weight:400;}
#mainVisual .area .txt a:focus, #mainVisual .area .txt a:hover{text-decoration:underline;}
#mainVisual .area .txt a:focus [class^="icon-"], #mainVisual .area .txt a:hover [class^="icon-"]{text-decoration:none;}
#mainVisual .area .txt a [class^="icon-"]{display:inline-block; margin-left:10px; font-size:1.2em;}
#mainVisual .area .control_area{position:absolute; bottom:20px; left:0; z-index:10; width:100%;}
#mainVisual .area .control_area .control{text-align:center;}
#mainVisual .area .control_area .control a{display:inline-block; margin-right:8px; width:16px; height:16px; overflow:hidden; line-height:99; background:#fff; border-radius:50px;}
#mainVisual .area .control_area .control a.active{background:#fa0001; border-radius: 0;}


/******** Contents *********/
.research, .weatherinfo, .public, .dateinfo	{margin-top:5px;}

/*research*/
.research {background: url("/resources/images/OB/main/research_bg.jpg"); background-size:cover; padding:25px 5% 20px; position: relative; overflow:hidden;}
.research > img {position: absolute; top: -100px; right: -30px;} 
.research .text {color:#aeaac9;}
.research ul {overflow: hidden; width: 280px; margin: 15px auto 0px;}
.research ul li.result {display:none;}
.research ul li {background: url("/resources/images/OB/main/bg_black_25.png"); width:85px; height:85px; border-radius:100px; text-align:center; float:left; margin-left:10px;}
.research ul li:first-child {margin-left:0;}
.research ul li a {display:block; color:#fff; height:100%; padding-top:55px;}
.research ul li a > span {color:#a9a6c0; font-size: 11px; display: block; line-height: 100%; letter-spacing: 0px;}
.research ul li.guide a {background: url("/resources/images/OB/main/research_icon01.png") no-repeat; background-position: center 28%;}
.research ul li.request a {background: url("/resources/images/OB/main/research_icon02.png") no-repeat; background-position: center 23%; padding-top: 45px;}
.research ul li.field a {background: url("/resources/images/OB/main/research_icon03.png") no-repeat; background-position: center 28%;}
.research ul li.record a {background: url("/resources/images/OB/main/research_icon04.png") no-repeat; background-position: center 28%;}
.research ul li.result a {background: url("/resources/images/OB/main/research_icon04.png") no-repeat; background-position: center 28%;}
.research ul li:hover {background:none; border:2px solid #fff;}
.research ul li:hover a {padding-top:53px; background-position: center 27%;}
.research ul li.request a:hover {padding-top:43px; background-position: center 21%;}

/*weatherinfo*/
.weatherinfo {position: relative; background:#ffdc4e url("/resources/images/OB/main/weatherinfo_bg.jpg") no-repeat; background-position: 99% top; padding:25px 5% 65px; position: relative; overflow:hidden;}
.weatherinfo h2 a {color:#2F2C6F;}
.weatherinfo h2 a:hover, .weatherinfo h2 a:active, .weatherinfo h2 a:focus {color:#352fb2;}
.weatherinfo .text {color:#7e6617;}
.weatherinfo > img {position: absolute; right: 0px; bottom: -5px;}
.weatherinfo > a {color:#2a2466; font-weight:400; display:inline-block; background: url("/resources/images/OB/main/weatherinfo_icon.png") no-repeat; background-position: right center; padding-right:15px; margin-top:30px;}
.weatherinfo > a:hover {text-decoration:underline;}
 
/*public*/
.public h2 {margin-bottom:10px;}
.public ul li {border-bottom:1px solid #ddd; background:#fff;}
.public ul li:hover {background:#e5e4e5;}
.public ul li a {display:block; height:100%; padding:20px 5% 22px;}
.public ul li a .text {color:#8f8f8f;}
.public ul li a .text .br {display:block;}
.public ul li.event a {background: url("/resources/images/OB/main/public_icon01.png") no-repeat; background-position: 93% 70%;}
.public ul li.visitor a {background: url("/resources/images/OB/main/public_icon02.png") no-repeat; background-position: 93% 70%;}
.public ul li.view a {background: url("/resources/images/OB/main/public_icon03.png") no-repeat; background-position: 93% 70%;}
.public ul li.news a {background: url("/resources/images/OB/main/public_icon06.png") no-repeat; background-position: 93% 70%;}
.public ul li.direction a {background: url("/resources/images/OB/main/public_icon04.png") no-repeat; background-position: 93% 70%;}
.public ul li.direction {border-bottom:none;}

/*dateinfo*/
.dateinfo {background: url("/resources/images/OB/main/bg_white_80.png") repeat; padding:25px 5% 24px;}
.dateinfo h2 span.date {color:#2f2c6f; display:block;}
.dateinfo h2 {margin-bottom:25px;}
.dateinfo ul li {background:#fff; padding:5px 5px 5px 12px; border-radius:1px; margin-top:7px; color:#595959; height:30px; overflow:hidden; line-height: 160%;}
.dateinfo ul li:hover {background:#f0f0f0;}
.dateinfo ul li:first-child {margin-top:0px;}
.dateinfo ul li strong {display:inline-block; color:#303030; margin-right:10px;}
.dateinfo ul li.bg {background:#868686; color:#fff;}
.dateinfo ul li.bg:hover {background:#7a7a7a;}
.dateinfo ul li.bg strong {color:#fff;}