/*@import url('font.css');*/
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css');
@charset "utf-8";

body,html {font-family:'Noto Sans KR', sans-serif; font-size:13px; color:#333; line-height:20px;}
.wrap {width:100%; height:100%;}

/* pop */
.layer_bg {position: fixed; left:0; top:0; width:100%; height:100%; background: rgba(0, 0, 0, .5); z-index:9999;}
.layer {position:relative; left:50%; top:50%; width:322px; height:470px; background:#fff; border-radius:7px; transform:translate(-50%,-50%); box-shadow: 0 0 10px #666}
.layer_top {width:100%; background:#f8f8f8; border-bottom:1px solid #eeeeee;border-radius:5px 5px 0 0;}

.btn_mask {position:absolute; left:0; bottom:0; width:100%; height:57px; background:#3b8bcc; border-radius:0 0 5px 5px }
.btn_mask_half_b {position:absolute; left:0; bottom:0; width:50%; height:57px; background:#3b8bcc; border-radius:0 0 0 5px }
.btn_mask_half_g {position:absolute; left:50%; bottom:0; width:50%; height:57px; background:#666; border-radius:0 0 5px 0}

.btn_mask a {display:block; height:57px; font-size:15px; font-weight:600; line-height:57px; color:#fff; text-align:center;}
.btn_mask_half_g a {display:block; height:57px; font-size:15px; font-weight:600; line-height:57px; color:#fff; text-align:center;}
.btn_mask_half_b a {display:block; height:57px; font-size:15px; font-weight:600; line-height:57px; color:#fff; text-align:center;}

/* pop_authority */
.layer .authority {display:inline-block; margin:0 auto; padding:20px;}
.layer .authority img {width:64px; height:auto;}
.layer .authority p {display:inline-block; padding-left:15px; font-size:15px; color:#3b8bcc; font-weight:600; line-height:21px;}
.layer .authority p span {content: ""; display: inline-block; border-bottom:1px solid #3b8bcc; vertical-align:0; padding-bottom:3px; font-weight:600;}

.layer .authority_cont {padding: 27px; background: #fff; }
.layer .authority_cont li {width: 100%; padding:0 0 20px 32px; box-sizing:border-box;}
.layer .authority_cont li span { display: block; font-size: 15px; color:#3b8bcc; font-weight:600}
.layer .authority_cont li span.ico1:before { content: ""; display: inline-block; margin: 0 10px 0 -33px; width: 22px; height:22px; background: url("/images/autority_icon1.png") no-repeat center / 22px auto; vertical-align:-6px;}
.layer .authority_cont li span.ico2:before { content: ""; display: inline-block; margin: 0 10px 0 -33px; width: 22px; height:22px; background: url("/images/autority_icon2.png") no-repeat center / 22px auto; vertical-align:-6px;}
.layer .authority_cont li span.ico3:before { content: ""; display: inline-block; margin: 0 10px 0 -33px; width: 22px; height:22px; background: url("/images/autority_icon3.png") no-repeat center / 22px auto; vertical-align:-6px;}
.layer .authority_cont li span.ico4:before { content: ""; display: inline-block; margin: 0 10px 0 -33px; width: 22px; height:22px; background: url("/images/autority_icon4.png") no-repeat center / 22px auto; vertical-align:-6px;}

/* pop_quiz */
#layer_quiz_result {display:none;}
#layer_quiz_hint {display:none;}

.layer .quiz {display:inline-block; margin:0 auto; padding:7px 15px}
.layer .quiz img {width:82px; height:auto;}
.layer .quiz p {display:inline-block; font-size:18px; color:#3b8bcc; font-weight:600; line-height:21px;}

.layer .sticker_cont {display:inline-block; width:100%; max-height:350px;}
.layer .sticker_cont p.right_bg {display:block; width: 100%; background: url("/images/sticker_answer1_bg.png") no-repeat top / 134px }
.layer .sticker_cont > p {position:relative; display:block; padding:20px 0 35px 0 ;text-align:center; font-size:13px; color:#333; font-weight:600; line-height:28px;}
.layer .sticker_cont > p img {display:block; margin:0 auto 15px; width:100px; height:auto;}
.layer .sticker_cont > p.right:after {position:absolute; top:44px; right:80px; content: ""; display: inline-block; margin: 0 10px 0 -33px; width:42px; height:42px; background: url("/images/img_answer1.png") no-repeat center / 42px auto; vertical-align:-6px;}
.layer .sticker_cont > p.wrong:after {position:absolute; top:44px; right:80px; content: ""; display: inline-block; margin: 0 10px 0 -33px; width:42px; height:42px; background: url("/images/img_answer2.png") no-repeat center / 42px auto; vertical-align:-6px;}
.layer .sticker_cont p > span {font-size:20px; color:#3b8bcc; font-weight:600;}

.layer .sticker_cont .hint_cont {width:100%; padding:20px; font-size:13px; color:#666; text-align:justify; line-height:22px; font-weight:500; max-height: 350px; overflow-y: scroll;}
.layer .sticker_cont .hint_cont span {color:#333; font-weight:600; background:#c4dcf0; background-size:80%; vertical-align:0;}

.sticker_cont .sticker_spon {position:relative; display:table; margin:0 auto; width:100%;}
.sticker_cont .sticker_spon .spon_cont {display:table-cell; vertical-align:middle; padding-left:20px; height: 100%;}
.sticker_cont .sticker_spon img {width:89px; height:auto; margin-right:7px; }
.sticker_cont .sticker_spon p {position:absolute; display:inline-block; text-align:left; font-size:13px; color:#666;line-height:17px; font-weight:500; bottom:0px; }
.sticker_cont .sticker_spon p span {color:#3b8bcc; font-size:13px; font-weight:500; vertical-align:0;}

#no_answer > .sticker_spon {margin-top:30px;}

/* top */
.top_nav {position:relative; padding-left:16px; width: 100%; height:43px; font-size:15px; color:#111; line-height:43px; font-weight:600; background:#fff; border-bottom: 1px solid #cbcbcb;}
.btn_menu {position:absolute; display:inline-block; top:50%; left:16px; width:15px; height:15px; background: url("/images/btn_menu.png") no-repeat center / 15px auto; transform:translateY(-50%);}
.btn_close {position:absolute; display:inline-block; top:50%; right:16px; width:15px; height:15px; background: url("/images/btn_close.png") no-repeat center / 15px auto; transform:translateY(-50%)}
.top_nav .menu {padding-left:25px;font-weight:600;}

/* menu_bottom */
.dock_area {width:100%; height:62px; background:#f5f5f5; }
.dock_bar {position:fixed; left:0; bottom:0; width:100%; background:#f9f9fa;}
.dock_bar ul {font-size:0; border-top:1px solid #dcdcdc;}
.dock_bar li {display:inline-block; width:20%;padding-bottom:12px; text-align:center; }
.dock_bar li a { display:inline-block; font-size:11px; color:#333; line-height:1; text-align:center; }
.dock_bar .on a { display:inline-block; font-size:11px; color:#3b8bcc; line-height:1; text-align:center; font-weight:600; }
.dock_bar li img {display:block; margin:0 auto; width:22px; padding:12px 0 7px;}

/* color */
.font_w {color:#fff;}
.font_b {color:#3b8bcc;}
.font_g {color:#3daf86;}
.font_gr {color:#666;}
.bg_g {background:#f9f9fa;}
.bg_gra{ background: linear-gradient(to right bottom, #63cae1, #469dd2);}

/* position */
.clr {width:100%;height:100%;}
.pd_0{padding:0;}
.pd_16 {padding-left:16px; padding-right:16px;}
.b_btm0 {border-bottom:0;}

/* step */
.step_bar {display:block; width:100%; height:34px; padding:15px 0 15px 37px; font-size:0;}
.step_bar a {display:inline-block; width:13px; height:4px; background:#cbcbcb; margin-right:6px;}
.step_bar a.on {background:#3b8bcc;}

.step {padding:37px; font-size:13px; color:#3b8bcc; font-weight:500; }
.step_txt {display:block; font-size:30px; line-height:35px; font-weight:600; color:#333; padding-bottom:10px;}
.step_txt p {font-weight:500; padding:15px 0 30px 0; font-size:20px; color:#666;line-height:30px;}
.step_txt p span {display:inline-block; font-size:30px; color:#3b8bcc; font-weight:600; vertical-align:0;}
.step_txt span {font-size:30px; color:#3b8bcc;line-height:35px; font-weight:600;vertical-align:0;}
.step_img {padding:20px 0 20px 0; width:100%;}
.step_img img {display:block; width:148px; padding-bottom:15px;}
.step_img p {text-align:left; color:#3b8bcc; font-size:28px; font-weight:600; line-height:32px; letter-spacing:-1px;}
.step_img p span {color:#3daf86; vertical-align:0;}

.step_img2 {padding:30px 0 20px 0;}
.step_img2 img {display:block; width:190px; padding:10px 0 20px 0;}

/*splash*/
.splash {position:absolute; left:50%; top:45%;transform:translate(-50%,-50%); width:160px; text-align:center; color:#fff; font-size:28px; font-weight:600; line-height:32px; letter-spacing:-1px;}
.splash img {display:block; width:148px; padding-bottom:15px;}

.splash_login {position:absolute; left:50%; top:35%;transform:translate(-50%,-50%); width:160px; text-align:center; color:#fff; font-size:28px; font-weight:600; line-height:32px; letter-spacing:-1px;}
.splash_login img {display:block; width:148px; padding-bottom:15px;}
.splash_login p {color:#3b8bcc; font-weight:600; }
.splash_login p span {color:#3daf86; font-weight:600;  vertical-align:0;}

.copy {position:absolute;bottom:24px;text-align:center;width:100%; font-size:11px;}

/*login*/
.login {position:absolute; left:0; top:67%; width:100%;}
.login p {position:relative; height:1px; margin:10px 29px; background:#3b8bcc;}
.login p span {position:absolute; left:50%; top:50%; font-size:12px;  color:#3b8bcc; text-align:center; font-weight:600; background:#fff; padding:0 10px; transform:translate(-50%,-50%); }
.login ul {padding:10px 19px 0; font-size:0;}
.login li {display:inline-block; width:25%;text-align:center;}
.login li a {display:inline-block; font-size:12px; color:#666; text-align:center;font-weight:500}
.login li a img {display:block; margin:0 auto;width:56px; padding-bottom:7px;}

/* terms of use */
.terms_box {margin:16px; border-radius:5px; border:1px solid #e0e0e0;background:#fff;}
.terms_box .terms_tit {width:100%; height:42px; border-bottom:1px solid #e0e0e0; font-size:15px; color:#111; font-weight:500; line-height:42px; }
.terms_box .terms_tit img {width:21px; height:auto;margin:0 5px 0 12px;}
.terms_box textarea {font-family:'Noto Sans KR', sans-serif; padding:12px;text-align:justify; font-size:12px; color:#666; line-height:18px; width:100%; height:100px; font-weight:300; }

.btn_blue {position:fixed; left:0; bottom:0; width:100%; height:57px; text-align:center; line-height:57px;background:#3b8bcc}
.btn_blue a {display:block; width:100%; height:57px; font-size:15px; font-weight:600; color:#fff; }

.btn_blue2 {width:100%; height:57px; text-align:center; line-height:57px;background:#3b8bcc}
.btn_blue2.on {background:#8e8e8e}
.btn_blue2 a {display:block; width:100%; height:57px; font-size:15px; font-weight:600; color:#fff; }


/* index */
.slide img {width:100%;}

.level_area {position:relative;border-bottom:1px solid #dcdcdd;}
.level_box:before {position:absolute; content:""; left:50%; top:50%; width:1px; height:40px; background:#f0efef; transform:translate(-50%,-50%);}
.level_box {margin:10px; border-radius:5px; border:1px solid #e0e0e0; background:#fff; box-shadow: 0 0 3px #e0e0e0; font-size:0;}
.level_box img {float:left; display:inline-block; width:47px; height:47px;}
.level_box .level {display:inline-block; width:50%; padding:8px; }
.level_box .level p {float:left;display:inline-block; font-size:12px; color:#8e8e8e; padding:8px 0 0 5px;}
.level_box .level p #myRanking {font-size:18px; font-weight:600; color:#111;}
.level_box .level p em { position:relative; font-size:12px; color:#111;}
.level_box .level p #myRanking:after {position:relative; content:""; right:-15px; top:1px; display:inline-block; width:6px; height:11px; background: url("/images/btn_sticker_arr.png") no-repeat center right / 6px auto;}
/*.level_box .level p em:after {position:absolute; content:""; right:-15px; top:1px; display:inline-block; width:6px; height:11px; background: url("/images/btn_sticker_arr.png") no-repeat center right / 6px auto;}*/
.level_box .sticker {display:inline-block; width:50%;padding:8px 8px 8px 18px;}
.level_box .sticker p {float:left; display:inline-block; font-size:12px; color:#8e8e8e; padding:8px 0 0 5px;}
.level_box .sticker p span {font-size:18px; font-weight:600; color:#111;}
.level_box .sticker p em {  position:relative; font-size:12px; color:#111;}
.level_box .sticker p em:after {position:absolute; content:""; right:-15px; top:1px; display:inline-block; width:6px; height:11px; background: url("/images/btn_sticker_arr.png") no-repeat center right / 6px auto;}
.level_box .sticker p img {display:inline-block; width:6px; height:11px;}*/

.sns_box {width:100%; background:#fff;}

.sns_box .nick {position: relative; display:inline-block; width:100%; background: #ffffff; border-bottom:1px solid #f0f0f0;}
.sns_box .nick img {float:left; display:inline-block; margin:10px 10px 10px 16px; width:38px; height:38px; border-radius:19px;}
.sns_box .nick p {float:left; display:inline-block; padding-top:10px; font-size:12px; color:#b2b1b1;}
.sns_box .nick p span {font-size:14px; color:#111; font-weight:500;}

.sns_box .cont {display:inline-block; width:100%; background: #ffffff; text-align: left;}
.sns_box .cont img {position:relative; max-width:100%;}
.sns_box .cont div {display:inline-block; padding:10px 16px; text-align:justify; }
.sns_box .cont p.image {display:inline-block; padding:0px ; width:100%; text-align:center; }
.sns_box .cont div span {font-size:12px; color:#b2b1b1;}

.sns_box .icon {width:100%; height:39px; line-height:39px; padding:0 16px;background:#fff;border-bottom:1px solid #dcdcdd;}
.sns_box .icon p {display:inline-block; padding-right:8px; font-size:12px; color:#333; font-weight:400;}
.sns_box .icon p:last-child {padding-right:0}
.sns_box .icon img {width:20px; height:20px;}
.sns_box .icon .left {float:left;}
.sns_box .icon .right {float:right;}

.sns_box .reply {width:100%;  background:#f9f9fa; padding-bottom:12px;}
.sns_box .reply a {display:inline-block; width:100%; height:auto; font-size:12px; color:#b2b1b1; padding: 0 16px 0 0 ; text-align:right;}

.sns_box .reply .reply_cont {position:relative; width:100%; padding:12px 16px 0; text-align:justify; font-size:12px; color:#666;}
.sns_box .reply .reply_cont img {position:absolute; left:16px; top:10px; display:inline-block; margin-right:9px; width:28px; height:28px; border-radius:14px;}

.sns_box .reply .reply_cont p {display:inline-block; line-height:16px; padding-left:38px; }
.sns_box .reply .reply_cont p span {display:inline-block; padding:0 5px 3px 0; color:#111; font-weight:600;}
.sns_box .reply .reply_cont p em {display:inline-block; padding:0 0 3px 0;  color:#b2b1b1; font-weight:500;}
.sns_box .reply_2 {padding-left:40px;}

.sns_box .write {position:relative; width:100%; padding:0 16px; height:40px; background:#fff; border-top:1px solid #f0f0f0;}
.sns_box .write img {display:inline-block; margin-right:5px; width:20px; height:20px;}
.sns_box .write input {line-height:34px; color:#666; font-size:12px;}
.sns_box .write .btn_gray_s {position:absolute; right:0; bottom:0; width:67px; height:40px; background:#8e8e8e;}
.sns_box .write .btn_gray_s a {display:inline-block; width:67px; height:40px; font-size:12px; font-weight:500; line-height:40px; color:#fff;text-align:center; }

.snb_box {width:100%; height:52px; background:#f9f9fa; border-bottom:1px solid #e0e0e0; padding:10px 10px; overflow:hidden;}
.snb_box .sub.on {display:inline-block; margin-right:5px;  border:1px solid #3b8bcc; border-radius:5px; background:#fff; padding:5px 7px;}
.snb_box .sub.on a {font-size:13px; color:#3b8bcc; font-weight:500;}
.snb_box .sub {display:inline-block; margin-right:5px; border:1px solid #cbcbcb; border-radius:5px; background:#fff; padding:5px 7px;}
.snb_box .sub a {font-size:13px; color:#666; font-weight:500;}

.sns_box .sns_bar {margin-top:10px; width:100%; border-top:1px solid #e8e8e8;}
.sns_box .write p:before {content:""; display: inline-block; margin-right:5px; width: 21px; height:21px; color:#3b8bcc; background: url("/images/icon_write.png") no-repeat center / 21px auto; vertical-align:-6px;}
.sns_box .write p {margin:16px 0;}
.sns_box .write textarea {font-family:'Noto Sans KR', sans-serif; text-align:justify; font-size:13px; color:#666; line-height:18px; width:100%; height:250px; font-weight:300; }


/* quiz */
.quiz_box {padding:12px; margin:0; width:100%; font-size:0; color:#333; font-weight:500;}
.quiz_box ul {width:100%; font-size:0;}
.quiz_box ul li {display:inline-block; padding:5px; min-width:50%;}
.quiz_box .quiz {display:inline-block; margin:0; padding:0; width:100%; border:2px solid #cbcbcb; border-radius:5px; padding:5px; font-size:14px;}
.quiz_box .quiz:before {content:""; display: inline-block; margin-right:5px;  width: 21px; height:21px; background: url("/images/btn_knowhow_off.png") no-repeat center / 21px auto; vertical-align: -6px;}
.quiz_box .quiz_check {display:inline-block; margin:0; width:100%; border:2px solid #3b8bcc; border-radius:5px; padding:5px; font-size:14px;}
.quiz_box .quiz_check:before {content:""; display: inline-block; margin-right:5px; width: 21px; height:21px; color:#3b8bcc; background: url("/images/btn_knowhow_on.png") no-repeat center / 21px auto; vertical-align:-6px;}
.hint {width:100%; padding:0 20px 15px 0; text-align:right;}
.hint:before {content:""; display: inline-block; margin-right:5px;  width: 25px; height:26px; background: url("/images/btn_hint.png") no-repeat center / 25px 26px; vertical-align: -12px;}
.hint a {display:inline-block; font-size:16x; color:#3b8bcc; font-weight:600; border-bottom:1px solid #3b8bcc;}

.quiz_wrap > .slide {
		position:relative;
		display:inline-block;
		height:100%;		
		color:#fff;
		font-size:15px;
		line-height:1.5em;
	}

	#quiz_wrap .contents {
		position:absolute;		
		top:0px;
		height:100%;
		display: table;
		padding-left:10px;
	}

	#quiz_wrap .contents div{
		color:#fff;
		font-size:14px;
		line-height:1.5em;
		display: table-cell; 
		vertical-align: middle;	
	}

/*sticker*/
.map_area {position:relative; margin:0 auto; width:360px; height:360px; background: url("/images/img_sticker_bg.png") no-repeat center center / 360px 360px; }

.map_area li p {font-size:12px; font-weight:600; line-height:13px;}
.map_area li p span {display:block; color:#3b8bcc;}

.map_area .level_beginner:before {content:""; position:absolute; display:inline-block; top:289px; left:207px; width:56px; height:56px; background: url("/images/img_level_off.png") no-repeat center / 56px 56px;}
.map_area .level_beginner .on {position:absolute; display:inline-block; top:289px; left:207px;width:56px; height:56px; background: url("/images/img_level_beginner.png") no-repeat center / 56px 56px;}
.map_area .level_beginner p {position:absolute; display:inline-block; top:306px; left:264px;}

.map_area .level_bronze:before {content:""; position:absolute; display:inline-block; top:261px; left:35px; width:56px; height:56px; background: url("/images/img_level_off.png") no-repeat center / 56px 56px;}
.map_area .level_bronze .on {position:absolute; display:inline-block; top:261px; left:35px;width:56px; height:56px; background: url("/images/img_level_bronze.png") no-repeat center / 56px 56px;}
.map_area .level_bronze p {position:absolute; display:inline-block; top:277px; left:92px;}

.map_area .level_silver:before {content:""; position:absolute; display:inline-block; top:205px; left:270px; width:56px; height:56px; background: url("/images/img_level_off.png") no-repeat center / 56px 56px;}
.map_area .level_silver .on {position:absolute; display:inline-block; top:205px; left:270px;width:56px; height:56px; background: url("/images/img_level_silver.png") no-repeat center / 56px 56px;}
.map_area .level_silver p {position:absolute; display:inline-block; top:222px; left:203px; text-align:right;}

.map_area .level_gold:before {content:""; position:absolute; display:inline-block; top:150px; left:87px; width:56px; height:56px; background: url("/images/img_level_off.png") no-repeat center / 56px 56px;}
.map_area .level_gold .on {position:absolute; display:inline-block; top:150px; left:87px;width:56px; height:56px; background: url("/images/img_level_gold.png") no-repeat center / 56px 56px;}
.map_area .level_gold p {position:absolute; display:inline-block; top:166px; left:144px;}

.map_area .level_sticker:before {content:""; position:absolute; display:inline-block; top:94px; left:214px; width:56px; height:56px; background: url("/images/img_sticker_off.png") no-repeat center / 56px 56px;}
.map_area .level_sticker .on {position:absolute; display:inline-block; top:94px; left:214px;width:56px; height:56px; background: url("/images/img_sticker.png") no-repeat center / 56px 56px;}
.map_area .level_sticker p {position:absolute; display:inline-block; top:102px; left:271px;}

.map_area .level_god:before {content:""; position:absolute; display:inline-block; top:68px; left:98px; width:56px; height:56px; background: url("/images/img_level_off.png") no-repeat center / 56px 56px;}
.map_area .level_god .on {position:absolute; display:inline-block; top:68px; left:98px;width:56px; height:56px; background: url("/images/img_level_god.png") no-repeat center / 56px 56px;}
.map_area .level_god p {position:absolute; display:inline-block; top:82px; left:22px; text-align:right;}

.t_ranking {background:#fff; padding:16px; }
.t_ranking p { display:inline-block; padding-bottom:5px; font-size:14px; color:#111; font-weight:600; }
.t_ranking table {width:100%;border-spacing:0; border-collapse:collapse;}
.t_ranking tr {border-bottom:1px solid #f5f5f5; padding:5px 0; font-size:13px; color:#333;}
.t_ranking tr:first-child {border-top:1px solid #d5d5d5;}
.t_ranking tr:last-child {border-bottom:1px solid #d5d5d5; font-size:12px; color:#333;}
.t_ranking th:nth-child(1) {width:10%;}
.t_ranking th:nth-child(2) {width:20%;}
.t_ranking th:nth-child(3) {width:25%;}
.t_ranking th:nth-child(4) {width:45%;}
.t_ranking td {padding:5px 0;}
.t_ranking td img {display:inline-block; margin-right:5px; width:28px; height:28px; border-radius:14px;}
.t_ranking .my_ranking {background:#f6f6f6;}
.t_ranking .my_ranking td {background:#f6f6f6; font-weight:600; color:#3b8bcc;}
.t_ranking .my_ranking td:first-child {width:17px; height:17px; background: url("/images/img_ranking.png") no-repeat center / 17px 17px;}

.s_history {width:100%; background:#fff;}
.s_history table {margin-top:10px; width:100%; border-top:1px solid #e8e8e8; border-spacing:0; border-collapse:collapse;}
.s_history th:first-child {width:60%;}
.s_history th:last-child {width:40%;}
.s_history td {border-bottom:1px solid #f5f5f5;line-height:150%; color:#b2b1b1; font-size:12px; padding:15px 16px}
.s_history td span {display:block; font-size:14px; color:#111;}
.s_history td p {text-align:right; font-weight:600; font-size:15px;}

/* ³ëÇÏ¿ì */
.knowhow {padding:16px; background:#fff;}
.knowhow img {width:100%; height:100%;}
.knowhow p {position:relative; display:block; font-size:18px; color:#111; font-weight:600; padding:25px 0 7px;}
.knowhow p:after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background: #3b8bcc;}
.knowhow > span {display:inline-block; padding:10px 0 0;  color:#111;text-indent: -10px; margin-left: 10px;}
.knowhow table {margin:20px 0 0; width:100%;border-spacing:0; border-collapse:collapse;}
.knowhow tr {border-bottom:1px solid #ddd; padding:5px 0; font-size:13px; color:#333;}
.knowhow th {padding:10px; border-top:1px solid #8e8e8e; font-size:14px; text-align:left; background:#f9f9fa;}
.knowhow td {padding:10px 10px; line-height:20px;}
.knowhow td > span {display:block; color:#3b8bcc; font-weight:600;}
.knowhow em {display:block; padding-top:5px; font-size:12px; text-align:right; color:#b2b1b1;}
.knowhow td > .box {display:inline-block; margin:5px 0 4px; padding:0 2px; background:#c4dcf0; color:#216faf;}
.knowhow > div {display:inline-block; /*width:100%*/}
.knowhow .knowhow_l {display:inline-block; text-align:left; width:60%; font-weight:600;}
.knowhow .knowhow_r {display:inline-block; text-align:right; width:38%;}
.knowhow .knowhow_r em {display:inline-block; color:#ca586b; font-size:15px; font-weight:600; padding-bottom:4px; }
.knowhow .knowhow_body {position:absolute; padding:6% 6%;}
.knowhow .knowhow_body > .title {display:block; font-weight:bold; font-size:20px; line-height:25px;}
.knowhow .knowhow_body > .contents {display:block; font-weight:normal; font-size:13px;margin-top:10px;}

.btn_write {position:fixed; right:10px; bottom:10px; width:65px; height:65px;}
.btn_write img {width:65px; height:65px;}

.buddy {width:100%; background:#fff;}
.buddy img {width:100%; height:100%;}
.buddy p {padding:16px 16px; text-align:justify; line-height:20px;}
.buddy p span {display:block; font-size:18px; color:#111; font-weight:600; padding-bottom:10px;}

/* menu */
.menu_bg {width:240px; height:100%; background:#fff; box-shadow: 0 0 10px #666}
.menu_bg .info_box {width:100%; height:120px; padding:16px; background:#f8f8f8; border-bottom:1px solid #e0e0e0;}
.menu_bg .info_box .btn_x {display:block; float:right;}
.menu_bg .info_box .btn_x img {width:15px; height:15px;}
.menu_bg .info_box .info { padding-top:20px;}
.menu_bg .info_box .info .photo {position:relative; float:left; display:inline-block; width:65px; height:65px;}
.menu_bg .info_box .info .photo img:first-child {width:65px; height:65px; border:1px solid #d1d1d1; border-radius:33px;}
.menu_bg .info_box .info .photo img:last-child {position:absolute; right:-7px; bottom:-7px; width:30px; height:30px;} 
.menu_bg .info_box .info .name {float:left; display:inline-block; padding:17px 22px; font-size:12px; color:#b2b1b1;}
.menu_bg .info_box .info .name span {display:block; font-size:18px; color:#111; font-weight:500;}

.menu_bg ul {clear:both; width:100%; padding:0 16px;}
.menu_bg li { padding:28px 0 0 0 }
.menu_bg li a {display:inline-block; font-size:14px; color:#333; font-weight:500;}
.menu_bg li a img {width:22px; height:22px; margin-right:10px;}

.edit_box {padding:20px 16px 20px; font-size:14px; color:#3b8bcc; background:#f9f9fa;}
.edit_box .input_box {display:block; font-size:14px; color:#666; }
.edit_box .input_box p {padding:20px 0 10px 5px; color:#111; font-weight:500;} 
.edit_box .input_box input[type=text] {display:block; width:100%; height:40px; border:1px solid #e0e0e0; border-radius:5px; padding-left:12px; background:#fff;font-size:12px; color:#666;}
.edit_box .input_box span {display:inline-block; padding:10px 15px 10px 0;}
.edit_box .input_box span img {width:21px; height:21px;}
.edit_box .input_box select { display:inline-block; width:100%; height:40px; border:1px solid #ddd; border-radius:5px;  padding-left:12px; font-size:13px; color:#8e8e8e; text-align:center; background:url(/images/btn_select.png) no-repeat #fff 97% 50% / 15px 9px}

/* FAQ */
.faq {width:100%; background:#fff;}
.faq ul {margin-top:10px; width:100%; border-top:1px solid #e8e8e8;}
.faq li {border-bottom:1px solid #f5f5f5;}
.faq ul .q {padding:23px 16px;}
.faq ul .q a {display:block; font-size:14px; color:#111;}
.faq ul .q a span {color:#3b8bcc; font-weight:600; font-size:15px; vertical-align:0;}
.faq ul .a {display:none; padding:16px; text-align:justify; color:#666; font-size:13px; background:#f9f9fa; border-top:1px solid #f5f5f5;}
.faq ul .a img {display:block; width:100%; padding:16px 0 0}
.faq ul .faq_list .a:target {display:block;}

/* Notices */
.notices {width:100%; background:#fff;}
.notices ul {margin-top:10px; width:100%; border-top:1px solid #e8e8e8;}
.notices li {border-bottom:1px solid #f5f5f5; color:#b2b1b1; font-size:12px; }
.notices ul .q {padding:15px 16px;}
.notices ul .q a {display:block; font-size:14px; color:#111;}
.notices ul .q a span {color:#3b8bcc; font-weight:600; font-size:15px; vertical-align:0;}
.notices ul .a {display:none; padding:16px; text-align:justify; color:#666; font-size:13px; background:#f9f9fa; border-top:1px solid #f5f5f5;}
.notices ul .a img {display:block; width:100%; padding:16px 0 0}
.notices ul .notices_list .a:target {display:block;}

.backup_box {display:inline-block; padding:32px; font-size:13px; color:#333;}
.backup_box span {font-size:20px; color:#3b8bcc; font-weight:500;}
.mnemo_box {padding:16px; border-radius:5px; border:1px solid #e0e0e0;background:#fff; font-size:15px; color:#111; font-weight:500;}
.mnemo_btn {width:100%; padding:16px 0 50px 0; text-align:right;}
.mnemo_btn:before {content:""; display: inline-block; margin-right:5px;  width: 25px; height:26px; background: url("../img/btn_sns.png") no-repeat center / 25px 26px; vertical-align: -12px;}
.mnemo_btn a {display:inline-block; font-size:16x; color:#3b8bcc; font-weight:600; border-bottom:1px solid #3b8bcc;}

.btn_attendance {position:fixed; right:10px; bottom:134px; width:65px; height:65px;}
.btn_attendance img {width:65px; height:65px;}



.bar {width:100%; height:12px; background:#f9f9fa; border-top:1px solid #d5d5d5; border-bottom:1px solid #e8e8e8;}

/* SNS ½Å°í - START */
span.btn_report {position:absolute; display:block; right:10px; top:10px; color:#3B8BCC; text-align:center;}
.sns_box .nick img.ico_report {float: none; display: inline-block; margin: 0px; width: 24px; height: 24px;; border-radius: 0px;}


#warp_report_popup {position:fixed; display:none;bottom:10%; left:5%; width:90%; padding:10px; border:1px solid #444;}
#warp_report_popup span.title{position:relative; font-weight:bold; font-size:16px; margin-bottom:10px;}
input[name=report_type] {-webkit-appearance: auto; appearance: auto;}

#warp_report_popup span.info{position:relative; display:block; font-size:12px; color:#777; text-align: justify;}

#warp_report_popup ul.report_items {margin:10px 5px;}
#warp_report_popup ul.report_items li{line-height:30px; font-size:14px;}

#warp_report_popup div.control_div {width:100%; border-top:1px solid #999; margin-top:10px; padding-top:10px;}
#warp_report_popup div.control_div:after{content:""; display:block; clear:both;}
#warp_report_popup div.control_div ul{float:right;}
#warp_report_popup div.control_div li{float:left; padding:0px 10px; font-weight:normal; font-size:14px;}
#warp_report_popup div.control_div li.report_cancel{}
#warp_report_popup div.control_div li.report_submit{color:#3B8BCC;}
/* SNS ½Å°í - END */


/* GreenMall - START */

/*greenmall*/
.mall {width:100%; background:#fff;}
.mall img {width:100%; height:100%;}
.mall p {padding:16px 16px 0 ; text-align:justify; line-height:20px;}
.mall p span {display:block; font-size:18px; color:#111; font-weight:600; padding-bottom:10px; line-height:23px;}
.mall ul {display:inline-block; padding: 7px 16px 16px; font-size:13px; line-height:22px; color:#8e8e8e;}
.mall li span {display:inline-block; width:100px; color:#111; font-weight:bold; vertical-align:top;font-size:13px; }
.mall li:nth-child(1) a {color:#ca586b; text-decoration:underline;}
.mall li:nth-child(2) {font-weight:600; color:#3b8bcc; line-height:25px; font-size:16px;}
.mall_photo img {width:100%;}

/* order*/
.order_sheet {padding:16px;}
.order_sheet legend { display:block; width:100%; padding:10px; border-top:1px solid #8e8e8e; border-bottom:1px solid #ddd; font-size:14px; text-align:left; background:#f9f9fa; color:#333; font-weight:600;}
.order_sheet table {padding:10px 0 10px 10px; width:100%;}
.order_sheet table th {width:80px; text-align:left; padding:15px 0 5px; color:#111; font-weight:500; vertical-align:top}
.order_sheet table td {padding:3px 0;}
.order_sheet .flex_thumb img {width:90px;}
.order_sheet .flex_thumb ul {display:inline-block; padding:0 0 0 16px; font-weight:600}
.order_sheet .flex_thumb ul li:nth-child(2) {color:#3b8bcc;}
.order_sheet .flex_thumb ul li:nth-child(3) {font-weight:normal;color:#8e8e8e;}
.order_sheet input {display:inline-block; height:40px; border:1px solid #e0e0e0; border-radius:5px; padding-left:12px; background:#fff; font-size:12px; color:#666;}
.order_sheet .flex_2,
.order_sheet .flex_3 {display:flex;justify-content:space-between; line-height:40px;}
.order_sheet .flex_3 select { display:inline-block; width:30%; height:40px; border:1px solid #ddd; border-radius:5px; font-size:13px; color:#8e8e8e; background:url(../img/btn_select.png) no-repeat #fff 90% 50% / 15px 9px; text-indent:12px;}
.order_sheet .flex_2 select { display:inline-block; width:40%; height:40px; border:1px solid #ddd; border-radius:5px; font-size:13px; color:#8e8e8e; background:url(../img/btn_select.png) no-repeat #fff 90% 50% / 15px 9px; text-indent:12px;}

.order_sheet input[type="tel"]
{width:30%; height:40px; border:1px solid #e0e0e0; border-radius:5px; background:#fff; font-size:12px; color:#666; text-indent:0}
.order_sheet input[type="email"]
{width:58%; height:40px; border:1px solid #e0e0e0; border-radius:5px; background:#fff; font-size:12px; color:#666; text-indent:0}
.order_sheet input[type="radio"] + label {display:inline-block; padding:0 26px 0 25px; background:url(../img/btn_check_off.png) no-repeat left; background-size:20px 20px}
.order_sheet input[type="radio"]:checked + label {background-image:url(../img/btn_check_on.png);}
.order_sheet .input_add input ~ input {margin: 7px 0 0 0}
.order_sheet .input_add button {width:67px; height:40px; background:#8e8e8e; border-radius:5px; margin:0 0 0 5px }
.order_sheet .input_add button a {display:inline-block; width:67px; height:40px; font-size:12px; font-weight:500; line-height:40px; color:#fff;text-align:center; }
.order_check {padding:0 22px 16px; box-sizing:border-box;}
.order_check input[type="checkbox"] + label {display:inline-block; border:1px solid #e0e0e0; background:url(../img/btn_order_off.png) no-repeat 10px 5px; background-size:20px 20px; padding:5px 10px 5px 37px; box-sizing:border-box;}
.order_check input[type="checkbox"]:checked + label {background-image:url(../img/btn_order_on.png);border:1px solid #3b8bcc;}
.order_check label {display:block; width:100%;}
.hide {overflow: hidden; display:block; position:absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}

.btn_top {position:fixed; right:10px; bottom:80px; width:35px; height:35px; border-radius:35px; background:#fff; border:1px solid #dcdcdc;}
.btn_top a {display:block; width:35px; height:35px;}
.btn_top a:before {content:""; position: absolute; left: 50%; bottom: 50%; width: 12px; height: 16px; background:url(/html/shop/img/arr_top.png) no-repeat center; transform:translate(-50%,50%)}

/* GreenMall - END */