@charset "utf-8";

/**** 1024px -  ****
iPad mini : Landscape
iPad Air  : Landscape
iPad Pro  : Portrait and Landscape
*/

/**** Reset ****/
body { background:#ffffff; color:#444444; }
a { color:#078d34; text-decoration:none; }
a:hover { color:#31bc60; text-decoration:none; }
a.plain { color:#444444; text-decoration:none; }
a.plain:hover { color:#888888; text-decoration:none; }
a.plain.hover:hover { color:#444444; text-decoration:none; opacity:0.75; }
a.plain2 { color:#444444; text-decoration:none; }
a.plain2:hover { color:#078d34; text-decoration:none; }
a.none { color:#444444; text-decoration:none; }
a.none:hover { color:#444444; text-decoration:none; }
a.lightgray { color:#bbbbbb; } a.lightgray:hover { color:#999999; }
a.lightgray2 { color:#bbbbbb; } a.lightgray2:hover { color:#31bc60; }
a.gray { color:#999999; } a.gray:hover { color:#808080; }
a.gray2 { color:#999999; } a.gray2:hover { color:#078d34; }
input[type="text"]:focus,input[type="password"]:focus,textarea:focus { border-color:#bbbbbb; }
input[type="text"].warning,input[type="password"].warning,textarea.warning,
input[type="text"].warning:focus,input[type="password"].warning:focus,textarea.warning:focus { border-color:#ee0000; }

/**** Grid ****/
body { padding:0 0 0 0; }
.contents { clear:both; width:980px; margin:0 auto 0 auto; }
.contents:after { content:''; display:block; clear:both; }
.contents > .layout-full {}
.contents > .layout-single { width:720px; margin:0 auto 0 auto; }
.contents > .layout-menu-right { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-menu-right > .main { display:table-cell; width:720px; }
.contents > .layout-menu-right > .menu { display:table-cell; width:220px; padding:0 0 0 40px; }
.contents > .layout-menu-left { width:980px; text-align:left; vertical-align:top; }
.contents > .layout-menu-left > .main { width:720px; float:right; }
.contents > .layout-menu-left > .menu { width:220px; float:left; }
.contents > .layout-two-columns { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-two-columns > .left { display:table-cell; width:480px; padding:0 10px 0 0; }
.contents > .layout-two-columns > .right { display:table-cell; width:480px; padding:0 0 0 10px; }
.contents > .layout-three-columns { display:table; width:100%; text-align:left; vertical-align:top; }
.contents > .layout-three-columns > .left { display:table-cell; width:310px; padding:0 10px 0 0; }
.contents > .layout-three-columns > .center { display:table-cell; width:320px; padding:0 10px 0 10px; }
.contents > .layout-three-columns > .right { display:table-cell; width:310px; padding:0 0 0 10px; }
header + .contents  { padding-top:40px; }
#caution + .contents { padding-top:40px; }
#ribbon + .contents { padding-top:40px; }
#information + .contents { padding-top:40px; }
.contents > .layout-menu-right > .main .slider,
.contents > .layout-menu-left > .main .slider { width:720px !important; }

/**** Colors ****/
.bg-form-field { background:#f7f9f8 !important; }
.bg-tile-green { background:#33a569 url("../../images/site2/common/tile.green.png") top left repeat !important; }
.bg-tile-red { background:#d94d38 url("../../images/site2/common/tile.red.png") top left repeat !important; }

.star-outer.green .star { color:#078d34; opacity:0.75; }
.star-outer.gray .star { color:#999999; }
.star-outer.lightgray .star { color:#bbbbbb; }


/**** Header ****/
header { width:100%; height:90px; background:#ffffff; box-shadow:0 0 1px 1px rgba(0,0,0,0.2); }
header:after { display:block; content:""; width:100%; border-top:4px solid #078d34; position:fixed; top:0; left:0; z-index:101; }
header > .inner { width:980px; height:100%; margin:0 auto 0 auto; position:relative; }
header > .inner > .logo { display:inline-block; position:absolute; top:15px; left:-5px; }
header > .inner > .logo > a { display:inline-block; width:200px; height:60px; text-indent:-9999px; outline:none; background:#ffffff url("../../images/site2/common/logo-with-lead.png") top left no-repeat; background-size:cover; }
header > .inner > .logo > a:hover { opacity:0.8; }
/*header > .inner > .lead { display:inline-block; position:absolute; bottom:9px; left:33px; font-size:10px; color:#666666; }*/
header > .inner > .lead { display:none; }
header > .inner > .menu { display:inline-block; position:absolute; bottom:12px; right:0; vertical-align:bottom; }
header > .inner > .menu > ul { display:inline-block; }
header > .inner > .menu > ul > li { display:inline-block; vertical-align:middle; white-space:nowrap; }
header > .inner > .menu > ul > li + li { margin-left:24px; }
header > .inner > .menu > ul > li > a { display:inline-block; font-size:13px; color:#333333; line-height:24px; text-align:left; vertical-align:middle; }
header > .inner > .menu > ul > li > a:hover { color:#078d34; }
header > .inner > .menu > ul > li > a > .circle { position:relative; top:-1px; margin-left:3px; line-height:18px; vertical-align:middle; }
header > .inner > .menu > ul > li.news > a,
header > .inner > .menu > ul > li.guide > a { color:#078d34; }
header > .inner > .menu > ul > li.news > a:hover,
header > .inner > .menu > ul > li.guide > a:hover { opacity:0.75; }
header > .inner > .menu > ul > li.notification > a > i { display:none; }
header > .inner > .menu > ul > li.notification > a > .circle { margin-left:4px; }
header > .inner > .menu > ul > li.menu > a { border:1px solid #cccccc; border-radius:2px; padding:3px 8px 3px 8px; color:#666666; position:relative; top:-1px; }
header > .inner > .menu > ul > li.menu > a:hover { opacity:0.75; }
header > .inner > .menu > ul > li.menu > a > i { color:#aaaaaa; }
header > .inner > .menu > ul > li.menu > a > span { margin-left:5px; }
header > .inner > .menu > ul + a { margin-left:25px; position:relative; top:2px; }

.navigation { width:100%; height:40px; background:rgba(255,255,255,0.95); box-shadow:0 0 1px 1px rgba(0,0,0,0.15); position:fixed; top:4px; left:0; z-index:100; }
.navigation > .inner { width:980px; height:100%; margin:0 auto 0 auto; position:relative; }
.navigation > .inner > .logo { display:inline-block; position:absolute; top:6px; left:-5px; }
.navigation > .inner > .logo > a { display:inline-block; width:84px; height:28px; text-indent:-9999px; outline:none; background:#ffffff url("../../images/site2/common/logo.png") top left no-repeat; background-size:cover; }
.navigation > .inner > .logo > a:hover { opacity:0.8; }
.navigation > .inner > .clock { display:inline-block; position:absolute; bottom:10px; left:100px; font-size:11px; }
.navigation > .inner > .clock > i { color:#cccccc; }
.navigation > .inner > .clock > span { color:#666666; }
.navigation > .inner > .menu { display:inline-block; position:absolute; bottom:6px; right:0; vertical-align:bottom; }
.navigation > .inner > .menu > ul { display:inline-block; }
.navigation > .inner > .menu > ul > li { display:inline-block; vertical-align:middle; }
.navigation > .inner > .menu > ul > li + li { margin-left:20px; }
.navigation > .inner > .menu > ul > li > a { display:inline-block; font-size:12px; color:#333333; line-height:24px; text-align:left; vertical-align:middle; }
.navigation > .inner > .menu > ul > li > a:hover { color:#078d34; }
.navigation > .inner > .menu > ul > li > a > .circle { position:relative; top:-1px; margin-left:3px; line-height:18px; vertical-align:middle; }
.navigation > .inner > .menu > ul > li.news > a,
.navigation > .inner > .menu > ul > li.guide > a { color:#078d34; }
.navigation > .inner > .menu > ul > li.news > a:hover,
.navigation > .inner > .menu > ul > li.guide > a:hover { opacity:0.75; }
.navigation > .inner > .menu > ul > li.notification > a > i { display:none; }
.navigation > .inner > .menu > ul > li.notification > a > .circle { margin-left:4px; }
.navigation > .inner > .menu > ul > li.menu > a { border:1px solid #cccccc; border-radius:2px; padding:0 8px 0 8px; color:#666666; position:relative; top:-1px; }
.navigation > .inner > .menu > ul > li.menu > a:hover { opacity:0.75; }
.navigation > .inner > .menu > ul > li.menu > a > i { color:#aaaaaa; }
.navigation > .inner > .menu > ul > li.menu > a > span { margin-left:5px; }

/**** NavigationMenu ****/
.navigation-menu { position:absolute; top:90px; left:0; width:100%; height:100%; z-index:100; background:rgba(0,0,0,0.5); }
.navigation-menu > .container { position:absolute; top:0; left:0; width:100%; background:#f9f9f9; box-shadow:0 0 1px 0 rgba(0,0,0,0.4); }
.navigation-menu > .container > .inner { width:980px; margin:0 auto 0 auto; padding:15px 0 30px 0; position:relative; }
.navigation-menu > .container > .inner > .account { padding:0 0 15px 0; margin:0 0 20px 0; border-bottom:1px solid #dddddd; }
.navigation-menu > .container > .inner > .account > .nickname { color:#444444; font-size:16px; }
.navigation-menu > .container > .inner > .account > .nickname > img { vertical-align:middle; margin-right:8px; }
.navigation-menu > .container > .inner > .account > .settings { position:absolute; top:20px; right:0; padding:10px; background:#f9f9f9; }
.navigation-menu > .container > .inner > .account > .settings > a { font-size:12px; color:#888888; }
.navigation-menu > .container > .inner > .account > .settings > a:hover { color:#078d34; }
.navigation-menu > .container > .inner > .account > .settings > a + a {  margin-left:15px; }
.navigation-menu > .container > .inner > .menu { display:inline-block; width:180px; vertical-align:top; }
.navigation-menu > .container > .inner > .menu > .heading { font-size:14px; font-weight:bold; color:#333333; margin-bottom:5px; }
.navigation-menu > .container > .inner > .menu > ul > li { line-height:30px; text-align:left; vertical-align:middle; }
.navigation-menu > .container > .inner > .menu > ul > li > a { color:#888888; }
.navigation-menu > .container > .inner > .menu > ul > li > a:hover { color:#078d34; }
.navigation-menu > .container > .inner > .menu > ul > li > a > .circle { position:relative; top:-1px; margin-left:3px; line-height:18px; vertical-align:middle; }
.navigation-menu > .container > .inner > .menu > ul > li.campaign > a { color:#d94d38; }
.navigation-menu > .container > .inner > .menu > ul > li.campaign > a:hover { color:#d94d38; opacity:0.8; }
.navigation-menu > .container > .inner > .menu.menu-news { width:auto; margin-left:40px; }
.navigation-menu > .container > .inner > .menu.menu-news > ul > li { line-height:20px; }
.navigation-menu > .container > .inner > .menu.menu-news > ul > li > a { font-size:11px; color:#999999; }
.navigation-menu > .container > .inner > .close { position:absolute; bottom:30px; right:10px; font-size:18px; color:#e0e0e0; }
.navigation-menu > .container > .inner > .close:hover { opacity:0.75; }

/**** Caution ****/
#caution { line-height:24px; vertical-align:middle; color:#ffffff; text-align:center; padding:4px 20px 4px 20px; background:#33a569; box-shadow:0 0 1px 1px rgba(0,0,0,0.2); }
#caution a { color:#ffffff; }

/**** Footer ****/
footer { width:100%; margin:160px 0 0 0; background:#f5f6f8; }
footer > .upper { width:710px; margin:0 auto 0 auto; padding:20px 0 30px 10px; text-align:left; vertical-align:top; }
footer > .upper > ul { display:inline-block; width:140px; white-space:nowrap; }
footer > .upper > ul > li { line-height:30px; text-align:left; vertical-align:middle; }
footer > .upper > ul > li > a { color:#999999; font-size:12px; }
footer > .upper > ul > li > a:hover { color:#078d34; }
footer > .upper > ul > li.small { line-height:22px; }
footer > .upper > ul > li.small > a { font-size:11px; }
footer > .upper > ul > li.heading { font-size:13px; font-weight:bold; color:#444444; }
footer > .upper > ul > li.logo { padding-bottom:5px; }
footer > .upper > ul > li.logo > a { display:inline-block; width:84px; height:28px; text-indent:-9999px; outline:none; background:transparent url("../../images/site2/common/logo.png") top left no-repeat; background-size:cover; position:relative; top:-2px; left:-23px; }
footer > .upper > ul > li.logo > a:hover { opacity:0.75; }
footer > .upper > ul > li.campaign > a { color:#d94d38; }
footer > .upper > ul > li.campaign > a:hover { color:#d94d38; opacity:0.8; }
footer > ul.bottom { width:100%; background:#33a569; color:#ffffff; padding:15px 0 15px 0; text-align:center; vertical-align:middle; }
footer > ul.bottom > li { display:inline-block; text-align:center; vertical-align:middle; }
footer > ul.bottom > li + li { margin-left:30px; }
footer > ul.bottom > li > a { display:inline-block; color:#ffffff; opacity:0.9; font-size:12px; line-height:30px; white-space:nowrap; }
footer > ul.bottom > li > a:hover { opacity:0.8; }
footer > ul.bottom > li.gakken {}
footer > ul.bottom > li.gakken > span { display:inline-block; width:120px; height:18px; margin:0 0 0 10px; text-indent:-9999px; background:transparent url("../../images/site2/common/gakken-group.white.png") top left no-repeat; background-size:cover; position:relative; top:-2px; }
footer > .copyright { width:100%; background:#181818; color:#d0d0d0; font-size:10px; line-height:22px; text-align:center; vertical-align:middle; }


/**** Button ****/
.btn { display:inline-block; background:#c0c0c0; border:none; border-radius:3px; box-shadow:0 -3px 0 0 rgba(0,0,0,0.1) inset; margin:0; padding:0 8px 0 8px; color:#ffffff; font-size:13px; font-weight:normal; line-height:32px; cursor:pointer; outline:0; text-decoration:none; text-align:center; vertical-align:middle; white-space:nowrap; overflow:hidden; position:relative; -moz-appearance:none; -webkit-appearance:none; appearance:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.btn:hover { color:#ffffff; opacity:0.8; text-decoration:none; }
.btn.no-hover:hover { color:#ffffff; opacity:1.0; text-decoration:none; }
.btn.xlarge { font-size:18px; font-weight:bold; line-height:54px; }
.btn.large { font-size:16px; line-height:40px; }
.btn.small { font-size:12px; line-height:26px; }
.btn.xsmall { font-size:11px; line-height:22px; }
.btn.disabled { cursor:default; opacity:0.5; }
.btn > [class^="icon-"]:before { color:#ffffff; }
.btn.gray,.btn.default > [class^="icon-"]:before { color:#666666; }
.btn.lightgray > [class^="icon-"]:before { color:#999999; }
.btn.green,.btn.submit { background:#33a569; color:#ffffff; box-shadow:0 -3px 0 0 rgba(0,0,0,0.2) inset; }
.btn.red,.btn.alert { background:#ee2020; color:#fefefe; box-shadow:0 -3px 0 0 rgba(0,0,0,0.2) inset; }
.btn.orange { background:#d94d38; color:#ffffff; box-shadow:0 -3px 0 0 rgba(0,0,0,0.2) inset; }
.btn.yellow { background:#fdbe11; color:#ffffff; }
.btn.gray,.btn.default { background:#c0c0c0; color:#ffffff; }
.btn.lightgray { background:#f3f3f3; color:#999999; box-shadow:none; }

.btns.fixed { position:fixed; bottom:0; left:0; width:100%; padding:16px 0 16px 0; text-align:center; background:#f9f9f9 url("../../images/common/bg.dotted.png") top left repeat; border-top:1px solid #c7cad3; z-index:100; }
.btns.fixed.bg-green { background:#33a569; background-image:none; border:none; }

/**** Heading ****/
.heading { font-weight:bold; vertical-align:middle; }
.heading.size-L { font-size:18px; }
.heading.size-M { font-size:15px; }
.heading.size-S { font-size:13px; }


/**** Pii ****/
i.pii { display:inline-block; background:transparent url("../../images/site2/pii/n1.png") top left no-repeat; background-size:cover; }
i.pii.size-L { width:160px; height:100px; }
i.pii.size-M { width:120px; height:75px; }
i.pii.size-S { width:80px; height:50px; }
i.pii.size-XS { width:60px; height:38px; }
i.pii.full { background-size:contain; }
i.pii.full.size-L { width:120px; height:150px; }
i.pii.full.size-M { width:96px; height:120px; }
i.pii.full.size-S { width:60px; height:75px; }
i.pii.face-n1 { background-image:url("../../images/site2/pii/n1.png"); }
i.pii.face-n2 { background-image:url("../../images/site2/pii/n2.png"); }
i.pii.face-e1 { background-image:url("../../images/site2/pii/e1.png"); }
i.pii.face-e2 { background-image:url("../../images/site2/pii/e2.png"); }
i.pii.face-e3 { background-image:url("../../images/site2/pii/e3.png"); }
i.pii.face-e4 { background-image:url("../../images/site2/pii/e4.png"); }
i.pii.face-e5 { background-image:url("../../images/site2/pii/e5.png"); }
i.pii.face-e6 { background-image:url("../../images/site2/pii/e6.png"); }
i.pii.face-s1 { background-image:url("../../images/site2/pii/s1.png"); }
i.pii.face-s2 { background-image:url("../../images/site2/pii/s2.png"); }
i.pii.face-c1 { background-image:url("../../images/site2/pii/c1.png"); }
i.pii.face-c2 { background-image:url("../../images/site2/pii/c2.png"); }
i.pii.face-q1 { background-image:url("../../images/site2/pii/q1.png"); }
i.pii.face-q2 { background-image:url("../../images/site2/pii/q2.png"); }

dl.heading-with-pii { display:table; /*width:100%;*/ vertical-align:middle; }
dl.heading-with-pii > dt { display:table-cell; /*width:1%;*/ white-space:nowrap; text-align:right; }
dl.heading-with-pii > dd { display:table-cell; padding:8px 20px 0 0; text-align:left; }
dl.heading-with-pii > dd > strong { font-size:18px; line-height:24px; }
dl.heading-with-pii > dd > strong + p { margin-top:4px; }
dl.heading-with-pii > dt > i.pii.face-e1,
dl.heading-with-pii > dt > i.pii.face-e3,
dl.heading-with-pii > dt > i.pii.face-e5,
dl.heading-with-pii > dt > i.pii.face-e6,
dl.heading-with-pii > dt > i.pii.face-s2,
dl.heading-with-pii > dt > i.pii.face-q1,
dl.heading-with-pii > dt > i.pii.face-q2 { margin-right:15px; }
dl.heading-with-pii.border-bottom { width:100%; border-bottom:1px solid #d6d6d6; }
dl.heading-with-pii.border-bottom > dt { padding-bottom:10px; width:1%; }
dl.heading-with-pii.border-bottom > dd { padding-bottom:10px; }

/**** Form Layout ****/
dl.form-field { display:table; width:100%; }
dl.form-field.border-top { border-top:1px solid #efefef; }
dl.form-field.border-bottom { border-bottom:1px solid #efefef; }
dl.form-field.border-left { border-left:1px solid #efefef; }
dl.form-field.border-right { border-right:1px solid #efefef; }
dl.form-field.border { border:1px solid #efefef; }
dl.form-field.border-none { border:none; }
dl.form-field.hover:hover > dd { background:#fcfcfc; }
dl.form-field + dl.form-field > dt { border-top:1px solid #efefef; }
dl.form-field.border-top-double > dt { border-top:3px double #efefef !important; }
dl.form-field.divided { border-top:1px solid #efefef; padding:10px 0 0 0; margin:10px 0 0 0; }
dl.form-field + dl.form-field.divided > dt { border-top:none; }
dl.form-field > dt { display:table-cell; width:140px; padding:24px 20px 24px 20px; color:#668877; text-align:right; vertical-align:top; line-height:32px; background:#f7f9f8; position:relative; }
dl.form-field > dt.required:after { content:"*"; display:inline-block; font-size:16px; color:#ee0000; line-height:32px; vertical-align:middle; margin-left:4px; position:relative; top:-4px; }
dl.form-field > dd { display:table-cell; padding:24px 0 24px 16px; text-align:left; vertical-align:middle; position:relative;  }
dl.form-field > dd.min { width:1%; white-space:nowrap; }
dl.form-field.large > dt { font-size:16px; }
dl.form-field > dd .description { padding:8px 0 10px 0; }
/* dd.table */
dl.form-field > dd.table { padding:0; }
dl.form-field > dd.table > ul { display:table; width:100%; }
dl.form-field > dd.table > ul > li { display:table-cell; padding:16px; }
dl.form-field > dd.table > ul > li + li { padding-left:0; }
dl.form-field > dd.table > ul > li:last-child { padding-right:0; }
dl.form-field > dd.table > ul > li.min { width:1%; white-space:nowrap; }
/* dd.list + div */
dl.form-field > dd.list { padding:0; }
dl.form-field > dd.list > div.inner { padding:16px 0 16px 16px; }
dl.form-field > dd.list > div.inner + div.inner { padding-top:0; }
dl.form-field > dd.list > div.inner .description { padding-top:16px; }
dl.form-field > dd.list > div.inner + div.inner .description { padding-top:0px; }
/* dd.list + dl */
dl.form-field > dd.list > dl.inner { display:table; width:100%; }
dl.form-field > dd.list > dl.inner > dt,
dl.form-field > dd.list > dl.inner > dd { display:table-cell; padding:16px 0 16px 16px; line-height:32px; vertical-align:middle; }
dl.form-field > dd.list > dl.inner > dd.min { width:1%; white-space:nowrap; }
dl.form-field > dd.list > dl.inner + dl.inner > dt,
dl.form-field > dd.list > dl.inner + dl.inner > dd { padding-top:0; }

dl.form-field > dd p.warning { color:#ee0000; margin-top:10px; }
.form-buttons {}
.form-buttons.border-top { border-top:1px solid #efefef; }
.form-buttons.border-bottom { border-bottom:1px solid #efefef; }
.form-buttons.border-left { border-left:1px solid #efefef; }
.form-buttons.border-right { border-right:1px solid #efefef; }
.form-buttons.border { border:1px solid #efefef; }
.form-buttons.border-none { border:none; }
.form-error { padding:12px; }
.form-error.border-bottom { border-bottom:1px solid #efefef; }



/**** Navigation Tabs ****/
ul.navigation-tabs { display:block; border-bottom:4px solid #33a569; margin:0 0 30px 0; font-size:0; vertical-align:bottom; position:relative; white-space:nowrap; }
ul.navigation-tabs > li { display:inline-block; }
ul.navigation-tabs > li > a { display:inline-block; min-width:80px; border-top:1px solid #cccccc; border-right:1px solid #cccccc; border-left:none; background:#ffffff; padding:3px 20px 0px 20px; line-height:26px; font-size:13px; color:#555555; text-align:center; vertical-align:middle; position:relative; }
ul.navigation-tabs > li:first-child > a { border-left:1px solid #cccccc; }
ul.navigation-tabs > li > a:hover { color:#078d34; }
ul.navigation-tabs > li.active > a { color:#ffffff; font-weight:bold; background:#33a569; border-color:#33a569; }
ul.navigation-tabs > li.active > a:after { display:inline-block; content:""; width:1px; height:100%; border-left:1px solid #33a569; border-bottom:1px solid #33a569; position:absolute; top:-1px; left:-1px; }
ul.navigation-tabs > li:first-child > a:after { display:none; }
ul.navigation-tabs > li.active > a:hover { opacity:0.9; }
ul.navigation-tabs.reverse { border-bottom:none; border-top:4px solid #33a569; margin:30px 0 30px 0; vertical-align:top; }
ul.navigation-tabs.reverse > li > a { border-top:none; border-bottom:1px solid #cccccc; }
ul.navigation-tabs.reverse > li.active > a { border-color:#33a569; }
ul.navigation-tabs.reverse > li.active > a:after { top:0; }

/**** Navigation Bar ****/
ul.navigation-bar { display:block; margin:0; font-size:0; vertical-align:bottom; position:relative; white-space:nowrap; z-index:1; }
ul.navigation-bar + .navigation-bar-after { display:block; width:100%; height:0; border-bottom:1px solid #d6d6d6; position:relative; z-index:0; }
ul.navigation-bar.border-none + .navigation-bar-after { display:none; }
ul.navigation-bar > li { display:inline-block; position:relative; }
ul.navigation-bar > li + li  { margin-left:30px; }
ul.navigation-bar > li > a, ul.navigation-bar > li > span { display:inline-block; min-width:40px; padding:8px 4px 10px 4px; font-size:20px; line-height:28px; color:#666666; text-align:left; vertical-align:middle; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
ul.navigation-bar > li > a:hover { color:#078d34; }
ul.navigation-bar > li.active > a, ul.navigation-bar > li.active > span { font-weight:bold; color:#666666; }
ul.navigation-bar > li.active:after { display:block; content:""; width:100%; height:0; border:2px solid #33a569; border-radius:2px; position:absolute; bottom:0; left:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
ul.navigation-bar > li.divider { margin-left:20px; }
ul.navigation-bar > li.divider + li { margin-left:20px; }
ul.navigation-bar > li.divider > i { display:inline-block; padding:6px 0 8px 0; font-size:16px; line-height:26px; color:#cccccc; text-align:center; vertical-align:middle; }
ul.navigation-bar > li.link { position:absolute; bottom:5px; right:10px; }
ul.navigation-bar > li.link > a { padding:0; font-size:13px; color:#666666; text-align:right; }
ul.navigation-bar > li.link > a:hover { color:#999999; }
ul.navigation-bar > li.back > a { min-width:auto; padding-right:12px; color:#666666; }
ul.navigation-bar > li.back > a:before { display:inline-block; content:"\e929"; font-family:"icon"; position:relative; top:3px; }
ul.navigation-bar > li.back > a:hover { color:#999999; }
ul.navigation-bar > li.back + li.active { margin-left:0; }
ul.navigation-bar.table { display:table; width:100%; }
ul.navigation-bar.table > li { display:table-cell; }
ul.navigation-bar.table > li + li { margin-left:0; }
ul.navigation-bar.table > li > a { display:block; }
ul.navigation-bar.small {}
ul.navigation-bar.small > li + li { margin-left:16px; }
ul.navigation-bar.small > li > a, ul.navigation-bar.small > li > span { min-width:auto; padding:4px 6px 4px 6px; font-size:13px; line-height:26px; }
ul.navigation-bar.small > li.active > a, ul.navigation-bar.small > li.active > span { font-weight:normal; color:#333333; }
ul.navigation-bar.small > li.divider { margin-left:-2px; }
ul.navigation-bar.small > li.divider + li { margin-left:-2px; }
ul.navigation-bar.small > li.divider > i { padding:4px 0 4px 0; font-size:13px; line-height:26px; }
ul.navigation-bar.small > li.link { bottom:-2px; right:5px; }
ul.navigation-bar.small > li.link > a { font-size:12px; }
ul.navigation-bar.small.border-none > li > a, ul.navigation-bar.small.border-none > li > span { padding-left:0; }
ul.navigation-bar.medium {}
ul.navigation-bar.medium > li + li { margin-left:16px; }
ul.navigation-bar.medium > li > a, ul.navigation-bar.small > li > span { min-width:auto; padding:6px 8px 6px 8px; font-size:16px; line-height:32px; }
ul.navigation-bar.medium > li.active > a, ul.navigation-bar.small > li.active > span { font-weight:bold; color:#666666; }
ul.navigation-bar.face-red > li.active:after { border-color:#ee0000; }

ul.navigation-links { margin:10px 0 30px 0; }
ul.navigation-links > li { display:inline-block; margin-right:12px; }
ul.navigation-links > li > a { color:#999999; display:inline-block; line-height:24px; font-size:12px; }
ul.navigation-links > li > a:hover { opacity:0.75; }
ul.navigation-links > li.active > a { color:#444444; }
ul.navigation-links > li > a:before { content:"|"; display:inline-block; color:#cccccc; position:relative; top:-1px; margin-right:12px; }
ul.navigation-links > li:last-child > a:after { content:"|"; display:inline-block; color:#cccccc; position:relative; top:-1px; margin-left:12px; }




/**** List ****/
ul.list.hover > li:hover { background:#fafafa; }
ul.list.hover > li:hover a.plain { color:#078d34; }
ul.list.link > li:hover { background:#fafafa; }
dl.list.hover:hover { background:#fafafa; }


/**** Pager ****/
ul.pager { display:block; font-size:0; }
ul.pager > li { display:inline-block; font-size:13px; }
ul.pager > li + li { margin-left:10px; }
ul.pager > li > a { display:inline-block; font-size:12px; width:24px; height:24px; line-height:24px; text-align:center; vertical-align:middle; border-radius:50%; border:1px solid #999999; color:#999999; }
ul.pager > li > a:hover,ul.pager > li > a:active { background-color:#078d34; border-color:#078d34; color:#ffffff; }
ul.pager > li > a.current { background-color:#078d34; border-color:#078d34; color:#ffffff; }
ul.pager > li > a.disabled,ul.pager > li > a.disabled:hover { background-color:transparent; border-color:#cccccc; color:#cccccc; cursor:default; }
ul.pager > li > span.divider { font-size:12px; width:24px; height:24px; line-height:24px; text-align:center; vertical-align:middle; }




/**** Box ****/
.box { border:1px solid #e1e1e1; }
.box.border-top { border:none; border-top:1px solid #e1e1e1; }
.box.border-bottom { border:none; border-bottom:1px solid #e1e1e1; }
.box.border-top-bottom { border:none; border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; }
.box.hover:hover { background:#f7f9f8 !important; }
.box.sticky { border-color:#e1e1e1; position:relative; }
.box.sticky.tile-green:before { background:#33a569 url("../../images/site2/common/tile.green.png") top left repeat; !important; }
.box.sticky.tile-red:before { background:#ee0000 url("../../images/site2/common/tile.red.png") top left repeat; !important; }
.box.sticky.disabled { background:#f9f9f9; opacity:0.75; }
.box.sticky.disabled:before { background:#f9f9f9; }


/**** Hr ****/
hr { color:#e1e1e1; width:100%; height:1px; border:none; border-bottom:1px solid #e1e1e1; }

/**** Graph ****/
.bar-graph { width:100%; height:8px; border-radius:4px; background:#e0e0e0; }
.bar-graph > .inner { min-width:8px; height:100%; border-radius:4px; background:#33a569 url("../../images/site2/common/tile.green.png") top left repeat; }


/**** CreditCard Logos ****/
.credit-visa { display:inline-block; width:34px; height:22px; background:url("../../images/site2/common/credit/visa.gif") center center no-repeat; background-size:contain; vertical-align:middle; }
.credit-mastercard { display:inline-block; width:34px; height:22px; background:url("../../images/site2/common/credit/mastercard.gif") center center no-repeat; background-size:contain; vertical-align:middle; }
.credit-jcb { display:inline-block; width:31px; height:24px; background:url("../../images/site2/common/credit/jcb.gif") center center no-repeat; background-size:contain; vertical-align:middle; }
.credit-amex { display:inline-block; width:24px; height:24px; background:url("../../images/site2/common/credit/amex.gif") center center no-repeat; background-size:contain; vertical-align:middle; }
.credit-diners { display:inline-block; width:33px; height:24px; background:url("../../images/site2/common/credit/diners.gif") center center no-repeat; background-size:contain; vertical-align:middle; }



/**** Tooltip ****/
.tooltip { padding:5px 8px 4px 8px; font-size:12px; }

/**** Message ****/
#message { position:fixed; top:4px; left:0; z-index:200; width:100%; background:transparent; overflow:hidden; }
#message > .inner { position:relative; z-index:201; padding:0; font-size:18px; line-height:90px; font-weight:bold; color:#ffffff; text-align:center; vertical-align:middle; }
#message > .inner a.close { color:#ffffff; margin-left:10px; }
#message > .inner a.close > i { font-size:12px; font-weight:normal; opacity:0.6; }
#message > .inner a:hover > i { opacity:0.9; }
#message:before { content:""; position:absolute; top:0; left:0; z-index:200; width:100%; height:100%; background:#33a569; opacity:0.9; }
#message.alert > .inner { color:#ee0000; }
#message.alert > .inner a.close { color:#ee0000; opacity:0.5; }
#message.alert:before { background:#ffcccc; }


/**** Ribbon ****/
#ribbon { width:100%; box-shadow:0 0 1px 1px rgba(0,0,0,0.2); }
#ribbon > .inner { width:980px; margin:0 auto 0 auto; box-shadow:1px 1px 1px 1px rgba(0,0,0,0.1); }
#ribbon > .inner2 { width:980px; margin:0 auto 0 auto; text-shadow:rgba(0,0,0,0.5) 1px 1px 3px; }
#ribbon > .inner2 .with-thumb img { box-shadow:rgba(0,0,0,0.3) 1px 1px 3px; }
#ribbon > .inner2 .box { color:#444444; text-shadow:none; }

/**** Dialog ****/
.page-dialog-preview { background-color:#555555; padding:40px; }
.page-dialog-preview > .dialog { margin:0 auto 0 auto; }
.dialog { position:relative; background:#ffffff; border-radius:5px; box-shadow:0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .close { cursor:pointer; position:absolute; top:-7px; right:-7px; z-index:10; width:18px; height:18px; border-radius:9px; background:#565656; box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .close:before { content:"\ed14"; font-family:"icon"; display:block; position:absolute; top:0; left:0; width:18px; height:18px; line-height:18px; font-size:10px; color:#ffffff; text-align:center; vertical-align:middle; }
.dialog > .close:hover { background:#777777; }
.dialog > .footer { position:absolute; bottom:0; left:0; z-index:0; border-top:1px solid #e1e1e1; background:#f9f9f9; width:100%; height:55px;line-height:55px; color:#333333; text-align:center; vertical-align:middle; border-radius:0 0 5px 5px; }
.dialog > .content { position:relative; padding:0 0 55px 0; width:100%; height:100%; overflow:hidden; border-radius:5px 5px 0 0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.dialog > .content > .inner { padding:20px; width:100%; height:100%; overflow-x:hidden; overflow-y:auto; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.dialog > .error { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.2); }
.dialog > .error > .inner { display:inline-block; width:320px; background:#ffffff; color:#ee0000; padding:20px 30px 20px 30px; border:1px solid #ee0000; border-radius:4px; position:absolute; top:50%; left:50%; }
.dialog > .error > .inner > strong { display:block; font-weight:bold; }
.dialog > .error > .inner > div { font-size:11px; margin-top:4px; }
.dialog > .error > .inner > .close { cursor:pointer; position:absolute; top:-7px; right:-7px; width:18px; height:18px; border-radius:9px; background:#ee0000; box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); -webkit-box-shadow:0 0 0 2px rgba(255,255,255,1),0 0 2px 2px rgba(0,0,0,0.2); }
.dialog > .error > .inner > .close:before { content:"\ed14"; font-family:"icon"; display:block; position:absolute; top:0; left:0; width:18px; height:18px; line-height:18px; font-size:10px; color:#ffffff; text-align:center; vertical-align:middle; }
.dialog.simple > .content { padding-bottom:0; border-radius:5px; }
.dialog.simple > .content > .inner { padding:0; }
.dialog.picture > .content { padding-bottom:0; border-radius:5px; }
.dialog.picture > .content > .inner { padding:0; }

.dialog > .prev { cursor:pointer; position:absolute; bottom:-40px; left:0; z-index:10; width:30px; height:30px; line-height:30px; border-radius:15px; background:#565656; color:#ffffff; font-size:16px; text-align:center; vertical-align:middle; }
.dialog > .prev:before { content:"\ed45"; font-family:"icon"; position:relative; left:-1px; }
.dialog > .prev.disabled { cursor:default; }
.dialog > .prev.disabled:before { opacity:0.5; }
.dialog > .next { cursor:pointer; position:absolute; bottom:-40px; right:0; z-index:10; width:30px; height:30px; line-height:30px; border-radius:15px; background:#565656; color:#ffffff; font-size:16px; text-align:center; vertical-align:middle; }
.dialog > .next:before { content:"\ed41"; font-family:"icon"; position:relative; left:1px; }
.dialog > .next.disabled { cursor:default; }
.dialog > .next.disabled:before { opacity:0.5; }


/**** page > guest-top ****/
#page-guest-top .cover { clear:both; width:100%; min-height:560px; padding-bottom:60px; /*border-top:1px solid #e3e3e3;*/ border-bottom:1px solid #e3e3e3; background:#fefefe url("../../images/site2/login/cover.jpg") bottom -100px left no-repeat; background-size:cover; position:relative; }
#page-guest-top .cover > .inner { margin:50px auto 0 auto; width:400px; }
#page-guest-top .cover > .inner > .content { padding:10px 20px 20px 20px; background:#f7f9f8; border:1px solid #e0e0e0; border-radius:3px; }
#page-guest-top .cover > .inner > .divider { display:block; margin:0 0 15px 0; border-bottom:1px solid #e3e3e3; text-align:center; }
#page-guest-top .cover > .inner > .divider > span { display:inline-block; padding:0 15px 0 15px; background:#ffffff; color:#aaaaaa; font-size:16px; position:relative; top:12px; }
#page-guest-top .cover > .inner > .content.others { margin-top:20px; padding:10px 20px 10px 20px; }
#page-guest-top footer { margin-top:0; background:#ffffff; }

/**** page > faq ****/
#page-faq .x-question {}
#page-faq .x-question + .x-question { margin-top:30px; }
#page-faq .x-question > strong { display:block; margin:0 0 4px; padding:0 0 0 22px; font-size:16px; position:relative; }
#page-faq .x-question > strong:before { content:"\ea3b"; font-family:"icon"; color:#078d34; opacity:0.5; margin-right:5px; position:absolute; top:0; left:0; }
#page-faq .x-question > .box { border-radius:4px; padding:10px 15px 10px 15px; }
#page-faq .x-question > .box > p { line-height:22px; color:#666666; }
#page-faq .x-question > .box > p + p { margin-top:6px; }
#page-faq .x-question > .box > .x-links { border-top:1px solid #e1e1e1; margin:10px 0 -2px 0; padding:8px 0 0 0; font-size:12px; }
#page-faq .x-question > .box > .x-links a:before { content:"\ebbb"; font-family:"icon"; opacity:0.75; margin-right:3px; position:relative; top:1px; }