/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

html, button, input, select, textarea { font-family: sans-serif; color: #111; }

body { margin: 0; font-size: 1em; line-height: 1.4; background:#f7f7f7 url(../image/wpr_bg.gif);}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #3197fc; color: #fff; text-shadow: none; }
::selection { background: #3197fc; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #555; text-decoration:none;}
a:visited { color: #555; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 0.5em 0; padding:0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { margin: 0; }


/* =============================================================================
   Forms
   ========================================================================== */

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }

/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }

/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */

legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */

button, input { line-height: normal; }

/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }

/*
 * Re-set default cursor for disabled elements
 */

button[disabled], input[disabled] { cursor: default; }

/*
 * Consistent box sizing and appearance
 */

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */

textarea { overflow: auto; vertical-align: top; resize: vertical; }

/* Colors for form validity */
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }


/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { margin:0; padding:0; }
p { margin:0; padding:0; font-size:0.9375em; line-height:1.5em;}
ul li { font-size :0.9375em; line-height:1.5em; margin:0; list-style:none;}
.dot { background:url(../image/dot.gif) no-repeat; margin:0; padding-left:1.5em; }

.color1st { color:#FFF; }
.color2nd { color:#999999; }
.color3rd { color:#FFFFFF; }
.color4th { color:#00347F; }
.color5th { color:#999999; }
.color6th { color:#336699; }

.color1st a:link, .color1st a:visited, a.color1st:link, a.color1st:visited { color:#333333; text-decoration:none; }
.color1st a:hover, .color1st a:active { color:#000000; text-decoration:underline; }
.color2nd a:link, .color2nd a:visited, a.color2nd:link, a.color2nd:visited { color:#666666; text-decoration:none; }
.color2nd a:hover, .color2nd a:active { color:#999999; text-decoration:none; } 
.color3rd a:link, .color3rd a:visited, a.color3rd:link, a.color3rd:visited { color:#FFFFFF; text-decoration:none; }
.color3rd a:hover, .color3rd a:active { color:#FFFFFF; text-decoration:none; }
.color4th a:link, .color4th a:visited, a.color4th:link, a.color4th:visited { color:#39A5D7; text-decoration:none; }
.color4th a:hover, .color4th a:active { color:#2587B6; text-decoration:underline; }
.color5th a:link, .color5th a:visited, a.color5th:link, a.color5th:visited { color:#999999; text-decoration:none; }
.color5th a:hover, .color5th a:active { color:#666666; text-decoration:underline; }
.color6th a:link, .color6th a:visited, a.color6th:link, a.color6th:visited { color:#336699; text-decoration:none; }
.color6th a:hover, .color6th a:active { color:#264E75; text-decoration:underline; }

.txt1 {font-size :0.75em; /*12/16*/  line-height:1.3;}
.txt2 {font-size :0.8125em; /*13/16*/  _:0.75em; /*12/16*/  line-height:1.6;}
.txt3 {font-size :0.9375em; /*15/16*/ line-height:1.65;}
.txt4 {font-size :1em; }
.txt5 {font-size :1.1875em; /*19/16*/ }
.txt6 {font-size :1.3125em; /*21/16*/ }

h1 { font-size: 1.125em; /*18/16*/}
h2 { font-size: 1em; /*16/16*/}
h3 { font-size: 0.9375em; /*15/16*/}
h4 { font-size: 0.875em; /*14/16*/}
h5 { font-size: 0.8125em; /*13/16*/}
h6 { font-size: 0.6875em; /*11/16*/}

/******** common ******/
.pad{ padding:0.5em; float:left;}
.left {float:left; }
.right { float:right; }
.clr { clear:both; _display:inline; }
.bold { font-weight:bold; }
.lineH-1{ line-height:230%;}
.dotline { border-top: 1px dashed #999999; }
.form{padding:0; margin:0;}
textarea { width:100%}
.hid{ display:none;}
.highlight{background:#DEF400;padding:1px;}
.date{ float:right;}
.tablePrint{width:100%; border:1px #CCC solid;}
.tablePrint td{ border:1px #CCC solid;}
.txtcenter { text-align:center;}
.caption { padding:0.25em; width:100%; }

.L-ft {float:left;}
.R-ft {float:right;}
.center {text-align:center;}
   
#bkg_wrapper { clear: both; }
#adv_wrapper {clear: both;}
#adv_wrapper {clear: both;}
#outer_wrapper { width:960px; margin:0px auto; clear:both; background:#FFF;}
#content_wrapper { clear:both; margin:0 0.5em; float:left; width:100%;}
#main {width:100%; clear:both; display:block; float:left;}

header { width:100%; border-top: 1px solid #B30000; padding:0.4375em 0 0 0; float:left; }
footer { width:100%; height:120px; background:#555; clear:both; float:left; }

#main_wrapper { float:left; width:100%; margin:1% 0; }
#index_cont_wrapper { float:left; width:100%; _width:96% }
#first_wrapper {float:left; width:66.102%; _width:65.309%;  margin:0 1em 0.5em 0;}
#second_wrapper {float:left; width:31.780%; margin:0 0 0.5em.625em;}
#third_wrapper  {float:left; width:100%; margin: 0 0 0.5em 0;}
#fourth_wrapper  {float:left; width:100%; border-top:1px solid #AAA; margin:0 0 0.9375em;}
#fifth_wrapper {float:left; width:31.780%; margin:0 0 0.625em;}
#eleventh_wrapper {float:left; width:31.780%; margin:0 0 0.625em;}

/********** header & footer **********/
#logo {float:left; background:url(../image/logo.png) no-repeat; width:10.6875em; height:4.75em; padding:0em; margin:0.25em 3.178% 0.75em 1.484%;_ margin:0.25em 3.178% 0.75em 0.742%;}
#logo span {display:none;}
#adv1 {float:left; margin:0 0 0.5em;_ margin:0 0 0.25em;}


#navigation-1 {float:left; width:100%; background:#942529; height:2.3125em;}
#navigation-1 ul {padding:0; margin:0 0 0 0.125em;}
#navigation-1 ul li {float:left; padding:0.4375em 0; list-style-type:none; text-align:center;}
#navigation-1 ul .tabs {background:url(../image/li-tab1.gif) right no-repeat; width:9.07%;}
#navigation-1 ul .tabsend {width:9.07%;}
#navigation-1 ul li a, #navigation-1 ul li a:visited {color:#FFF; text-decoration:none;}
#navigation-1 ul li a:hover {text-decoration:underline;}

#navigation-2 {float:left; width:100%; background:url(../image/subnav_bg.jpg) left bottom no-repeat #FFF; height:2.6875em;}
#navigation-2 #nav2_wap {float:left; width:100%; height:2em; background:#ebebeb;}
#navigation-2 #nav2_wap ul {float:left; padding:0; margin:0; background:url(../image/li-tab2.gif) right no-repeat; height:2em; width:40%;}
#navigation-2 #nav2_wap ul li {float:left; padding-top:0.35em; list-style-type:none; text-align:center;}
#navigation-2 #nav2_wap ul .tabs {width:19.5%; }
#navigation-2 #nav2_wap ul li a, #navigation-2 #nav2_wap ul li a:visited {color:#222222; text-decoration:none;}
#navigation-2 #nav2_wap ul li a:hover {text-decoration:underline;}

#navigation-2 #nav2_wap #login  {float:left; background:url(../image/li-tab3.gif) right no-repeat; /*height:2em;*/ width:48%; font-size: 0.9375em; padding:0.25em 0 0.25em 2%;/* padding-top:0.25em; padding-left:2%;*/ }

#navigation-2 #nav2_wap #register {float:right; padding-top:0.25em; /*height:1.75em; */width:8%; text-align:center;}
#navigation-2 #nav2_wap #register a, #navigation-2 #nav2_wap #register avisited {color:#222222; text-decoration:none;}
#navigation-2 #nav2_wap #register a:hover {text-decoration:underline;}

#navigation-2 #nav2_wap #login .input { width:5.5em; }

#footer_wrapper {width:960px; text-align:center; color:#FFF; float:left;}
#footer_wrapper .links {padding:1.375em 0 0;}
#footer_wrapper .links ul {padding:0; margin:0 auto;}
#footer_wrapper .links ul li {padding:0; margin:0; list-style:none; display:inline;}
#footer_wrapper .links ul li:after {content:' | ';}
#footer_wrapper .links ul li:last-child:after{content:'';}
#footer_wrapper .links ul li a, #footer_wrapper .links ul li a:visited {color:#FFF; text-decoration:none;}
#footer_wrapper .links ul li a:hover {text-decoration:underline;}



/********** main wrapper **********/

.main_slider { float:left; width:82%; margin-right:1%; }
.main_side { float:left; width:17%; text-align:left;}
.main_side .side_wrap { width:9.25em; margin-bottom:.5em;}

#orderbox { border:1px solid #004E98; width:100%;}
#orderbox .head { width:100%; padding:0.15em 0; background-color:#004E98; text-align:center; }
#orderbox .content { padding:1.4em 0; width:100%; background-color:#FFFFFF; text-align:center; }


#immediate { float:left; }
#immediate .img {float:left; padding:0 0.875em 0 0;}
#immediate article {padding:0 0 0.625em 0;}
#immediate article .top h2 .ic-title {width:1.4375em; height:1.4375em; background:url(../image/ic.png) 5.1875em 1.875em; margin:0 0.625em 0 0;}
#immediate article h3 {line-height:2.2em; color:#932528;}
#immediate .bottom {border-top:1px solid #AAA;}
#immediate .bottom ul { padding:0; margin:0.3125em 0;}
#immediate .bottom ul li {float:left; }
#immediate .bottom ul .L-col { width:45%; float:left; border-right:1px solid #AAA;}
#immediate .bottom ul .R-col { width:42%; margin-left:0; float:left; }


#cover { width:100%; }
#cover .img { float:left; width: 45.3%; margin-right:1em;}
#cover article { float:left;  width: 94%; padding-left:2%; margin-bottom:0.75em; }
#cover article .top {padding:0.1875em 0 0;}
#cover article .top h2 {font-weight:bold;}
#cover article .top h2 .ic-title {width:1.4375em; height:1.4375em; background:url(../image/ic.png) 5.1875em 1.875em; margin:0 0.625em 0 0;}
#cover article h3 {line-height:2.2em;}
#cover article .subs {height:1.5em}
#cover article .subs h4 {font-size:0.813em;}
#cover .coverphoto { float:left; margin-right:1em;}

#index_cont_wrapper .col_wrapper{ width:100%; float:left; border-top:1px solid #AAAAAA; }
#index_cont_wrapper .col1 { width:32%; float:left; }
#index_cont_wrapper .col2 { width:33%; border-left:1px solid #AAAAAA;}
#index_cont_wrapper article { float:left; width:100%;}
#index_cont_wrapper .content {float:left; border-bottom:1px solid #AAA; height:1px; width:97%;}

#section_list { width:100%; float:left; border-top:1px solid #AAAAAA; }
#section_list .col1 { width:49.9%; float:left; }
#section_list .col2 { width:49.9%; float:left; border-left:1px solid #AAAAAA;}
#section_list article { float:left; width:100%;}
#section_list .content {float:left; border-bottom:1px solid #AAA; height:1px; width:97%;}

.module_wrapper { float:left; width:96%; }
.left_mod { margin:0.5em 0.75em 0 0; }
.both_mod { margin:0.5em 0.75em 0 0.75em; }
.right_mod { margin:0.5em 0 0 0.75em; }
.top2 { float:left; background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em; border-top:4px solid #555;}
.top2 .plus2 { float:right; width:19px; height:19px; background:url(../image/btn_plus.png) no-repeat; margin:0.5em; cursor:pointer; }
.top2 h2 {font-weight:bold; margin:4px 0 0 4%;}

.module { float:left; width:100%; border-bottom:1px solid #AAAAAA;}
.module img { float:left; margin:0.5em 0.5em 0.5em 0;}

.section {float:left; padding:0.375em 0; border-right:1px solid #AAA; width:49%;}
.section .top {padding:0.1875em 0 0 0.375em;}
.section .top h2 {font-weight:bold;}
.section .top h2 .ic-title {width:1.4375em; height:1.4375em; background:url(../image/ic.png) 5.1875em 1.875em; margin:0 0.625em 0 0;}
.section .img {float:left; padding:0.375em 0.875em 0 0.375em;}
.section article {margin:0 0 0 0.625em;}
.section .content {float:left; border-bottom:1px solid #AAA; height:1px; width:97%;}

.section2 {float:left; padding:0.375em 0; width:49.94%;}
.section2 .top {padding:0.1875em 0 0 0.5em;}
.section2 .top h2 .ic-title {width:1.4375em; height:1.4375em; background:url(../image/ic.png) 5.1875em 1.875em; margin:0 0.625em 0 0;}
.section2 .img {float:left; padding:0.375em 4px 0 0.5em;}
.section2 article {margin:0 0.375em 0 0.625em;}
.section2 .content {float:right; border-bottom:1px solid #AAA; height:1px; width:97%;}

.section3 {float:right; padding:0.375em 0; width:49.94%;}
.section3 .top {padding:0.1875em 0 0 1em;}
.section3 .top h2 .ic-title {width:1.4375em; height:1.4375em; background:url(../image/ic.png) 5.1875em 1.875em; margin:0 0.625em 0 0;}
.section3 .img {padding:0.375em 4px 18px 1em;}
.section3 .content {width:97%;float:left;}

.passage {float:left; margin:0.375em;}
.passage article {padding:0 0 0.625em 0.3125em;}
.passage article .top {padding:0.1875em 0 11px; margin:0 0 11px; border-bottom:1px solid #AAA; float:left; width:100%;}
.passage article .img {float:left; padding:0 0.875em 0 0;}
.passage article .img .thum {padding:2px; margin:0 0 6px; border:1px solid #444444; width:180px;}
.passage article .img .thum span {font-size:0.8em; line-height:1.5em;}

.forward {float:left; padding:5px 0; margin:0 0 15px; border-top:1px solid #AAA; border-bottom:1px solid #AAA; width:100%; clear:both;}
.forward .previous {padding:10px 50px;}
.forward .previous .ic-pre { background:url(../image/btn_up.gif) no-repeat; margin:0; padding-left:2em; height:28px;}
.forward .next {padding:10px 50px;}
.forward .next .ic-next { background:url(../image/btn_down.gif) no-repeat; margin:0; padding-left:2em;  height:28px; }

/********** side wrapper **********/
.sidebox {float:left; width:100%;}
.sidebox .L-side {float:left; width:49%; padding:0 0.375em 0 0; margin:0 0 0.625em;}
.sidebox .R-side {float:left; width:49%; padding:0;}

.searchbox {float:left; border:1px solid #BDBDBD; height:2.4375em; background:url(../image/search_wpr01.jpg); width:100%; margin:0 0 0.625em;}
.searchbox .sch-L {float:left; width:4.5em; height:2.4375em; margin:0.5em 0.75em 0 0.5625em; _margin:0 0.75em 0 0.28125em;}
.searchbox .sch-L span {line-height:2em; display:none;}
.searchbox .sch-M {float:left; background:url(../image/search_wpr03.gif) no-repeat; width:54.027%; height:1.5625em; margin:0.4375em 0 0;}
.searchbox .sch-M .search {border:none; padding:0; margin:0 0.1875em; width:96.273%; background-color:transparent; outline:none; font-size:0.75em;}
.searchbox .sch-R {float:left; padding:0.25em 0 0 0.5em;}
.searchbox .sch-R .ic-sch {width:1.9375em; height:1.875em; background:url(../image/ic.png) 0em 1.875em;}


.searchbox_index {float:left; border:1px solid #BDBDBD; background:url(../image/search_wpr04.jpg); width:96%; margin:0 0 0.625em; padding-left:4%;}
.searchbox_index .sch-L {float:left; width:4.5em; margin:0.25em 0.75em 0 0.5625em; _margin:0 0.75em 0 0.28125em;}
.searchbox_index .sch-L span {line-height:2em; display:none;}
.searchbox_index .sch-M {float:left; background:url(../image/search_wpr03.gif) no-repeat; width:65%; height:1.5625em; margin:0.4375em 0 0;}
.searchbox_index .sch-M .search {border:none; padding:0; margin:0 0.1875em; width:96.273%; background-color:transparent; outline:none; font-size:0.75em;}
.searchbox_index .sch-R {float:left; padding:0.25em 0 0 0.5em;}
.searchbox_index .sch-R .ic-sch {width:1.9375em; height:1.875em; background:url(../image/ic.png) 0em 1.875em;}

#hit-article {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
#hit-article .top {background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em;}
#hit-article .top .green-line {background-color:#555; width:100%; height:0.25em;}
#hit-article .top h2 {margin:4px 0 0 4px; float:left;}
#hit-article ol { margin-left:30px;}

#bloger {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
#bloger .top {background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em;}
#bloger .top .green-line {background-color:#555; width:100%; height:0.25em;}
#bloger .top h2 {font-weight:bold; margin:4px 0 0 4%;}
#bloger .top h2 .ic-add {width:1.1875em; height:1.1875em; background:url(../image/ic.png) 3.6875em 1.875em; margin:0 0 2px 65.334%;}
#bloger .sideblog { float:left; background:url(../image/sideblog_bg.jpg) no-repeat; width:300px; height:96px; margin:0 0 0.5em;}
#bloger .sideblog .img {float:left; padding:8px 4px 9px 8px;}
#bloger .sideblog article {float:left; padding:9px 8px 0 4px; width:65%;}
#bloger .sideblog article h5 {background:url(../image/blogn-line.jpg) repeat-x; height:21px; color:#FFF; padding:3px 0 0 5px;}
#bloger .sideblog article p {padding:3px 0 0; line-height:1.4;}
#bloger .sideblog article .date {float:right; font-size:0.813em; padding:2px 0 0;}
#bloger .blogger_box { float:left; border:1px solid #DDDDDD; background: #EEEEEE url(../image/box_blogger.jpg) repeat-x; margin:0 0.5em 0.5em 0; width:99%; }
#bloger .blogger_box .photo { float:left; margin-right: 0.5em; width: 30%; }
#bloger .blogger_box article { float:left; width: 67%; }

.forums {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
.forums .top {background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em;}
.forums .top .green-line {background-color:#555; width:100%; height:0.25em;}
.forums .top h2 {margin:4px 0 0 4%;}
.forums .top h2 .ic-add {width:1.1875em; height:1.1875em; background:url(../image/ic.png) 3.6875em 1.875em; margin:0 0 2px 71.5%;}
.forums ul {padding:0; margin:0;}
.forums ul li {padding:0 0 0.75em 1em; margin:0; list-style:none; font-size:0.8125em;}
.forums ul li:before {content:' ‧ ';}

.rela-article {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
.rela-article .top {background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em;}
.rela-article .top .green-line {background-color:#555; width:100%; height:0.25em;}
.rela-article .top h2 {margin:4px 0 0 4%;}
.rela-article .top h2 .ic-add {width:1.1875em; height:1.1875em; background:url(../image/ic.png) 3.6875em 1.875em; margin:0 0 2px 65.334%;}
.rela-article ul {padding:0; margin:0;}
.rela-article ul li {padding:0 0 0.75em 1em; margin:0; list-style:none; font-size:0.8125em;}
.rela-article ul li:before {content:' ‧ ';}

.author-article {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
.author-article .top {background-color:#DDD; width:100%; height:2.125em; margin:0 0 0.375em;}
.author-article .top .green-line {background-color:#555; width:100%; height:0.25em;}
.author-article .top h2 {margin:4px 0 0 4%;}
.author-article .top h2 .ic-add {width:1.1875em; height:1.1875em; background:url(../image/ic.png) 3.6875em 1.875em; margin:0 0 2px 65.334%;}
.author-article ul {padding:0; margin:0;}
.author-article ul li {padding:0 0 0.75em 1em; margin:0; list-style:none;}
.author-article ul li:before {content:' ‧ ';}


.header { padding:0.5em 0 0.5em 1em; }
.box {float:left; border:1px solid #AAA; padding:0.75em; margin-bottom:0.75em; }
.arrow { background:url(../image/btn_arrow.png) no-repeat; padding-left:2em; height:1.5em;}
.plus { float:right; width:19px; height:19px; background:url(../image/btn_plus.png) no-repeat; margin:0.5em; cursor:pointer; }
.blogger_box { float:left; border:1px solid #DDDDDD; background: #EEEEEE url(../image/box_blogger.jpg) repeat-x; margin:0 0.5em 0.5em 0; width: 32.2%; /*229/960*/}
.blogger_box .photo { float:left; margin-right: 0.5em; width: 80; /*80/214*/}
.blogger_box article { float:left; width: 69%; /*125/214*/}
.blogger_box article h3{ background:url(../image/blogn-line_w.jpg) repeat-x; color:#333; padding-left:0.5em;}
.blogger_box article p {padding:3px 0 0; line-height:1.4;}
.blogger_box article .date {float:right; font-size:0.813em; padding:2px 0 0;}

.sidebox {float:left; border-bottom:1px solid #AAA; width:100%; margin:0 0 0.625em;}
.sidebox .top {background-color:#DDD; width:100%; height:2em; margin:0 0 0.375em 0; border-top: 0.25em solid #555555;}

.sidebox .top .green-line {background-color:#555; width:100%; height:0.25em;}
.sidebox .top h2 {margin:4px 0 0 4px; float:left;}


#blogger_list {padding:0; margin:0; }
#blogger_list ul {padding:0; margin:0; border-bottom:1px solid #CCCCCC;}
#blogger_list li {padding:0.5em; margin-left:2.5em; list-style:decimal;}
#blogger_list .list1 {background-color:#FFEEEE;}
#blogger_list .list2 {background-color:#FFFFFF;}
.blogger_intro { margin:0.5em;}

#pagenavi { width:80%; margin:1em auto;}
#pagenavi .pre, #pagenavi .next { width:20%; float:left; }
#pagenavi .pagelist { width:60%; float:left; text-align:center; }
#pagenavi .pagelist a { margin:0.25em 0.5em; }
#pagenavi .pagelist span.current { padding:0.25em 0.5em; background-color:#666666; color:#FFFFFF; }
#pagenavi .pre .pbtn{ width:28px; height:28px; background:url(../image/btn_previous.png) no-repeat; float:left; text-align:left; }
#pagenavi .next .nbtn{ width:28px; height:28px; background:url(../image/btn_next.png) no-repeat; float:right; text-align:right; }

#comic ul { margin:0; padding:0;}
#comic ul li {float:left; list-style:none;}
#comic img { margin:0; padding:0;}

#blog_mainbox { float:left; width:100%; margin-bottom:1em; }
#blog_mainbox .content { float:left; width:100%; background:url(../image/blog_mainbox_bkg.gif) repeat-y top left; }
#blog_mainbox .content .pad { padding:0.9em 1em 0.9em 0.9em; }
#blog_mainbox .bottom { float:left; width:100%; height:3px; background:url(../image/blog_mainbox_bottom.gif) no-repeat top left; display:block; }
#blog_mainbox h2 { width:98%; padding-bottom:3px; margin-bottom:4px;  border-bottom:2px solid #555; display:inline-block; }
#blog_mainbox h3 { margin-bottom:8px; }

#bloggers_wrapper { width:100%; float:left; }

.space_box1 { height:10px; clear:both; }
#right_sidebox {float:left; width:31.780%; margin:0 0 0.625em;}

#third_wrapper .content { margin:0 auto; width: 89.58%; /*860/960*/}
#third_wrapper .content a { color:#C00; font-weight:bold;}
#third_wrapper .content .con_text { float:left; border-top:1px solid #999; width:90%; padding:0.75em;}
#third_wrapper .content .con_text ul { padding:0; margin-left:1em;}
#third_wrapper .content .con_text ol { padding:0; margin-left:2em;}
#third_wrapper .content .con_text ul li { margin-left:1em; list-style: inside;}
#third_wrapper .content .con_text .qna { float:left; width:8%; }
#third_wrapper .content .con_text .qna_detail { float:left; width:80%; margin-left:1em; }
#third_wrapper .content .con_text table{ line-height:30px; }


.order { margin:0 auto; width:94.68%; /*800/844*/}
.order .L-order { float:left; width:50%;}

.border-red {border-collapse:separate; border-spacing:1px;}

.box_yellow {
	border: 1px solid #F7CF0C;
	background:  url(../image/box_bkg_a_yellow.jpg) repeat-y top left;
	background-color: #FFFFFF;	
}
.box_yellow table{
   background: url(../image/box_bkg_b_yellow.jpg) repeat-y top right;
font-weight:normal;
}
.box_yellow a{
	color: #FF6600;
}


/* <--tipsbox_top_yellow*/
.tipsbox_top_yellow {
	background: url(../image/corner_line_top_yellow.gif) #ffffcc repeat-x top left;

		}
.tipsbox_top_yellow div{	
	background: url(../image/corner_line_1_yellow.gif) no-repeat top left;
height:10px;

}
.tipsbox_top_yellow div div{
	background: url(../image/corner_line_2_yellow.gif) no-repeat top right;
height:10px;

	}
.tipsbox_mid_yellow{
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFCC00;
	background-color: #FFFFcc;
}
.tipsbox_mid_yellow div{
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFCC00;

}
.tipsbox_bottom_yellow{
	background: url(../image/corner_line_bottom_yellow.gif)  #ffffcc repeat-x bottom left;

}
.tipsbox_bottom_yellow div{
	background: url(../image/corner_line_3_yellow.gif) no-repeat bottom left;
	height:10px;

}
.tipsbox_bottom_yellow div div{
	background: url(../image/corner_line_4_yellow.gif) no-repeat bottom right;
	height:10px;

}
/*tipsbox_top_yellow*/

#third_wrapper .promo { margin:0.5em 0; float:left;}
#third_wrapper .promo ul { margin:0; padding:0; }
#third_wrapper .promo ul li { margin:0.3em; float:left; list-style:none; }

#order ul { margin:0; padding:0; }
#order ul li { margin-right:0.2em; float:left; }
#order ul.dropdown ul { width:147px; border-bottom:1px solid #999;}
#order ul.dropdown ul li { float:none; text-align:center; border-top:1px solid #999; border-right:1px solid #999; border-left:1px solid #999; margin:0;}
#order ul.dropdown ul li a { display:block; background: url(../image/button_bg.jpg) repeat-x; padding:0.25em; }
#order ul.dropdown ul li a:hover { background: url(../image/button_bg2.jpg) repeat-x; color:#FFF;}

#vertical-ticker{
	
	height:800px;
	overflow:hidden;
	margin:0; padding:0;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0, .4);
}
#vertical-ticker li{
	display:block;
}

.notice { width:100%; border:1px solid #C00; float:left; }
.notice .ntitle { padding:0.25em 0; width:100%; background-color:#C00; font-weight:bold; color:#FFF; float:left; }
.notice .ncontent { padding:0.5em; float:left; background:#FFF; }
.notice .text-r { text-align:right; }


/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  /*
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /*
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  .noPrint{display:none;}
}