@charset "utf-8";
/* Winko Communication KHN */

/* Initialization
------------------------------------------- */
*{margin:0px; padding:0px;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0 none; font-size: 100%; font: inherit; vertical-align: baseline;}
/*2023.10.20 body{width:100%; height:100%; margin:0px; padding:0px; -webkit-text-size-adjust:none; color:#444; font-family: Dotum, Gulim, Arial, Malgun Gothic, AppleGothic, Helvetica, sans-serif; font-size:12px;}*/
body{max-width:480px; margin:0 auto; height:100%; margin:0px; padding:0px; -webkit-text-size-adjust:none; color:#444; font-family: Dotum, Gulim, Arial, Malgun Gothic, AppleGothic, Helvetica, sans-serif; font-size:12px;}
dl,ul,ol,li, dt, dd{margin:0px; padding:0px; list-style:none;}
table{border-collapse: collapse;}
h1, h2, h3, h4, h5, h6, p{margin:0px; padding:0px;}

nav, header, footer, section, aside, article{display:block;}
body div.ui-page-theme-a a.ui-btn{text-shadow:none;}

/* Link
------------------------------------------- */
a {color:#393939; text-decoration:none; cursor:pointer;}
a:hover{color:#393939;}

/* Layout..
------------------------------------------- */
#wrap{width:100%; height:100%; margin:0px; padding:0px;}
header{position:relative; width:100%; padding:10px 0px; text-align:center; font-weight:bold; font-family:Arial, Verdana, Sans-serif; color:#252525;}
footer{position:relative; padding:10px 0px; border-top:1px solid #e7d6bd; text-align:center; color:#444; line-height:1.5em;}
footer a{color:#444;}

/* Reset 
------------------------------------------- */
/* Active button */
.ui-page-theme-a .ui-btn.ui-btn-active,
html .ui-bar-a .ui-btn.ui-btn-active,
html .ui-body-a .ui-btn.ui-btn-active,
html body .ui-group-theme-a .ui-btn.ui-btn-active,
html head + body .ui-btn.ui-btn-a.ui-btn-active,
/* Active checkbox icon */
.ui-page-theme-a .ui-checkbox-on:after,
html .ui-bar-a .ui-checkbox-on:after,
html .ui-body-a .ui-checkbox-on:after,
html body .ui-group-theme-a .ui-checkbox-on:after,
.ui-btn.ui-checkbox-on.ui-btn-a:after,
/* Active flipswitch background */
.ui-page-theme-a .ui-flipswitch-active,
html .ui-bar-a .ui-flipswitch-active,
html .ui-body-a .ui-flipswitch-active,
html body .ui-group-theme-a .ui-flipswitch-active,
html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active,
/* Active slider track */
.ui-page-theme-a .ui-slider-track .ui-btn-active,
html .ui-bar-a .ui-slider-track .ui-btn-active,
html .ui-body-a .ui-slider-track .ui-btn-active,
html body .ui-group-theme-a .ui-slider-track .ui-btn-active,
html body div.ui-slider-track.ui-body-a .ui-btn-active {
	background-color: 		#6f2b91 /*{a-active-background-color}*/;
	border-color:	 		#ece1f1 /*{a-active-border}*/;
	color: 					#6f2b91 /*{a-active-color}*/;
	text-shadow: none;
}

/* Main Layout
------------------------------------------- */
.ui-page-theme-a{background-color:#fff;}
.ui-page-theme-a .mHeader{position:relative; background-color:#6f2b91; border:none; color:#fff; text-shadow:none;}
.ui-page-theme-a a.menuAll{position:absolute; top:50%; left:10px; margin-top:-14px; padding:6px; background:none; border:none;}
.ui-page-theme-a a.menuAll:hover{background:none; border:none;}
.ui-page-theme-a a.menuAll img{height:20px;}
.ui-header .subtitle{padding: 0 0; font-size:1.5em; text-shadow:none; color:#fff;}
section.mCon{padding:0em;}
.ui-page-theme-a .mMenu{text-align:center; background-color:#7b459a; overflow:hidden;}
.ui-page-theme-a .mMenu li{position:relative; float:left; width:50%; height:100%;}
.ui-page-theme-a .mMenu a{position:relative; display:block; height:100%; font-size:1.2em; color:#fff; text-shadow: none;}
.ui-page-theme-a .mMenu a:hover, .mMenu a:visited{color:#fff;}
.ui-page-theme-a .mMenu a img{position:absolute; width:100%; top:50%; left:0px; margin-top:-70px; z-index:2;}
.ui-page-theme-a .mMenu a span{display:block; position:absolute; top:40px; width:100%; text-align:center;}
.bg1{background-color:#a788bd;}

/* External Panel, LNB */
#lnb{background-color:#622382; border-right:none; min-height:100%;}
#lnb .ui-panel-inner{padding:0em; background-color:#622382;}
.lnbPanel{background-color:#622382;}
.lnbList{}
.lnbList li{border-bottom:1px solid #7b459a;}
.lnbList li a{display:block; color:#fff; font-size:1.4em; padding:1.1em 0 1.1em 36px; background-size:20px 20px; background-repeat:no-repeat; background-position:10px center; text-shadow:none;}
.bgLogin{background-image:url(../images/common/gnb1.png);}
.bgHome{background-image:url(../images/common/gnb2.png);}
.bgMcard{background-image:url(../images/common/gnb3.png);}
.bgHealth{background-image:url(../images/common/gnb10.png);}
.bgCalorie{background-image:url(../images/common/gnb4.png);}
.bgMens{background-image:url(../images/common/gnb5.png);}
.bgStretch{background-image:url(../images/common/gnb6.png);}
.bgNews{background-image:url(../images/common/gnb7.png);}
.bgSetting{background-image:url(../images/common/gnb8.png);}
.bgMweb{background-image:url(../images/common/gnb9.png);}

.logo{height:30px;}
.tbWrap{width:100%;}
.tbWrap table{width:100%; font-size:1em;}
.tbWrap caption{height:0px; line-height:0px; font-size:0px;}

.tab1{padding-bottom:20px; margin:-1em -1em 0em -1em;}
.ui-page-theme-a  .tab1 a{display:inline-block; width:50%; padding:10px 0px; font-size:1.2em; text-align:center; background-color:#d2bbe2; 
color:#808080; text-shadow:none;}
.tab1 a.on{background-color:#9a62c7; color:#fff;}

.tab3{padding-bottom:20px; margin:-1em -1em 0em -1em;}
.ui-page-theme-a  .tab3 a{display:inline-block; width:33%; padding:10px 0px; font-size:1.2em; text-align:center; background-color:#d2bbe2; 
color:#808080; text-shadow:none;}
.ui-page-theme-a  .tab3 a:first-child{width:34%;}
.tab3 a.on{background-color:#9a62c7; color:#fff;}

.eDate{display:block;}
.tbStyle1 th, .tbStyle1 td{padding:12px 2px; border-bottom:1px solid #dfdfdf; font-size:1.2em;}
.tbStyle1 th{background-color:#f0f0f0;}
.tbStyle1 td{text-align:center;}
.tbStyle1 tr:first-child th, .tbStyle1 tr:first-child td{border-top:2px solid #a166be;} 

.tbStyle2 th{padding:8px 2px; font-size:1.2em; border-bottom:1px solid #dfdfdf; background-color:#ece1f1;}  /* Mens Cycle > Calendar Table */
.tbStyle2 tbody td{text-align:center; border:1px solid #ddd;}
.tbStyle2 tr:first-child th{border-top:2px solid #a166be;}
.tbStyle2 td a{position:relative; display:block; padding:4px 2px; font-size:1.4em; color:#434343;}
.tbStyle2 td #cnvs{position:absolute; top:0px; left:0px;}
.tbStyle2 td span{display:inline-block; width:20px; height:20px; padding:3px; border:4px solid transparent; border-radius:50%;}
.tbStyle2 td span.baby{border:4px solid #914bb4; }
.markerSet{padding:1em 1em 0em 1em;}
.markerSet *{vertical-align:middle;}
.markerSet strong{margin-right:10px;}
.markerCell1{display:inline-block; width:14px; height:14px; background-color:#fbfccc; border:1px solid #ddd;}
.markerCell2{display:inline-block; width:10px; height:10px; border: 3px solid #914bb4; border-radius: 50%;}
.markerCell3{display:inline-block; width:14px; height:14px; background:url(../images/common/marker1.png) left top no-repeat; background-size:14px 14px;}
.marker1{background:url(../images/common/marker1.png) left top no-repeat; background-size:auto 50%;}
.mens{background-color:#fbfccc;}
.mensCycleInfo{padding:1em 0em;}
.pdTop20{padding-top:20px;}
.pdSide10{padding:0px 10px;}

/* Calorie Calculator */
.dateCur{position:relative; min-height:30px; padding-bottom:20px; text-align:center;}
.dateCur *{vertical-align:middle;}
.dateCur .ui-btn{display:inline-block;}
.dateCur .ui-icon-carat-l{position:absolute; left:0px; min-height:30px;}
.dateCur .ui-icon-carat-r{position:absolute; right:0px; min-height:30px;}
.yyyymdd{display:inline-block; padding:15px 10px 0px 10px; font-weight:600; font-size:1.2em;}
input.calorieSearch{height:3em;}

.foodList{position:relative; margin-top:20px; padding:20px 0px 0px 0px; box-shadow:0px 4px 0px #d1d1d1 inset;}
.deco1{position:absolute; top:0px; display:inline-block; width:40px; border:2px solid #6f2b91;}
.foodListItem{position:relative; width:100%;}
.foodListItem a.inputFood{position:absolute; top:0px; right:0px; display:inline-block; padding:0.7em 1em; 
font-size:1.44em; text-align:center; background-color:#9a62c7; color:#fff; text-shadow:none; z-index:3;}
.foodListItem a.inputFood:visited{color:#fff;}
.foodListItem a.inputFood:active, .foodListItem a.inputFood:hover{background-color:#6f2b91; color:#fff;}
.foodList [data-role=collapsible] h2 *{vertical-align:middle;}
.foodList [data-role=collapsible] h2 a{}
.foodList [data-role=collapsible] h2 span{display:inline-block; width:80%; overflow:hidden; text-overflow:ellipsis;}
.foodList fieldset{padding-bottom:20px;}

.inputCalorie{}
.sumCalorie{padding:0.6em 0em; font-weight:600; font-size:1.5em; text-align:center; background-color:#ece1f1;}
.listCalorie span{display:inline-block; width:50%; padding:0.2em 0em; overflow:hidden; text-overflow:ellipsis;}
.listCalorie .ui-btn{margin:0.2em 0; padding:0.2em 1em 0.2em 2.5em; color:#434343;}
.ui-page-theme-a a.btSave, .ui-page-theme-a button.btSave{background-color:#a788bd; color:#fff; text-shadow:none;}

.ui-content ul.stretch{margin:1em -1em;}
.stretch li a{overflow:hidden;}
.stretch li span{display:inline-block; width:30%; height:50px; border:1px solid #d6bee7; background-repeat:no-repeat; background-position:left top; background-size:cover;}
.stretch li em{padding-left:1em; font-style:normal; color:#434343;}
.stretch li *{vertical-align:middle;}
.accntInfo{padding:20px 4px 4px 4px; font-size:1.2em; color:#6f2b91; text-align:center;}

.ui-content ul.news{margin:1em -1em;}
.news li a{overflow:hidden;}
.news li span.thmbImg{display:block; float:left; width:30%; height:50px; border-bottom:1px solid #d6bee7; overflow:hidden;}
.news li span.thmbImg img{width:98%; border:1px solid #d6bee7;} /* 위의 테두리 박스섀도우로 바꾸기 */
.news li span.newsDate{display:inline-block; padding:0px 2.5em 4px 10px; border:none; font-size:0.9em; color:#a3a3a3;}
.news li em{display:block; float:left; width:70%; font-style:normal; color:#434343; overflow:hidden; text-overflow:ellipsis;}
.news li em strong{display:block; padding:0px 2.5em 0px 10px;}
.news li *{vertical-align:middle;}
.eventCon img{width:100%;}
#cvsId, #cvsPw{height:3em;}
.pushList li{font-size:16px; color:#333; bordeR:1px red solid;}
.pushList .ui-slider{right:0px;}

.ui-btn-icon-notext.ui-btn-right.btnGraph{position:absolute; top:50%; margin-top:-15px; right:10px;}
a.btnPrv{position:absolute; top:50%; margin-top:-15px; left:10px;}

.ui-mobile label.bold{font-weight:600;}
.ftSz14{font-size:1.4em;}
.clrPink1{color:#e30482;}
.vMid, .vMid *{vertical-align:middle;}
.listGap1 li .ui-btn{padding:1.2em 1em;}

/* Graph */
.graphWp{width:100%; height:210px; padding-bottom:10px;}
.graphTit{font-weight:600; font-size:1.3em; color:#232323;}
/* item number 7 */
.graph{position:relative; width:100%; overflow:hidden;height:108px;  margin:10px 0px 0px 0px; padding-left:5px; border-left:1px solid #868686; border-bottom:1px solid #868686;}
.graph p{position:relative; float:left; bottom:0px; width:12%; height:100%; margin-right:2%;} /* 9% / 4% */
.graph p span{display:block; position:absolute; width:100%; bottom:0px; background-color:#914bb4;}
.graph p em{display:block; position:absolute; width:100%; padding-bottom:10px; text-align:center;}

 /* item number 6 */
.graph1{position:relative; width:100%; overflow:hidden; height:108px; margin:10px 0px 0px 0px; padding-left:5px; border-left:1px solid #868686; border-bottom:1px solid #868686;}
.graph1 p{position:relative; float:left; bottom:0px; width:11%; height:100%; margin-right:4%;}
.graph1 p span{display:block; position:absolute; width:100%; bottom:0px; background-color:#914bb4;}
.graph1 p em{display:block; position:absolute; width:100%; padding-bottom:10px; text-align:center;}

.gMonth{position:relative; clear:both; width:100%; overflow:hidden;} /* item number 7 */
.gMonth span{display:block; float:left; width:14%; margin:5px 0 0 0; text-align:center; font-size:0.9em;}
.gMonth1{position:relative; clear:both; width:100%; padding-left:5px; overflow:hidden;} /* item number 6 */
.gMonth1 span{display:block; float:left; width:11%; margin:5px 0 0 0; text-align:center; font-size:0.9em;}
.gMonth span.mlgd{width:auto;}
.gMonth1 span.mlgd{width:auto;}
.mlgd{position:absolute; left:0px;}
.lgd1{padding-top:4px;}
a.more{position:absolute; padding-right:16px; right:10px; color:#666666; background:url(./image/bg_arw.gif) right 1px no-repeat;}
.noPoint{position:absolute; top:-5px; left:-20px; text-align:right; font-size:13px;}
.noPoint li{height:35px;}
.ovrflw{overflow:hidden;}

/* Custom, Top Button, Graph */
.ui-page-theme-a .ui-btn.ui-icon-mygraph:after {background-image: url(../images/common/graph.png);
background-size:22px 22px; -webkit-border-radius: 0em; border-radius: 0em; /* Make your icon fit */}
.ui-page-theme-a .ui-btn.ui-icon-mygraph,
.ui-page-theme-a .ui-btn.ui-icon-mygraph:hover{background:#6f2b91; border-color:#6f2b91; border:none;}

/* Custom, Top Button, Previous */
.ui-page-theme-a .ui-btn.ui-icon-myPrv:after {background-image: url(../images/common/prev.png);
background-size:22px 22px; -webkit-border-radius: 0em; border-radius: 0em; /* Make your icon fit */}
.ui-page-theme-a .ui-btn.ui-icon-myPrv, .ui-page-theme-a .ui-btn.ui-icon-myPrv:hover{
 background:#6f2b91; border-color:#6f2b91; border:none;}

/* Custom, Video icon */
.ui-page-theme-a .ui-btn.ui-icon-myVideo:after {background-image: url(../images/common/video.png);
background-size:22px 22px; -webkit-border-radius: 0em; border-radius: 0em; /* Make your icon fit */}

/* Loader Style */
.ui-loader{width:30%; background-color:#6f2b91; border-color:#6f2b91; color:#fff; text-align:center;}
.ui-loader em{display:inline-block; padding-top:5px; font-style:normal;}
.ui-loader img{width:90%}

.ui-panel .ui-panel-inner {
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;  
    -webkit-overflow-scrolling: touch;
}

div.loadWrap{position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; z-index:999;}
div.loadWrap img{position:absolute; width:80px; top:50%; left:50%; margin:-40px 0px 0px -40px;}

/* 모바일앱 게시판 글자 ..점점저으로 나오는 부분 아래로 떨어지도록 수정 */
.ui-listview > .eventCon.ui-li-static{text-overflow: clip; overflow: hidden; white-space: normal;}
.ui-listview > li.eventCon p {white-space: normal;}
iframe {
width: 220%;
height: 200%;
overflow: auto;
-webkit-overflow-scrolling: touch;
zoom: 200%;
}

#display_area {
max-width: 1024px;
min-height: 558px !important;
height: 558px !important;
max-height: 558px !important;
overflow:auto;
padding: 0px;
-webkit-overflow-scrolling: touch;
}

/*개인정보취급방침*/
.ui-page-theme-a .privacy_policy a, html .privacy_policy .ui-bar-a a{
color: #787878 /*{a-link-color}*/;}
.privacy_policy{width:100%; height:100%; font-size:12px; overflow-y:scroll; overflow-x:hidden; border:1px solid #e4e4e4; background:#fff;}
.privacy_policy h4{padding:0px 10px; font-size:12px; font-weight:normal; margin:5px 0;}
.privacy_policy h3{padding:0px 10px; font-size:12px; font-weight:normal;}
.privacy_policy p{padding:0px 10px;}
.privacy_section{margin:10px 0;}
.privacy_policy ul{margin:2px 0 2px 10px; padding:0px 10px;}
.set_title{margin-left:20px;}
.privacy_policy ul.pv_bullet{margin-left:20px;}
.privacy_policy a:hover{text-decoration:underline;}
.set_title{color:#4a4a4a;}
.set_title_a{margin-left:10px;color:#959594; padding-left:8px; background:url('../images/common/bullet02.png') 0 5px no-repeat;}

/* 칼로리계산기 검색 버튼 추가 */
.kcalFood.ui-grid-a > .ui-block-a{width: 80%;}
.kcalFood.ui-grid-a > .ui-block-b {width: 20%;}
.kcalFood.ui-grid-a > .ui-block-b .ui-btn{height:3em;}

.iframebody body,.iframebody html{
	overflow-x:scroll !Important;
	border:1px solid red;
}

/* 회원카드 위치잡기 */
.bgDiv{height:100%; background:url(../images/common/bg_line.gif) 55% top repeat-y;}
.tbWidth1{float:left; width:55%; margin:0 1em 0 -1em;}
.tbWidth1 th{padding:12px 2px 12px 14px;}
.tbWidth1 td{vertical-align:middle;}
.barcode{float:left; width:45%; height:100%; margin-left:-3px;}
.testing{position:relative; padding-left:20px; text-align:center;}
#member_bcard [data-role=content]{margin:-2em 0;}
#member_bcard .testing{position:relative; height:100%; top:50%;}
#member_bcard .testing img{margin-top:-124px;}
#member_bcard .tbWrap{position:relative; top:50%; margin-top:-124px;}
.h100{height:100%;}

/*회원가입*/
.tabjoin{overflow:hidden;margin:-1em -1em 0 -1em; padding-bottom:20px;}
.tabjoin li{display:inline-block;width:50%;float:left;padding:10px 0px;color:#fff;font-size:1.2em; text-align:center;text-shadow:none;background:#b1b1b1;}
/*.tabjoin li:first-child{line-height:0;font-size:0;border-top:40px solid red;border-bottom:40px;border-left:40px;top:0;right:0;}*/
.tabjoin li.on{background:#a778c8 url(../images/common/joinstep.gif) 100% top no-repeat;}
.tabjoin li.on_next{background:#a778c8 url(../images/common/joinstep.gif) 0 bottom no-repeat;}

.bxCont{position:relative;margin-bottom:20px;}
.bxCont label{font-size:1.2em;}
.bxCont h2{font-weight:700;padding-bottom:5px;}
.pcAll{position:absolute;top:0px;right:0;height:13px;font-weight:normal;color:#606060;padding:1px 4px;letter-spacing:-1px;background-color:#e9e9e9;border-radius:5px;border:1px solid #a59797;}
.pcAll a{color:#606060;font-size:11px;}
.policy{border:1px solid #e0e0e0;padding:5px;}

.user_get{padding:20px 0;}
.user_btn{background:#7f46ab;color:#fff !important;padding:5px;border-radius:5px;}
.user_btn_w{display:block;background:#7f46ab;color:#fff !important;padding:5px 0;text-align:center;border-radius:5px;}
.user_get table{border-top:1px solid #a778c8;}
.user_get th{text-align:left;vertical-align:top;padding:0.5em;border-bottom:1px solid #e9e9e9;}
.user_get p{font-size:11px;}
.user_get td{padding:0;border-bottom:1px solid #e9e9e9;vertical-align:middle;}
.email,.phoneNum{display:table;width:100%;}
.emailcell{width:40%;display:table-cell;vertical-align:middle;}
.emailcell2{width:60%;display:table-cell;vertical-align:middle;}
.at{padding-top:13px;display:inline-block;}
.addr .ui-input-text{width:25% !important;display:inline-block;}
.addr .user_btn{display:inline-block;vertical-align:middle;}
.phoneNumfst{width:34%;display:table-cell;vertical-align:middle;}
.phoneNumscd{width:33%;display:table-cell;vertical-align:middle;}
.joinok{overflow:hidden;margin:-1em -1em 0 -1em; padding:20px 0;color:#6f2b91;text-align:center;font-weight:700;font-size:15px;}
.user_ok{padding-bottom:20px;}
.user_ok td,.user_ok th{text-align:left;vertical-align:top;padding:0.5em;}
.mttext{margin-top:2px;font-size:12px;}
.smscfm{display:table;width:100%;}
.smscfm span{display:inline-block;width:60%;vertical-align:middle;}
.smscfm a{display:inline-block;padding:5px;letter-spacing:-1px;background-color:#e9e9e9;border-radius:5px;color:#a59797;vertical-align:middle;margin-left:4px;}
.find_user{border:1px solid #e9e9e9;margin-bottom:10px;}
.find_user ul{margin:10px;}
.findtxt{padding:10px 0;}
.findtxt2{padding-top:10px;font-size:11px;}
.findtxt2 a{text-decoration:underline;}
.txinfo{background-color:#e9e9e9;padding:10px;}
.txinfo span{color:#6f2b91;}
/*2018-11-19 추가*/
.idemail,.idphoneNum{display:table;width:100%;}
.idphoneNumfst{width:24%;display:table-cell;vertical-align:middle;}
.idphoneNumscd{width:23%;display:table-cell;vertical-align:middle;}


/* 2025.09.25 유튜브 동영상 Style  */

.shorts-container {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:177.78%;
}

.shorts-container iframe {
     position:absolute;
     width:100%;
     height:100%;
     left:0;
 
}

.video-container {
  position:relative;
  height:0;
  padding-bottom:56.25%;  /*  16:9 */ 
}

.video-container iframe {
  position:absolute;
  left:0;
  width:100%;
  height:100%;
}