body {
    background: #D7D8E1;
}
.Template {width: 100%; background: #D7D8E1;}
.Template .topbanner {width: 100%; height: 100px; position: relative;}
.Template .titBg {position: absolute; bottom: 0; left: 50%; transform: translate(-50%,50%); width: calc(100% - 60px); text-align: center; border-radius: 16px; height: 120px; padding-top: 54px; box-sizing: border-box; }
/* .Template .titBg::before {content: ''; position: absolute; bottom: 0; left: 0; width: 89px; height: 52px; background: url('../image/topbg1.png') no-repeat center/cover; border-radius: 0 16px;} */
/* .Template .titBg::after {content: ''; position: absolute; bottom: 0; right: 0; width: 76px; height: 44px; background: url('../image/topbg2.png') no-repeat center/cover; border-radius: 16px 0;} */
.Template .titBg h1 {position: absolute; top: 0; left: 50%; transform: translate(-50%,-50%);}
.Template .titBg > .titW strong {font-weight: 500; font-family: 'Gmarket'; font-size: 20px; line-height: 1; margin-bottom: 10px; display: block; color: #222222;}
/* .Template .titBg > .titW p {
    margin-bottom: 10px;
    font-weight: 600; font-size: 13px; color: #222222;
    color: rgba(0, 0, 0, 0.90);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: Hind;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;

} */
.divContents {position: relative; padding-top: 60px; padding-bottom: 50px; box-sizing: border-box;}
/* .divContents::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 168px; background-size: 100% 167px;} */
/* .divContents::after {content: ''; position: absolute; left: 30px; bottom: 158px; width: 187px; height: 67px; background: url('../image/footerbg2.png') no-repeat center/cover;} */
.divContents .content {position: relative;}
.divContents .con2::before {content: ''; position: absolute; top: -34px; right: 0; width: 124px; height: 68px; background: url('../image/titbg1.png') no-repeat center/cover;}
.divContents .con3::before {content: ''; position: absolute; top: -34px; right: -30px; width: 130px; height: 72px; background: url('../image/titbg2.png') no-repeat center/cover;}
.divContents .content:not(:last-child) {margin-bottom: 70px;}
.divContents .conTitW {display: flex; align-items: center; gap: 6px; margin-bottom: 14px}
.divContents .conTitW h2 {font-size: 20px; font-weight: 700; color: #fff;}
.divContents .youtubeBox {width: 100%; height: 0; padding-bottom: 68%; position: relative; border: 1px solid #fff; border-radius: 5px; overflow: hidden; box-shadow: 2px 2px 5px 0px #3333334D;}
.divContents .youtubeBox iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.divContents .linkList {margin-bottom: 53px;}
.divContents .linkList > li {position: relative; display: block;}
.divContents .linkList > li:not(:last-child) {margin-bottom: 12px;}
.divContents .linkList > li > a {display: flex; padding: 10px; box-sizing: border-box; align-items: center; gap: 14px; width: 100%; height: 50px; box-shadow: 2px 2px 5px 0px rgba(51, 51, 51, 0.3); background: rgba(255, 255, 255, 1); border-radius: 30px;}
.divContents .linkList > li > a > p {font-size: 16px; color: #222222; font-weight: 600;}
.divContents .linkList .reviewW {position: absolute; top: 0; right: 30px; top: 50%; transform: translateY(-50%); text-align: center;}
.divContents .linkList .reviewW > div {display: flex; gap: 4px; justify-content: center;}
.divContents .linkList .reviewW > div .scoreW {font-size: 12px; color: #888888; margin-bottom: 4px;}
.divContents .linkList .reviewW > div .scoreW > .scorel {color: #333333;}
.divContents .linkList .reviewW > p {color: #555555;}
.divContents .swiperX {width: 100%;}
.divContents .swiperX .swiper-slide {width: 144px;}
.divContents .swiperX .swiper-slide .imgW {width: 144px; height: 144px; margin-bottom: 12px;}
.divContents .swiperX .swiper-slide img {width: 100%; height: 100%; vertical-align: middle; }
.divContents .swiperX strong {display: block; font-weight: 700; font-size: 16px; line-height: 1;}
.divContents .swiperX span {display: block; font-size: 12px; font-weight: 500; margin: 4px 0 8px 0;}
.divContents .swiperX p {font-size: 11px; padding-right: 6px; line-height: 1.2;}
.divContents .menuList {display: flex; flex-wrap: wrap; gap: 24px 4%;}
.divContents .menuList li {width: 48%;}
.divContents .menuList li .imgW {width: 100%; margin-bottom: 12px;}
.divContents .menuList li .imgW img {width: 100%; }
.divContents .menuList li strong {display: block; font-weight: 700; font-size: 16px; line-height: 1;}
.divContents .menuList li span {display: block; font-size: 12px; font-weight: 500; margin: 4px 0 8px 0;}
.divContents .menuList li p {font-size: 11px; padding-right: 6px; line-height: 1.2;}

.Template .arrow {position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.Template .prev {left: -18px;}
.Template .next {right: -18px;}
.Template .arrow img {width: 12px;}


@media screen and (min-width: 768px) {

.Template {width: 768px; margin: 0 auto;}
}