@charset "euc-kr";
/* CSS Document */

html, body {width:100%; min-height:auto;overflow-x:hidden;color:#737373; }
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, code,del, 
dfn, em, img, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, 
td ,hr {margin:0;padding:0;font-size:100%;box-sizing: border-box;}
body {height:100%;min-height:100%;font-family:'Nanum Gothic','Malgun Gothic','¸¼Àº°íµñ','µ¸¿ò',dotum, sans-serif;font-size:16px;color:#737373;line-height:1.5}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
ol, ul, li {list-style:none}
table {width:100%; border-collapse:collapse;border-spacing:0}
form, fieldset, iframe {display:block;border:0}
img, button {border:0 none;vertical-align:top; }
hr {height:0; display:none}
i, em, address{font-style:normal}
label, button{cursor:pointer}
blockquote, q {quotes:none}
caption, legend {overflow:hidden;visibility:hidden;position:absolute;width:0;height:0;padding:0;margin:0;font-size:0;text-indent:-100%;white-space:nowrap;z-index:-1}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block;box-sizing: border-box;}
input, textarea, select, button {font-family:'Nanum Gothic','Malgun Gothic','¸¼Àº°íµñ','µ¸¿ò',dotum, sans-serif;font-size:16px;color:#919090;line-height:1.5;letter-spacing:0;vertical-align:middle; background:none; border:none;}
input, textarea {margin:0;padding:0}
input[type="text"],input[type="email"],input[type="phone"],input[type="password"]{padding:0 10px;}
textarea {resize:none; border:none; background:none; text-align:left; padding:10px;}
a {color:#666666;text-decoration:none}
a:link, a:visited {text-decoration:none}
a:hover {text-decoration:none}

.blind{display: none;overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;margin: 0; font-size: 0;line-height: 0; text-indent: -9999em;visibility: hidden;outline: none;z-index: -1;}
.clear::after {content:""; display:block; clear:both;}
.content-box {width:1280px; margin:0 auto; position:relative;}


header {}
header::before {content:""; display:block; width:100%; height:30px; background:#e68ab1;}
header .logo {
	display:block; 
	width:150px;
	height:70px; 
	background:url("/Programs/User/information/student/images/onlinelogo1.png?v=0610"); 
	text-indent:-9999px; 
	overflow:hidden; 
	margin-top:7px;
	background-repeat: no-repeat;
  background-size: 100%;
}
header h1 {text-align: center; font-size:50px; font-weight:bold; color:#242424; margin:23px 0 36px;}
header nav ul li {float:left; width:25%; text-align: center;}
header nav ul li:last-child a {border-right:2px solid #eee;}
header nav ul li a {display: block; height:85px; border:2px solid #eee; border-right:none;  border-bottom:4px solid #eee; font-size:22px; color:#585858; font-weight:bold; line-height: 130px; position:relative; }
header nav ul li a::before {content:""; display:block; width:45px; height:45px; position:absolute; top:6px; left:50%; transform:translateX(-37%);}
header nav ul li:nth-child(1) a::before {background:url(/Programs/User/information/student/images/onlineicon1_1.png);width:44px;}
header nav ul li:nth-child(2) a::before {background:url(/Programs/User/information/student/images/onlineicon2_1.png);}
header nav ul li:nth-child(3) a::before {background:url(/Programs/User/information/student/images/onlineicon3_1.png); transform:translateX(-50%);}
header nav ul li:nth-child(4) a::before {background:url(/Programs/User/information/student/images/onlineicon4_1.png);}


header nav ul li a.click {border-bottom:4px solid #005ead; color:#005ead;}
header nav ul li:nth-child(1) a.click::before {background:url(/Programs/User/information/student/images/onlineicon1.png);}
header nav ul li:nth-child(2) a.click::before {background:url(/Programs/User/information/student/images/onlineicon2.png);}
header nav ul li:nth-child(3) a.click::before {background:url(/Programs/User/information/student/images/onlineicon3.png);}
header nav ul li:nth-child(4) a.click::before {background:url(/Programs/User/information/student/images/onlineicon4.png);}

header nav ul li a:hover {border-bottom:4px solid #005ead; color:#005ead;}
header nav ul li:nth-child(1) a:hover::before {background:url(/Programs/User/information/student/images/onlineicon1.png);}
header nav ul li:nth-child(2) a:hover::before {background:url(/Programs/User/information/student/images/onlineicon2.png);}
header nav ul li:nth-child(3) a:hover::before {background:url(/Programs/User/information/student/images/onlineicon3.png);}
header nav ul li:nth-child(4) a:hover::before {background:url(/Programs/User/information/student/images/onlineicon4.png);}

header nav ul li a:focus {border-bottom:4px solid #005ead; color:#005ead;}
header nav ul li:nth-child(1) a:focus::before {background:url(/Programs/User/information/student/images/onlineicon1.png);}
header nav ul li:nth-child(2) a:focus::before {background:url(/Programs/User/information/student/images/onlineicon2.png);}
header nav ul li:nth-child(3) a:focus::before {background:url(/Programs/User/information/student/images/onlineicon3.png);}
header nav ul li:nth-child(4) a:focus::before {background:url(/Programs/User/information/student/images/onlineicon4.png);}



main .login { background:#f2f1f7;  padding:40px 0; }
main .login form {border:1px solid #ddd; background:#fff; margin: auto; width:500px; padding: 3%;}
main .login form p {margin-bottom:5%;}
main .login form label {display:block; margin-bottom:2.5%; font-weight:bold;}
main .login form #userName {border:1px solid #ddd; width:95%; padding:10px; color:#242424;}
main .login form #userName:focus {border:1px solid #005ead;}

main .login form .userTel {border:1px solid #ddd; padding:10px; width: 27.4%;}
main .login form .userTel:focus {border:1px solid #005ead;}
main .login form .user_birth {border:1px solid #ddd; padding:10px; width: 32.5%;}
main .login form .user_birth:focus {border:1px solid #005ead;}
main .login form fieldset>div {margin-top:12%;}
main .login form fieldset>div input {border:1px solid #2e6da4; background:#337ab7;color:#fff; width:100%; padding:10px; cursor:pointer; font-weight:bold;}
main .login form fieldset>div input:hover {background: #286090; border:1px solid #204d74}
main .login form fieldset>div input:last-child {border-top:none;}

main .list.by_list ul li p{
	max-height:159px;
	margin-top:13px;
}

.by_list .content-box{
	padding: 0 15px;
}

footer {background:#f2f1f7; position:relative;}
footer::after {content:""; display:block; width:100%; height:30px; 
    /*background-image:linear-gradient(to right, #fda63c 10%, #14b04d 10% 20%, #015eac 20% 30%, #e68ab1 30%);*/
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fda63c+0,fda63c+10,14b04d+10,14b04d+10,14b04d+20,015eac+20,015eac+30,e68ab1+30,e68ab1+100 */
background: #fda63c; /* Old browsers */
background: -moz-linear-gradient(left,  #fda63c 0%, #fda63c 10%, #14b04d 10%, #14b04d 10%, #14b04d 20%, #015eac 20%, #015eac 30%, #e68ab1 30%, #e68ab1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #fda63c 0%,#fda63c 10%,#14b04d 10%,#14b04d 10%,#14b04d 20%,#015eac 20%,#015eac 30%,#e68ab1 30%,#e68ab1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #fda63c 0%,#fda63c 10%,#14b04d 10%,#14b04d 10%,#14b04d 20%,#015eac 20%,#015eac 30%,#e68ab1 30%,#e68ab1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fda63c', endColorstr='#e68ab1',GradientType=1 ); /* IE6-9 */

}
footer ul {padding:0 0 50px; font-weight:bold; color:#585858;}
footer ul li span {color:#005ead;}
footer ul li::before {content:""; display:block; width: 28px; height:14px; background:url(/Programs/User/information/student/images/footicon.png);}
footer ul li:last-child {padding-top:5px; font-size:15px; margin-top: 5px;}
footer div .logo2 {display:block; width:301px; height:38px; background:url(/Programs/User/information/student/images/onlinelogo.png); text-indent:-9999px; overflow:hidden; position: absolute; bottom:7px; right:0;}

@media screen and (max-width: 1280px) {
.content-box {max-width:100%; padding:0 20px;}

footer div .logo2 {right:20px;}
}


@media screen and (max-width: 1040px) {
header h1 {font-size:38px;}
header nav ul li a {height:75px; font-size:18px; line-height:110px; }
header nav ul li a::before {width:30px; height:30px; top:7px; }
    
header nav ul li:nth-child(1) a::before {background:url(/Programs/User/information/student/images/m_onlineicon1_1.png);width:29px;}
header nav ul li:nth-child(2) a::before {background:url(/Programs/User/information/student/images/m_onlineicon2_1.png);}
header nav ul li:nth-child(3) a::before {background:url(/Programs/User/information/student/images/m_onlineicon3_1.png); transform:translateX(-50%);}
header nav ul li:nth-child(4) a::before {background:url(/Programs/User/information/student/images/m_onlineicon4_1.png);}

header nav ul li:nth-child(1) a.click::before {background:url(/Programs/User/information/student/images/m_onlineicon1.png);}
header nav ul li:nth-child(2) a.click::before {background:url(/Programs/User/information/student/images/m_onlineicon2.png);}
header nav ul li:nth-child(3) a.click::before {background:url(/Programs/User/information/student/images/m_onlineicon3.png);}
header nav ul li:nth-child(4) a.click::before {background:url(/Programs/User/information/student/images/m_onlineicon4.png);}

header nav ul li:nth-child(1) a:hover::before {background:url(/Programs/User/information/student/images/m_onlineicon1.png);}
header nav ul li:nth-child(2) a:hover::before {background:url(/Programs/User/information/student/images/m_onlineicon2.png);}
header nav ul li:nth-child(3) a:hover::before {background:url(/Programs/User/information/student/images/m_onlineicon3.png);}
header nav ul li:nth-child(4) a:hover::before {background:url(/Programs/User/information/student/images/m_onlineicon4.png);}

header nav ul li:nth-child(1) a:focus::before {background:url(/Programs/User/information/student/images/m_onlineicon1.png);}
header nav ul li:nth-child(2) a:focus::before {background:url(/Programs/User/information/student/images/m_onlineicon2.png);}
header nav ul li:nth-child(3) a:focus::before {background:url(/Programs/User/information/student/images/m_onlineicon3.png);}
header nav ul li:nth-child(4) a:focus::before {background:url(/Programs/User/information/student/images/m_onlineicon4.png);}

}


@media screen and (max-width: 800px) {
header h1 {font-size:27px;}
header nav ul li {width:49.8%;}
header nav ul li:nth-child(2) {border-right:2px solid #eee;}
header nav ul li:nth-child(3) a {border-top:none;}
header nav ul li:nth-child(4) a {border-top:none;}
footer ul {font-size:14px; }
footer ul li:last-child {font-size:14px;}
}



@media screen and (max-width: 600px) {
header nav ul li {width:49.7%;}  
header h1 {font-size:22px;}   
main .login form {width:300px;}
main .login form #userName {width:93%;}
main .login form #hp1 {width:32%; font-size:14px; /*padding:13px 10px*/}
main .login form .userTel {width:20%;} 
footer ul li:last-child {padding-top:10px;}
main .login form .user_birth {width:32%;}
}
@media screen and (max-width: 500px) {
header h1 {font-size:25px; line-height:28px;}  

}


/* ¸ñ·Ï ÆäÀÌÁö ½ÃÀÛ */

main .list { background:#f2f1f7;  padding:50px 0; }
main .list li {float:left;width:33.3%; margin-bottom:20px; overflow:hidden;}
main .list li a {display:block; width:400px; height:460px; border:1px solid #ccc; margin: auto; padding:10px; background:#fff;}

main .list li a:hover img {  
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}

main .list .img {height:50%; border:1px solid #ddd; overflow:hidden; background:#ddd;}
main .list .img img {
max-width:100%; height: auto;
    transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transition: all 0.3s ease-in-out;
}

main .list ul li h3 {margin:20px 0 0 40px; font-size:20px; color:#005ead; font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
main .list ul li h3 span {display:block; width:60px; height:20px; background:#005ead; text-align: center; color:#fff;  line-height:21px; font-size:16px;}
main .list ul li p {margin:20px 20px 0 40px; font-size:15px; color:#585858; font-weight:bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
main .list ul li p strong {font-size:17px;}

main .list li a:hover h3 {color:#003764;}
main .list li a:hover p {color:#2a2a2a;}
main .list .btn-group {margin:52px 0;}
/*
main .list .btn-group {text-align:center; margin:52px 0;}
main .list .btn-group .btn {border:1px solid #ccc; width:30px; height:30px; color:#333; font-size:12px; margin:0 -3px;background:#fff;}
main .list .btn-group .btn:hover {background:#e6e6e6; border:1px solid #adadad;}
main .list .btn-group .btn:focus {background:#e6e6e6; border:1px solid #adadad;}

.list .btn-group .btn:last-child {border:1px solid #2e6da4; color:#fff; background:#337ab7; width:56px; border-top-right-radius:3px; border-bottom-right-radius:3px;}
.list .btn-group .btn:last-child:hover {border:1px solid #204d74; background:#286090;}
.list .btn-group .btn:last-child:focus {border:1px solid #204d74; background:#286090;}

main .list .btn-group .btn:first-child {border:1px solid #2e6da4; color:#fff; background:#337ab7; width:56px; border-top-left-radius:3px; border-bottom-left-radius:3px; }
main .list .btn-group .btn:first-child:hover {border:1px solid #204d74; background:#286090;}
main .list .btn-group .btn:first-child:focus {border:1px solid #204d74; background:#286090;}

main .list .btn-group .btn:nth-child(2), main .list .btn-group .btn:nth-child(7) {border:1px solid #77a0c3; color:#fff; background:#7aa8d0; width:45px;}
main .list .btn-group .btn:nth-child(2):hover, main .list .btn-group .btn:nth-child(7):hover {border:1px solid #2e6da4; background:#337ab7; width:45px;}
main .list .btn-group .btn:nth-child(2):focus, main .list .btn-group .btn:nth-child(7):focus {border:1px solid #2e6da4; background:#337ab7; width:45px;}


main .list .btn-group .btn.click {border:1px solid #e3827f; color:#fff; background:#e68f8c;}
main .list .btn-group .btn.click:hover {border:1px solid #d43f3a; background:#d9534f;}
main .list .btn-group .btn.click:focus {border:1px solid #d43f3a; background:#d9534f;}

*/

main .list.by_list ul li h3{
	margin-top:15px;
	margin-left:30px;
	margin-right:30px;
}


@media screen and (max-width: 1260px) {
main .list li a {width:350px; height:376px;}
main .list ul li h3, main .list ul li p {margin:20px 20px 0 20px;}
}
@media screen and (max-width: 1130px) {
main .list li a {width:300px; height:322px;}
main .list ul li h3, main .list ul li p {margin:10px 10px 0 10px;}
main .list ul li h3{font-size:18px;}
main .list ul li p{font-size:13px;}
main .list ul li p strong {font-size:15px;}
main .list ul li h3 span {font-size:14px;}
}
@media screen and (max-width: 965px) {
main .list li {width:50%; margin-bottom:10px;}
}
@media screen and (max-width: 665px) {
main .list li a {width:240px; height:270px;}
main .list ul li h3 {margin:10px 5px 0 5px;}
main .list ul li h3 span {width:45px; height:17px; line-height:17px;}
main .list ul li p{margin:2px 5px 0 5px;}
main .list.by_list ul li p{max-height:80px;}
}

@media screen and (max-width: 540px) {
main .list li {float:none; width: 100%;}
main .list li a {width:300px; height:336px;}
main .list.by_list li a {width:100%; height:336px;}
main .list ul li h3 {margin:20px 20px 0 20px;}
main .list ul li h3{font-size:20px;}
main .list ul li p {font-size:15px; margin:2px 20px 0 20px;}
main .list ul li p strong {font-size:17px;}
main .list ul li h3 span {width:60px; height:20px; line-height:21px;}

main .list.by_list .img img{height:100%;}
main .list.by_list .img{text-align:center;}
main .list.by_list ul li p{
	max-height:102px;
	margin-top:14px;
	line-height:1.3;
	font-size:14px;
	margin-left:10px;
	margin-right:10px;
}
main .list.by_list ul li h3{
	margin-top:12px;
	margin-left:10px;
	margin-right:10px;
}

header .logo{
	width:120px;
}

}



/*À¯Æ©ºê ³»¿ë */
main .lecture { background:#f2f1f7;  padding:50px 0; }
main .lecture .margin { margin:10px 15px 0 0;}
main .lecture h2 {font-size:30px; color:#242424; font-weight:bold; padding-bottom:6px; padding-left:54px; border-bottom:2px solid #ddd; position:relative;}
main .lecture h2::before {content:""; display:block; width:39px; height:20px; background:url(/Programs/User/information/student/images/title_icon.png); position: absolute; top:13px; left:0;}
main .lecture .chashi {width:25%; float:left; font-weight:bold;}
main .lecture .chashi h3 {text-align:center; color:#fff; background:#005ead; padding:10px 0;}
main .lecture .chashi li {color:#585858; background:#fff; padding:18px 0 18px 5px; border-bottom:1px solid #ddd; font-size:15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main .lecture .chashi li a.active {text-decoration:underline;}
main .lecture .chashi li span {margin-right:14px; color:#005ead;}


/* 樨毢 */
main .lecture .youtube {width:75%;  float:right; padding-left:47px; height:500px; }

main .lecture .youtube .video {float:left; padding:10px; background:#fff; border:2px solid #ddd; border-right:none; width:70%; height:100%;}

main .lecture .youtube .video #myVideo {max-width:100%;}
main .lecture .youtube .video>a>img {transition:all .2s ease;}
main .lecture .youtube .video>a>img:hover {content:url(/Programs/User/information/student/images/play_bt2.jpg);}
main .lecture .youtube ul {float:left; background:#fff; width:30%; border:2px solid #ddd; border-left:none; height:100%; font-weight:bold; font-size:14px; position:relative;}
main .lecture .youtube ul li:nth-child(2) {position:absolute; bottom:40px;}
main .lecture .youtube ul h4 {font-size:18px; font-weight:bold; position:relative; margin:40px 0 20px 40px; color:#353535;}
main .lecture .youtube ul h4::before {content:""; display:block; width:18px; height:18px; background:url(/Programs/User/information/student/images/video_icon.png); position: absolute; top:5px; left:-25px;}
main .lecture .youtube ul li p {margin-left:30px;  width:100%; line-height: 18px}
main .lecture .youtube ul li p span {color:#005ead;}
main .lecture .youtube ul li p a {color:#005ead;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:inline-block; width:93%;}
main .lecture .youtube ul li p a:hover {color:#286090;}
/* ÄûÁî */
.quiz {width:75%; position: absolute; right:0; padding-left:40px; height:500px; margin-right:15px;}
.quiz.ck {top:48px;}
.quiz div {background:#fff; width:100%; height:100%; border:2px solid #ddd;}
.quiz div p.question {text-align:center; padding:20px 0; background:#f3f3f3; border-bottom:1px solid #dedede; font-size:18px; font-weight:bold;}
.quiz div form {text-align:left;}
.quiz div form .answer {padding:20px 0 20px 40px; border-bottom:1px solid #dedede; font-size:15px;}
.quiz div form .answer:hover {color:#005ead;}
.quiz div form input[type=button] {border:1px solid #2e6da4; background:#337ab7; padding:5px 10px; font-size:12px; color:#fff; border-radius:3px; cursor:pointer; margin-top: 20px;}
.quiz div form input[type=button]:hover {border:1px solid #204d74; background:#286090;}
.quiz div form input[type=button]:focus {border:1px solid #204d74; background:#286090;}




@media screen and (max-width: 1280px) {
.quiz{right:20px; width: 72.7%;}
    main .lecture .youtube {height:460px; }
    .quiz {height:460px}
}


@media screen and (max-width: 1200px) {
    main .lecture .youtube {height:430px}
    .quiz {height:430px}
    .quiz div p.question {}
    .quiz div form .answer {padding:15px 0 15px 40px; }
	main .lecture .youtube ul h4 {margin:20px 0 20px 40px;}
}
@media screen and (max-width: 1120px) {
    main .lecture .youtube {height:400px}
    .quiz {height:400px}
    .quiz div form input[type=button] {margin-top: 15px;}
	main .lecture .youtube ul h4 {margin:20px 0 10px 40px;}
}
@media screen and (max-width: 1060px) {
    main .lecture .youtube {height:380px}
    .quiz {height:380px}
    main .lecture .youtube ul {font-size:13px; }
    main .lecture .youtube ul h4 {font-size:16px;}
    main .lecture .youtube ul h4::before {top: 3px;}
    .quiz div form  input[type=button] {margin-top: 7px;}
}
@media screen and (max-width: 1000px) {
    main .lecture .youtube {height:360px}
    .quiz {height:360px}
    .quiz div form .answer {padding:10px 0 10px 40px; }
	main .lecture .youtube ul li:nth-child(2) {bottom:20px;}
	main .lecture .youtube ul li p {width:83%; margin-left:25px;}
}
@media screen and (max-width: 965px) {
    main .lecture .chashi {float:none;width:100%; margin-bottom:10px;}
    main .lecture .youtube {float:none; width: 100%; padding-left:0; height:500px;}
    main .lecture .margin {position:relative; margin-right:0;}
    .quiz {height:500px; width:100%; padding-left:0; margin-right:0; right:0; transition:top .3s ease;}
 
    main .lecture .chashi li{padding:5px 0 5px 40px;}
    main .lecture .chashi h3 {padding:7px 0;}
    
    .quiz div form  input[type=button] {margin-top:20px;}
    .quiz div form .answer {padding:20px 0 20px 40px; }
	main .lecture .youtube ul li p {width:100%; margin-left:30px;}
}

@media screen and (max-width: 940px) {
    main .lecture .youtube {height:470px}
    .quiz {height:470px}
}

@media screen and (max-width: 880px) {
    main .lecture .youtube {height:440px}
    .quiz {height:440px}
    
      .quiz div form  input[type=button] {margin-top:11px;}
}

@media screen and (max-width: 820px) {
    main .lecture .youtube {height:410px}
    .quiz {height:410px}
    .quiz div form .answer {padding:15px 0 15px 40px; }
}



main .lecture .quiz {
    height: 380px;
    width: 100%;
    transition: top .3s ease;
    padding-left: 0;
    margin-right: 0;
    right: 0;
    position: relative;
}
main .lecture .quiz.by_quiz{height:auto;}
.quiz.by_quiz div form input[type=button]{margin:12px 0;}

@media screen and (max-width: 760px) {

    main .lecture .youtube {height:auto; }
    .quiz {height:80%;}
    main .lecture .youtube ul {float:none; border:none; width: 100%; height:auto; border-left:2px solid #ddd; border-right:2px solid #ddd; border-bottom:2px solid #ddd;display:block}

    main .lecture .youtube .video {float:none; border:none; width:100%; height:auto; border-top:2px solid #ddd; border-left:2px solid #ddd; border-right:2px solid #ddd;}
    
    main .lecture .youtube ul li:last-child {bottom:auto;}
    main .lecture .youtube ul li {display:inline-block; width:50%;}
    main .lecture .youtube ul li p {display:inline-block; margin-bottom:10px;}
    main .lecture .youtube ul h4 {margin: 0 0 20px 40px;}
    
    .quiz div p.question {padding:20px 0;}
    .quiz div form .answer {padding:20px 0 20px 40px; }
    .quiz div form input[type=button] {margin-top:20px;}

	main .lecture .youtube ul li p {/* margin-left: 0;*/margin-left: 30px;}
/* main .lecture .youtube ul li p:nth-child(2) {margin-left: 30px;} */
}



@media screen and (max-width: 630px) {
.quiz {height:78.7%;}

}

@media screen and (max-width: 590px) {
    .quiz {height:auto;}
    .quiz div form input[type=button] {margin-bottom:20px;}
}
@media screen and (max-width: 502px) {
    main .lecture h2 {font-size:20px;}
	main .lecture h2::before {top:4px;}
}

@media screen and (max-width: 670px) {
/*    .quiz {height:79.9%;}*/
  /*  main .lecture .youtube ul li {display:block; }
    main .lecture .youtube ul li:last-child {position:static;} */
   /*  main .lecture .youtube ul li p:nth-child(2) {margin-left: 20px;} */
}

@media screen and (max-width: 478px) {
/*main .lecture .youtube ul li p:last-child {margin-left: 20px;}*/
main .lecture .youtube ul li p {margin-left:20px;}
}

@media screen and (max-width: 460px) {
main .lecture .chashi li {padding:  5px 0 5px 20px;}
}
@media screen and (max-width: 430px) {
main .lecture .youtube ul li {display:block; width:100%;}
main .lecture .youtube ul li:nth-child(2) {position:inherit;}
}

@media screen and (max-width: 400px) {
main .lecture .chashi li {padding:  5px 0 5px 7px;}
}

@media screen and (max-width: 370px) {

/*.quiz {height:77%;}*/
main .lecture .chashi li {padding:  5px 0 5px 2px;}

}



/* ¼ö°­³»¿ª Á¶È¸ Çϱâ */
main .details { background:#f2f1f7;  padding:50px 0; height:472px;}
main .details.bydetails{height:auto;}
main .details h2 {font-size:30px; color:#242424; font-weight:bold; padding-bottom:6px; padding-left:54px; border-bottom:2px solid #ddd; position:relative;}
main .details h2::before {content:""; display:block; width:39px; height:20px; background:url(/Programs/User/information/student/images/title_icon.png); position: absolute; top:13px; left:0;}
div.talent_box {width:100%; margin:10px auto 0;}
.table_style tbody tr td {background:#fff;}
.table_style tbody td.title {font-weight:500; color:#242424;}
.table_style tbody td.date {color:#585858;}

@media screen and (max-width: 1108px) {
main .details {height:450px;}
}

@media screen and (max-width: 1040px) {
main .details {height:478px;}
}


@media screen and (max-width: 962px) {
main .details {height:454px;}
}

@media screen and (max-width: 800px) {
main .details {height:auto;}
table.table_style {border-left:none;}
.table_style thead {display:none;}
.table_style tbody {display:block;}
.table_style tbody tr {overflow:hidden; display:block; position:relative; border-bottom:1px solid #ddd; background:#fff; padding:5px 0 0 5px;}
.table_style tbody td {border-right:none; border-bottom:none; display:block; float:left; padding:2px 12px 2px 0px;}
.table_style tbody tr td {color:#005ead;}
.table_style tbody td.center {text-align:left;}
.table_style tbody td.title, .table_style tbody td.date {width:100%;}
.quiz div p.question{font-size:16px;}
}

@media screen and (max-width: 600px) {
.quiz.by_quiz div form .answer{padding:20px 10px;}
.content-box.by_lecture_cont{padding:0 10px;}
main .login .content-box.by_lecture_cont form{width:95%; min-width:300px;}
}

@media screen and (max-width: 400px) {
.table_style tbody td {width:100%;}
}

.quiz input[type="radio"], input[type="checkbox"]{margin:0; margin-bottom:1px;}

main .login .content-box.by_lecture_cont form select{min-height:46px;}

.quiz.by_quiz .by_quiz_div{height:auto}



.wrap_sel{
	position:relative;
	width:100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: end;
	-moz-box-justify-content: flex-end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding: 0 15px;
	margin-bottom:10px;
}

.wrap_sel .sel_box{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	box-sizing:border-box;
	height:32px;
}

.wrap_sel select{
	height:100%;
	padding: 0 3px;
	border:1px solid #ccc;
	box-sizing:border-box;
}

.wrap_sel button{
	width:35px;
	height:100%;
	color:#fff;
	background-color:#326cb2;
	transition:0.3s
}

.wrap_sel button:hover{
	background-color:#1c3c62;
}

.wrap_caution{
	position:relative;
	width:100%;
}

.wrap_caution > div{
	position:relative;
	width:100%;
	box-sizing:border-box;
	border:1px dotted #bfbfbf;
	padding:15px;
	background-color:#fefefe;
}

.wrap_caution > div > p{
	margin-bottom:10px;
	line-height:1.8;
	font-size:15px;
	color:#333;
}

.wrap_caution > div > p > strong{
	color:#074799;
	font-size:19px;
}

.wrap_caution > div > p:last-child{
	margin-bottom:0;
}

.fst{
	display:inline-block;
	width:17px;
}

.wrap_cate {
	position: relative;
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-lines: multiple;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top:12px;
}

.by_list .content-box > p{
	margin-top:12px;
	font-size:16px;
}



.wrap_cate > a{

	position: relative;
	width:calc(25% - 8px);
	height:130px;
	border:1px solid #ddd;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-box-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-moz-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	font-weight:bold;
	font-size: 18px;
	border-radius:16px;
	box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
   7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
	color:#fff;
	background-color:#0367A6;
}

.wrap_cate > a:nth-child(2){
	background-color:#4F7302;
}

.wrap_cate > a:nth-child(3){
	background-color:#F27405;
}

.wrap_cate > a:nth-child(4){
	background-color:#A6290D;
}

.wrap_cate > a:hover {
  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
              -4px -4px 6px 0 rgba(116, 125, 136, .3), 
    inset -4px -4px 6px 0 rgba(255,255,255,.2),
    inset 4px 4px 6px 0 rgba(0, 0, 0, .3);
}

/* .wrap_cate > a > p:last-child{
	margin-top:1px;
} */

.wrap_cate > a > p .fa{
	font-size: 14px;
	position: relative;
	top: 0px;
	margin-left: 2px;
}

/* .wrap_cate > a > p:first-child{
	font-size:22px;
} */

.user_num > input{
	border: 1px solid #ddd;
	width: 100%;
	padding: 10px;
	color: #242424;
	box-sizing: border-box;
}

main .login.by_login form #userName{
	width:100%;
	box-sizing: border-box;
}

.login.by_login #privacy{
	margin:0;
	margin-right:3px;
}

main .login.by_login form label{
	display:inline-block;
}

.organize{
	width:100%;
	position:relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
  display: flex;
	-webkit-box-align: center;
	-moz-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}


.user_num .fa{
	font-size: 19px;
	position: relative;
	top: 2px;
	color:#FF7601;
	cursor:pointer;
}

.p_area{
	position:relative;
	width:100%;
	padding:5px 5px;
}

.p_area h3{
	font-size:17px;
	font-weight:bold;
	font-family: 'Nanum Gothic', 'Malgun Gothic', '¸¼Àº°íµñ', 'µ¸¿ò', dotum, sans-serif;
	margin-bottom:5px;
	color:#EB5B00;
}

.p_area h3 > .fa{
	position: relative;
	top: 1px;
	margin-right: 2px;
}

.wrap_pop{
	width:100%;
	position:relative;
	-webkit-box-pack: justify;
	-moz-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
	min-width:330px;
	max-width:1100px;
}

.pop_box{
	position:relative;
	width:49.5%;
	height:auto;
	box-sizing:border-box;
}

.pop_box:last-child{
	width:100%;
	margin-top:25px;
	box-sizing:border-box;
}

.pop_box > p{
	padding: 3px;
	border:1px solid #ddd;
	border-top:none;
	width:100%;
	background-color:#fafafa;
	font-size:15px;
	color:#000;
}

.pop_box > p > .fa{
	position: relative;
	top: 1px;
	margin-right: 3px;
}

.pop_box > p:first-child{
	text-align:center;
	font-weight:bold;
	font-size:16px;
	width:100%;
	height:30px;
	line-height:30px;
	background-color:#27548A;
	color:#fff;
	box-sizing:border-box;
	padding:0;
	border:none;
}

.pop_box > div{
	position:relative;
	width:100%;
	box-sizing:border-box;
	border:1px solid #ddd;
	border-top:none;
}

.pb_img > img{
	width:100%;
}

.flex_css{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
  display: flex;
	-webkit-box-lines: multiple;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.by_consent{
	border:1px solid;
	font-size:90%;
	padding:8px;
}



@media screen and (max-width: 879px) {
	.wrap_cate > a{
		width:100%;
		margin-bottom:10px;
		height:80px;
	}
	.wrap_cate > a:last-child{
		margin-bottom:0;
	}
	.by_list .content-box > p{font-size:14px;}
}

@media screen and (max-width: 768px) {
	.wrap_cate > a{
		height:70px;
		font-size:15px;
	}
	.pop_box{
		width:100%;
		margin-bottom:10px;
	}
	.pop_box:last-child{
		margin-top:0;
	}
}

@media screen and (max-width: 540px) {
	.wrap_sel{padding:0;}
	.wrap_sel select{width:160px;}
	.wrap_caution > div > p{font-size:13px; line-height:1.7;}
	.fst{display:none;}
	.wrap_caution > div > p > strong{font-size:16px;}
	.wrap_caution{padding:15px 0;}
	.wrap_cate > a{
		height:65px;
	}
	.wrap_cate{
		margin-top:0;
	}
	.pop_box > p{
		font-size:13px;
	}
	.pop_box > p:first-child{
		font-size:15px;
		line-height:28px;
		height:28px;
	}
	.wrap_cate > a{font-size:15px;}
	.by_list .content-box > p{font-size:13px;}
}