@charset "utf-8";

/* ======================================================
    .msec-visual
=========================================================*/
.msec-visual {width: 100%; height: auto; position: relative; }
.msec-visual .item {position: relative;}
.msec-visual .item .img {height: 52vw; max-height: 520px}
.msec-visual .item .img.vis01 {background: url("/theme/DesignVii/_Img/Main/mvisual01.jpg") no-repeat center center; background-size: cover;}
.msec-visual .item .img.vis02 {background: url("/theme/DesignVii/_Img/Main/mvisual02.jpg") no-repeat center center; background-size: cover;}
/*메인 텍스트 이미지 */
.msec-visual .item .main-txt { display: none; position: absolute; top: 55%; margin-right: -5%; opacity: 0; width: 334px; transform: translateY(-50%);animation: fadeLeft 0.5s 0.2s 1 forwards;}
.msec-visual .item .code {position: absolute; bottom: 5px; right: 5px; color: #fff; background: rgba(0,0,0,0.4); padding: 10px;}

.msec-visual #logo {display: none; position: absolute; top: 24px; left: 24px; padding: 0; float: none;}
.msec-visual #logo a {display: flex; flex-direction: column; text-align: left; background: url("/theme/DesignVii/_Img/Main/top-text.png") no-repeat 45px center; background-size: auto;width:250px;}
.msec-visual #logo .logo-symbol {margin-bottom: 0; animation: spin 7s infinite linear; text-align: left; width:38px;}

.msec-visual #logo:hover a {background: url("/theme/DesignVii/_Img/Main/top-text.png")no-repeat 45px center; }

@keyframes spin {
	0% {transform: rotate(0)}
	100% {transform: rotate(360deg)}
}
@keyframes fadeLeft {
	0% {right: -10%; opacity: 0;}
	100% {right: 0; opacity: 1;}
}



.msec-visual .owl-nav {display: none;}
.msec-visual .owl-dots {position: absolute; bottom: 20px; right: 15px;}
.msec-visual .owl-dots .owl-dot {width: 3vw; max-width: 16px; height: 3vw; max-height: 16px; border-radius: 50%; background: #959595; margin: 0 5px; border: none; outline: none;}
.msec-visual .owl-dots .owl-dot.active {background: #fff;}

	@media only screen and (max-width:999px){
		.msec-visual .owl-dots {bottom: 2vw; right: 3vw; }
		.msec-visual #logo {background: #0a0d19; width: 100vw; height: 50px; top: -50px; left: 0; }
		.msec-visual #logo a {width: 220px; margin: auto;position: relative; top: 6px;}
		.msec-visual .item .main-txt {margin-right: -6%; width: 35%;}
		.msec-visual .item .code {padding: 5px; font-size: 12px;}

}

/* ======================================================
    #box-wrap
=========================================================*/
#box-wrap {}
#box-wrap .box {width: 90%;background:#fff; margin: 5%; border:1px solid #0a77d4;  position: relative; padding: 5px 40px 30px; box-sizing: border-box;}/**/
#box-wrap .box .box-title {background: #0a77d4; position: absolute; padding: 5px; top: 0; left: 50%; transform: translate(-50%,-50%); border-radius: 50px; min-width: 220px;}
#box-wrap .box .box-title p { color: #fff; font-size: 21px; text-align: center;}

#box-wrap .box .enter-circle {display: flex; justify-content: space-around; align-content: center; width: 70%; margin-left: 15%;}
#box-wrap .box .enter-circle li {background:#47c1e3; width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; flex-direction: column; border-radius: 50%; padding: 10px; box-sizing: border-box;}
#box-wrap .box .enter-circle li:nth-child(2) {background: #2a7bc1;}
#box-wrap .box .enter-circle li:nth-child(3) {background: #2a7bc1;}
#box-wrap .box .enter-circle li span.num {color: #fff; font-size: 30px; font-weight: bold;}
#box-wrap .box .enter-circle li p {color: #fff; font-size: 16px; word-break: keep-all; text-align: center; height: 40%; margin-top: 5px; line-height:120%}

#box-wrap .box .enter-text {margin-top: 30px; margin-left: 15px;}
#box-wrap .box .enter-text li {list-style: decimal; margin: 20px 0;}
#box-wrap .box .enter-text li p {color: #262626; font-size: 16px;}
#box-wrap .box .enter-text li p span.arrow {display: inline-block; width: 17px; height: 17px; background: #75a0ad; border-radius: 50%; position: relative; top: 2px;}
#box-wrap .box .enter-text li p span.arrow:before {content:""; width: 6px; height: 6px; border-right: 1.5px solid #fff; border-bottom: 1.5px solid #fff; display: block; position: absolute; top: 50%; left: 42%; transform: translate(-50%,-50%) rotate(-45deg);}
#box-wrap .box .enter-text li .red {color: #ef0027;}
#box-wrap .box .enter-text li .blue {color: #002e79; font-size: 14px;}
#box-wrap .box .enter-text li .violet {color: #7225c9}

#box-wrap .box .m-notice {padding: 30px; box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}
#box-wrap .box .m-notice li {display: inline-block; font-size: 16px; color: #000; font-family: "S-CoreDream-5Medium";}
#box-wrap .box .m-notice li:nth-child(odd) {width: 20%;}
#box-wrap .box .m-notice li:nth-child(even) {width: 79%;}



	
	@media only screen and (max-width:999px){
		#box-wrap {margin-top: 40px;}
		#box-wrap .box {padding: 30px 20px 20px;}
		
		#box-wrap .box .box-title {padding: 5px 10px; min-width: 280px;}
		#box-wrap .box .box-title p {font-size: 18px;}
		
		#box-wrap .box .enter-circle li {width: 12vw; min-width: 100px; height: 12vw; min-height: 100px; padding: 1vw;}
		#box-wrap .box .enter-circle li span.num {font-size: 21px;}
		#box-wrap .box .enter-circle li p {font-size: 13px; margin-top: 5px; height: 80%; line-height: 18px;}
		
		#box-wrap .box .enter-text li p	 {font-size: 14px;}
		

	}

	@media only screen and (max-width:680px){
		#box-wrap .box .enter-circle {width: 100%; margin-left: 0;}
		#box-wrap .box .m-notice li:nth-child(odd) {width: 32%;}
		#box-wrap .box .m-notice li:nth-child(even) {width: 66%;}
}
	@media only screen and (max-width:414px){
		#box-wrap .box .enter-circle li {min-width: 90px; min-height: 90px;}
		#box-wrap .box .enter-circle li span.num {font-size: 18px;}
		#box-wrap .box .enter-circle li p {font-size: 13px; margin-top: 5px; height: 50%; line-height: 18px;}
		
		
}



/* ======================================================
    .attend
=========================================================*/
		
.attend {width: 90%; margin: auto; padding: 60px 0 30px 0 ; box-sizing: border-box;}
.attend .title {position: relative;}
.attend .title:before {content: ""; width: 100%; height:0.5px; background: #081c4f; display: block; overflow: hidden; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.attend .title p.violet {font-size: 26px; color: #081c4f; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; padding: 10px; box-sizing: border-box; text-align: center;}
.attend ul {margin-top: 50px; text-align: center}
.attend ul li {}
.attend ul li p {color: #262626; font-size: 16px;}
.attend ul span.bar {display: inline-block; width: 1px; height: 66px; background: #999999; margin: 0 23px; display: none;}
.attend ul.inputbox {margin-top: 35px; display: flex; }
.attend ul.inputbox li {height: 66px; display: inline-flex; align-items: center; width:100%;}
.attend ul.inputbox li form {display: flex; height: 100%; align-content: center; width: 100%;}
.attend ul.inputbox span.bar {}
.attend ul.inputbox input[type="text"] {height: 100%; width: 40%; border-radius: 3px; border: 1px solid #081c4f; margin-right: 6px; padding: 14px; box-sizing: border-box; outline: none;}
.attend ul.inputbox input[type="password"] {height: 100%; width: 40%; border-radius: 3px; border: 1px solid #081c4f; margin-right: 6px; padding: 14px; box-sizing: border-box; outline: none;}
.attend ul.inputbox input::-webkit-input-placeholder {color: #666666; font-size: 16px;font-family: 'S-CoreDream-4Regular';}
.attend ul.inputbox .btn-enter {height: 100%; width: 190px; background: #2573c9; display: flex; justify-content: center; align-items: center; border: none; border-radius: 3px; outline: none;}
.attend ul.inputbox .btn-enter p {color: #fff; font-size: 24px; display: flex; align-items: center;}
.attend ul.inputbox .btn-enter p span.enter {display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; position: relative; margin-left: 15px;}
.attend ul.inputbox .btn-enter p span.enter:before {content: ""; display: block; width: 0; height: 0; border: 8px solid transparent; border-left: 10px solid #fff; position: absolute; top: 50%; left: 50%; transform: translate(-16%, -50%);}
.attend ul.inputbox .btn-pre_ {height: 100%; width: 190px; background: #47c1e3; display: flex; justify-content: center; align-items: center; border: none; border-radius: 3px; outline: none;}
.attend ul.inputbox .btn-pre_ p {color: #fff;font-size: 24px; display: flex; align-items: center;}
.attend ul.inputbox .btn-pre_ p span.pre {display: inline-block; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; position: relative; margin-left: 15px;}
.attend ul.inputbox .btn-pre_ p span.pre:before {content:""; display: block; background: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 3px; height: 17px;}
.attend ul.inputbox .btn-pre_ p span.pre:after {content:""; display: block; background: #fff; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width: 17px; height: 3px;}
.attend p.code {color: #9fa7bc; font-size: 13px; margin: 40px auto 10px; text-align: center;}


/* 로그인 비활성화일때 */
.msec-cont .btn-enter-txt { font-size: 1rem; color: #2b2b2b; line-height: 150%; word-break: keep-all; text-align: center; }
.msec-cont .btn-enter-full { height: 50px; line-height: 50px; width: 90%; max-width: 260px; background: #0a77d4; color: #fff; font-size: 24px; display: block; border: none; border-radius: 3px; margin: 20px auto 0; text-align: center; }
/* // 로그인 비활성화일때 */

	@media only screen and (max-width:999px){
		.attend .title p.violet {font-size: 21px; min-width: 210px;}
		.attend ul li{margin-bottom: 20px;}
		.attend ul li p {font-size: 14px; word-break: keep-all;}
		
		.attend ul span.bar {display: none;}

		.attend ul.inputbox {flex-direction: column;}
		.attend ul.inputbox li {width: 100%; height: auto; flex-direction: column;}
		.attend ul.inputbox li form {width: 100%; height: auto; flex-direction: column;}
		.attend ul.inputbox input[type="text"] {width: 100%; margin-right: 0; margin-bottom: 10px;}
		.attend ul.inputbox input[type="password"] {width: 100%; margin-right: 0; margin-bottom: 10px;}		
		.attend ul.inputbox input::-webkit-input-placeholder {font-size: 14px;}
		.attend ul.inputbox .btn-enter {width: 100%; padding: 10px;}
		.attend ul.inputbox .btn-enter p {font-size: 21px;}
		.attend ul.inputbox .btn-enter p span.enter {width: 20px; height: 20px; margin-left: 12px;}
		.attend ul.inputbox .btn-enter p span.enter:before {border: 6px solid transparent; border-left: 7px solid #fff; }
		
		.attend ul.inputbox .btn-pre_ {width: 100%; padding: 10px;}
		.attend ul.inputbox .btn-pre_ p {font-size: 21px;}
		.attend ul.inputbox .btn-pre_ p span.pre {width: 20px; height: 20px; margin-left: 12px;}
		.attend ul.inputbox .btn-pre_ p span.pre:before {width: 2px; height: 14px;}
		.attend ul.inputbox .btn-pre_ p span.pre:after {width: 14px; height: 2px;}
		
		.msec-cont .btn-enter-full { height: 40px; line-height: 40px; max-width: 500px; font-size: 0.825rem; }
	}


















/* ======================================================
    #attendpop-wrap
=========================================================*/
#attendpop-wrap {position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2601; background: #fff; width: 90%; max-width: 535px; display: none;}
#attendpop-wrap .attendpop {}
#attendpop-wrap .attendpop .popclose {position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; z-index:1; cursor: pointer;}
#attendpop-wrap .attendpop .popclose:before {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); background: #fff; width: 1px; height: 35px; }
#attendpop-wrap .attendpop .popclose:after {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); background: #fff; width: 1px; height: 35px; }
#attendpop-wrap .attendpop p {font-size: 14px;}
#attendpop-wrap .attendpop p span.blue {color: #0aa3d4;}
#attendpop-wrap .attendpop .title {height: 80px; background: #0aa3d4;}
#attendpop-wrap .attendpop .title p {color: #fff; font-size: 30px; line-height: 80px; text-align: center;}
#attendpop-wrap .attendpop .inputbox {width: 88%; margin: 35px auto;}
#attendpop-wrap .attendpop .inputbox ul {}
#attendpop-wrap .attendpop .inputbox ul li {height: auto; margin-bottom: 15px; display: flex; flex-direction: column;}
#attendpop-wrap .attendpop .inputbox ul li:first-child {flex-direction: row;}
#attendpop-wrap .attendpop .inputbox ul li span {width: 100%; display: block; }
#attendpop-wrap .attendpop .inputbox ul li span:first-child {width: 100%; text-align: justify; color: #0aa3d4; line-height: 200%}
#attendpop-wrap .attendpop .inputbox ul li span.w100 {width: 100%!important;}
#attendpop-wrap .attendpop .inputbox ul li span.dn {display: none!important;}
#attendpop-wrap .attendpop .inputbox ul li select {width: 33%; float: left; height: 40px; border-radius: 2px; border: 1px solid #9e9e9e; outline: none;}
#attendpop-wrap .attendpop .inputbox ul li select:last-child {float: left; width: 34%;}
#attendpop-wrap .attendpop .inputbox ul li input {border-radius: 2px; border: 1px solid #9e9e9e; outline: none;}
#attendpop-wrap .attendpop .inputbox ul li input[type="text"] {height: 100%; width: 100%; padding: 10px; box-sizing: border-box;}
#attendpop-wrap .attendpop .inputbox ul li input[type="password"] {height: 100%; width: 100%; padding: 10px; box-sizing: border-box;}
#attendpop-wrap .attendpop .inputbox ul li select[name="mb_3"] {height: 100%; width: 100%; padding: 10px; box-sizing: border-box;}
#attendpop-wrap .attendpop .inputbox ul li select[name="mb_4"] {height: 100%; width: 100%; padding: 10px; box-sizing: border-box;}
#attendpop-wrap .attendpop .inputbox ul li input::-webkit-input-placeholder {}
#attendpop-wrap .attendpop .inputbox ul li button {width: 100%; display: block; margin: auto; background: #0aa3d4; border: none; border-radius: 6px; height: 66px; outline: none;}
#attendpop-wrap .attendpop .inputbox ul li button p {color: #fff; font-size: 24px;}
#attendpop-wrap .attendpop .privacy {width: 88%; margin: 0 auto 40px;}
#attendpop-wrap .attendpop .privacy .title {height: 60px; line-height: 60px; border-top: 2px solid #707070; border-bottom: 1px solid #d2d2d2; background: none; text-align: center; font-size: 21px; color: #000;}
#attendpop-wrap .attendpop .privacy p {margin: 10px 0;}
#attendpop-wrap .attendpop .privacy ul {}
#attendpop-wrap .attendpop .privacy ul li {display: flex; align-items: center; border: 1px solid #959595; border-bottom: none; background: #e7e7e7;}
#attendpop-wrap .attendpop .privacy ul li:last-child {border-bottom: 1px solid #959595;}
#attendpop-wrap .attendpop .privacy ul li span {display: inline-block; width: 70%; background: #fff; padding: 10px 15px; box-sizing: border-box;}
#attendpop-wrap .attendpop .privacy ul li span:first-child { background: #e7e7e7; color: #000; font-weight: 600; width: 28%; margin-right: 2%; text-align: center; word-break: keep-all;}
#attendpop-wrap .attendpop .privacy ul li span p {margin: 0;}
#attendpop-wrap .attendpop .privacy .info p {margin: 0;}
#attendpop-wrap .attendpop .privacy h2 {font-family: 'S-CoreDream-5Medium';}


	@media only screen and (max-width:999px){
		#attendpop-wrap {height: 90vh; overflow: scroll; top: 50vh; transform: translate(-50%,-50%)}
		
		#attendpop-wrap .attendpop .popclose {position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; z-index:1; cursor: pointer;}
		#attendpop-wrap .attendpop .popclose:before {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); background: #fff; width: 1px; height: 25px; }
		#attendpop-wrap .attendpop .popclose:after {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); background: #fff; width: 1px; height: 25px; }
		#attendpop-wrap .attendpop .title {height: 60px;}
		#attendpop-wrap .attendpop .title p {line-height: 60px; font-size: 24px;}
		
		#attendpop-wrap .attendpop .inputbox ul li {height: auto; margin-bottom: 10px;}
		#attendpop-wrap .attendpop .inputbox ul li button {height: 45px;}
		#attendpop-wrap .attendpop .inputbox ul li button p {font-size: 18px;}
		
		#attendpop-wrap .attendpop .privacy .title {height: 50px; line-height: 50px; font-size: 16px;}
		
	
	}



/* ======================================================
    .browser
=========================================================*/
.browser {background: #fff; width: 100%; padding: 0px; box-sizing: border-box; margin-top: 20px;}/* border-top: 1px solid #0a77d4;*/
.browser .subtitle {font-size: 1.1rem; color: #2573c9; font-family: "S-CoreDream-5Medium"; margin-bottom: 0.5rem;}
.browser p {font-family: "S-CoreDream-5Medium"; color: #2b2b2b; font-size: 1rem; line-height: 150%; word-break: keep-all;}
.browser .blue {color: #2573c9;font-family: "S-CoreDream-5Medium"; }
.browser .red {color: #e53c37;font-family: "S-CoreDream-5Medium"; }
.browser li {margin: 1rem; margin-left: 0;white-space: nowrap;}
.browser li .browser-img {width: 40px; display: inline-block; position: relative; margin-right: 5px;}
.browser li img {width: 100%;}
.browser li a {color: #e53c37; font-family: "S-CoreDream-5Medium"; font-size: 1rem; word-break: keep-all;}
.browser li span {color: #2b2b2b;font-family: "S-CoreDream-5Medium"; font-size: 1rem;}

	@media only screen and (max-width:485px){
		#box-wrap .box .m-notice {padding: 15px;}
		#box-wrap .box .m-notice li  {font-size: 14px;}
		.browser {padding: 15px; margin-top: 20px;}
		.browser p {font-size: 14px;}
		.browser li {}
		.browser li .browser-img {width: 25px; margin-right: 3px;}
		.browser li a {font-size: 12px;}
		.browser li span {font-size: 12px;}

}


/* ======================================================
    .
=========================================================*/
.reg-dot {color:#ff2200;}



/* ======================================================
    .
=========================================================*/


/* ======================================================
    .
=========================================================*/