@charset "utf-8";
* { box-sizing: border-box; }

.btn_goto_guide, .btn_goto_avere { cursor: pointer; }
.onthewall-main-banner01{background: url('../img/mb-onthewall-main-banner.png') no-repeat center center; height: 320px; background-size: cover; margin-bottom: 20px}
.onthewall-main-banner01 > div{width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: end; padding-bottom: 36px; height: 100%}
.onthewall-main-banner01 > div > h2{color: #2A303C; font-size: 19px; line-height: 27px; font-weight: 700; margin-bottom: 20px; text-align: center}
.onthewall-main-banner01 > div > div{display: flex; align-items: center;}
.onthewall-main-banner01 > div > div > button{padding: 8px 20px; border-radius: 25px; background-color: #fff; color: #2A303C; font-size: 15px; line-height: 21px; font-weight: 400; }
.onthewall-main-banner01 > div > div > button:last-of-type{color: #fff; background-color: #2A303C; font-weight: 700; margin-left: 12px;}
.onthewall-main-banner01 > div > div > button:last-of-type:hover{background-color: #431F88}
.title-text{font-size: 17.5px; font-weight: 700; color: #2A303C; line-height: 28px; margin-bottom: 28px; text-align: center}
.title-text > span{color: #431F88; display: inline-block; font-weight: 700}

#onthewallMain{margin-bottom: 80px}
#onthewallMain div.swiper-slide{text-align: center; }
#onthewallMain div.swiper-slide > a { width:100%; height:100%; display:inline-block; position:relative; }
#onthewallMain div.swiper-slide div {height: 228px; position: relative; margin-bottom: 15px; }
#onthewallMain div.swiper-slide img{width: 100%; height: 100%; position: relative; left: 0; top: 0; object-position: center; object-fit: cover}
#onthewallMain div.swiper-slide p{display: block; text-align: left; color: #4A515F; font-weight: 400; line-height: 22px; font-size: 14px}
#onthewallMain div.swiper-slide span{display: block; text-align: left; color: #4A515F; font-size: 12px; font-weight: 400; line-height: 19px;}
@media (hover: hover) {
    #onthewallMain div.swiper-slide:hover strong { width: 100%; position:absolute; left:0; bottom:0; display:inline-block; padding:40px 0 20px 0; }
    #onthewallMain div.swiper-slide:hover a:before{content: ''; position: absolute; width: 100%; height: 2px; background-color: #431F88; bottom:0; left: 0; z-index: 9;}
    #onthewallMain div.swiper-slide:hover div{margin-bottom: 0;position:relative; width:100%; height:100%; display:flex;}
    #onthewallMain div.swiper-slide:hover div:after { content:""; position:absolute; left:0; bottom:0; width:100%; height:100px;
        background: rgb(0,0,0);
        background: -moz-linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 100%);
        background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 100%);
        background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(255,255,255,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1);
    }
    #onthewallMain div.swiper-slide:hover img{height: 279px; z-index: -1}
    /*이미지 호버 텍스트*/
    #onthewallMain div.swiper-slide:hover p{margin-left: 19px; margin-right: 19px; color: #fff; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    #onthewallMain div.swiper-slide:hover span{margin-left: 19px; color: #fff; font-size: 12px}
}
.div-block {display: block;}
.div-none {display: none !important;}
.middle-content{width: calc(100% - 48px); margin: 0 auto}
.memory-hall-box{background: url("../img/mb-main-banner02.png")no-repeat right -26px bottom #fff; box-sizing: border-box; padding: 30px; background-size: 242px; min-height: 340px; border-radius: 4px; margin-bottom: 80px; box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.07); position: relative}
.memory-hall-box > h2{display: block; font-size: 28.5px; line-height: 34.5px; color: #2A303C; font-weight: 700; margin-bottom: 16px; border-radius: 4px}
.memory-hall-box > a{display: inline-block; color: #5C6272; font-size: 12px; font-weight: 400; line-height: 20px; background: url("../img/detail-icon.png") no-repeat right bottom 6px; padding-right: 14px; background-size: 9.6px}
.memory-hall-box > a > strong{display: inline-block; font-weight: 700}
.created-memorial > div:first-of-type{display: none}
.created-memorial > ul > li{position: relative}
.created-memorial > ul > li > a{display: flex; justify-content: center; position: relative; height:103px; }
.created-memorial > ul > li:hover div > p{color: #431F88}
.created-memorial > ul > li:hover:after{content: ''; display: block; position: absolute; width: 100%; height: 2px; background-color: #431F88; bottom: 0}
.created-memorial > ul > li:not(:last-of-type){margin-bottom: 16px}
.created-memorial > ul > li:last-of-type{margin-bottom: 28px}
.created-memorial > ul > li div:first-of-type{position: relative; max-height: 80px; min-width: 123px}
.created-memorial > ul > li div > img{display: flex; border-radius: 2px 0 0 2px; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}
.created-memorial > ul > li div:last-of-type{border: 1px solid #EAECF0; border-left: none; border-radius: 0 2px 2px 0; padding: 18px 0 18px 24px; width: 100%}
.created-memorial > ul > li div > p{text-align: left; display: block; font-size: 12.5px; font-weight: 700; color: #4A515F; line-height: 17px; margin-bottom: 9px}
.created-memorial > ul > li div > span{display: block; text-align: left; color: #4A515F; font-size: 11.5px; font-weight: 400; line-height: 16px}
.middle-content > div:last-of-type{text-align: center; margin-bottom: 80px}
.detail-memorial{display: inline-block; font-size: 13px; font-weight: 400; color: #2A303C;  line-height: 18px; background: url("../img/detail-read02.png") no-repeat right bottom 5px; padding-right: 15px; line-height: 18px; background-size: 7px}
.title-text02{font-size: 17.5px; font-weight: 700; color: #2A303C; line-height: 28px; margin-bottom: 65px; text-align: center}
.short-text{box-sizing: border-box;}
.short-text p{overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}




#memorialSwiper{position: relative; width: calc(100% - 104px); margin: 0 auto 90px; overflow: hidden}
#memorialSwiper div.swiper-slide div{position: relative;  min-height: 334px; margin-bottom: 16px;}
#memorialSwiper div.swiper-slide img{width: 100%; display: block; position: absolute; left: 0; top: 0; object-fit: cover; object-position: center; height: 100%}
#memorialSwiper div.swiper-slide > h3{font-size: 25px; color: #2A303C; line-height: 35px; font-weight: 700; margin-bottom: 11px; text-align: center;}
#memorialSwiper div.swiper-slide > p{display: block; color: #798493; font-size: 11.5px; font-weight: 400; line-height: 16px; padding-bottom: 30px; word-break: keep-all; text-align: center;}
.memorial-full{position: relative}
.memorial-full .swiper-pagination-bullet{width: 6px; height: 6px}
.memorial-full .swiper-pagination-bullet-active{background-color: #2A303C}
.explanation-box{padding: 0 24px 80px 24px; position: relative}
.explanation-box > ul > li{padding: 27px 21px; border-radius: 10px; background-color: #fff; display: flex; align-items: center; border: 1px solid #BBC0C9}
.explanation-box > ul > li:hover{box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.15);;}
.explanation-box > ul > li:first-of-type{margin-bottom: 28px}
.explanation-box > ul > li > div:last-of-type{padding: 12px 0 12px 35px}
.explanation-box > ul > li > div:first-of-type{max-width: 52px;}
.explanation-box > ul > li > div:first-of-type img{display: block; width: 100%}
.explanation-box > ul > li > div > p{display: block; font-size: 12.5px; color: #4A515F; font-weight: 400; line-height: 17px; margin-bottom: 8px;}
.explanation-box > ul > li > div > a{display: inline-block; font-size: 12.5px; color: #2A303C; font-weight: 700; line-height: 17px; background: url('../img/detail-read03.png') no-repeat right bottom 3px; background-size: 6px; padding-right: 15px}
.bg-mb-box{position: absolute; background-color: #EAECF0; width: 100%; height: 320px; top: 52px}
.bottom-content{position: relative}
.frequently-fun{overflow: hidden; position: relative}
.first-pop-motion{position: absolute; left: 0; top: 0; width: 100%; height: auto;  background-color: #fff; padding-bottom: 200px}

.first-pop-motion > div.obj01{height: 574px;}
.first-pop-motion > div.obj02{height: 457px;}
.first-pop-motion > div.obj03{height: 457px;}
.first-pop-motion > div.obj04{height: 457px;}
.first-pop-motion > div > img{position: absolute; display: block; width: 100%}
.obj05{position: fixed;top: -56px;z-index: 9;width: 100%;height: 885px; display: none; background-color: #fff; overflow: hidden}
.obj05 > img{position: absolute}

.obj01 > img:nth-of-type(4){left: -15px; top: 40px; max-width: 201px}
.obj01 > img:nth-of-type(5){top: 59px; right: 36px; max-width: 51px;}
.obj01 > img:nth-of-type(6){bottom: 170px; left: -24px; max-width: 76px}
.obj01 > img:nth-of-type(7){right:-24px; max-width: 124px; bottom: -50px;}

.obj02 > img:nth-of-type(4){left:-24px; top: -80px; max-width: 188px;}
.obj02 > img:nth-of-type(5){top: 32px;  left: 56px; max-width: 140px;}
.obj02 > img:nth-of-type(6){bottom: 54px; right: 131px; max-width: 51px;}

.obj03 > img:nth-of-type(4){right:-24px; max-width: 152px; top: -204px}
.obj03 > img:nth-of-type(5){bottom: -530px; left: -102px; max-width: 245px;}

.obj04 > img:nth-of-type(4){right:-84px; bottom: -450px; max-width: 187px;}
.obj04 > img:nth-of-type(5){left: -24px; bottom: -34px; max-width: 123px;}
.txt-position {opacity: 0; transition: opacity 0.5s ease, padding 0.3s; position: fixed; left: 0; top: 0; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; flex-direction: column; padding-bottom: 60px; visibility: hidden;}
.obj01 .txt-position{font-size: 27px; color: #1F222D; font-weight: 700; line-height: 37px; opacity: 1; transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.obj02 .txt-position > strong{color: #1F222D; font-size: 21px; line-height: 30px; font-weight: 700; margin-bottom: 20px;}
.obj02 .txt-position > p{color: #2A303C; font-size: 16px; line-height: 23px; font-weight: 400}
.obj03 .txt-position > strong{color: #1F222D; font-size: 21px; font-weight: 700; line-height: 30px; margin-bottom: 20px}
.obj03 .txt-position > p{color: #2A303C; font-size: 16px; font-weight: 400; line-height: 23px}
.obj04 .txt-position > strong{color: #1F222D; font-size: 21px; line-height: 30px; font-weight: 700; margin-bottom: 20px;}
.obj04 .txt-position > p{font-size: 16px; line-height: 23px; color: #2A303C; font-weight: 400; margin-bottom: 8px;}
.obj04 .txt-position > span{font-size: 11.5px; font-weight: 400; color: #798493; line-height: 16px}

.memoryWrap > h2{color: #2A303C; font-size: 21px; line-height: 30px; font-weight: 700; margin-bottom: 16px}
.memoryWrap > p{color: #2A303C; font-size: 15px; font-weight: 400; line-height: 21px; margin-bottom: 32px;}
.info-memory > p{font-size: 11.5px; line-height: 16px; font-weight: 400; color: #5C6272}
.info-memory > p > a{font-weight: 700; display: inline-block; text-decoration: underline;}
.memoryWrap .fixedButton{display: flex}
.memoryWrap .fixedButton > li > button{width: 100%; height: 60px; font-weight: 700; font-size: 15px}
.memoryWrap .fixedButton > li:first-of-type > button{background: #fff; color: #5C6272; border-top: #BBC0C9 1px solid; }
.memoryWrap .fixedButton > li:last-of-type > button{background: #431F88; color: #fff}
.memoryWrap .fixedButton > li > button:disabled{background: #F6F7F8 !important; color: #BBC0C9}

.alertWrap .alertWrapInner > p > span a{font-weight: 700;text-decoration: underline; display: inline-block;}
.phone-check-li{display: none}
.check-phone-btn{display: none}
.fixedButton > li.send-phone-check > button{background: #431F88 !important; color: #fff; border-radius: 2px}
.fixedButton > li.send-phone-check > button:disabled{background: #F6F7F8 !important; color: #BBC0C9}
/*.slider-rull{position: relative; z-index: 98; width: 100%; height: 3275px; }*/
.slider-rull{position: relative; z-index: 98; width: 100%; height: 4000px; }
/*스와이퍼 이미지 크기 조정*/
.swiper-slide img { width: 100%; height: auto; object-fit: cover; }
#slider > .serviceTabs{position: absolute; background: #fff; z-index: 99}
#slider > *:not(.slider-rull) { display:none; }
.bt-pc{display: none}
.bt-mb{display: block}
.memorial-list{width: calc(100% - 48px); margin: 40px auto 0}
.memorial-list > div:first-of-type{display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px}
.memorial-list > div:first-of-type label{display: none}
.memorial-list > div:first-of-type select{border: none; font-size: 16px; font-weight: 700; color: #2A303C; line-height: 23px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../img/dash-select.png) no-repeat right 35px center transparent; width: 100px}
.memorial-list > div:first-of-type select.views\.totalView{background: url(../img/dash-select.png) no-repeat right center transparent; width: 100px}
.memorial-list > ul > li{margin-bottom: 32px;}
.memorial-list > ul > li > a > div:first-of-type{position: relative; height: 200px; margin-bottom: 12px}
.memorial-list > ul > li > a > div > img{display: block; width: 100%; position: absolute; left: 0; top: 0; object-fit: cover;object-position: center; width: 100%; height: 100%}
.memorial-list > ul > li > a > div > p{font-size: 14px; line-height: 22px; font-weight: 400; color: #4A515F; display: block}
.memorial-list > ul > li > a > div > span{display: block; font-size: 12px; font-weight: 400; color: #4A515F}
.intro-skip{width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; border-top: 1px solid #5C6272; position: fixed; bottom: 0; z-index: 9999}
.intro-skip > button{background: url('../img/skip-icon.png') no-repeat right center; color: #5C6272; font-size: 14px; font-weight: 500; border: none; padding-right: 12.5px; }
.first-pop-motion > div > img.pc-intro{display: none}
.first-pop-motion > div > img.mb-intro{display: block}
.mb-txt-br{display: block}
.img-border, .img-border-con img {border: 1px solid #EAECF0;}

@keyframes moveInCircle {
    0% {
        transform: translateX(50px) translateY(0px);
    }
    25% {
        transform: translateX(0px) translateY(50px);
    }
    50% {
        transform: translateX(-50px) translateY(0px);
    }
    75% {
        transform: translateX(0px) translateY(-50px);
    }
    100% {
        transform: translateX(50px) translateY(0px);
    }
}
.blurAnimation > img:first-of-type{display: none}
.blurAnimation > img:last-of-type{display: block}
.blurAnimation {
    position: absolute;
    z-index: -1;
    filter: blur(16px);
    animation: moveInCircle 5s linear infinite;
}
.blour-icon01{bottom: 28px; right: 0}
.blour-icon02{bottom: -171px; left: 0; }
.blour-icon03{right: 0%; top: auto; bottom: -120px}
.blour-icon04{ top:-50px; left: 204px; display: none}
.blour-icon05{ top: 22px; left: 240px; display: none}
.my-memorial-hall{width: calc(100% - 48px); margin: 0 auto 80px; position: relative; margin-top: 40px}
.my-memorial-hall > h2{font-size: 17.5px; font-weight: 700; color: #2A303C; text-align: center; line-height: 28px; margin-bottom: 28px; display: block}
#myHallSwiper{overflow: hidden}
#myHallSwiper .swiper-slide{ display:flex; position: relative;}
#myHallSwiper .swiper-slide a { display:flex; width:100%; max-height: 400px; overflow: hidden; justify-content: center; align-items: center; flex-wrap: wrap; }
#myHallSwiper .swiper-slide > img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover}
#myHallSwiper .swiper-slide > div{position: absolute; bottom: 24px; width: calc(100% - 32px); left: 28px;}

.dark_bg {position: absolute; top: 50%; left: 50% !important; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; width: 100% !important; height: 100%; text-align: center; background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 23px; font-weight: bold; z-index: 9999; cursor: pointer;}
.dark_bg p {display: inline; line-height: 1.2; padding: 20px; color: #fff;}
.dark_bg span {font-size: 18px; font-weight: lighter;}
.title-box {bottom: 0 !important; left: 0 !important; width: 100% !important; height: 110px; padding: 34px; background: linear-gradient(rgba(42, 48, 60, 0), rgba(42, 48, 60, 0.7));}
.count-hall{font-size: 11px; font-weight: 400; line-height: 15px; color: #fff; padding: 0 8px; border-radius: 10px; border: 1px solid #F6F7F8; margin-bottom: 4px; display: inline-block}
.hall-name-box{display: flex; align-items: center; justify-content: space-between}
.hall-name-box > div:first-of-type{display: flex; align-items: center}
.hall-name-box > div:first-of-type > strong{font-size: 16px; font-weight: 700; display: block; color: #fff; line-height: 23px;}
.hall-name-box > div:first-of-type > button{border: none; background: transparent}
.hall-name-box > div:first-of-type > button img{width: 100%; max-width: 14px; display: block}
.memory-hall-box > h2{font-size: 25px; line-height: 37px; margin-bottom: 11px}
.option-img{display: block; width: 100%; max-width: 20px; cursor: pointer;}
.my-memorial-hall .swiper-pagination-bullet-active{background-color: #2A303C;}
.my-memorial-hall .swiper-pagination-bullet {width: 6px; height: 6px;}
.my-memorial-hall .swiper-pagination{bottom: -26px}
.plus-memorial{position: fixed; bottom: 20px; width: calc(100% - 48px); left: 24px; border-radius: 4px; z-index: 9}
.plus-memorial > button{width: 100%; height: 48px; border: none; border-radius: 4px; *background: url('../img/plus-memorial-icon.png') no-repeat 82px 52% #F1F2F3; font-size: 12px; color: #2A303C; font-weight: 400}
#slider{overflow: hidden;}
.plus-memorial > button > img {vertical-align: middle; margin-right: 5px;}
.memorial-explanation{padding: 36px 24px 64px 24px; background: url("../img/mb-memorial-bottom-bg.png") no-repeat center center; background-size: cover; margin-top: 122px}
.memorial-explanation > ul > li {width: 33%; height: 140px; border: none;}
.memorial-explanation > ul > li:not(:last-of-type){margin-bottom: 28px}
.share-pop{position: fixed; left: 0; top: 0; width: 100%; height: 100vh; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.4); z-index: 99999}
.share-pop > div{width: 276px; height: 190px; padding: 32px 44px; box-sizing: border-box; position: relative; border-radius: 4px; background: #fff}
.share-pop > div > button{position: absolute; right: 0; top: -28px; border: none; background: transparent}
.share-pop > div > h2{font-size: 16px; font-weight: 700; line-height: 23px; color: #1F222D; margin-bottom: 20px; text-align: center}
.share-pop > div > ul{display: flex; justify-content: space-between}
.share-pop > div > ul > li > button{background: transparent;}
.share-pop > div > ul > li > button > img{display: block; width: 100%; margin: 0 auto 12px; max-width: 54px;}
.share-pop > div > ul > li > button > span{display: block; font-size: 12.5px; line-height: 17px; font-weight: 400; color: #5C6272}
.copy-url-txt{position: absolute; padding: 10px; background-color: #2A303C; color: #fff; font-size: 16px; font-weight: 400; top: 65px; left: 22%; display: none}
.first-pop-motion > div{width: calc(100% - 48px); margin: 0 auto; position: relative}

.marginBox{height: 250px !important;}
.first-margin{height: 250px !important;}

.first-pop-motion > div.obj01{height: 574px}
.first-pop-motion > div.obj02{height: 457px}
.first-pop-motion > div.obj03{height: 457px}
.first-pop-motion > div.obj02{height: 457px}
@media only screen and (min-width: 768px) {
    .share-pop > div > ul{display: flex; justify-content: center}
    .share-pop > div > ul > li:last-of-type{margin-left: 80px}
    .share-pop > div{padding: 22px; }
    .share-pop > div > h2{font-size: 18px; font-weight: 700; line-height: 26.5px; color: #2A303C; margin-bottom: 32px; text-align: center}
    .share-pop > div{width: 289px; height: 190px; padding: 22px; box-sizing: border-box; position: relative; border-radius: 4px; background: #fff}
    .share-pop > div > ul > li > button > span{display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: #5C6272}
    #slider{*overflow: visible;}
    .mb-txt-br{display: none}
    .first-pop-motion{position: absolute; left: 0; top: 0; width: 100%; height: auto;  background-color: #fff; padding-bottom: 800px}
    .first-pop-motion > div{position: relative;  max-width: 1320px; margin: 0 auto; }
    /*height: 629px !important;*/
    /*.first-pop-motion > div.obj04{height: 888px !important;; }*/
    .first-pop-motion > div > img{display: block; width: 100%;}
    .obj05{position: fixed;top: -56px;z-index: 9;width: 100%;height: 885px; display: none; background-color: #fff; overflow: hidden}
    .obj05 > img{position: absolute}
    .obj01 > img:first-of-type{left: 272px;  max-width: 329px;}
    .obj01 > img:nth-of-type(2){top: 169px; left: 624px; max-width: 83px}
    .obj01 > img:nth-of-type(3){bottom: -104px; left: -146px; max-width: 250px}
    .obj02 > img:first-of-type{right: -17px; max-width: 357px; top: -47px}
    .obj02 > img:nth-of-type(2){bottom: 30px; left: -363px; max-width: 662px}
    .obj02 > img:nth-of-type(3){bottom: 0; left: 157px; max-width: 250px}
    .obj03 > img:first-of-type{right:-441px; max-width: 586px; top: -197px;}
    .obj03 > img:nth-of-type(2){top: 172px; left: -113px; max-width: 248px;}
    .obj03 > img:nth-of-type(3){bottom: -64px; right: 185px; max-width: 83px}
    .obj04 > img:first-of-type{right:-176px; max-width: 381px}
    .obj04 > img:first-of-type{top: -234px}
    .obj04 > img:nth-of-type(2){top: 158px; left: 272px; max-width: 201px}
    .obj04 > img:nth-of-type(3){bottom: -333px; left: -109px; max-width: 604px}
    .txt-position {opacity: 0; transition: opacity 0.8s ease-out, transform 0.8s ease-out; position: fixed; left: 0; top: 0; text-align: center; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; flex-direction: column; padding-bottom: 60px}
    .obj01 .txt-position{font-size: 40px; color: #1F222D; font-weight: 700; line-height: 54px; opacity: 1; transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
    .obj02 .txt-position > strong{color: #1F222D; font-size: 30px; line-height: 43px; font-weight: 700; margin-bottom: 24px;}
    .obj02 .txt-position > p{color: #2A303C; font-size: 20px; line-height: 29px; font-weight: 400}
    .obj03 .txt-position > strong{color: #1F222D; font-size: 30px; font-weight: 700; line-height: 43px; margin-bottom: 24px}
    .obj03 .txt-position > p{color: #2A303C; font-size: 20px; font-weight: 400; line-height: 29px}
    .obj04 .txt-position > strong{color: #1F222D; font-size: 30px; line-height: 43px; font-weight: 700; margin-bottom: 24px;}
    .obj04 .txt-position > p{font-size: 20px; line-height: 29px; color: #2A303C; font-weight: 400; margin-bottom: 6px;}
    .obj04 .txt-position > span{font-size: 12px; font-weight: 400; color: #798493; line-height: 19px}
    .first-pop-motion > div > img.pc-intro{display: block}
    .first-pop-motion > div > img.mb-intro{display: none}
    .fixedButton > li.send-phone-check{margin-left: 11px !important; }
    #header{z-index: 99998;}
    .onthewall-main-banner01 > div{max-width: 1320px; display: block; padding-left: 44px; padding-top: 121px}
    .onthewall-main-banner01 > div > h2{text-align: left; font-size: 25px; line-height: 37px; margin-bottom: 32px;}
    .onthewall-main-banner01{background: url(../img/pc-onthewall-main-banner.png) no-repeat center center;height: 400px; background-size: cover;}
    .onthewall-main-banner01 > div > div > button{padding: 12px 20px; font-size: 18px; line-height: 26.5px}

    .onthewall-path{margin-top: 20px; margin-bottom: 60px; display:none !important;}
    .onthewall-path.show { display:block !important; }
    .title-text{font-size: 23px; line-height: 34px; margin-bottom: 28px}
    .frequently-fun{max-width: 1320px; width: 100%; margin: 0 auto; position: relative; overflow: visible}
    #onthewallMain{margin: 0 26px 100px 26px; overflow: hidden}
    .onthewallmain-next{background: url('../img/onwall-main-next.png')no-repeat center center; right: -7px !important; top: 52%}
    .onthewallmain-prev{background: url('../img/onwall-main-prev.png')no-repeat center center; left: -7px !important; top: 52%}
    .frequently-fun .swiper-button-next:after, .frequently-fun .swiper-button-prev:after{display: none}
    .middle-content{max-width: 1320px; margin: 0 auto; width: 100%}
    .memory-hall-box{padding: 50px 60px; background: url(../img/pc-main-banner02.png)no-repeat right 60px bottom 42px #fff;background-size: 293px; min-height: 320px; border-radius: 10px; margin-bottom: 100px;}
    .memory-hall-box > h2{font-size: 30px; line-height: 46px; margin-bottom: 95px}
    .memory-hall-box > a{font-size: 20px; line-height: 29px; background:  url("../img/pc-detail-icon.png") no-repeat right bottom 9px; background-size: 16px; padding-right: 24px}
    .created-memorial{display: flex}
    .created-memorial > div:first-of-type{display: block; width: 100%; max-width: 422px; position: relative; height: 230px}
    .created-memorial > div:first-of-type img{display: block; width: 100%; position: absolute; left: 0; top: 0; height: 100%; object-position: center; object-fit: cover}
    .created-memorial > ul{display: flex; flex-wrap: wrap; margin-left: 38px}
    .created-memorial > ul > li{width: 48% !important; height:103px;}
    .created-memorial > ul > li div:first-of-type{max-height: 103px; width: 125px; min-width: 125px; height: 103px}
    /*.created-memorial > ul > li > div > img{}*/
    .created-memorial > ul > li div:last-of-type{padding: 28px; text-overflow: ellipsis; overflow: hidden;}
    .created-memorial > ul > li div > p{font-size: 14px; line-height: 22px; margin-bottom: 4px; }
    .created-memorial > ul > li div > span{font-size: 12px; line-height: 19px}
    .created-memorial > ul > li:nth-of-type(odd){margin-right: 26px}
    .created-memorial > ul > li:not(:last-of-type){margin-bottom: 24px}
    .middle-content > div:last-of-type{text-align: right; margin-bottom: 108px}
    /*.created-memorial > ul > li:nth-last-child(2){margin-bottom: 0}*/
    .created-memorial > ul > li:last-of-type{ }
    .detail-memorial{margin-top: 14px; color: #5C6272; line-height: 18px; background: url("../img/detail-read02.png") no-repeat right bottom 4px; background-size: 7px;}
    .bottom-content{max-width: 1320px; margin: 0 auto;}
    .bottom-content > div{ overflow: hidden}
    .title-text02{text-align: left}
    .explanation-box > ul{max-width: 1320px; margin: 0 auto; display: flex; justify-content: center}
    .explanation-box > ul > li:first-of-type{margin-bottom: 0; margin-right: 80px}
    .explanation-box > ul > li{padding: 48px 47px}
    .explanation-box > ul > li > div:first-of-type{max-width: 56px;}
    .explanation-box > ul > li > div:first-of-type > img{display: block; width: 100%}
    .explanation-box > ul > li > div > p{font-size: 14px; line-height: 22px; margin-bottom: 9.5px}
    .explanation-box > ul > li > div > a{font-size: 14px; line-height: 22px; background:  url('../img/detail-read03.png') no-repeat right bottom 7px; background-size: 6px}
    .explanation-box{padding: 0 0 160px 0;}
    .memoryWrap > h2{font-size: 25px; line-height: 37px; margin-bottom: 16px}
    .memoryWrap > p{font-size: 14px; line-height: 22px; margin-bottom: 40px}
    .info-memory > p{font-size: 11px; line-height: 16px}
    .memoryWrap .fixedButton{margin-top: 56px}
    .memoryWrap .fixedButton > li > button{height: 47px; border-radius: 2px; font-size: 15px; }
    .memoryWrap .fixedButton > li:last-of-type > button{margin-left: 11px}
    .memoryWrap .fixedButton > li:first-of-type > button{border: 1px solid #BBC0C9}
    .bg-mb-box{display: none}
    .bt-pc{display: flex; margin-bottom: 140px; position: relative; cursor: pointer;}
    .bt-mb{display: none}
    #memorialSwiper div.swiper-slide > h3,
    #memorialSwiper div.swiper-slide > p{text-align: left; line-height: 19px;}
    #memorialSwiperPc{width: 50%; overflow: hidden; position: relative}
    #memorialSwiperPc .swiper-slide{border-top: 1px solid #D1D4DA; border-bottom: 1px solid #D1D4DA; padding: 32px 0; width: 50%}
    #memorialSwiperPc .swiper-slide > h3{font-size: 32px; line-height: 46px; color: #2A303C; font-weight: 700; margin-bottom: 16px}
    #memorialSwiperPc .swiper-slide > p{font-size: 12px; line-height: 19px; font-weight: 400; color: #798493; margin-bottom: 48px}
    #memorialSwiperPc .swiper-slide > a{display: inline-block; border: 1px solid #BBC0C9; font-size: 14px; font-weight: 500; color: #2A303C; background: url('../img/detail-read03.png') no-repeat right 24px center;
        background-size:7px 13px; padding:12px 40px 12px 28px; border-radius: 2px}
    #memorialSwiperPc .swiper-slide > a:hover{background-color: #F6F7F8}
    .title-text02{margin-bottom: 28px}
    #memorialSwiperPcImg{width: 50%; overflow: hidden; margin-left: 48px}
    #memorialSwiperPcImg .swiper-slide{  min-height: 344px; transition: width 0.2s;}
    #memorialSwiperPcImg .swiper-slide.swiper-slide-active { width:80% !important;  }
    #memorialSwiperPcImg .swiper-slide.swiper-slide-active.w100 { width:100% !important; }
    #memorialSwiperPcImg .swiper-slide { }
    #memorialSwiperPcImg .swiper-slide img{position: absolute; left: 0; top: 0; object-position: center; object-fit: cover; width: 100%; height: 100%}
    .copyImg { position:absolute; top:0; left:calc(100% + 20px) !important; }
    .memorial-pc-paging{display: flex; align-items: center; justify-content: center; position: absolute; bottom: 0; right: 5px}
    .memorial-pc-paging .swiper-button-next,
    .memorial-pc-paging .swiper-pagination,
    .memorial-pc-paging .swiper-button-prev{position: static}
    .memorial-pc-paging .swiper-button-next{background: url('../img/memorial-pc-next.png')no-repeat center center; margin: 0; max-width: 8px}
    .memorial-pc-paging .swiper-button-prev{background: url('../img/memorial-pc-prev.png')no-repeat center center; margin: 0; max-width: 8px}
    .memorial-pc-paging .swiper-button-next:after{display: none}
    .memorial-pc-paging .swiper-button-prev:after{display: none}
    .memorial-pc-paging .swiper-pagination{color: #5C6272; margin: 0 8px}
    .memorial-pc-paging .swiper-pagination > span{font-size: 13px; font-weight: 400; color: #5C6272;}
    #memorialSwiperPc .swiper-slide:hover > h3{color: #431F88}
    .memorial-list{width: 100%; max-width: 1320px; margin: 0 auto}
    .memorial-list > ul{display: flex; flex-wrap: wrap;}
    .memorial-list > div:first-of-type{margin: 0 auto 20px;}
    .memorial-list > ul > li {margin-left: 43px; width: calc(25% - 33px);}
    .memorial-list > ul > li:nth-of-type(4n+1) {margin-left: 0;}
    .memorial-list > div:first-of-type label{display: block}
    .memorial-list > div:first-of-type label > input{border: none; border-bottom: 1px solid #EAECF0}
    .memorial-list > div:first-of-type label > button{border: none; background: transparent}
    .memorial-explanation{margin-top: 160px}
    .memorial-explanation > ul > li{margin-left: 31px;}
    .memorial-explanation > ul > li:first-of-type{margin-left: 0; margin-right: 0}
    .blour-icon01{bottom: -65px; right: -97px}
    .blour-icon02{bottom: -300px; left: -230px; }
    .blour-icon03{right: -13%; top: -60px}
    .blour-icon04{ top:-50px; left: 204px; display: block;}
    .blour-icon05{ top: 22px; left: 240px; display: block;}
    .blurAnimation > img:first-of-type{display: block}
    .blurAnimation > img:last-of-type{display: none}
    .blour-icon04 > img{display: block !important;}
    .blour-icon05 > img{display: block !important;}
    .my-memorial-hall{width: 100%; max-width: 700px; margin-top: 0}
    #myHallSwiper .swiper-slide{ display:flex; }
    .plus-memorial{position: absolute; width: 85px; right: -105px; left: auto; bottom: 0; border-radius: 2px}
    .plus-memorial > button{width: 85px; height: 77px ;background: url(../img/pc-plus-memorial-icon.png) no-repeat top 12px center #F1F2F3; padding-top: 33px; font-size: 11px; font-weight: 500}
    .my-memorial-hall > h2{display: none}
    .hall-name-box > div:first-of-type > strong{font-size: 20px; line-height: 29px}
    .memorial-explanation{padding: 64px 0 64px 0; background: url("../img/pc-memorial-bottom-bg.png") no-repeat center center; background-size: cover}
    .memorial-explanation > ul > li:not(:last-of-type){margin-bottom: 0}
    .first-pop-motion > div.obj01{height: 392px; padding-top: 37px}
    .first-pop-motion > div.obj02{height: 629px}
    .first-pop-motion > div.obj03{height: 629px}
    .first-pop-motion > div.obj04{height: 629px}
    .marginBox{height: 250px !important;}
    .first-margin{height: 300px !important;}
}
@media only screen and (max-width: 400px) {
    #myHallSwiper .swiper-slide {height: auto !important;}
}
@media only screen and (max-width: 768px) {
    #header{z-index: 99998;}
    .my-memorial-hall{width: 100% !important; margin-top: 0 !important; margin-bottom: 80px !important;}
    .my-memorial-hall > h2{display: none !important;}
    #myHallSwiper .swiper-slide{height: 400px !important;}
    .my-memorial-hall .swiper-slide img{width: 100%; height: 100%; margin: 0 auto; object-fit: cover;}
    .div-none {display: flex !important;}
    .div-block {display: none;}
    .short-text {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

    .memorial-explanation { padding:60px 24px; background: url(../img/mb-memorial-bottom-bg.png) no-repeat center top; background-size:cover; }
    .memorial-explanation > ul > li:not(:last-of-type) { margin-bottom:40px; }
    .memorial-explanation > ul > li { width:100%; padding:36px; }
    .explanation-box > ul > li > div:last-of-type { padding-left:27px; }
    .created-memorial > ul > li > a{ height: auto; }
    .onthewall-main-banner01 { margin-bottom: 60px;}
    /*body #footer .f_help { bottom: 20px !important; }*/
}