/* ----------------------------------------------------------------
	common style
---------------------------------------------------------------- */
* {
    font-family: "Montserrat", "Noto Sans KR", "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

html {
    font-size: 62.5%;
    /* 1rem = 10px */
}
@media only screen and (max-width: 1280px) {
    html { font-size: 52%; }
}
@media only screen and (max-width: 1024px) {
    html { font-size: 49%; }
}
@media only screen and (max-width: 640px) {
    html { font-size: 42%; }
}
@media only screen and (max-width: 325px) {
    html { font-size: 36%; }
}

body {
    width: 100%;
    min-height: 100%;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1.42857143em;
    color: #111;
    letter-spacing: -0.04rem;
    overflow-x: hidden;
}

b {
    font-weight: 700;
}

input, select, textarea {
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

input::-moz-placeholder {
    font-weight: 300;
    color: #999;
}
input::-webkit-input-placeholder {
    font-weight: 300;
    color: #999;
}
input:-ms-input-placeholder {
    font-weight: 300;
    color: #999;
}
input::placeholder {
    font-weight: 300;
    color: #999;
}

select {
    background: #fff url("https://contents.kpcasp.com/static/loopcard/images/select_arrow.svg") no-repeat right 1.5em center;
    color: #666;
    -webkit-background-size: 1em;
    -moz-background-size: 1em;
    background-size: 1em;
}

select:focus,
select:active {
    color: #222;
}

select::-ms-expand {
    display: none;
}

::selection {
    background: #f15a22;
    color: #fff;
}
/* ----------------------------------------------------------------
	layout style
---------------------------------------------------------------- */
#wrap {
    position: absolute;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

.inner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
}

.inner-sm {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}

@media only screen and (max-width: 1440px) {
    *[class*="inner"] {
        margin: 0 3.5em;
    }
}
@media only screen and (max-width: 768px) {
    *[class*="inner"] {
        margin: 0 25px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    text-indent: -9999px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.break {
    display: block;
}

.break-lg {
    display: block;
}
@media only screen and (max-width: 768px) {
    .break-lg {
        display: inline;
    }
}

.break-sm {
    display: inline;
}
@media only screen and (max-width: 768px) {
    .break-sm {
        display: block;
    }
}

.visible-lg {
    display: block;
}
@media only screen and (max-width: 1024px) {
    .visible-lg {
        display: none !important;
    }
}

.visible-md {
    display: none !important;
}
@media only screen and (max-width: 1024px) {
    .visible-md {
        display: block !important;
    }
}

/* align */
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* color */
.text-white {
    color: #fff !important;
}

.text-orange {
    color: #f15a22 !important;
}

/* button */
.btn {
    display: inline-block;
    padding: 1.125em;
    border: 1px solid transparent;
    font-size: 2.4rem;
    font-weight: 700;
    text-align: center;
    line-height: 3.4rem;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
@media only screen and (max-width: 640px) {
    .btn {
        padding: 1em;
    }
}

.btn:hover {
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}

.btn-orange {
    border: 1px solid #f15a22;
    background: #f15a22;
    color: #fff;
}

.btn-orange:focus,
.btn-orange:hover {
    border-color: #ff5d1c;
    background: #ff5d1c;
}

.btn-block {
    width: 100%;
}

.btn-group {
    margin-top: 4.375em;
}
@media only screen and (max-width: 640px) {
    .btn-group {
        margin-top: 3em;
    }
}

/* arrow */
.arrow {
    display: inline-block;
    vertical-align: middle;
    border-width: 0 3px 3px 0;
    border-style: solid;
    border-color: #111;
}

.arrow-lg {
    padding: 1.4rem;
}

.arrow-sm {
    padding: 0.8rem;
}

.arrow-gray {
    border-color: #666;
}

.arrow.right {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.arrow.left {
    -webkit-transform: rotate(-225deg);
    -moz-transform: rotate(-225deg);
    -ms-transform: rotate(-225deg);
    -o-transform: rotate(-225deg);
    transform: rotate(-225deg);
}

.arrow.top {
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.arrow.bottom {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* icon */
.ico {
    display: inline-block;
    vertical-align: middle;
    text-indent: -9999px;
    overflow: hidden;
    background-repeat: no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
}

/* clearfix */
.inner:after,
.row:after,
.step-wrap:after,
.brand-arrow:after,
.form-row:after {
    content: '';
    display: block;
    clear: both;
}
/* ----------------------------------------------------------------
	col
---------------------------------------------------------------- */
*[class*="col-"] {
    float: left;
    position: relative;
}

.col-lg-12 { width: 100%; }
.col-lg-11 { width: 91.66666666666666%; }
.col-lg-10 { width: 83.33333333333334%; }
.col-lg-9 { width: 75%; }
.col-lg-8 { width: 66.66666666666666%; }
.col-lg-7 { width: 58.333333333333336%; }
.col-lg-6 { width: 50%; }
.col-lg-5 { width: 41.66666666666667%; }
.col-lg-4 { width: 33.33333333333333%; }
.col-lg-3 { width: 25%; }
.col-lg-2 { width: 16.666666666666664%; }
.col-lg-1 { width: 8.333333333333332%; }

@media only screen and (max-width: 1024px) {
    .col-md-12 { width: 100%; }
    .col-md-6 { width: 50%; }
}

@media only screen and (max-width: 768px) {
    .col-sm-12 { width: 100%;}
    .col-sm-11 { width: 91.66666666666666%;}
    .col-sm-10 { width: 83.33333333333334%;}
    .col-sm-9 { width: 75%;}
    .col-sm-8 { width: 66.66666666666666%;}
    .col-sm-7 { width: 58.333333333333336%;}
    .col-sm-6 { width: 50%;}
    .col-sm-5 { width: 41.66666666666667%;}
    .col-sm-4 { width: 33.33333333333333%;}
    .col-sm-3 { width: 25%;}
    .col-sm-2 { width: 16.666666666666664%;}
    .col-sm-1 { width: 8.333333333333332%;}
}
/* ----------------------------------------------------------------
	flex style
---------------------------------------------------------------- */
.flex-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
}

.flex-wrap .img img {
    width: 43em;
}

.flex-wrap .txt {
    padding-left: 6em;
}

@media only screen and (max-width: 1024px) {
    .flex-wrap {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .flex-wrap .img {
        text-align: center;
    }

    .flex-wrap .txt {
        padding: 0;
    }
}
/* ----------------------------------------------------------------
	form style
---------------------------------------------------------------- */
.form-control {
    border: 1px solid #e1e1e1;
    padding: 0.9em 1.5em;
    width: 100%;
    height: 4em;
    font-size: 2rem;
    -webkit-transition: .2s ease;
    -moz-transition: .2s ease;
    -ms-transition: .2s ease;
    -o-transition: .2s ease;
    transition: .2s ease;
}

.form-control:focus,
.form-control:active {
    border: 1px solid #000;
}

.form-wrap {
    margin: 3.75em 0;
}

.form-group {
    position: relative;
    margin: 2.5em 0;
}

.form-group .form-tit {
    display: block;
    margin-bottom: 1em;
    font-size: 2rem;
    font-weight: 500;
}
@media only screen and (max-width: 768px) {
    .form-group .form-tit {
        font-size: 2.2rem;
    }
}

.form-row {
    margin-left: -1.25em;
    margin-right: -1.25em;
}

.form-row *[class*="col-"] {
    padding: 0 1.25em;
}

@media only screen and (max-width: 1024px) {
    .form-row .col-md-12 + .col-md-12 {
        margin-top: 2.5em;
    }
}
/* ----------------------------------------------------------------
    header
---------------------------------------------------------------- */
header {
    position: fixed;
    width: 100%;
    padding: 2.2em 0;
    z-index: 1000;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
    transition: 0.3s ease;
}

header.fixed {
    border-bottom: 1px solid #cfcfcf;
    background: #fff;
}

@media only screen and (max-width: 768px) {
    header {
        padding: 25px 0;
    }

    header h1 {
        float: left;
    }
}

.logo {
    display: block;
    width: 11.5em;
    height: 1.25em;
    text-indent: -9999px;
    overflow: hidden;
    background: url("https://contents.kpcasp.com/static/loopcard/images/logo.svg") no-repeat;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    background-size: 100%;
}

/* ----------------------------------------------------------------
    map
---------------------------------------------------------------- */
.locationArea{padding:0px; background: #fafafa;}
.locationArea .titleType1{text-align:center;line-height:32px;font-size:19px;font-weight:700;}
.locationArea .textType1{text-align:center;font-size:14px;line-height:18px;letter-spacing:-0.02em;padding-bottom: 30px;}
.locationArea .textType1 .mobBr{display:block;line-height:18px;font-size:14px;font-weight:400;}
.locationArea .mapArea{width:100%;height:800px;overflow:hidden;}

/* ----------------------------------------------------------------
    footer
---------------------------------------------------------------- */
footer {
    padding: 4.5em 0;
    background: #111;
    font-size: 2rem;
    color: #999;
}

footer h2 {
    font-size: 2.4rem;
    color: #fff;
}

.company {
    padding: 1em 0 1.5em;
}

.company p {
    margin: 1em 0;
}

.company b,
.company em {
    display: inline-block;
    vertical-align: middle;
}

.company b {
    width: 5.2em;
}

.company em {
    min-width: 5em;
}

.company .row {
    margin-left: -1.5em;
    margin-right: -1.5em;
}

.company *[class*="col"] {
    padding: 0 1.5em;
}

@media only screen and (max-width: 768px) {
    .company .row {
        margin-left: 0;
        margin-right: 0;
    }

    .company *[class*="col"] {
        padding: 0;
    }
}

.company a {
    font-weight: 500;
    color: #fff;
}

.link {
    position: absolute;
    top: -0.1em;
    right: 0;
}
@media only screen and (max-width: 768px) {
    .link {
        position: static;
    }
}

.link a {
    font-weight: 700;
}
@media only screen and (max-width: 768px) {
    .link a {
        font-weight: 400;
    }
}

.link a + a {
    margin-left: 2em;
}

.sns {
    float: right;
    margin-top: -4.8em;
}
@media only screen and (max-width: 768px) {
    .sns {
        float: none;
        margin: 2em 0;
    }
}

.sns a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
.sns a:hover {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
}

.sns a + a {
    margin-left: 1em;
}

.sns i {
    width: 4.8rem;
    height: 4.8rem;
}

.sns .ico-insta { background-image: url("https://contents.kpcasp.com/static/loopcard/images/ico_insta.svg"); }
.sns .ico-facebook { background-image: url("https://contents.kpcasp.com/static/loopcard/images/ico_facebook.svg"); }
.sns .ico-blog { background-image: url("https://contents.kpcasp.com/static/loopcard/images/ico_blog.svg"); }

/* go kakao */
.go-kakao {
    position: fixed;
    right: 3.2em;
    bottom: 2.4em;
    z-index: 1000;
    padding: 0.95em 1.154em 0.78em;
    background: #f15a22;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    -webkit-box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.16);
    -moz-box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.16);
}
@media only screen and (max-width: 1024px) {
    .go-kakao {
        right: 20px;
        bottom: 30px;
    }
}
@media only screen and (max-width: 640px) {
    .go-kakao {
        padding: 1.2em 1.154em 1.08em;
    }
}

.go-kakao:hover {
    background: #ff5d1c;
}

.go-kakao .ico-kakao {
    width: 1.2em;
    height: 1.119em;
    margin-top: -0.2em;
    background-image: url("https://contents.kpcasp.com/static/loopcard/images/ico_kakao.svg");
}

.go-kakao span {
    margin-left: 0.5em;
}

.go-kakao.active {
    width: 3em;
    height: 3em;
    padding: 0;
    line-height: 3em;
    text-align: center;
}

.go-kakao.active span {
    display: none;
}
/* ----------------------------------------------------------------
	title
---------------------------------------------------------------- */
/* heading main */
.heading-main h2 {
    margin: 0.366em 0;
    font-size: 8.2rem;
    line-height: 10rem;
}

.heading-main b {
    font-size: 2.6rem;
    font-weight: 600;
}

.heading-main p {
    margin-bottom: 1.4em;
    font-size: 3.2rem;
    line-height: 3.5rem;
}
@media only screen and (max-width: 640px) {
    .heading-main h2 {
        font-size: 6rem;
        line-height: 7.5rem;
    }

    .heading-main p {
        font-size: 2.5rem;
    }
}

/* heading sub */
.heading-sub {
    position: relative;
}

.heading-sub.text-center {
    padding: 0 0 4em;
}

.heading-sub h2 {
    margin-bottom: 0.78em;
    font-size: 6.4rem;
    font-weight: 300;
    line-height: 7.8rem;
    letter-spacing: -0.2rem;
}
.heading-sub.text-center h2 {
    margin-bottom: 0.45em;
}
.heading-sub h2.large {
    margin-bottom: 0.65em;
    font-size: 12rem;
    line-height: 14rem;
}
.heading-sub h2.medium {
    margin-bottom: 0.3em;
    font-size: 8.4rem;
    line-height: 9rem;
}

.heading-sub p {
    font-size: 2.4rem;
    line-height: 4rem;
    letter-spacing: -0.15rem;
}
.heading-sub p.large {
    font-size: 5rem;
    line-height: 7rem;
}
.heading-sub.text-white p {
    color: #f9fafb;
}

@media only screen and (max-width: 640px) {
    .heading-sub h2 {
        font-size: 4.5rem;
        line-height: 5.8rem;
    }
    .heading-sub h2.large {
        font-size: 8rem;
        line-height: 9rem;
    }
    .heading-sub h2.medium {
        font-size: 6.5rem;
        line-height: 7rem;
    }

    .heading-sub p.large {
        font-size: 4rem;
        line-height: 5.5rem;
    }
}

/* line-title */
.line-title {
    display: block;
    margin-bottom: 1em;
    font-size: 2rem !important;
    font-weight: 700;
    line-height: 5.5rem;
}

.line-title:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 8em;
    height: 1px;
    margin-left: 1em;
    background: #111;
}

.line-title.white {
    color: #fff;
}

.line-title.white:after {
    background: #fff;
}

.line-title.orange {
    color: #f15a22;
}

.line-title.orange:after {
    background: #f15a22;
}

/* s-title */
.s-title h2 {
    font-size: 4rem;
    font-weight: 300;
    line-height: 5.6rem;
    letter-spacing: -0.18rem;
}

.s-title p {
    margin-top: 1em;
    font-size: 2rem;
    line-height: 3rem;
}
/* ----------------------------------------------------------------
	main visual
---------------------------------------------------------------- */
.main-visual {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.main-visual video {
    position: absolute;
    left: 50%;
    top: 50%;
    min-width: 100%;
    min-height: 100%;
    z-index: -2;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.main-visual:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
}

.main-visual .text-wrap {
    max-width: 1440px;
    height: inherit;
    margin: 0 auto;
}

.main-visual .heading-main {
    position: relative;
    top: 49%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
@media only screen and (max-width: 1440px) {
    .main-visual .heading-main {
        margin-left: 3.5em;
    }
}
@media only screen and (max-width: 768px) {
    .main-visual .heading-main {
        margin-left: 25px;
    }
}
/* ----------------------------------------------------------------
	brand logo
---------------------------------------------------------------- */
.b-logo.sm {
    height: 4.25em;
}
@media only screen and (max-width: 640px) {
    .b-logo.sm {
        height: 3.25em;
    }
}

.b-logo.lg {
    height: 7.5em;
}
@media only screen and (max-width: 640px) {
    .b-logo.lg {
        height: 4.5em;
    }
}
/* ----------------------------------------------------------------
	container
---------------------------------------------------------------- */
section[class*="section"]:not(.map-section) {
    position: relative;
    padding: 11em 0 6em;
}
@media only screen and (max-width: 640px) {
    section[class*="section"]:not(.map-section) {
        padding: 4em 0;
    }
}

.section2 .flex-wrap,
.section4 .flex-wrap {
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

*[class*="section"] .visible-md p {
    margin-top: 2em;
    font-size: 2.4rem;
    line-height: 4rem;
    letter-spacing: -0.15rem;
}

/* section1 */
.section1 .heading-sub {
    padding: 3.5em 0 9em;
}
@media only screen and (max-width: 640px) {
    .section1 .heading-sub {
        padding-bottom: 6em;
    }
}

.text-slider {
    margin: 0 -2.188em;
}

.text-slider .slick-list {
    overflow: visible;
}

.text-slider dl {
    padding: 0 2.188em;
    letter-spacing: -0.15rem;
    white-space: nowrap;
}

.text-slider dt {
    margin-bottom: 1em;
    font-size: 4rem;
    line-height: 5.6rem;
}
@media only screen and (max-width: 640px) {
    .text-slider dt {
        font-size: 3.2rem;
        line-height: 4.3rem;
    }
}

.text-slider dd {
    font-size: 2.4rem;
    line-height: 4rem;
}
@media only screen and (max-width: 640px) {
    .text-slider dd {
        font-size: 2.1rem;
        line-height: 3.6rem;
    }
}

/* section3 */
.section3 {
    background: #f9fafb;
}

/* section5 */
.section5 {
    background: #333;
}

.step-wrap {
    margin: 0 -2.34em;
}

.step-wrap .item {
    padding: 1em 2.34em 2em;
    color: #fff;
    text-align: center;
}
@media only screen and (max-width: 768px) {
    .step-wrap .item {
        padding-bottom: 3em;
    }
}

.step-wrap b {
    display: block;
    margin: 2.083em 0 0.833em;
    font-size: 2.4rem;
}

.step-wrap p {
    font-size: 3rem;
    line-height: 4.4rem;
}

@media only screen and (max-width: 640px) {
    .section5 .heading-sub {
        text-align: left !important;
    }

    .step-wrap img {
        max-width: 19.997em;
    }
}

/* section6 */
.section6:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 17em;
    background: #f9fafb;
}

/* section7 */
.video-area {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    margin: 0 auto;
}

.video-area .video-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: url('https://contents.kpcasp.com/static/loopcard/images/sec7_video_cover.png') no-repeat center top;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}

.video-area iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* section8 */
.box-slider-wrap {
    margin-left: -1.25em;
    margin-right: -100%;
}

.box-slider li {
    padding: 2.8em 1.25em 4.5em;
}

.box-slider .box {
    position: relative;
    width: 30em;
    height: 21.25em;
    padding: 2.5em;
    background: #fff;
    -webkit-border-radius: 1.25em;
    -moz-border-radius: 1.25em;
    border-radius: 1.25em;
    -webkit-box-shadow: 0 0.9em 1.45em rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0.9em 1.45em rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.9em 1.45em rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 640px) {
    .box-slider .box {
        width: 26em;
    }
}

.box-slider .box p {
    font-size: 2.2rem;
    line-height: 3.6rem;
    letter-spacing: -0.15rem;
}

.box .info {
    position: absolute;
    left: 2.5em;
    right: 2.5em;
    bottom: 2.5em;
}

.info .txt {
    display: block;
}

.info .brand-info {
    font-size: 1.4rem;
    font-weight: 400;
    color: #999;
}

.info .brand {
    margin-top: 0.2em;
    font-size: 1.8rem;
}

.info .b-logo {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.box-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
}
@media only screen and (max-width: 640px) {
    .box-arrow {
        display: none;
    }
}

.box-arrow button {
    padding: 1em;
    text-align: center;
    opacity: 0.2;
}

.box-arrow button:hover {
    opacity: 1;
    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

.box-arrow button + button {
    margin-left: 2.4em;
}

.box-arrow .prev {
    padding: 1em 0 1em 1.4em
}

.box-arrow .next {
    padding: 1em 1.4em 1em 0;
}

/* section9 */
.section9 {
    background: #f9fafb;
}

.brand-slider-wrap {
    margin: -5em 0 3em;
}

.brand-slider *[class*="col-"] {
    padding: 3em 1em;
}

.brand-arrow {
    margin: 3em -2.5em;
}
@media only screen and (max-width: 1024px) {
    .brand-arrow {
        margin: 3.5em 2.5em;
    }
}

.brand-arrow button {
    padding: 0.2em;
    font-size: 3.6rem;
    font-weight: 700;
    color: #666;
}
@media only screen and (max-width: 640px) {
    .brand-arrow button {
        font-size: 2.8rem;
    }
}

.brand-arrow .arrow {
    margin: -0.15em 0.2em 0;
}

/* section10 */
.contact-wrap {
    display: table;
    width: 100%;
}

.contact-wrap > * {
    display: table-cell;
    position: relative;
    vertical-align: top;
}

.contact-wrap .left-area {
    width: 18em;
}

.left-area .h-rotate {
    position: absolute;
    left: 10.313em;
    white-space: nowrap;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
}

.map-area {
    width: 100%;
    height: 50em;
    background: #eee;
}
@media only screen and (max-width: 640px) {
    .map-area {
        height: 38em;
    }
}