/*all*/
ul,li{ list-style-type: none; padding: 0;}
.small-title{ font-size: 1.8rem;}
.title-wrap{ padding-top: 60px; padding-bottom: 10px; text-align: center;}
.title-wrap span.t-bold{ display: block;}
.title-wrap h1 { position: relative; margin-bottom: 40px; font-size: 3.6rem; font-weight: 700;}
.title-wrap h2 { position: relative; margin-bottom: 40px; font-size: 3rem; font-weight: 700;}
.title-line:after{ content: ""; position: absolute; left: 0; right: 0; margin: auto; bottom: -20px; width: 50px; height: 4px; background: var(--primary); border-radius: 5px;}
.w-title-line:after{ content: ""; position: absolute; bottom: -20px; left: 0; right: 0; margin: auto; width: 50px; height: 4px; background: var(--white); border-radius: 5px;}
.bg-blue .title-wrap h1 ,.bg-blue .title-wrap h2 ,.bg-blue .title-wrap h4 ,.bg-orange .title-wrap h1 ,.bg-orange .title-wrap h2{ color: var(--white);}
.title-l { text-align: left;}
.title-l .title-line:after{ margin: 0;}
.bg-blue{ background: var(--blue);}
.bg-orange{ background: var(--orange);}
.bg-orange-l{ background: var(--orange_l);}
.bg-purple{ background: var(--primary);}
.bg-purple-l{ background: var(--primary_l);}
.bg-blue-l{ background: var(--blue_l);}
.bg-gray-l{ background: var(--gray_l);}
.t-primary{ color: var(--primary);}
.t-orange{ color: var(--orange);}
.t-blue{ color: var(--blue);}
.t-bold{ font-weight: 700;}
.s-title{ font-size: 1.8rem; font-weight: 700;}

/*table*/
.table{ width: 100%; background: var(--white); font-size: 1.6rem;}
.table th,.table td{ padding: 6px; border: 1px solid #e5e5e5;}
.table th{ background: var(--dark); color: var(--white);}
.table-striped tr:nth-child(even){ background: #f5f5f5;}

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,.pill-content > .pill-pane {
    display: block;     /* undo display:none*/
    height: 0;          /* height:0 is also invisible */ 
    overflow-y: hidden; /* no-overflow*/
}
.tab-content > .active,.pill-content > .active { height: auto/* let the content decide it  */}

/*Top header*/
.page-title-wrap{ background: url('../img/teachers-bg.svg') 72% 43px no-repeat ,var(--primary); background-size: 335px; margin-top: -100px; width: 100%; padding: 207px 0 40px; z-index: -1;}
.page-title-wrap .container{ position: relative;}
.page-title-wrap .title { display: inline-block; margin:0; font-size: 3.6rem; color: var(--white); font-weight: 700;}
.page-title-wrap .title span{ display: block; font-size: 1.3rem; font-weight: 500;}
.breadcrumb { position: absolute; right: 0; bottom: 0; display: inline-block;  }
.breadcrumb .list{ position: relative; display: flex; padding: 5px 10px; margin: 0; background: var(--white); font-size: 1.2rem;}
.breadcrumb .list li:not(:first-child)::before{ display: inline-block; content: ">"; margin: 0 5px;}
.breadcrumb .list a{ font-size: 1.2rem; color: var(--primary);}
@media (max-width: 575.98px) {
    .page-title-wrap .title { display: block;}
    .breadcrumb{ position: static; margin-top: 10px;}
}
/*teachers*/
#page-teachers .elite-teacher h2{ margin-bottom: 10px; font-size: 1.8rem; font-weight: 700;}
#page-teachers .elite-teacher .icon{ display: inline-block; float: left; width: 84px; height: 84px; padding: 0 30px; margin-right: 15px; background: var(--orange); border-radius: 50%; line-height: 78px; }
#page-teachers .icon svg{ transform: scale(1.5);}
.teachers-intro .list{ padding: 0; padding-bottom: 60px; overflow: hidden;}
.teachers-intro .list > li{ position: relative; width: calc(98%/2); float: left; margin: 20px .5% 0; vertical-align: top;}
.teachers-intro .list > li:nth-child(even) { margin-top: 60px;}
.teachers-intro .list > li:nth-child(even) .card{ position: absolute; left: 0;}
.teachers-intro .list > li:nth-child(even) .photo{ float: right;}
.teachers-intro .photo{ vertical-align: middle; z-index: 0;}
.teachers-intro .card{ position: absolute; top: 50%; right: 0; padding: 15px; max-width: 365px; transform: translateY(-50%); background: var(--white); box-shadow: 0 5px 15px rgba( 0,0,0,0.15);}
.teachers-intro .name{ font-size: 1.8rem; font-weight: 700; line-height: 1;}
.teachers-intro .intro{ position: relative; margin-left: 20px;}
.teachers-intro .intro:before { position: absolute; content: ""; left: -20px; top: 0; width: 4px; height: 100%; background: var(--dark);}
.teachers-intro .education{ font-size: 1.4rem;}
.teachers-intro .tag{ display: inline-block; padding: 0;}
.teachers-intro .tag li{ display: inline-block; margin: 0 5px; padding: 2px 7px; background: #eee; border-radius: 40px; font-size: 1.3rem; color: var(--blue); text-align: center; }
.experience{ margin: 15px 0 0; border-top: 1px dashed var(--dark);}
.experience span { font-size: 1.4rem; font-weight: 700}
.experience > div{ padding: 10px 15px; margin: 15px 0 0; background: rgba(233,132,90,.1); letter-spacing: 0;}

/*video-area*/
.video-area { padding-bottom: 40px;}
.video-area .popup-youtube{ position: relative; }
.video-area img{  width: 100%;}
.video-area p{ text-align: center;}
.video-area .slick-slide p{ font-size: 13px; line-height: 1.2;}
.video-area .popup-youtube:before{ position: absolute; content: ""; top: 0; width: 100%; height: 100%;  background: rgba(0, 0, 0, .3);} 
.video-area .play-button { width: 80px; height: 50px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.5 ); z-index: 1; opacity: 0.8; border-radius: 6px;}
.video-area .play-button:before { content: ""; display: inline-block; border-style: solid; border-width: 12px 0 12px 15px; border-color: transparent transparent transparent #fff;}
.video-area .play-button { cursor: pointer;}
.video-area .play-button,.video-area .play-button:before { position: absolute;}
.video-area .play-button,.video-area .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}
.video-list .slick-dots{ bottom: -4%;}
.video-area .slick-initialized .slick-slide{ padding: 0 15px ;}
@media (max-width: 1199px){
    .breadcrumb{ right: 30px;}
    .teachers-intro .list > li{ display: flex;}
    .teachers-intro .photo{ width: 26%; max-width: 100%; height: 100%;}
    .teachers-intro .list > li:nth-child(even) .card{ position: static;}
    .teachers-intro .card{ position: static; max-width: 100%; transform: inherit;}
}
@media (max-width: 991.98px) {
    #page-teachers .elite-teacher .icon:nth-child(2){ clear: both;}
    #page-teachers .elite-teacher .txt{ display: inline-block;}    
}
@media (max-width: 960px){
    .teachers-intro .list > li{ width: 100%; margin: 30px 0 0 ;}
    .teachers-intro .list > li:nth-child(even){ margin-top: 30px;}
    .teachers-intro .card{ width: 100%; max-width: 100%;}
}

@media (max-width: 375px){
    .teachers-intro .list > li{ flex-direction: column; margin-bottom: 20px;}
    .teachers-intro .photo{ width: 100%; padding: 20px;}
}

/* --lazy load youtube ----*/
.yt-wrapper { max-width: 640px; margin: 0 auto;}
.youtube { background-color: #000; position: relative; padding-top: 56.25%; overflow: hidden; cursor: pointer;}
.youtube img { width: 100%; top: -16.82%; left: 0; opacity: 0.7;}
.youtube .play-button { width: 90px; height: 60px; background-color: #333; box-shadow: 0 0 30px rgba( 0,0,0,0.6 ); z-index: 1; opacity: 0.8; border-radius: 6px;}
.youtube .play-button:before { content: ""; border-style: solid; border-width: 15px 0 15px 26.0px; border-color: transparent transparent transparent #fff;}
.youtube img,.youtube .play-button { cursor: pointer;}
.youtube img,.youtube iframe,.youtube .play-button,.youtube .play-button:before { position: absolute;}
.youtube .play-button,.youtube .play-button:before { top: 50%; left: 50%; transform: translate3d( -50%, -50%, 0 );}
.youtube iframe { top: 0; left: 0; width: 100%; height: 100%;}

/*students*/
#page-students .page-title-wrap{ background: url('../img/students-bg.svg') 75% 43px no-repeat ,var(--primary);}
.recommend{ padding-bottom: 60px;}
.recommend .list > li{ background: var(--white); box-shadow: 0 5px 10px rgba( 0,0,0,0.15 );}
.recommend h2{ margin: 0; font-size: 2.4rem; color: var(--primary); line-height: 1.6;}
.recommend h2 svg{ margin-bottom: 2px; vertical-align: middle;}
.recommend .photo{ max-width: 102px; width: 40%; margin-right: 5%; vertical-align: top;}
.recommend .name { padding-bottom: 20px; border-bottom: 1px solid #eee; margin-bottom: 30px;}
.recommend .name p{ display: inline-block; margin-top: 25px; padding-left: 10px; border-left: 4px solid var(--dark); font-size: 2rem; font-weight: 700;}
.recommend .name span{ display: block; font-size: 14px; font-weight: 500; color: var(--gray);}
.recommend .left-content{ padding: 20px;}
.recommend .right-content{ padding: 20px; background: #f8f6fa;}
.recommend .right-content p{ margin-top: 20px; margin-bottom: 0; line-height: 1.8;}

.BarsWrap { position: relative; background: url('../img/pages/toeic-advance.svg') no-repeat; min-height: 200px;}
.recommend .list > li:nth-child(2) .BarsWrap{ background: url('../img/pages/toefl-advance.svg') no-repeat;}
.recommend .list > li:nth-child(3) .BarsWrap{ background: url('../img/pages/ielts-advance.svg') no-repeat;}
.Bars { position: absolute; top: 5px; left:14.6%; width: 85%;}
.Bars .bars { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0;}
.Bars .bars li{ position: relative; display: inline-block; height: 100%; margin: 21px 0 0;}
.Bars .bars li .bar { width: 100%; background: #49E; overflow: hidden; outline: 2px solid transparent; color: var(--white);
    -webkit-transition: 1.5s height cubic-bezier(.6, .4, .4, 1.1);transition: 1.5s height cubic-bezier(.6, .4, .4, 1.1);}
.BarsWrap.BarsHorizontal .Bars .bars .tfBarFlat{ background:#003d81;}
.BarsWrap.BarsHorizontal .Bars .bars .isBarFlat{ background:var(--red);}
.BarsWrap.BarsHorizontal .Bars .bars { flex-direction: column; border: 0; transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1);}
.BarsWrap.BarsHorizontal .Bars .bars .bar { width: 0; height: 100% !important; padding: 7px; font-size: 1.2rem; text-align: right; transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1);}

.recommend-slider h3{ margin: 10px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--white); font-size: 2.4rem; font-weight: 700;}
.recommend-slider .bg-wrap{ padding: 60px 0 80px; color: var(--white);}
.recommend-slider .container{ position: relative; z-index: 0;}
.recommend-slider .container:before{ content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background:url(../img/pages/bg-s01.png) right bottom no-repeat;}
.recommend-slider .bg-blue .container:before{ background:url(../img/pages/bg-s02.png) right bottom no-repeat;}
.recommend-slider .content{ width: 80%; min-height: 400px; line-height: 1.8; z-index: 1;}
.recommend-slider .name{ display: inline-block; padding: 5px 20px; background: #fbe6de; font-size: 1.8rem; font-weight: 700; color: var(--orange);} 
.recommend-slider .name span{ margin-right: 5px; font-size: 1.3rem; font-weight: 500;}
.recommend-slider .bg-blue .name{ background: #d8e6ed; color: var(--blue);}
.recommend-slider ul.slick-dots { bottom: 7%;}

/*slick style*/
.slick-slide{ height: inherit !important;}
ul.slick-dots { position: absolute; bottom: 5%; left:0; right: 0; width: auto; margin: 0 auto; padding: 0; text-align: center; z-index: 1;}
ul.slick-dots li{ display: inline-block; border-radius: 50%; padding: 0 5px;}
ul.slick-dots button{ background: rgb(0 0 0 / 30%); width: 14px; height: 14px; padding: 4px; border-radius: 100%; border: none; font-size: 0;}
ul.slick-dots button:active{ border: none;}
ul.slick-dots .slick-active button{ background: var(--orange); opacity: 1;}

@media (max-width: 1199px){
    .recommend .left-content { width: 40%;}
    .recommend .right-content { width: 60%;}
    .recommend-slider .content{ margin: 0 auto;}
}
@media (max-width:960px){
    .recommend .right-content { width: 100%; }
    .recommend .left-content { width: 100%; }
    .BarsWrap{ max-width: 540px; min-height: 260px;}
    .Bars .bars li{ margin: 45px 0 0;}
    .recommend-slider .bg-orange .container:before,.recommend-slider .bg-blue .container:before{ opacity: .2;}
}
@media (max-width: 540px){
    .BarsWrap { min-height: 200px;}
    .Bars .bars li { margin: 25px 0 0;}
    .recommend-slider .content{ width: 90%;}
    .recommend-slider .container:before {display: none;}
}
/*payment*/
#page-payment .page-title-wrap{ background: url('../img/cart.svg') 70% 83px no-repeat ,var(--orange); background-size: 265px;}
#page-payment .title-line:after{ background: var(--orange);}
.course-buy-intro .card-wrapper{ display: block; width: 100%; max-width: 950px; margin: 10px auto 50px; text-align: left; text-decoration: none;border: 2px solid #f5f7f6;border-radius: 6px;background-color: #fff;-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);}
.course-buy-intro .class-info{ display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #666; font-weight: 700;}
.line-sticker{ width: 80px; height: 80px; }
.line-sticker span{ font-size: 20px; font-weight: bold;}
.course-buy-intro .card-sticker { transform:rotate(-25deg); display: block; width: 80px; height: 80px; background: url(../img/sale.svg); background-repeat: no-repeat;}
.course-buy-intro .discount { font-size: 1.6rem;color: #6f4f94;margin-left: 6px;}
.course-buy-intro .origin-price{padding: 0 4px 0 0;line-height: 16px;vertical-align: middle; text-decoration: line-through; font-size: 12px; color: rgba(0,0,0,.4);}
.course-buy-intro .card-title{ margin: 0 0 0 10px; font-size: 20px;}
.course-buy-intro .class-name{ position: relative; display: flex; justify-content: space-between; align-items: center;}
.course-buy-intro .price{ display: flex; flex-direction: column; justify-content: space-evenly; font-size: 24px; color: var(--orange); text-align: right; }
.course-buy-intro .origin-price{ display: block; text-decoration: line-through; font-size: 12px;}
.pay-infor .btn{ min-width: 48px; padding: 7px 10px; background:var(--orange); border: none; font-size: 14px; color: var(--white);}
.pay-infor .used-txt{ font-size: 14px; color: var(--orange);}
.pay-infor input{ padding: 0 10px; max-width: 170px; width: 100%; height: 35px; padding: 3px 10px 0;
    border-radius: 3px; border: 1px solid #ddd; outline: none; background-color: var(--white);
    font-size: 14px; color: var(--dark); -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.input-field{ display: flex; align-items: center;}
.input-field > div{ position: relative; display: flex; align-items: center; margin-right: 10px; }
.remove-t{ position: absolute; cursor: pointer; display: inline-flex; width: 16px; height: 16px; top: 10px; right: 10px;}
.invalid-feedback{ margin-top: 4px; font-size: 12px;}
.t-red{ color: red;}
.detail-list .discount{ margin: 5px 0 0; line-height: 1.6; color: var(--dark); }
.detail-list .discount p { display: inline-block; font-size: 14px; text-align: right;}
.detail-list .total p{ font-size: 24px; font-weight: bold; color: var(--orange);}
.detail-list li{ display: flex; justify-content: space-between; align-items:center;}
.detail-list li span{ margin-right: 10px; text-align: left; font-size: 13px; }
.course-buy-intro .purchase { margin-top: 20px; width: 100%; padding: 5px; border: 0; border-radius: 4px;
    background: var(--primary); font-size: 20px; letter-spacing: 2px; text-align: center; color:var(--white);}

.course-type .p-title { padding: 5px 20px; margin: 25px 0px;  background-color: #eeeeeeb5; font-size: 18px; font-weight: normal;}
.payment-box {box-sizing: border-box; margin-bottom: 32px; font-size: 16px; color: rgba(0, 0, 0, 0.8);border-radius: 4px;background-color: rgb(255, 255, 255);}
.payment{ margin: 10px 20px 30px;}
.title-tip {font-size: 14px; font-weight: normal;color: rgba(0, 0, 0, 0.6);}
.course-buy-intro .purchase { margin-top: 15px;}
.course-buy-intro .txt-infor{ margin: 10px 0 0; text-align: center; font-size: 14px; line-height: 1.8; color: #323232; letter-spacing: normal; background: #fff4ef;}

@media (max-width: 767.98px) {
    .course-buy-intro .txt-infor{ margin: 0;}
}

@media (max-width: 992px){
    .course-buy-intro .card-wrapper{ width: 100%;}
    .payment-box { padding: 2% 2% 40px 2%;}
}
@media (max-width: 575.98px) { 
    .course-buy-intro .class-info{ flex-direction: column;} 
    .card-sticker {top: -130%;left: -10%;}
    .course-buy-intro .class-name{ justify-content: flex-start;}
    .input-field{ justify-content: space-between;}
    .input-field > div{ width: 100%;}
    .pay-infor input{ max-width: 100%;}
    .course-buy-intro .price{ margin-left: 0; flex-direction:row; justify-content: space-between; align-items: center;}
}
@media (max-width: 440px) {
    .card-sticker {top: -90%;left: -10%;}
}

/*about*/
#page-about .page-title-wrap{ background: url('../img/plus.svg') 80% -20px no-repeat ,var(--primary); background-size: 400px;}
.elite-intro,.course-type,.three-steps{ padding-bottom: 60px;}
.elite-video{ margin-top: 60px;}
.course-type .icon{ display: inline-block; width: 110px; height: 110px; padding: 27px; background: var(--primary); border: 4px solid var(--white); border-radius: 50%;}
.course-type .icon svg{ max-width: 54px; width: 100%;}
.course-type .txt p span{ display: block;}
.three-steps .s-title{ padding: 10px 10px 10px 0; margin-bottom: 0; background: var(--yellow); font-size: 1.8rem; font-weight: 700; line-height: 1;}
.three-steps img{ width: 100%;}
.three-steps p > span:first-child{ padding: 3px 16px; margin-right: 10px; background: var(--primary); color: var(--white); font-size: 3rem; vertical-align: sub;}
.three-steps ul{ padding: 15px 15px 0; background: var(--primary_l);}
.three-steps ul li{ padding-bottom: 15px; margin-bottom: 15px; font-size: 1.6rem;}
.three-steps ul li:not(:nth-child(3)){ border-bottom: 1px dotted #e0d2f0; }
@media (max-width:960px){
    .elite-video{ margin-top: 20px;}
}

/*Azar*/
#page-azar .page-title-wrap{ background: url('../img/azar-bg.svg') 72% 0 no-repeat ,var(--blue); background-size: 565px; margin-top: -100px; width: 100%; padding: 207px 0 40px; z-index: -1;}
#page-azar .title-line:after{ background: var(--blue);}
#page-azar .card{ padding: 20px; background: var(--white); box-shadow: 0 5px 8px rgb(62,129,166,.2);}
#page-azar .features { padding-bottom: 60px;}
#page-azar .features h3{ font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--blue);}
#page-azar .features h3 span{ display: inline-block; margin-right: 15px; padding: 0px 20px 8px; background: var(--blue); vertical-align: middle; font-size: 7.2rem; font-weight: 500; color: var(--white);}
#page-azar .features .txt{ min-height: 200px; background: var(--blue_l);}
#page-azar .features .txt p{ padding: 20px; }
#page-azar .bg-blue .title-wrap h4{ position: relative; margin-bottom: 40px; font-size: 3rem;  font-weight: 700;}
.course-features .content-wrap .s-title{ display: inline-block; padding: 8px 20px; background: var(--blue_l); font-size: 2rem; font-weight: 700; color: var(--blue);}
.course-features .content-wrap > div{ padding: 20px; background: var(--white);}
.course-features .content-wrap > div:nth-child(3n-2){ background: var(--blue_l);}
.course-features .content-wrap > div:nth-child(3n-2) .s-title{ background: var(--white);}
.course-features .content-wrap .txt{ display: flex; align-items: center;}
.course-features .content-wrap .txt p{ margin-left: 20px; text-align: left;}
.course-intro,.course-features { padding-bottom: 60px;}
#page-azar .course-outline h4,#page-azar .video-area h4{ position: relative; margin-bottom: 40px; font-size: 3rem;  font-weight: 700;}
#page-azar .course-intro .target,#page-azar .course-intro .content { display: flex; justify-content: center; }
#page-azar .course-intro h3{ font-size: 1.8rem; line-height: 1.5;}
#page-azar .course-intro h3 span{ font-weight: 500; padding: 1px 5px; margin-right: 10px; border: 1px solid var(--dark); font-size: 1.5rem;}
#page-azar .course-intro .content { padding-top: 20px; border-top: 1px solid #eee;}
#page-azar .course-intro .target .txt,#page-azar .course-intro .content .txt{ margin-left: 25px; text-align: left;}
.course-intro img{ object-fit: contain;}
#page-azar .course-intro .target span{ position: relative; display: inline-block; padding: 5px 15px; margin-bottom: 15px; background: var(--orange_l); font-size: 1.6rem;}
#page-azar .course-intro .target span:after{ content: ""; position: absolute; bottom: -12px; left: 42%; width: 0; height: 0;
    border-style: solid; border-width: 12px 10px 0 10px; border-color: var(--orange_l) transparent transparent transparent;}
    @media (max-width: 991.98px) { 
        .course-features .content-wrap > div:nth-child(even){ background: var(--white);}
        .course-features .content-wrap > div:nth-child(odd){ background: var(--blue_l);}
        .course-features .content-wrap > div:nth-child(even) h4{ background: var(--blue_l);}    
        .course-features .content-wrap > div:nth-child(odd) h4{ background: var(--white);}    
    }
@media (max-width: 575.98px) {
    #page-azar .course-intro h5{ margin-top: 15px;}
}    
@media (max-width: 375px) {
    #page-azar .course-intro .target,#page-azar .course-intro .content { flex-wrap: wrap;}
    #page-azar .course-intro .target .txt,#page-azar .course-intro .content .txt{ margin-top: 15px; margin-left: 0;}
}
/*fish*/
#page-fish .page-title-wrap{ background: url('../img/fish-bg.svg') 80% 0 no-repeat ,var(--orange); background-size: 270px; margin-top: -100px; width: 100%; padding: 207px 0 40px; z-index: -1;}
#page-fish .course-target .title-wrap{ padding-top: 0;}
#page-fish .title-line:after{ background: var(--orange);}
#page-fish .teacher img{ float: left; width: 120px; margin-right: 15px;}
#page-fish .teacher .name{ margin-bottom: 0; font-size: 1.75rem;}
#page-fish .teacher .content{ display: inline-block; width: 75%; padding: 10px; border-left: 3px solid var(--orange); background: var(--white); font-size: 1.4rem;}
#page-fish .course-target .container{ padding: 60px; margin: 60px auto;}
#page-fish .features { padding-bottom: 60px;}
#page-fish .course-target .title-wrap p{ position: relative; margin-bottom: 40px; font-size: 3rem; font-weight: 700; color: var(--white);}
#page-fish .course-target .card{ padding: 50px 30px; background: var(--white);}
#page-fish .course-target  img{ max-width: 295px; width: 100%; float: left;}
#page-fish .course-target .txt span{ display: block; font-size: 1.6rem;}
#page-fish .features .card{ background: var(--white);}
#page-fish .features .card img{ width: 100%; max-width: 250px;}
#page-fish .flow,#page-fish .fishbone-book{ padding-bottom: 60px;}
.fishbone-book .s-title{ display: inline-block; border-bottom: 2px solid var(--gray); font-size: 18px; }
.fishbone-book .txt-wrap{ display: inline-block; width: 55%;}
.fishbone-book .txt{ display: inline-block; line-height: 1.6;}
#page-fish .txt svg{ margin-right: 5px; fill: var(--orange);}
.pic-fishbook-cover{ max-width: 210px;}
.pic-fishbook-open{ display: inline-block; width: 42%; max-width: 340px; vertical-align: top; margin-right: 2%;}
#page-fish .video-area p.title-line{ position: relative; margin-bottom: 40px; font-size: 3rem; font-weight: 700;}
.question-list{ font-size: 0;}
.question-list li{ display: inline-block; width: calc(98%/2); padding: 10px 20px; margin-top: 10px; vertical-align: top; border-radius: 50px; background: var(--orange_l); font-size: 1.6rem;}
.fish-course-slider{ background: #fff8f3;}
.fish-course-slider .content span{ display: inline-block; background: var(--orange); width: 30px; height: 30px; margin-right: 5px; font-size: 20px; color: var(--white); line-height: 1.5; border-radius: 20px; vertical-align: initial;}
.fish-course-slider img{ width: 100%; max-width: 555px; margin: 30px auto 20px; }
.fish-course-slider ul.slick-dots .slick-active button{ background: var(--orange)}
.fish-course-slider ul.slick-dots{ bottom: 20px; left: 0; right: 0;}

.fishbone-videro-area .nav{ display: inline-flex; justify-content: center; margin: 20px 0 30px; gap: 10px;}
.fishbone-videro-area .nav button{ padding: 8px 20px; font-size: 1.8rem; color: #fff; line-height: 1.2; background: #999; border: none; border-radius: 50px;}
.fishbone-videro-area .nav button:hover,.fishbone-videro-area .nav button.active{  background: var(--gray); }
.fishbone-videro-area .tab-content{ margin-bottom: 30px;}
.fishbone-videro-area ul.slick-dots{ bottom: 10px;}
.fishbone-videro-area .slick-slider{ padding-bottom: 20px;}

@media (max-width: 991.98px) {
    #page-fish .course-target .card{ padding: 30px; text-align: center;}
    #page-fish .course-target .card img{ float: none;}

    .fishbone-book .txt-wrap{ width: 100%; text-align: center;}
    .pic-fishbook-open{ display: block; width: 100%; float: none; margin: 0 auto; text-align: center;}     
}
@media (max-width: 575.98px) {
    #page-fish .teacher .txt{ text-align: center;}
    #page-fish .teacher img{ display: block; float: none; margin: 0 auto 20px;}
    .question-list li{ width: 100%;}
    .fishbone-book{ text-align: center;}
}

/*QA*/
.qa .title-wrap p{ position: relative; margin-bottom: 40px; font-size: 3rem; font-weight: 700; color: var(--white);}
.qa .accordion{ margin-bottom: 60px;}
.accordion-header{ margin-bottom: 1px;}
.accordion-button{ background: var(--white); transition: all .35s;}
.qa .icon-plus{ position: relative; float: right; width: 30px; height: 30px;}
.qa .icon-plus span{ position: absolute; left: 3px; top:13px; display: inline-block; width: 24px;  height: 4px; background: var(--blue);}
.bg-orange .icon-plus span ,.bg-orange .icon-plus span:nth-child(2){ background: var(--orange);}
.icon-plus span:nth-child(2){ transform: rotate(90deg); background: var(--blue); transition: all .35s;}
.q-txt:not(.collapsed) .icon-plus span:nth-child(2){ transform: rotate(0deg);}
.q-txt{ width: 100%; padding: 15px; border: none; text-align: left; font-size: 1.8rem; cursor: pointer;}
.q-txt p{ width: 90%; display: inline-block;}
.a-txt{ font-size: 1.6rem;}
.bg-blue .q-txt{ color: var(--blue);}
.bg-orange .q-txt{ color: var(--orange);}
.bg-blue .a-txt{ padding: 15px; overflow: hidden; background: #ebefef;}
.qa.bg-orange .a-txt{ padding: 15px; overflow: hidden; background: var(--orange_l);}
.accordion-collapse,.accordion{ transition: all .4s;}
.collapsing { height: 0; overflow: hidden; @include transition($transition-collapse);}

#page-team .page-title-wrap{ background: url('../img/team-bg.svg') 75% 15px no-repeat ,var(--primary); background-size: 400px;}
.main-members{ padding-bottom: 60px;}
.main-members .member1{ padding: 60px; background:url('../img/team/p01.png')top right no-repeat,var(--orange_l);}
.main-members .member2{ padding: 60px; min-height: 270px; background:url('../img/team/p02.png')top right no-repeat,var(--orange_l); background-size: contain;}
.main-members .member3{ padding: 40px 0px 60px 200px; min-height: 270px; background:url('../img/team/p03.png')top left no-repeat,var(--orange_l); background-size: contain;}
.main-members .txt > p{ font-size: 1.8rem; font-weight: 700;}
.main-members .name{ padding-left: 10px; border-left: 4px solid var(--primary);}
.education{ font-size: 1.4rem;} 
.azar-members .card{ padding: 3rem;  margin: 60px 0; background: var(--white);}
.azar-members p:first-child{ font-size: 1.4rem; font-weight: 700;} 
.azar-members .list{ display: grid; grid-template-columns: 1fr 1fr; align-items: center;  grid-auto-rows: auto 170px; text-align: center;}
.azar-members .list li{ display: inline-flex; position: relative; align-content: space-between; flex-direction: column;}
.azar-members .list li:after{content: ""; position: absolute; left: 49%; bottom: 0; width: 15px; height: 2px; background: var(--gray); }
.azar-members .list li.no-line:after{ display: none;}

@media (max-width: 991.98px) { .main-members .member1 {  background-size: 50%; }}
@media (max-width: 767.98px) {
    .course-features .content-wrap .txt{ flex-direction: column;}
    .course-features .content-wrap .txt p{ margin-top: 20px; }
}
@media (max-width: 575.98px) {
    .main-members .member1 { padding: 60px 35px 20vh; background-size: 70%; background-position-y: -10%; background-position-x: 130%;}
    .azar-members .list{ grid-template-columns: 1fr;}
    .q-txt{ font-size: 1.6rem;}
}
@media (max-width: 414px) {
    .main-members .member1 { padding: 60px 30px 150px; background-size: 60%; }
    .main-members .member2 { padding: 60px 30px 0; background-position-x: 120%; background-size: 60%;}
    .main-members .member3 { padding: 40px 20px 0px 168px; background-position-x: -20%; background-size: 60%;}
    .Bars .bars li { margin: 17px 0 0; }
}
@media (max-width: 375px) {
    .main-members .member1 { padding: 30px 30px 160px; background-size: 60%; background-position-y: 100%;}
    .main-members .member2,.main-members .member3{ padding: 30px; background-image: none; min-height: auto;} 
    .Bars .bars li { margin: 10px 0 0;}
}
@media (max-width: 320px) {
    .BarsWrap.BarsHorizontal .Bars .bars .bar { padding: 2px;}
}