@charset "utf-8";
/* Vaimedia Joyhan 2015-02-02 */

body {
    position: relative;
    background: #0d1626;
}

/* ----------------------------------------------- */
/*                       #gnb                      */
/* ----------------------------------------------- */

#header {
    width: 180px;
    background: url(../../images/common/bg_header_main_hide.png) repeat-y;
}

#header.header-show {
    background: url(../../images/common/bg_header_main_show.png) repeat-y;
}

#container {
    position: relative;
    width: 100%; max-width: 2560px;
    max-height: 1200px;
}

.no-script#container {
    max-width: 1260px;
}

.default#container {
    min-width: 1260px;
}

#main-visual {
    position: absolute; top: 0; left: 0;
    width: 100%; max-width: 1860px;
    background: #09c;
}

#main-visual .main-text {
    position: absolute; top: 7%; left: 20%;
}

#btn-control {
    position: absolute; top: 40px; right: 40px;
    height: 60px;
}

#btn-control li {
    float: left;
}

#btn-control li a {
    display: block;
    width: 59px; height: 60px;
    background: url(../../images/main/img_control.png) no-repeat 100% 0;
}

#btn-control li a:hover,
#btn-control li a:focus,
#btn-control li a:active {
    width: 60px;
    margin-left: -1px;
}

#btn-control li:first-child a {
    width: 60px;
}

#btn-control li a#bc-prev {
    background-position: 100% 0;
}

#btn-control li a#bc-prev:hover,
#btn-control li a#bc-prev:focus,
#btn-control li a#bc-prev:active {
    background-position: 100% -70px;
}

#btn-control li a#bc-stop {
    background-position: 100% -140px;
}

#btn-control li a#bc-stop:hover,
#btn-control li a#bc-stop:focus,
#btn-control li a#bc-stop:active {
    background-position: 100% -210px;
}

#btn-control li a#bc-play {
    background-position: 100% -280px;
}

#btn-control li a#bc-play:hover,
#btn-control li a#bc-play:focus,
#btn-control li a#bc-play:active {
    background-position: 100% -350px;
}

#btn-control li a#bc-next {
    background-position: 100% -420px;
}

#btn-control li a#bc-next:hover,
#btn-control li a#bc-next:focus,
#btn-control li a#bc-next:active {
    background-position: 100% -490px;
}

#btn-control li a#bc-play.bc-hide,
#btn-control li a#bc-stop.bc-hide{
    display: none;
    width: 0; height: 0;
}

.no-script #main-visual {
    height:720px;
}

.middle #main-visual {
    height: 960px; min-height: 960px;
}

.wide #main-visual {
     height: 100%; min-height: 960px; max-height: 1300px;
}

/*
#main-visual img {
    display: block;width: 100%; height: 100%;
    position: absolute; top:0; left:0; right:0; bottom:0;
}*/

/* ----------------------------------------------- */
/*                  #main-contents                 */
/* ----------------------------------------------- */

#main-contents {
    position: absolute; right: 0;
    height: 320px;
    z-index: 100;
    background: #cad2d7;
}

.no-script #main-contents {
    top: 720px; /* visual height*/
}

.default #main-contents {
    left: 170px;
}

.middle #main-contents {
    right: 0;
    width: 400px; min-height: 320px;
}

.wide #main-contents {
    right: 300px;
    width: 400px; min-height: 960px; max-height: 1300px;
}

#main-contents .mc-box {
    position: relative;
    min-height: 320px;
}

.default #main-contents .mc-box {
    float: left;
    width: 25.3%;
    padding: 0 4%;
}

.default #m-company.mc-box {
    width: 25.15%;
}

.middle .mc-box,
.wide .mc-box {
    width:80%;
    padding:0 10%;
}

.mc-box h3 {
    height: 30px;
    color: #000;
    font-size: 18px; font-weight: normal; line-height: 28px;
}

.mc-box .btn-more {
    position: absolute; top:33px; right: 10%;
    display: block;
    width: 42px;
    padding: 2px 0 5px 22px;
    border: 1px solid #8e99a0; border-radius: 3px;
    background: url(../../images/main/img_main.png) no-repeat 9px -240px;
    color: #788084;
    font-size: 12px; font-weight: bold;
    letter-spacing: -1px;
    text-decoration: none;
}

.mc-box .btn-more:hover,
.mc-box .btn-more:focus,
.mc-box .btn-more:active {
    background:#8e99a0 url(../../images/main/img_main.png) no-repeat 9px -270px;
    color: #fff;
}

@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .mc-box .btn-more {
        padding: 2px 0 3px 22px;
        line-height: 21px;
    }
}

#m-notice {
    background: #fff;
}

#m-notice > h3,
#m-company > h3{
    padding: 30px 0 14px;
}

#m-notice > ul {
    margin-top: 14px;
}

#m-notice li {
    position: relative;
    font-size: 12px; line-height: 26px;
}

#m-notice li a {
    display: block;
    width: 72%; height: 26px;
    text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;
    overflow: hidden;
}

#m-notice li span {
    display: block;
    position: absolute; top: 0; right: 0;
    color: #777
}

#m-notice img {
    max-width: 100%;
}

#m-link {
    background: #e2e8e9;
}

#m-link > div {
    position: relative;
    height: 86px;
    padding-top: 16px;
    background: url(../../images/main/line_dot.gif) repeat-x 0 100%;
}

#m-link h3 {
    padding-left: 27px;
    background: url(../../images/main/img_main.png) no-repeat 0 -300px;
    line-height: 26px;
}

#m-link p {
    color: #727578;
    font-size: 12px; line-height: 18px;
}

#m-link a {
    display: block;
    height: 70px;
    background: url(../../images/main/img_main.png) no-repeat 100% 0;
    text-decoration: none;
    cursor: pointer;
}

#m-shqe {
    top: 3%;
}
#m-shqe a {
    background-position: 100% 0;
}

#m-qna {
    top: 3%;
}

#m-qna a {
    background-position: 100% -80px;
}

#m-history {
    top: 3%;
}

#m-link #m-history {
    background: none;
}

#m-history a {
    background-position: 100% -160px;
}

#m-company {
    background: #cad2d7;
}


#m-company li {
    padding: 10px 0;
    background: url(../../images/main/line_dot.gif) repeat-x 0 0;
    line-height: 18px;
}

#m-company li:first-child {
    padding: 0 0 12px 32px;
    background: url(../../images/main/img_main.png) no-repeat 0 -340px;
    color: #820000;
    font-size: 28px; font-weight:400; line-height:30px;
}

#m-company p {
    margin-top: 10px; padding-top: 6px;
    border-top: 3px double #b1bcc3;
    font-size: 12px;
}

#m-company p strong {
    letter-spacing: -1px;
}

/* ----------------------------------------------- */
/*                  #side-business                 */
/* ----------------------------------------------- */

#side-business {
    position: absolute; right: 0;
    height: 200px; min-height: 192px;
    z-index: 100;
}

.no-script #side-business {
    top: 1040px; /* visual + contents height*/
}

.default #side-business {
    left: 170px;
}

.middle #side-business {
    left: 170px; right: 0; top: 900px;
}

.wide #side-business {
    width: 300px; min-height: 960px; max-height: 1300px;
}

#side-business .sb-box {
    float: left;
    width: 20%; min-height: 192px;
}

.wide #side-business .sb-box {
    float: none;
    width: 100%;
}

.default #sb-customer.sb-box,
.middle #sb-customer.sb-box {
    width: 19.85%;
}