@charset "utf-8";

#wrapHeader {
    background: #FFF;
    height: 125px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    max-width: 945px;
}

h1 {
    font-size: 10px !important;
    position: absolute;
    left: 0;
    top: 20px;
    font-weight: normal !important;
}

#wrapHeader h2 {
    color: #17175B;
    position: absolute;
    left: 0;
    top: 56px;
    line-height: 1.5;
}

#wrapHeader #copy {
    color: #17175B;
    position: absolute;
    left: 240px;
    top: 56px;
    line-height: 1.5;
}

#boxHeaderSns {
    float: right;
    position: relative;
    margin-top: 9px;
}

#boxHeaderSns ul li {
    display: inline;
    margin: 10px 0 0;
}

#boxHeaderBanner {
    position: absolute;
    right: 0px;
    top: 20px;
}

#boxHeaderBanner p,
#boxHeaderBanner ul {
    float: left;
    margin: 0 0 0 7px;
}

.btnFb_iine iframe {
    float: right;
    margin: 10px 0;
    display: inline-block;
    clear: both;
}

.open_menu a {
    display: none;
}

.gmenuspece {
    margin-top: 20px;
}

@media only screen and (max-width:640px) {
    .open_menu a {
        max-width: 50px;
        height: 50px;
        display: block;
        z-index: 9999;
        background: url(../img_new/menu.png) no-repeat;
        -moz-background-size: 100% auto;
        background-size: 100% auto;
        position: relative;
        top: 0;
        left: 10px;
    }
    #wrapHeader {
        height: auto !important;
        background: none;
    }
    #wrapHeader h1 {
        float: left;
        width: 70%;
        margin-left: 70px;
    }
    #wrapHeader h2,
    #wrapHeader #copy,
    #boxHeaderBanner {
        position: static;
    }
    #wrapHeader h2 {
        margin: 10px;
    }
    #wrapHeader #copy {
        font-size: 11px;
        margin: 10px;
        display: none;
    }
    #boxHeaderSns {
        position: absolute;
        top: 50px;
        right: 10px;
    }
    #boxHeaderBanner {
        height: 40px;
    }
    #boxHeaderBanner p {
        width: 75px;
    }
    #boxHeaderBanner ul {
        width: 95px;
    }
    #boxHeaderBanner p.confirm {
        width: 120px;
    }
}

/*
-----------------------------------------------
	Nav
----------------------------------------------- */

#gnav {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: url(../img/common/navi_back.gif) repeat-x;
}

@media only screen and (max-width:640px) {
    #gnav {
        display: none;
    }
}

#gnav ul {
    width: 945px;
    height: 60px;
    margin: 0 auto;
    font-size: 93%;
    line-height: 1.32;
    padding-left: 5px;
}

#gnav a {
    width: 135px;
    height: 0;
    color: #333;
    text-decoration: none;
    padding-top: 60px;
    background-image: url(../img/header/gnav.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    float: left;
    display: block;
    overflow: hidden;
}

#gnav ul li {
    display: inline;

}

/* Nav default */

#gnav #gnav-01 a {
    width: 135px;
    background-position: -0px 0;
}

#gnav #gnav-02 a {
    width: 135px;
    background-position: -135px 0;
}

#gnav #gnav-03 a {
    width: 135px;
    background-position: -270px 0;
}

#gnav #gnav-04 a {
    width: 135px;
    background-position: -405px 0;
}

#gnav #gnav-05 a {
    width: 135px;
    background-position: -540px 0;
}

#gnav #gnav-06 a {
    width: 135px;
    background-position: -675px 0;
}

#gnav #gnav-07 a {
    width: 135px;
    background-position: -810px 0;
}

/* Nav hover */

#gnav #gnav-01 a:hover {
    background-position: 0px -60px;
}

#gnav #gnav-02 a:hover {
    background-position: -135px -60px;
}

#gnav #gnav-03 a:hover {
    background-position: -270px -60px;
}

#gnav #gnav-04 a:hover {
    background-position: -405px -60px;
}

#gnav #gnav-05 a:hover {
    background-position: -540px -60px;
}

#gnav #gnav-06 a:hover {
    background-position: -675px -60px;
}

#gnav #gnav-07 a:hover {
    background-position: -810px -60px;
}

/* Nav active */

#page-home #gnav-01 a {
    background-position: 0 -60px !important;
    cursor: default;
}

#page-procedure #gnav-02 a {
    background-position: -135px -60px !important;
    cursor: default;
}

#page-voice #gnav-03 a {
    background-position: -270px -60px !important;
    cursor: default;
}

#page-faq #gnav-04 a {
    background-position: -405px -60px !important;
    cursor: default;
}

#page-guide #gnav-05 a {
    background-position: -540px -60px !important;
    cursor: default;
}

#page-corporate #gnav-06 a {
    background-position: -675px -60px !important;
    cursor: default;
}

#page-recruit #gnav-07 a {
    background-position: -810px -60px !important;
    cursor: default;
}

/*
-----------------------------------------------
	RSS
----------------------------------------------- */

div#feed {
    max-width: 500px;
    display: block;
    overflow: auto;
}

#feed ul {
    margin: 0 auto 0em;
}

#feed ul li {
    line-height: 1.5;
    margin: 10px 0px 20px;
}

#feed ul li time {
    font-size: 10px;
    color: #FFF;
    padding: 8px;
    margin: 0px 10px 0px 0px;
    background: #F29600;
}

#feed ul li a {
    color: #17175B;
    font-size: 11px;
    vertical-align: middle;
    margin: 0px 0px 10px;
    font-weight: bold;
}



/*
-----------------------------------------------
	DKoffice
----------------------------------------------- */

#wrapHeader_DKoffice {
    width: 100%;
    background: url(../img/dkoffice/bgDKoffice_header.jpg) repeat-x top;
}

#header_DKoffice {
    height: 128px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

#header_DKoffice h2 {
    color: #17175B;
    position: absolute;
    left: 40px;
    top: 56px;
    line-height: 1.5;
}

#DK_office {
    line-height: 1.5;
    color: #595757;
    position: relative;
}

#reccomend {
    margin: 10px 0px 15px;
}

#reccomend ul {
    margin: 0px 0px 6px 35px;
}

#reccomend ul li {
    display: inline;
}

#reccomend p {
    width: 460px;
    float: left;
    font-size: 11px;
}

.tmbRight {
    float: right;
    display: inline;
}

.reason {
    margin: 0px 0px 20px;
}

#contsReason ul li {
    float: left;
    width: 232px;
    height: 150px;
    border-left: 1px solid #DFD7CC;
    border-bottom: 1px solid #DFD7CC;
}

#contsReason ul li:last-child {
    border-right: 1px solid #DFD7CC;
}

#contsReason h4 {
    margin: 0px 0px 0px 10px;
}

#contsReason p {
    width: 122px;
    font-size: 10px;
    margin: 10px 0px 0px 10px;
}

#contsReason ul li.reason1 {
    background: #F2F2F2 url(../img/dkoffice/imgReason1.jpg) no-repeat right bottom;
}

#contsReason ul li.reason2 {
    background: #F2F2F2 url(../img/dkoffice/imgReason2.jpg) no-repeat right bottom;
}

#contsReason ul li.reason3 {
    background: #F2F2F2 url(../img/dkoffice/imgReason3.jpg) no-repeat right bottom;
}

#contsReason ul li.reason4 {
    background: #F2F2F2 url(../img/dkoffice/imgReason4.jpg) no-repeat right bottom;
}

#contsReason ul li.reason5 {
    background: #F2F2F2 url(../img/dkoffice/imgReason5.jpg) no-repeat right bottom;
}

#contsReason ul li.reason6 {
    background: #F2F2F2 url(../img/dkoffice/imgReason6.jpg) no-repeat right bottom;
}

.contsAccess p {
    width: 320px;
    font-size: 11px;
    margin: 20px 0px 0px;
}

.contsAccess {
    float: left;
}

.contsAccess p + p {
    margin: 20px 0px 0px 20px;
}

.contsAccess p + p + p {
    width: 201px;
    margin: 15px 0px 0px 40px;
}

.imgAccess img {
    float: right;
    margin: 20px 20px 40px 0px;
}

.boxSummary h4,
.boxPrice h4 {
    padding: 0px 0px 0px 10px;
    border-left: 3px solid #17175B;
    font-weight: bold;
}

.boxSummary table {
    font-size: 12px;
    margin: 12px 0px 18px;
    border-bottom: 1px solid #CCCCCC;
}

.boxSummary table tr {}

.boxSummary table th {
    width: 200px;
    padding: 1em 0px 0px;
    text-align: left;
    font-weight: bold;
    text-indent: 6em;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    vertical-align: top;
    background: #E6E6E6;
}

.boxSummary table td {
    padding: 1em 0px 1em 1em;
    vertical-align: top;
    text-align: left;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    background: #F2F2F2;
}

.boxPrice table {
    font-size: 12px;
    margin: 12px 0px 18px;
}

.boxPrice table th {
    width: 200px;
    padding: 1em 0px 0px;
    text-align: left;
    font-weight: bold;
    text-indent: 6em;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    vertical-align: top;
    background: #E6E6E6;
}

.boxPrice table td {
    padding: 1em 0px 1em 1em;
    vertical-align: top;
    text-align: center;
    border-top: 1px solid #CCCCCC;
    border-bottom: 1px solid #CCCCCC;
    background: #F2F2F2;
}

.bd_r {
    border-right: 1px solid #CCCCCC;
}

.contactInfo {
    margin: 17px 0px 55px;
}

.infoDKhouse {
    background: url(../img/dkoffice/bgInfoDKoffice.jpg) no-repeat left top;
    height: 490px;
    width: 700px;
    margin: 0px 0px 35px;
}

.layout_c {
    width: 700px;
    margin: 0px auto 10px;
    text-align: center;
}

.infoDKhouse {
    position: relative;
}

.infoDKhouse h3 {
    position: absolute;
    left: 24px;
    top: 20px;
}

.infoDKhouse h4 {
    position: absolute;
    left: 24px;
    top: 108px;
}

.infoDKhouse > p {
    width: 376px;
    font-size: 12px;
    position: absolute;
    left: 24px;
    top: 148px;
}

.infoDKhouse > p + p {
    width: 376px;
    font-size: 12px;
    position: absolute;
    left: 24px;
    top: 278px;
}

.imgDKhouse1 {
    font-size: 12px;
    position: absolute;
    left: 423px;
    top: 105px;
}

.imgDKhouse2 {
    font-size: 12px;
    position: absolute;
    left: 423px;
    top: 295px;
}

.infoDKhouse h5 {
    color: #933;
    position: absolute;
    left: 44px;
    top: 370px;
    font-weight: bold;
    border-left: 3px solid #933;
    padding: 0px 0px 0px 10px;
}

.infoDKhouse table {
    position: absolute;
    left: 44px;
    top: 400px;
    border: 1px solid #CCC;
}

.infoDKhouse table tr th,
.infoDKhouse table tr td {
    font-size: 12px;
    text-align: center;
    padding: 14px 0;
}

.infoDKhouse table tr th {
    font-size: 12px;
    padding: 14px 0;
    background: #E6E1D9;
}

.infoDKhouse table tr td {
    font-size: 12px;
    padding: 14px 0;
    background: #E8E8E8;
}

#Contact-nav {
    text-align: center;
    margin: 55px auto 20px;
    width: 220px;
}

/*	Side nav
-------------------------------------------------- */

#Side-nav {
    width: 209px;
    margin: 30px auto 5px;
    padding-bottom: 15px;
    background: url(../img/dkoffice/side-nav.jpg) no-repeat 0 0;
    overflow: hidden;
}

#Side-nav h2 {
    width: 220px;
    height: 0;
    padding-top: 43px;
    overflow: hidden;
}

#Side-nav ul {
    width: 220px;
}

#Side-nav ul li {
    width: 220px;
    height: 40px;
    float: left;
}

#Side-nav ul li a {
    width: 220px;
    height: 0;
    padding-top: 40px;
    display: block;
    overflow: hidden;
}

#Side-nav-home a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -43px;
}

#Side-nav-flow a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -85px;
}

#Side-nav-voice a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -125px;
}

#Side-nav-faq a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -165px;
}

#Side-nav-guide a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -205px;
}

#Side-nav-ToCorp a:hover {
    background: url(../img/dkoffice/side-nav-on.jpg) no-repeat 0px -245px;
}



.navigation {
    max-width: 940px;
    margin: 20px auto;
}

.navigation ul {
    width: 100%;
}

.navigation ul li {
    float: left;
    width: 10.2%;
    margin-right: 1%;
}

.navigation ul li a:hover {
    opacity: 0.5;
}

.navigation ul li:last-child {
    margin: 0;
}

.point ul {
    width: 100%;
    clear: both;
    overflow: hidden;
}

.point ul li {
    float: left;
    width: 32.6%;
    margin-right: 1%;
    max-width: 233px;
    position: relative
}

.point ul li p {
    position: absolute;
    top: 72%;
    line-height: 20px;
    text-align: left;
    font-size: 11px;
    padding: 0 10px
}

.point ul li:nth-child(3n) {
    margin: 0;
}

.m20 {
    margin: 20px 0;
}

@media only screen and (max-width:640px) {
    .point ul li p {
        line-height: 15px !important;
        font-size: 9px;
        top: 70%;
    }
    .navigation ul {
        padding: 0 10px;
    }
    .navigation ul li {
        float: left;
        width: 30%;
        margin-right: 1%;
    }
    .navigation ul li img {
        width: 100%;
    }


    .point ul li {
        float: left;
        width: 48.5%;
        margin-right: 1%;
        max-width: 233px;
    }
    .point ul li:nth-child(2n) {
        margin: 0;
    }
    .m20 {
        margin: 20px 0;
    }
}