@charset "utf-8";


@import url('https://fonts.font.im/css?family=Roboto+Condensed');


#merchant{margin: 0 auto;}
#merchant .profile{margin: 0 auto; padding: 110px 0;}
#merchant .profile .title{ width: 30%; text-align: left;}
#merchant .profile .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#merchant .profile .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#merchant .profile .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#merchant .profile .content{ width: 55%;text-align: left;}
#merchant .profile .content>.process{ padding-top: 50px;}
#merchant .profile .content>.process>.theme{font-size: 3rem; font-weight: bold; color: #000;}
#merchant .profile .content>.process>.items{ position: relative; text-align: center; padding: 40px 0;}
#merchant .profile .content>.process>.items>.line{ position: absolute;z-index: 10; left: 0; bottom: 10px; width: 100%;height: 2px; background: #002fa7;  background: linear-gradient(to right, #4f8ef9, #002fa7);}
#merchant .profile .content>.process>.items>.row{ position: relative; z-index: 20; display: block; float: left;width: 16.66%;}
#merchant .profile .content>.process>.items>.row:nth-child(2), #merchant .profile .content>.process>.items>.row:last-child{ width: 16.66%;}
#merchant .profile .content>.process>.items>.row>.ico{ text-align: center; transition: all .35s;}
#merchant .profile .content>.process>.items>.row>.ico>img{filter: grayscale(100%); opacity: .6; transition: all .36s;}
#merchant .profile .content>.process>.items>.row>.title{ width: 100%; text-align: center;  padding: 10px 0; font-size: 1.6rem; color: #676767;transition: all .35s;}
#merchant .profile .content>.process>.items>.row>.number{ position: absolute;z-index: 50; left:50%; transform: translateX(-50%); bottom: -42px; width: 30px; height: 30px; line-height: 30px; overflow: hidden; font-size: 2rem; font-family: 'Roboto Condensed', sans-serif; color: #fff; background: #4f8ffa; border-radius: 100%; border: 1px solid #002fa7; text-align: center; transition: all .35s;}
#merchant .profile .content>.process>.items>.row:hover .title{color: #002fa7; transform: translateY(-4px);}
#merchant .profile .content>.process>.items>.row:hover .ico{ transform: translateY(-4px);}
#merchant .profile .content>.process>.items>.row:hover .ico>img{opacity: 1; filter: grayscale(0);}
#merchant .profile .content>.conditions{ border-bottom: 1px solid #ddd; padding-bottom: 30px;}
#merchant .profile .content>.conditions>.theme{font-size: 3rem; font-weight: bold; color: #000;}
#merchant .profile .content>.conditions>.box{ text-align: left; padding: 20px 0;}
#merchant .profile .content>.conditions>.box>.row{display: block;position: relative; box-sizing: border-box;padding:5px 16px;font-size: 1.6rem; color: #676767; }
#merchant .profile .content>.conditions>.box>.row:after{position: absolute; left: 0;top: 12px; width: 8px;height: 8px; border-radius: 100%; background: #002fa7; content:'';}


#merchant .policy{ padding: 100px 0; background: url("../img/merchant_policy_bg.jpg") no-repeat; background-position: 50% 50%; background-attachment: fixed; background-size: cover; margin: 0 auto;}
#merchant .policy .title{font-size: 3rem; color: #fff;}
#merchant .policy .items{margin: 0 auto;padding: 50px 0;}
#merchant .policy .items>.row{display: block; float: left; width: 23.5%;height: 250px; padding: 20px; position: relative; box-sizing: border-box; background: #fff; margin-right: 2%; margin-bottom: 2%; transition: all .5s;}
#merchant .policy .items>.row:after{ position: absolute;z-index: 1; left: 0;bottom: 0;width: 100%;height: 0; background: #002fa7; opacity: 0; content: '';transition: all .35s; }
#merchant .policy .items>.row:nth-child(4n){margin-right: 0;}
#merchant .policy .items>.row>.number{ position: relative;z-index: 20; text-align: left; padding-bottom: 10px;}
#merchant .policy .items>.row>.number>i{ display: inline-block; font-style: normal; font-size: 2.4rem; color: #002fa7;font-family: 'Roboto Condensed', sans-serif; font-weight: 700; border: 3px solid #276ee5; border-radius: 100%; width: 50px; height: 50px; line-height: 44px; overflow: hidden; text-align: center; transition: all .35s;}
#merchant .policy .items>.row>.title{position: relative;z-index: 20; padding: 10px 16px; font-size: 2.2rem;color: #000; transition: all .35s;}
#merchant .policy .items>.row>.text{position: relative;z-index: 20; padding: 0 16px; font-size: 1.6rem; line-height: 3rem; color: #676767; transition: all .35s;}
#merchant .policy .items>.row>.line{position: absolute;z-index: 10; left: 0;bottom: 0;width: 100%;height: 10px; background: #4f8ffa;transition: all .35s;}
#merchant .policy .items>.more{display: none; text-align: center; background: none;}
#merchant .policy .items>.more:after{opacity: 0!important;}
#merchant .policy .items>.more>.con{ font-size: 10rem; color: #4f8ffa;}
#merchant .policy .items>.row:hover:after{height: 100%; opacity: 1;}
#merchant .policy .items>.row:hover .number>i{color: #fff;}
#merchant .policy .items>.row:hover .title{color: #fff;}
#merchant .policy .items>.row:hover .text{color: #fff}

#merchant .other{ padding: 100px 0; margin: 0 auto;}
#merchant .other .title{ font-size: 3rem; color: #000; padding: 30px 0; border-bottom: 1px solid #ccc;}
#merchant .other .guarantee{width: 49%;}
#merchant .other .guarantee>.content{padding: 40px 0; text-align: left;}
#merchant .other .guarantee>.content>.row{display: block; margin-bottom: 22px;}
#merchant .other .guarantee>.content>.row>.number{ padding-top: 5px; width: 40px; float: left;}
#merchant .other .guarantee>.content>.row>.number>i{ display: inline-block; font-style: normal; font-size: 1.8rem; color: #002fa7;font-family: 'Roboto Condensed', sans-serif; font-weight: 700; border: 2px solid #276ee5; border-radius: 100%; width: 24px; height: 24px; line-height: 20px; overflow: hidden; text-align: center; transition: all .35s;}
#merchant .other .guarantee>.content>.row>.box{ float: left; width: 92%; text-align: left;}
#merchant .other .guarantee>.content>.row>.box>h3{ display: block; font-size: 2.2rem; font-weight: 500; color: #000;}
#merchant .other .guarantee>.content>.row>.box>p{display: block; padding: 6px 0; font-size: 1.6rem; color: #676767;}

#merchant .other .area{width: 49%;}
#merchant .other .area>.content{padding: 40px 0; text-align: left;}
#merchant .other .area>.content>.text{font-size: 1.6rem; line-height: 2.8rem; color: #676767;}
#merchant .other .area>.content>.tel{ padding: 40px 0;  color: #000;}
#merchant .other .area>.content>.tel>h3{font-size: 2rem; font-weight: normal;}
#merchant .other .area>.content>.tel>p{ display: block; padding: 5px 0; font-size: 2.2rem; font-weight: 600;}
#merchant .other .area>.content>.img{text-align: right;}
#merchant .other .area>.content>.img>img{width: 100%;height: auto;}



@media only screen and (max-width: 1560px){

    #merchant .profile .content{ width: 60%;}




}

@media only screen and (max-width: 1460px){

    #merchant .policy .items>.row{ height: 240px;}
    #merchant .policy .items>.row>.text {line-height: 2.4rem; }




}

@media only screen and (max-width: 1380px){


    #merchant .profile .title>h3{ font-size: 2.8rem;}
    #merchant .profile .title>p{ font-size: 1.6rem;}
    #merchant .profile .content{ width: 65%;}
    #merchant .profile .content>.process>.theme{font-size: 2.8rem;}
    #merchant .profile .content>.conditions>.theme{font-size: 2.8rem;}
    #merchant .profile .content>.conditions>.box>.row{font-size: 1.5rem; }





    #merchant .policy .title{font-size: 2.8rem;}
    #merchant .policy .items>.row{ padding: 20px;}
    #merchant .policy .items>.row>.number>i{ font-size: 2rem; width: 40px; height: 40px; line-height: 34px;}
    #merchant .policy .items>.row>.title{padding: 10px;}
    #merchant .policy .items>.row>.text{padding: 0 10px;}

    #merchant .other .title{ font-size: 2.8rem;}
    #merchant .other .guarantee>.content>.row>.box>h3{ font-size: 2rem;}



}


@media only screen and (max-width: 1280px){


    #merchant .profile .content>.process>.theme{font-size: 2.6rem;}
    #merchant .profile .content>.conditions>.theme{font-size: 2.6rem;}

    #merchant .policy .items>.row{ width: 32%;}
    #merchant .policy .items>.row:nth-child(4n){margin-right: 2%;}
    #merchant .policy .items>.row:nth-child(3n){margin-right: 0;}
    #merchant .policy .items>.more{display: block;}

}


@media only screen and (max-width: 1080px){

    #merchant .profile .title{ width: 100%;float: none;}
    #merchant .profile .content{ width: 100%; float: none; padding-top: 40px;}

    #merchant .policy .items>.row>.text{ font-size: 1.5rem; line-height: 2rem; }


    #merchant .other .guarantee{width: 100%; float: none;}
    #merchant .other .guarantee>.content>.row>.box>p{font-size: 1.5rem;}

    #merchant .other .area{width: 100%; float: none;}
    #merchant .other .area>.content>.text { font-size: 1.5rem; line-height: 2rem; }





}

@media only screen and (max-width: 960px){


    #merchant .policy .items>.row{ width: 48%; height: 210px; margin-right: 0;}
    #merchant .policy .items>.row:nth-child(4n){margin-right: 0;}
    #merchant .policy .items>.row:nth-child(3n){margin-right: 0;}
    #merchant .policy .items>.row:nth-child(even){float: right;}
    #merchant .policy .items>.more{display: none;}
}

@media only screen and (max-width: 860px){

    #merchant .profile {padding: 80px 0;}

    #merchant .policy{padding: 80px 0;}

    #merchant .other{padding: 80px 0;}



}

@media only screen and (max-width: 780px){


    #merchant .profile .content>.process>.items>.row>.title {font-size: 1.5rem;}


}


@media only screen and (max-width: 640px){


    #merchant .profile .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #merchant .profile .title>p{ font-size: 1.4rem;padding-top: 5px;}

    #merchant .profile .content>.process>.theme{font-size: 2rem;}
    #merchant .profile .content>.process>.items{padding-bottom: 0;margin:  0 auto;}
    #merchant .profile .content>.process>.items>.row{ width: 60%; margin-bottom: 50px;}
    #merchant .profile .content>.process>.items>.row:nth-child(2), #merchant .profile .content>.process>.items>.row:nth-child(4), #merchant .profile .content>.process>.items>.row:nth-child(5), #merchant .profile .content>.process>.items>.row:nth-child(7){ width: 20%;}
    #merchant .profile .content>.process>.items>.row:after{ display: none; position: absolute;z-index: 1; left: 0;bottom: 10px; width: 100%;height: 2px; background: #002fa7; content: '';}
    #merchant .profile .content>.process>.items>.row>.title {font-size: 1.3rem;}
    #merchant .profile .content>.process>.items>.row>.ico>img{ width: 32px;}
    #merchant .profile .content>.process>.items>.row>.number{ position: relative; bottom: 0; width: 25px; height: 25px; line-height: 25px; font-size: 1.6rem;}
    /*#merchant .profile .content>.process>.items>.row:nth-child(5), #merchant .profile .content>.process>.items>.row:nth-child(6), #merchant .profile .content>.process>.items>.row:nth-child(7){margin-top: 20px; margin-bottom: 0; padding-top: 30px;float: right;}*/
    /*#merchant .profile .content>.process>.items>.row:nth-child(5):after, #merchant .profile .content>.process>.items>.row:nth-child(6):after, #merchant .profile .content>.process>.items>.row:nth-child(7):after{bottom: auto; top: 0;}*/
    /*#merchant .profile .content>.process>.items>.row:nth-child(5)>.number, #merchant .profile .content>.process>.items>.row:nth-child(6)>.number, #merchant .profile .content>.process>.items>.row:nth-child(7)>.number{position: absolute; bottom: auto; top: -10px;}*/
    #merchant .profile .content>.process>.items>.line{ display: none; width: 2px; height: 52px; left: auto; right: 0; bottom: 97px; background: linear-gradient(to right, #002fa7, #002fa7);}
    #merchant .profile .content>.conditions>.theme{font-size: 1.8rem;}
    #merchant .profile .content>.conditions>.box>.row{font-size: 1.4rem; line-height: 2.4rem; }



    #merchant .policy .title{font-size: 2rem;}
    #merchant .policy .items { padding: 30px 0;}
    #merchant .policy .items>.row{ float: none; width: 100%; height: auto; padding-bottom: 40px; margin-bottom: 15px;}
    #merchant .policy .items>.row:nth-child(even){ float: none;}
    #merchant .policy .items>.row:last-child{margin-bottom: 0;}
    #merchant .policy .items>.row>.number>i{ font-size: 1.8rem; width: 34px; height: 34px; line-height: 30px;}
    #merchant .policy .items>.row>.title {font-size: 1.8rem;}
    #merchant .policy .items>.row>.text { font-size: 1.4rem; }

    #merchant .other .title{ font-size: 2rem;}
    #merchant .other .guarantee>.content>.row>.number { width: 30px; padding-top: 0;}
    #merchant .other .guarantee>.content>.row>.box{width: 86%;}
    #merchant .other .guarantee>.content>.row>.box>h3{ font-size: 1.8rem;}
    #merchant .other .guarantee>.content>.row>.box>p { font-size: 1.4rem; line-height: 2.4rem;}

    #merchant .other .area>.content>.tel>h3 {font-size: 1.8rem;}
    #merchant .other .area>.content>.tel>p {font-size: 2rem; }



    #merchant .other .title { padding: 10px 0;  }
    #merchant .other .area>.content { padding: 20px 0; }
    #merchant .other .area>.content>.tel {padding: 40px 0 20px 0;}

}


@media only screen and (max-width: 520px){


    #merchant .profile {padding: 50px 0;}
    #merchant .policy {padding: 50px 0;}
    #merchant .other {padding: 50px 0;}


    #merchant .profile .content>.conditions>.box>.row:after{;top: 8px;}




    }