.header-pc-children-group { position: absolute; background-color: #fff; min-width: 100%; top: 100%; text-align: center; word-break: keep-all; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); max-height: 0; overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); font-size: 16px; color: #666; } #component--header-msunhealth--pc .group_cp:hover .header-pc-children-group { max-height: 300px; padding: 10px 0; } .header-pc-children-item-link { display: block; color: inherit; font-size: inherit; padding: 0.5em 1em; -webkit-transition: 0.5s; transition: 0.5s; } #component--header-msunhealth--pc .group_cp:hover .header-pc-children-group-alpaca { max-height: 100vh; } .header-pc-children-group-alpaca .wrappercp { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 0.8em; } .header-pc-children-group-alpaca .left_cp { -ms-flex-negative: 0; flex-shrink: 0; background-color: #fbfbfb; padding-bottom: 3em; } .header-pc-children-group-alpaca .left-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0.75em 2em; cursor: pointer; -webkit-transition: 0.5s; transition: 0.5s; } .header-pc-children-group-alpaca .left-item > a { color: inherit; } .header-pc-children-group-alpaca .left-item-icon-box { position: relative; margin-right: 0.5em; } .header-pc-children-group-alpaca .left-item-icon { display: block; max-width: 3em; -webkit-transition: 0.5s; transition: 0.5s; } .header-pc-children-group-alpaca .left-item-icon.active { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; opacity: 0; } .header-pc-children-group-alpaca .left-item.over { background-color: #005fe6; color: #fff; } .header-pc-children-group-alpaca .left-item.over .left-item-icon.active { opacity: 1; } .header-pc-children-group-alpaca .right_cp { padding: 12px 2vw; } .header-pc-children-group-alpaca .right-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 0; overflow: hidden; opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; } .header-pc-children-group-alpaca .right-content.show { height: auto; opacity: 1; } .header-pc-children-group-alpaca .right-item { width: 100%; color: #000000; word-break: break-word; border-bottom: 1px solid #dcdcdc; } .header-pc-children-group-alpaca .right-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: inherit; color: inherit; padding: 0.75em 3px; -webkit-transition: 0.5s; transition: 0.5s; } .header-pc-children-group-alpaca .right-link p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .header-pc-children-group-alpaca .right-item-arrow { font-size: 1em; -webkit-transform: translateX(-1em); transform: translateX(-1em); opacity: 0; -webkit-transition: 0.5s; transition: 0.5s; } .header-pc-children-group-alpaca .right-link:hover { color: #005fe6; } .header-pc-children-group-alpaca .right-link:hover .right-item-arrow { -webkit-transform: translateX(2px); transform: translateX(2px); opacity: 1; } @media screen and (max-width: 1600px) { .header-pc-children-group-alpaca .right-item { width: 100%; border-bottom: 1px solid #dcdcdc; } } @media screen and (max-width: 1400px) { .header-pc-children-group-alpaca { font-size: 18px; padding: 0; } .header-pc-children-group-alpaca .right-item { width: 100%; border-bottom: 1px solid #dcdcdc; } } @media screen and (max-width: 1024px) { .header-pc-children-group-alpaca .right-item { width: 100%; border-bottom: 1px solid #dcdcdc; } }