.hero{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .hero-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative;} .hero-title{text-transform: uppercase;width:100%;margin-top:60px;font-family:"Julius Sans One";font-size:clamp(28px,3.3vw,44px);font-weight:700;line-height:1.2;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .hero-intro{padding:0 20px;margin-top:20px;font-size:var(--font-size-5);font-weight:300;line-height:1.4;color:#d9f7ff} .hero-nav{width:90%;height:auto;overflow:hidden;margin:30px auto 0;padding:10px;position:relative;background:rgba(15,15,15,.25);border-radius:10px;} .hero-nav li{float:left;background:#fff;cursor:pointer;line-height:normal;width:100%;height:40px;line-height:40px;border-radius:3px;margin-right:0;margin-bottom:10px;font-size:var(--font-size-5);position:relative} .hero-nav li:last-child{margin-bottom:0} .hero-nav li:hover,.hero-nav li.active{color:var(--color-main);} .hero-nav li i{position:absolute;top:0px;right:10px;font-size:var(--font-size-5);transition:transform .3s ease} .hero-nav li.active i{transform: rotate(-180deg);} .hero-menu{position:relative;z-index:9;} .hero-menu ul{width:calc(90% - 180px);height:auto;overflow:hidden;z-index:3;background:#FFF;border-radius:3px;padding:10px;position:absolute;top:0;left:calc(5% + 10px);box-shadow:0 2px 8px rgba(0,0,0,.1);display:none;} .hero-menu ul li{width:100%;min-height:30px;line-height:30px;position:relative;cursor:pointer;} .hero-menu ul li a{color:#333;} .hero-menu ul li:hover,.hero-menu ul li:hover a{color:var(--color-main);font-weight:600;} .hero-menu ul li i{display:inline-block;font-style:normal;width:30px;text-align:right;margin-right:10px;} #menu-major{top:-50px;left:calc(5% + 10px);width:calc(90% - 20px);} #menu-major li{width:50%;float:left;} #menu-minor{left:calc(95% - 160px);width:150px;text-align:right;padding:10px 15px;} #menu-minor li{font-size:var(--font-size-5);} #menu-minor li i{position:absolute;top:0px;left:-5px;transition:transform .3s ease;text-align:left;} @media (min-width :992px){ .hero-title{margin-top:80px;} .hero-intro{padding:0 50px;} .hero-nav{width:630px;height:60px;} .hero-nav li{width:300px;margin-right:10px;margin-bottom:10px;} .hero-nav li:last-child{margin-right:0} .hero-menu ul{width:300px;left:calc(50% - 305px);} #menu-major{top:0;left:calc(50% - 305px);width:610px;} #menu-major li{width:33%;} #menu-major li:nth-child(2n){width:33%;} #menu-minor{left:calc(50% + 5px);width:300px;} } .hero-footer{width:100%;height:auto;position:relative} .hero-footer img{width:100%;z-index:1;} .detail{width:100%;overflow:hidden;box-shadow:var(--shadow-main);border-radius:10px;background-color:#fff} .detail-title{width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 var(--gap);} .detail-title h1{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);line-height:1.2;padding:20px 0;margin-bottom:0;} .detail-content{width:100%;height:auto;padding:var(--gap);overflow:hidden;position:relative} .detail-left{float:left;width:100%;height:auto;overflow:hidden;margin-bottom:var(--gap);} .detail-image img{width:100%;height:auto;border-radius:10px;padding:14px;background:#f1f2f3;margin-bottom:16px;} .detail-right{float:left;width:100%;height:auto;overflow:hidden;padding-left:0;} .detail-right > h2{width:100%;height:40px;line-height:1;font-size:var(--font-size-7);margin-bottom:20px;} .detail-right h3{width:100%;font-size:var(--font-size-6);margin-bottom:5px;color:var(--color-main)} .detail-right h4{width:100%;font-size:var(--font-size-5);margin-bottom:5px;color:var(--color-main);} .detail-right h4::before {content: "•";padding-right: 5px;} .detail-right strong{color:#666} .detail-right p{font-size:var(--font-size-5);margin-bottom:15px} .detail-right > section{margin-top:var(--gap);} .detail-right > section:first-child{margin-top:0;} .detail-right ol{margin:15px 0;padding-left:20px;counter-reset:item;font-size:var(--font-size-5);} .detail-right ol li{position: relative;padding-left:15px} .detail-right ol li:before{content:counters(item, ".") ".";counter-increment:item;position: absolute;left: -20px;} .detail-menu{width:100%;height:auto;overflow:hidden;background:#f1f2f3;color:#555;padding:15px 20px;border-radius:10px;position:relative;border:1px solid #ddd;} .detail-menu .menu-title{width:100%;height:auto;cursor:pointer;font-size:var(--font-size-6);color:var(--color-main)} .detail-menu .menu-title i{position:absolute;top:10px;right:15px;font-size:var(--font-size-8);transition:transform .3s ease} .detail-menu .menu-list{text-transform:capitalize;counter-reset:item;font-size:var(--font-size-3);margin: 0;padding: 0;} .detail-menu .menu-list > li{margin-top:15px;margin-left: 15px;padding-left:15px;position: relative;} .detail-menu .menu-list > li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -10px;} .detail-menu .menu-list li ol{margin-top:5px;padding-left:30px;counter-reset:item} .detail-menu .menu-list li ol li{position: relative;padding-left:10px} .detail-menu .menu-list li ol li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -28px;} @media (min-width :992px){ .detail-left{width:30%;} .detail-image img{padding:20px;margin-bottom:20px;} .detail-right{float:right;width:70%;padding-left:30px;} .detail-menu{border:none;} .detail-menu .menu-title i{right:20px;} } .detail-tab{width:100%;height:46px;margin-bottom:20px;border-bottom:1px solid var(--color-main);padding-left:30px;overflow: hidden;white-space: nowrap;display:flex;} .detail-tab .tab-item{display:inline-block;padding:0 5px;background-color:#f1f2f3;z-index:2;position:relative;cursor:pointer;color:#777;border-radius:8px 8px 0 0;text-align:center;transition:all 250ms ease;font-size:var(--font-size-5);margin-right:40px;margin-bottom:0;height:46px;line-height:46px;} .detail-tab .tab-item:after,.detail-tab .tab-item:before{display:block;content:" ";position:absolute;top:0;height:100%;width:30px;background-color:#f1f2f3;transition:all 250ms ease;z-index:-1} .detail-tab .tab-item:before{right:-15px;transform:skew(30deg,0deg);box-shadow:rgba(0,0,0,.1) 3px 2px 5px,inset rgba(255,255,255,.09) -1px 0;border-radius:0 8px 0 0} .detail-tab .tab-item:after{left:-15px;transform:skew(-30deg,0deg);box-shadow:rgba(0,0,0,.1) -3px 2px 5px,inset rgba(255,255,255,.09) 1px 0;border-radius:8px 0 0 0} .detail-tab .tab-item:hover{margin-right:40px;} .detail-tab .tab-item:hover,.detail-tab .tab-item:hover:after,.detail-tab .tab-item:hover:before{color:var(--color-main);} .detail-tab .active{margin-right:40px;z-index:3;position: relative;} .detail-tab .active,.detail-tab .active:hover,.detail-tab .active:after,.detail-tab .active:before{background-color:var(--color-main);color:#fff} .insight-filter{display:flex;align-items:stretch;justify-content:center;margin-bottom:20px;} .insight-filter-label{display:inline-flex;align-items:center;height:45px;padding:0 30px 0 15px;font-size:var(--font-size-3);color:#333;margin:0;background:#fafafa;border:1px solid #ddd;border-right:none;border-radius:5px 0 0 5px;cursor:default;} .insight-filter-select{width:200px;height:45px;padding:0 30px 0 15px;font-size:var(--font-size-3);color:#333;background:#fff;border:1px solid #ddd;border-radius:0 5px 5px 0;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;} .insight-filter-select:hover,.insight-filter-select:focus{border-color:var(--color-main);outline:none;} .insight-filter-select option{font-size:var(--font-size-3);padding:8px;} .insight-list{display:grid;grid-template-columns:1fr;gap:10px 15px;} @media (min-width:768px){ .insight-list{grid-template-columns:repeat(2, 1fr);} } .insight-list .insights-item{display:flex;align-items:center;gap:10px;overflow:hidden;text-decoration:none;color:inherit;} .insight-list .insights-item .item-thumb{flex-shrink:0;width:80px;height:45px;overflow:hidden;border-radius:3px;} .insight-list .insights-item .item-thumb img{width:100%;height:100%;object-fit:cover;} .insight-list .insights-item .item-title{margin:0;flex:1;min-width:0;height:50px;line-height:25px;font-size:var(--font-size-3);font-weight:400;color:var(--color-main);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;} .insight-list-empty,.insight-list-loading{grid-column:1/-1;margin:0;padding:0px;text-align:center;color:#888;font-size:var(--font-size-3);} .card-tags{margin-top:var(--gap);} .tag-title{font-size:var(--font-size-6);color:var(--color-main);margin-bottom:10px} .tag-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;} .tag-list .tag-item{ display:flex;align-items:stretch;justify-content:flex-end;gap:0;padding:0;border:1px solid #ddd;border-radius:5px;background:#fff;flex-grow:1;flex-shrink:0;line-height:1;overflow:hidden;} .tag-list .tag-link{ display:flex;align-items:center;flex:1;color:var(--color-main);font-weight:400;text-decoration:none;white-space:nowrap;padding:10px 15px;} .tag-list .icon-lightbulb{ display:flex;align-items:center;justify-content:center;padding-right:15px;cursor:pointer;color:var(--color-main);transition:color .2s ease, transform .15s ease;} .tag-list .tag-item:hover, .tag-list .tag-item:hover .tag-link, .tag-list .tag-item:hover .icon-lightbulb{background:#5a32ff;color:#fff;} .js-enabled .interpretation { display: none;} .heading-title{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:var(--font-size-8);color:var(--color-main);padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .detail-description{padding-bottom:20px} .section{ width: 100%;height: auto;overflow: hidden;background: #fff;box-shadow:var(--shadow-main);border-radius: 10px;padding: var(--gap);margin-top: var(--gap);} .section .section-title{ width: 100%;line-height: 1.2;font-size: var(--font-size-7);color: var(--color-main);text-align: center;border-bottom:1px solid #eee;padding:0 0 var(--gap) 0;margin-bottom:var(--gap);} .section h1.section-title {font-size:var(--font-size-8);} .section .explanation ul li{list-style:disc} .section .explanation .explanation-image{ float: right;width: 500px;max-width: 40%;height: auto;margin: 0 0 var(--gap) var(--gap);border-radius: 5px;shape-outside: margin-box;shape-margin: var(--gap);} @media (max-width: 640px) { .section .explanation .explanation-image{ float: none;display: block;width: 100%;max-width: 100%;margin: 0 0 var(--gap) 0;} } .section .collection{ margin-top:var(--gap)} .topic-filter{display:flex;align-items:stretch;justify-content:center;margin:var(--gap) 0;} .topic-filter-label{display:inline-flex;align-items:center;height:45px;padding:0 var(--gap);font-size:var(--font-size-3);color:#333;margin:0;background:#fafafa;border:1px solid #ddd;border-right:none;border-radius:5px 0 0 5px;cursor:default;} .topic-filter-select{width:200px;height:45px;padding:0 30px 0 15px;font-size:var(--font-size-3);color:#333;background:#fff;border:1px solid #ddd;border-radius:0 5px 5px 0;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;} .topic-filter-select:hover,.topic-filter-select:focus{border-color:var(--color-main);outline:none;} .topic-filter-select option{font-size:var(--font-size-3);padding:8px;} .related-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;} .related-list .related-item{ background:#fff;border:1px solid #ddd;color:#333;border-radius:5px;padding:10px 15px;line-height:1;white-space:nowrap;flex-grow:1;flex-shrink:0;} .related-list .related-item:hover{background:#5a32ff;color:#fff;} .card-list{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:10px;} .card-list .card-item{ display:flex;align-items:stretch;justify-content:flex-end;gap:0;padding:0;border:1px solid #ddd;border-radius:5px;background:#fff;flex-grow:1;flex-shrink:0;line-height:1;overflow:hidden;} .card-list .card-link{ display:flex;align-items:center;flex:1;color:var(--color-main);font-weight:400;text-decoration:none;white-space:nowrap;padding:10px 15px;} .card-list .card-group{ display:flex;align-items:stretch;border-left:1px solid #ddd;} .card-list .card-group .orientation{ display:flex;align-items:center;padding:0 15px;white-space:nowrap;color:#666;} .card-list .card-group .icon-lightbulb{ display:flex;align-items:center;justify-content:center;padding:10px 15px;cursor:pointer;color:var(--color-main);transition:color .2s ease, transform .15s ease;} .card-list .card-group { cursor: pointer;} .card-list .card-item:hover, .card-list .card-item:hover * { background: #5a32ff !important;color: #fff !important;} .card-list .card-item:hover .card-group { border-color: rgba(255,255,255,0.35);} .card-list .card-empty{ width: 100%;color:#777;text-align:center;font-style:italic;} .js-enabled .interpretation { display: none;} .modal-overlay { position: fixed;inset: 0;z-index: 999;background: rgba(0, 0, 0, .45);opacity: 0;transition: opacity .25s ease;display: flex;align-items: center;justify-content: center;padding: 20px;} .modal-overlay.is-open { opacity: 1;} .modal-dialog { position: relative;z-index: 1000;background: #fff;border-radius: 10px;width: 100%;max-width: 560px;max-height: 80vh;display: flex;flex-direction: column;box-shadow: 0 20px 60px rgba(0, 0, 0, .25);transform: translateY(20px);transition: transform .25s ease;} .modal-overlay.is-open .modal-dialog { transform: translateY(0);} .modal-dialog-header { display: flex;align-items: center;justify-content: space-between;padding: 15px 0 15px 20px;border-bottom: 1px solid #eee;} .modal-dialog-title { margin: 0;font-size: 17px;font-weight: 700;color: var(--color-main);} .modal-dialog-close { position: absolute;top: 10px;right: 10px;display: flex;align-items: center;justify-content: center;width: 30px;height: 30px;background: none;border: none;font-size: 30px;color: #999;cursor: pointer;transition: all .15s ease;} .modal-dialog-close:hover { color: #F00;} .modal-dialog-body { padding: 20px;overflow-y: auto;flex: 1;font-size: 15px;line-height: 1.7;color: #333;white-space: normal;word-break: break-word;} .modal-dialog-body p { margin: 0 0 10px;} .modal-dialog-body p:last-child { margin-bottom: 0;}