/*
+----------------------------------------------------------------------+
| Copyright (c) STUDYMAX.  co. Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-03-04
| 파일설명 : 베트남 스피킹맥스 header CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
| 20241126 PC 예외처리 추가 by 최진영
+----------------------------------------------------------------------+
*/

@charset "utf-8";

/* Header Top - 헤더 */
.header .top {
	display:flex;
	justify-content: space-between;
	align-items: center;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:15.6vw;
	padding:0 5%;
	z-index: 2;
	background:#fff;
}
.header .top .left {
	display:inline-flex;
	align-items: center;
}
.header .top .left .menuBtn,
.header .top .left .menuBtn .line {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.header .top .left .menuBtn {
	position: relative;
	width: 5vw;
	height: 4.1vw;
	margin-right:3%;
}
.header .top .left .menuBtn .line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #000;
	border-radius: 4px;
}
.header .top .left .menuBtn .line.line01 {
	top: 0;
}
.header .top .left .menuBtn .line.line02 {
	top: 1.6vw;
}
.header .top .left .menuBtn .line.line03 {
	bottom: 0;
}
.header .top .left .menuBtn.active .line.line01 {
	-webkit-transform: translateY (1.6vw) rotate (-45deg);
	transform: translateY(1.6vw) rotate(-45deg);
}
.header .top .left .menuBtn.active .line.line02 {
	opacity: 0;
}
.header .top .left .menuBtn.active .line.line03 {
	-webkit-transform: translateY(-1.6vw) rotate(45deg);
	transform: translateY(-1.6vw) rotate(45deg);
}
.header .top .left .logoImg {
	width:40%;
}
.header .top .right .userIconImg {
	width:6vw;
}
.header .top .right .userIdFirstChar {
	display:inline-flex;
	justify-content: center;
	align-items: center;
	width:8vw;
	height:8vw;
	background:#ef4040;
	font-family:'BeVietnamPro-Medium';
	font-size:var(--font-2dep);
	color:#fff;
	border-radius:100%;
}


/* Header bottom - 퀵메뉴 */
.header .bottom {
	position:fixed;
	left:-1000px;
	top:15.6vw;
	width:100%;
	height:calc(100% - 15.6vw);
	padding:0 5%;
	z-index: 2;
	background:#fff;
	transition: all .4s;
}
.header .bottom.active {
	left:0;
}
.header .bottom .depth {
	padding-left:8%;
}
.header .bottom .depth.iconBook {
	background:url('/smciImages/front/layout/icon_book.png') no-repeat 0 0/contain;
}
.header .bottom .depth.iconCoin {
	background:url('/smciImages/front/layout/icon_coin.png') no-repeat 0 0/contain;
}
.header .bottom .depth.new .text {
	position:relative;
}
.header .bottom .depth.new .text:after {
	content:'';
	display:block;
	position:absolute;
	top: -1vw;
    right: -3.5vw;
	width:4vw;
	height:4vw;
	background:url('/smciImages/front/layout/icon_new.png') no-repeat 0 0/contain;
}
.header .bottom .depth.d1 {
	margin:8% 0;
}
.header .bottom .depth.d1 .text {
	font-size:var(--font-2dep);
	font-family:'BeVietnamPro-Bold';
}
.header .bottom .depth.d2 {
	margin:5% 0;
}
.header .bottom .depth.d2 .text {
	font-size:var(--font-4dep);
	font-family:'BeVietnamPro-Regular';
	color:#666;
}


/* PC 해상도 대응 */
@media screen and (min-width:640px) {

	.pcLayout .pcException {display:none;}
	
	.pcLayout .header .top {width:640px; height:100px; left:50%; transform:translateX(-50%); padding:0 2%;}
	.pcLayout .header .top .left .menuBtn {width:30px; height:24px;}
	.pcLayout .header .top .left .menuBtn .line.line02 {top: 10px;}
	.pcLayout .header .top .left .menuBtn.active .line.line01 {-webkit-transform: translateY(10px) rotate(-45deg); transform: translateY(10px) rotate(-45deg);}
	.pcLayout .header .top .left .menuBtn.active .line.line03 {-webkit-transform: translateY(-10px) rotate(45deg); transform: translateY(-10px) rotate(45deg);}
	.pcLayout .header .top .left .logoImg {width:60%;}
	.pcLayout .header .top .right .userIconImg {width:36px;}
	.pcLayout .header .top .right .userIdFirstChar {width:40px; height:40px; cursor:default;}

	.pcLayout .header .bottom {top:100px; left:50%; transform: translateX(-50%); width:640px; height:calc(100% - 100px); opacity:0; visibility: hidden;}
	.pcLayout .header .bottom.active {opacity:1; visibility: visible;}
	.pcLayout .header .bottom .depth.new .text:after {top:-7px; right:-15px; width:20px; height:20px;}

}