@charset "UTF-8";
/* CSS Document */

* {margin:0px; padding:0px;}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&family=Noto+Serif+TC:wght@600;700&display=swap');


body, html {font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-size:18px; line-height:24px; font-weight:300; background-image:url(../images/eslite_bg.jpg); background-repeat:no-repeat; background-position:top center; background-color:#f5f5f5; position:relative;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}

.cleardiv {clear:both;}

#eslite_body {position:relative;}

#eslite_kv {position:relative; margin-top:50px; opacity:0;}
#eslite_kv .ipad_30 {display:inline-block; width:35%; vertical-align:middle; position:relative; margin-left:10%; margin-right:2%; position:relative;}
#eslite_kv .ipad_30 img.ipad {display:block; width:100%;}
#eslite_kv .ipad_30 img.ipad_top {display:block; width:100%; position:absolute; top:0px; left:0px; z-index:3;}
#eslite_kv .ipad_30 video {position:absolute; z-index:2; top:4%; left:7%; width:86%;}

#eslite_kv .ipad_rt {display:inline-block; width:40%; vertical-align:middle;}
#eslite_kv .ipad_rt .h3 {margin-bottom:30px;}


.eslite_wrap {width:100%; max-width:1300px; margin:auto; position:relative; padding:60px 0px; overflow-x:hidden;}

h1.esline_h1 {font-family:'Noto Serif TC',sans-serif; font-size:70px; line-height:89px; text-align:center; font-weight:700;}
h2.esline_h2 {font-family:'Noto Serif TC',sans-serif; font-size:50px; line-height:70px; text-align:center; font-weight:700;}
h3.esline_h3 {font-size:35px; line-height:55px; text-align:center; font-weight:500; color:#8c8479; margin:30px 0px;}

.eslite_kv_title {opacity:0;}

.h3 {font-size:35px; line-height:42px; font-weight:500; color:#8c8479;}

.eslite_web {display:flex;}
.eslite_web .web {margin-right:15px;}
.eslite_web .block {flex-grow:0.4; flex-shrink:1; flex-basis:0%; width:120px; height:120px; background:#cec3b4;}
.eslite_web .words {flex-grow:3; flex-shrink:1; flex-basis:0%;}
.eslite_web .rt {flex-grow:4; flex-shrink:1; flex-basis:0%; margin-right:0px; align-items:center; position:relative;}
.eslite_web .rt img {display:block; width:100%; /*flex-grow:0; flex-shrink:0;*/ margin-bottom:10px;}
.eslite_web .mbimg {display:none;}

.eslite_web h4 {font-size:50px; font-family:'Noto Serif TC',sans-serif; font-weight:700; line-height:60px; margin:30px 0px;}
.eslite_web h3 {text-align:left; margin-top:0px; line-height:40px;}

#eslite_anni {margin:100px 0px 60px 0px; opacity:0;}
#eslite_wine {margin-top:120px; /*opacity:0;*/}
#eslite_jp {background:white; /*opacity:0;*/}

#eslite_anni .words {flex-grow:4;}


.flip_circle {display:flex; justify-content:center;}
.circle {display:flex; width:190px; height:190px; background:#5e574e; border-radius:200px; justify-content:center; align-items:center; margin:20px 0.5% 0px 0.5%; z-index:5;}
.circle p {display:block; font-size:15px; text-align:center; color:white;}
.circle .light {font-size:30px; line-height:40px; color:#eee0af; font-family:'Noto Serif TC',sans-serif; font-weight:700; margin:0px 5px;}


.slide_wrapper {width:100%; position:relative; overflow:hidden; height:214px; margin:0px 0px 10px 0px; opacity:0;}
.slide_wrapper .items {width:390px; height:214px; position:absolute;}
.slide_wrapper .box {position:relative; left:-390px;}

.goweb {display:block; width:50%; max-width:100px; margin-top:30px; padding:10px 20px; background:#cec3b4; color:white; text-decoration:none; text-align:center;}


/* CSS */
.button-27 {
  appearance: none;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  will-change: transform;
}

.button-27:disabled {
  pointer-events: none;
}

.button-27:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.button-27:active {
  box-shadow: none;
  transform: translateY(0);
}


/*--- 星球 ---*/
.planet_a {width:250px; position:absolute; left:3%; bottom:-40px; z-index:0; opacity:0;
	-webkit-animation:spin 8s linear infinite;
    -moz-animation:spin 8s linear infinite;
    animation:spin 8s linear infinite;
}
.planet_b {width:120px; position:absolute; right:100px; top:-100px; z-index:0; opacity:0;}
.planet_c {width:150px; position:absolute; right:20%; bottom:-150px; z-index:0; transform:rotate(-90deg); opacity:0;}
.planet_d {width:60px; position:absolute; left:13%; top:-80px; z-index:0; opacity:0;}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}


@media screen and (max-width: 768px) {

    #eslite_kv .ipad_30 {display:block; width:70%; margin:30px auto;}
    #eslite_kv .ipad_rt {display:block; width:90%; margin:0px auto;}
    #eslite_kv .ipad_30 video {max-width:85%; top:5%; left:8%;}
    
    .planet_a {width:120px; top:30%; left:0; bottom:0;}
    .planet_b {width:80px; right:0; top:-5%;}
    .planet_c {width:100px; right:10%; bottom:-15%;}
    .planet_d {left:5%; top:-25%;}

    h1.esline_h1 {font-size:50px;}
    h2.esline_h2 {font-size:30px; line-height:40px;}
    h3.esline_h3 {font-size:24px;}
    .eslite_web .rt {display:none;}
    .eslite_web .mbimg {display:block; width:100%; height:auto; margin:20px auto;}
    .eslite_web .mbimg img {display:block; width:100%;}
    .eslite_web .block {height:50px;}
    .eslite_web h4 {font-size:30px; line-height:40px; margin:0px 0px 30px 0px;}
    .eslite_web h3 {line-height:30px;}

    .h3 {font-size:24px; line-height:30px;}

    .circlemb {display:inline-block; vertical-align:top; background:#5e574e; margin:2%; padding:10px 0px; width:45%;}
    .circlemb p {display:block; font-size:15px; text-align:center; color:white;}
    .circlemb .light {font-size:30px; line-height:40px; color:#eee0af; font-family:'Noto Serif TC',sans-serif; font-weight:700; margin:0px 5px;}
    .circlemb:first-child {width:95%;}

    .flex-control-nav {position:relative; margin-top:10px; bottom:0px;}
    .flex-nav-prev, .flex-nav-next {display:none;}

    
}