@charset "utf-8";

@import url('https://fonts.font.im/css?family=Anton|Do+Hyeon');




#reception{margin: 0 auto;}
#reception .stock{margin: 0 auto; padding: 110px 0;}
#reception .stock .title{ width: 30%; text-align: left;}
#reception .stock .title>h3{ display: block; position: relative; padding-bottom: 18px; font-size: 3.2rem; font-weight: bold; color: #000;}
#reception .stock .title>h3:after{position: absolute;z-index: 1; left: 0; bottom: 0;width: 40px;height: 4px; background: #002fa7; content: '';}
#reception .stock .title>p{ display: block; padding-top: 10px; font-size: 1.8rem; color: #999;}
#reception .stock .content{ width: 55%;text-align: left;}
#reception .stock .content>.title{width: 100%; font-size: 2.6rem; color: #000;}
#reception .stock .content>.price{ text-align: left;padding: 20px 0; font-size: 3rem; color: #002fa7;}
#reception .stock .content>.price>span{display: inline-block; font-size: 7rem; font-weight: bold; margin-right: 5px;}
#reception .stock .content>.price img{position: relative;margin-top: -4px;}
#reception .stock .content>.transaction{ text-align: left; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 40px 0;}
#reception .stock .content>.transaction>.row{display: block; float: left; width: 20%;}
#reception .stock .content>.transaction>.row h3{ display: block; font-weight: normal; color: #676767; font-size: 1.6rem;}
#reception .stock .content>.transaction>.row p{display: block; font-size: 1.6rem; color: #676767; padding-top: 10px;}
#reception .stock .content>.tips{ padding: 10px 0; font-size: 1.4rem; color: #676767;}
#reception .stock .content>.tips>p{ margin-bottom: 5px;}

#reception .introduce{ background: url("../img/reception_profile_bg.jpg") no-repeat; background-position:  right bottom; background-size: cover; margin: 0 auto; padding: 120px 0;}
#reception .introduce .title{font-size: 3rem; color: #fff;}
#reception .introduce .content{ text-align: left;margin: 0 auto;padding: 10px 0;}
#reception .introduce .content>.text{width: 38%; font-size: 1.6rem; color: #fff; line-height: 2.8rem; margin-bottom: 40px;}

#reception .contact{margin: 0 auto;padding: 100px 0; background: #f2f3f5;}
#reception .contact .title{ font-size: 3rem; color: #000; padding: 30px 0; text-align: center;}
#reception .contact .info{width: 49%;}
#reception .contact .info>.title{ text-align: left; font-size: 2.2rem; padding: 25px 0; border-bottom: 1px solid #ccc;}
#reception .contact .info>.items{margin: 0 auto;padding: 10px 0;}
#reception .contact .info>.items>.row{display: block; float: left;text-align: left;width: 50%; padding: 15px 0;}
#reception .contact .info>.items>.row .tit{font-size: 1.6rem; color: #676767;}
#reception .contact .info>.items>.row .tit>img{margin-right: 10px;}
#reception .contact .info>.items>.row .box{padding: 5px 0; color: #676767; font-size: 1.8rem;}
#reception .contact .info>.items>.row .box>a{ position: relative; display: inline-block; color: #676767; transition: all .35s;}
#reception .contact .info>.items>.row .box>a:after{position: absolute;z-index: 1; left: 0;bottom: 0;width: 0;height: 1px;opacity: 0; background: #002fa7; content: ''; transition: all .35s;}
#reception .contact .info>.items>.row .box>a:hover{ color: #002fa7;}
#reception .contact .info>.items>.row .box>a:hover:after{ width: 100%;opacity: 1;}

#reception .contact .qrcode{width: 49%;}
#reception .contact .qrcode>.title{ text-align: left; font-size: 2.2rem; padding: 25px 0; border-bottom: 1px solid #ccc;}
#reception .contact .qrcode>.content{ text-align: left; padding: 25px 0;}
#reception .contact .qrcode>.content>.box{width: 40%; float: left; display: flex;align-items: center;}
#reception .contact .qrcode>.content>.box>p{ display: inline-block;text-align: center;}
#reception .contact .qrcode>.content>.box>p:first-child{margin-right: 30px;}
#reception .contact .qrcode>.content>.box>p>img{display: block;}
#reception .contact .qrcode>.content>.box>p>span{display: block;font-size: 1.4rem; color: #676767;padding: 10px 0;}
#reception .contact .qrcode>.content>.text{width: 60%; float: left; font-size: 1.6rem; color: #676767; line-height: 3.2rem; box-sizing: border-box; padding: 20px 0 0 10px;}



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

    #reception .stock .content{ width: 60%;}

    #reception .contact .qrcode>.content>.text{padding: 10px 0 0 10px;}

}

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







}

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


    #reception .stock .title>h3{ font-size: 2.8rem;}
    #reception .stock .title>p{ font-size: 1.6rem;}
    #reception .stock .content{ width: 65%;}
    #reception .stock .content>.intro>.theme{font-size: 2.8rem;}
    #reception .stock .content>.intro>.text{ font-size: 1.5rem; line-height: 2.8rem;}
    #reception .stock .content>.standard>.theme{font-size: 2.8rem;}
    #reception .stock .content>.standard>.box>.row{font-size: 1.5rem; }


    #reception .introduce .title{font-size: 2.8rem;}
    #reception .introduce .content>.text{ font-size: 1.5rem; line-height: 2.5rem; margin-bottom: 30px;}


    #reception .contact .title {font-size: 2.8rem;}
    #reception .contact .info>.title{ font-size: 2rem; }
    #reception .contact .info>.items>.row .box{font-size: 1.7rem;}


    #reception .contact .qrcode>.title{ font-size: 2rem;}
    #reception .contact .qrcode>.content>.box>p:first-child{margin-right: 20px;}
    #reception .contact .qrcode>.content>.box>p>span{font-size: 1.3rem;}
    #reception .contact .qrcode>.content>.text{font-size: 1.5rem; line-height: 2.8rem;}



}


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


    #reception .stock .content>.intro>.theme{font-size: 2.6rem;}
    #reception .stock .content>.standard>.theme{font-size: 2.6rem;}

    #reception .contact .info>.items>.row .tit {font-size: 1.5rem;}
    #reception .contact .info>.items>.row .box{font-size: 1.6rem;}
    #reception .contact .qrcode>.content>.box>p>span{font-size: 1.2rem;}
    #reception .contact .qrcode>.content>.text{font-size: 1.4rem; line-height: 2.4rem;}


}


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

    #reception .contact .qrcode>.content>.text{font-size: 1.3rem; line-height: 2rem;}


}


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

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


    #reception .contact .title { font-size: 2.4rem;}
    #reception .contact .info{width: 100%; float: none;}
    #reception .contact .qrcode{width: 100%; float: none;}
    #reception .contact .qrcode>.content>.box{float: none;}
    #reception .contact .qrcode>.content>.text{float: none; width: 100%;}

}



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

    #reception .stock {padding: 80px 0;}
    #reception .introduce { padding: 80px 0;}
    #reception .introduce .content>.text{width: 100%;}
    #reception .contact { padding: 80px 0;}

}


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


    #reception .stock .title>h3{ font-size: 2rem; padding-bottom: 10px;}
    #reception .stock .title>p{ font-size: 1.4rem; padding-top: 5px;}
    #reception .stock .content>.title { font-size: 2.2rem;}
    #reception .stock .content>.price>span {font-size: 6rem;}
    #reception .stock .content>.transaction{ padding: 20px 0;}
    #reception .stock .content>.transaction>.row{ width: 33.33%; padding-bottom: 20px; border-bottom: 1px dotted #ccc;}
    #reception .stock .content>.transaction>.row:nth-child(4),#reception .stock .content>.transaction>.row:nth-child(5){ border-bottom: 0;padding-top: 20px;}

    #reception .introduce .title {font-size: 2.4rem;}
    #reception .introduce .content>.text {font-size: 1.4rem;line-height: 2rem;}

    #reception .contact .title {font-size: 2.2rem; line-height: 3rem;}

    #reception .contact .info>.title { padding: 10px 0; }
    #reception .stock .content>.transaction>.row p { padding-top: 0; }



    #reception .contact .info>.items>.row .tit>img{ margin-top: -3px;}
    #reception .contact .qrcode>.title { padding: 10px 0;}

    #reception .contact .qrcode>.content>.box img{width: 100px; height: auto;}


}


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


    #reception .stock {padding: 50px 0;}
    #reception .stock .content>.price>span {font-size: 5rem;}


    #reception .introduce {padding: 50px 0;}
    #reception .contact {padding: 50px 0;}

    #reception .contact .title {font-size: 1.8rem;}


    #reception .contact .info>.items>.row{float: none;width: 100%;}

    #reception .contact .qrcode>.content>.box{width: 100%; }








}