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

* {margin:0px; padding:0px; user-select:none;}
img{-webkit-user-drag: none;}

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=Cormorant+Garamond:wght@600;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Serif+TC:wght@600;700&display=swap');
/*font-family: 'Almarai', sans-serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;*/


body, html {position:relative; width:100%; font-size:16px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400; color:black; overflow-x:clip; background:white; background-size:cover; scroll-behavior:smooth;}
a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active, a:visited {text-decoration:none; cursor:pointer !important; outline:none !important;}
ul, li {list-style:none;}


.back_to_top {font-family:Arial,sans-serif; font-size:14px; font-weight:300; text-transform:none; color:#fff; text-align:center; text-transform:uppercase; display:none; background:black; width:60px; padding:10px 0px; cursor:pointer; position:fixed; right:0; bottom:0; z-index:9999 !important;}
.back_to_top .material-icons {vertical-align:bottom; margin-bottom:-5px;}


/* ---------- loading ---------- */
#loading {position: fixed; background: #8f2b29; top: 0; left: 0; right: 0; bottom: 0;z-index: 1000;}
#loading .centerbox {position: absolute; top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%; max-width: 400px;
}
#loading .loader {display: block; width: 48px; height: 48px;
  border: 5px solid white;
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: rotation 1.5s linear infinite;
          animation: rotation 1.5s linear infinite;
  margin: 0 auto 15px;
}
#loading .loading_text {font-family: 'Almarai', sans-serif; font-size: 18px; color: #FFF; text-align: center; margin-bottom: 15px;}
#loading .loading_text::after {content: "...";
  -webkit-animation: load_dot 1s alternate linear infinite;
          animation: load_dot 1s alternate linear infinite;
}
#loading .loading_bar {height: 5px; background: #8f2b29; border-radius: 10px; overflow: hidden;}
#loading .loading_bar .progress {background: white; width: 1%; height: 5px; -webkit-transition: all 1s; transition: all 1s;}
  
@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg); transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg); transform: rotate(360deg);
  }
}
@-webkit-keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}
@keyframes load_dot {
  0% {content: ".";}
  50% {content: "..";}
  100% {content: "...";}
}


/* ---------- header ---------- */
header {position:relative; width:100vw; display:flex; align-items:flex-start; justify-content:flex-start;}
header .hd_logo img {width:200px; height:200px;}
header .nav {position:relative; display:flex; align-items:center; justify-content:flex-start; background:white; z-index:10;}
header .nav li {position:relative;}
header .nav li:hover {background:#8f2b29;}
header .nav a {display:flex; flex-wrap:wrap; padding:25px 12px; align-items:center; color:black; font-size:20px; text-align:center; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
header .nav a span {width:100%;}
header .nav li p {width:100%; font-family:'Cormorant Garamond', serif; font-size:15px; color:#8f2b29; font-weight:700;}
header .nav li:hover a {background:#8f2b29; color:white; cursor:pointer;}
header .nav li:hover p {color:white;}

header .nav .sub {display:block; position:absolute; width:100%;}
header .nav .sub a {box-sizing:border-box; padding:12px 10px; background:#F2EFE9; font-size:18px; text-align:center; justify-content:center;}
header .nav li:hover .sub a {background:#F2EFE9; color:black;}
header .nav .sub a:hover {background:#8f2b29 !important; color:white !important;}

header .sns {position:absolute; top:220px; left:80px; z-index:99;}
header .sns li {margin-bottom:10px;}
header .sns li img {width:40px; height:40px;}

header #menu_toggle, header .mb_sns {display:none;}

.menu_ham {position:fixed; top:17px; right:15px; height:27px; width:30px; cursor:pointer; z-index:21; transition:opacity 0.25s ease;}
.menu_ham span {background:#8f2b29; border:none; height:3px; width:100%; position:absolute; top:0; left:0; transition:all 0.35s ease; cursor:pointer;}
.menu_ham span:nth-child(2) {top:11px;}
.menu_ham span:nth-child(3) {top:22px;}
.menu_ham.active .top {transform:translateY(11px) translateX(0) rotate(45deg); background:#8f2b29;}
.menu_ham.active .middle {opacity:0; background:#8f2b29;}
.menu_ham.active .bottom {transform:translateY(-11px) translateX(0) rotate(-45deg); background:#8f2b29;}

header .arrow {display:none;}

.kv_bg {display:block; width:45vw; height:400px; background:#8f2b29; position:absolute; top:0; right:0; z-index:0;}

/* ---------- fixed header ---------- */
#fixheader {position:fixed; top:0; z-index:100; height:90px; width:100vw; display:flex; align-items:flex-start; justify-content:flex-start; border-bottom:1px solid #e7e7e7; background:white;}
#fixheader .hd_logo img {width:90px; height:90px;}
#fixheader .nav {height:90px; position:relative; display:flex; align-items:center; justify-content:flex-start; background:white; z-index:10;}
#fixheader .nav li {position:relative;}
#fixheader .nav li:hover {background:#8f2b29;}
#fixheader .nav a {display:flex; flex-wrap:wrap; padding:22.5px 12px; align-items:center; color:black; font-size:20px; text-align:center; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
#fixheader .nav a span {width:100%;}
#fixheader .nav li p {width:100%; font-family:'Cormorant Garamond', serif; font-size:15px; color:#8f2b29; font-weight:700;}
#fixheader .nav li:hover a {background:#8f2b29; color:white; cursor:pointer;}
#fixheader .nav li:hover p {color:white;}

#fixheader .nav .sub {display:block; position:absolute; width:100%;}
#fixheader .nav .sub a {box-sizing:border-box; padding:12px 10px; background:#F2EFE9; font-size:18px; text-align:center; justify-content:center;}
#fixheader .nav li:hover .sub a {background:#F2EFE9; color:black;}
#fixheader .nav .sub a:hover {background:#8f2b29 !important; color:white !important;}

#fixheader .sns {position:absolute; top:23px; left:auto; right:20px; display:flex;}
#fixheader .sns li {margin:0px 7px;}
#fixheader .sns li img {width:40px; height:40px;}



/* ---------- KV ---------- */
#kv_slide {position:relative; width:100vw; z-index:1;}

#kv_slide .slide_pic {width:calc(100vw - 300px); position:relative; margin-left:200px; margin-top:-108px; background:white;}
#kv_slide .slide_pic img {width:100%; height:auto;}

/* #kv_slide .slide_text {position:absolute; left:100px; bottom:0px; width:25vw; min-width:300px; padding:30px 50px; background:#F1EEEA;} */
#kv_slide .slide_text {position:absolute; bottom:0px; width:25vw; min-width:200px; max-width:350px; padding:30px 50px; background:rgba(241, 238, 234, 0.9);}
/* #kv_slide .slide_text::before {display:block; content:''; width:60px; height:60px; background:url(../images/slide_curve_1.svg) center no-repeat; background-size:cover; position:absolute; left:0; bottom:0;}
#kv_slide .slide_text::after {display:block; content:''; width:60px; height:60px; background:url(../images/slide_curve_2.svg) center no-repeat; background-size:cover; position:absolute; left:100%; bottom:0;} */
#kv_slide .slick-dots {width:150%; bottom:15px; left:120%; text-align:left;}
#kv_slide .slick-dotted.slick-slider {margin-bottom:0px;}

#kv_slide .slick-dots li button:before {font-size:35px; color:white; opacity:0.8;}
#kv_slide .slick-dots li.slick-active button:before {color:#8f2b29;}

#kv_slide .slide_text p {font-size:18px; line-height:24px; font-family:'Noto Sans TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:400;}


/* ---------- 共用 ---------- */
h1 {font-size:40px; text-align:center; margin:50px auto; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
h1 span {display:block; margin:auto; text-align:center; font-family: 'Cormorant Garamond', serif; color:#8f2b29; font-weight:600;}
h1 span.lines {display:inline-block; vertical-align:middle; width:70px; height:1px; background:black; margin:auto 15px 10px 15px;}
h2 {display:table; margin:50px auto 30px auto; font-size:28px; font-weight:400; text-align:center; color:#8f2b29; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600;}
h2 span {display:block; margin:auto; text-align:center; font-family: 'Cormorant Garamond', serif; color:black; font-weight:600; font-size:24px;}
p.info {font-size:18px; line-height:24px; text-align:justify;}
.center {display:block; position:relative; width:calc(100vw - 200px); margin:auto;}

/* img.ltbt {border-bottom-left-radius:100px;}
img.lttp {border-top-left-radius:100px;}
img.rttp {border-top-right-radius:100px;}
img.rtbt {border-bottom-right-radius:100px;} */


/* ---------- about ---------- */
#about {display:block; position:relative; width:calc(100vw - 200px); margin:auto; opacity:0;}
#about h1 {color:#555;}
#about p.info {display:block; width:70%; margin:auto;}

#about .video_slide {position:relative; margin:50px auto;}
#about .video_slide a {position:relative; margin:0px 15px;}
#about .video_slide a img {width:100%; height:auto;}

#about .slick-next:before {display:block; content:''; width:50px; height:50px; background:url(../images/arrow_rt.svg) center no-repeat; background-size:cover; opacity:1;}
#about .slick-prev:before {display:block; content:''; width:50px; height:50px; background:url(../images/arrow_lt.svg) center no-repeat; background-size:cover; opacity:1;}
#about .slick-prev, #about .slick-next {width:50px; height:50px; z-index:20;}
#about .slick-prev {left:-50px;}
#about .slick-next {right:-50px;}

#about .info_btn {display:table; padding:6px 30px; margin:20px auto; background:#8f2b29; font-size:20px; color:white; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#about .info_btn:hover {background:black;}

#about .decblock {display:block; content:''; width:15vw; height:200px; position:absolute; right:-10vw; top:-50px; z-index:0; border:7px solid #f4f4f4; border-right:0px;}


/* ---------- all_class ---------- */
#fine_art_class {position:relative; background:url(../images/bg_a.jpg) center no-repeat; background-size:cover; padding:40px 0px; margin-top:80px; opacity:0;}
#fine_art_class h1 {margin-top:20px;}

#fine_art_class .class_anchor {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
#fine_art_class .class_anchor a {font-size:20px; color:black; position:relative; padding:10px 30px; margin:0px 10px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
/* #fine_art_class .class_anchor a::before {display:block; content:''; width:10px; height:10px; border-radius:10px; background:#8f2b29; position:absolute; top:50%; left:10px; transform:translateY(-50%);} */
#fine_art_class .class_anchor a:hover {background:#8f2b29; color:white; cursor:pointer}

.class_slide {position:relative; margin:50px auto;}
.class_slide div.classes {position:relative; margin:0px 30px;}
.class_slide div img {width:100%; height:auto;}

.class_slide .class_eng {display:table; margin-top:10px; color:dimgray; font-family:'Cormorant Garamond', serif;}
.class_slide .class_name {font-size:20px; margin-bottom:10px; color:#8f2b29;}
.class_slide .class_info {font-size:16px; line-height:24px; text-align:justify; margin-bottom:10px;}
.class_slide .class_level li {font-size:16px; line-height:24px; list-style:none; /*text-indent:-1em;*/}
/* .class_slide .class_level li::before {content:'・'; color:#8f2b29;} */
.class_slide .go_class {display:table; margin:20px auto 0px auto; padding:8px 25px; background:#8f2b29; color:white; font-size:18px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.class_slide .go_class:hover {background:black;}

.class_slide .slick-next:before {display:block; content:''; width:50px; height:50px; background:url(../images/arrow_rt.svg) center no-repeat; background-size:cover; opacity:1;}
.class_slide .slick-prev:before {display:block; content:''; width:50px; height:50px; background:url(../images/arrow_lt.svg) center no-repeat; background-size:cover; opacity:1;}
.class_slide .slick-prev, .class_slide .slick-next {width:50px; height:50px; z-index:20;}
.class_slide .slick-prev {left:-50px;}
.class_slide .slick-next {right:-50px;}

#training_class, #interests_class {padding:40px 0px; opacity:0;}
#child_class {padding:40px 0px; background:url(../images/bg_b.jpg) center no-repeat; background-size:cover; opacity:0;}

#fine_art_class .logo_circle {display:block; width:15vw; max-width:200px; height:15vw; max-height:200px; position:absolute; left:0px; z-index:5;}
#fine_art_class .logo_circle img {position:absolute; top:0; left:0; width:100%;}
#fine_art_class .logo_circle img.circle_blk {opacity:0.5;}

#training_class {overflow:hidden;}
#training_class .logo_circle {display:block; width:18vw; max-width:250px; height:18vw; max-height:250px; position:absolute; right:0px; top:-12vw; z-index:0;}
#training_class .logo_circle img {position:absolute; top:0; left:0; width:100%; opacity:0.2;}


/* ---------- art guide ---------- */
#team {position:relative; padding:50px 0px 100px 0px; background:#8f2b29; opacity:0;}
/* #team::before {display:block; content:''; width:100vw; height:30vw; background:#8f2b29; z-index:0; position:absolute; top:0; left:0; border-top-left-radius:30vw; border-top-right-radius:30vw;}
#team::after {display:block; content:''; width:100vw; height:calc(100% - 30vw); background:#8f2b29; z-index:0; position:absolute; top:30vw; left:0;} */

#team h1 {position:relative; z-index:1; color:white; margin-top:20px;}
#team h1 span {color:white;}
#team h1 span.lines {background:white;}

#team .guide_grid {position:relative; z-index:1; width:1100px; max-width:80%; margin:auto;
  display:grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  grid-gap: 5px 10px;
}
#team .guide_grid .teacher {position:relative; margin-bottom:-5px;}
#team .guide_grid .teacher img {width:100%; height:auto;}
#team .guide_grid .teacher img.teacher_hv {position:absolute; top:0; left:0;}

#team h3 {position:relative; text-align:center; font-size:30px; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif; font-weight:600; color:#8f2b29; margin-bottom:35px;}
#team h3 span {font-size:24px; color:black; display:block; position:relative;}
#team h3 span.lines {display:inline-block; vertical-align:middle; width:70px; height:1px; background:#8f2b29; margin:auto 15px 10px 15px;}

/*
.nora {grid-column:1/2; grid-row:1/2;}
.nora_info {grid-column:1/5; grid-row:2/3;}
*/
/*
.siaoyu {grid-column:4/5; grid-row:1/2;}
.siaoyu_info {grid-column:1/5; grid-row:2/3;}
*/

.winnie {grid-column:1/2; grid-row:1/2;}
.winnie_info {grid-column:1/4; grid-row:2/3;}
.kuopen {grid-column:2/3; grid-row:1/2;}
.kuopen_info {grid-column:1/4; grid-row:2/3;}
.alex {grid-column:3/4; grid-row:1/2;}
.alex_info {grid-column:1/4; grid-row:2/3;}

.hungyen {grid-column:1/2; grid-row:3/4;}
.hungyen_info {grid-column:1/4; grid-row:2/3;}
.estrella {grid-column:2/3; grid-row:3/4;}
.estrella_info {grid-column:1/4; grid-row:2/3;}
.hsuan {grid-column:3/4; grid-row:3/4;}
.hsuan_info {grid-column:1/4; grid-row:2/3;}

#team .guide_grid .guide {position:relative; box-sizing:border-box; padding:20px 10%; background:url(../images/bg_c.jpg) center no-repeat; background-size:cover; background-attachment:fixed;}

#team .guide_title {display:block; margin:auto; margin-bottom:30px;}
#team .guide_timeline {position:relative; max-width:100%; padding-bottom:20px; display:flex; flex-wrap:nowrap; justify-content:flex-start; align-items:flex-start;}
#team .guide_timeline .tch_content {/*display:inline-block; vertical-align:top;*/ flex:1; margin-right:20px; max-height:400px; overflow-y:scroll;}
/*#team .guide_timeline img {display:inline-block; vertical-align:top; width:30%; max-width:270px;margin-right:20px;}*/
#team .guide_timeline .tch_text {/*display:inline-block; vertical-align:top;*/ max-width:70%; flex:3; margin-right:20px;}

#team .guide_timeline .tch_img_slide {width:60%; max-width:600px; flex:1;}
#team .guide_timeline .tch_img_slide div {margin:0px 5px;}
#team .guide_timeline .tch_img_slide .slick-dots li button:before {font-size:30px; line-height:30px;}

#team .tch_img_slide_mb {display:none;}

/* #team .guide_timeline::-webkit-scrollbar {background:transparent; height:10px; border-bottom:1px solid #8f2b29;}
#team .guide_timeline::-webkit-scrollbar-thumb {background:#8f2b29;}
#team .guide_timeline::-webkit-scrollbar-track {background:transparent;} */

#team .tch_content p {font-size:16px; /*border-bottom:2px dashed #b89898;*/ margin-bottom:5px; padding-bottom:5px;}
/* #team .tch_content p:first-child {font-size:20px; font-weight:700;} */
#team .tch_content p:last-child {border-bottom:0px;}
#team .tch_content p.line {border-bottom:2px dashed #b89898; margin-bottom:15px;}

#team .tch_text p {text-align:justify; margin-bottom:10px;}


/* ---------- news ---------- */
#news {position:relative;}
#news h1 {color:#555;}
#news .fb_con {position:relative; display:flex; justify-content:center; margin-bottom:80px;}
#news .fb_con div.fb_timeline {position:relative; width:40%; max-width:340px; margin:0px 5%; overflow:scroll;}
#news .fb_con .fb_iframe_widget span {display:block; margin:auto;}
.fb-page, 
.fb-page span, 
.fb-page span iframe[style] { 
    width: 100% !important; 
}
#news .fb_con p {font-size:24px; text-align:center; border-bottom:10px solid #8f2b29; margin-bottom:5px; padding-bottom:15px;}







@media screen and (max-width:1200px) {
  
  /* ---------- header ---------- */
  header .hd_logo img {width:150px; height:150px;}
  header .sns {top:180px; left:55px;}
  header .sns li {margin-bottom:10px;}
  
  /* ---------- KV ---------- */
  #kv_slide .slide_pic {width:calc(100vw - 200px);}
  #kv_slide .slide_pic {margin-left:150px; margin-top:-60px;}
  #kv_slide .slide_text {padding:20px 40px;}
  
  /* ---------- about ---------- */
  #about {width:calc(100vw - 100px);}
  
  /* ---------- all_class ---------- */
  .class_slide div.classes {margin:0px 20px;}

}


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

  #fixheader {display:none;}
	
	/* ---------- header ---------- */
  header {height:60px; display:block; background:white; position:fixed; top:0; z-index:99; border-bottom:1px solid #e7e7e7;}
  header .hd_logo {position:relative; z-index:25;}
  header .hd_logo img {width:60px; height:auto;}
  header .opn_menu {display:block; position:fixed; z-index:10; z-index:10; top:0; left:0; height:0%; width:100%; overflow:scroll; background:white; opacity:0; visibility:hidden; transition:opacity 0.35s, visibility 0.35s, height 0.35s;}
  header .opn_menu.open {opacity:1; visibility:visible; height:100vh; overflow:scroll;}
  header .opn_menu nav {position:relative; /*top:50%; transform:translateY(-50%);*/ height:calc(100vh - 70px); top:70px; overflow:scroll; padding-bottom:100px;}
  header .nav {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative;}
  header .nav li {width:100%; border-bottom:1px solid #e6e6e6;}

  header .nav a {font-size:18px; padding:15px; position:relative;}
  header .nav li:hover a, header .nav a:hover {background:white; color:black;}
  header .nav a:hover p, header .nav li:hover p {color:#8f2b29;}

  header .nav .sub {position:relative; padding-bottom:10px;}
  header .nav li:hover, header .nav li:hover .sub a {background:white;}
  header .nav .sub li {border-bottom:0px;}
  header .nav .sub a {font-size:16px; background:white;}
  header .nav .sub a:hover {background:white !important; color:black !important;}

  header .nav .mb_sns {display:flex; flex-wrap:nowrap; justify-content:center; align-items:center;}
  header .nav .mb_sns img {width:30px; height:30px;}

  header #menu_toggle, header .mb_sns {display:block;}

  header .sns {display:none;}

  header .arrow {
    width: 15px !important;
    height: 15px;
    display: inline-block;
    position: absolute;
    top:50%; right:25%; transform:translateY(-50%);
  }
  header .arrow span {
    top: 8px;
    position: absolute;
    width: 9px !important;
    height: 2px;
    background-color: black;
    display: inline-block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
  header .arrow span:first-of-type {
    left: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  header .arrow span:last-of-type {
    right: 0px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header .arrow.active span:first-of-type {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  header .arrow.active span:last-of-type {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .kv_bg {display:none;}

  /* ---------- KV ---------- */
  #kv_slide .slide_pic {width:100%; margin-left:0px; margin-top:0px; margin-top:60px;}
  #kv_slide .slide_text {position:relative; width:100%; min-width:100%; left:0px; box-sizing:border-box; padding:20px 20px 20px 30px;}
  #kv_slide .slide_text::before {width:40px; height:40px;}
  #kv_slide .slide_text::after {display:none;}
  #kv_slide .slide_text p {font-size:16px; line-height:20px;}

  /* ---------- 共用區 ---------- */
  h1 {font-size:28px; margin:30px auto;}
  h1 span.lines {width:10vw; margin:auto 15px 7px 15px;}
  h2 {font-size:24px; margin:20px auto;}
  p.info {font-size:15px; line-height:20px;}
  .center {width:90%;}

  /* img.ltbt {border-bottom-left-radius:80px;}
  img.lttp {border-top-left-radius:80px;}
  img.rttp {border-top-right-radius:80px;}
  img.rtbt {border-bottom-right-radius:80px;} */

  /* ---------- about ---------- */
  #about {width:90%; position:relative;}
  #about p.info {width:90%;}
  #about .video_slide {margin:30px auto; width:90%;}
  #about .video_slide a {margin:15px;}

  #about .slick-prev, #about .slick-next {width:7vw; height:7vw;}
  #about .slick-prev {left:-8vw;}
  #about .slick-prev:before {width:7vw; height:7vw;}
  #about .slick-next {right:-8vw;}
  #about .slick-next:before {width:7vw; height:7vw;}

  #about .info_btn:hover {background:black;}

  #about .decblock {height:150px;}


  /* ---------- all_class ---------- */
  #fine_art_class {margin:50px 0px 0px 0px; padding:30px 0px;}

  #fine_art_class .logo_circle {width:20vw; height:20vw; right:0;}
  #training_class .logo_circle {width:25vw; height:25vw; right:-10vw; top:-20vw;}

  #fine_art_class .class_anchor {flex-wrap:wrap; margin-top:-15px;}
  #fine_art_class .class_anchor a {width:44%; padding:10px 0px; margin:2%; font-size:18px; text-align:center;}
  #fine_art_class .class_anchor a:hover {background:none; color:black;}

  .class_slide {margin:30px auto; width:90%;}
  .class_slide div.classes {margin:15px;}

  .class_slide .class_eng {font-size:14px;}
  .class_slide .class_name {font-size:18px;}
  .class_slide .class_info {font-size:15px; line-height:22px;}
  .class_slide .class_level li {font-size:15px; line-height:22px; text-indent:0px;}
  .class_slide .go_class {margin:10px auto 0px auto; font-size:16px;}
  .class_slide .go_class:hover {background:#8f2b29;}

  .class_slide .slick-prev, .class_slide .slick-next {width:7vw; height:7vw;}
  .class_slide .slick-prev {left:-8vw;}
  .class_slide .slick-prev:before {width:7vw; height:7vw;}
  .class_slide .slick-next {right:-8vw;}
  .class_slide .slick-next:before {width:7vw; height:7vw;}

  #training_class, #interests_class {padding:30px 0px;}

  /* #higher_class {padding-bottom:30px;}
  #pro_class {padding:30px 0px 1px 0px;}
  #hobby_class {padding:30px 0px;} */


  /* ---------- art guide ---------- */
  #team {padding:30px 0px 60px 0px;}
  #team .guide_grid {
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto auto auto auto;
    grid-gap: 5px 10px;
  }
  #team .guide_grid .guide {background-attachment:inherit;}

  /*.nora {grid-column:1/2; grid-row:1/2;}
  .nora_info {grid-column:1/3; grid-row:2/3;}
  .siaoyu {grid-column:2/3; grid-row:3/4;}
  .siaoyu_info {grid-column:1/3; grid-row:4/5;}*/
  
  .winnie {grid-column:1/2; grid-row:1/2;}
  .winnie_info {grid-column:1/3; grid-row:2/3;}
  .kuopen {grid-column:2/3; grid-row:1/2;}
  .kuopen_info {grid-column:1/3; grid-row:2/3;}
  .alex {grid-column:1/2; grid-row:3/4;}
  .alex_info {grid-column:1/3; grid-row:4/5;}
  .hungyen {grid-column:2/3; grid-row:3/4;}
  .hungyen_info {grid-column:1/3; grid-row:4/5;}
  .estrella {grid-column:1/2; grid-row:5/6;}
  .estrella_info {grid-column:1/3; grid-row:6/7;}
  .hsuan {grid-column:2/3; grid-row:5/6;}
  .hsuan_info {grid-column:1/3; grid-row:6/7;}

  #team h3 {font-size:24px; margin-bottom:20px;}
  #team h3 span {font-size:18px;}
  #team h3 span.lines {display:none;}

  #team .guide_title {width:100%;}
  #team .guide_timeline {/*white-space:normal; flex-wrap:wrap; max-height:50vh; overflow-y:scroll;*/ display:block; justify-content:center; padding-bottom:0px;}
  #team .guide_timeline .tch_content {flex:auto; margin-right:0px; max-height:35vh;}
  /*#team .guide_timeline .tch_text {flex:auto; max-width:100%;}
  #team .guide_timeline img {max-width:100%;}*/
  #team .guide_timeline .tch_img_slide {display:none;/*width:90%; max-width:200px; flex:auto; margin:auto;*/}

  /*#team .tch_content p:first-child {font-size:17px; margin-bottom:10px; padding-bottom:10px;}*/
  #team .tch_content p {font-size:15px; margin-bottom:3px; padding-bottom:3px;}
  #team .tch_content p.line {margin-bottom:10px;}
  #team .tch_text p {font-size:15px;}

  /* #team .guide_timeline::-webkit-scrollbar {background:transparent; height:0px; width:10px; border:0px;}
  #team .guide_timeline::-webkit-scrollbar-thumb {background:#8f2b29;}
  #team .guide_timeline::-webkit-scrollbar-track {background:transparent;} */
  
  #team .guide_grid .guide {padding:20px 10% 40px 10%;}
  
  #team .tch_img_slide_mb {display:block; width:100%; margin:10px auto;}
  #team .tch_img_slide_mb .slick-list {max-width:300px;}
  #team .tch_img_slide_mb .slick-slide img {width:100%; height:auto;}
  #team .tch_img_slide_mb .slick-dots li button:before {font-size:30px; line-height:30px;}


  /* ---------- news ---------- */
  #news .fb_con {flex-wrap:wrap;}
  #news .fb_con div.fb_timeline {width:100%; max-width:100%; margin-bottom:30px;}
  #news .fb_con p {font-size:18px; border-bottom:5px solid #8f2b29;}


    

	
	
}