@charset "utf-8";

#wrap { position: relative; width: 890px; background: url(/Areas/Guide/common/img/bg.png) no-repeat; box-sizing: border-box; }
#wrap.detail { background: url(/Areas/Guide/common/img/bg2.png) no-repeat; }

.titArea div { color: #5a311d; position: relative; }
.titArea div.text { text-align: center; padding-top: 75px; }
.titArea div.text > div { display: inline-block; text-align: left; position: relative; top: 16px; }
.titArea div.text img { height: 120px; }
.titArea div.text span { font-size: 30px; line-height: 45px; }
.titArea div.text span:last-child { font-size: 25px; line-height: 25px; }
.titArea > div:last-child { font-size: 20px; line-height: 20px; text-align: center; }
.titArea > div > div { text-align: left; display: inline-block; }

.main nav { position: absolute; top: 258px; left: 50%; width: 617px; height: 345px; margin-left: -308.5px; background: rgba(25,10,0,.7); border: 1px solid rgba(162,152,137,.8); box-sizing: border-box; }
.main nav ul { height: 100%; }
.main nav li { float: left; width: 25%; height: 33.3333%; border-top: 1px solid rgba(162,152,137,.8); border-left: 1px solid rgba(162,152,137,.8); text-align: center; box-sizing: border-box; }
.main nav li:nth-child(-n+4) { border-top: 0; }
.main nav li:nth-child(4n+1) { border-left: 0; }
.main nav li a { display: block; position: relative; height: 100%; padding-top: 6px; font-size: 11px; color: #ccc; box-sizing: border-box; }
.main nav li a:hover:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: 2px solid #f1c94d; background: url(/Areas/Guide/common/img/over_frame.png) no-repeat; background-size: cover; box-sizing: border-box; }
.main nav li a span { display: block; padding-top: 15px; background: url(/Areas/Guide/common/img/txt_border.png) no-repeat center top; line-height: 1.2; }
.main nav li a:before { content: ""; display: block; width: 100%; height: 50px; /*background: url(/Areas/Guide/common/img/spr_guide.png) no-repeat;*/ }
.main nav li .guide:before { background: url(/Areas/Guide/common/img/icn_guide.png) no-repeat center; }
.main nav li .calpheon:before { background: url(/Areas/Guide/common/img/icn_calpheon.png) no-repeat center; }
.main nav li .media:before { background: url(/Areas/Guide/common/img/icn_media.png) no-repeat center; }
.main nav li .itemmarket:before { background: url(/Areas/Guide/common/img/icn_itemmarket.png) no-repeat center; }
.main nav li .gather:before { background: url(/Areas/Guide/common/img/icn_gather.png) no-repeat center; }
.main nav li .manufacture:before { background: url(/Areas/Guide/common/img/icn_manufacture.png) no-repeat center; }
.main nav li .cook:before { background: url(/Areas/Guide/common/img/icn_cook.png) no-repeat center; }
.main nav li .alchemy:before { background: url(/Areas/Guide/common/img/icn_alchemy.png) no-repeat center; }
.main nav li .mating:before { background: url(/Areas/Guide/common/img/icn_mating.png) no-repeat center; }
.main nav li .trade:before { background: url(/Areas/Guide/common/img/icn_trade.png) no-repeat center; }
.main nav li .fish:before { background: url(/Areas/Guide/common/img/icn_fish.png) no-repeat center; }
.main nav li .hunt:before { background: url(/Areas/Guide/common/img/icn_hunt.png) no-repeat center; }
.main nav li .energy:before { background: url(/Areas/Guide/common/img/icn_energy.png) no-repeat center; }
.main nav li .potential:before { background: url(/Areas/Guide/common/img/icn_potential.png) no-repeat center; }

.tabMenu { position: absolute; top: 74px; left: 50%; width: 804px; margin-left: -402px; }
.tabMenu li { height: 24px; border: 1px solid #ada8a0; box-sizing: border-box; -webkit-box-basis: auto; -webkit-flex-basis: auto; -ms-flex-basis: auto; flex-basis: auto; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1 0 auto; flex: 1; }
.tabMenu li a { display: block; height: 100%; font-size: 12px; color: #a59c92; background: rgba(50,50,50,.8); text-align: center; letter-spacing: -0.075em; line-height: 22px; box-shadow: inset 0px 0px 10px 4px rgba(50, 34, 13, 0.75); -moz-box-shadow: inset 0px 0px 10px 4px rgba(50, 34, 13, 0.75); -webkit-box-shadow: inset 0px 0px 10px 4px rgba(50, 34, 13, 0.75); }
.tabMenu li a:hover { -webkit-filter: brightness(150%); }
.tabMenu li.current { border: 0; }
.tabMenu li.current a { color: #57301c; background: rgba(161,123,74,.9) url(/Areas/Guide/common/img/bg_tab_menu.png) no-repeat; line-height: 24px; box-shadow: inset 0px 0px 2px 2px rgba(255, 247, 22, 0.75); -moz-box-shadow: inset 0px 0px 2px 2px rgba(255, 247, 22, 0.75); -webkit-box-shadow: inset 0px 0px 2px 2px rgba(255, 247, 22, 0.75); }
.tabBox { overflow: hidden; position: absolute; top: 100px; left: 50%; width: 804px; height: 502px; margin-left: -402px; box-shadow: inset 0px 0px 2px 2px rgba(101, 59, 37, 0.75); -moz-box-shadow: inset 0px 0px 2px 2px rgba(101, 59, 37, 0.75); -webkit-box-shadow: inset 0px 0px 2px 2px rgba(101, 59, 37, 0.75); }
.tabBox iframe { overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; border: 0; background-color: white; }

.btnArea { position: absolute; top: 612px; left: 0; width: 100%; padding: 0 35px 0 30px; box-sizing: border-box; }
.btnArea a { height: 25px; line-height: 25px; font-size: 14px; color: #5a311d; }
.btnArea a:hover { -webkit-filter: brightness(150%); }
.btnArea .btnClose { float: right; padding-left: 30px; background: url(/Areas/Guide/common/img/icon_close.png) no-repeat; }

/* common */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; min-height: 100%; background-color: transparent; overflow: hidden; }
body { width: 100%; font-size: 13px; line-height: 1.5em; color: #666; letter-spacing: -0.05em; }

article, aside, hgroup, header, footer, figure, figcaption, nav, section, time, mark, canvas, video, audio, details, summary { display: block; }

em, i, address { font-style: normal; }
img { max-width: 100%; border: 0; vertical-align: middle; }
ul, ol, li { list-style: none; }
table { table-layout: fixed; width: 100%; border-collapse: collapse; border-spacing: 0; word-wrap: break-word; word-break: break-all; box-sizing: border-box; }
fieldset { border: 0; }

h1, h3, h3, h4, h5, h6 { font-size: 16px; }

a { color: #696969; text-decoration: none; }

hr { display: none; height: 0; }

textarea, select, input { color: #666; vertical-align: middle; font-size: 14px; padding: 0;  }

button { background: none repeat scroll 0 0 #fff; border: 0 none; cursor: pointer; font: 12px; margin: 0; overflow: visible; padding: 0; vertical-align: middle; }
button span { vertical-align: middle; white-space: nowrap; }

/* hidden  */
caption, legend { font-size: 0; width: 0; height: 0; line-height: 0; position: absolute; text-indent: -3000px; overflow: hidden; background: none; }
.ir { font-size: 0; width: 0; height: 0; line-height: 0; position: absolute; text-indent: -3000px; overflow: hidden; background: none; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

input[type=radio] { position: relative; width: 18px; height: 18px; border: 2px solid #555; border-radius: 9px; -webkit-border-radius: 9px; box-sizing: border-box; margin: 0; vertical-align: middle; font-size: 1rem; -webkit-appearance: none; }
input[type=radio]:checked { background-color: transparent; }
input[type=radio]:checked:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #e37000; border-radius: 5px; box-sizing: border-box; }

.flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -moz-box-wrap: nowrap; -webkit-box-wrap: nowrap; -webkit-flex-wrap: nowrap; -ms-flexbox-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; }
.fx1 { -webkit-box-basis: auto; -webkit-flex-basis: auto; -ms-flex-basis: auto; flex-basis: auto; -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1 0 auto; flex: 1; }

.scroll { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-right: 8px !important; }
.show.scroll > div { margin-right: -16px; }
.battleRanking .show.scroll.list ul { margin-right: 18px; }
.layerBoxDepth2 .show.scroll.list ul { margin-right: -8px; }
.show.scroll::-webkit-scrollbar { display: block; width: 8px; }
.scroll::-webkit-scrollbar { position: absolute; display: none; }
.scroll::-webkit-scrollbar-track { background-color: rgba(255,255,255,.1); border-radius: 10px; }
.scroll::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.15); border-radius: 10px; }
.scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.35); }
.scroll::-webkit-scrollbar-thumb:active { background-color: rgba(255,255,255,.35); }

.btnGray { display: inline-block; font-size: 14px; color: rgba(255,255,255,.7); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); border: 1px solid #000; background: rgb(67,145,59); background: -moz-linear-gradient(top, rgba(104,104,104,1) 0%, rgba(71,71,71,1) 52%, rgba(71,71,71,1) 55%, rgba(53,53,53,1) 57%, rgba(53,53,53,1) 100%); background: -webkit-linear-gradient(top, rgba(104,104,104,1) 0%,rgba(71,71,71,1) 52%,rgba(71,71,71,1) 55%,rgba(53,53,53,1) 57%,rgba(53,53,53,1) 100%); background: linear-gradient(to bottom, rgba(104,104,104,1) 0%,rgba(71,71,71,1) 52%,rgba(71,71,71,1) 55%,rgba(53,53,53,1) 57%,rgba(53,53,53,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#686868', endColorstr='#353535',GradientType=0 ); }
.btnGreen { display: inline-block; font-size: 14px; color: rgba(255,255,255,.7); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35); border: 1px solid #003b00; background: rgb(67,145,59); background: -moz-linear-gradient(top, rgba(67,145,59,1) 0%, rgba(40,108,32,1) 52%, rgba(40,108,32,1) 55%, rgba(18,94,10,1) 57%, rgba(18,94,10,1) 100%); background: -webkit-linear-gradient(top, rgba(67,145,59,1) 0%,rgba(40,108,32,1) 52%,rgba(40,108,32,1) 55%,rgba(18,94,10,1) 57%,rgba(18,94,10,1) 100%); background: linear-gradient(to bottom, rgba(67,145,59,1) 0%,rgba(40,108,32,1) 52%,rgba(40,108,32,1) 55%,rgba(18,94,10,1) 57%,rgba(18,94,10,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43913b', endColorstr='#125e0a',GradientType=0 ); }