@import url("font.css");
@import url("default.css");

* {font-family:"NotoSansKR",sans-serif; font-size:18px;}
/* 전체적 링크 */
/* a:link {color: #000000;text-decoration: none;}
a:visited {color: #000000; text-decoration: none;}
a:hover {color: #000000; text-decoration: none;}
a:active {color: #000000; text-decoration: none;} */
body {margin:0;padding:0; background-color:#fff; color:#111;}

h2 {font-size:1.8rem; color:#444;}
h2 span {font-size:1.8rem; color:#444;}

/* Intro 2026 Styles */
/* 상단 띠배너 */
#TopLinrBanner {padding:22px 0; background-color:#21212d; color:#d8d9db;}
#TopLinrBanner ul {display:flex; width:100%; justify-content:center; gap:60px; position:relative;}
#TopLinrBanner ul::after {
	content: "";
	position: absolute;
	top: calc(50% - 0.5rem);
	left: calc(50% - -140px);
	width: 1px;
	height: 1rem;
	background-color: #fff;
	pointer-events: none;
}
#TopLinrBanner ul li {display:flex; cursor:pointer;}
#TopLinrBanner ul li span {font-size:0.9rem; display:flex; align-items:center;}
#TopLinrBanner ul li i {color:#fff; margin-left:5px; font-size:1.4rem; vertical-align:bottom;}
#TopLinrBanner ul li a {
	font-size:0.9rem;
	color:#81828c;
	text-decoration:none;
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
	display:block;
	overflow:hidden;
}
/* navigation 메뉴 */
#Navigation {border-bottom:1px solid #ececec; display:flex; justify-content:center;}
#Navigation ul {display:flex; width:33.33%;}
#LoginHome {margin-top:21px; justify-content: flex-start;}
#LoginHome img {height:40px;}
#Gnb {
	width:540px !important;
	justify-content:center;
	position:relative;
}
#Gnb li {position:relative; width:100%; text-align:center;}
#Gnb li a {
	text-decoration:none;
	font-weight:500;
	font-size:1rem;
	color:#111;
	padding:26px 0;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#Gnb li a:hover {color:#f00;}
#Gnb li a::before {
	content:'';
	display:inline-block;
	height:3px;
	position:absolute;
	bottom:1px;
	left:0;
	right:100%;
	background-color:#f00;
	-webkit-transition-property:right;
	transition-property:right;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:ease-out;
	transition-timing-function:ease-out;
	border-radius:5px;
}
#Gnb li:hover a::before {right:0;}

#MobileGnbWrap {display:none !important;}
#MobileGnb {
	width:540px !important;
	justify-content:center;
	position:relative;
}
#MobileGnb li {position:relative; width:100%; text-align:center; padding:26px 0;}
#Gnb li a {
	text-decoration:none;
	font-weight:500;
	font-size:1rem;
	color:#111;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#MobileGnb li a:hover {color:#f00;}
#MobileGnb li a::before {
	content:'';
	display:inline-block;
	height:3px;
	position:absolute;
	bottom:1px;
	left:0;
	right:100%;
	background-color:#f00;
	-webkit-transition-property:right;
	transition-property:right;
	-webkit-transition-duration:0.2s;
	transition-duration:0.2s;
	-webkit-transition-timing-function:ease-out;
	transition-timing-function:ease-out;
	border-radius:5px;
}
#MobileGnb li:hover a::before {right:0;}

#SubGnb {justify-content:flex-end; gap:10px;}
#SubGnb li {width:110px; text-align:center;}
#SubGnb li a {
	border: 1px solid #e4e4e6;
	border-radius: 12px;
	padding: 12px 0;
	margin-top: 15px;
	font-size: 0.9rem;
	font-weight: 500;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
#SubGnb li a:hover {color:#fff; background-color:#ff5f5f;}
#JoinBtn {background-color:#cc191c; color:#fff;}


/* 비디오 텍스트 롤링 { */
#mVideo {width:100%;}
/* #VideoScreenList {}
#VideoScreenList ul {position:absolute; width:100%;} */


#VideoScreen {width:1300px; margin:64px auto; position:relative; height:530px; border-radius:45px; overflow:hidden;}
#VodTitle {position:absolute; top:34px; left:40px; color:var(--white); margin-bottom:32px; z-index:1;}
#VodTitle > h2 {color:#fff; font-size:1.2rem; font-weight:700; margin:0; text-align:left;}
#VodTitle > p {
	font-size:0.7rem;
	margin-top:8px;
	font-weight:300;
	text-align:left;
}
#VideoScreenList {width:50%; margin:auto; position:relative; top:-530px;}
.vsSection {position:absolute; width:100%; z-index:1;}
.vsSection li {color:var(--white); padding:110px 0 62px; margin:auto; font-family:'Gmarket', sans-serif; opacity:0.3;}
.vsSection li:nth-of-type(1) {opacity:1;}
/* #MyQuestionsList ul li:nth-of-type(2) {font-weight:600; font-size:1.2rem;} */
.vsSection li p {
	font-family:'Gmarket', sans-serif;
	padding:3.2px 0 0;
	text-align:center;
	font-size:1.3rem;
	-moz-transition:all 500ms linear;
	-o-transition:all 500ms linear;
	-webkit-transition:all 500ms linear;
	transition:all 500ms linear;
}
.vsSection li p.mqSubject {font-weight:600; font-size:1.5rem; color:#e9f9ff;}
.vsSection li p.mqUser {font-size:0.9rem; font-weight:300; margin-top:16px;}
#ScreenBG {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	border-radius:45px;
	background: radial-gradient(
		ellipse at center, transparent 10%, rgb(0 21 67 / 80%) 80%, rgb(0 22 71 / 98%) 100%
	);
}
/* } 비디오 텍스트 롤링 */

/* 검색 결과 스타일 { */
#SearchBar {
	position: absolute;
	bottom: calc(50% - 100px);
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	width: 50%;
	border-radius: 50px;
	/* overflow: hidden; */
	padding: 6.5px 50px;
	z-index: 1;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#SearchBar::before {
	content: "\f002";
	font-family: "Font Awesome 6 Pro";
	color: #5a52ba;
	position: absolute;
	top: calc(50% - 8px);
	left: 24px;
}
#SearchBar input {border-bottom:none; width:calc(100% - 70px);}
/* #SearchBar input::placeholder {font-size:0.8rem; vertical-align: middle;} */
#SearchBtn {
	width:27px;
	position:absolute;
	top:16px;
	right:20px;
	font-size: 0.8rem;
	background-color: #5853b9;
	color: #fff;
	padding: 5px 20px;
	border-radius: 25px;
	text-align:center;
}

#SearchResults {
	display: none;
	position: absolute;
	background-color: #fff;
	width: calc(100% - 40px);
	left: 0;
	z-index: 1;
	padding: 20px;
	border-radius: 25px;
	top: 68px;
}
#SearchResults ul {overflow: auto; height: 310px;}
#SearchResults li {overflow: hidden; padding:5px 0;}
#SearchResults li a {}
#SearchResults li a span.highlight {color:#f00;}
/* } 검색 결과 스타일 */


/* 스타교수 무료기획 0원 강좌 { */
#LineBanner {margin:0 auto;
	background: linear-gradient(
		to bottom, 
		transparent 50%, 
		rgba(249,249,249)
	);
	padding-bottom:74px;
	border-bottom:1px solid #eee;
}
#LineBanner h2 {margin-bottom:25px;}
#LineBanner h2 span {color:var(--red);}

#LineImg {width:1300px; margin:0 auto; position:relative; overflow:hidden;}
#LineImg ul {width:200%; overflow:hidden; display:flex; position:relative; margin:0;}
#LineImg ul li {width:50%; box-sizing:border-box; text-transform:uppercase; float:left; list-style:none;}
#LineImg ul li a {width:100%; height:250px;}
#LineImg ul li a img {}
/* } 스타교수 무료기획 0원 강좌 */

/* 전공별 모아보기 { */
#Specialty {margin:37px 0 50px;}
#Specialty ul {display:flex; flex-wrap:wrap; gap:4.5rem; justify-content:center;}
#Specialty ul li {position:relative;}
#Specialty ul li::after {
	content: "";
	position: absolute;
	bottom: -10px;
	top: 10px;
	left: calc(100% - -2.5rem);
	width: 1px;
	height: 10px;
	background-color: #ccc;
}
#Specialty ul li:last-child::after {content: none;}
#Specialty ul li a {
	-moz-transition:all 200ms linear;
	-o-transition:all 200ms linear;
	-webkit-transition:all 200ms linear;
	transition:all 200ms linear;
}
#Specialty ul li a:hover {
	color:#f00;
}
/* } 전공별 모아보기 */

/* 고객센터 & 이슈과정 & 직종리스트 { */
#CsInfoIssue {background-color:#f1f2f6; padding:75px 0 53px; display:flex; justify-content:center; gap:24px;}
#CsInfoBox {display:flex; justify-content:center; gap:30px; color:#49445a; background-color:#fff; border-radius:25px; padding:28px 38px; width:564px; position:relative;}
#CsInfoBox::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 70%;
	background-color: #ebebeb;
	right: calc(50% - -15px);
	top: 15%;
}
#CsInfoBox > div {}
#CsBox {}
#CsBox p {font-family:'Gmarket', sans-serif; padding:5px 0;}
#CsBox span {font-size:0.8rem;}
#CsBox span > b {font-family:'Gmarket', sans-serif; font-weight:normal; font-size:0.76rem;}
/* .pipe {position:relative;}
.pipe::after {content:""; position:absolute; width:1px; height:10px; background-color:#000; top:50%; right:-15px; transform:translateY(-50%);} */

#InfoBox {}
#InfoBox p {display:flex; padding-top:26px; gap:20px;}
#InfoBox span {font-size:0.8rem; padding-left:40px;}
#InfoBox span > b {font-family:'Gmarket', sans-serif; font-weight:normal; font-size:0.8rem;}


/* 직종리스트 { */
#IssueBoxColor {
	background: #EB62CC;
	background: linear-gradient(137deg,rgba(235, 98, 204, 1) 0%, rgba(59, 102, 231, 1) 50%, rgba(235, 98, 204, 1) 100%);
	border-radius:25px;
	position:relative;
	min-width:640px;
}
#IssueBox {width:calc(100% - 4px); max-width:560px; background-color:#fff; padding:28px 38px; border-radius:23px; margin:2px;}
#IssueBox h2 {font-size:1.1rem; text-align:left; font-weight:600; padding-left:40px; margin-bottom:12px;}
#IssueBox ul {list-style:none; padding:0; margin:0; display:block; overflow:hidden; height:75px;}
#IssueBox ul li {float:left; margin:5px 25px 5px 0;}
#IssueBox ul li a {text-decoration:none; color:#49445a;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#IssueBox ul li a:hover {color:#f00;}

#JobNavigation {background-color:#f1f2f6; padding:0 0 130px; display:flex; justify-content:center; gap:24px;}
#JobList {display:flex; gap:40px 20px; width:1300px; flex-wrap:wrap;}
#JobList dl {background-color:#fff; border-radius:25px; overflow:hidden; width:calc(16.66% - 16.6px); display:flex; flex-direction:column; min-height:300px;}
#JobList dl dt {padding:13px 25px; background-color:#4f78c6; color:#fff; text-align:left; margin-bottom:24px; cursor:pointer;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#JobList dl dt:hover {text-indent:5px;}
#JobList dl dd {padding:4px 25px; color:#222; cursor:pointer; font-size:0.85rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#JobList dl dd:hover {background-color:#e5e5e5; text-indent:5px;}
#JobList dl dd.allView {padding:21px 25px; font-size:0.75rem;color:#898788 !important; margin-top: auto;}
#JobList dl dd.allView:hover {background-color:#fff;}
#JobList dl dd.allView i {margin-left:5px; font-size:0.75rem; color:#898788 !important;}
/* } 직종리스트 */
/* } 고객센터 & 이슈과정 & 직종리스트 */

/* 추천이벤트 슬라이더 { */
#RecomEvent {margin:0 auto; text-align:center; padding:80px 0;}
#RecomImg {width:1300px; margin:0 auto; position:relative; overflow:hidden;}
#RecomImg h2 {margin-bottom:26px; display:flex;}
#RecomImg h2 img {width:auto; margin-top:-15px;}
#RecomImg ul {width:200%; overflow:hidden; display:flex; position:relative; margin-left:-130px;}
#RecomImg ul li {width:50%; box-sizing:border-box; float:left; padding:0.5rem;}
#RecomImg ul li a:hover {transform:scale(1.05); transition: all 200ms ease-in-out;}
#RecomImg ul li a {
	width:242px;
	height:166px;
	overflow:hidden;
	border-radius:25px;
	transition: all 200ms ease-in-out;}
#RecomImg ul li a img {width:100%;}
#RecomImg span {
	position: absolute;
	top: calc(50% - -35px);
	background-color: rgb(0 0 0 / 80%);
	cursor: pointer;
	width: 30px;
	height: 30px;
	display: block;
	overflow: hidden;
	line-height: 15px;
	text-align: center;
	color: #fff;
	border-radius: 5px;
}
#RecomImg span i {font-size:0.8rem; line-height:1.5rem;}
#left3 {
	position: absolute;
	left: 10px;
	top: 0;
	z-index: 10;
}
#right3 {
	position: absolute;
	right: 10px;
	top: 0;
	z-index: 10;
}

#StripBanner {display:flex; justify-content:center; padding-bottom:100px;}
#StripIMG {overflow:hidden;}
#StripIMG img {}
/* } 추천이벤트 슬라이더 */

/* 에듀피디 합격자 동영상 { */
#Passed {padding:90px 0 100px; display:flex; justify-content:center; background-color:#f6f6f6;}
#PassedMV {width:1300px;}
#PassedMV h4 {font-weight:bold; font-size:1.6rem; display:flex; align-items:center; gap:25px; float:left; margin-top:-20px;}
#PassedMV dl {display:flex; align-items:center; gap:10px; margin-bottom:41px;}

#PassedMV dl dd {
	padding: 13px 30px;
	border: 1px solid #ccc;
	border-radius: 25px;
	font-size: 0.9rem;
	box-sizing: border-box;
	cursor: pointer;
}
#PassedMV dl dd.actPassed {background-color:#000; color:#fff; font-weight:bold;}

#PassedMV ul {
	display: flex;
    gap: 2rem 1rem;
    width: 1300px;
    flex-wrap: wrap;
}

#PassedMV ul li {
    display: flex;
    flex-direction: column;
    width:calc(25% - 15px);
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#PassedMV ul li:hover {transform:scale(1.05); transition: all 200ms ease-in-out;}
#PassedMV ul li p {cursor: pointer;}
#PassedMV ul li p img {width:100%;}

#VideoContainer {position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); display:flex; justify-content:center; align-items:center; z-index:1000;}
#MovInset {width:80%; height:80%; text-align:center;}
#PassedGo {
	cursor: pointer;
	margin: 50px auto 0;
	display: flex;
	width: 256px;
	font-size: 0.8rem;
	padding: 15px;
	background-color: #e8e8e8;
	border-radius: 35px;
	text-align: center;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
#VideoClose {position:absolute; top:20px; right:20px; cursor:pointer; color:#fff;}
#VideoClose i {font-size:2rem;}
/* } 에듀피디 합격자 동영상 */

/* 기타 정보 { */
#CustomerStory {display:flex; padding:137px 0 26px; justify-content:center;}
#CustomerStory ul {width:1300px; display:flex; justify-content:center; gap:15px;}
#CustomerStory ul li {width:320px; height:320px; border-radius:25px;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#CustomerStory ul li:hover {transform:scale(1.05); transition: all 200ms ease-in-out;}
#CustomerStory ul li:first-child {width:640px;}

#CustomerStory ul li a {
	padding: 33px 41px;
	width:calc(100% - 82px);
	height:calc(100% - 66px);
	display: block;
	overflow: hidden;
}
#CustomerStory ul li a p {}
#CustomerStory ul li a p.lineBarW {position:relative; text-align:center;}
#CustomerStory ul li a p.lineBarW::after {
	content: "";
	position: absolute;
	width: 70px;
	height: 1px;
	background-color: #fff;
	left: calc(50% - 35px);
}
#CustomerStory ul li a p.lineBarW::before {
	content: "";
	position: absolute;
	width: 70px;
	height: 1px;
	background-color: #fff;
	left: calc(50% - 35px);
	top: 27px;
}
#CustomerStory ul li a p.lineBarB {position:relative; text-align:center;}
#CustomerStory ul li a p.lineBarB::after {
	content: "";
	position: absolute;
	width: 70px;
	height: 1px;
	background-color: #000;
	left: calc(50% - 35px);
}
#CustomerStory ul li a p.lineBarB::before {
	content: "";
	position: absolute;
	width: 70px;
	height: 1px;
	background-color: #000;
	left: calc(50% - 35px);
	top: 27px;
}
#CustomerStory ul li a p.csTxt {font-weight:500; margin-top:16px; font-size:1.3rem; text-align:center;}
#CustomerStory ul li a p.CSimg {margin-top:15px;}
/* } 기타 정보 */

/* 하단 고객센터 { */
#CustomerCenter {display:flex; padding-bottom:100px; justify-content:center;}
#CustomerCenter ul {width:1300px; display:flex; justify-content:center; gap:15px}
#CustomerCenter ul li {width:480px; height:auto; border-radius:25px;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#CustomerCenter ul li:first-child {width:800px;}

#CsNumber {background-color:#f4f4f4; padding:36px 50px; border-radius:25px; display:flex; justify-content:center;}
#CsNumber > dl {display:flex; flex-direction:column; justify-content:center; border-radius:10px;}
#CsNumber > dl > dt {font-size:1.4rem; font-weight:500; margin-bottom:105px;}
#CsNumber > dl > dd {}
#CsNumber > dl > dd > span {font-size:0.9rem;}
#CsNumber > dl > dd > a {}
#CsNumber > dl > dd > a > p {text-align:center;}

.counsel {height:192px; margin-top:13px; margin-left:10px;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
.counsel:hover {transform:scale(1.05); transition: all 200ms ease-in-out;}
/* } 하단 고객센터 */

/* 제휴/단체수강/강사모집 { */
#Partnerships {display:flex; flex-direction:column;}
#Partnerships ul {padding:34px; border-radius:25px; margin-bottom:20px; cursor:pointer; width:100%; box-sizing:border-box;
	-moz-transition:all 100ms linear;
	-o-transition:all 100ms linear;
	-webkit-transition:all 100ms linear;
	transition:all 100ms linear;
}
#Partnerships ul li {width:auto !important; height:66px;}

#Partnerships ul:hover {transform:scale(1.05); transition: all 200ms ease-in-out;}
#Partnerships ul li p {}
#Partnerships ul li p:first-child {font-size:1.4rem;}
#Partnerships ul li p:last-child {font-size:0.8rem; font-weight:300; margin-top:8px;}
#Partnerships ul li img {margin-top:-28px;}
/* } 제휴/단체수강/강사모집 */

/* Footer { */
footer {background-color:#fbfbfb; border-top:1px solid#efefef; padding:40px 0; color:#a4a4a4;}
#TopFoot {display:flex; justify-content:center; gap:105px}
#TopFoot ul {}
#TopFoot ul li {}
#TopFoot ul li a {font-size:0.7rem; color:#6a6a6a; text-decoration:none;}
.FootTitle {font-size:0.9rem; font-weight:400; color:#000; margin-bottom:21px;}
#TopFoot ul li h4 {font-size:0.9rem; font-weight:400; color:#000; margin-bottom:21px;}
#TopFoot ul li p {display:flex; gap:30px; margin-top:5px; align-items:baseline; color:#000;}
#TopFoot ul li p span {font-size:0.7rem; font-weight:400;}
#TopFoot ul li p button {
	padding: 2px 5px;
	border-radius: 5px;
	border: 1px solid #ccc;
	background-color: unset;
	color: #000;
}

#BottomFoot {display:flex; width:1300px; margin:62px auto 0; border-top:1px solid #e4e4e4; padding:24px 0 0; justify-content:space-between;}
#BottomFoot ul {display:flex; gap:10px;}
#BottomFoot ul li {font-size:0.7rem;}
#BottomFoot ul li i {font-size:0.7rem;}
#BottomFoot ul li a {display:flex; align-items:center; gap:5px; font-size:0.7rem; color:#9c9c9c;}

#footModal {position:fixed;bottom:0; width:100%;  z-index:1000; display:none;}
#footModal ul {
	list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
	background-color: #ffffff;
}

#footModal ul li {
	padding: 1rem 0 1.5rem;
    border: 1px solid #ebebeb;
    width: 33.33%;
    text-align: center;
	font:1.3rem sans-serif;
	font-weight:500;
	position: relative;
}
#footModal ul li:first-child::before {
	content: "\f002";
    font-family: "Font Awesome 6 Pro";
    color: #000;
    position: absolute;
    top: calc(50% - 12px);
    left: 24px;
}
#footModal ul li:last-child {background-color: #e5565f; color: #ffffff;}


/* } Footer */

/* 반응형 css */
@media (max-width: 1280px) {
	html {font-size:14px;}
	#TopLinrBanner ul {gap:1rem}
	#TopLinrBanner ul::after {left: calc(50% - -8.2rem);}


	/* 네비 */
	#Navigation {padding:1rem;}
	#Navigation ul {width:50%;}
	
	#LoginHome {margin-top:0.5rem;}
	#LoginHome img {height:2.5rem;}
	#Gnb {display:none !important; }
	#SubGnb li a {margin:0;}

	#MobileGnbWrap {display:flex !important; margin:0 auto;}
	#MobileGnb {width:100% !important; display:flex; margin:0 auto;}
	#MobileGnb li {padding:0;}
	#MobileGnb li a {font-size:1rem; padding:1rem 0.2rem;}

	
	#VideoScreen {width:auto; margin:1rem 1rem 2rem; border-radius:25px;}
	#ScreenBG {border-radius:25px;}
	#VideoScreenList {width:100%;}
	#mVideo {width:1300px;}
	#VodTitle {
		background: linear-gradient(135deg, #ffc0df  0%, #ffffff 50%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: bold;
	}


	#LineBanner {width:100%; overflow:hidden; padding-bottom:0;}
	#LineImg {width:992px;}
	#LineImg ul li a {height:74%;}
	#LineImg ul li a img {height:100%;}


	#JobList {gap:2rem 1rem;}
	#JobList dl {width:calc(20% - 1rem);}
	#JobList dl dd {font-size:1rem;}

	#RecomEvent {width:100%; overflow:hidden;}
	#RecomImg {width:992px;}
	#RecomImg h2 img {width:60px;}
	#RecomImg ul li a {width:195px; height:139px;}
	#RecomImg ul li a img {height:100%;}
	#left3 {top: calc(50% - -1.5rem) !important;}
	#left3 > i {font-size:1rem !important; line-height:2rem !important;}

	#PassedMV {padding:1rem;}
	#PassedMV ul {width:100%;}

	#StripBanner {width:100%;}
	#StripIMG img {width:100%;}


	#CustomerStory ul {
		width:100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#CustomerStory ul li:first-child {
		width:100%;
		grid-column: span 2;
	}
	#CustomerStory ul li {width:100%; height: 100%;}
	#CustomerStory ul li a p.csTxt {font-size: 1.4rem;}
	#CustomerStory ul li a p.CSimg {text-align:center;}

	#CustomerCenter {padding:1rem;}
	#CustomerCenter ul {width:100%;}
	
	#BottomFoot {width:100%; flex-direction: column;}
	#BottomFoot ul:last-child {padding: 1rem 0;}
	#BottomFoot ul:last-child li:last-child {padding-top: 0.7rem !important;}
}

@media (max-width: 1024px) {
	html {font-size:14px;}
	* {font-family: "NotoSansKR", sans-serif; font-size: 14px;}

	#Specialty ul {gap:1rem;}
	#Specialty ul li::after {left:calc(100% - -0.5rem)}

	#CsInfoIssue {flex-direction: column; padding:1rem;}
	#CsInfoIssue > div {width:auto; min-width:fit-content;}
	#CsInfoBox {padding:1rem;}
	#IssueBox {width:auto; max-width:calc(100vw - 80px);}
	#IssueBox ul {height:auto;}

	#JobNavigation {padding:1rem 0 1rem 1rem;}
	#JobList dl {width:calc(25% - 1rem);}

	#RecomEvent {padding: 3rem 0;}
	#right3 {left: calc(100vw - 40px); right: auto; top: calc(50% - -1.5rem) !important;}
	#right3 > i {font-size:1rem !important; line-height:2rem !important;}

	#Passed {padding:2rem 0;}
	#PassedMV h4 img {width:45px;}
	#PassedMV dl {display:block; overflow:hidden; margin-top:3rem;}
	#PassedMV dl dd {display:inline-block; padding:0.7rem 2rem; margin-left: 0 !important;}


	#CustomerStory {padding:5rem 0 0;}

	#CustomerStory ul li a {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
	}
	#CustomerStory ul li:first-child a {
		display:block;
	}
	#CustomerStory ul li:first-child a p img {width:30px;}
	#CustomerStory ul li a p {
		display: flex;
		flex-direction: column;
		font-size: 1.4rem;
		text-align: left;
	}
	#CustomerStory ul li a p.lineBarW
	, #CustomerStory ul li a p.lineBarB {font-size:18px; grid-column: 1; grid-row: 1; text-align:left; text-indent:5px;}
	#CustomerStory ul li a p.lineBarW::before
	, #CustomerStory ul li a p.lineBarB::before {left:0;}
	#CustomerStory ul li a p.lineBarW::after
	, #CustomerStory ul li a p.lineBarB::after {left:0;}
	#CustomerStory ul li a p.csTxt {grid-column: 1; grid-row: 2; font-size: 1.4rem; text-align:left;}
	#CustomerStory ul li a p.CSimg {grid-column: 2; grid-row: 1 / span 2; width:110px;}
	#CustomerStory ul {padding:1rem 1rem 0; flex-direction:column;}
	#CustomerStory ul li {width:100%;}

	#CustomerCenter ul {flex-direction:column-reverse;}
	#CustomerCenter ul li {width:100%;}
	#Partnerships {
		display: flex;
		flex-direction: row;
		width: 100% !important;
		gap: 1rem;
	}
	#Partnerships ul {display:flex; flex-direction: row; margin-bottom:0;}
	#Partnerships ul li {position:relative;}

	#CustomerCenter ul li:first-child {width:100% !important;}

	footer {padding:1rem 0;}
	#TopFoot {justify-content: left; gap: 1rem;}
	#TopFoot ul:not(:first-child) {display:none;}
	#TopFoot ul {padding:1rem;}
	#TopFoot ul li p {gap:0;}
	#TopFoot ul li p:not(:first-child) {flex-direction: column; flex: 1;}
}

@media (max-width: 958px) {
	html {font-size:14px;}
	* {font-family: "NotoSansKR", sans-serif; font-size: 14px;}
	#mVideo {margin-left:calc(50% - 750px);}
	#PassedMV ul li {width:calc(33.33% - 0.7rem);}
	#pop_alert-search #wrapAlert-search {
		width: calc(100% - 40px);
		height: calc(100% - 40px);
		left: 20px;
		top: 20px;
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
	}
	
	#pop_alert-search #wrapAlert-search #title {font-size:1rem;}
	#pop_alert-search #wrapAlert-search #msgAra {height: 80vh !important; margin-top: 0 !important;}
	#pop_alert-search #wrapAlert-search #btn-01 {
		text-align: center;
		margin: 0;
		padding: 14px;
		border: 1px solid #313b5b;
		cursor: pointer;
		width: calc(100% - 7px);
		height: auto;
		background-color: white;
		border-radius: 5px;
	}
	#pop_alert-search #wrapAlert-search #btn-01 img {width: 100%;}
}

@media (max-width: 768px) {
	* {font-family: "NotoSansKR", sans-serif; font-size: 14px;}
	html {font-size:14px;}
	#Bookmark {display:none;}
	#MobileGnb li {padding:0 0.5rem; width:auto;}
	#VideoScreen {height:380px;}
	#VodTitle {display:none;}
	#SearchBar {width:65%;}
	#SearchResults ul {height:240px;}

	#CsInfoIssue {padding:1rem;}

	#JobList dl {width:calc(33.33% - 1rem);}
	#StripBanner {padding-bottom:3rem;}

	#CustomerStory ul li {grid-column: span 2;}

	#Partnerships ul li img {
		width: 70px;
		position: absolute;
		top: calc(90% - 1rem);
		right: calc(0% - 1rem);
	}
}

@media (max-width: 640px) {
	* {font-family: "NotoSansKR", sans-serif; font-size: 14px;}
	html {font-size:14px;}
	#Bookmark, #TopLinrBanner ul::after {display:none !important; }

	#StripBanner {width:100%;}
	#StripIMG {position:relative;}
	#StripIMG img {width: 180%; margin-left: -40%;}
	
	#PassedMV ul li {width:calc(50% - 0.5rem);}
	#Partnerships ul {padding:1.5rem;}
	#Partnerships ul li p:first-child {font-size:1rem; font-weight:900;}
	#Partnerships ul li img {top: calc(90% - 0rem); width: 40px;}

	#CsNumber {
		padding:2rem;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 1rem;
	}
	#CsNumber > dl > dt {margin-bottom:1rem;}
	#CsNumber > dl:first-child {grid-column: span 2;}
	#CsNumber > dl:nth-of-type(2) {margin-left:0 !important;}
	#CsNumber > dl:not(:first-child) {width:100%; margin:0;}

	#BottomFoot {margin: 0 0 4rem;}
	#footModal {display:block;}
	
	#pop_alert-search #wrapAlert-search {height: calc(100% - 100px);}
}

@media (max-width: 480px) {
	* {font-family: "NotoSansKR", sans-serif; font-size: 14px;}
	html {font-size:14px;}

	#SubGnb {gap:0.2rem;}
	#LoginHome {margin-top:1.2rem;}
	#LoginHome img {height:1.5rem;}
	#SubGnb li a {padding: 1rem 0.3rem; min-width: 62px;}
	#CsInfoBox {gap:1rem; flex-direction: column;}
	#CsInfoBox::after {content: ""; position: absolute; top:calc(50% - -0.5rem); left:5%; width:90%; height:1px; background-color:#ebebeb; }
	#CsInfoBox > div {width:50%; min-width:fit-content;}

	#JobList dl {width:calc(50% - 1rem);}

	#RecomImg {width:720px;}
	#RecomImg ul li a {width:140px; height:113px;}
	#RecomImg ul li a img {height:100%;}

	#BottomFoot ul:last-child li:last-child {margin-top:-0.7rem;}
	
}