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

/*font-family: 'Almarai', sans-serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Noto Sans TC', sans-serif;
font-family: 'Noto Serif TC', serif;*/

#head_kv {display:flex; flex-wrap:wrap; justify-content:center; align-content:center; width:100%; height:400px; position:relative; margin-top:90px;}
#head_kv span {width:100%; height:1px;}
#head_kv h1 {font-size:50px; line-height:70px; color:white; font-family:'Noto Serif TC', serif; font-weight:500; position:relative; text-shadow:0px 0px 5px rgba(0,0,0,0.3)}
#head_kv h2 {font-size:35px; line-height:75px; color:white; font-family:'Cormorant Garamond', sans-serif; font-weight:700}
#head_kv h1::after {display:block; content:''; width:160%; height:1px; background:white; margin:10px auto; position:absolute; left:-30%;}

#head_kv.child_a {background:url(../images/class/kv_1.jpg) center no-repeat; background-size:cover;}
#head_kv.pre_junior {background:url(../images/class/kv_2.jpg) center no-repeat; background-size:cover;}
#head_kv.spe_junior {background:url(../images/class/kv_3.jpg) center no-repeat; background-size:cover;}
#head_kv.adult {background:url(../images/class/kv_4.jpg) center no-repeat; background-size:cover;}

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

#class_content {display:flex; justify-content:center; align-items:flex-start; width:calc(100vw - 250px); position:relative; margin:auto;}

.con_left {width:calc(50% - 30px); margin-right:30px; position:relative;}
.class_slick_main {width:100%; height:auto; position:relative;}
.class_slick_main img {width:100%; height:auto;}
.class_slick_main .slick-next:before {display:block; content:''; width:30px; height:30px; background:url(../images/arrow_rt.svg) center no-repeat; background-size:cover; opacity:1;}
.class_slick_main .slick-prev:before {display:block; content:''; width:30px; height:30px; background:url(../images/arrow_lt.svg) center no-repeat; background-size:cover; opacity:1;}
.class_slick_main .slick-prev, .class_slick_main .slick-next {width:30px; height:30px; z-index:20;}
.class_slick_main .slick-prev {left:-40px;}
.class_slick_main .slick-next {right:-40px;}
.class_slick_slec {height:auto; width:calc(100% + 10px); margin-left:-5px;}
.class_slick_slec div {margin: 5px; position:relative;}
.class_slick_slec div img {width:100%; height:auto;}

.con_right {width:calc(50% - 60px); margin-left:60px; position:relative;}
.con_right p {font-size:18px; line-height:30px; text-align:left; margin-bottom:15px;}
.con_right li {font-size:18px; line-height:30px; text-align:left; margin-bottom:15px; list-style:none;}
.con_right li::before {content:'・'; color:#8f2b29; margin-left:-18px;}
.con_right li span {display:inline-table; margin:0px 6px 5px 0px; padding:0px 10px; background:#D8D1C9;}
.con_right li span.null {background:none;}

footer {margin-top:0px;}

.center {display:block; position:relative; width:calc(100vw - 200px); margin:auto;}

#mor_class {position:relative; padding:60px 0px; margin-top:60px; background:url(../images/bg_a.jpg) center no-repeat;}

#mor_class .s_title {font-size:28px; font-family:'Noto Serif TC','微軟正黑體','Microsoft Jhenghei',sans-serif;}
#mor_class .s_title span {font-family:'Cormorant Garamond', sans-serif; color:#8f2b29; position:absolute; top:20px;}
#mor_class .s_title span::before {display:block; content:''; width:268px; height:2px; background:#8f2b29; position:absolute; left:-268px; top:20px;}

.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;}

.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;}



@media screen and (max-width:820px) {
    
    #head_kv {height:30vh; margin-top:60px;}
    #head_kv h1 {font-size:30px; line-height:50px;}
    #head_kv h2 {font-size:20px; line-height:55px;}
    #head_kv h1::after {margin:5px auto;}

    h3 {font-size:26px; margin:40px auto;}
    h3 span {font-size:18px;}
    h3 span.lines {width:10vw; margin:auto 15px 7px 15px;}

    #class_content {flex-wrap:wrap; width:90%;}
    .con_left {width:90%; margin-right:0px;}
    .con_right {width:100%; margin-left:0px;}

    .class_slick_main .slick-prev, .class_slick_main .slick-next {width:25px; height:25px;}
    .class_slick_main .slick-prev {left:-30px;}
    .class_slick_main .slick-prev:before {width:25px; height:25px;}
    .class_slick_main .slick-next {right:-30px;}
    .class_slick_main .slick-next:before {width:25px; height:25px;}

    .con_right p, .con_right li {font-size:16px; line-height:24px; margin-bottom:12px;}
    .con_right li span {padding:0px 5px;}

    .center {width:90%;}

    .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;}

}