:root {
  --main_c : #143b8c;
}

:root {
  --main_c2 : #1c2e5d;
}



body { width:100%;  min-width:1240px;   display:inline-block  }
html { width:100%;   min-width:1240px; display:inline-block }
.in{max-width:1600px; margin:0 auto;}

#wrap {height:100%; position:relative; width:100%;   display:inline-block}
 
.main_con * {transition: all 0.3s ease-out;}
.main_con {font-size:1.1em; line-height:1.5}
.main_con h3 {font-size:2.2em; line-height:1; color:var(--main_c); margin-bottom:30px; font-weight:800; letter-spacing:-3px; }
.main_con p {font-size:1em; margin-bottom:30px; font-weight:300;}
#container {  width:100%; display:inline-block;  }

.flex {display:flex}

.main_c{color:var(--main_c) !important;}

 
footer {width:100%; background:#333; font-size:1rem; font-weight:300; padding:60px 0;  box-sizing:border-box; line-height:1.5em; display:inline-block; box-sizing:border-box; }
footer *{color:rgba(255,255,255,.7);  letter-spacing:0;} 
footer h2 {margin-bottom:10px; }
footer .txtbox{width:100%;}
footer .top_wrap{padding-bottom:10px; margin-bottom:10px;}
footer span{display:inline-block; margin-top:10px; width:100%;}
footer b{font-weight:500; color:rgba(255,255,255,.9);}
footer .top_wrap ul{display:flex; gap:40px; margin-bottom:8px;}
footer .top_wrap li{display:flex; gap:7px;}

footer .top_link { text-align:Center; display:inline-block;  position:fixed; right:20px; bottom:200px; box-sizing:border-box;}
footer .top_link i {font-size:6em; color:#0bc143; }

@media all and (max-width:900px) {
	  footer {line-height:1.4em; padding-right:0}
	 footer .top_link {margin-right:0}
	 footer h2 {margin-bottom:10px; font-size:1.2em}

}

.course{background:#f7f7f7; padding:100px 0; box-sizing:border-box;}
.course h2{display:flex; justify-content:space-between; align-items:end; }
.course h2 span{color:var(--main_c)}
.course h2 a{font-size:18px; font-weight:400;}
.course ul{display:flex; gap:20px;}
.course li{width:25%; border-radius:10px; overflow:hidden; box-shadow: 5px 5px 10px rgb(0 0 0 / 3%);}
.course li .txtbox{background:#fff; padding:20px; box-sizing:border-box;}
.course li .tag{font-size:.9em; color:#777;}
.course li h3{font-size:1.1em; line-height:1.2; font-weight:600; margin:0 0 10px 0;}
.course .price *{letter-spacing:0;}
.course .price span{text-decoration: line-through; font-weight:300;  }
.course .price b{font-weight:600;  font-size:1.1em; color:var(--main_c)}
.course {}

.coach{background: url(../img/sp.png) bottom / cover no-repeat, rgba(255, 255, 255, 0.85);    background-blend-mode: hue; margin:0; padding:80px 0; box-sizing:border-box;}
.coach .in{}
.coach ul{display:flex; gap:80px; justify-content:center;}
.coach li{text-align:center; width:25%; }
.coach h3{font-size:1.6em; display:flex; gap:10px; align-items:end; justify-content:center; margin-top:10px;}
.coach h3 b{font-weight:700;}
.coach h3 p{font-size:.75em; margin-bottom: 0;}

/* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); */




.best-section{background:var(--main_c); margin:0; padding:100px 0; box-sizing:border-box;}
.best-section .in{display:flex; gap:30px;}
/* wrapper */
.best-head{margin-bottom:14px; width:25%; flex-shrink:0;}
.best-head h2{color:#fff;}
.best-head p{color:rgba(255,255,255,.7);}

/* arrows (right-top) */
.best-arrows{display:flex;gap:12px}
.best-arrows button{width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid #e2e5ea;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.best-arrows button:hover{background:#f7f8fa}

/* card */
.best-section a{display:inline-block}
.best-section dl{padding:20px 30px; box-sizing:border-box; border-radius:10px;  background:rgba(255,255,255,.2)}
.best-section dt{display:flex; gap:10px; align-items:end; justify-content:space-between;  margin-bottom:10px; border-bottom:1px solid #ccc; padding-bottom:5px; box-sizing:border-box; color:rgba(255,255,255,.6); font-size:.9em;}
.best-section dt i{color:#ccc; font-size:1em;}
.best-section dt img{width:14px}
.best-section dd{line-height:1.6; font-size:1em; font-weight:200; color:rgba(255,255,255,.9);
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
	
}
.best-section .star{text-align:right; margin-top:10px;}
.best-section .star i{color:#f3ae3d; font-size:1em;}
.best-section .user{display:flex; gap:5px; align-items:center; color:rgba(255,255,255,.8);}












/* sub */
.sub_con{margin:100px 0; margin-top:150px;}
.sub_con .in{max-width:1200px;}
.sub_con  .view .in{padding-bottom:30px; box-sizing:border-box;}

.product_view_top  { width:100%; margin-bottom:30px;}
.product_view_top .in  {display:flex; align-items:start;}
.product_view_top .img {width:55%;  display:flex; align-items:start;}
.product_view_top .img  img {width:calc(100% - 70px);  box-sizing:border-box; /* border:1px solid #ddd;  */ }
.product_view_top .img ul { width:70px; flex-shrink:0; margin-left:-1px;}
.product_view_top .img ul li { line-height:0;  text-align:center; width:100%}
.product_view_top .img ul li img {b/* order:1px solid #ddd;  */box-sizing:border-box; width:100%}

.product_view_top .info {width:45%; margin-left:auto}
.product_view_top h4 {font-size:1.6em; font-weight:600;   }
.product_view_top .pay {margin-top:10px;  margin-bottom:20px; font-size:1.3em; font-weight:700; color:var(--main_c);}
.product_view_top .pay .before {    text-decoration: line-through; font-weight:300; color:#555;}

.product_view_top .info  ul {width:100%}
.product_view_top .info  ul li {border-bottom:1px solid #ddd; padding:10px 0; display:flex; align-items:center}
.product_view_top .info  ul li b {width:20%; flex-shrink:0; font-weight:500;}
.product_view_top .info  ul li select {height:38px; width:100%; box-sizing:border-box; color:#333; border:1px solid #ddd; }

@media screen and (min-width:900px){
	.product_view_top .img ul li img {border-bottom:none}
	.product_view_top .img ul li:last-child img {border-bottom:1px solid #ddd}

}

@media screen and (max-width:900px){
		.product_view_top .in  {flex-wrap:wrap }
		.product_view_top .info {width:100%; }
		.product_view_top .img {width:100%; flex-wrap:wrap}
		.product_view_top .img  img {width:100%;}
		.product_view_top .img ul {width:100%; display:flex; margin-top:-1px }
		.product_view_top .img ul li {width:16.6666%; }
		.product_view_top .img ul li img {border-right:none}
		.product_view_top .img ul li:last-child img {border-right:1px solid #ddd}
		.product_view_top h4 {font-size:1.3em; margin-top:20px}


}

.cart_btn {width:100%; display:flex; justify-content:center; margin-top:20px; gap:20px;}
.cart_btn a  {width:35%; line-height:50px;  background-color:var(--main_c);  color:#fff; font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer;   white-space:nowrap;}
.cart_btn span  {width:25%; border-radius:3px;  line-height:50px;  border:1px solid var(--main_c); box-sizing:border-box;  color:var(--main_c); font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer; white-space:nowrap;}
.cart_btn a:nth-child(1) {border:1px solid var(--main_c); box-sizing:border-box;  background:#fff; color:var(--main_c)}
.cart_btn a i{color:#fff}
.cart_btn a:nth-child(1) i {color:var(--main_c);}
.cart_btn span.over {background-color:var(--main_c); color:#fff}
.cart_btn span b {font-weight:400}

.cart_btn2 {width:100%;  margin-top:20px}
.cart_btn2 span  {width:100%; line-height:50px;  background-color:#333;   color:#fff; font-size:1.1em;  font-weight:400; text-align:center; display:inline-block; transition: background-color 0.1s ease-in; cursor:pointer;   white-space:nowrap;}

@media screen and (max-width:900px){
	    .cart_btn {gap:10px}
		.cart_btn span   {width:50px;  }
		.cart_btn a   {width:50%}
 


}


.option_plus {width:100%; background-color:#f3f3f3;  margin-top:-1px; box-sizing:border-box;   padding:17px; font-size:.95em ; color:#555;}
.option_plus *{color:#555}
.option_plus div.flex_in { width:100%; display:flex; align-items:center; margin-top:5px; justify-content:end;}
.option_plus div.flex_in p:last-child {  white-space:nowrap; font-size:.90em }
.option_plus  div.flex_in a {font-weight:300; font-size:1em;  width:auto; padding:0; margin:0; color:#777; line-height:1}

.number {border:1px solid #ddd; margin-left:auto; margin-right:10px; width:100px; flex-shrink:0; display:flex;  } 
.number span {width:30px; flex-shrink:0;  background-color:#f1f1f1; font-size:12px; text-align:center; line-height:30px; cursor:pointer}
.number p {width:100%;  text-align:Center; line-height:30px; height:30px; float:left; font-size:15px; background-color:#fff}


.tab {display:flex; width:100%; position:relative; margin-bottom:20px;   background-color:#f0f0f0;   }
.tab:after {content:''; width:100%; height:1px; background-color:var(--main_c); position:absolute; bottom:0px; left:0}
.tab li {width:50%; font-size:1.1em; text-align:center; line-height:35px; padding:5px 20px; position:relative; z-index:99; cursor:pointer}
.tab li a {width:100%; display:inline-block}
.tab li.on {background-color:var(--main_c); font-weight:400; color:#fff}
.tab li a {color:#222}
.tab li.on a {color:#fff}


#product_review dl {width:100%; border-top:1px solid #ddd; margin-bottom:-1px;}
 
#product_review dt {
  background-color: #fff;
  border-bottom:1px solid #ddd;
  cursor: pointer;
  font-size:1em; 
  transition: 0.7s; align-items:center; gap:10px; 
  color: #333; width:100%; display:flex;  padding:15px 10px; box-sizing:border-box; 
}
#product_review  dt p {white-space:nowrap; }
#product_review  dt p:nth-child(1) {width:150px; color:#f3ae3d;}
#product_review  dt p:nth-child(2) {width:100%; white-space:normal;}
#product_review  dt p:nth-child(3) {width:100px; text-align:right;}
#product_review  dt p:nth-child(4) {width:80px; text-align:right;}

#product_review  dt:hover { background: #f9f9f9; }

#product_review   dd {
  background-color: #f9f9f9;
  display: none;
  border-bottom: 1px solid #ddd;
  line-height: 1.4;
  font-size:1em; color:#666;
  padding:15px 10px;   
}