/* mainBanner */
#subBanner {
    background-image: url("../img/submain-web.png");
}

/* containerBox */
.containerBox { margin-bottom: 190px; }
.containerBox>.contents { padding-top: 131.8px; }

.text { font-size: 30px; text-align: center; font-weight: bold; z-index: 1; position: absolute; left: 50%; transform:translateX(-50%); }
.line { border: 0px; width: 162.8px; height: 35.88px; background-color: #e8e5de; z-index: 0; position: absolute; left: 50%; transform:translateX(-50%); margin-top: 21.5px; }

/* 가격 contents */
.innerContainer { width: 100%; background-color: #fafaf8; margin-top: 104px; }
.containerBox>.innerContainer>.contents { text-align: center; padding-top: 23px; padding-bottom: 35.7px; }
.containerBox>.innerContainer>.contents>.contents-intro { display: inline-block; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-ring { display: inline-block; width: 160px; height: 160px; background-image: url("../img/about-img/ring.png"); background-size: 160px 160px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-bracelet { display: inline-block; width: 200px; height: 160px; background-image: url("../img/about-img/bracelet.png"); background-size: 200px 160px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-text-ring { font-size: 21px; margin-top: 30px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-text-bracelet { font-size: 21px; margin-top: 30px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-price-ring { font-size: 30px; font-weight: bold; margin-top: 21px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-price-bracelet { font-size: 30px; font-weight: bold; margin-top: 21px; }
.containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-line { width: 1px; height: 297px; background-color: #564E4B; margin-left: 164.5px; margin-right: 164.5px; }
.containerBox>.innerContainer>.contents>.contents-intro:first-child, .containerBox>.innerContainer>.contents>.contents-intro:last-child { width: 230px; height: 300px; }

/* 오시는 길 contents-detail(위치, 이용시간, 연락처) */
#wrapper>.container { padding-bottom: 220px; }
.container>.contents>.contents-detail { padding-top: 140px; }
.contents-text { margin-top: 44px; text-align: center; font-size: 16px; }
.contents-text>.detail-text { line-height: 35px; }

.list-location, .list-info, .list-tel { margin-left: 200px; font-size: 16px; display: inline-block; width: 100%; margin-bottom: 0; }
.list-location>dt, .list-info>dt, .list-tel>dt { float:left; font-weight: normal; }

.list-location>dd>span:first-child { margin-bottom: 17px; }
.list-tel>dd>span:first-child { margin-right: 40px;}
.list-tel>dd>span:last-child { margin-left: 40px;}
.list-location>dd>span { display: block; }
.list-location>dd { margin-left: 135px; }
.list-info>dd { margin-left: 135px; margin-bottom: 0px; }
.list-tel>dd { margin-left: 135px; }

.container>.contents>.contents-detail>hr { border: 0px; height: 1px; background-color: #D7D7D7; margin-top: 31.5px; margin-bottom: 31.5px; }

/* 오시는 길 contents-box(지도) */
.container>.contents>#map { height: 409px;   margin-top: 64.5px; }

#mobile-nav, #mobile-text { display: none; }

/* banner text */
#subBanner>.contents>.contents-box>.contents-tit { color: white; }

.fab, .fas { color: white;}

@media screen and (max-device-width: 812px) {

    .line { display: none;}
    .text { font-size: 20px; }

    #subBanner { height: 149px; margin-top: 40px; background-image: url("../img/submain-mobile.png"); }
    #subBanner>.contents>.contents-box { padding-left: 23px; padding-top: 52px; }
    #subBanner>.contents>.contents-box>.contents-tit { color: white; font-size: 21px; font-weight: normal; }
    
    .containerBox { margin-bottom: 180px; }
    .containerBox>.contents { padding-top: 78px; }

    .innerContainer { margin-top: 50px; }
    .innerContainer>.contents { background-color: white; }
    .containerBox>.innerContainer>.contents { padding-bottom: 0px }
    .innerContainer>.contents>.contents-intro:nth-child(2)>.contents-intro-line { width: 330px; height: 1px; margin-left: 0; margin-right: 0; }
    .innerContainer>.contents>.contents-intro:first-child { margin-bottom: 100px; }
    .innerContainer>.contents>.contents-intro:last-child { margin-top: 100px; }
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-ring, .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-bracelet { width: 195px; height: 195px; }
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-text-ring, .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-text-bracelet { font-size: 16px; }
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-price-ring, .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-price-bracelet { font-size: 26px; margin-top: 11px; }
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-ring { background-size: 195px 195px; }
    
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-ring { display: inline-block; width: 160px; height: 160px; background-image: url("../img/about-img/ring.png"); background-size: 160px 160px; background-color: none; }
    .containerBox>.innerContainer>.contents>.contents-intro>.contents-intro-img-bracelet { display: inline-block; width: 160px; height: 160px; background-image: url("../img/about-img/bracelet.png"); background-size: 160px 160px; background-color: none; }

    .contents-text { margin-top: 62px; }
    .contents-detail { padding-left: 23px; padding-right: 23px; }
    .container>.contents>.contents-detail { padding-top: 94px; }
    .contents-detail>dl { margin-left: 0; }
    .contents-detail>.list-tel>dd>span { display: block; margin-bottom: 12px; }
    .contents-detail>.list-tel>dd>.phone-number-2 { display: none; }
    .contents-detail>.list-tel>dd>.phone-number-3 { margin-left: 0px; }
    .contents-detail>dl>dt { margin-left: 24px; }
    .list-location>dd { margin-left: 113px; }


    #wrapper>.container { padding-bottom: 0px; }
    .container>.contents>#map { margin-top: 50px; }

    #mobile-nav { display: block; padding-top: 0px; padding-bottom: 0px; }
    .navbar-light .navbar-toggler { float: right; padding-right: 0; }
    #mobile-text { display: block; }
    #web-nav, #web-text { display: none; }

    .site-footer>.container>.contents>.row { width: 0;}
    
}