header{opacity:0;
  visibility:hidden;
  transition:.8s}

header.on{opacity:1;
  visibility:visible}

#first_screen{display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100vh;
  min-height:100vh;
  min-height:-webkit-fill-available;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:2000;
  background:#000;
  transition:.4s}


#first_screen .logo{display:block;
  font-size:2.1rem;
  color:#fff;
  font-family:"Bai Jamjuree",sans-serif}

#first_screen .movie_name{display:block;
  font-size:1.4rem;
  color:#fff;
  font-family:"Cormorant Garamond",serif;
  margin-top:35px;
}


#first_screen a{color:#fff;
  font-size:2rem;
  margin-top:1.2rem;
  font-family:"Cormorant Garamond",serif;
  letter-spacing:.2em;
  cursor:pointer;
  display:block;
  position:relative}

#first_screen a#view_movie{
  margin-top:2.6rem;
}

#first_screen a.off{opacity:0}

#first_screen a::before,#first_screen a::after{content:"";
  display:block;
  width:18rem;
  height:1px;
  background:linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.4) 80%, rgba(255, 255, 255, 0) 100%);
  position:absolute;
  top:-50%;
  left:20%;
  transform:rotate(-8deg) translateX(-55%);
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  backface-visibility:hidden}

#first_screen a::after{width:12rem;
  top:100%;
  left:50%;
  transform:rotate(-8deg) translateX(-35%)}

#first_screen a:hover::before{transform:rotate(-8deg) translateX(-65%)}

#first_screen a:hover::after{transform:rotate(-8deg) translateX(-25%)}

#first_screen a.skip{
  text-decoration:none;
  font-size:1.8rem;
  margin-top:4.6rem;
  letter-spacing:0em;
}

#first_screen a.skip:hover{
  transition-duration:.3s;
  opacity:.8;
}

#first_screen a.skip::before{
  background:none;
}

#first_screen a.skip::after{
  background:none;
}


#first_screen small{display:block;
  margin-top:4.7rem;
  font-size:1.14rem;
  color:#a2a2a2;
  padding-top:0;}

@media screen and (max-width: 768px){
 #first_screen small{
	font-size:1.2rem;
 }

#first_screen a.skip img{
  max-width:62px;
}

}

#first_screen.hide{opacity:0;
  visibility:hidden}

#main_visual{width:100%;
  height:100vh;
  min-height:100vh;
  min-height:-webkit-fill-available;
  overflow:hidden}

#main_visual video{width:100%;
  height:100%;
  object-fit:cover}

#sound_btn{display:block;
  width:7.1rem;
  color:#fff;
  text-decoration:none;
  font-size:1.3rem;
  text-align:center;
  position:fixed;
  right:7.2rem;
  bottom:7.2rem;
  z-index:10;
  letter-spacing:.1em;
  line-height:1.5;
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  backface-visibility:hidden;
  opacity:.6;
  cursor:pointer}

.skip_btn{display:block;
  width:7.1rem;
  color:#fff;
  text-decoration:none;
  font-size:1.3rem;
  text-align:center;
  position:fixed;
  right:7.2rem;
  bottom:12.2rem;
  z-index:10;
  letter-spacing:.1em;
  line-height:1.5;
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  backface-visibility:hidden;
  opacity:.6;
  cursor:pointer}

.skip_btn img{
  width:100%;
  display:block;
  margin:0 auto;
}


@media screen and (max-width: 768px){#sound_btn{width:6rem;
  right:2rem;
  font-size:1.1rem}
}

@media screen and (max-width: 768px){
.skip_btn{
  width:6rem;
  right:2rem;
  font-size:1.1rem;
}

.skip_btn img{
  width:100%;
}

}

a.skip_btn:hover{opacity:1}

#sound_btn:hover{opacity:1}

#sound_btn.mute{opacity:1}

#sound_btn .on,#sound_btn .off{transition-duration:.3s;
  transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
  backface-visibility:hidden}

#sound_btn .on{opacity:0;
  position:absolute;
  top:0;
  left:0}

#sound_btn .off{opacity:1}

#sound_btn.mute .on{opacity:1}

#sound_btn.mute .off{opacity:0}

#scroll{opacity:0;
  visibility:hidden;
  transition:.8s}

#scroll.on{opacity:1;
  visibility:visible}

#topics{padding:9rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  flex-direction:column}

@media screen and (max-width: 768px){#topics{padding:4.8rem 0}

}

#topics h2{font-size:3.6rem;
  font-family:"Cormorant Garamond",serif}

@media screen and (max-width: 768px){#topics h2{width:100%;
  font-size:2.4rem;
  text-align:center}

}

#topics .topics_container{margin-top:1.8rem}

@media screen and (max-width: 768px){#topics .topics_container{width:100%;
  margin-top:1.8rem;
  margin-left:0}

}

#topics article{display:flex;
  align-items:center}

@media screen and (max-width: 768px){#topics article{flex-direction:column}

}

#topics article time+h3{margin-left:3rem}

@media screen and (max-width: 768px){#topics article time+h3{margin:1.8rem 0 0}

}

#topics article h3{font-size:2rem;
  word-break:break-all;
  overflow-wrap:break-word;
  line-height:2}

@media screen and (max-width: 768px){#topics article h3{font-size:1.6rem}

}

#topics article h3 a:hover{opacity:.8}

#topics::after{content:"";
  display:block;
  width:45%;
  height:1px;
  background:#5b5b5b;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  margin:auto}

@keyframes slideFadeUpIn{0%{opacity:0;
  transform:translateY(100%)}

100%{opacity:1;
  transform:translateY(0)}

}

@keyframes slideFadeLeftOut{0%{opacity:1;
  transform:translateX(0);
  filter:blur(0)}

100%{opacity:0;
  transform:translateX(-100%);
  filter:blur(2.4rem)}

}

@keyframes fadeOut{0%{opacity:1}

100%{opacity:0}

}

@keyframes fadeIn{0%{opacity:0}

100%{opacity:1}

}

@keyframes fadeBlurIn{0%{opacity:0;
  filter:blur(2.4rem)}

100%{opacity:1;
  filter:blur(0)}

}

#thinking{width:100%;
  overflow:hidden}

#thinking h2{font-size:3.2rem;
  text-align:center}

@media screen and (max-width: 768px){#thinking h2{font-size:2.8rem}

}

#thinking h2+.contents_body{margin-top:9.6rem;
  text-align:center;
  line-height:2.4}

@media screen and (max-width: 768px){#thinking h2+.contents_body{margin-top:4.8rem;
  width:90%;
  margin-left:auto;
  margin-right:auto;
  text-align:left}

}

#thinking .fixed_container{margin-top:9.8rem;
  width:100%;
  height:100vh;
  min-height:100vh;
  min-height:-webkit-fill-available;
  position:relative;
  overflow:hidden}

#thinking .fixed_container .sc_block{position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  min-height:100vh;
  min-height:-webkit-fill-available;
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:opacity .8s}

#thinking .fixed_container .sc_block.hide{opacity:0;
  pointer-events:none}

#thinking .fixed_container .slide{position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  min-height:100vh;
  min-height:-webkit-fill-available;
  display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  align-items:center;
  opacity:0;
  box-sizing:border-box}

@media screen and (max-width: 768px){#thinking .fixed_container .slide{flex-direction:column-reverse;
  padding-top:9.6rem;
  padding-bottom:3.6rem}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide{flex-direction:row-reverse;
  padding:0}

}

#thinking .fixed_container .slide .box{width:calc(50% - 3.6rem);
  box-sizing:border-box;
  padding-left:10%;
  z-index:2;
  position:relative}

@media screen and (max-width: 768px){#thinking .fixed_container .slide .box{width:100%;
  height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-left:18%;
  padding-right:3rem;
  padding-bottom:3.6rem}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide .box{width:calc(50% - 3.6rem);
  height:auto;
  padding:0 0 0 10%}

}

#thinking .fixed_container .slide .visual{width:calc(50% - 10.8rem);
  height:64rem;
  opacity:0;
  overflow:hidden;
  position:relative;
  z-index:1}

@media screen and (max-width: 768px){#thinking .fixed_container .slide .visual{width:90%;
  height:24rem;
  align-self:flex-end;
  max-height:50%}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide .visual{width:50%;
  height:64rem;
  align-self:auto}

}

#thinking .fixed_container .slide .visual .pic_container{width:100%;
  height:100%;
  transform:scale(1.2);
  transform-origin:center center;
  position:relative}

#thinking .fixed_container .slide .visual img{width:100%;
  height:100%;
  object-fit:cover;
  position:relative;
  z-index:1;
  backface-visibility:hidden}

#thinking .fixed_container .slide .visual img.colored{position:absolute;
  top:0;
  left:0;
  z-index:2;
  opacity:0}

#thinking .fixed_container .slide .signal{display:block;
  position:absolute;
  opacity:0}

#thinking .fixed_container .slide h3{font-family:"Cormorant Garamond",serif;
  font-size:5.4rem;
  line-height:1.5;
  letter-spacing:.048em}

@media screen and (max-width: 768px){#thinking .fixed_container .slide h3{font-size:3rem}

}

#thinking .fixed_container .slide .exp{font-size:1.8rem;
  margin-top:2.4rem;
  line-height:2;
  letter-spacing:.06em}

@media screen and (max-width: 768px){#thinking .fixed_container .slide .exp{margin-top:.8rem;
  font-size:1.5rem}

}

#thinking .fixed_container .slide .txt_anim{overflow:hidden;
  backface-visibility:hidden}

#thinking .fixed_container .slide .txt_anim>span{display:block;
  opacity:0}

#thinking .fixed_container .slide .icon{width:29.2rem;
  height:29.2rem;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  margin:auto;
  z-index:3;
  perspective:1600px;
  transform-style:preserve-3d;
  pointer-events:none}

@media screen and (max-width: 768px){#thinking .fixed_container .slide .icon{width:14rem;
  height:14rem;
  top:30vh;
  left:5%;
  bottom:auto}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide .icon{top:0;
  left:0;
  bottom:0}

}

#thinking .fixed_container .slide .icon .inner,#thinking .fixed_container .slide .icon img{display:block;
  width:100%;
  height:100%;
  transform-origin:left bottom;
  opacity:0;
  filter:blur(30px);
  backface-visibility:hidden;
  object-fit:contain}

#thinking .fixed_container .slide .btn{margin:4.8rem 1.8rem 0 auto}

@media screen and (max-width: 768px){#thinking .fixed_container .slide .btn{margin:2.4rem 3rem 0 auto}

}

#thinking .fixed_container .slide .btn::before,#thinking .fixed_container .slide .btn::after{width:0;
  height:0;
  border-color:rgba(0,0,0,0)}

#thinking .fixed_container .slide .btn svg{opacity:0}

#thinking .fixed_container .slide:nth-child(even){flex-direction:row}

@media screen and (max-width: 768px){#thinking .fixed_container .slide:nth-child(even){flex-direction:column;
  padding-top:9.6rem;
  padding-bottom:0}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide:nth-child(even){padding:0;
  flex-direction:row}

}

#thinking .fixed_container .slide:nth-child(even) .box{padding-left:7.2rem;
  padding-right:7.2rem}

@media screen and (max-width: 768px){#thinking .fixed_container .slide:nth-child(even) .box{padding:3.6rem 3rem 0 18%;
  justify-content:flex-start}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide:nth-child(even) .box{padding:0 10% 0 0}

}

#thinking .fixed_container .slide:nth-child(even) .icon{left:50%}

@media screen and (max-width: 768px){#thinking .fixed_container .slide:nth-child(even) .icon{left:5%;
  top:60vh}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide:nth-child(even) .icon{left:50%;
  top:0}

}

@media screen and (max-width: 768px){#thinking .fixed_container .slide:nth-child(even) .visual{align-self:flex-start}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide:nth-child(even) .visual{align-self:auto}

}

#thinking .fixed_container .slide.active{transition:opacity .8s;
  opacity:1}

#thinking .fixed_container .slide.active .visual{animation:fadeBlurIn 1.2s forwards}

#thinking .fixed_container .slide.active .signal{animation:fadeIn 1s cubic-bezier(0.76, 0, 0.24, 1) forwards .4s}

#thinking .fixed_container .slide.active h3 span{animation:slideFadeUpIn .8s cubic-bezier(0.76, 0, 0.24, 1) forwards}

#thinking .fixed_container .slide.active .exp.txt_anim span{animation:slideFadeUpIn .8s cubic-bezier(0.76, 0, 0.24, 1) .2s forwards}

#thinking .fixed_container .slide.active .btn::before,#thinking .fixed_container .slide.active .btn::after{width:100%;
  height:100%;
  border-color:#5b5b5b}

#thinking .fixed_container .slide.active .btn::before{transition:width .2s 1s,height .2s 1.2s}

#thinking .fixed_container .slide.active .btn::after{transition:width .2s 1.4s,height .2s 1.6s}

#thinking .fixed_container .slide.active .btn svg{opacity:1;
  transition:.4s;
  transition-delay:.8s}

#thinking .fixed_container .slide.hide{opacity:0;
  pointer-events:none}

#thinking .fixed_container .slide.hide h3 span{animation:slideFadeLeftOut .8s cubic-bezier(0.76, 0, 0.24, 1) forwards}

#thinking .fixed_container .slide.hide .exp.txt_anim span{animation:slideFadeLeftOut .8s cubic-bezier(0.76, 0, 0.24, 1) .1s forwards}

#thinking .fixed_container .slide.hide .btn{animation:fadeOut .8s cubic-bezier(0.76, 0, 0.24, 1) forwards}

#thinking .fixed_container .slide.col2{display:flex;
  flex-direction:row-reverse;
  justify-content:space-between;
  padding:12rem 0}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2{flex-direction:column;
  padding:0}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide.col2{flex-direction:row-reverse}

}

#thinking .fixed_container .slide.col2>article{width:calc(50% - 36px);
  height:100%;
  box-sizing:border-box;
  position:relative;
  display:flex;
  align-items:flex-end;
  flex-direction:column}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article{width:100%;
  height:50vh;
  flex-direction:column;
  padding-top:9.6rem;
  padding-bottom:0}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container .slide.col2>article{width:calc(50% - 36px);
  height:100%}

}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container .slide.col2>article{height:50dvh}

}

#thinking .fixed_container .slide.col2>article .visual{width:90%;
  height:27rem;
  flex-grow:0;
  flex-shrink:0;
  flex-basis:auto}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article .visual{height:10rem}

}

#thinking .fixed_container .slide.col2>article .box{width:100%;
  margin-top:4.8rem;
  padding:0 7.2rem 0 10%}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article .box{height:auto;
  margin-top:0;
  padding:0 3rem 0 15%}

}

#thinking .fixed_container .slide.col2>article h3{font-size:4.8rem}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article h3{font-size:2.6rem;
  order:2;
  margin-top:-2.4rem}

}

#thinking .fixed_container .slide.col2>article .exp{font-size:1.8rem;
  margin-top:.8rem}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article .exp{font-size:1.4rem;
  order:3}

}

#thinking .fixed_container .slide.col2>article .btn{margin-top:0}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article .btn{order:1;
  margin-top:0;
  z-index:5;
  margin-right:0}

}

#thinking .fixed_container .slide.col2>article .icon{width:14.8rem;
  height:14.8rem;
  top:27rem;
  left:5%}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article .icon{width:9.6rem;
  height:9.6rem;
  top:36vh}

}

#thinking .fixed_container .slide.col2>article .icon img{filter:blur(0)}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article:nth-of-type(odd) .visual{align-self:flex-end}

}

#thinking .fixed_container .slide.col2>article:nth-of-type(even){flex-direction:column-reverse;
  align-items:flex-start}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article:nth-of-type(even){padding-top:3.6rem;
  padding-bottom:3.6rem}

}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) .box{width:100%;
  padding:0 10% 0 10%}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) h3{order:1}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) .exp{order:2}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) .btn{order:3;
  margin-top:0}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) .icon{top:12%;
  bottom:auto}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article:nth-of-type(even) .icon{top:20vh}

}

#thinking .fixed_container .slide.col2>article:nth-of-type(even) .visual{margin-top:6rem}

@media screen and (max-width: 768px){#thinking .fixed_container .slide.col2>article:nth-of-type(even) .visual{align-self:flex-start;
  margin-top:0}

}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .box{margin-top:0}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .visual{animation:fadeBlurIn 1.2s forwards .6s}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .signal{animation:fadeIn 1s cubic-bezier(0.76, 0, 0.24, 1) forwards .8s}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) h3 span{animation:slideFadeUpIn .8s cubic-bezier(0.76, 0, 0.24, 1) .4s forwards}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .exp.txt_anim span{animation:slideFadeUpIn .8s cubic-bezier(0.76, 0, 0.24, 1) .6s forwards}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .btn::before{transition:width .2s 1.4s,height .2s 1.6s}

#thinking .fixed_container .slide.col2.active>article:nth-child(2) .btn::after{transition:width .2s 1.8s,height .2s 2s}

#thinking .fixed_container #account_planning{z-index:100}

#thinking .fixed_container #account_planning .signal{width:49.2rem;
  top:60vh;
  left:10%}

#thinking .fixed_container #account_planning .icon{perspective-origin:90% 50%}

#thinking .fixed_container #account_planning .icon .inner{transform:rotateX(120deg) rotateY(12deg) rotateZ(0deg) translate3d(40vw, 60vh, 500px);
  transform-origin:center center;
  background:url(../images/home/icon_chr_ap.png) center center/auto 100% no-repeat}

#thinking .fixed_container #insight{z-index:99}

#thinking .fixed_container #insight .bg{background:url(../images/home/bg_is.png) center right/cover no-repeat}

#thinking .fixed_container #insight .signal{width:31.6rem;
  top:40vh;
  left:68%}

#thinking .fixed_container #insight .icon{perspective-origin:70% 50%;
  perspective:300px}

#thinking .fixed_container #insight .icon .inner{transform:rotateX(8deg) rotateY(80deg) rotateZ(6deg) translate3d(-30vw, 25vh, 500px);
  background:url(../images/home/icon_chr_is.png) center center/100% auto no-repeat}

#thinking .fixed_container #narrative .signal{width:40.6rem;
  top:34vh;
  left:3%}

#thinking .fixed_container #narrative .icon{perspective-origin:40% 50%;
  perspective:600px}

#thinking .fixed_container #narrative .icon img{transform-origin:center center;
  transform:scale(5) rotateX(-12deg) rotateY(80deg) rotateZ(6deg) translate3d(0, 5vh, 200px)}

#thinking .fixed_container #re_thinking .signal{width:56.4rem;
  top:44vh;
  left:48%}

#thinking .fixed_container #re_thinking .icon{perspective-origin:80% 50%;
  perspective:600px}

#thinking .fixed_container #re_thinking .icon img{transform-origin:center center;
  transform:scale(0.7) rotateX(96deg) rotateY(4deg) rotateZ(6deg) translate3d(-20vw, 5vh, 600px)}

#thinking .fixed_container #context .signal{width:35.4rem;
  top:60vh;
  left:15%}

#thinking .fixed_container #context .icon{perspective-origin:0% 50%;
  perspective:600px}

@media screen and (max-width: 768px){#thinking .fixed_container #context .icon{top:40vh}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container #context .icon{top:0}

}

#thinking .fixed_container #context .icon img{transform-origin:center center;
  opacity:1;
  backface-visibility:visible;
  position:absolute}

#thinking .fixed_container #context .icon #icon_ct_c{left:0;
  top:2.7rem;
  width:13.4rem;
  height:auto}

@media screen and (max-width: 768px){#thinking .fixed_container #context .icon #icon_ct_c{width:6.7rem;
  top:1.35rem}

}

#thinking .fixed_container #context .icon #icon_ct_t{left:12.65rem;
  top:4.2rem;
  width:16.5rem;
  height:auto}

@media screen and (max-width: 768px){#thinking .fixed_container #context .icon #icon_ct_t{width:8.25rem;
  top:2.1rem;
  left:6.3rem}

}

#thinking .fixed_container #connecting_the_dots .signal{width:51.2rem;
  top:56vh;
  left:45%}

#thinking .fixed_container #connecting_the_dots .icon{perspective-origin:50% 50%}

#thinking .fixed_container #connecting_the_dots .icon img{transform-origin:center center;
  transform:scale(8) rotateX(2deg) rotateY(30deg) rotateZ(-12deg) translate3d(4vw, -4vh, 0)}

#thinking .fixed_container #void .signal{width:22rem;
  top:48vh;
  left:15%}

#thinking .fixed_container #void .icon{perspective-origin:80% 50%}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container #void .icon{top:0}

}

#thinking .fixed_container #void .icon img{transform:rotateX(60deg) rotateY(54deg) rotateZ(-72deg) translate3d(-12vw, -8vh, 0)}

#thinking .fixed_container #interaction .signal{width:50.4rem;
  top:12vh;
  left:15%}

#thinking .fixed_container #interaction .icon{perspective-origin:0% 50%}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container #interaction .icon{top:40%}

}

#thinking .fixed_container #interaction .icon img{transform:rotateX(5deg) rotateY(60deg) rotateZ(-24deg) translate3d(18vw, -12vh, 0)}

#thinking .fixed_container #medium .signal{width:27.4rem;
  top:58vh;
  left:1%}

#thinking .fixed_container #medium .icon{perspective-origin:60% 60%;
  top:6rem;
  left:-5%}

@media screen and (max-width: 768px){#thinking .fixed_container #medium .icon{top:74%;
  left:auto;
  right:5%}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container #medium .icon{top:6rem;
  left:-5%}

}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container #medium .icon{top:-20%}

}

#thinking .fixed_container #medium .icon img{transform:scale(0.8) rotateX(83deg) rotateY(3deg) rotateZ(-12deg) translate3d(0vw, -4vh, -100px)}

#thinking .fixed_container #distance .signal{width:36rem;
  top:24vh;
  left:24%}

#thinking .fixed_container #distance .icon{perspective-origin:0% 50%;
  left:12%;
  top:26%}

@media screen and (max-width: 768px){#thinking .fixed_container #distance .icon{left:40%}

}

@media screen and (max-width: 768px)and (orientation: landscape){#thinking .fixed_container #distance .icon{left:12%}

}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container #distance .icon{top:54%}

}

#thinking .fixed_container #distance .icon img{transform:rotateX(5deg) rotateY(60deg) rotateZ(-4deg) translate3d(24vw, -12vh, -200px)}

#thinking .fixed_container #evoke .signal{width:24.6rem;
  top:54vh;
  left:0%}

#thinking .fixed_container #evoke .icon{perspective-origin:0% 50%}

@media screen and (min-width: 800px)and (orientation: portrait){#thinking .fixed_container #evoke .icon{top:0%}

}

#thinking .fixed_container #evoke .icon img{transform:scale(3) rotateX(5deg) rotateY(90deg) rotateZ(0deg) translate3d(12vw, -4vh, 0)}

#contact{height:24rem;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  text-decoration:none;
  margin-top:24rem;
  padding:0 10rem;
  color:#fff;
  border:1px solid #5b5b5b;
  box-sizing:border-box;
  transition:.4s}

@media screen and (max-width: 768px){#contact{margin-top:9.6rem;
  height:12rem;
  padding:0 3.6rem}

}

#contact .label{font-size:4.8rem;
  font-family:"Cormorant Garamond",serif}

@media screen and (max-width: 768px){#contact .label{font-size:2.4rem}

}

#contact .btn{margin-left:10rem}

@media screen and (max-width: 768px){#contact .btn{margin-left:3.6rem}

}

#contact:hover{border:1px solid #8a8a8a}

#contact:hover .btn>div{width:100%;
  height:100%}

#contact:hover .btn>svg path{transition:.3s;
  fill:#000}