@charset "utf-8";

/* 
* Asan - Homebilder
* main skin type [ 4 ] - Style Sheet
* 
*/

/* layout */
#innerContent.mainStyle4 { width:100%; overflow:hidden; background:#f2f2f2;}
.mainStyle4 .mainCon { width:100%; overflow:hidden; margin-bottom:80px;}
.mainStyle4 .mainCon .col1 { float:left; width:600px; overflow:hidden; position:relative;}
.mainStyle4 .mainCon .col1 .admArea { width:100%; overflow:hidden;}
.mainStyle4 .mainCon .col2 { float:left; width:600px; height:1209px; overflow:hidden; position:relative;}

/* mainVisual */
.mainStyle4 .mainVisual  { width:600px; height:759px; overflow:hidden;}
.mainStyle4 .mainVisual h2 { position:absolute; top:33px; right:42px; line-height:1.2; font-size:32px; color:#111; font-weight:normal;}
.mainStyle4 .mainVisual h2 span { font-size:45px; color:#02676f; font-weight:bold;}
.mainStyle4 .mainVisual .currentBar { position:absolute; left:30px; top:700px;}
.mainStyle4 .mainVisual .currentBar .indicator,
.mainStyle4 .mainVisual .player { float:left; height:13px; overflow:hidden; margin-right:15px;}
.mainStyle4 .mainVisual .currentBar .indicator a { float:left; display:inline-block; width:13px; height:14px; margin-right:5px; overflow:hidden; text-indent:-999999px; background:url('/asan/images/homebuilder/main/m4_idc_off.png') no-repeat 0 0;}
.mainStyle4 .mainVisual .currentBar .indicator a.now { width:38px; background:url('/asan/images/homebuilder/main/m4_idc_on.png') no-repeat 0 0;}
.mainStyle4 .mainVisual .player { margin-right:0;}
.mainStyle4 .mainVisual .player a { height:14px; margin-right:6px; vertical-align:top;}
.mainStyle4 .mainVisual .player a img { vertical-align:top;}

.mainStyle4 .mainBoard { width:600px; height:150px; overflow:hidden; background:#fff;}
.mainStyle4 .mainBoard .boardNavi { position:absolute; top:24px; left:25px; width:540px; height:25px; }
.mainStyle4 .mainBoard .boardNavi h3 { float:left; padding:0 12px 0 10px;  line-height:1.1; background:url('/asan/images/homebuilder/main/m4_tab_bar_bg.gif') no-repeat right 0;} 
.mainStyle4 .mainBoard .boardNavi h3 a { display:inline-block; padding-bottom:5px; font-size:16px; color:#666; text-decoration:none; font-weight:normal;}
.mainStyle4 .mainBoard .boardNavi h3.on a,
.mainStyle4 .mainBoard .boardNavi h3 a:hover { font-weight:bold; color:#1f73b5; border-bottom:2px solid #1f73b5;}
.mainStyle4 .mainBoard .boardNavi h3.last { background:none;}
.mainStyle4 .mainBoard .article { width:100%; padding-top:47px;}
.mainStyle4 .mainBoard .article ul { width:540px; padding-top:10px; margin-left:29px; overflow:hidden;}
.mainStyle4 .mainBoard .article li { float:left; width:530px; padding-left:10px; height:26px; overflow:hidden; color:#111; font-size:15px; line-height:1; background:url('/asan/images/homebuilder/main/m4_tab_bg.gif') no-repeat 6px 10px;}
.mainStyle4 .mainBoard .article li a { float:left; display:inline-block; width:450px; height:25px; padding-left:7px; overflow:hidden; color:#111; font-size:15px; line-height:1.5;}
.mainStyle4 .mainBoard .article li a img { display:inline-block;  margin-top:6px; vertical-align:top;}
.mainStyle4 .mainBoard .article li a .txt { display:inline-block; height:25px; max-width:420px; overflow:hidden;}
.mainStyle4 .mainBoard .article li a:hover .txt{text-decoration:underline;}
.mainStyle4 .mainBoard .article .date { float:right; display:inline-block; color:#666; font-size:12px; padding-top:6px;}
.mainStyle4 .mainBoard .moreBtn { position:absolute; top:33px; right:23px; color:#666; }

.mainStyle4 .articleBoxSt1 { float:left; width:300px; height:300px; overflow:hidden; background:#1f73b5;}
.mainStyle4 .articleBoxSt1 a { color:#fff;}
.mainStyle4 .articleBoxSt1 h3 { width:240px; padding-top:107px; margin-left:30px; font-size:32px; font-weight:bold; line-height:1.2; color:#fff;}
.mainStyle4 .articleBoxSt1 div p { width:240px; padding-top:11px; margin-left:30px; font-size:15px; color:#fff;}

.mainStyle4 .col1 .articleBoxSt1.box1 h3 { background:url('/asan/images/homebuilder/main/m4_banner_bg_1.png') no-repeat right 30px;}
.mainStyle4 .col1 .articleBoxSt1.box2 { background:#114f80;}
.mainStyle4 .col1 .articleBoxSt1.box2 h3 { background:url('/asan/images/homebuilder/main/m4_banner_bg_2.png') no-repeat right 30px;}

.mainStyle4 .col2 .articleBoxSt1.box3 h3 { background:url('/asan/images/homebuilder/main/m4_banner_bg_5.png') no-repeat right 30px;}
.mainStyle4 .col2 .articleBoxSt1.box4 h3 { background:url('/asan/images/homebuilder/main/m4_banner_bg_4.png') no-repeat right 20px;}
.mainStyle4 .col2 .articleBoxSt1.box5 h3 { background:url('/asan/images/homebuilder/main/m4_banner_bg_3.png') no-repeat right 30px;}
.mainStyle4 .col2 .boxSt2Wrap { float:left; width:300px; overflow:hidden;}
.mainStyle4 .col2 .boxSt2Wrap div { float:right; width:300px; height:449px; overflow:hidden; background:url('/asan/images/homebuilder/main/m4_banner_0.png') no-repeat 0 0; position:relative;}
.mainStyle4 .col2 .boxSt2Wrap div.box2 { height:460px; background:url('/asan/images/homebuilder/main/m4_banner_1.png') no-repeat 0 0;}
.mainStyle4 .col2 .boxSt2Wrap h3,
.mainStyle4 .col2 .boxSt2Wrap a,
.mainStyle4 .col2 .boxSt2Wrap p { color:#fff;}
.mainStyle4 .col2 .boxSt2Wrap h3 { width:256px; margin:319px 20px 0 20px; font-size:18px; font-weight:bold;}
.mainStyle4 .col2 .boxSt2Wrap div.box2 h3 { margin:323px 20px 0 20px; }
.mainStyle4 .col2 .boxSt2Wrap p { width:256px; margin:0 20px 8px 20px; font-size:15px;}
.mainStyle4 .col2 .articleBoxSt1.box4 { height:460px; overflow:hidden; background:#518030 url('/asan/images/homebuilder/main/m4_bg_green.gif') no-repeat right bottom;}
.mainStyle4 .col2 .articleBoxSt1.box4 span { font-size:40px; line-height:1.4;}
.mainStyle4 .col2 .articleBoxSt1.box5 { position:absolute; bottom:0; left:0;}
.mainStyle4 .col2 .videoBox { float:right; width:300px; height:300px; overflow:hidden; background:url('/asan/images/homebuilder/main/m4_banner_video.png') no-repeat 0 0; position:relative;}
.mainStyle4 .col2 .videoBox h3 { text-align:center; margin-top:152px;}
.mainStyle4 .col2 .videoBox h3 a { font-size:20px; color:#fff;}
.mainStyle4 .col2 .videoBox h3 a span { font-size:32px;}
.mainStyle4 .col2 .videoBox p { position:absolute; top:84px; width:100%; text-align:center;}
.mainStyle4 .col2 .gotoBtnBox { position:absolute; bottom:18px;}
.mainStyle4 .col2 .gotoBtn { display:inline-block; padding-left:17px;background:url('/asan/images/homebuilder/main/m4_btn_bg_l.png') no-repeat left 0; vertical-align:middle; text-decoration:none;}
.mainStyle4 .col2 .gotoBtn span { margin-right:-23px; display:inline-block; width:23px; height:31px; padding-left:10px;  background:url('/asan/images/homebuilder/main/m4_btn_bg_r.png') no-repeat right 0; vertical-align:middle;}