/*
 +----------------------------------------------------------------------+
 | Copyright (c) STUDYMAX.  co. Ltd
 +----------------------------------------------------------------------+
 | 작업일 : 2018-02-20
 | 파일설명 : 모바일 index 메인 페이지 css
 +----------------------------------------------------------------------+
 | 작업자 : 박소율
 +----------------------------------------------------------------------+
 | 수정이력
 | 20180308 성공기 콘텐츠 업로드 by 박소율
 | 20180417 타이틀 영역 내용 추가 by bsh
 | 20191219 유튜브 영상 섹션 추가 by 김승미 
 | 20200106 유튜브 영상클릭유도 개선 by 김승미 
 | 20200113 메인 영상 변경 by 김승미 
 +----------------------------------------------------------------------+
*/

/* 외주 CSS start */
@charset "utf-8";

.mainArea{background:#eae8e8;}
.mainAvi{width:100%; margin-top:4px; background:#000000;}
.mainAvi .btnYoutube{display: block;}
.mainAvi .playMovie{line-height: 0;}
.mainAvi video{width:100%;cursor:pointer;}
.mainAvi video{background:url('/images/m/main/preload.png') no-repeat 0 0;background-size:100% 100%;}
.mainBanner{padding:4px 0;}
.mainBanner img{width:100%;}

.mainImg img{float:left;width:100%;}
.mainImg .img2 img{width:50%;}
.mainImg:after{content:""; display: block;clear:both;}

.mainLink{background:#fff;}
.mainLink li{position:relative;height:62px;overflow:hidden;border-bottom:1px solid #e2e2e2;}
.mainLink li:after{content:""; display: block;position:absolute;top:50%;right:13px;width:11px;height:17px;margin-top:-8px;background:url('/images/m/main/ico_arr_red.png') no-repeat 0 0;background-size:100% 100%;}
.mainLink li a{display:block;padding-left:62px;padding-right:62px;}
.mainLink li a i{position:absolute;top:0;left:0;display:inline-block;height:62px;width:62px;}
.mainLink li a .ico1{background:url('/images/m/main/ico_mainLink_1.png') no-repeat 0 0;background-size:auto 100%;}
.mainLink li a .ico2{background:url('/images/m/main/ico_mainLink_2.png') no-repeat 0 0;background-size:auto 100%;}
.mainLink li a .txt{display:block;line-height:62px;font-size:16px;color:#333;}

.mainReview{padding-top:20px;}
.mainReview .text{padding:15px 0;text-align:center;background:#383838; vertical-align:middle;}
.mainReview .text strong{display:inline-block;margin-top:1px;font-size:23px;color:#ffff00;vertical-align:middle;font-family:'verdana';}
.mainReview .text span{display:inline-block;margin-top:3px;font-size:17px;color:#fff;vertical-align:middle;}
.mainReview .reviewList{height:320px;overflow:hidden;}
/*.mainReview.studyReview .reviewList ul li.magic .img .txt{text-align:center;}*/
@media all and (max-width:360px){ 
.mainReview .text strong{font-size:21px;}
.mainReview .text span{font-size:15px;}
}

/* 성공체험기 추가 START */
.successSection{margin-top: 18px}
.successSection .successTitle{background-color: #444444; color: #fff; padding:15px 0;text-align:center; font-size:16px;}
.successSection .successTitle strong{font-size:21px;}
.successSection .successTitle .colorYellow{color:#fff100}
/* 성공체험기 Slider */
.successSection{}
.successSection .successSlider{overflow:hidden;padding:15px 0;background-color: #fff8e4;}
.successSection .successSlider ul:after{content:""; display: block;clear:both;}
.successSection .successSlider ul li{position:relative;width:39%; max-width: 199px; min-height:192px; margin-left:12px;border:1px solid #b2b2b2;border-radius:3px;background:#fff; } /* 20180308 높이 값 고정 by 박소율 */
.successSection .successSlider ul li:last-child{margin-right:12px;}
.successSection .successSlider ul li > a{display:block;}
.successSection .successSlider ul li .successImg {border-radius: 3px 3px 0 0; position: absolute; top:0; left: 0; right: 0; height: 60%; overflow: hidden;}
.successSection .successSlider ul li .successImg img{width:100%;}
.successSection .successSlider .successTxtArea{text-align: center; position: absolute; left:0; right: 0; top: 62%; bottom: 0; line-height: 160%;padding-bottom: 3%;}
.successSection .successSlider .successTxt{ color: #333; font-weight: bold; font-size: 13px; margin-top: 5%}
.successSection .successSlider .successTxt span{color: #ef390f}
.successSection .successSlider .successAuth{color: #979797; font-size: 12px; padding-top: 3%;}
/* 성공체험기 Slider END*/
.successMoreArea{}

.successSection .successMoreArea{background:#ffecac;}
.successSection .successMoreArea .cell{height:28px;}
.successSection .successMoreArea .successMoreTxt{display:block;padding:3px 0;padding-left:30px;color:#746437;background:url('/images/m/main/ico_mic.png') no-repeat 13px 2px;background-size:auto 15px;}
.successSection .successMoreArea .successMoreLink{padding-right:13px;text-align:right;}
.successSection .successMoreArea .successMoreLink a{color:#322c18;padding-right:12px;border-bottom:1px solid #92865d;font-weight:bold;background:url('/images/m/main/ico_arr_double.png') no-repeat 100% 40%;background-size:10px 8px;}

/* 성공체험기 추가 END */


.maxProduct{margin-top:18px;margin-bottom:18px;}
.maxProduct .text{padding:12px 0;text-align:center;background:#ec5e35;}
.maxProduct .text span{display:block;font-size:16px;color:#fff;}
.maxProduct .text strong{display:block;font-size:21px;color:#fff;}
.maxProduct .text strong em{color:#fff100;}
.maxProduct .text strong .yellow{color:#fff100;font-size:21px;display:inline-block;vertical-align:baseline;}
.maxProduct .prdList{height:192px;overflow:hidden;padding:15px 0;background:#fff8e4;}
.maxProduct .prdList ul:after{content:""; display: block;clear:both;}
.maxProduct .prdList ul li{position:relative;width:146px;margin-left:12px;border:1px solid #ffb141;border-radius:3px;background:#fff;}
.maxProduct .prdList ul li:last-child{margin-right:12px;}
.maxProduct .prdList ul li > a{display:block;}
.maxProduct .prdList ul li .label{position:absolute;top:-3px;left:-3px;}
.maxProduct .prdList ul li .label img{width:48px;height:48px;}
.maxProduct .prdList ul li .img img{width:100%;}
.maxProduct .prdList ul li .tit{font-size:14px;color:#333;font-weight:bold;text-align:center;}
.maxProduct .prdList ul li .txt{font-size:11px;color:#979797;text-align:center;}
.maxProduct .prdList ul li .account{margin-top:6px;padding:0 8px;}
.maxProduct .prdList ul li .account > span{display:block;line-height:25px;text-align:center;color:#ff4511;font-size:12px;font-family:'verdana';font-weight:bold;text-align:center;border-top:1px dotted #dadada;}/* 20171130 무려퍼널 6차관련 폰트사이즈 수정 14->12px 박소율 */
.maxProduct .morePrd{background:#ffecac;}
.maxProduct .morePrd .cell{height:28px;}
.maxProduct .morePrd .cell .txt{display:block;padding:3px 0;padding-left:35px;color:#746437;background:url('/images/m/main/ico_present.png') no-repeat 13px 2px;background-size:auto 15px;}
.maxProduct .morePrd .cell.link{padding-right:13px;text-align:right;}
.maxProduct .morePrd .cell.link a{color:#322c18;padding-right:12px;border-bottom:1px solid #92865d;font-weight:bold;background:url('/images/m/main/ico_arr_double.png') no-repeat 100% 40%;background-size:10px 8px;}


.appDown{margin-top:15px;padding-bottom:25px;background:#fff;}
.appDown .text{padding:15px 0;text-align:center;}
.appDown .text span{display:block;color:#3f3b37;font-size:16px;}
.appDown .text strong{font-size:23px;color:#3f3b37;}
.appDown .text strong em{color:#ff3f12;}
.appDown .btn{padding:0 35px;}
.appDown .btn button{height:58px;width:100%;padding-left:76px;text-align:left;font-size:20px;line-height:58px;color:#fff;font-weight:bold;border-radius:5px;}
.appDown .btn button.android{border:1px solid #6f8d1d;border-bottom:2px solid #6f8d1d;background:#96c21b url('/images/m/main/ico_adnroid.png') no-repeat 23px 50%;background-size:auto 40px;}
.appDown .btn button.ios{margin-top:15px;border:1px solid #2e80b0;border-bottom:2px solid #2e80b0;background:#5ebdf4 url('/images/m/main/ico_ios.png') no-repeat 23px 50%;background-size:auto 40px;}
@media all and (max-width:360px){ 
.appDown .btn button{padding-left:60px;font-size:18px;background-position:13px 50% !important;}
}

.mainNotice{margin-top:15px;height:62px;overflow:hidden;background:#fff;}
.mainNotice li{height:62px;padding:20px 13px 17px 13px;}
.mainNotice li a{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.mainNotice li a .label{display:inline-block;width:40px;height:20px;line-height:20px;margin-right:5px;font-size:11px;vertical-align:middel;text-align:center;font-weight:bold;border:1px solid #fb5d38;color:#fb5d38;}
.mainNotice li a .txt{line-height:25px;font-size:16px;color:#333;vertical-align:middle;}

.customerCenter{padding:25px 0;background:#fcad02;}
.customerCenter .text {font-size:15px;color:#fff;text-align:center;text-shadow:1px 1px 1px rgba(0,,0,0.0.2)}
.customerCenter .centerInfo {height:78px;width:320px;margin: 0 auto;margin-top:14px;padding:15px 0;padding-left:80px;border-radius:5px;background:#ffffff url('/images/m/main/ico_tel.png') no-repeat 17px 50%;background-size:auto 48px;}
.customerCenter .centerInfo .tel {display:block;font-size:23px;color:#333;}
.customerCenter .centerInfo .tel span {}
.customerCenter .centerInfo .tel .telnum {color:#eb3b08;}
.customerCenter .centerInfo .time {font-size:14px;color:#333;}
@media all and (max-width:360px){ 
.customerCenter .centerInfo {width:300px}
}



/* 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 */
}

.studyReview .reviewList{background:#fff;}
.studyReview .reviewList ul li{position:relative;border-bottom:1px solid #eae8e8;}
.studyReview .reviewList ul li a{display:block;padding:17px;padding-left:98px;}
.studyReview .reviewList ul li .img {position:relative;position:absolute;top:17px;left:20px;width:58px;height:65px;border:1px solid #309d30}
.studyReview .reviewList ul li .img img {width:100%;}
.studyReview .reviewList ul li .img .txt {position:absolute;bottom:0;left:0;height:14px;width:100%;line-height:17px;color:#fff;font-size:9px;text-align:center;padding:0 2px;white-space:nowrap;background:#309d30;}
.studyReview .reviewList ul li .reviewBx {}
.studyReview .reviewList ul li .reviewBx .info {display:block;}
.studyReview .reviewList ul li .reviewBx .info .id {font-size:14px;font-weight:bold;color:#444444;}
.studyReview .reviewList ul li .reviewBx .info .time {position:absolute;top:17px;right:13px;font-size:11px;color:#666666;}
.studyReview .reviewList ul li .reviewBx .review {display:block;height:48px;overflow:hidden;margin-top:5px;font-size:14px;color:#666;line-height:1.2em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; word-wrap:break-word;}
.studyReview .reviewList ul li.magic .img {border:1px solid #309d30}
.studyReview .reviewList ul li.magic .img .txt  {background:#309d30;}
.studyReview .reviewList ul li.western .img {border:1px solid #fcbf03}
.studyReview .reviewList ul li.western .img .txt{background:#fcbf03;}
.studyReview .reviewList ul li.eastern .img {border:1px solid #148fff}
.studyReview .reviewList ul li.eastern .img .txt{background:#148fff;}
.studyReview .reviewList ul li.adventure .img {border:1px solid #da1b1b}
.studyReview .reviewList ul li.adventure .img .txt{background:#da1b1b;}
.studyReview .reviewList .loading{position:fixed;top:50%;left:50%;display:none;height:30px;width:30px;z-index:1000;background:#f1f1f1;background:url('/images/m/layout/loading.gif') no-repeat 0 0;background-size:100% 100%;}


/* 외주 CSS end */


/* 타이틀 */
.titleArea{background: #ffffff;border-top: 2px solid #ec5e35;position: relative;}
.titleArea a{display: contents;}
.titleArea .area{height: 40px;display:table-cell;width:10px;padding: 6px 0 5px;vertical-align:middle;}
.titleArea .titleAreaMoreTxt{display: inline-block;padding-left: 26px;color: #4d4d4d;font-size: 14px;font-weight: bold;min-width: 250px;}
.titleArea .titleAreaMoreTxt.microphone{background: url('/images/m/main/ico_mic.png') no-repeat 8px 1px;background-size: auto 19px;padding: 3px 0 3px 27px;}
.titleArea .titleAreaMoreTxt.present{background: url('/images/m/main/ico_present.png') no-repeat 8px 2px;background-size: auto 14px;padding: 3px 0 3px 27px;}
.titleArea .titleAreaMoreTxt.loud{background: url('/images/m/main/ico_loudspeaker.png') no-repeat 8px 4px;background-size: auto 13px;padding: 3px 0 3px 29px;}
.titleArea .titleAreaMoreTxt.youtube{display: inline-block; background: url('/images/m/main/tit_youtube.png'); background-repeat: no-repeat; background-size: auto 16px; background-position: 5% 0; height: 16px;}
.titleArea .titleAreaMoreLink{padding-right:13px;margin-top: 2px; position: absolute;top: 10px;right: 0px;}
.titleArea .titleAreaMoreLink .more{color: #979797;padding-right:12px;font-weight:bold;background: url('/images/m/main/ico_mainArrow.png') no-repeat 91% 30%;background-size: 6px 8px;}

/* 이벤트 배너 */
.eventBanner .width_100p{width:100%;}

/* 유튜브 영상 섹션 */
.youtubeSection{margin-top: 18px;}
.youtubeSection .youtubeSlider{overflow: hidden; padding: 15px 12px; background-color: #fff8e4;}
.youtubeSlider .boxYoutube{display: flex; justify-content: space-between;}
.youtubeSlider .boxYoutube .liYoutube{width: calc(50% - 6px);}
.youtubeSlider .boxYoutube .liYoutube img{width: 100%;}
.youtubeSlider .boxYoutube .liYoutube .titMovie{overflow: hidden; width: 95%; margin: 10px 2.5%; font-size: 1.15em; line-height: 1.2em; letter-spacing: -0.04em; text-align: left; color: #333333; white-space: normal; word-break: break-all; word-wrap: break-word; -ms-word-wrap: break-word; text-overflow: ellipsis; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

.boxYoutube .liYoutube .tumbBox{position: relative;}
.boxYoutube .liYoutube .tumbLine{position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 4px solid transparent;}
.boxYoutube .liYoutube:first-child .tumbLine{border-color: #e92d1b;}
.boxYoutube .liYoutube:first-child .tumbLine:before{display: block; position: absolute; top: -4px; left: -4px; box-sizing: border-box; padding: 5px; padding-right: 2px; content:'인기영상'; font-family: 'Nanum Barun Gothic','Nanum Gothic', 'Dotum', 'sans-serif'; color: #ffffff; font-size: 10px; line-height: 11px; letter-spacing: -0.05em; background-color: #e92d1b;}
.boxYoutube .liYoutube:first-child .tumbLine:after{display: block; position: absolute; top: -4px; left: 37px; border-top: 21px solid #e92d1b; border-right: 10px solid transparent; content: '';}

/* 유튜브 레이어 팝업 */
.youtubePop .popInner .popup{top: 25%; background-color: transparent;}
.youtubePop .popInner .popup .close{position: fixed; top: 2%; right: calc(5% - 10px);}