@font-face {
    font-family: 'baskvill';
	src: url('/font/BASKVILL.eot');
	src: local('☺'), url('/fonts/BASKVILL.eot?#iefix') format('eot'), url('/font/BASKVILL.woff') format('woff'), url('/font/BASKVILL.ttf') format('truetype'), url('/font/BASKVILL.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    -webkit-user-drag: none; 
    -khtml-user-drag: none; 
    -moz-user-drag: none; 
    -o-user-drag: none; 
    user-drag: none; 

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input, input:before, input:after {
    -webkit-user-select: initial;
    -khtml-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
   } 

body, html { padding:0; margin: 0; }

body .app {font-family: baskvill,Helvetica,Arial,sans-serif; font-size: 1.5rem; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;}



.loader{
    position:fixed;
    width: 80vh;
    height: 80vh;
    left:50%;
    margin-left: -40vh;
    top:50%;
    margin-top: -40vh;
}

.loader .c_logo{position: absolute; top: 50%; left: 50%; background: url(/images/loader.png) no-repeat top center; width: 80px; padding-top: 70px; color: #ccc; transform: translate(-50%, -50%);}

.topbar { display:none; position: fixed; top: 0rem; width:100vw; height:100px; z-index:10; background:#fff  }
.topbar .title{ position: absolute; top:1.5rem; left: 4rem; }
.topbar .lang { position: absolute; top:1.8rem; left: 250px; }
.topbar .lang .link {padding:0px 10px;}
.topbar .right{ position: absolute; top:2rem; right: 4rem; }
.topbar .right .link {padding:0px 10px;}
.topbar .link { display:inline-block; text-decoration:none;  cursor: pointer; color:#5A4F4A; font-weight: bold;}

.topbar .progress_bar {position: fixed; top: 0px; left: 0; width: 100vw;height: 10px; z-index: 20;background: #CDBEB1; will-change: transform; transform: scaleX(1); transform-origin: 0px 0px; display:none;}

.logo { display:inline-block; width: 139px; height:42px; text-indent: -9999px; background: url('/images/logo.png')}

.page { display:none; height: 100vh; width: 100vw; overflow:hidden; position: absolute; left: 0; top: 0; color: #424242; font-family: Helvetica,Arial,sans-serif; font-size: 6rem;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}

.social { position:fixed; bottom:0; width:100vw; height:100px; line-height:100px; font-family: baskvill,Helvetica,Arial,sans-serif; font-size:1.5rem; font-weight:bold; text-align:center; color:#A09184; background:#fff; z-index:6; display:none;}
.social .text { display:inline-block; vertical-align: middle; margin:5px;}
.social .icon { display:inline-block; text-indent: -9999px; width:29px; height:29px; margin:5px; vertical-align: middle; background-repeat:no-repeat; background-position: center;}
.social .instagram { background-image: url('/images/social/instagram.png')}
.social .facebook { background-image: url('/images/social/facebook.png'); border-radius:2px;}

.sp_text { position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%; height: 100px;margin: auto;display: block;text-align: center; pointer-events: none; z-index:6}
.sp_text span {position: relative; top: 0px; display: inline-block;  font-family: baskvill,Helvetica,Arial,sans-serif;  width:5rem; font-size:8rem; line-height:8rem;}
/*.sp_text span { color: transparent; background: url('./src/assets/images/video.jpg'); background-size: cover; -webkit-background-clip: text;}*/


.sp_text {transform-style: preserve-3d;}

#home .sp_text.break {color:#FFE100;}
#home .sp_text.break span:nth-child(1) { top:-8rem }
#home .sp_text.break span:nth-child(2) { top:0px }
#home .sp_text.break span:nth-child(3) { top:8rem }
#home .sp_text.break span:nth-child(4) { top:-8rem }
#home .sp_text.break span:nth-child(5) { top:0px }
#home .sp_text.break span:nth-child(6) { top:8rem }
#home .sp_text.break span:nth-child(7) { top:-8rem }
#home .sp_text.break span:nth-child(8) { top:0px }
#home .sp_text.break span:nth-child(9) { top:8rem }

.cursor { position:fixed; width:100%; z-index:5;}
.cursor .box { position:absolute; width: 127px; height:127px; pointer-events:none;}
.cursor .box .logo_mini { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity:0; }
.cursor .box .zoom { position: absolute; opacity:0; }
.cursor .box .close { position: absolute; opacity:0; transform: translate(-50%, -50%) rotate(45deg);}
.cursor .box img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#home .mask { position:fixed; width:100%; z-index: 5; pointer-events: none;}

.image_wrapper {position:fixed;top:100px;left:0; right:0; bottom:100px; perspective: 500px; z-index:4}
.image_wrapper img{position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}

.video_wrapper {position:fixed;top:100px;left:0; right:0; bottom:100px; perspective: 500px; z-index:3}
.video_wrapper video{position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}

#masked{
    mask:url("#maskLayer");
}

#zoomMasked{
    mask:url("#zoomMaskLayer");
}

.project_container {position:absolute; top:0; left:50%; width:100vw; transform: translate3d(-50%,0,0); padding-top:100px; background:#EFEFEF}
.project_scroll {width:100vw; height:calc(100vh - 100px); }
.project_scroll .scrollbar-track { display:none!important;}

.project-header { font-family: baskvill,Helvetica,Arial,sans-serif; font-size:1.5rem; text-align:center;padding:1rem 0rem;     margin-top: 1rem;}
.project-list { text-align:center; width: 1088px; margin:0px auto;padding:10px 0px; overflow: auto;}
.project-list .item {  float:left; padding:10px; }
.project-list .item .box { position:relative; overflow: hidden; font-family: baskvill,Helvetica,Arial,sans-serif; border:1px solid #ccc; border-radius:10px; width: 250px; height: 250px; box-sizing: border-box; -webkit-mask-image: -webkit-radial-gradient(white, black);}
.project-list .item .wrapper {position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.project-list .item .bg {position:absolute; top:0; left:0; width: 100%; height:100%;}
/*.project-list .item .bg img {position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}*/
.project-list .item .bg img {width:100%; height:100%; 
    transition: all 0.5s ease;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-transform: translateZ(0);
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
.project-list .item:hover .bg img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);}
.project-list .item .letter {font-size: 8rem; color:#fff;}
.project-list .item .text {font-size: 2rem; color:#fff;}
#projects .top { display: block; text-align: center; padding: 2.4rem 0; text-decoration:none; color:#333}
#projects .top span {  font-family: baskvill,Helvetica,Arial,sans-serif; font-size:1.5rem; text-align:center; }


#project { overflow:auto; }
#project .cover { position:fixed; width:100%; height:100vh;}
#project .cover .image_wrapper {bottom:0;}
#project .scroller { position:fixed; width:100%; height:100vh; top:100px; width: 100%; height: calc(100vh - 100px); display:none; z-index:6}
#project .scroller .scrollbar-track { display:none!important;}
#project .content { position:fixed; padding-top: calc(100vh - 100px - 20px);}
#project .content .wrapper{ background:#efefef; padding:0 10rem;}

.intro-normal {width:80%; padding:10rem 0; margin:0 auto;}
.intro-normal .mobile {display:none;}
.image-normal .full-img {display:block;}
.intro-normal .full-img img {width:100%}

.image-normal {width:80%; padding:10rem 0; margin:0 auto;}
.image-normal img { width:100%; }

.video-normal {width:80%; padding:10rem 0; margin:0 auto;}
.video-normal video { width:100%; }

#project .sp_text { top: 100px; color: #fff}
#project .sp_text span {display:inline; font-size:9rem; width:7rem!important;}
#project .sp_text span.empty {width:2rem!important;}
#project .sp_text.brand span{display:inline-block; width:9rem!important;}
#project .sp_text.multi { height:300px; }
#project .sp_text.multi .line {padding:1rem 0;}

#project .top { display: block; text-align: center; padding: 6rem 0; text-decoration:none; color:#333}
#project .top span {  font-family: baskvill,Helvetica,Arial,sans-serif;font-weight:bold; font-size:50px; text-align:center; }

.sp_desc { position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%; height: 100px;margin: auto;display: block;text-align: center; pointer-events: none; z-index:6}
.sp_desc span {position: relative; bottom: -12rem; display: inline-block;  font-family: baskvill,Helvetica,Arial,sans-serif;  font-size:2rem; color:#fff; opacity:0;}

.zoomer{ position: relative; width: 40vw; height: 40vw; border-radius: 100%; overflow: hidden; margin: 10rem auto; transition: all 1s ease-in-out;}

.zoomer .mask{ position: absolute; top:0; left:0 ; right:0; bottom:0}
.zoomer .image img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%;}
.zoomer .video video {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%;}
.zoomer .video img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%;}

.next {display: inline-block; -webkit-mask-image: -webkit-radial-gradient(white, black); border-radius: 100%; overflow: hidden; position: relative; left: 50%; transform: translate(-50%);}
.next .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 50px; color: #fff; font-family: baskvill,Helvetica,Arial,sans-serif;font-weight:bold;text-shadow: 1px 1px #000000;}
.next img {width:40vw; 
    transition: all 0.5s ease;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-transform: translateZ(0);
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}
.next:hover img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    transform: scale(1.5);}

.zoom-browse { position:absolute;z-index:10; overflow:hidden; background:rgba(0,0,0,0.85);}
/*.zoom-wrapper { position: absolute;top:0;left:0; right:0;bottom:0}*/
.zoom-wrapper img{position: absolute;top: 50%;left: 50%;width: auto;height: 100vh;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
.zoom-wrapper video{position: absolute;top: 50%;left: 50%;width: auto;height: 100vh;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
.zoom-close-btn { display:none;}

#about .video_wrapper { overflow:hidden;}
#about .video_wrapper video{max-width: 1330px;}
#about .col5{display: flex; flex:1; flex-flow:wrap; align-content: center; padding:4rem;}
#about .col5.right {justify-content: flex-end;}
#about .content { position:fixed; width:100%; height:calc(100vh - 200px); padding-top:100px; font-size:1rem; z-index:5; display:flex; font-family: baskvill,Helvetica,Arial,sans-serif;}

#about .detail {width:533px;  position: relative;}

#about .detail .top {background:url('/images/about/about_bg_top.png') no-repeat; width:534px; height:82px;}
#about .detail .wrapper {background:rgba(0,0,0,0.4); padding: 1.5rem 3rem 3rem; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
#about .detail .header {font-size:1.8rem; color:#FFE100}
#about .detail .text { color: #fff;}
#about .contact { width:470px;;background: #E5E5E5;padding:1.5rem; display:flex;}
#about .contact .info {color:#A09184;}
#about .contact .info .header { font-size:1.5rem; font-weight:bold;padding:1rem 0;}
#about .contact .info .text { font-size:1rem; font-weight:bold; line-height:1.3rem; }
#about .contact a { color:inherit; text-decoration: none;}

#about .contact .form{padding-left:1.5rem;}
#about .contact .form input[type="text"],
#about .contact .form input[type="email"],
#about .contact .form textarea 
{width:100%;padding: 10px; border:1px solid #ffffff; color:#A09184; margin-bottom:10px; font-size:15px; font-family: baskvill,Helvetica,Arial,sans-serif;}

#about .contact .form ::-webkit-input-placeholder { color: #A09184; }
/*Firefox 4-18瀏覽器專用*/
#about .contact .form input[type="text"]::-moz-placeholder ,
#about .contact .form input[type="email"]::-moz-placeholder ,
#about .contact .form textarea::-moz-placeholder { color: #A09184; }
/*IE10瀏覽器專用*/
#about .contact .form:-ms-input-placeholder{color: #A09184;}

#about .contact .form textarea:focus, 
#about .contact .form input:focus{
    outline: none;
}

#about .contact .form textarea{ height:150px; margin-bottom:0px;resize: none;}
#about .contact .form .error {border:1px solid #9E1211!important;}
#about .contact .form .btn_submit {width:100%; padding:10px;color:#A09184; border:0px; background:#fff; text-align:center; font-size:18px; font-family: baskvill,Helvetica,Arial,sans-serif;}
#about .contact .form .btn_submit:hover{background-color:#A09184; color:#fff}

#about .image_slider {display:none;}
.contact-btn-wrapper { display:none; }

.slide-anime {overflow:hidden; }
.slide-anime .come-in {transform: translateX(150px);opacity:0; animation: come-in 0.8s ease forwards;}
.slide-anime .debug { font-size:1rem;}


@keyframes come-in {
    to { transform: translateX(0); opacity:1 }
  }

#services {background: #EFEFEF}
.service-header { position: absolute; top: 150px; font-size: 1.5rem; text-align: center; width: 100%; font-family: baskvill,Helvetica,Arial,sans-serif;}
.service-list {position:absolute; left:50%; top:50%; width:1330px; transform: translate(-50%, -50%);}
.service-list .service_item{ display:inline-block; text-align:center; vertical-align:middle; width: 25%; text-decoration: none; font-size:1rem; font-family: baskvill,Helvetica,Arial,sans-serif;}
.service-list .service_item .letter {display:inline-block; vertical-align: middle; font-size: 8rem; color:#fff; padding-right: 15px; width:100px;}
.service-list .service_item .icon {display:inline-block; vertical-align: middle; width:150px; height:150px; border-radius:75px; overflow:hidden}
.service-list .service_item .icon img { width:100%; height:100%}
.service-list .service_item .title { font-size: 1.5rem; margin-top:20px; }


/*#service .image_bg {position:fixed;top:100px;left:0; right:0; bottom:100px;z-index:4}*/
#service .image_bg {position: fixed;top: 100px; left: 0; right: 0; bottom: 100px; perspective: 500px; z-index: 3; }
#service .image_bg img{position: relative;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
#service .content {position: fixed; top: 100px; width: 490px; z-index: 6; bottom: 100px; background: #ccc; font-size:1rem; border-radius:20px; font-family: baskvill,Helvetica,Arial,sans-serif; color:#fff; box-sizing:border-box; padding:2rem;}
#service .content .header {position:relative; width:275px; height:64px; font-size:2rem; margin-top: 40px; margin-bottom: 2rem; display: block;}
#service .content .header span {position:absolute; bottom:0;}
#service .content .scroller {position:relative; width:100%; height:calc(100vh - 6rem - 304px);}
#service .content .text { font-size:1.3rem; line-height:2rem;}
#service .content .btn {position:absolute; top:1rem; right:1rem; width:59px; height:59px; text-indent: -9999px;}
#service .content .close {background:url('/images/service/close.png') no-repeat;}
#service .download.btn  { position:fixed; top:50%; margin-top:-66px; z-index:6; text-decoration: none; padding:2rem; height:69px;line-height: 2.3rem; border-radius:10px; background:url('/images/service/download.png') #ccc no-repeat; background-position-x: 2rem; background-position-y: 2rem; padding-left: calc(69px + 3rem); font-size:2rem;  font-family: baskvill,Helvetica,Arial,sans-serif; color:#fff; }
#service .back.btn { display:none;}

/*Mobile Layout*/
/*@media(max-width: 641px){*/
@media(max-width: 854px){

.loader{
    position:fixed;
    width: 80vw;
    height: 80vw;
    left:50%;
    margin-left: -40vw;
    top:50%;
    margin-top: -40vw;
}
    
.topbar { display:none; position: fixed; top: 0rem; width:100vw; height:100px; z-index:10; background:#EFEFEF  }
.topbar .title{ position: absolute; top:1.5rem; left: 50%; transform: translateX(-50%); }
.topbar .lang { position: absolute; top: 79px; left: 0rem; right: 0rem; font-size: 15px; text-align: center; background: #f6f6f6;}
.topbar .lang .link { padding: 0 5px}
.topbar .right{ position: absolute; top:100px; left:0; right:0; width:100%; background:#ccc; text-align:center;}
.topbar .right .home { display:none;}
.topbar .right .link { padding:10px;}

.image_wrapper { top: 144px; bottom:80px; }
.video_wrapper { bottom: 80px; }

#home .mask { padding-top:140px;}
#home .mask svg { height: calc(100% - 220px);}

#home .sp_text.break span:nth-child(1) { top: -3rem; }
#home .sp_text.break span:nth-child(2) { top: -47px; left: 50px; }
#home .sp_text.break span:nth-child(3) { top: 3rem; left: -9rem; }
#home .sp_text.break span:nth-child(4) { top: 0rem; left: -10rem; }
#home .sp_text.break span:nth-child(5) { top: -3rem; left: 8rem; }
#home .sp_text.break span:nth-child(6) { top: -7rem; left: 8rem; }
#home .sp_text.break span:nth-child(7) { top: 0rem; left: -6rem; }
#home .sp_text.break span:nth-child(8) { top: 2px; left: -1rem; }
#home .sp_text.break span:nth-child(9) { top: 0rem; left: 1rem; }

.project-header { font-size:1.2rem;padding: 0.5rem 0rem; }
.project_container { padding-top:144px; }
.project-list { width:100%; }

.project-list .box { width: calc(50vw - 20px) !important; height: calc(50vw - 20px)!important;}
.project-list .item .letter { font-size: 5rem; }
.project-list .item .text { font-size: 1.5rem; }
html[lang="tc"] .project-list .item .text { font-size:1.3rem; }
.project_scroll { height: calc(100vh - 144px);}

.page#services { padding-top: 144px; padding-bottom: 80px; height: auto; }
.service-header{ position:initial; top:auto; padding: 20px 0; font-size: 1.2rem; }
.service-list { position:initial; left: auto; top: auto; width: 100%; transform: none; }
.service-list .service_item { display:block; width:100%; padding:30px 0; }

.service-list .service_item .letter { font-size:5rem; width:55px;}
.service-list .service_item .icon { width:100px; height:100px;}
.service-list .service_item .title { font-size: 1.2rem; margin-top: 10px;}

#service { top: 144px; bottom: 100px; height: calc(100% - 222px); overflow: auto;}

#service .content {position: initial; width: 100%; padding: 1rem; height: auto; bottom:auto; border-radius: 0;}
#service .content .header { font-size:1.2rem; margin-bottom:10px; width:100%; height: 30px; text-align: center;}
#service .content .header span {position:initial; bottom:auto;}
#service .content .text { font-size: 1.0rem; line-height: 1.3rem; }
#service .content .close { display:none; }
#service .content .scroller { height: auto;}
html[lang="tc"] #service .content .text {text-align:justify;}

#service .download.btn { position:initial; width: 80%; box-sizing: border-box; background-size: 40px 40px; background-position-x: 1rem; background-position-y: 1rem; font-size:1rem; line-height: 1.2rem; padding:1rem; padding-left:70px; margin:0 auto;margin-top: 20px!important; display: block; margin-bottom: calc(100% - 100px);}
#service .image_bg { bottom:80px; z-index: -1;}
#service .back.btn { display:block; padding: 1.5rem 1rem;font-size: 1rem;color: #fff;text-align: center;box-sizing: border-box;text-decoration: none; font-family: baskvill,Helvetica,Arial,sans-serif;}

.sp_text { width:320px; transform: translateY(-50%)!important; }
.sp_text span { width:3rem; line-height:3rem; }
.sp_desc span { font-size: 1.5rem; }

#project .scroller { top: 144px;}
#project .content { padding-top: calc(100vh - 144px);}
#project .content .wrapper { padding: 0; }
#project .sp_text.brand span { width: 3rem!important;}
#project .sp_text span { font-size:3rem; }
#project .sp_text.multi { height: 100px;}

.intro-normal { padding:4rem; }
.intro-normal .full-img {display:none;}
.intro-normal .mobile {display:block;}
.intro-normal  .info { width: 250px; margin: 0 auto;}
.intro-normal .cate { font-size: 18px; text-align: center; padding-bottom: 20px; color: #666;}
.intro-normal .slogan { width: 100%; padding: 1rem 1.5rem; box-sizing: border-box; background: #fff; margin-bottom: 10px; text-align:center;}
.intro-normal .slogan img {max-width:100%; max-height:60px;}
.intro-normal .subtitle {font-size: 15px; text-align: center; margin-bottom: 10px;}
.intro-normal .text { font-size: 13px; margin-bottom: 20px;}
.intro-normal .text .block { padding-bottom: 10px;}
.intro-normal .img { width: 250px; height: 80px; overflow: hidden; margin: 0 auto; position: relative;}
.intro-normal .img img { width: 100%; bottom: 0; position: absolute;}
html[lang="tc"] .intro-normal .text { font-size: 12px; }

.image-normal { width: 100%; padding:2rem; box-sizing: border-box;}
.zoomer { margin:2rem auto; }
.zoom-browse { overflow: auto;}
.zoom-close-btn { width:59px; height:59px; position:absolute; top:30; right:30; background:url('/images/service/close.png'); z-index:15;}
.zoom-wrapper img { position:absolute; top:auto; left:auto; -webkit-transform: initial; transform: initial;}

.next .text { font-size:25px;}
#project .top span { font-size:25px; }
#project .sp_text { transform: translateY(-50%);}

#about .content { padding-top:144px; display: block; overflow: auto; height: calc(100% - 224px);}
#about .col5 { display: block; padding: 1rem; width: 100%; box-sizing: border-box;}
#about .detail { width:100%; padding: 0 20px; box-sizing: border-box;}
#about .detail .top { width: 100%; height: 40px; background-size: cover;}
#about .detail .header { font-size: 1rem;}
#about .detail .text { font-size:0.5rem;}
#about .detail .wrapper{ padding: 1.5rem 1.5rem 1.5rem; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
#about .image_slider {display:block; position:fixed;top:100px;left:0; right:0; bottom:100px;z-index:4;}
#about .image_slider img{position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);}
html[lang="tc"] #about .detail .wrapper { padding-top:1rem;}
html[lang="tc"] #about .detail .header { padding-bottom:0.5rem;}
html[lang="tc"] #about .detail .text { font-size:0.63rem;}

#about .contact .form input[type="text"],
#about .contact .form input[type="email"],
#about .contact .form textarea {line-height:18px}



#about .col5.right { height:100%;}

.contact-btn-wrapper { display: flex; justify-content: center; align-items: center; padding: 20px 0px;}
.contact-btn { background: #E5E5E5; text-decoration: none; color: #A09184; font-weight: bold; width: 70px; height: 70px; display: inline-block; text-align: center; vertical-align: middle; border-radius: 50px; line-height: 20px; font-size: 17px; }
.contact-btn span {display:inline-block; padding: 17px 0px;}


#about .contact { display:block; width: 100%;padding: 1rem; box-sizing: border-box;}
#about .contact .info { padding-bottom: 20px; }
#about .contact .form { padding-left:0px;}
#about .contact .form .btn_submit {-webkit-appearance: none;}

.social { font-size:1.2rem; height:80px; line-height: 80px;}
.social .icon { width: 23px; height:23px; background-size:contain; }

.cursor {display:none; }

}

@media(max-width:1024px){

}


@media(max-width:768px){
    #about .detail .top { height: 105px; }
   

}

@media(max-width: 414px){
    #about .detail .top { height: 50px; }
    .intro-normal { padding: 2rem;}
}

@media(max-width: 375px){
    #about .detail .top { height: 45px;}
}

@media(max-width: 320px){
    #about .detail .top { height: 30px;}
}

/* Tablet Styles */
@media(min-width: 650px) and (max-width: 750px ){
    
}

/* Desktop Styles */
@media(min-width: 0px) and (max-width: 649px ){

}


@media (-webkit-video-playable-inline) {
    #about .video_wrapper video { display: initial; }
}