.p-demo__view-area .contents{align-items:center;display:flex;gap:40px;height:100%;justify-content:space-between;margin:auto;max-width:1000px}.p-demo__view-area .main{position:relative;width:58%}.p-demo__view-area .main__content{background-color:#f5f5f5;display:none;opacity:0;padding:20px;transition:opacity .3s ease,visibility .3s ease;visibility:hidden}.p-demo__view-area .main__content.is-show{display:block;opacity:1;visibility:visible}@starting-style{.p-demo__view-area .main__content.is-show{opacity:0;visibility:hidden}}.p-demo__view-area .main__img-area{margin-bottom:14px}.p-demo__view-area .side{width:36%}.p-demo__view-area .side__list{border-top:1px solid #ddd;display:flex;flex-direction:column}.p-demo__view-area .side__item{border-bottom:1px solid #ddd;cursor:pointer;font-size:16px;font-weight:700;line-height:1.7;padding:12px;text-align:center;transition:color .3s ease,background-color .3s ease}.p-demo__view-area .side__item.is-active{background-color:#000;color:#fff}@media screen and (max-width:767px){.p-demo__view-area .contents{flex-direction:column;gap:24px;justify-content:center}.p-demo__view-area .main,.p-demo__view-area .side{width:100%}}@media (hover:hover)and (pointer:fine){.p-demo__view-area .side__item:hover{background-color:#000;color:#fff}}