.sharebtn{ display:none;}


.SBody.About .addbtnnav > a > svg{
	margin-left:27px;
}
.SBody.About .addbtnnav > a > svg path{
    transition-duration: 0.3s;
    transition-delay: 0.1s;
}

.SBody.About.wheel_nav .addbtnnav{ bottom:0;}

.SBody.About.wheel_nav .addbtnnav > a:hover{ background-color:#00ffb1;}

.SBody.About.wheel_nav .addbtnnav > a:hover > svg path{}


.SBody.About .addbtnnav {
  width: 640px;
    text-align: center;
    text-align: center;
    position: fixed;
    bottom: -140px;
    left: 50%;
    margin-left: -320px;
    transition-duration: 0.3s;
    z-index: 3;
    transition-delay: 0.1s;
}

.SBody.About .addbtnnav .btn{
	display: inline-block;
    background-color: #fff;
    font-size: 29px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    display: inline-block;
    max-width: 578px;
    width: 90%;
    border: 23px solid #000;
    color: #000;
    border-right: 31px solid #000;
    border-left: 31px solid #000;
    padding: 21px 0;
    box-shadow: 0 -10px 20px 0 rgba(0,0,0,0.16);
    background-color: #fff;
    text-align: center;
    position: relative;
    transition-duration: 0.3s;
    transition-delay: 0.1s;
}


.main1{ position:relative; padding-bottom:165px; overflow:hidden; width:640px;}
.main1:after{ content:""; position:absolute; right:0; bottom:90px; width:236px; height:59px; background-image:url(https://file.k-friends.kr/img/20220420/022651_2.png); background-repeat:no-repeat; }

.main1 > div > h2 {
	margin-top:190px;
	margin-left:50px;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: -0.4px;
  color: #000;
  text-transform:uppercase;
  display:inline-block;
  background: repeating-linear-gradient(transparent, transparent 36px, #00ffb1 0, #00ffb1 50px, transparent 0,transparent 100px);
}

.main1 > div > h2 > span {
  font-size: 36px;
  font-weight: normal;
  letter-spacing: -0.36px;
    text-transform:uppercase;
}
.main1 > div > p{
	margin-top:60px;
	margin-left:50px;
  font-size: 24px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.88;
  letter-spacing: -0.24px;
  color: #000;
}
.main1 > div > div{ margin:70px 50px;}
.main1 > div > div > ul > li{ display:flex; align-items: center; margin-bottom:25px;}
.main1 > div > div > ul > li > label{ display:flex;justify-content: space-between; width:85px;
  font-size: 24px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.83;
  letter-spacing: -0.17px;
  color: #000;
  margin-right:35px;
  position:relative;
}
.main1 > div > div > ul > li > label:after{ content:"";
  width: 1px;
  height: 33.9px;
  background-color:#b7b7b7;
  position:absolute;
	right:-34px;
	top:4px;
  
}
.main1 > div > div > ul > li > div {
	margin-left:35px;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.71;
  letter-spacing: normal;
  color: #000;
}

.main2{ width:640px; display:inline-block; position:relative; }

.main2 > div > h2 {
  font-size: 48px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #000;
   text-transform:uppercase;
}
.main2 .medals{ display:flex; flex-wrap:wrap;justify-content: center; padding-top:80px;}
.main2 .medals > img{ margin:20px 10px;}

.main2 > div > div{ width:640px; display:inline-block; margin:auto; background-color:#f5f5f5; margin-top:98px;}
.main2 > div > div > ul{ margin-top:30px;}
.main2 > div > div > ul > li{  text-align:center; padding-top:20px; padding-bottom:30px; position:relative;}
.main2 > div > div > ul > li > label{
  font-size: 29px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  display:inline-block;
  margin-top:80px;
  padding:0 3px;
  background: repeating-linear-gradient(transparent, transparent 26px, #00ffb1 0, #00ffb1 50px, transparent 0,transparent 100px);
}
.main2 > div > div > ul > li > div{ display:inline-block; width:100%;}
.main2 > div > div > ul > li > div > .herolabel > nav{ margin:56px 0;}
.main2 > div > div > ul > li > div > .herolabel > nav > a  {
	position:relative;
  font-size: 18px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #545454;
  margin:0 26px;
}
.main2 > div > div > ul > li > div > .herolabel > nav > a.selectbtn{ font-weight:800; color:#000;}
.main2 > div > div > ul > li > div > .herolabel > nav > a:before{ content:""; width:1px; height:13px; background-color:#707070; display:inline-block; position:absolute; left:-28px; top:5px;}
.main2 > div > div > ul > li > div > .herolabel > nav > a:nth-child(1):before{ display:none;}

.main2 > div > div > ul > li > div > .herolabel > ul > li{ display:none;}
.main2 > div > div > ul > li > div > .herolabel > ul > li.active{ display:inline-block;}
.main2 > div > div > ul > li > div > .herolabel > p{
	margin-top:40px;
	display:inline-block;
	width:440px;
  font-size: 17px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8;
  letter-spacing: normal;
  text-align: right;
  color: #000;
}
.main2List img{ box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.16);}

.main3{ width:640px; display:inline-block; position:relative; }
.main3 > div{ width:640px; display:inline-block; text-align:center;}

.main3 > div > h2 {
	margin-top:140px;
  font-size: 29px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: -0.4px;
  color: #000;
  text-transform:uppercase;
  display:inline-block;
  background: repeating-linear-gradient(transparent, transparent 26px, #00ffb1 0, #00ffb1 50px, transparent 0,transparent 100px);
}
.main3 > div > div{ margin-top:110px; }



.main4{ width:640px; display:inline-block; background-color:#e9e9e9; margin-top:300px; margin-bottom:100px;}
.main4 > div{ padding:130px 0; position:relative; }
.main4 > div > p {
	margin:0 50px;
	position:relative;
  font-size: 29px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  color: #000;
  background: repeating-linear-gradient(transparent, transparent 26px, #00ffb1 0, #00ffb1 50px, transparent 0,transparent 100px);
  display:inline-block;
}
.main4 > div > p:after{ content:"*별매"; position:absolute;
width:48px;
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.39;
  letter-spacing: normal;
  color: #000;
  right:-58px; top:0;
}

.main4 > div > h2{
  opacity: 0.07;
  font-size: 69px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: left;
  color: #000;
  display:inline-block;
  position:absolute;
  top:228px;
  right:73px;
}
.main4 > div > h1 {
	margin:0 50px;
	margin-top:120px;
  font-size: 42px;
  font-weight: 900;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  color: #000;
}
.main4 > div > h3{
	margin:0 50px;
  font-size: 26px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  color: #000;
}

.main4 > div > .text > p{
	margin:0 50px;
	margin-top:73px;
  font-size: 21px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.76;
  letter-spacing: normal;
  text-align: left;
  color: #000;
}
.main4 > div > .text > aside{ margin:0 50px; margin-top:70px; display:inline-block;}
.main4 > div > .text > aside > span{
	display:inline-block;
  font-size: 22px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.77;
  letter-spacing: normal;
  color: #000;
background: repeating-linear-gradient(transparent, transparent 24px, rgba(0,255,144,0.36) 0, rgba(0,255,144,0.36) 32px, transparent 0,transparent 100px);
}
.main4 > div > .text > aside:hover > span{
background: repeating-linear-gradient(transparent, transparent 24px, #00ffb1 0, #00ffb1 32px, transparent 0,transparent 100px);
}

.main4 > div > div.pfpsize > img{ max-width:100%; margin-top:90px; transform:scale(1)}


.main4 > div > div.pfpsize > p {
	margin-top:130px;
  font-size: 19px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.79;
  letter-spacing: normal;
  color: #000;
}

.capsmorenav{ display:inline-block; width:640px; position:absolute; bottom:0; left:0;background: repeating-linear-gradient(#f5f5f5, #f5f5f5 0px, #f5f5f5 0, #f5f5f5 35px, #fff 0,#fff 100px);}
.capsmorenav > a {
  width: 538px;
  padding: 19px 0;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.16);
  border: solid 1px #707070;
  background-color: #fff;
  text-align:center;
  display:inline-block;
}

.capsmorenav > a:hover{ background-color:#00ffb1;}

.capsmorenav > a > span{
  font-size: 21px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #000;

  margin-right:25.8px;
}
.capsmorenav > a > svg{ transform:rotate(180deg);}
.capsmorenav > a.active > svg{ transform:rotate(360deg)}

.tsizeTable {
	margin-top:60px;
	margin:auto;
	width:540px;
	border-collapse:collapse;
  font-size: 22px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}
.tsizeTable > thead > tr > th{ border-bottom:1px solid #707070;border-top:1px solid #707070; padding:6px;}
.tsizeTable > tbody > tr > td{ border-bottom:1px solid #707070; padding:6px;}
.tsizeTable > tfoot > tr > td{ padding:8px; font-size:19px;}
.tsizeTable > tbody > tr > td > span{ display:inline-block; padding:0 5px;}
.tsizeTable > tbody > tr:hover > td > span{ background: repeating-linear-gradient(transparent, transparent 20px, #00ffb1 0, #00ffb1 30px, transparent 0,transparent 100px);}
.tsizeTable > tbody > tr:hover > td:hover > span{ background: repeating-linear-gradient(transparent, transparent 20px, #00ffb1 0, #00ffb1 30px, transparent 0,transparent 100px); }



.pfpsizeTable {
	margin:auto;
	margin-top:40px;
	width:540px;
	border-collapse:collapse;
  font-size: 22px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}
.pfpsizeTable > thead > tr > th{ border-bottom:1px solid #707070;border-top:1px solid #707070; padding:6px;}
.pfpsizeTable > tbody > tr > td{ border-bottom:1px solid #707070; padding:6px;}
.pfpsizeTable > tfoot > tr > td{ padding:8px; font-size:19px;}
.pfpsizeTable > tbody > tr > td > span{ display:inline-block; padding:0 5px;}
.pfpsizeTable > tbody > tr:hover > td > span{ background: repeating-linear-gradient(transparent, transparent 20px, #00ffb1 0, #00ffb1 30px, transparent 0,transparent 100px);}
.pfpsizeTable > tbody > tr:hover > td:hover > span{ background: repeating-linear-gradient(transparent, transparent 20px, #00ffb1 0, #00ffb1 30px, transparent 0,transparent 100px); }

.captypenav > a{
  padding: 11px 0;
  border-radius: 30px;
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.16); 
  width: 163px;
  font-size: 20px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  text-align:center;
  display:inline-block;
  color: #000;
  margin:0 11px;
}
.captypenav > a.active{ background-color: #00ffb1;}
.captypebtn.active{}

.capdiv{ width:640px; padding:96px 0; padding-top:120px; display:inline-block; background-color:#f8f8f8; float:left;}
.capdiv > p{
  font-size: 17px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  text-align: center;
  color: #000;
     text-transform:uppercase;
     margin:50px 0;}
.capimg > ul > li{ display:none;}
.capimg > ul > li.active{ display:inline-block;}
.capimg > ul > li > p{ margin-bottom:14px;}
.capcolornav{ width:640px; display:flex;justify-content: center; margin-top:30px;}
.capcolornav > a {
  width: 48px;
  height: 48px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius:50%;
  border:6px solid #fff;
  display:inline-block;
  margin:17.5px;
}
.cap0 > a:nth-child(3){ display:none;}
.cap1 > a:nth-child(2){ display:none;}
.capcolornav > a.active{ border-color:#00ffb1;}
.capcolornav > a:nth-child(1){ background-color:#000000;}
.capcolornav > a:nth-child(2){ background-color:#0066FF;}
.capcolornav > a:nth-child(3){ background-color:#FFC5C5;}



.tshertdiv{ width:640px; display:inline-block; float:left; padding:50px 0; padding-top:140px;}
.tshertdiv > div{ padding-bottom:40px;}

.tshirt_maindiv{ display:flex; justify-content: space-between; width:604px; height:677px; margin-left:20px; margin-top:80px; }
.t_tab_div{ width:394px; height:677px; display:inline-block;overflow:hidden; position:relative;}
.tgenderbtn{ width:202px; display:inline-block;}
.t_tab_div > div{ position:absolute; width:394px; height:677px; display:inline-block; left:0; top:0; overflow:hidden; }
.t_tab_div[data-tab='0'] > div.t_m_div{ height:677px; }
.t_tab_div[data-tab='0'] > div.t_w_div{ height:0;}
.t_tab_div[data-tab='1'] > div.t_m_div{ height:0;}
.t_tab_div[data-tab='1'] > div.t_w_div{ height:677px;}


.tgenderbtn input[name=tgender]{ display:none;}
.tgenderbtn > label{
	width:196px;
	height:331px;
	display:inline-block;
	color:transparent;
	position:relative;
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	margin-bottom:15px;
	cursor:pointer;
}
.tgenderbtn > label:after{ content:""; width:0; height:0; border:28px solid transparent;  display:inline-block; position:absolute; left:0; top:0;}
.tgenderbtn input[type="radio"]:checked + label{ z-index:1; }
.tgenderbtn input[type="radio"]:checked + label:after{ border-top-color:#00ffb1; border-left-color:#00ffb1;}

label[for='tgender0']{ background-image:url(https://file.k-friends.kr/img/20220504/050819_0.jpg);}
label[for='tgender1']{ background-image:url(https://file.k-friends.kr/img/20220504/051124_0.jpg);}
.tshertdiv{ background-color:#fff;}

.dailydiv{ width:640px; display:inline-block; float:left; padding:50px 0; padding-top:140px;}
.dailydiv > div{ padding-bottom:40px;}
.daily_maindiv{ display:flex; justify-content: space-between; width:604px; height:677px; margin-left:20px; margin-top:80px; }
.daily_tab_div{ width:394px; height:677px; display:inline-block;overflow:hidden; position:relative;}
.daily_tab_div img{width:394px; height:677px;}
.dailygenderbtn{ width:202px; display:inline-block;}
.daily_tab_div > div{ position:absolute; width:394px; height:677px; display:inline-block; left:0; top:0; overflow:hidden; }
.daily_tab_div[data-tab='0'] > div.daily_m_div{ height:677px; }
.daily_tab_div[data-tab='0'] > div.daily_w_div{ height:0;}
.daily_tab_div[data-tab='1'] > div.daily_m_div{ height:0;}
.daily_tab_div[data-tab='1'] > div.daily_w_div{ height:677px;}

.dailygenderbtn input[name=dailygender]{ display:none;}
.dailygenderbtn > label{
	width:196px;
	height:331px;
	display:inline-block;
	color:transparent;
	position:relative;
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	margin-bottom:15px;
	cursor:pointer;
}
.dailygenderbtn > label:after{ content:""; width:0; height:0; border:28px solid transparent;  display:inline-block; position:absolute; left:0; top:0;}
.dailygenderbtn input[type="radio"]:checked + label{ z-index:1; }
.dailygenderbtn input[type="radio"]:checked + label:after{ border-top-color:#00ffb1; border-left-color:#00ffb1;}

label[for='dailygender0']{ background-image:url(https://file.k-friends.kr/img/20220504/070939_0.jpg);}
label[for='dailygender1']{ background-image:url(https://file.k-friends.kr/img/20220504/071045_0.jpg);}




.capdiv{ width:640px; display:inline-block; }

.cap_maindiv{ display:flex; justify-content: space-between; width:604px; height:677px; margin-left:20px; margin-top:80px; }
.cap_tab_div{ width:394px; height:677px; display:inline-block;overflow:hidden; position:relative;}
.cap_tab_div img{ width:394px; height:677px;}
.capcolorsbtn{ width:202px; display:inline-block;}

.cap_tab_div > div{ position:absolute; width:394px; height:677px; display:inline-block; left:0; top:0; overflow:hidden; }
.cap_tab_div[data-tab='0'] > div.cap_0_div{ height:677px; }
.cap_tab_div[data-tab='0'] > div.cap_1_div{ height:0;}
.cap_tab_div[data-tab='0'] > div.cap_2_div{ height:0;}

.cap_tab_div[data-tab='1'] > div.cap_0_div{ height:0; }
.cap_tab_div[data-tab='1'] > div.cap_1_div{ height:677px;}
.cap_tab_div[data-tab='1'] > div.cap_2_div{ height:0;}

.cap_tab_div[data-tab='2'] > div.cap_0_div{ height:0; }
.cap_tab_div[data-tab='2'] > div.cap_1_div{ height:0;}
.cap_tab_div[data-tab='2'] > div.cap_2_div{ height:677px;}


.capcolorsbtn input[name=capcolors]{ display:none;}
.capcolorsbtn > label{
	width:196px;
	height:211px;
	display:inline-block;
	color:transparent;
	position:relative;
	background-size:130px auto;
	background-position:center;
	background-repeat:no-repeat;
	margin-bottom:15px;
	cursor:pointer;
}
.capcolorsbtn > label:after{ content:""; width:0; height:0; border:28px solid transparent;  display:inline-block; position:absolute; left:0; top:0;}
.capcolorsbtn input[type="radio"]:checked + label{ z-index:1; }
.capcolorsbtn input[type="radio"]:checked + label:after{ border-top-color:#00ffb1; border-left-color:#00ffb1;}

label[for='capcolors0']{ background-image:url(https://file.k-friends.kr/img/20220504/063536_0.png);}
label[for='capcolors1']{ background-image:url(https://file.k-friends.kr/img/20220504/063536_1.png);}
label[for='capcolors2']{ background-image:url(https://file.k-friends.kr/img/20220504/063536_2.png);}


.pfpdiv{ width:640px; display:inline-block; float:left; padding:50px 0; padding-top:140px;}
.pfpdiv > div{ padding-bottom:40px;}
.pfp_maindiv{ display:flex; justify-content: space-between; width:604px; margin-left:20px; height:677px; margin-top:80px; }
.pfp_tab_div{ width:394px; height:677px; display:inline-block;overflow:hidden; position:relative;}
.pfpgenderbtn{ width:202px; display:inline-block;}
.pfp_tab_div > div{ position:absolute; width:394px; height:677px; display:inline-block; left:0; top:0; overflow:hidden; }
.pfp_tab_div[data-tab='0'] > div.pfp_m_div{ height:677px; }
.pfp_tab_div[data-tab='0'] > div.pfp_w_div{ height:0;}
.pfp_tab_div[data-tab='1'] > div.pfp_m_div{ height:0;}
.pfp_tab_div[data-tab='1'] > div.pfp_w_div{ height:677px;}

.pfpgenderbtn input[name=pfpgender]{ display:none;}
.pfpgenderbtn > label{
	width:196px;
	height:331px;
	display:inline-block;
	color:transparent;
	position:relative;
	background-size:auto 100%;
	background-position:center;
	background-repeat:no-repeat;
	margin-bottom:15px;
	cursor:pointer;
}
.pfpgenderbtn > label:after{ content:""; width:0; height:0; border:28px solid transparent;  display:inline-block; position:absolute; left:0; top:0;}
.pfpgenderbtn input[type="radio"]:checked + label{ z-index:1; }
.pfpgenderbtn input[type="radio"]:checked + label:after{ border-top-color:#00ffb1; border-left-color:#00ffb1;}

label[for='pfpgender0']{ background-image:url(https://file.k-friends.kr/img/20220504/072843_0.jpg);}
label[for='pfpgender1']{ background-image:url(https://file.k-friends.kr/img/20220504/072950_0.jpg);}

 .main3  >div  > div > div {
	margin-top:80px;
  width: 540px;
  padding: 67px 0;
  background-color: #f2f2f2;
  display:inline-block;
}
.main3  >div  > div > div > h3{
  font-size: 22px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.36;
  letter-spacing: normal;
  text-align: center;
  color: #000;
  margin-bottom:60px;
}


.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ left:28%; width:46%;  border-radius:16px;display:inline-block; bottom:30px; padding:4px;}

.cap_maindiv .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{ left:20%; width:60%;}
.swiper-pagination-bullet{ width:12px; height:12px; box-shadow:1px 1px 3px #fff; opacity:.4;}
.swiper-pagination-bullet-active{ background-color:#00ffb1; opacity:1;}