@charset "UTF-8";
 
body {width:100%; height:100%; }
html  { width:100%; height:100%;   }

  
.top { width:100%; display:inline-block; background-color:#000000; padding-top:20px; position:relative;} 
.top .in {display: -webkit-box; display:flex;  justify-content :space-between ;  }
.logo {width:15%; margin-bottom:20px}
.logo img {width:100%; max-width:170px}


.top .nav_wrap { width:60%;   line-height:1vh; }

nav {width:100%; height:100%; box-sizing:border-box; padding-top:8px; display: flex;  justify-content:flex-end} 

nav p {margin:0 30px;    position:relative;   display:inline-block;   box-sizing:border-box;  transition: 0.3s linear;  }
nav p a {  color: #fff !important; letter-spacing:-1px; font-size:1.2rem; font-weight:500;}
nav p:hover  {border-bottom:10px solid #ffd200;  } 
nav p.ov  {border-bottom:10px solid #ffd200;  } 



.top_login {align-self:center;  margin-bottom:20px; color:#fff}
 
/*.login-btn {border:1px solid rgba(255,255,255,.6);  padding:0 0px; line-height:33px; display:inline-block; border-radius:50px; text-align:center;   width: 150px;}*/

.top_login nav {padding-top:0; display:block; }

.top_login nav ul {
  
}

.top_login nav ul li {
  display: inline-block;
  position: relative; border:1px solid rgba(255,255,255,.6);   text-align:center;   width:150px;  transition: 0.2s linear; box-sizing:border-box;
}

.top_login nav ul li a {
  color: #fff;
  display: block;
  font-size: .95rem;
   line-height:37px;
 
}
   
.top_login nav ul li ul {
   display: none; margin-top:1px;
  position: absolute; z-index:9999999999999999999999999999999999999;
  width: 150px;  right:0;  
}

.top_login nav ul li ul li {
  border:none;   border-radius:0;padding:0;  border-bottom:1px solid #333;
  display:inline-block;  width:100%; text-align:center; 
}
.top_login nav ul li ul li:last-child {border-bottom:none}
.top_login nav ul li ul li:first-child { border-top: none; }

.top_login nav ul li ul li a {
  background: #222; font-size:0.88rem; line-height:1.3em; padding:10px 10px;
  display: block; font-weight:300; box-sizing:border-box; 
 }

 .top_login nav ul li ul li a:hover { background: #ffd200;  font-weight:600; color:#333 !important}

.top_login img {width:45px; height:45px; margin-left:10px; background-color:#fff; border-radius:50%; display:inline-block} 


@media all and (max-width:1024px) {
	nav p    {  margin:0 20px; }
	nav p  a {font-size:1.15rem} 
 
}

@media all and (max-width:800px) {
  .top { padding-bottom:20px } 
 }


.in {width:94%; margin:0 auto; box-sizing:border-box; max-width:1240px;    }


h3 {display:inline-block; font-size:1.5rem; letter-spacing:-1px }
h3.guide {font-size:1.4rem; color:#333; width:100%; display:inline-block; }
h3.guide2 {font-size:1.7rem; color:#333; width:100%; display:inline-block; ; }
h3.guide2 span {border-bottom:10px solid yellow; display:inline-block;height:25px }
h3 .h3_s_t {font-size:0.65em; line-height:1.5rem;   float:right; font-weight:500; color:#666}
h4 {font-size:1.3rem; color:#333}
h4 .h4_s_t {font-size:0.80em; color:#666; float:right; font-weight:400}
h4 .h4_s_t2 {font-size:0.7em;   font-weight:500}
h4 .h4_s_t3 {font-size:0.7em; float:right;   font-weight:400}
h5 {font-size:1.2rem; color:#333}
h5 .h5_s_t {font-size:0.9em;  }
h5 .h5_s_t2 {font-size:0.8em; font-weight:400; color:#777; line-height:1.15em ;  }




@media all and (max-width:800px) {
	 h3 {  font-size:1.3rem;  }
	 h4 {font-size:1.2rem;  }
	 h5 {font-size:1.1rem;  }
}


a.return {font-size:0.93rem; color:#333 !important; margin-left:5px}
a.return img {margin-left:3px; vertical-align:-1px  }


/*기본 input*/
input.basic_input[type="text"]	{ -webkit-appearance: none; -webkit-border-radius: 0;}
 

/*기본 리스트*/


ul.list {width:100%; margin-top:20px; display:flex ; flex-wrap:wrap; justify-content:space-between; margin-bottom:-20px;   }
ul.list li {width:48.5%; border:1px solid #b5b5b5;  background-color:#fff; margin-bottom:15px; box-sizing:border-box; padding:19px;  border-radius:5px;  position:relative;}
ul.list li div.li_wrap {width:100%; position:relative;    top:50%; transform: translate(0, -50%);    }

ul.list li img {vertical-align:middle; }
ul.list li img.img {width:22%; display:inline-block; vertical-align:top;  position:absolute ; top:50%; left:0; transform: translate(0, -50%);  }
ul.list li div.info_t {width:73%;  display:inline-block;  font-size:0.89rem; margin-left:5%;  vertical-align:top; margin-left:27%;   }
ul.list li div.info_t span.s_t {width:100%; display:inline-block;  font-weight:500; font-size:.9rem}
 

ul.list li div.info_t h4 {font-size:1.15rem; margin-bottom:7px;  line-height:1.25em; color:#333; }
ul.list li div.info_t p { color:#8193a7;  }
ul.list li div.info_t b { color:#555;  }
ul.list li a div.info_t  h4 { color:#333 !important}
ul.list li div.info_t  p {width:100%; display:inline-block; margin-bottom:-2px; } 
ul.list li div.info_t span.label {background-color:#e6e9f0; border:1px solid #e6e9f0; color:#67696c; border-radius:3px; padding:0 10px; line-height:23px; display:inline-block; margin-right:5px ; font-size:0.83rem}

ul.list li div.info_t dl {width:100%;   display:flex; margin-bottom:3px;}
ul.list li div.info_t dl:first-child {margin-top:7px}
ul.list li div.info_t dl:last-child {margin-bottom:15px}
ul.list li div.info_t dl dt {width:100px; color:#67696c;  font-size:0.93rem; line-height:1.5em; }
ul.list li div.info_t dl dd { width:calc(100% - 100px); line-height:1.5em; font-size:0.93rem; font-weight:500; color:#333}

ul.list .wish_btn_p  {margin-top:-5px; display:inline-block; width:100%;  font-size:0.9rem;    text-align:right; margin-bottom:5px; }

ul.list li a.wish_btn { position:absolute; right:15px; top:12px; line-height:1em}
ul.list li a.wish_btn img {vertical-align:-1px}

@media all and (max-width:1200px){
	ul.list li div.info_t h4 {font-size:1.1rem; }
	ul.list li div.info_t span.support_t {width:100%; display:inline-block; margin-top:5px}
}
 @media all and (max-width:800px){
	 ul.list li div.info_t h4 {font-size:1.05rem; }
}
@media all and (max-width:640px){
   
	ul.list li {width:100%; padding:15px}
    ul.list li div.info_t span.s_t {padding-bottom:3px}

}

span.heart_ov {color:red !important}
 
/*스킬업 갤러리 리스트*/

ul.list2 {width:100%; margin-top:20px; display:flex ; flex-wrap:wrap;  }
ul.list2 li {width:31%; margin-bottom:50px; box-sizing:border-box;  position:relative ; border-radius:5px; margin-right:3.5%}
ul.list2 li:nth-child(3n) {margin-right:0}
ul.list2 li img {vertical-align:middle;}
ul.list2 li .img  {width:100%; padding-bottom:100%; margin-bottom:20px; background-color:#ddd; display:inline-block; vertical-align:top; position:relative;   }
ul.list2 li .img  img {width:100%; height:100%;}
ul.list2 li p.d-day {position:absolute; font-size:0.85rem; padding:3px 10px; right:0;bottom:0; background-color:#f18158; color:#fff;}

ul.list2 li div.info_t {width:100%;  display:inline-block;  vertical-align:top}
ul.list2 li div.info_t h4 {font-size:1.2rem;  margin-bottom:10px; margin-top:10px; line-height:1.5em; color:#333; }
ul.list2 li a div.info_t  h4 { color:#333 !important}
ul.list2 li div.info_t  p {width:100%; display:inline-block;   } 
ul.list2 li div p.t1 {font-size:1.13rem; color:#333; font-weight:600;}
ul.list2 li div p.t2 {font-size:0.90rem; color:#666;}


 

@media all and (max-width:800px){
	ul.list2 li {width:48%; margin-right:0; }
	ul.list2 li:nth-child(2n) {margin-left:4%}


	ul.list2 li div.info_t h4 {font-size:1.1rem}
	ul.list2 li div p.t1 {font-size:1rem;}
}

@media all and (max-width:800px){
	ul.list2 li div.info_t h4 {font-size:1.05rem}
	ul.list2 li div p.t1 {font-size:1rem;}
}

/**/

footer {width:100%; background-color:#333333; color:rgba(255,255,255,.7);  margin-top:100px; padding:40px 0}
footer div {line-height:1.65em; font-size:0.87rem;  }
footer img {width:30%; max-width:170px}

.ul_wrap {width:55%; float:right; display:flex; justify-content:space-between}
 footer ul:nth-child(1) {width:30%;   }
 footer ul:nth-child(2) {width:30%;   }
 footer ul:nth-child(3) {width:250px;    }
 footer ul li {width:100%; display:inline-block ; padding-bottom:10px}
 footer ul li:nth-child(1) {font-size:1rem; color:#fff}
 footer ul li p {line-height:1.7em}
footer p.line {width:100%; height:1px; background-color:#fff; display:inline-block; margin:30px 0 }
footer a {color:rgba(255,255,255,.7) !important; border-radius:3px; }
footer a.s_btn {border:1px solid #fff; background:none; color:#fff !important}

@media all and (max-width:1200px) {
	 .ul_wrap {width:68%; }

 }

@media all and (max-width:800px) {
	footer {padding:35px 0 25px 0; margin-top:70px}
	.ul_wrap {width:100%; float:none; display:inline-block; }
	 footer ul:nth-child(1) {width:100%; margin-top:30px }
	 footer ul:nth-child(2) {width:100%;   }
	 footer ul:nth-child(3) {width:100%;   } 

	footer div {line-height:1.6em; font-size:0.85rem;  }
	footer .pc-col-2 div:nth-child(2) {  order:0  }
	footer .pc-col-2 div:nth-child(1) {  order:1 ; margin-top:15px}
}