﻿.help-tit {
    padding: 50px;
    margin-top: 50px;
}

    .help-tit h1 {
        font-size: 22px;
        font-weight: 700;
        line-height: 40px;
        text-align: center;
    }

    .help-tit div {
        font-size: 15px;
        text-align: center;
        line-height: 20px;
    }

.help-contents {
    margin: 30px;
    background: #ffffff;
    border: 1px solid #dde4eb;
    box-shadow: 0 2px #dde4eb;
    position: relative;
    display: flex;
    flex-direction: column;
}

ul, li {
    list-style: none
}

.tab {
    display: flex;
    justify-content: center;
    top: -50px;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

    .tab li {
        width: 290px;
        cursor: pointer;
        margin:0 3px;
    }

        .tab li a {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center
        }

.help-contents .con_wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top:-25px;
}
.con_wrap .wrap.contact {
    margin-top:0;
}
.con_wrap div.content {
    width: 80%;
    text-align: center;
}

    .con_wrap div.content:nth-child(2) {
        display: none;
    }

    .con_wrap div.content:nth-child(3) {
        display: none;
    }
    .con_wrap div.content:nth-child(4) {
        display: none;
    }

.con_wrap .title {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 30px;
}

.con_wrap .wrap {
    display: flex;
    justify-content: center;
    text-align: left;
    flex-wrap: wrap;
    margin-top:-25px;
}

.con_wrap .box {
    width: 330px;
    margin: 30px 30px 60px 30px;
}

.info .box {
    width: 450px;
    margin: 20px 20px 0 20px;
}

a#manual-01 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-01.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}
a#manual-01:hover {
    background: url('/Content/Images/manual-01.gif') no-repeat;
}
a#manual-02 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-02.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}
a#manual-02:hover {
    background: url('/Content/Images/manual-02.gif') no-repeat;
}
a#manual-03 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-03.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}
a#manual-03:hover {
    background: url('/Content/Images/manual-03.gif') no-repeat;
}
a#manual-04 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-04.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}
a#manual-04:hover {
    background: url('/Content/Images/manual-04.gif') no-repeat;
}
a#manual-05 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-05.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-05:hover {
    background: url('/Content/Images/manual-05.gif') no-repeat;
}
a#manual-06 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-06.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-06:hover {
    background: url('/Content/Images/manual-06.gif') no-repeat;
}
a#manual-07 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-07.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-07:hover {
    background: url('/Content/Images/manual-07.gif') no-repeat;
}
a#manual-08 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-08.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-08:hover {
    background: url('/Content/Images/manual-08.gif') no-repeat;
}
a#manual-09 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-09.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-09:hover {
    background: url('/Content/Images/manual-09.gif') no-repeat;
}

a#manual-10 {
    display: inline-block;
    width: 300px;
    height: 171px;
    background: url('/Content/Images/manual-10.png') no-repeat;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px 3px #f3f3f3;
    border-radius: 8px;
}

a#manual-10:hover {
    background: url('/Content/Images/manual-10.gif') no-repeat;
}

.box div {
    display: flex;
}
    .box div p:nth-child(1) {
        padding-right: 15px;
    }
    .box div p img {
        width:30px;
    }

.info {
    padding-bottom: 150px;
}
.contact {
    align-items: center;
    padding-bottom:80px;
}
.contact div:nth-child(1) {
    width: 610px;
    
}
    .contact div:nth-child(2) p {
        line-height: 29px;
        font-size: 14px;
    }
.box .name {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}

.box .description {
    font-size: 13px;
    font-weight: 500;
    color: #777;
    line-height: 17px;
    padding: 5px 0;
}

.gray {
    background: url(/Content/Images/button-graybg.png) repeat-x center;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
}

.gray2 {
    background: url(/Content/Images/button-graybg2.png) repeat-x center;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
}

.gray3 {
    background: url(/Content/Images/button-graybg3.png) repeat-x center;
    text-align: center;
    padding: 8px;
    border-radius: 2px;
}

.gray:hover,
.gray2:hover,
.gray3:hover {
    background: #000;
}

    .gray a,
    .gray2 a,
    .gray3 a {
        color: #fff;
        width: 100%;
    }

.gray a:hover,
.gray2 a:hover,
.gray3 a:hover {
    color: #05abf2;
}
.help-phone {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5IDEuMzIybDIuODQ0LTEuMzIyIDQuMDQxIDcuODg5LTIuNzI0IDEuMzQyYy0uNTM4IDEuMjU5IDIuMTU5IDYuMjg5IDMuMjk3IDYuMzcyLjA5LS4wNTggMi42NzEtMS4zMjggMi42NzEtMS4zMjhsNC4xMSA3LjkzMnMtMi43NjQgMS4zNTQtMi44NTQgMS4zOTZjLS42MDQuMjc2LTEuMjI4LjQwMi0xLjg2Mi4zOTctNS42NzgtLjA0My0xMi4xNDMtMTAuNTY0LTEyLjExMy0xNy40NTQuMDExLTIuMzUxLjc3Ny00LjI3OSAyLjU5LTUuMjI0em0xLjkzIDEuMjc0bC0xLjAyMy41MDRjLTUuMjk0IDIuNzYyIDQuMTc3IDIxLjE4NSA5LjY0OCAxOC42ODZsLjk3Mi0uNDc0LTIuMjcxLTQuMzgzLTEuMDI2LjUwMWMtMy4xNjMgMS41NDctOC4yNjItOC4yMTktNS4wNTUtOS45MzhsMS4wMDctLjQ5OC0yLjI1Mi00LjM5OHptOC45OCA2LjQwNGMuODI4IDAgMS41LjY3MiAxLjUgMS41cy0uNjcyIDEuNS0xLjUgMS41LTEuNS0uNjcyLTEuNS0xLjUuNjcyLTEuNSAxLjUtMS41em05IDBjLjgyOCAwIDEuNS42NzIgMS41IDEuNXMtLjY3MiAxLjUtMS41IDEuNS0xLjUtLjY3Mi0xLjUtMS41LjY3Mi0xLjUgMS41LTEuNXptLTQuNSAwYy44MjggMCAxLjUuNjcyIDEuNSAxLjVzLS42NzIgMS41LTEuNSAxLjUtMS41LS42NzItMS41LTEuNS42NzItMS41IDEuNS0xLjV6Ii8+PC9zdmc+) center left no-repeat;
    background-size: 17px;
    padding-left:20px;
}
.help-fax {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTMuNjkzIDEwLjgxMmwxLjMwNiAyLjQ1Mi0uOTI4LjQ5MmMtMi41MDYgMS4yMzgtNi43ODMtNi43NzEtNC4zNDYtOC4xNDFsLjkzNi0uNDk5IDEuMzA3IDIuNDU1LS45MjYuNDkzYy0uNzM0LjQyNy45NzQgMy42MzMgMS43MjcgMy4yMzhsLjkyNC0uNDl6bTEwLjMwNy4xODh2MTJoLTI0di0xMmg0di0xMGgxMC4zMjhjMS41MzggMCA1LjY3MiA0Ljg1MiA1LjY3MiA2LjAzMXYzLjk2OWg0em0tMTggNWgxMnYtOC4zOTZjMC0xLjMzOC0yLjI4MS0xLjQ5NC0zLjI1LTEuMjI5LjQ1My0uODEzLjMwNS0zLjM3NS0xLjA4Mi0zLjM3NWgtNy42Njh2MTN6bTE2LTNoLTJ2NWgtMTZ2LTVoLTJ2OGgyMHYtOHoiLz48L3N2Zz4=) center left no-repeat;
    background-size: 17px;
    padding-left: 20px;
}