@charset "UTF-8";
body{background: #ffffff;}
.d-topPanel{height: 500px;position: relative;}
.case-header-blur{position: absolute;z-index: 40;width: 100%;height: 100%;left: 0;top: 0;background: rgba(200,200,200,0.1);backdrop-filter: blur(6px);}
.d-topPanelContainer{width: 100%;height: 100%;padding:10px;box-sizing: border-box;position: absolute;top: 0;left: 0;z-index: 50;}
.case-tit-infos{width:82%;height: auto;position: absolute;z-index: 50;top:90px;left:9%;}
.case-tit-infos > .case-d-title{font-family: 'guanhei';font-weight: lighter;font-size: 20px;color:#fff;}
.case-tit-infos > .case-d-content{width:100%;height: auto;color:#fff;font-size: 13px;margin-top:10px;line-height: 18px;}
.case-header-thumb{width:360px;height: auto;position: absolute;z-index: 51;top:280px;right:calc(50% - 180px);}
.content2-wrapper{padding:15px;box-sizing: border-box;margin-top:10px;overflow: hidden;}
.ctt2-section1-wrapper{float: left;width:100%;margin-top:30px;}
.ctt2-section1-panel{position: relative;height: auto;}
.ctt2-sec1-flex-box1{float: left;width: auto;height:auto;position: relative;left:0;}
.section-title-box{width:200px;height: 50px;position: relative;}
.secs-tit-num{width:60px;height: 50px;font-family: 'kk';font-size: 36px;line-height: 56px;position: relative;}
.secs-tit-name{width:140px;height: 50px;}
.secs-tit-name > span{display: block;float: left;width:100%;}
.secs-tit-name > span:first-child{height: 32px;font-size: 28px;line-height: 32px;font-weight: lighter;color: #3b3b3b;}
.secs-tit-name > span:last-child{height: 18px;font-size: 15px;line-height: 18px;color: #919191;}
.section-min-tags{float: left;width:auto;margin-top:10px;}
.section-min-tags > span{display: block;float: left;width: fit-content;height: 24px;line-height: 24px;font-size: 16px;color:#3b3b3b;}
.section-min-tags > span::before{display: block;float: left;width:auto;height: 24px;content: "/";margin: 0 3px;line-height: 24px;font-size: 15px;font-weight: lighter;}
.section-min-tags > span:first-child:before{display: none;}
.open-case-web{width: auto;height: 36px;line-height: 36px;margin-top:10px;}
.open-case-web > span,.open-case-web > a{display: block;float: left;width: auto;height: 36px;line-height: 36px;}
.open-case-web > .iconfont{width:36px;height: 36px;text-align: center;line-height: 36px;font-size: 31px;color: #ef3017;position: relative;margin-right: 20px;}
.open-case-web > .iconfont:after{display: block;float: left;content: "";width:48px;height: 48px;background: url("../../../images/img-rec-p1.png") no-repeat;background-size:100% 100%;position: relative;z-index: 50;top: -42px;left: -6px;animation: open-case-anim 3s infinite linear;}
@keyframes open-case-anim { from{transform: rotate(0deg);} to{transform: rotate(360deg)} }
.open-case-web > a{height: 24px;line-height: 24px;margin-top:3px;}
.open-case-web > a > span{display: block;float: left;width: auto;height: 24px;line-height: 24px;font-size: 16px;position: relative;transition: 0.2s ease-in-out 0s;}
.open-case-web > a > span:first-child{padding-bottom: 1px;}
.open-case-web > a > span:first-child::before{display: block;float: left;content: "";width:100%;height: 1px;position: absolute;z-index: 50;background: #9f9f9f;bottom:0;}
.open-case-web > a:hover > span{color:var(--theme-bg-color--);}
.open-case-web > a > span:last-child{width:24px;height: 24px;text-align: center;line-height: 28px;font-size: 26px;margin-left: 5px;}
.section1-year-num{height: 36px;width: fit-content;position: relative;right: 0;font-family: 'kk';font-size: 30px;line-height: 40px;margin-top:8px;}
.secs1-infos-data{font-size: 15px;margin-top:40px;color: #797979;line-height: 25px;}
.content3-wrapper{margin-top:30px;position: relative;margin-bottom: 90px;}
.content3-in-wrapper{display: block;float: left;width:100%;height: 100%;position: absolute;z-index: 50;top: 0;left: 0;transition: 0.2s ease-in-out 0s;}
.ctt3-view-layer{position: absolute;z-index: 52;top: 0;height: 100%;background: #fff;}
.ctt3-view-lt-layer{left: 0;width:50%;}
.ctt3-view-rt-layer{right: 0;width:50%;}
.content3-preview-pc{position: relative;z-index: 60;width:80%;left:10%;aspect-ratio: 15 / 8;background:url("../../../images/case_preview_pc.png") no-repeat;background-size:100% 100%;top:80px;padding:0.8% 6.2% 3.4% 6.2%;box-sizing: border-box;}
.detail-preview-pc-img{height: 100%;width: 100%;}
.content4-wrapper{padding:10px;box-sizing:border-box;}
.ctt4-wrapper{margin-top:10px;}
.ctt4-title{text-align: center;font-size: 17px;font-weight: bold;margin-top:30px;}
.ctt4-content{text-align: center;font-size: 14px;margin-top:20px;font-weight: lighter;line-height: 24px;}
.ctt4-grid{display: grid;float: left;width:100%;grid-template-columns: repeat(2,calc(50% - 10px));gap: 20px;margin-top:30px;}
.ctt4-grid-elems{float: left;width:100%;align-items: center;}
.ctt4-grid-colors{width:90px;height: 90px;text-align: center;line-height: 90px;font-size: 15px;text-transform: uppercase;}
.ctt4-grid-rgbs{float: left;height: 24px;align-items: center;justify-content: center;margin-top:10px;}
.ctt4-grid-rgbs > span{display: block;float: left;height: 24px;width: fit-content;font-size: 14px;line-height: 24px;}
.ctt4-grid-rgbs > span::before{display: block;float: left;content: "/";width: fit-content;height: 24px;line-height: 22px;padding:0 3px;font-weight: lighter;color:#9d9d9d;}
.ctt4-grid-rgbs > span:first-child:before{display: none;}
.ctt4-screen-out{display: block;float: left;width:100%;height: 180px;border:1px solid #383838;margin:60px 0;padding:8px;box-sizing: border-box;border-radius: 8px;}
.ctt4-screen-in{display: block;float: left;width:100%;height: 100%;border:1px solid #383838;box-sizing: border-box;position: relative;}
.ctt4-vertical-lines{float: left;width: auto;height: 100%;position: relative;left: 0;top:0;align-items: center;justify-content: center;}
.ctt4-vertical-lines::before{display: block;float: left;width: 0;height: 0;position: absolute;content: "";z-index: 50;border-left: 1px dashed #888888;left: 0;top:50%;}
.ctt4-vertical-lines:last-child::after{display: block;float: left;width: 0;height: 0;position: absolute;content: "";z-index: 50;border-left: 1px dashed #888888;right: -1px;top:50%;}
.ctt4-vertical-lines:first-child:before{left: -1px;}
.ctt4-ver-anim0::before{animation: ctt4-vertical-anim 1s forwards;animation-delay: 0.1s;}
.ctt4-ver-anim1::before{animation: ctt4-vertical-anim 1s forwards;animation-delay: 0.2s;}
.ctt4-ver-anim2::before{animation: ctt4-vertical-anim 1s forwards;animation-delay: 0.3s;}
.ctt4-ver-anim3::before{animation: ctt4-vertical-anim 1s forwards;animation-delay: 0.4s;}
.ctt4-ver-anim3::after{animation: ctt4-vertical-anim 1s forwards;animation-delay: 0.5s;}
@keyframes ctt4-vertical-anim { from{height: 0;top:50%;} to{height:calc(100% + 60px);top:-30px;} }
.ctt4-vertical-num{display: block;float: left;width: fit-content;height: 30px;line-height: 30px;font-size: 12px;color: #424242;}
.content5-wrapper{padding:0 10px;box-sizing: border-box;}
.content5-wrapper{padding-bottom: 30px;}
.ctt5-thumb-full{display: block;float: left;width:100%;border:8px solid #2c2c2c;background: #2c2c2c;box-sizing: border-box;border-radius: 8px;margin-top:20px;box-shadow: 0 15px 20px rgba(0,0,0,0.3);}
.content6-wrapper{padding: 10px;box-sizing: border-box;position: relative;}
.ctt6-wrapper{height: 320px;margin-top:40px;position: relative;overflow: hidden;}
.ctt6-alpha-layer{height: 100%;position: absolute;z-index: 60;top: 0;left: 0;}
.ctt6-effect-img{height: 100%;position: absolute;z-index: 50;left: 0;top: 0;object-fit: cover;animation: ctt6-effect-anim 20s infinite linear;}
@keyframes ctt6-effect-anim { 0%{transform: scale(1);} 50%{transform: scale(1.2);} 100%{transform: scale(1);} }
.ctt6-plaltfrom-boxs{position: absolute;z-index: 70;border:6px solid #282828;background: #d3d3d3;box-sizing: border-box;border-radius: 16px;display: none;}
.ctt6-plaltfrom-mob{display: block;border:2px solid #282828;width:15%;aspect-ratio: 100 / 180;border-radius: 4px;left:3%;top:10%;z-index: 70;max-width: 118px;overflow: hidden;}
.ctt6-plaltfrom-pc{display: block;border:3px solid #282828;width:48%;aspect-ratio: 100 / 60;border-radius: 4px;left:20%;top:1%;z-index: 71;max-width: 376px;overflow: hidden;}
.ctt6-plaltfrom-tablet-v{display: block;border:2px solid #282828;width:25%;aspect-ratio: 100 / 142;border-radius: 4px;right:2%;top:5%;z-index: 73;max-width: 196px;overflow: hidden;}
.ctt6-plaltfrom-tablet-h{display: block;border:2px solid #282828;width:35%;aspect-ratio: 124 / 80;border-radius: 4px;left:28%;top:30%;max-width: 274px;z-index: 74;overflow: hidden;}
.ctt6-plaltfrom-boxs > img{object-fit: cover;}
.content7-wrapper{padding:0 10px;box-sizing: border-box;}
.ctt7-wrapper{height:280px;position: relative;margin-top:30px;}
.ctt7-in-wrapper{position: absolute;z-index: 50;left: 0;top: 0;width: 100%;height: 100%;}
.ctt7-view-layer{position: absolute;z-index: 52;top: 0;height: 100%;background: #fff;}
.ctt7-view-lt-layer{left: 0;width:50%;}
.ctt7-view-rt-layer{right: 0;width:50%;}
.cases-recomed-out{margin-top:30px;}
.goto-top-box{float: left;width:100%;align-items: center;justify-content: center;margin-top:30px;}
.goto-top-out{width:60px;height: 60px;position: relative;cursor: pointer;}
.case-dtl-up{width:60px;height: 60px;text-align: center;line-height: 60px;font-size: 36px;color: #f6351e;transition: 0.2s ease-in-out 0s;}
.goto-top-out::before{display: block;float: left;width:80px;height: 80px;content: "";background: url("../../../images/case-rotate-point-six.png") no-repeat;background-size:100% 100%;position: absolute;z-index: 50;top: -10px;left: -10px;opacity: 0.6;animation: goto-top-bf-anim 2s infinite linear;}
@keyframes goto-top-bf-anim { from{transform: rotate(0deg);} to{transform: rotate(360deg);} }
@media (min-width: 640px){
    .d-topPanel{height: 440px;}
    .case-tit-infos{width:92%;left:4%;}
    .d-topPanelContainer{width:600px;left:calc(50% - 300px);}
    .case-header-thumb{width:520px;right:calc(50% - 260px);top:190px;}
    .content3-wrapper{margin-bottom: 90px;margin-top:40px;}
    .content3-preview-pc{top:50px;}
    .ctt4-grid{grid-template-columns: repeat(4,calc((100% - 30px) / 4));gap: 10px;}
    .ctt6-wrapper{height: 420px;margin-top:50px;}
    .ctt6-plaltfrom-mob{left:3%;top:10%;max-width: 118px;}
    .ctt6-plaltfrom-pc{left:20%;top:1%;max-width: 376px;}
    .ctt6-plaltfrom-tablet-v{right:2%;top:5%;max-width: 196px;}
    .ctt6-plaltfrom-tablet-h{left:14%;top:30%;max-width: 274px;}
    .ctt7-wrapper{height:340px;margin-top:50px;}
    .cases-recomed-out{margin-top:50px;}
    .goto-top-box{margin-top:40px;}
}
@media (min-width: 768px){
    .d-topPanel{height: 480px;}
    .d-topPanelContainer{width:680px;left:calc(50% - 340px);}
    .case-header-thumb{width:580px;right:calc(50% - 290px);top:190px;}
    .ctt2-section1-wrapper{width:738px;margin-left: calc((100% - 738px) / 2);}
    .content3-wrapper{margin-top:80px;margin-bottom: 140px;padding-bottom: 0;}
    .content3-preview-pc{top:140px;}
    .ctt4-grid{grid-template-columns: repeat(4,calc((100% - 60px) / 4));gap: 20px;}
    .ctt4-screen-out{margin:90px 0;padding:20px;height: 320px;}
    .ctt4-grid,.ctt4-title,.ctt4-content,.ctt4-screen-out{width:738px;margin-left: calc((100% - 738px) / 2);}
    .ctt4-title{font-size: 25px;font-weight: lighter;margin-top:50px;}
    .ctt4-content{font-size: 15px;margin-top:20px;font-weight: lighter;line-height: 28px;}
    .ctt4-vertical-lines::before{height: 0;top:50%;}
    .ctt4-vertical-lines:last-child::after{height: 0;top:-60px;right: -1px;}
    .ctt4-vertical-num{font-size: 15px;}
    @keyframes ctt4-vertical-anim { from{height: 0;top:50%;} to{height: calc(100% + 120px);top:-60px;} }
    .ctt5-thumb-full{width:738px;margin-left: calc((100% - 738px) / 2);margin-top:40px;}
    .ctt6-wrapper{height: 580px;}
    .ctt6-plaltfrom-mob{left:2%;top:12%;max-width: 180px;}
    .ctt6-plaltfrom-pc{left:28%;top:4%;max-width: 480px;}
    .ctt6-plaltfrom-tablet-v{right:4%;top:8%;max-width: 320px;}
    .ctt6-plaltfrom-tablet-h{left:14%;top:40%;max-width: 390px;}
    .ctt7-wrapper{height:380px;margin-top:70px;}
    .cases-recomed-out{margin-top:70px;}
    .goto-top-box{margin-top:70px;}
}
@media (min-width: 992px){
    .d-topPanel{height: 520px;}
    .case-tit-infos{top:90px;}
    .case-tit-infos > .case-d-title{font-size: 28px;}
    .case-tit-infos > .case-d-content{font-size: 15px;margin-top:20px;line-height: 24px;}
    .case-header-thumb{top:230px;}
    .ctt2-section1-wrapper{width:960px;margin-left: calc((100% - 960px) / 2);margin-top:80px;}
    .section-title-box{height: 60px;width:240px;}
    .secs-tit-num{height: 60px;width:70px;line-height: 66px;font-size: 42px;}
    .secs-tit-name{width:170px;height: 60px;} /* 140 */
    .secs-tit-name > span:first-child{height: 38px;font-size: 34px;line-height: 38px;}
    .secs-tit-name > span:last-child{height: 22px;font-size: 18px;line-height: 22px;}
    .section-min-tags{margin-top:20px;}
    .section-min-tags > span{height: 30px;line-height: 30px;font-size: 19px;}
    .section-min-tags > span::before{height: 30px;margin: 0 5px;line-height: 30px;font-size: 19px;}
    .section1-year-num{height: 50px;font-size: 36px;line-height: 50px;margin-top:16px;}
    .secs1-infos-data{font-size: 15px;margin-top:50px;line-height: 28px;}
    .content3-wrapper{margin-bottom: 180px;margin-top:100px;}
    .content3-preview-pc{top:220px;}
    .ctt4-screen-out{margin:180px 0;height: 380px;}
    .ctt4-grid,.ctt4-title,.ctt4-content,.ctt4-screen-out{width:960px;margin-left: calc((100% - 960px) / 2);}
    .ctt4-title{font-size: 28px;margin-top:50px;}
    .ctt4-content{font-size: 15px;font-weight: lighter;line-height: 28px;}
    .ctt4-vertical-lines::before{height: 0;top:50%;}
    .ctt4-vertical-lines:last-child::after{height: 0;top:-80px;right: -2px;}
    @keyframes ctt4-vertical-anim { from{height: 0;top:50%;} to{height: calc(100% + 160px);top:-80px;} }
    .ctt5-thumb-full{width:960px;margin-left: calc((100% - 960px) / 2);margin-top:60px;}
    .ctt6-wrapper{height: 680px;}
    .ctt6-plaltfrom-mob{left:2%;top:12%;max-width: 180px;}
    .ctt6-plaltfrom-pc{left:20%;top:4%;max-width: 680px;}
    .ctt6-plaltfrom-tablet-v{right:4%;top:8%;max-width: 480px;}
    .ctt6-plaltfrom-tablet-h{left:14%;top:40%;max-width: 440px;}
    .ctt7-wrapper{height:420px;margin-top:80px;}
    .cases-recomed-out{margin-top:80px;}
    .goto-top-box{margin-top:90px;}
}
@media (min-width: 1200px){
    .d-topPanel{height: 580px;}
    .d-topPanelContainer{width:1180px;left:calc(50% - 590px);}
    .case-tit-infos{width: 40%;left:5%;top:270px;}
    .case-tit-infos > .case-d-title{font-size: 34px;}
    .case-tit-infos > .case-d-content{font-size: 16px;margin-top:20px;line-height: 24px;}
    .case-header-thumb{width:49%;left:48%;top:200px;}
    .ctt2-section1-wrapper{width:1160px;margin-left: calc(50% - 580px);margin-top:120px;}
    .ctt2-section1-wrapper{flex-direction: row;justify-content: space-between;}
    .ctt2-section1-panel,.secs1-infos-data{width: calc(50% - 10px);}
    .section1-year-num{margin-top:100px;}
    .secs1-infos-data{margin-top:94px;}
    .section-min-tags{margin-top:40px;}
    .content3-wrapper{margin-bottom: 220px;margin-top:140px;}
    .content3-preview-pc{top:260px;}
    .ctt4-grid,.ctt4-title,.ctt4-content{width:1160px;margin-left: calc(50% - 580px);}
    .ctt4-title{margin-top:90px;}
    .ctt4-content{font-size: 16px;line-height: 25px;}
    .ctt4-grid{margin-top:80px;}
    .ctt4-screen-out{width:1160px;margin-left: calc(50% - 580px);height: 560px;}
    .ctt4-vertical-num{font-size: 16px;}
    .ctt5-thumb-full{width:1160px;margin-left: calc(50% - 580px);}
    .ctt6-plaltfrom-mob{left:15%;top:12%;max-width: 180px;border:3px solid #282828;}
    .ctt6-plaltfrom-pc{left:27%;top:4%;max-width: 620px;border:7px solid #282828;}
    .ctt6-plaltfrom-tablet-v{right:15%;top:8%;max-width: 340px;border:4px solid #282828;}
    .ctt6-plaltfrom-tablet-h{left:36%;top:36%;max-width: 480px;border:4px solid #282828;}
    .ctt7-wrapper{height:660px;margin-top:100px;}
    .cases-recomed-out{margin-top:120px;}
    .goto-top-box{margin-top:100px;}
}
@media (min-width: 1440px){
    .d-topPanelContainer{width:1380px;left:calc(50% - 690px);}
    .case-tit-infos{width: 40%;left:5%;top:270px;}
    .ctt2-section1-wrapper{width:1390px;margin-left: calc((100% - 1390px) / 2);}
    .content3-wrapper{margin-bottom: 360px;margin-top:160px;}
    .content3-preview-pc{top:340px;}
    .ctt4-grid,.ctt4-title{width:1200px;margin-left: calc(50% - 600px);}
    .ctt5-thumb-full{width:1200px;margin-left: calc(50% - 600px);}
    .ctt7-wrapper{height:820px;}
    .goto-top-box{margin-top:120px;}
}
@media (min-width: 1560px){
    .d-topPanelContainer{width:90%;left:5%;}
    .case-tit-infos{top:220px;}
    .case-header-thumb{top:100px;width:56%;left:45%;}
    .ctt2-section1-wrapper{width:1480px;margin-left: calc(50% - 740px);}
    .ctt5-thumb-full{width:1480px;margin-left: calc(50% - 740px);}
    .ctt7-wrapper{height:960px;margin-top:140px;}
}