@charset "utf-8";

/* welcome */
.welcome {margin:0 60px;}
.welcome .first {overflow:hidden;color:#333;font-size:26px;}
.welcome .first img {float:left;margin-right:6%;}
.welcome .first p {margin-top:35px;}
.welcome .first em {display:block;margin-top:10px;font-size:44px;font-weight:600;}
.welcome .mid {margin:30px 0;font-size:20px;}
.welcome .mid p {padding:15px 0;line-height:1.8;}
.welcome .chairman {padding:0 0 0;}
.welcome .chairman em {color:#333;font-weight:600;}
.welcome::after {position:absolute;bottom:50px;left:0;z-index:-1;display:block;width:100%;height:400px;content:"";background-color:#F5F5F5;background-image:url("/asset/jtsc/images/sub/intro_bg.jpg");background-position:right bottom;background-repeat:no-repeat;}

/* history */
.history {position:relative;}
.history::after {position:absolute;top:15px;left:20.4%;z-index:-1;content:"";width:1px;height:100%;background-color:#ddd;}
.history .list {overflow:hidden;margin-bottom:40px;}
.history .list h3 {float:left;width:20%;color:#333;font-size:30px;font-weight:600;}
.history .list ul {overflow:hidden;width:80%;}
.history .list ul li {margin-bottom:30px;}
.history .list ul li::before {content:"";display:inline-block;width:10px;height:10px;background-color:#fff;border-radius:50%;border:3px solid #ccc;margin-right:2%;}
.history .list ul li.last::before {border:3px solid #333;}
.history .list ul li time {color:#333;font-weight:600;}
.history .list ul li p {float:right;width:80%;}
.history .first, .history .first ul li {margin-bottom:0;}


/* map */
#daumRoughmapContainer1672830445828 {width:100% !important;}

/*program*/
.class-area {}
.class-area h3 {margin-bottom:40px;color:#333;font-size:28px;font-weight:500;text-align:center;}
.class-area h3 span {color:#666;font-size:18px;font-weight:400;}
.class-area .class {overflow:hidden;}
.class-area .class > li {float:left;width:calc(94% / 3);border:1px solid #D7EBEB;border-radius:0 30px 0 30px;box-shadow:0px 3px 10px 0 rgba(0, 0, 0, 0.05);margin:0 1% 20px;padding:30px 40px 40px;height: 400px;}
.class-area .class li h4 {padding:20px 0;background-color:#EAF5F5;border-radius:0 30px 0 30px;margin-bottom:20px;color:#197272;font-size:22px;font-weight:600;text-align:center;}
.class-area .class li ul {}
.class-area .class li ul li {border-bottom:1px dotted #DBDBDB;padding:10px 0;font-size:18px;}
.class-area .class li ul li:last-child {border:none;}
.class-area .class li ul li span {display:inline-block;width:30%;color:#197272;font-size:15px;font-weight:600;}
.class-area .class li ul li em {font-size:14px;}
.class-area p {margin-left:1%;font-size:15px;}

/* cup */

.list-wrap .panel-info {border:1px solid #D7EBEB;border-radius:0 30px 0 30px;padding:20px 30px;box-shadow:0 6px 6px rgba(0,0,0,.04)}
.list-wrap .panel-info:hover {border:1px solid #8FCCCC;}
.list-wrap .panel-info > .panel-heading {background:none;padding:0;}
.list-wrap .panel-title {overflow:hidden;}
.list-wrap .panel-title > a {display:block;width:100%;color:#197272;font-size:20px;font-weight:600;}
.list-wrap .panel-title time {float:right;background-image:url("/asset/jtsc/images/sub/time.svg");background-repeat:no-repeat;margin:10px 0 0 0;padding:0 0 0 20px;font-size:15px;font-weight:400;color:#888;}
.list-wrap .panel-info > .panel-heading .badge {background-color:#EAF5F5;border-radius:20px;padding:12px 18px;margin-right:10px;font-size:16px;color:#197272;}

.list-wrap .panel-body {padding:15px 0 0;}
.list-wrap .panel-body h4 {margin:20px 0 40px;text-align:center;color:#333;font-size:24px;font-weight:600;}
.list-wrap .panel-body h4 span {border-bottom:3px solid #249E9E;padding-bottom:5px;}
.list-wrap .panel-body .info {max-height:500px;overflow-y:auto;}
.list-wrap .panel-info > .panel-heading + .panel-collapse > .panel-body {border-top:1px dashed #B1CFCF;margin-top:15px;}

.list-wrap .btn-area {margin-top:30px;text-align:center;}
.list-wrap .btn-area .btn-primary {width:160px;height:55px;background-color:#278787;border-radius:0 25px 0 25px;font-size:18px;}
.list-wrap .btn-area .ok {background-color:#153F42;border-radius:0 25px 0 25px;padding:20px 0;}
.list-wrap .btn-area .ok span {color:#fff;}

/*.apply {padding:0 30px 30px;}*/
.apply .modal-body {padding:15px 30px;}
.apply .modal-dialog {width:900px;}
.apply .modal-header {border:none;}
.apply h2 {color:#333;font-size:24px;font-weight:600;text-align:center;}
.apply h2 span {font-weight:400;}

.apply .modal-content {border-radius:30px;}

.apply-wrap {border-top:1px solid #333;}
.apply-list {border-bottom:1px solid #ddd;}
.apply-list h3 {display:inline-block;width:120px;background-color:#f5f5f5;padding:15px 0;margin-right:20px;font-weight:500;text-align:center;}
.apply-list .apply-tit {font-size:18px;font-weight:600;color:#333;}
.apply-list .apply-row {overflow:hidden;}
.apply-list .apply-row li {float:left;width:calc(100% / 3);}
.apply-list .apply-row li h3 {}
.apply-list .apply-row li span {}
.apply-list .apply-opt, .apply-list .bank-name {float:right;width:49%;margin-top:7px;}
.apply-list .apply-memo {float:right;width:83%;margin-top:7px;}
.apply-player {}
.apply-player h3 {display:block;width:auto;background-color:#fff;text-align:center;}

.apply .modal-footer {border:none;}
.apply th {font-weight:500;}
.apply .table-bordered > thead > tr > th {border-bottom-width:0;}
.apply .bg-info {background-color:#EAF5F5;}
.apply .btn {font-size:14px;}
.apply table .btn-primary, .apply table .btn-danger {width:64px;height:30px;} 
.apply .btn-primary {background-color:#278787;}
.apply .btn-danger {}
.apply .btn-left {float:left;width:50%;text-align:left;}


/* login */
.login {margin-top:100px;}
.login h2 {margin-bottom:60px;color:#333;font-size:36px;font-weight:600;text-align:center;}
.login-wrap {width:50%;margin:0 auto;}
.login-wrap .form-group input {height:50px;border-radius:0;}
.login-wrap small {display:block;margin:10px 0 20px;}
.login-wrap .btn-area button {width:100%;height:50px;padding:0;margin-bottom:10px;border-radius:0;border:none;}
.login-wrap .btn-area .btn-primary {background-color:#197272;}
.login-wrap .btn-area .btn-primary:hover {background-color:#0D5353;}
.login-wrap .btn-area .btn-secondary {border:1px solid #197272;color:#197272;}
.login-wrap .btn-area .btn-danger {background-color:#fff;border:1px solid #D91356;color:#D91356;}

.join {margin-top:60px;}
.join label {color:#333;font-weight:600;}
.join select {height:45px;border-radius:0;}

.standard {margin-top:60px;}
.standard h3 {border-bottom:1px solid #666;padding-bottom:25px;margin-bottom:20px;color:#333;font-size:22px;font-weight:600;text-align:center;}
.standard h4 {display:inline-block;background-color:#EAF5F5;border-radius:20px;padding:10px 20px;margin-bottom:10px;color:#197272;font-weight:600;}
.standard ul li {text-align:center;}
.standard ul p {text-align:left;}
.standard ul p, .standard ul li ul {border-bottom:1px dotted #ccc;margin-bottom:20px;padding-bottom:20px;}
.standard ul li ul li {padding:3px 0;text-align:left;}
.standard ul li ul li em {color:#333;font-weight:500;}

/* 575px 이하 해상도에서 해석하는 코드 */
@media (max-width: 575px) {	
	.apply-list table {width:600px;}
	.list-wrap .panel-body .info {max-height:350px;}
}

/* 991px 이하 해상도에서 해석하는 코드 */
@media (max-width:991px){ 

	/* welcome */
	.welcome {margin:0;}
	.welcome .first {font-size:16px;}
	.welcome .first img {width:100px;}
	.welcome .first p {margin-top:20px;}
	.welcome .first em {margin-top:0;font-size:20px;}
	.welcome .mid {margin:10px 0;font-size:16px;}
	.welcome .mid p {padding:10px 0;line-height:1.5;}
	.welcome::after {bottom:30px;height:300px;background-size:55%;}

	/* history */

	.history::after {left:65px;}
	.history .list {margin-bottom:20px;}

	.history .list h3 {width:60px;margin-bottom:10px;font-size:20px;}
	
	.history .list ul li::before {margin-right:10px;}
	
	.history .list ul {width:auto;}
	.history .list ul li {margin-bottom:15px;}
	.history .list ul li p {float:none;width:auto;margin-left:20px;}
	.history .list ul li time {display:inline-block;}

	
	/* program */
	.class-area h3 {margin-bottom:20px;font-size:20px;word-break:keep-all;}
	.class-area h3 span {font-size:16px;}
	.class-area .class > li {width:100%;margin:15px 0;padding:20px 30px 30px; height: 400px;}
	.class-area .class li h4 {font-size:20px;}
	.class-area .class li ul li {font-size:16px;}
	.class-area .class li ul li span {font-size:14px;}
	.class-area p {font-size:14px;}

	/* map */
	#daumRoughmapContainer1672830445828 .wrap_map {height:250px !important;}

	/* cup */
	.list-wrap .panel-info {border-radius:0 15px 0 15px;padding:15px;}
	.list-wrap .panel-info > .panel-heading .badge {font-size:13px;padding:6px 10px;margin-right:5px;}
	.list-wrap .panel-title > a {font-size:16px;}
	.list-wrap .panel-title time {float:none;display:block;background-size:14px;font-size:13px;}
	.list-wrap .panel-body h4 {margin:10px 0 30px;font-size:20px;}	

	.list-wrap .btn-area {margin-top:15px;}
	.list-wrap .btn-area .ok {padding:15px 0;}
	.list-wrap .btn-area .btn-primary {width:100%;height:45px;border-radius:0 15px 0 15px;font-size:15px;}	
	
	

	.apply h2 {font-size:18px;}
	.apply .modal-dialog {width:90%;margin:15px auto;}
	.apply .modal-body {padding:0 20px 15px;}
	.apply-list {overflow:hidden;padding:10px 0;}
	.apply-list:first-child h3 {float:none}
	.apply-list h3 {float:none;width:80px;background:none;padding:0;margin:3px 15px 0 0;text-align:left;}
	.apply-list .apply-tit {display:block;}
	.apply-list .apply-row li {float:none;overflow:hidden;width:auto;padding:5px 0;}
	.apply-list .apply-row li h3 {float:left;} 
	
	.apply-list .apply-opt, .apply-list .bank-name {float:left;width:100%;margin-top:0px;}
	.apply-list .apply-opt select, .apply-list .bank-name input {margin-top:8px;}
	.apply-list .apply-memo {float:none;width:100%;}
	
	
	.apply-player {overflow-x:auto;}

	.apply-list table {margin-top:10px;}
	.apply-list table th, .apply-list table td {font-size:14px;}
	
	

	


	
	
	/* login */
	.login {margin-top:50px;}
	.login h2 {margin-bottom:30px;font-size:24px;}
	.login-wrap {width:90%;}

}