@charset "UTF-8";
/* CSS Document */
body,html{
	scroll-behavior: smooth;
  font-family: "Graphik Compact Web", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif !important;
}
.AtelierHead  {
  position: relative;
	margin-top: 10px !important;
  /*background-color: #161615;*/
    color: #f0f0f0;
	background-image: url("../images/ateliers/banner/leather2.jpg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*.AtelierHead video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
	filter: opacity(0.2);
}*/

.AtelierHead h2{
	/*background: linear-gradient(90deg, #f7a8d8, #b39ddb, #64b5f6, #4dd0e1) !important;
	background-clip:text !important;
	-webkit-text-fill-color:transparent !important;*/
}
h1, h2, h3, h4, h5, h6, p {
  font-family: "Graphik Compact Web", "Microsoft JhengHei", 微軟正黑體, 微軟雅黑體, Arial, sans-serif !important;
}
.page-head__wrapper{
	padding-top: 0px;
}
.inner-page .page-head{
	margin-top: 0px;
	margin-bottom: 30px;
}
.AtelierContainer{
	width: 100%;
	margin-bottom: 20px;
}
.AtelierCategory{
	margin-top: 50px;
}
.AtelierCategoryDescription{
  	width: calc(100% - 50px);
	max-width: 1920px;
	margin: 20px auto;
}
.AtelierBox{
  	width: calc(100% - 50px);
	max-width: 1920px;
	display: flex;
	flex-wrap: wrap;
	margin: 0px auto;
}

.AtelierTypeBg{
  	width: calc(100% / 5 - 10px);
	aspect-ratio: 1 / 1; 
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 5px;
}
.AtelierType{
	box-sizing: border-box;
	padding: 20px;
	width: 100%;
	height: 100%;
	border: 0.5px solid #E5E5E5;
	cursor: pointer;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.60) 100%);;
	display: flex;
	align-items: flex-end;
	align-content: flex-end;
	flex-direction:row;
	flex-wrap: wrap;
	color: #FFF;
}
.AtelierDescription{
	display:none;
	font-size: 15px;
	line-height: 150%;
	width: 100%;
}
.AtelierType:hover{
	color: #FFF !important;
	background-color: rgba(84, 41, 128, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.AtelierType:hover > .AtelierDescription{
	display:block;
}

.CeramicGlassJewelleryWood{
	background-image: url("../images/ateliers/facilities/CeramicGlassJewelleryWood.jpg");
}
.CheongsamQunguaDenim{
	background-image: url("../images/ateliers/facilities/CheongsamQunguaDenim.jpg");
}
.ContemporaryDesigner{
	background-image: url("../images/ateliers/facilities/ContemporaryDesigner.jpg");
}
.ComicLibrary{
	background-image: url("../images/ateliers/facilities/ComicLibrary.jpg");
}
.CraftWork{
	background-image: url("../images/ateliers/facilities/CraftWork.jpg");
}
.DESISLab{
	background-image: url("../images/ateliers/facilities/DESISLab.jpg");
}
.FashionArchive{
	background-image: url("../images/ateliers/facilities/FashionArchive.jpg");
}
.FutureLiving{
	background-image: url("../images/ateliers/facilities/FutureLiving.jpg");
}
.GenerativeAI{
	background-image: url("../images/ateliers/facilities/GenerativeAI.jpg");
}
.GraphicArchive{
	background-image: url("../images/ateliers/facilities/GraphicArchive.jpg");
}
.ImmersiveDesign{
	background-image: url("../images/ateliers/facilities/ImmersiveDesign.jpg");
}
.IPImplementation{
	background-image: url("../images/ateliers/facilities/IPImplementation.jpg");
}
.LiveShowDesign{
	background-image: url("../images/ateliers/facilities/LiveShowDesign.jpg");
}
.LocationbasedVR{
	background-image: url("../images/ateliers/facilities/LocationbasedVR.jpg");
}
.MaterialLibrary{
	background-image: url("../images/ateliers/facilities/MaterialLibrary.jpg");
}
.NewMaterialApplication{
	background-image: url("../images/ateliers/facilities/NewMaterialApplication.jpg");
}
.PopCulture{
	background-image: url("../images/ateliers/facilities/PopCulture.jpg");
}
.RetailExperience{
	background-image: url("../images/ateliers/facilities/RetailExperience.jpg");
}
.RetailLab{
	background-image: url("../images/ateliers/facilities/RetailLab.jpg");
}
.SilverEconomy{
	background-image: url("../images/ateliers/facilities/SilverEconomy.jpg");
}
.SocialInnovation{
	background-image: url("../images/ateliers/facilities/SocialInnovation.jpg");
}
.SpatialVideo{
	background-image: url("../images/ateliers/facilities/SpatialVideo.jpg");
}
.Sustainability{
	background-image: url("../images/ateliers/facilities/Sustainability.jpg");
}
.VideoWallMotionGraphics{
	background-image: url("../images/ateliers/facilities/VideoWallMotionGraphics.jpg");
}
.VinylRecordLibrary{
	background-image: url("../images/ateliers/facilities/VinylRecordLibrary.jpg");
}
.VirtualIdol{
	background-image: url("../images/ateliers/facilities/VirtualIdol.jpg");
}
.VirtualProduction{
	background-image: url("../images/ateliers/facilities/VirtualProduction.jpg");
}
.AerialVideo{
	background-image: url("../images/ateliers/facilities/Aerial.jpg");
}

.RedDotAward2025{
	background-image: url("../images/ateliers/awards/RedDotAward2025.jpg");
}
.RedDotAward2023{
	background-image: url("../images/ateliers/awards/RedDotAward2023.jpg");
}
.RedDotAward2019{
	background-image: url("../images/ateliers/awards/RedDotAward2019.jpg");
}
.iFDesignAward{
	background-image: url("../images/ateliers/awards/iFDesignAward.jpg");
}
.AtelierSlideshowContainer{
			margin: 50px auto 0px auto;
            width: calc(100% - 50px);
            max-width: 1920px;
            background-color: #ffffff;
            display: flex;
            flex-direction: row;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            overflow: hidden;
            min-height: 600px;
}
		.AtelierSlideshowWrapper {
            width: 100%;
            max-width: 1000px;
            position: relative;
            background-color: #000;
            flex-shrink: 0;
        }

        .AtelierSlideContainer {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .AtelierSlide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease-in-out;
            display: flex;
            justify-content: center;
            align-items: center;
			cursor: pointer;
        }

        .AtelierSlide.AtelierActive {
            opacity: 1;
            z-index: 1;
        }

        .AtelierSlide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Navigation Buttons */
        .AtelierNavBtn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 2rem;
            padding: 1rem;
            cursor: pointer;
            z-index: 10;
            transition: background-color 0.3s;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .AtelierNavBtn:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        .AtelierPrev { left: 20px; }
        .AtelierNext { right: 20px; }

        /* Dots Indicator */
        .AtelierDotsContainer {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            z-index: 10;
        }

        .AtelierDot {
            width: 12px;
            height: 12px;
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .AtelierDot.AtelierActive {
            background-color: white;
            transform: scale(1.2);
        }

        /* Right Side: Description Area */
        .AtelierDescriptionWrapper {
            flex-grow: 1;
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .AtelierDescContent {
            display: none;
            animation: AtelierFadeIn 0.5s ease-in-out forwards;
        }

        .AtelierDescContent.AtelierActive {
            display: block;
        }

        .AtelierDescContent h2 {
            font-size: 2.5rem;
            color: #333;
            margin-bottom: 1rem;
            line-height: 1.2;
			font-weight: normal;
        }

        .AtelierDescContent h4 {
            font-size: 1rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 1.5rem;
        }

        .AtelierDescContent p {
            font-size: 1.1rem;
            color: #333;
            line-height: 1.6;
            margin-bottom: 2rem;
        }

        .AtelierCtaButton {
            display: inline-block;
            padding: 12px 30px;
    background: linear-gradient(90deg, #f7a8d8, #b39ddb, #64b5f6, #4dd0e1);
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 4px;
            transition: background-color 0.3s;
            width: fit-content;
        }

        .AtelierCtaButton:hover {
            background-color: #542987;
            color: white;
        }

        @keyframes AtelierFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
        }


@media only screen and (max-width: 1680px) {
.AtelierTypeBg{
  width: calc(100% / 4 - 10px);
}
	.AtelierSlideshowWrapper {
            max-width: 800px;
        }
.AtelierDescription{
	font-size: 14px;
}
}
@media only screen and (max-width: 1280px) {
.AtelierTypeBg{
  width: calc(100% / 2 - 10px);
}
.AtelierDescription{
	font-size: 13px;
}
.inner-page .page-head{
	padding-top: 30px;
	padding-bottom: 50px;
}
            .AtelierSlideshowContainer {
                flex-direction: column;
                max-width: 820px;
                height: auto;
            }
            
            .AtelierSlideshowWrapper {
                max-width: 100%;
                height: 400px;
            }

            .AtelierDescriptionWrapper {
                padding: 2rem;
                min-height: 300px;
            }

            .AtelierDescContent h2 {
                font-size: 2rem;
            }
}
@media only screen and (max-width: 720px) {
.AtelierTypeBg{
	width:100%;
}
.inner-page .page-head{
	margin-bottom: 0px;
}
}