@import url('//ui.gg/lib/font/font.css');

/* basic */
* {font-family: 'montserrat' !important;}
body,
load {background-color: var(--000);}
.subject {display: flex;flex-direction: column;height: 100%;overflow: hidden;}
.clause {height: 100%;background-size: cover;overflow: auto;}
.contant {width: 80%;min-height: 100%;max-width: 2000px;background-color: var(--000-9);}

::-webkit-scrollbar-thumb {background-color: var(--fff-3);}

/* color */
:root {
    --color: #ff4800;
}

/*btn*/
.btn {border-radius: 5px;}

/* logo */
.logo {position: relative;z-index: 3;flex: 1;height: 100%;}
.logo h1 {display: flex;align-items: center;justify-content: center;}
.logo h1 i {width: 80px;margin-right: 30px;display: block;}
.logo h1 span {text-transform: uppercase;font-weight: lighter;color: white;letter-spacing: 20px;font-size: 36px;}

/*light*/
.light {height: 100vh;width: 100vw;position: fixed;left: 0;top: 0;}

/*service*/
.service {height: 400px;z-index: 1;padding: 20px;background-image: linear-gradient(transparent,black);}
.service .swiper {border-radius: 10px;}
.service a {border-radius: 10px;color: white;padding: 40px 30px;background-position: right bottom;}
.service a i {font-size: 36px;transition-duration: .3s;}
.service a:hover i {color: var(--color);}
.service a span {transition-duration: .3s;display: block;font-size: 30px;}
.service a:hover span {padding-top: 10px;}

/*im*/
.im {position: fixed;top: 0;right: 0;z-index: 3;margin: 15px;animation-delay: 1s;}
.im li {margin: 5px;}
.im a {background-color: var(--color);color: white;width: 50px;height: 50px;display: flex;border-radius: 100%;}
.im a:hover {background-color: var(--333);}

/*head*/
.head {background-color: var(--222);z-index: 1;}
.head-back {width: 70px;height: 70px;display: block;padding: 15px;background-color: var(--333);}

/* article */
.article {padding: 50px;}
.article-title {margin-bottom: 30px;}
.article-title h3 {text-align: center;color: white;font-size: 36px;padding: 30px 0;border-bottom: 1px var(--333) solid;}
.article-title aside {padding: 20px 0;display: flex;align-items: center;justify-content: center;}
.article-title aside span {color: var(--666);padding: 0 20px;}
.article-cont {background-color: var(--222);padding: 30px;border-radius: 20px;}
.article-cont iframe,
.article-cont video {width: 100% !important;margin: auto;}

article {color: var(--999);line-height: 180%;}
article h1,article h2,article h3,article h4,article h5,article h6 {color: white;line-height: 180%;}
article img {border-radius: 10px;}
article a {color: var(--color);}
article table caption {color: white;padding: 15px 0;}
article table th,
article table td {height: 35px;text-align: center;border: 1px var(--666) solid;}

/* reminder */
reminder {background-color: var(--222);border: 0;color: var(--999);border-radius: 10px;}
reminder a {color: white;}
reminder hr {opacity: .2;}

/* table */
.table {margin: 20px 0;}
.table table {color: var(--999);}
.table table th, .table table td {background-color: var(--222);}
.table table tr {}
.table table td {}
.table table tbody tr:nth-child(2n) th, .table table tbody tr:nth-child(2n) td {background-color: var(--333);}
.table table thead td,.table table thead th {color: var(--color);}
.table table thead {cursor: pointer;}
.table table *:first-child tr:first-child *:first-child {border-radius: 10px 0 0 0;}
.table table *:first-child tr:first-child *:last-child {border-radius: 0 10px 0 0;}
.table table tbody tr:last-child *:first-child {border-radius: 0 0 0 10px;}
.table table tbody tr:last-child *:last-child {border-radius: 0 0 10px 0;}
.table table a[pop="thumb"] {width: 40px;display: block;margin: auto;}
.table table a[pop="thumb"] img {border-radius: 5px;}

.table-lens table tr td {text-align: right;}
.table-lens table tr td:nth-child(2n) {text-align: left;}

/*pop*/
pop[pop="thumb"] pop-main {max-width: 520px;}
pop[pop="source"] pop-main,
pop[pop="source"] pop-main pop-cont {width: 100%;height: 100%;max-height: 100%;max-width: 100%;}
pop[pop="source"] pop-cont {background-color: transparent;padding: 20px;}
pop-cont {padding: 0;}

/* tab */
tab {}
tab-list {margin-bottom: 50px;text-align: center;}
tab-list li {margin: 2px 0;float: none;display: inline-block;}
tab-list li a {height: 50px;line-height: 50px;background-color: var(--222);padding: 0 30px;color: white;font-size: 18px;border-radius: 5px;}
tab-list li.active a {background-color: var(--color);}
tab-cont {}
tab-group {}

/* join */
.join {text-align: center;z-index: 3;}
.join h3 {margin-bottom: 50px;font-size: 100px;font-weight: lighter;color: white;}
.join-cont * {margin: 0 5px;border-radius: 5px;}
.join-cont a {text-transform: uppercase;}
.join-cont input {background-color: white;width: 200px;}

/* tool */
.tool fold-group {margin-bottom: 20px;}
.tool fold-title {background-color: var(--222);padding: 20px;border-radius: 10px;border: 0;}
.tool fold-title span {padding: 0 10px;color: var(--666);text-transform: capitalize;}
.tool fold-title h5 {color: white;}
.tool fold-title .ico {color: var(--color);}
.tool fold-cont {background-color: var(--111);border-radius: 0 0 10px 10px;}
.tool article {padding: 10px;}
.tool fold-group.active fold-title {border-radius: 10px 10px 0 0;}

/* view */
.view {display: grid;grid-template-columns: 1fr 1fr;grid-gap: 20px;}
.view-group {background-color: white;border-radius: 10px;position: relative;overflow: hidden;}
.view-group a {display: block;width: 100%;}
.view-camera {position: absolute;mix-blend-mode: multiply;}
.view-lens {}
.view-select {padding: 30px;}
.view-select tab-list {margin-bottom: 20px;}
.view-select tab-group {overflow: hidden;}
.view-select tab-group a {padding: 10px 20px;background-color: var(--eee);border-radius: 100px;display: block;float: left;margin: 5px 2px;}
.view-select tab-group a:hover {background-color: var(--color);color: white;}

/* sample */
.sample {}
.sample ul {column-count: 4;column-gap: 2px;}
.sample ul li {padding-bottom: 2px;break-inside: avoid;}
.sample ul li a {width: 100%;height: 100%;display: block;overflow: hidden;position: relative;}
.sample ul li a span {position: absolute;left: 0;bottom: 0;color: white;padding: 5px 10px;background-color: var(--000-9);margin: 10px;opacity: 0;border-radius: 20px;transition-duration: .3s;text-transform: capitalize;}
.sample ul li a:hover span {opacity: .9;}

/* simulate */
.simulate {margin: auto;}
.simulate-cont {height: 800px;position: relative;border-radius: 10px;overflow: hidden;filter: brightness(100%);}
.simulate-bg,
.simulate-character,
.simulate-noise {width: 100%;height: 100%;background-size: cover;position: absolute;top: 0;left: 0;}
.simulate-bg {background-image: url(//tool.sony.im/images/knowledge/simulate/bg.jpg);filter: blur(5px);transform: scale(1.6)}
.simulate-character {background-image: url(//tool.sony.im/images/knowledge/simulate/character.png);transform: scale(1.15)}
.simulate-noise {background-image: url(//tool.sony.im/images/knowledge/simulate/noise.png);mix-blend-mode: soft-light;opacity: 0;}
.simulate-col {background-color: var(--222);border-radius: 10px;margin-top: 20px;padding: 10px 40px;}
.simulate-col li {display: flex;align-items: center;margin: 10px 0;}
.simulate-col h5 {color: white;font-size: 20px;width: 150px;}
.simulate-col input {flex: 1;}

/* form */
.form {}
.form li {color: white;}
.form li input,
.form li select,
.form li textarea {background-color: var(--333);color: white;border-radius: 5px;}
.form li cite {color: var(--666);}

/* message */
.message {background-color: var(--222);padding: 40px;border-radius: 10px;}

/* product */
.product {display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20px;}
.product-group {background-color: var(--222);padding: 20px;border-radius: 10px;transition-duration: .3s;}
.product-group:hover {background-color: var(--333);}
.product-title {display: flex;align-items: center;}
.product-title h5 {color: white;flex: 1;font-size: 20px;}
.product-title h5 aside {text-transform: uppercase;font-size: 12px;background-color: var(--color);margin-right: 10px;display: inline-block;padding: 5px 10px;border-radius: 100px;font-weight: normal;}
.product-title cite {color: white;padding: 3px 10px;border-radius: 100px;text-transform: uppercase;margin-left: 10px;display: flex;align-items: center;font-size: 12px;}
.product-qr,
.product-pr {background-image: linear-gradient(90deg,var(--sapphire),var(--blue));}
.product-vr {background-image: linear-gradient(90deg,var(--pink),var(--sapphire));}
.product-title cite b {font-size: 18px;padding-left: 5px;}
.product-title progress {margin-left: 10px;width: 100px;display: none;}
.product-cont {display: flex;align-items: center;margin-top: 10px;}
.product-img {width: 140px;margin-right: 20px;border-radius: 5px;overflow: hidden;cursor: pointer;display: block;}
.product-txt {flex: 1;display: grid;grid-template-columns: repeat(2,1fr);}
.product-txt li {color: var(--999);line-height: 24px;word-break: break-all;text-transform: capitalize;}

.product-list {grid-template-columns: repeat(1,1fr);}
.product-list .product-group {display: flex;}
.product-list .product-title {width: 240px;margin-right: 20px;}
.product-list .product-title progress {display: block;}
.product-list .product-img {width: 70px;}
.product-list .product-cont {flex: 1;}
.product-list .product-txt {grid-template-columns: repeat(5,1fr);}

/* camera */
.camera {}
.camera .product-txt li:nth-child(11) {grid-column: span 2;}
.camera.product-list .product-txt li:nth-child(11) {grid-column: span 5;}

/* lens */
.lens {}
.lens.product-list .product-title {width: 450px;}
.lens.product-list .product-txt {grid-template-columns: repeat(4,1fr);}

/* drop */
drop {background-color: var(--333);border-radius: 5px;}
drop.active {border-radius: 5px 5px 0 0;}
drop li {border-bottom-color: var(--fff-1);}
drop-list {background-color: var(--333);border-radius: 0 0 5px 5px;}
drop-list li:last-child a {border-radius: 0 0 5px 5px;}
drop.brand drop-list li:last-child a {border-radius: 0 0 0 5px;}
drop a {color: white;}

/* condition */
.condition {background-color: var(--222);padding: 10px;border-radius: 10px;margin-bottom: 20px;display: flex;align-items: center;width: 100%;left: 0;}
.condition-cont {flex: 1;display: flex;align-items: center;}
.condition-group {display: flex;align-items: center;}
.condition-group span {color: var(--999);padding: 0 5px;}
.condition-group drop {width: 120px;margin: 0 5px;}
.condition-group drop.brand {width: 180px;}
.condition-group drop.brand drop-list ul {display: grid;grid-template-columns: repeat(2,1fr);}
.condition-group drop.brand drop-list ul li:first-child {grid-column: span 2;}
.condition-group drop.brand drop-list ul a {padding: 0 10px;}

.condition-col {display: flex;border-radius: 5px;overflow: hidden;}
.condition-col a {color: var(--color);width: 50px;height: 50px;display: flex;align-items: center;background-color: var(--333);}
.condition-col a:hover {background-color: var(--color);color: white;}

/* evaluation */
.evaluation {margin-bottom: 50px;}
.evaluation ul {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;overflow: inherit;}
.evaluation ul li {min-width: 0;}
.evaluation ul li a {display: block;background-color: var(--222);border-radius: 10px;}
.evaluation ul li a h5 {line-height: 50px;color: white;padding: 0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.evaluation ul li a em {display: block;}
.evaluation ul li a aside {display: flex;align-items: center;padding: 0 10px;}
.evaluation ul li a aside span {line-height: 40px;color: var(--666);text-transform: capitalize;}
.evaluation ul li a:hover {transform: translateY(-5px);}







@media(max-width:640px){
    /* basic */
    .clause {}
    .contant {width: 100%;}

    /*btn*/
    .btn {padding: 0 .4rem;border-radius: .1rem;font-size: .24rem;}

    /* logo */
    .logo h1 {display: block;}
    .logo h1 i {width: 1.5rem;margin: 0 auto .5rem;}
    .logo h1 span {letter-spacing: .2rem;font-size: .4rem;}

    /*service*/
    .service {height: 3.6rem;padding: .2rem;}
    .service .swiper {border-radius: .1rem;}
    .service a {border-radius: .1rem;padding: .3rem;}
    .service a i {font-size: .36rem;}
    .service a span {font-size: .28rem;}
    .service a:hover span {padding-top: 0;}

    /*im*/
    .im {margin: .15rem;}
    .im li {margin: .05rem;}
    .im a {width: .6rem;height: .6rem;}

    /*head*/
    .head-back {width: .7rem;height: .7rem;padding: .12rem;}

    /* article */
    .article {padding: .2rem;}
    .article-title h3 {font-size: .3rem;padding: .3rem 0;}
    .article-title aside {padding: .2rem 0;}
    .article-title aside span {padding: 0 .2rem;}
    .article-cont {padding: .2rem;border-radius: .2rem;}
    .article-cont iframe {border-radius: .1rem;}

    article img {border-radius: .1rem;}
    article table caption {padding: .1rem 0;}
    article table th,
    article table td {height: .4rem;}

    /* reminder */
    reminder {border-radius: .1rem;}

    /* table */
    .table {margin: .2rem 0;font-size: .16rem;}
    .table table *:first-child tr:first-child *:first-child {border-radius: .1rem 0 0 0;}
    .table table *:first-child tr:first-child *:last-child {border-radius: 0 .1rem 0 0;}
    .table table tbody tr:last-child *:first-child {border-radius: 0 0 0 .1rem;}
    .table table tbody tr:last-child *:last-child {border-radius: 0 0 .1rem 0;}
    .table table a[pop="thumb"] {width: .6rem;}
    .table table a[pop="thumb"] img {border-radius: .1rem;}

    /*pop*/
    pop[pop="thumb"] pop-main {max-width: 100%;}
    pop[pop="source"] pop-cont {padding: .2rem;}

    /* tab */
    tab {}
    tab-list {margin: .2rem 0;}
    tab-list li {margin: .03rem 0;}
    tab-list li a {height: .6rem;line-height: .6rem;padding: 0 .3rem;font-size: .2rem;border-radius: .1rem;}

    /* join */
    .join h3 {margin-bottom: .5rem;font-size: .8rem;}
    .join-cont * {margin: 0 .05rem;border-radius: .05rem;}
    .join-cont a {min-width: .8rem;}
    .join-cont a .ico {font-size: .36rem;}
    .join-cont input {width: auto;height: .8rem;font-size: .22rem;}

    /* tool */
    .tool fold-group {margin-bottom: .2rem;}
    .tool fold-title {padding: .2rem;border-radius: .1rem;}
    .tool fold-title span {padding: 0 .1rem;}
    .tool fold-cont {border-radius: 0 0 .1rem .1rem;}
    .tool article {padding: .1rem;}
    .tool fold-group.active fold-title {border-radius: .1rem .1rem 0 0;}

    /* view */
    .view {grid-template-columns: 1fr;grid-gap: .2rem;}
    .view-group {border-radius: .1rem;}
    .view-select {padding: .2rem;}
    .view-select tab-list {margin-bottom: .3rem;}
    .view-select tab-group a {padding: .2rem .3rem;margin: .05rem;}

    /* sample */
    .sample ul {column-count: 2;}
    .sample ul li a span {padding: .05rem .1rem;margin: .1rem;opacity: .9;border-radius: .2rem;}

    /* simulate */
    .simulate-cont {height: 5rem;border-radius: .1rem;}
    .simulate-col {border-radius: .1rem;margin-top: .2rem;padding: .1rem .2rem;}
    .simulate-col li {margin: .1rem 0;}
    .simulate-col h5 {font-size: .2rem;width: 1.5rem;}

    /* form */
    .form li {border: 0;}
    .form li input,
    .form li textarea {border-radius: .05rem;}
    .form li .code {margin-left: .2rem;}

    /* message */
    .message {padding: .4rem .2rem;border-radius: .1rem;}

    /* product */
    .product {grid-template-columns: repeat(1,1fr);grid-gap: .2rem;}
    .product-group {padding: .2rem;border-radius: .1rem;}
    .product-title h5 {font-size: .24rem;}
    .product-title cite {padding: .05rem .1rem;border-radius: 1rem;margin-left: .1rem;font-size: .14rem;}
    .product-title cite b {font-size: .2rem;padding-left: .05rem;}
    .product-title progress {margin-left: .1rem;}
    .product-title span {display: none;}
    .product-cont {margin-top: .1rem;}
    .product-img {width: 1.4rem;margin-right: .2rem;border-radius: .1rem;}
    .product-txt li {line-height: .3rem;font-size: .16rem;}
    .product-list .product-group {display: block;}
    .product-list .product-txt {grid-template-columns: repeat(2,1fr);}
    .product-list .product-img {width: 1.4rem;}

    .camera .product-list .product-txt li:nth-child(11) {grid-column: span 2;}

    /* drop */
    drop {border-radius: .1rem;}
    drop.active {border-radius: .1rem .1rem 0 0;}
    drop-list {border-radius: 0 0 .1rem .1rem;}
    drop-list a {font-size: .17rem;}
    drop-list li:last-child a {border-radius: 0 0 .1rem .1rem;}
    drop.brand drop-list li:last-child a {border-radius: 0 0 0 .1rem;}

    /* condition */
    .condition {padding: .2rem;border-radius: .1rem;margin-bottom: .2rem;}
    .condition-cont {display: grid;grid-template-columns: repeat(2,1fr);gap: .1rem;}
    .condition-group span {padding: 0 .05rem;}
    .condition-group drop {width: auto;flex: 1;margin: 0 .05rem;}
    .condition-group drop.brand {width: auto;}
    .condition-col {display: none;}

    /* brand */
    .brand drop-list ul a {padding: 0 .1rem;}

    /* evaluation */
    .evaluation {margin: .5rem 0;}
    .evaluation ul {grid-template-columns: repeat(1, 1fr);grid-gap: .2rem;}
    .evaluation ul li a {border-radius: .1rem;}
    .evaluation ul li a h5 {line-height: .7rem;padding: 0 .2rem;white-space: inherit;overflow: inherit;text-overflow: inherit;}
    .evaluation ul li a aside {padding: 0 .2rem;}
    .evaluation ul li a aside span {line-height: .5rem;}
    .evaluation ul li a:hover {transform: translateY(0);}

}