.main-box { background: #FFF; border: solid #C8CCD1; border-radius: 2px; border-width: 1px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); padding: 0 0 0.5rem 0; }

.main-top { padding: 0 1.5rem 0 0; align-items: center; width: 100%; box-sizing: border-box; background-image: url("http://jwiki.kr/wiki/index.php/%EB%8C%80%EB%AC%B8#/media/File:%EC%A0%9C%EC%9D%B4%EC%9C%84%ED%82%A4_%EB%A1%9C%EA%B3%A0.png"); background-position: right; background-repeat: no-repeat; }

.main-top-left { flex: 3; background-image: linear-gradient(to right, white 0%, white 33%, rgba(255, 255, 255, 0)); padding: 1rem 0 1rem 1.5rem; }

.main-top-left-subtitle { font-size: 1rem; margin-top: 0.1em; }

.main-top-left-subtitle-count { font-size: 0.95rem; }

.main-top-right { flex: 2; }

.main-top-right-text { font-size: 1rem; margin-top: 1em; margin-bottom: 0; text-align: right; }

.main-pane { display: flex; }

.main-pane-left { margin-right: 20px; } @media (max-width: 981px) { .main-pane { display: block; } .main-pane-left { margin-right: 0; } .main-top { flex-direction: column; } .main-top-left { align-self: flex-start; background-image: linear-gradient(to right, white 0%, white 66%, rgba(255, 255, 255, 0)); } .main-top-left-subtitle { font-size: 0.8em; margin-left: 0.2em; margin-top: 0; } .main-top-left>p:first-child { margin-bottom: 0; } .main-top-right { align-self: flex-end; padding-left: 1rem; } .main-top-right-text { font-size: 0.9rem; margin-top: 0; margin-bottom: 1rem; } }