/*
+----------------------------------------------------------------------+
| Copyright (c) STUDYMAX.  co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2017-12-29
| 파일설명 : 학습하기 common CSS 
+----------------------------------------------------------------------+
| 작업자 : 박소율
+----------------------------------------------------------------------+
| 수정이력
| 20180226 사이트 BG변경 by 박소율
| 20180621 사이트 BG변경 by 박소율
| 20181015 리뉴얼 관련내용 추가 by 박소율
| 20181122 홈버튼 추가 by 우현진 
| 20200424 학습프로그램 설치 팝업 공통 사용 by 우현진 
| 20200428 노트북화면용 설치팝업 팝업 크기 조절 by 우현진
| 20201203 두근톡 분기 추가 by 최진영
| 20210104 사이트 GNB 개선 by 최진영
| 20211013 3초해영 영향도 처리 by 최진영
| 20231024 gnbRoundNewArea css 가로, 세로 중앙 정렬 by 박현준
| 20250522 GNB 서브메뉴 수정 by 최진영
+----------------------------------------------------------------------+
*/
/*body{background-image:url('/smciImages/front/layout/bg_wrap_3.png');} /* 20180226 BG이미지 변경,20180621 BG이미지 관리 통일 작업 by 박소율 */ 
#startHeader {height:43px; margin-bottom:10px; background:url('/images/start/new/free_gnb_back.png') repeat-x center top;}
#startHeader .startHeaderArea {position:relative; width:980px; margin:0 auto;}
#startHeader .startHeaderArea .logoImg{position:relative;z-index:99;}
#startHeader .startHeaderArea img {vertical-align:top;}
#startHeader .startHeaderArea h1 {width:100px;padding:0 0 0 0px; background:none;}

#startHeader .startHeaderArea2 {position:relative; width:995px; margin:0 auto;}
#startHeader .startHeaderArea2 img {vertical-align:top;}
#startHeader .startHeaderArea2 h1 {padding:5px 0 0 20px; background:none;}

#startHeader #startGnb {position:absolute; top:13px; left:360px;}
#startHeader #startGnb li {float:left; margin-right:14px; padding-right:16px; background:url('/images/start/new/f_gnb_bar.png') no-repeat right center;}
#startHeader #startGnb li.last {background:none;padding-right:0px;!important;}
#startHeader li img {vertical-align:middle !important;}
.black {  color:#444; font-size:11px; padding-left:2px; display:inline-block; padding-bottom:2px}
.red {  color:#db2115; font-size:11px; padding-left:2px; display:inline-block; padding-bottom:2px }

.startContents {width:990px; padding-bottom:8px; margin:0 auto; position:relative;background-color: #fff; border-radius: 25px 25px 0 0; min-height: 500px;}




/*프론트 레이어팝업에 사용되는 공통 CSS*/
.frontComLayerPop{position:fixed;top:12%;left:50%;z-index:200;}
.frontComLayerPop .comLayerContent {position:absolute; top:0; left:0;!important;}
.frontComLayerPop .comLayerContent .bgLayerWrap {width:auto; height:auto;!important;}
.frontComLayerPop .comLayerContent .layerWrapTop{position:absolute;top:51px;left:21px;text-align:left;}

.frontComLayerPop .comLayerContent .layerTit {position: absolute;top: 19px;left: 20px;z-index:25;}
.frontComLayerPop .comLayerDarkWindow {display: block;position: fixed;border: 0;left: 0;top: 0;_position: absolute;width: 100%;height: 100%;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity: .5;background-color: #000;height: expression(document.body.clientHeight);}
.frontComLayerPop .bgLayerWrap .close {position: absolute;top: 13px;right: 19px;}

/*프론트 레이어팝업에 사용되는 공통 CSS */
.frontComLayerPop .comLayerContent.basicStartPackage { margin-left:-310px;width:625px; height:652px; background:url('/images/layer/trialStudyPopTit_back.png') 0 0 no-repeat;!important;}
.frontComLayerPop .comLayerContent.globalPackage { margin-left:-310px;width:625px; height:652px; background:url('/images/layer/trialStudyPopTit_back.png') 0 0 no-repeat;!important;}
.frontComLayerPop .comLayerContent.busiPackage {margin-left:-310px;width:625px; height:652px; background:url('/images/layer/trialStudyPopTit_back.png') 0 0 no-repeat;!important;}

.frontComLayerPop .comLayerContent .nameTitleArea{position:absolute;top:51px;right:27px;}
.frontComLayerPop .comLayerContent.globalPackage .nameTitleArea{position:absolute;top:53px;right:255px;}
.frontComLayerPop .comLayerContent .nameTitleAreaUl li{float:left;}
.frontComLayerPop .nameTitleSpan{font-size:19px;color:#d97b30;font-weight:bold;font-family:Nanum Gothic,'나눔고딕',Dotum,'돋움';display:inline-block;margin-left:4px;margin-right:2px;border-bottom:1px solid #d97b30;padding-bottom:4px;}
.frontComLayerPop .packRemainNum{position:absolute;top:435px;right:68px;font-size:22px;color:#ffee2c;font-weight:bold;font-family:'tahoma','Dotum','돋움';}

.invisible1dayBtnWrap {position: absolute;top: 560px;left: 14px;}
.frontComLayerPop .invisible1dayBtn {display: inline;margin-right: 6px;cursor: pointer;}
.frontComLayerPop .invisible1dayBtnColor_black {color: #000;}
.frontComLayerPop .invisible1daySallXBtn{margin-top:1px;} 

/* 오늘의 학습 후기 레이어팝업 */
.frontComLayerPop .comLayerContent.todayStudyPage { margin-left:-250px;}
.frontComLayerPop .comLayerContent.todayStudyPage .layerWrapTop{position:absolute;top:110px;left:21px;text-align:left;}


/*==================== Renew ====================*/

/*siteBox*/
.homeBtn{position: absolute;top: 9px;left: 50%; text-align: center;margin-left: -550px; z-index: 9; }
.homeBtn.fixed {position: absolute;} /* 고정 */

/*siteBox_Sgnb*/
.frSelectGnbWrap .topMenuSiteMap{display: none; position: fixed; background-color: #fff; z-index: 10; width: 1100px; left: 50%; margin-left: -550px; top:71px; transition: top 0.1s ease-out; -webkit-transition: top 0.1s ease-out;}
.frSelectGnbWrap .topMenuSiteMapIn{padding: 38px 58px 10px;}
.frSelectGnbWrap .topMenuSiteMapIn > ul{font-size: 0;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li{display: inline-block; width: 181px;margin-bottom: 20px;margin-left: 80px;vertical-align: top;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li.mgLeft_0{margin-left: 0;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li dt{font-size:21px;color: #333;border-bottom: 2px solid #333;padding-bottom: 10px;margin-bottom: 15px;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li.dtRed > dl> dt{color:#db052f; border-bottom-color: #db052f;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li > dl > dd > a{display: inline-block; font-size:15px; font-family: NotoSansKR-DemiLight,'Malgun Gothic', dotum, sans-serif; color: #333;padding-bottom: 8px;}
.frSelectGnbWrap .topMenuSiteMapIn > ul > li > dl > dd > ul > li {margin-bottom: 5px; margin-left: 5px;} 
.frSelectGnbWrap .topMenuSiteMapIn > ul > li > dl > dd > ul > li > a{font-size: 14px; color: #7d7d7d;} 
.frSelectGnbWrap .topMenuSiteMapIn .sGnbClose{position: absolute; right: 12px; bottom: 12px;} 
.frSelectGnbWrap .topMenuSiteMapIn .sGnbClose a{display: inline-block; width: 34px; height: 34px; text-align: center; vertical-align: middle; border: 1px solid #8C8C8C; background: #fff url('/smciImages/front/layout/sGnb_close.png') center no-repeat;} 
.frSelectGnbWrap .topMenuSiteMapIn .sGnbClose a:hover{background: #333 url('/smciImages/front/layout/sGnb_close_on.png') center no-repeat;} 


/* gnb —­ */
.frSelectGnbWrap{position:fixed; top:0; left:0; width:100%; height:54px; z-index:10;}
.frSelectGnbWrap .homeBtn {position:fixed; z-index:11;}
.frSelectGnbArea{ height:54px; background-color:#fff; border-bottom: 1px solid #c2c4cc}
.frSelectGnbArea ul.clearfix{width:1100px; height:100%; margin:0px auto;}
.frSelectGnbArea ul.clearfix > li{float:left; width:132px; height:100%; text-align:center; position:relative;}
.frSelectGnbArea ul.clearfix > li.firstGnb{margin-left: 44px;}
.frSelectGnbArea ul.clearfix > li:after{content:'';position: absolute; left: 0; top: 19px; width: 1px; height: 16px; background-color :#e1e1e9}

.frSelectGnbArea ul.clearfix > li:first-child:after{display :none}
.frSelectGnbArea ul.clearfix > li > a{display:inline-block; font-size:18px; line-height:54px; color:#000; letter-spacing:-0.2px; position:relative; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s;}
.frSelectGnbArea ul.clearfix > li > a:before{position:absolute; content:""; bottom:-1px; left:50%; width:0; height:4px; background-color:#e80f1e;
	-webkit-transition:all 0.2s; -moz-transition:all 0.2s; -o-transition:all 0.2s; -ms-transition:all 0.2s; transition:all 0.2s;
}
.frSelectGnbArea ul.clearfix > li > a:hover:before,
.frSelectGnbArea ul.clearfix > li.on > a:before,
.frSelectGnbArea ul.clearfix > li.gnbStudy a:before{width:100%; margin-left:-50%; }
.frSelectGnbArea .cartIcon{display: inline-block;margin-top: 18px;margin-right: 5px;}
.frSelectGnbArea .gnbSubGnb{display:none; position:absolute;top:55px;left:0;width:100%; height: 235px;z-index:99;overflow:hidden; background:#fff; border-bottom:1px solid #A8A8AA;}
.frSelectGnbArea #gnbSubNav.test{left:-9999px;}
.frSelectGnbArea .gnbSubGnb .subMenu{width:1100px;height: 100%;margin: 0 auto;}
.frSelectGnbArea .gnbSubGnb .subMenu:after{content:''; display: block; clear: both; }
.frSelectGnbArea .gnbSubGnb .subMenu ul{padding-top:25px; float: left;width: 132px;}
.frSelectGnbArea .gnbSubGnb .subMenu ul:first-child {padding-left:44px;}
.frSelectGnbArea .gnbSubGnb li{text-align:center; margin-bottom:10px;}
.frSelectGnbArea .gnbSubGnb li:last-child{margin-bottom:0;}
.frSelectGnbArea .gnbSubGnb li a{font-size:15px; line-height:28px; color:#212121; position:relative; font-family: NotoSansKR-Regular,'Malgun Gothic', dotum, sans-serif;}
.frSelectGnbArea .gnbSubGnb li a span{display:inline-block; line-height:normal;}
.frSelectGnbArea .gnbSubGnb li:hover > a,
.frSelectGnbArea .gnbSubGnb li:focus > a{ color:#e80f1e; }

/*   contents Start  */
#wrap{background-color:#f7f6fa; padding-top:55px;}
.selectContents {width:1100px; margin:0 auto; position:relative;min-height: 500px; background-color: #fff}

/*프로그램 설치 팝업*/
.layerPopfileDown{position:fixed;top:42px; left:50%; width:890px; height:850px; margin-left:-445px; z-index:101;}
.layerPopfileDown.scrollAdd{max-height: 600px; overflow-y:scroll; overflow-x:hidden;}

/* 헤더 (검은 반투명) */
.frSelectGnbWrap.black {position:fixed; top:0; left:0; width:100%; height:54px; z-index:10; padding-left:0;}
.frSelectGnbWrap.black .homeBtn {top:18px;}
.frSelectGnbWrap.black .frSelectGnbArea {background:rgba(0,0,0,0.5); border-bottom-color:#312f30;}
.frSelectGnbWrap.black .frSelectGnbArea ul.clearfix > li {width:132px;}
.frSelectGnbWrap.black .frSelectGnbArea ul.clearfix > li > a {color:#fff;}
.frSelectGnbWrap.black .frSelectGnbArea ul.clearfix > li:after {background:none;}
.frSelectGnbWrap.black .frSelectGnbArea .gnbSubGnb {background:rgba(0,0,0,0.5); border-bottom-color:#312f30;}
.frSelectGnbWrap.black .frSelectGnbArea .gnbSubGnb li a {color:#fff;}
.frSelectGnbWrap.black .frSelectGnbArea .gnbSubGnb li:hover > a,
.frSelectGnbWrap.black .frSelectGnbArea .gnbSubGnb li:focus > a {color:#E80F1E; font-family:'NotoSansKR-Bold';}
.gnbRoundNewArea{
	right: -15px;
	top: 30%;
	margin-top: -6px;
	z-index: 1;
	background-color: #F81F2E;
	width: 14px;
	height: 14px;
	-webkit-border-radius: 130px;
	-moz-border-radius: 130px;
	border-radius: 130px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.gnbRoundNew{
	display: inline-block;
	color: #fff;
	font-size: 8px;
	font-family: NotoSansKR-DemiLight,'Malgun Gothic', dotum, sans-serif;
}