@charset "UTF-8";

/*-------------------------------------------------------------------
	@Web Fonts
-------------------------------------------------------------------*/
@font-face {
  font-family: 'Daum';
  font-style: normal;
  font-weight: 600;
  src:
    url("https://cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff2") format("woff2"),
    url("https://cdn.jsdelivr.net/korean-webfonts/1/corps/daum/Daum/Daum-SemiBold.woff") format("woff");
}
@font-face {
  font-family: 'GangwonEduHyeonokT Medium';
  src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Gwe/GangwonEduHyeonokT_OTFMediumA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.ff-pr {
	font-family: 'Pretendard Variable', sans-serif;
	font-weight: 400;
}
.ff-da {
	font-family: 'Daum', sans-serif;
	font-weight: 600;
}
.ff-ga {
	font-family: 'GangwonEduHyeonokT Medium', sans-serif;
}
.ff-go {
	font-family: 'GongGothicMedium', sans-serif;
}


/*-------------------------------------------------------------------
	@Resets
-------------------------------------------------------------------*/
html,body,div,ul,ol,dl,li,dt,dd,p,h1,h2,h3,h4,h5,h6,table,thead,tbody,tr,th,td,caption,address,article,aside,canvas,details,figure,figcaption,main,footer,header,menu,nav,section,button,form,select,textarea,input,fieldset,legend,label,a,span,strong,em,address,dfn,xmp,small,i,b {
	margin: 0;
	padding: 0;
	border: 0;
	letter-spacing: inherit;
	list-style: none;
	font-style: normal;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	color: inherit;
	line-height: inherit;
	box-sizing: inherit;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-o-box-sizing: inherit;
	-webkit-print-color-adjust: exact;
	color-adjust: exact !important;
}

:before, :after {
	box-sizing: inherit;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	-o-box-sizing: inherit;
}
body {
	color: #444;
	font-family: "Pretendard Variable", "sans-serif";
	font-size: 14rem;
	line-height: 1.4;
	letter-spacing: -0.02em;
	word-break: break-all;
	word-wrap: break-word;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

img {
	max-width: 100%;
}

[role="button"] {
	cursor: pointer;
}

/*-------------------------------------------------------------------
	@Layout
-------------------------------------------------------------------*/
/* Variables */
:root {
	--spacer-side: 60rem;
	--max-inner: 1713rem;
}

/* Page */
html, body {
	height: 100%;
}

/* 디자인 1:1비율 : 1px  */
html {
	font-size: 0.75px;
}

body::after {
	content:'';
	display: block;
	position: fixed;
	z-index: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url('../img/img-background.png') no-repeat center center / 100% 100%;
}


.inner {
	width: 100%;
	max-width: calc(var(--max-inner) + (var(--spacer-side) * 2));
	padding-left: var(--spacer-side);
	padding-right: var(--spacer-side);
	margin: auto;
}
.wrapper {
	position: relative;
	z-index: 10;
	min-height: 100%;
	/* opacity: 0.75; */
}

.footer {
	margin-top: 200rem;
	text-align: center;
}
/*-------------------------------------------------------------------
	@Components
-------------------------------------------------------------------*/
.program-box {
	padding: 33rem 41rem;
	border-radius: 40rem;
	background-color: #fff;
}

.table-wrap table {
	display: block;
	table-layout: fixed;
	width: 100%;
	min-width: calc(767px - (var(--spacer-side) * 2));
	border-collapse: collapse;
}
.table-wrap table thead {
	display: none;
}
.table-wrap table th,
.table-wrap table td {
	padding: 0 0;
	font-weight: 400;
	font-size: 32rem;
	line-height: 40rem;
	text-align: left;
	border: 1rem solid transparent;
}
.table-wrap table tbody {
	display: flex;
	flex-direction: column;
	gap: 40rem;
	width: 100%;
}
.table-wrap table tbody tr {
	display: flex;
	width: 100%;
}
.table-wrap table td {
	display: flex;
	align-items: center;
}
.table-wrap table td:nth-child(1) {
	width: 110rem;
}
.table-wrap table td:nth-child(2) {
	width: 21.5%;
}
.table-wrap table td:nth-child(3) {
	width: 27.5%;
}
.table-wrap table td:nth-child(4) {
	width: auto;
	flex:1 1 auto;
}
.table-wrap table td p {
	display: flex;
	align-items: center;
	height: 28.8rem;
	font-size: 24rem;
	line-height: 28.8rem;
	font-family: 'Pretendard Variable', sans-serif;
	font-weight: 400;
	color: #000;
}
.table-wrap table td.cel-date p {
	font-size: 26rem;
	line-height: 34.8rem;
}
.table-wrap table td:first-child {
	padding-left: 0;
}

.table-wrap table td .label-area {
	background-color: #26AA61;
	padding: 5rem 14rem;
	font-size: 27rem;
	border-radius: 12rem;
	font-family: 'Daum', sans-serif;
	font-weight: 600;
}
/*-------------------------------------------------------------------
	@Contents
-------------------------------------------------------------------*/
/* header */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 59rem;
	padding-left: 36rem;
	padding-right: 22rem;
}
.header .logo {
	display: flex;
	margin: 0;
	width: 332rem;
	height: 86rem;
	background: url('../img/img-logo-wh.png') no-repeat center center / contain;
}
.header .logo .blind {
	display: none;
}
.header .ajou-home {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 230rem;
	height: 79rem;
	background-color: #8B8BF7;
	color: #fff;
	text-decoration: none;
	font-size: 26.4rem;
	line-height: 28rem;
	text-align: left;
	border-radius: 15rem;
}

/* section */
.section {
	margin-top: 24rem;
	padding-bottom: 30rem;
}
.sec-header .slogan {
	padding-right: 22rem;
	font-size: 58.84rem;
	line-height: 70.6rem;
	text-align: right;
	letter-spacing: -0.1rem;
}
.sec-header .slogan-eng {
	display: block;
	color: rgba(255,255,255,0.4);
}
.sec-header .slogan-kor {
	display: block;
	margin-top: -2rem;
	color: rgba(255,255,255,1);
	word-break: keep-all;
}
.sec-body {
	display: flex;
	gap: 14rem;
	margin-top: 39rem;
}

/* program */
.program-main {
	width: 1172rem;
}
.program-main .program-header {
	display: block;
	position: relative;
	padding-left: 260rem;
}
.program-main .program-body {
	margin-top: 28rem;
}
.program-main .character {
	position: absolute;
	left: -41rem;
	bottom: -4rem;
	padding-left: 98rem;
}
.program-main .character-txt {
	position: absolute;
	left: -6rem;
	top: -17rem;
	width: 140rem;
	font-size: 43rem;
	line-height: 40.6rem;
	color: #fff;
	letter-spacing: -1.2rem;
}
.program-main .character-img {
	width: 172.3473rem;
	height: auto;
}
.program-main .program-title {
	font-size: 65.3rem;
	line-height: 90.34rem;
	color: #000;
	transform: scaleX(0.885);
	transform-origin: 0 0;
}

.program-sub {
	display: flex;
	flex-direction: column;
	gap: 15rem;
	flex: 1 1 auto;
	--character-width: 160rem;
}
.program-sub .program-box {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	position: relative;
	flex: 1 1 auto;
	height: 100%;
	padding: 33rem 32rem;
}
.program-sub .character {
	position: absolute;
	top: 40rem;
	left: 30rem;
	width: var(--character-width);
}
.program-sub .program-title {
	display: flex;
	justify-content: center;
	padding-left: var(--character-width);
	font-size: 36rem;
	line-height: 48rem;
	color: #000;
	text-align: center;
}
.program-sub .program-action {
	padding-left: var(--character-width);
	margin-top: 10rem;
	text-align: center;
}
.program-sub .program-action .btn {
	width: 230rem;
	height: 64rem;
	background-color: #305AC4;
	font-size: 31.2rem;
	line-height: 37.44rem;
	color: #fff;
	border-radius: 25rem;
	cursor: pointer;
}
.program-sub .program-date {
	padding-left: var(--character-width);
	margin-top: 15rem;
	font-size: 23.4rem;
	line-height: 28rem;
	color: #000;
	text-align: center;
}
.program-sub .program-date:last-child {
	padding-left: 0;
	text-align: center;
}

/* PC/Tablet : 레이아웃 조정 */
@media (max-width:1380px) {
	.sec-body {
		flex-direction: column;
	}
	.table-wrap table td .label-area {
		font-size: 30rem;
	}
	.table-wrap table td p {
		font-size: 30rem;
		line-height: 32rem;
	}
	.table-wrap table td.cel-date p {
		font-size: 36rem;
	}

	.program-main {
		padding-top:150rem;
		z-index: 10;
		order: 2;
		width: 100%;
	}
	.program-main .program-header {
		padding-left: 300rem;
	}
	.program-main .character {
		padding-left: 150rem;
	}
	.program-main .character-txt {
		left: 20rem;
		top: 15rem;
		color: #fff;
	}
	.program-sub {
		order: 1;
		width: 100%;
		flex-direction: row;
		flex-wrap:wrap;
	}
	.program-sub .program-box {
		width: 32%;
		height: auto;
		--character-width: 140rem;
	}
	.program-sub .program-title {
		font-size: 32rem;
	}
	.program-sub .program-date {
		font-size: 22rem;
	}
}

/* PC/Tablet : 축소 조정 */
@media (max-width:1200px) {
	:root {
		--ratio: 75vw;
		--spacer-side: calc(var(--ratio) * (60 / 1200));
	}
	.header {
		padding: calc(var(--ratio) * (59 / 1200)) calc(var(--ratio) * (22 / 1200)) 0 calc(var(--ratio) * (22 / 1200));
	}
	.header .logo {
		width: calc(var(--ratio) * (332 / 1200));
		height: calc(var(--ratio) * (86 / 1200));
	}
	.header .logo img {
		width: 100%;
		height: auto;
	}
	.header .ajou-home {
		width: calc(var(--ratio) * (230 / 1200));
		height: calc(var(--ratio) * (75 / 1200));
		font-size: calc(var(--ratio) * (26.4 / 1200));
		line-height: calc(var(--ratio) * (28 / 1200));
		border-radius: calc(var(--ratio) * (15 / 1200));
	}

	/* section */
	.section {
		margin-top: 24rem;
		padding-bottom: 30rem;
	}
	.sec-header .slogan {
		padding-right: calc(var(--ratio) * (22 / 1200));
		font-size: calc(var(--ratio) * (58 / 1200));
		line-height: calc(var(--ratio) * (70 / 1200));
	}
	.sec-body {
		gap: calc(var(--ratio) * (20 / 1200));
		margin-top: calc(var(--ratio) * (39 / 1200));
	}

	/* components */
	.program-box {
		padding: calc(var(--ratio) * (33 / 1200)) calc(var(--ratio) * (41 / 1200));
		border-radius: calc(var(--ratio) * (40 / 1200));
		background-color: #fff;
	}

	.table-wrap table {
		min-width: 100%;
	}
	.table-wrap table thead {
		display: none;
	}
	.table-wrap table th,
	.table-wrap table td {
		font-size: calc(var(--ratio) * (32 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.table-wrap table tbody {
		gap: calc(var(--ratio) * (40 / 1200));
	}
	.table-wrap table td:nth-child(1) {
		width: calc(var(--ratio) * (110 / 1200));
	}
	.table-wrap table td p {
		height: calc(var(--ratio) * (28.8 / 1200));
		font-size: calc(var(--ratio) * (30 / 1200));
		line-height: calc(var(--ratio) * (32 / 1200));
	}
	.table-wrap table td.cel-date p {
		font-size: calc(var(--ratio) * (36 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.table-wrap table td .label-area {
		background-color: #26AA61;
		padding: calc(var(--ratio) * (5 / 1200)) calc(var(--ratio) * (14 / 1200));
		font-size: calc(var(--ratio) * (30 / 1200));
		border-radius: calc(var(--ratio) * (12 / 1200));
	}

	/* program */
	.program-main {
		width: 100%;
	}
	.program-main .program-header {
		padding-left: calc(var(--ratio) * (300 / 1200));
	}
	.program-main .program-body {
		margin-top: calc(var(--ratio) * (28 / 1200));
	}
	.program-main .character {
		position: absolute;
		left: calc(var(--ratio) * (-41 / 1200));
		bottom: calc(var(--ratio) * (-4 / 1200));
		padding-left: calc(var(--ratio) * (150 / 1200));
	}
	.program-main .character-txt {
		position: absolute;
		left: calc(var(--ratio) * (20 / 1200));
		top: calc(var(--ratio) * (20 / 1200));
		width: calc(var(--ratio) * (140 / 1200));
		font-size: calc(var(--ratio) * (43 / 1200));
		line-height: calc(var(--ratio) * (51.6 / 1200));
		color: #fff;
		letter-spacing: calc(var(--ratio) * (-1.2 / 1200));
	}
	.program-main .character-img {
		width: calc(var(--ratio) * (172 / 1200));
		height: auto;
	}
	.program-main .program-title {
		font-size: calc(var(--ratio) * (70 / 1200));
		line-height: calc(var(--ratio) * (90 / 1200));
	}

	.program-sub .program-box {
		padding: calc(var(--ratio) * (33 / 1200)) calc(var(--ratio) * (32 / 1200));
		--character-width: calc(var(--ratio) * (140 / 1200));
	}
	.program-sub .character {
		top: calc(var(--ratio) * (40 / 1200));
		left: calc(var(--ratio) * (30 / 1200));
	}
	.program-sub .program-title {
		font-size: calc(var(--ratio) * (32 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.program-sub .program-action {
		margin-top: calc(var(--ratio) * (10 / 1200));
	}
	.program-sub .program-action .btn {
		width: calc(var(--ratio) * (230 / 1200));
		height: calc(var(--ratio) * (64 / 1200));
		font-size: calc(var(--ratio) * (31.2 / 1200));
		line-height: calc(var(--ratio) * (37.44 / 1200));
		border-radius: calc(var(--ratio) * (25 / 1200));
	}
	.program-sub .program-date {
		margin-top: calc(var(--ratio) * (15 / 1200));
		font-size: calc(var(--ratio) * (22 / 1200));
		line-height: calc(var(--ratio) * (28 / 1200));
	}
}

/* Mobile : 축소 조정 + 레이아웃 조정 */
@media (max-width:767px) {
	:root {
		--ratio: 100vw;
		--spacer-side: calc(var(--ratio) * (60 / 1200));
	}
	.header .logo {
		background-image: url('../img/img-logo-wh.png');
	}
	.header .logo img {
		width: 100%;
		height: auto;
	}
	.header .ajou-home {
		width: calc(var(--ratio) * (230 / 1200));
		height: calc(var(--ratio) * (75 / 1200));
		font-size: calc(var(--ratio) * (26.4 / 1200));
		line-height: calc(var(--ratio) * (28 / 1200));
		border-radius: calc(var(--ratio) * (15 / 1200));
	}

	/* section */
	.section {
		margin-top: calc(var(--ratio) * (24 / 1200));
		padding-bottom: calc(var(--ratio) * (100 / 1200));
	}
	.sec-header .slogan {
		padding-right: calc(var(--ratio) * (22 / 1200));
		font-size: calc(var(--ratio) * (58 / 1200));
		line-height: calc(var(--ratio) * (70 / 1200));
	}
	.sec-body {
		gap: calc(var(--ratio) * (30 / 1200));
		margin-top: calc(var(--ratio) * (39 / 1200));
	}

	/* components */
	.program-box {
		padding: calc(var(--ratio) * (33 / 1200)) calc(var(--ratio) * (41 / 1200));
		border-radius: calc(var(--ratio) * (40 / 1200));
		background-color: #fff;
	}

	.table-wrap table {
		min-width: 100%;
	}
	.table-wrap table thead {
		display: none;
	}
	.table-wrap table th,
	.table-wrap table td {
		font-size: calc(var(--ratio) * (32 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.table-wrap table tbody {
		gap: calc(var(--ratio) * (30 / 1200));
	}
	.table-wrap table tbody tr {
		flex-wrap: wrap;
	}
	.table-wrap table tbody tr + tr {
		padding-top: calc(var(--ratio) * (30 / 1200));
		border-top: 1px solid #ddd;
	}
	.table-wrap table td:nth-child(1) {
		width: calc(var(--ratio) * (110 / 1200));
	}
	.table-wrap table td:nth-child(2) {
		width: calc(100% - (var(--ratio) * (110 / 1200)));
	}
	.table-wrap table td:nth-child(3) {
		margin-top: 10rem;
		width: 40%;
	}
	.table-wrap table td:nth-child(4) {
		margin-top: 10rem;
		width: 60%;
	}
	.table-wrap table td p {
		height: auto;
		font-size: calc(var(--ratio) * (32 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.table-wrap table td.cel-date p {
		font-size: calc(var(--ratio) * (40 / 1200));
		line-height: calc(var(--ratio) * (48 / 1200));
	}
	.table-wrap table td .label-area {
		background-color: #26AA61;
		padding: calc(var(--ratio) * (5 / 1200)) calc(var(--ratio) * (14 / 1200));
		font-size: calc(var(--ratio) * (30 / 1200));
		border-radius: calc(var(--ratio) * (12 / 1200));
	}

	/* program */
	.program-main {
		padding-top:80rem;
		width: 100%;
	}
	.program-main .program-body {
		margin-top: calc(var(--ratio) * (28 / 1200));
	}
	.program-main .character {
		position: absolute;
		left: calc(var(--ratio) * (-41 / 1200));
		bottom: calc(var(--ratio) * (-4 / 1200));
	}
	.program-main .character-txt {
		position: absolute;
		width: calc(var(--ratio) * (140 / 1200));
		font-size: calc(var(--ratio) * (43 / 1200));
		line-height: calc(var(--ratio) * (51.6 / 1200));
		color: #fff;
		letter-spacing: calc(var(--ratio) * (-1.2 / 1200));
	}
	.program-main .character-img {
		width: calc(var(--ratio) * (172 / 1200));
		height: auto;
	}
	.program-main .program-title {
		font-size: calc(var(--ratio) * (70 / 1200));
		line-height: calc(var(--ratio) * (90 / 1200));
	}

	.program-sub .program-box {
		width: 48%;
		padding: calc(var(--ratio) * (33 / 1200)) calc(var(--ratio) * (32 / 1200));
		--character-width: calc(var(--ratio) * (140 / 1200));
	}
	.program-sub .character {
		top: calc(var(--ratio) * (40 / 1200));
		left: calc(var(--ratio) * (30 / 1200));
	}
	.program-sub .program-title {
		font-size: calc(var(--ratio) * (32 / 1200));
		line-height: calc(var(--ratio) * (40 / 1200));
	}
	.program-sub .program-action {
		margin-top: calc(var(--ratio) * (10 / 1200));
	}
	.program-sub .program-action .btn {
		width: calc(var(--ratio) * (230 / 1200));
		height: calc(var(--ratio) * (64 / 1200));
		font-size: calc(var(--ratio) * (31.2 / 1200));
		line-height: calc(var(--ratio) * (37.44 / 1200));
		border-radius: calc(var(--ratio) * (25 / 1200));
	}
	.program-sub .program-date {
		margin-top: calc(var(--ratio) * (15 / 1200));
		font-size: calc(var(--ratio) * (22 / 1200));
		line-height: calc(var(--ratio) * (28 / 1200));
	}
}

/* Mobile : 축소 조정 + 레이아웃 조정 */
@media (max-width:479px) {
	:root {
		--ratio: 150vw;
		--spacer-side: calc(var(--ratio) * (40 / 1200));
	}

	.program-sub .program-box {
		width: 100%;
		min-height: calc(var(--ratio) * (300 / 1200));
		--character-width: calc(var(--ratio) * (160 / 1200));
	}

    .program-sub .character {
        left: calc(var(--ratio) * (60 / 1200));
    }
	.program-sub .program-title {
        font-size: calc(var(--ratio) * (40 / 1200));
        line-height: calc(var(--ratio) * (48 / 1200));
    }

    .program-sub .program-date {
        margin-top: calc(var(--ratio) * (20 / 1200));
        font-size: calc(var(--ratio) * (28 / 1200));
        line-height: calc(var(--ratio) * (40 / 1200));
    }

	.program-main .program-header {
        padding-top: calc(var(--ratio) * (60 / 1200));
        padding-left: calc(var(--ratio) * (250 / 1200));
    }

	.program-main .character {
        position: absolute;
        left: calc(var(--ratio) * (-41 / 1200));
        bottom: calc(var(--ratio) * (-4 / 1200));
        padding-left: calc(var(--ratio) * (50 / 1200));
    }

	.program-main .character-txt {
		width: calc(var(--ratio) * (290 / 1200));
		top: calc(var(--ratio) * (30 / 1200));
		left: calc(var(--ratio) * (290 / 1200));
		color: #fff;
	}
	.program-main .character-txt br {
		display: none;
	}

    .program-main .program-title {
		font-size: calc(var(--ratio) * (40 / 1200));
        line-height: calc(var(--ratio) * (48 / 1200));
    }

	.table-wrap table td:nth-child(3) br {
		display: none;
	}
	.table-wrap table td:nth-child(3),
	.table-wrap table td:nth-child(4) {
		width: 100%;
	}
}