/*
 +----------------------------------------------------------------------+
 | Copyright (c) STUDYMAX.  co. Ltd
 +----------------------------------------------------------------------+
 | 작업일 : 2017-08-29
 | 파일설명 : 모바일 공통 컨텐츠  CSS
 +----------------------------------------------------------------------+
 | 퍼블리셔 : 박소율 
 +----------------------------------------------------------------------+
 | 수정이력
 | 20170925 공통 하딴 띠배너 내용 추가 by bsh
 | 20171102 [ .commonbottomBanner ] 무료퍼널 3차 개발 관련 공통 하단 띠배너 수정 by 박소율
 | 20180725 공통 마스크 생성 by 박소율
 | 20190215 [ .commonbottomBanner ] 공통 하단 띠배너 수정 by 박소율
 | 20190227 [ .commonbottomBanner ] 공통 하단 띠배너 수정 by 우현진
 | 20190329 [.commonbottomBanner .bgBack] 수정 by 박소율
 | 20190617 타임보드 띠배너 생성 by 박소율
 | 20190709 모바일 랜딩페이지 레이아웃 개선 by 권용찬
 +----------------------------------------------------------------------+
*/
@charset "utf-8";

/* level */
i.level{display:inline-block;width:28px;height:16px;line-height:16px;letter-spacing:-0.05em;text-align:center;border-radius:2px;color:#fff;font-size:9px;}
i.level.red{border:1px solid #ba462e;
	background: rgb(218,81,53); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(218,81,53,1) 0%, rgba(202,55,37,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(218,81,53,1) 0%,rgba(202,55,37,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(218,81,53,1) 0%,rgba(202,55,37,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#da5135', endColorstr='#ca3725',GradientType=0 ); /* IE6-9 */
}
i.level.yellow{border:1px solid #ce9a00;
	background: rgb(242,180,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(242,180,0,1) 1%, rgba(236,146,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(242,180,0,1) 1%,rgba(236,146,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(242,180,0,1) 1%,rgba(236,146,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2b400', endColorstr='#ec9200',GradientType=0 ); /* IE6-9 */
}
i.level.sky{border:1px solid #00a2ce;
	background: rgb(0,189,242); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(0,189,242,1) 1%, rgba(0,159,236,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,189,242,1) 1%,rgba(0,159,236,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,189,242,1) 1%,rgba(0,159,236,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bdf2', endColorstr='#009fec',GradientType=0 ); /* IE6-9 */
}


i.level.orange{border:1px solid #ce4b00;
	background: rgb(242,87,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(242,87,0,1) 1%, rgba(236,61,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(242,87,0,1) 1%,rgba(236,61,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(242,87,0,1) 1%,rgba(236,61,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25700', endColorstr='#ec3d00',GradientType=0 ); /* IE6-9 */
}

i.level.lightGreen{border:1px solid #4cb037;
	background: rgb(76,176,55); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(76,176,55,1) 1%, rgba(61,185,45,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(76,176,55,1) 1%,rgba(61,185,45,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(76,176,55,1) 1%,rgba(61,185,45,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cb037', endColorstr='#3db92d',GradientType=0 ); /* IE6-9 */
}

i.level.green{border:1px solid #20813c;
	background: rgb(38,150,69); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(38,150,69,1) 1%, rgba(27,104,48,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(38,150,69,1) 1%,rgba(27,104,48,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(38,150,69,1) 1%,rgba(27,104,48,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#259444', endColorstr='#1b6830',GradientType=0 ); /* IE6-9 */
}

i.level.lightSky{border:1px solid #4db7b8;
	background: rgb(88,213,214); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(88,213,214,1) 1%, rgba(62,195,198,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(88,213,214,1) 1%,rgba(62,195,198,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(88,213,214,1) 1%,rgba(62,195,198,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#58d5d6', endColorstr='#3ec3c6',GradientType=0 ); /* IE6-9 */
}

i.level.deepBlue{border:1px solid #477dbf;
	background: rgb(82,143,223); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(82,143,223,1) 1%, rgba(58,101,209,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(82,143,223,1) 1%,rgba(58,101,209,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(82,143,223,1) 1%,rgba(58,101,209,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#528fdf', endColorstr='#3a65d1',GradientType=0 ); /* IE6-9 */
}

i.level.navy{border:1px solid #6547bf;
	background: rgb(118,83,223); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(118,83,223,1) 1%, rgba(84,59,210,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(118,83,223,1) 1%,rgba(84,59,210,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(118,83,223,1) 1%,rgba(84,59,210,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7653df', endColorstr='#543bd2',GradientType=0 ); /* IE6-9 */
}

i.level.purple{border:1px solid #9c51c1;
	background: rgb(182,94,226); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(182,94,226,1) 1%, rgba(150,65,214,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(182,94,226,1) 1%,rgba(150,65,214,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(182,94,226,1) 1%,rgba(150,65,214,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b65ee2', endColorstr='#9641d6',GradientType=0 ); /* IE6-9 */
}


/* 프로필 개선 추가 START by 박소율 */
i.level.bgGreen{border:1px solid #49ad39;
	background: rgb(93,208,68); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(93,208,68,1) 0%, rgba(71,194,52,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(93,208,68,1) 0%,rgba(71,194,52,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(93,208,68,1) 0%,rgba(71,194,52,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#51c93c', endColorstr='#47c234',GradientType=0 ); /* IE6-9 */
}

i.level.bgYellow{border:1px solid #d2940e;
	background: rgb(242,183,0); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(242,183,0,1) 0%, rgba(238,160,0,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(242,183,0,1) 0%,rgba(238,160,0,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(242,183,0,1) 0%,rgba(238,160,0,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0aa00', endColorstr='#eea000',GradientType=0 ); /* IE6-9 */
}

i.level.bgOrange{border:1px solid #ce4b00;
	background: rgb(251,106,30); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(252,122,34,1) 0%, rgba(250,92,26,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(252,122,34,1) 0%,rgba(250,92,26,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(252,122,34,1) 0%,rgba(250,92,26,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc7a22', endColorstr='#eea000',GradientType=0 ); /* IE6-9 */
}

i.level.bgRed{border:1px solid #b13921;
	background: rgb(213,73,48); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(219,83,55,1) 0%, rgba(207,63,41,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(219,83,55,1) 0%,rgba(207,63,41,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(219,83,55,1) 0%,rgba(207,63,41,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db5337', endColorstr='#cf3f29',GradientType=0 ); /* IE6-9 */
}

i.level.bgMaster {
	background: url("/images/m/member/lv_M.png") no-repeat;
	background-size: 100%;
	width: 48px;color: #3d3d3d;font-family: verdana;font-weight: bold;padding-left: 12px;text-align: center;height: 21px;line-height: 23px;
}
/* 프로필 개선 추가 END by 박소율 */


/* 공통 하단 띠배너 */
.commonbottomBanner{position: fixed;bottom: 0; width: 100%;z-index:100;}
.commonbottomBanner .bgBack{position: absolute;bottom:0;left: 0;margin: 0 auto;display: inline-block;width: 100%;height: 82%;background-color: #7edf4e;background: url("/images/m/layout/comBottomBanner_3_BG.png") top left repeat-x;background-size: contain;} /* 20190329 bg이미지 변경 by 박소율 */
.commonbottomBanner .commonBottomBannerImg{width: 100%;height: 100%; max-width:640px; margin:0 auto;position:relative;}
.commonbottomBanner .commonBottomBannerImg img{width: 100%;}

@media only screen and (max-width : 320px) {
.commonbottomBanner .commonBottomBannerImg{width: 310px;}
.commonbottomBanner .commonBottomBannerImg img{width:310px;top:0;}
}

/* 타임보드 띠배너 개선 */

.mainBottomArea{position:fixed; z-index:99; bottom:0; width:100%; text-align:center;max-height:144px; background-color:#81e051}
.mainBottomArea.landingBg{background-color:#5c6ce6}


.mainBottomArea .mainBottomBody{position:relative;width:100%;height: 62px;}
.bannerSize{width:95%; position: relative; top:-19px;} /* 20190709 모바일 랜딩페이지 레이아웃 개선 porition 속성 제거 by 권용찬 */
.landingBg .bannerSize{top: -12px;}

@media only screen and (min-width : 320px) {
	.mainBottomArea .mainBottomBody {height: 52px;}
	.landingBg .bannerSize{ top: -10px;}
}
@media only screen and (min-width : 360px) {
	.mainBottomArea .mainBottomBody {height: 62px;}
}
@media only screen and (min-width : 400px) {
	.mainBottomArea .mainBottomBody {height: 68px;}
}


/* 20180724  레이어 팝업창 생성이 깔리는 불투명 BG 추가 by 박소율 */
.layerMaskBackground{position: fixed; left: 0; top: 0; bottom: 0; right :0; z-index:99; display: none; overflow: hidden;}
.layerMaskBackground.on{ background-color: rgba(0,0,0,0.5);display: block;}