/* banner */
.banner { padding:20px; background: url('../images/mobile-banner-designer.png') no-repeat center; background-size: cover; height: 250px; display: flex;align-items: flex-end; justify-content: flex-start; color: white; position: relative;}
.banner .container { flex-direction: column;width:100%; }
.banner p { width:100%;color:#fff;font-size:32px;font-weight:bolder; }
.banner h2 {  width:100%; display: block; font-size: 24px; margin-bottom: 40px;}

/* 列表 */
.designer-list { background-color: #f5f5f5;padding:20px; }
.designer-list .designer-item { background-color: #fff;margin-bottom:20px;}
.designer-list .designer-item .designer-photo { width:100%;overflow: hidden; }
.designer-list .designer-item .designer-photo img { width: 100%;height: auto;object-fit: cover;}
.designer-list .designer-item .designer-info { background-color: #fff;padding:10px 20px 20px 20px; }
.designer-list .designer-item h2 { margin: 0;font-size: 24px;margin-bottom:10px; }
.designer-list .designer-item h2 span { font-size:16px;font-weight:400;margin-left:20px;color:#666; }
.designer-list .designer-item p { color:#666; }

.designer-list .buttons { margin-top:20px; } 
.designer-list .contact-button,
.designer-list .portfolio-button { font-size:16px; padding: 10px 15px; margin-right: 5px; border: none; border-radius: 5px; cursor: pointer;}
.designer-list .contact-button { background-color: red; color: white;}
.designer-list .portfolio-button { background-color: #333; color: white;margin:0;}

/* 详情 */
.designer-info { flex-direction: column;background-color: #f5f5f5; }
.designer-info .container { padding:20px 20px 0 20px; }

.designer-info .info { background-color: #fff;}
.designer-info .info .designer-image { width:100%; }
.designer-info .info .designer-image img { width: 100%;height: auto;object-fit: cover;}
.designer-info .info .designer-details { padding:20px;}
.designer-info .info .designer-details h2 { margin: 0;font-size: 24px;margin-bottom:30px; }
.designer-info .info .designer-details h2 span { font-size:16px;font-weight:400;margin-left:20px;color:#666; }
.designer-info .info .designer-details p { color:#666; }

.designer-info .buttons { margin-top:20px; } 
.designer-info .contact-button,
.designer-info .portfolio-button { font-size:16px; padding: 10px 15px; margin-right: 5px; border: none; border-radius: 5px; cursor: pointer;}
.designer-info .contact-button { background-color: red; color: white;}
.designer-info .portfolio-button { background-color: #333; color: white;margin:0;}

.designer-info .designer-menu { width:100%;padding:10px 20px; }
.designer-info .designer-menu { display: flex;justify-content: flex-start; }
.designer-info .designer-menu button:last-child { margin-right: 0;}
.designer-info .designer-menu button { display:inline-block;height:24px;border: none; cursor: pointer; background-color: transparent; transition: background-color 0.3s;font-size:16px;color:#666;margin-right:15px;line-height: 38px;}
.designer-info .designer-menu button.active { color: #e6212a;background-image: url(../images/bg-index-case-active.png);background-repeat: no-repeat;background-position: center bottom; }
.designer-info .designer-menu button { height:50px; }
.designer-info .designer-content { width:100%;margin-bottom:20px; }
.designer-info .designer-content .content-item { width: 100%; height: auto; display: none;}
.designer-info .designer-content .content-item.hidden { display: none;}
.designer-info .designer-content .content-item.active { display: block;}

.designer-info .idea { padding:20px;background-color: #fff;padding:20px;color:#666; }

.designer-info .timeline { position: relative;padding-left: 70px;padding-top: 25px;padding-right:20px;padding-bottom:20px;background-color: #fff;}
.designer-info .timeline::before { content: '';position: absolute;left: 40px;top: 20px;bottom: 0;width: 2px;background-color: #ccc; }
.designer-info .timeline ul {list-style: none;padding: 0; }
.designer-info .timeline ul li { position: relative;margin-bottom: 20px;width:100%; }
.designer-info .timeline ul li:last-child { margin-bottom: 0; }
.designer-info .timeline .marker { position: absolute;left: -40px;top: 3px;width: 20px;height: 20px;border-radius: 50%;background-color: #fff;border: 2px solid #e6212a; }
.designer-info .timeline .content span { display: block;margin-bottom: 5px;color:#666; }

.cases-list { background-color:#f5f5f5;padding:20px 0; }
.cases-list li { width: 100%;position: relative;height:auto;overflow: hidden;margin-bottom:10px;height:7.6em;}
.cases-list li img { width:100%;height:7.6em;object-fit: cover; }
.case-item { width: 50%;position: absolute; background: rgba(34,34,34,.85);left: auto;bottom: 0;/*right: 0;*/top: 0;padding: 20px;-webkit-transition: background .3s;-moz-transition: background .3s;-ms-transition: background .3s;-o-transition: background .3s;transition: background .3s;}
.cases-list li:nth-child(2n+1) .case-item { right: 0;}
.cases-list li:nth-child(2n+2) .case-item { left: 0;}
.case-item-content { width: 100%;position: absolute;left: 0;top: 50%;z-index: 100;color: #fff;font-size: 14px;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%); text-align: center;}
.case-item-content h4 { font-size: 16px;line-height: 16px;letter-spacing: .12em;}
.case-item-content p { color: #cbcbcb;margin-top: 10px;}
.case-item-content p.style::before { content:'';display:inline-block;width:25px;height:1px;background-color: #cbcbcb;vertical-align: middle;margin-right:10px; }
.case-item-content p.style::after { content:'';display:inline-block;width:25px;height:1px;background-color: #cbcbcb;vertical-align: middle;margin-left:10px; }
.case-item-content p.tag span { color:#fff;margin:0 10px; }
.case-item-content a { display: inline-block;background: transparent;border: none;line-height: 22px;padding: 13px 30px;color: #fff;font-size: 14px;background-color: #262626;height: auto;margin-top: 0;opacity: 0;visibility: hidden;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s; }
.case-item-content a i { vertical-align: middle; width:24px;height:16px;display:inline-block;margin-left: 10px;position: relative;left: 0;-webkit-transition: all .3s;-moz-transition: all .3s;-ms-transition: all .3s;-o-transition: all .3s;transition: all .3s;background-image: url(../images/icon-cases-more.png);}
.cases-list li:hover .case-item-content a { margin-top: 30px; opacity: 1; visibility: visible;}
.case-item-content a:hover { background-color: #565656; }
.case-item-content a:hover i { left: 10px;}