@charset "UTF-8";

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-aLt.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-cBd.woff2);
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-dEb.woff2);
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquareNeo';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/NanumSquareNeo/NanumSquareNeoTTF-eHv.woff2);
    font-weight: 900;
    font-display: swap;
}
.opn .pc {display:block;}
.opn .mo {display:none;}
.opn .intro_wrap {margin:130px 0;}
.opn .mainBnr_wrap img:hover {cursor:pointer;}
.opn .intro_wrap .txt_wrap {
	position:relative;
	width:100%;
	background-image:url(../_img/opn/opn_introBG.png);
	background-size:445px;
	background-position:bottom -5px right 55px;
	background-repeat:no-repeat;
	font-size:28px;
	color:#000;
	text-align:center;
	line-height:1.5;
	padding:85px 0 120px;
}
.opn .intro_wrap .txt_wrap:before {
	content:'';
	width:32px; height:32px;
	background-image:url(../_img/opn/opn_icon_intro.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	top:0; left:calc( 50% - 16px );
}
.opn .intro_wrap .txt_wrap .blue {color:#1738c4; font-weight:700; position:relative; z-index:1;}
.opn .intro_wrap .txt_wrap .blue:after {
	content:'';
	width:100%; height:10px;
	background-color:#ece2ff;
	position:absolute;
	bottom:0; left:0;
	z-index:-1;
}
.opn .slogan_wrap * {font-family: 'NanumSquareNeo';}
.opn .slogan_wrap .topBar {
	width:100%; max-width:700px;
	text-align:center;
	background-color:#1738c4;
	padding:10px;
	border-radius:30px;
	color:#fff;
	font-size:24px;
	font-weight:800;
	margin:0 auto;
	position:relative;
}
.opn .slogan_wrap .topBar:before {
	content:'';
	width:215px; height:142px;
	background-image:url(../_img/opn/opn_slogan_img.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	position:absolute;
	bottom:15px; left:-162px;
}
.opn .slogan_wrap .tit_wrap {margin:45px auto; text-align:center; color:#000; font-family: 'NanumSquareNeo';}
.opn .slogan_wrap .tit_wrap .small {font-size:25px; font-weight:700;}
.opn .slogan_wrap .tit_wrap .big {font-size:36px; font-weight:900; margin-top:10px;}
.opn .slogan_wrap .dream_wrap {justify-content:center;}
.opn .slogan_wrap .dream_wrap li {width:20%; position:relative;}
.opn .slogan_wrap .dream_wrap li:first-child:before {display:none;}
.opn .slogan_wrap .dream_wrap li:before {
	width:9px; height:9px; 
	background-color:#ccc; 
	border-radius:100%;
	content:'';
	position:absolute;
	top:35%; left:-4px;
}
.opn .slogan_wrap .dream_wrap li .slogan {width:180px; margin:0 auto;}
.opn .slogan_wrap .dream_wrap .circle {
	width:180px; height:180px;
	background-color:#fff;
	font-size:18px;
	font-weight:700;
	padding-top:100px;
	color:#3a3a3a;
	text-align:center;
	border-radius:100%;
	background-repeat:no-repeat;
	background-size:36px;
	background-position:center top 38%;
}
.opn .slogan_wrap .dream_wrap .circle.pink {border:3px solid #ffb1d0; background-image:url(../_img/opn/slogan_dreamD.png);}
.opn .slogan_wrap .dream_wrap .circle.yellow {border:3px solid #ffd2a1; background-image:url(../_img/opn/slogan_dreamR.png);}
.opn .slogan_wrap .dream_wrap .circle.green {border:3px solid #99d8de; background-image:url(../_img/opn/slogan_dreamE.png);}
.opn .slogan_wrap .dream_wrap .circle.blue {border:3px solid #a1bff8; background-image:url(../_img/opn/slogan_dreamA.png);}
.opn .slogan_wrap .dream_wrap .circle.purple {border:3px solid #d4b2ff; background-image:url(../_img/opn/slogan_dreamM.png);}
.opn .slogan_wrap .dream_wrap .slogan p {font-size:20px; margin-top:20px; line-height:1.4; color:#000; text-align:center; font-weight:700;}
.opn .slogan_wrap .dream_wrap .slogan p .block {display:block;}
.opn .board_section.program {padding:150px 0 100px;}
.opn .board_section.notice {padding:50px 0; background-color:#f4f3fc;}
.opn .board_section .board_tit {font-size:36px; color:#000; text-align:center; font-family: 'NanumSquareNeo'; font-weight:900; margin-bottom:20px;}
.opn .board_section .tit_wrap {position:relative;}
.opn .board_section .tit_wrap .btn_more:hover {transform:rotate(90deg);}
.opn .board_section .tit_wrap .btn_more {
	display:block;
	width:50px; height:50px;
	border-radius:100%;
	background-color:#222126;
	background-image:url(../_img/opn/i_viewmore.png);
	background-size:20px;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
	top:-1px; right:0;
	transition:0.3s;
}
.opn .board_section .board_wrap {width:102%; margin:0 -1%;}
.opn .board_section .board_wrap .article {width:23%; margin:0 1%; position:relative;}
.opn .board_section .article .status {
	font-size:18px; 
	padding:0 40px 0 15px;
	line-height:40px; 
	border-radius:30px;
	background-size:21px;
	background-position:center right 12px;
	background-repeat:no-repeat;
	position:absolute;
	top:20px; left:20px;
	z-index:1;
}
.opn .board_section .article.open .status {color:#000; background-color:#3cff00; background-image:url(../_img/opn/icon_status_on.png);}
.opn .board_section .article.closed .status {color:#fff; background-color:#000; background-image:url(../_img/opn/icon_status_off.png);}
.opn .board_section .article .thumb_wrap {overflow:hidden;}   
.opn .board_section .article .thumb_wrap img {width:100%; height:100%; object-fit:cover; transition:0.3s;}
.opn .board_section .article.closed .thumb_wrap img {filter: grayscale(100%);}
.opn .board_section .article.closed:hover .thumb_wrap img {filter: grayscale(0%);}
.opn .board_section .article:hover .thumb_wrap img {transform:scale(1.05);}
.opn .board_section.program .article .tit_wrap {padding:25px 25px 30px;/*padding:40px 30px;*/ background-color:#f5f9ff;}
.opn .board_section.notice .article .tit_wrap {padding:25px 25px 30px; background-color:#fff;}
.opn .board_section .article:hover .tit_wrap .tit {text-decoration:underline; text-decoration-thickness:1px;}
.opn .board_section .article .tit_wrap .tit {
	font-size:20px; color:#000; 
	font-weight:600;
	height:50px;
	-webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
	transition:0.3s;
}
.opn .board_section .article .tit_wrap .date {font-size:18px; color:#818592;}
.opn .board_section.program .article .tit_wrap .date {margin-top:20px;}
.opn .board_section.notice .article .tit_wrap .date {margin-bottom:20px;}
.opn .goask_wrap {padding:50px 0;}
.opn .goask_wrap .ask_box {padding:40px; background-color:#3168fa; border-radius:20px; align-items:center; justify-content:center;}
.opn .goask_wrap .ask_box .btn_wrap {width:fit-content; text-align:left; margin:0;}
.opn .goask_wrap .ask_box .btn_wrap p {font-size:34px; color:#fff; font-family: 'NanumSquareNeo'; margin-bottom:10px;}
.opn .goask_wrap .ask_box .btn_wrap .btn_goask:hover {background-color:#000; color:#fff;}
.opn .goask_wrap .ask_box .btn_wrap .btn_goask {
	font-size:20px; color:#000;
	background-color:#fff;
	border-radius:10px;
	padding:10px; 
	width:100%; max-width:160px;
	font-weight:600;
	transition:0.3s;
}
.opn .goask_wrap .ask_box .img_wrap {width:fit-content; margin-left:20px;}
.opn .goask_wrap .ask_box .img_wrap .img1 {margin-top:20px; animation:swing 2s infinite ease-in-out;}
.opn .goask_wrap .ask_box .img_wrap .img2 {margin-top:-10px; transform:rotate(5deg); animation:blink 2s infinite ease-in-out;}
@keyframes swing {
    0%   {transform:rotate(0deg);}
    30%  {transform:rotate(15deg);}
    70%  {transform:rotate(-15deg);}
    100% {transform:rotate(0deg);}
}
@keyframes blink {
    0%   {scale:0.8;}
    50%  {scale:1;}
    100% {scale:0.8;}
}


@media screen and (max-width: 1250px) {
	.opn .intro_wrap {margin:80px 0;}
	.opn .intro_wrap .txt_wrap {background-size: 415px; background-position: bottom -5px right 0px;}
	.opn .slogan_wrap .dream_wrap li .slogan {width:160px;}
	.opn .slogan_wrap .dream_wrap .circle {width:160px; height:160px; background-position: center top 36%; padding-top:90px;}
	.opn .board_section.program {padding:100px 0;}
}
@media screen and (max-width: 1100px) {
	.opn .intro_wrap .txt_wrap {background-position: bottom -5px right -115px;}
	.opn .slogan_wrap .topBar:before {bottom:40px; left:-95px;}
}
@media screen and (max-width: 1024px) {
	.opn .intro_wrap .txt_wrap {font-size:24px; padding:75px 0 80px; background-size: 360px; background-position: bottom -5px right -95px;}
	.opn .intro_wrap .txt_wrap:before {width:27px; height:27px;}
	.opn .slogan_wrap .topBar {font-size:20px; max-width:620px;}
	.opn .slogan_wrap .topBar:before {width:160px; height:100px; left:-40px;}
	.opn .slogan_wrap .tit_wrap .small {font-size:22px;}
	.opn .slogan_wrap .tit_wrap .big {font-size:32px; margin-top:5px;}
	.opn .slogan_wrap .dream_wrap {width:100%; max-width:700px; margin:0 auto;}
	.opn .slogan_wrap .dream_wrap li {width:33.33%; margin:10px 0;}
	.opn .slogan_wrap .dream_wrap li:nth-child(4):before {display:none;}
	.opn .slogan_wrap .dream_wrap li .slogan {width:140px;}
	.opn .slogan_wrap .dream_wrap .circle {width:140px; height:140px; font-size:16px; background-position: center top 34%; padding-top:80px;}
	.opn .slogan_wrap .dream_wrap .slogan p {font-size:18px;}
	.opn .board_section.program {padding:80px 0;}
	.opn .board_section .board_tit {font-size:32px;}
	.opn .board_section .tit_wrap .btn_more {width:40px; height:40px; background-size:17px;}
	.opn .board_section .article .status {font-size: 14px; padding: 0 30px 0 10px; line-height: 30px; background-size: 17px; background-position: center right 8px; top: 10px; left: 10px;}
	.opn .board_section .article .tit_wrap {padding:15px !important;}
	.opn .board_section .article .tit_wrap .tit {font-size:18px; height:45px;}
	.opn .board_section .article .tit_wrap .date {font-size:16px;}
	.opn .board_section.program .article .tit_wrap .date {margin-top:10px;}
	.opn .board_section.notice .article .tit_wrap .date {margin-bottom:10px;}
	.opn .goask_wrap .ask_box {padding:30px;}
	.opn .goask_wrap .ask_box .btn_wrap p {font-size:30px;}
	.opn .goask_wrap .ask_box .btn_wrap .btn_goask {font-size:18px;}
	.opn .goask_wrap .ask_box .img_wrap .img1 {width:90px;}
	.opn .goask_wrap .ask_box .img_wrap .img2 {width:80px;}
}
@media screen and (max-width: 820px) {
	.opn .board_section .board_wrap .article {width:48%; margin:1%;}
}
@media screen and (max-width: 780px) {
	.opn .intro_wrap .txt_wrap {background-image:url(../_img/opn/opn_introBG_mo.png); background-size: 240px; background-position: bottom -5px right 0px;}
}
@media screen and (max-width: 720px) {
	.opn .mainBnr_wrap .pc {display:none;}
	.opn .mainBnr_wrap .mo {display:block !important;}
	.opn .visual_wrap .pc {display:none;}
	.opn .visual_wrap .mo {display:block !important;}
	.opn .roadmap .pc {display:none;}
	.opn .roadmap .mo {display:block !important;}
	.opn .intro_wrap {margin:50px 0;}
}
@media screen and (max-width: 620px) {
	.opn .intro_wrap {margin:30px 0;}
	.opn .intro_wrap .txt_wrap {font-size:20px; background-position: bottom -25px right 0px;}
	.opn .slogan_wrap .topBar {font-size:18px; max-width:100%;}
	.opn .slogan_wrap .topBar:before {width:150px; height:92px; left:-40px;}
	.opn .slogan_wrap .tit_wrap {margin:30px 0;}
	.opn .slogan_wrap .tit_wrap .small {font-size:20px;}
	.opn .slogan_wrap .tit_wrap .big {font-size:28px; margin-top:0;}
	.opn .slogan_wrap .dream_wrap li .slogan {width:120px;}
	.opn .slogan_wrap .dream_wrap .circle {width:120px; height:120px; font-size:14px; background-position: center top 35%; background-size: 30px; padding-top:70px;}
	.opn .slogan_wrap .dream_wrap .slogan p {font-size:16px;}
	.opn .board_section.program, .opn .board_section.notice {padding:30px 0;}
	.opn .board_section .board_tit {font-size:28px; margin-bottom:10px;}
	.opn .board_section .article .tit_wrap {padding:10px !important;}
	.opn .board_section .article .tit_wrap .tit {font-size:16px; height:40px;}
	.opn .board_section .article .tit_wrap .date {font-size:14px;}
	.opn .board_section.program .article .tit_wrap .date {margin-top:5px;}
	.opn .board_section.notice .article .tit_wrap .date {margin-bottom:5px;}
	.opn .goask_wrap {padding:30px 0;}
	.opn .goask_wrap .ask_box {padding:20px;}
	.opn .goask_wrap .ask_box .btn_wrap p {font-size:24px;}
	.opn .goask_wrap .ask_box .btn_wrap .btn_goask {font-size:16px;}
	.opn .goask_wrap .ask_box .img_wrap .img1 {width:80px;}
	.opn .goask_wrap .ask_box .img_wrap .img2 {width:70px;}
}
@media screen and (max-width: 550px) {
	.opn .intro_wrap .txt_wrap {background-image:none; padding:50px 0 100px;}
	.opn .slogan_wrap .dream_wrap li:before {display:none;}
	.opn .goask_wrap .ask_box .btn_wrap {width:100%;}
	.opn .goask_wrap .ask_box .btn_wrap .btn_goask {max-width:100%;}
}
@media screen and (max-width: 480px) {
	.opn .intro_wrap .txt_wrap {font-size:18px; padding:30px 0 20px;}
	.opn .intro_wrap .txt_wrap:before {width:22px; height:22px;}
	.opn .slogan_wrap .topBar {font-size:16px; }
	.opn .slogan_wrap .topBar:before {display:none;}
	.opn .slogan_wrap .tit_wrap {margin:30px 0 10px;}
	.opn .slogan_wrap .tit_wrap .small {font-size:18px;}
	.opn .slogan_wrap .tit_wrap .big {font-size:24px;}
	.opn .slogan_wrap .dream_wrap li .slogan {width:100px;}
	.opn .slogan_wrap .dream_wrap .circle {width:100px; height:100px; background-position: center top 35%; background-size: 30px; padding-top:60px;}
	.opn .slogan_wrap .dream_wrap .slogan p {font-size:14px; margin-top:5px;}
	.opn .board_section .board_tit {font-size:24px;}
	.opn .board_section .tit_wrap .btn_more {width:30px; height:30px; background-size:13px;}
	.opn .goask_wrap .ask_box .btn_wrap p {font-size:20px;}
}
@media screen and (max-width: 380px) {
	.opn .slogan_wrap .topBar {font-size:14px; }
	.opn .slogan_wrap .tit_wrap .small {font-size:16px;}
	.opn .slogan_wrap .tit_wrap .big {font-size:20px;}
	.opn .slogan_wrap .dream_wrap li {width:100%; margin:5px 0;}
	.opn .slogan_wrap .dream_wrap li .slogan {position:relative; padding-left:5%; width:100%; display:flex; align-items:center;}
	.opn .slogan_wrap .dream_wrap .slogan p {margin-left:15px; margin-top:20px;}
	.opn .slogan_wrap .dream_wrap .slogan p .block {display:inline;}
	.opn .slogan_wrap .tit_wrap .small .block {display:block;}
	.opn .slogan_wrap .dream_wrap .circle {width: 60px; height: 60px; background-position:center; background-size: 22px; padding-top: 0;}
	.opn .slogan_wrap .dream_wrap .circle span {position:absolute; top:10px; left:93px; font-weight:600;}
	.opn .slogan_wrap .dream_wrap .circle.pink span {color:#ff3b8a;}
	.opn .slogan_wrap .dream_wrap .circle.yellow span {color:#ff8e14;}
	.opn .slogan_wrap .dream_wrap .circle.green span {color:#009eac;}
	.opn .slogan_wrap .dream_wrap .circle.blue span {color:#1460ed;}
	.opn .slogan_wrap .dream_wrap .circle.purple span {color:#943eff;}
	.opn .board_section .board_tit {font-size:20px;}
	.opn .board_section .tit_wrap .btn_more {top:-4px;}
	.opn .goask_wrap .ask_box .btn_wrap p {font-size:20px;}
}
@media screen and (max-width: 320px) {
	.opn .intro_wrap .txt_wrap {font-size:16px;}
	.opn .slogan_wrap .dream_wrap .circle span {left:90px;}
}