@charset "utf-8";

/*------------------------------------------------------------------------------------------------------------------------------------------
	File : landing.CSS
	Company : The Webstyle co.,ltd
 	Author : Jong Hoon, Park 2015-12
 	CSS 적용순서 : 아이디 > 태그와 클래스 > 클래스 > 태그
	CSS 선택자 선언순서 : Type Selector, Layout Selector, Class Selector, Etc
	CSS 속성 선언순서 : display, position, float/clear, overflow, width/height, margin/padding, border, background, color/font, align, etc
--------------------------------------------------------------------------------------------------------------------------------------------*/
/* NotoSansKR */
@font-face {
	font-family:"NotoSansKR"; font-weight:100;
	src: url("/Common/Fonts/NotoSans-Thin.eot");
  src: local("※"),
  url("/Common/Fonts/NotoSans-Thin.eot?#iefix") format("embedded-opentype"),
  url("/Common/Fonts/NotoSans-Thin.woff") format("woff");
}

@font-face {
	font-family:"NotoSansKR"; font-weight:300;
	src: url("/Common/Fonts/NotoSans-Light.eot");
  src: local("※"), url("/Common/Fonts/NotoSans-Light.eot?#iefix") format("embedded-opentype"),
  url("/Common/Fonts/NotoSans-Light.woff") format("woff");
}

@font-face {
	font-family:"NotoSansKR"; font-weight:400;
	src: url("/Common/Fonts/NotoSans-Regular.eot");
  src: local("※"), url("/Common/Fonts/NotoSans-Regular.eot?#iefix") format("embedded-opentype"),
  url("/Common/Fonts/NotoSans-Regular.woff") format("woff");
}

@font-face {
	font-family:"NotoSansKR"; font-weight:500;
	src: url("/Common/Fonts/NotoSans-Medium.eot");
  src: local("※"), url("/Common/Fonts/NotoSans-Medium.eot?#iefix") format("embedded-opentype"),
  url("/Common/Fonts/NotoSans-Medium.woff") format("woff");
}

@font-face {
	font-family:"NotoSansKR"; font-weight:700;
	src: url("/Common/Fonts/NotoSans-Bold.eot");
  src: local("※"), url("/Common/Fonts/NotoSans-Bold.eot?#iefix") format("embedded-opentype"),
  url("/Common/Fonts/NotoSans-Bold.woff") format("woff");
}

.landing-wrap img{width:100%;}

.content-landing {width:1000px; margin:0 auto; font-family:"NotoSansKR";}

.landing-wrap {display:block; position:relative;}

.landing-wrap .landing-header {display:block; position:relative;}

.landing-wrap .landing-body {display:block; position:relative;}
.landing-wrap .landing-body .ld-content {display:block; position:relative;}
.landing-wrap .landing-body .ld-content .content-img {display:block; position:relative; width:100%;}
.landing-wrap .landing-body .ld-content .content-mobimg {display:none; position:relative; width:100%;}
.landing-wrap .landing-body .ld-content .form {display:block; position:absolute; width:320px; top:30px; right:30px;}
.landing-wrap .landing-body .ld-content.type-wide .form {width:410px;}
.landing-wrap .landing-footer {display:block; position:relative;}

/* m-header,m-footer - 모바일 */
.m-landingHeader {display:none;}
.m-landingFooter {display:none;}

/* reg-wrap */
.reg-wrap {display:block; position:relative; width:100%; padding:30px; border-radius:3px; background-color:#fff; box-shadow: 9.405px 12.944px 15.04px 0.96px rgba(0, 0, 0, 0.23);}
.reg-wrap .reg-header {display:block; position:relative;}
.reg-wrap .tit {font-size:26px; color:#50555b;}
.reg-wrap .tit span {font-weight:700;}
.reg-wrap .txt {margin-top:10px; font-size:13px; color:#666;}
.reg-wrap .reg-header + .reg-body {margin-top:25px;}
.reg-wrap .reg-body {display:block; position:relative;}
.reg-wrap .qustion-group {display:block; position:relative; margin-top:30px;}
.reg-wrap .inp-group  {display:block; position:relative; margin-top:-10px;}
.qustion-group .q-row {display:block; position:relative;}
.qustion-group .q-row + .q-row {margin-top:20px;}
.qustion-group .q-row .txt-question {display:block; position:relative; padding-left:23px; font-size:14px; color:#666; line-height:1.4;}
.qustion-group .q-row .txt-question .num {display:block; position:absolute; left:0;}
.qustion-group .q-row .txt-question + .answer {margin-top:10px;}
.qustion-group .q-row .answer {display:block; position:relative; padding-left:23px; text-align:left;}
.qustion-group .q-row .answer.inp-rwo {display:block; position:relative; padding-left:23px; text-align:right;}
.reg-wrap .agree-group {display:block; position:relative; margin-top:20px; padding-top:20px; border-top:1px solid #efefef;}
.reg-wrap .agree-group .agree-txt {font-size:14px; color:#666; line-height:1.4;}
.reg-wrap .agree-group .agree-txt a {display:inline-block; position:relative; top:-2px; color:#000876; text-decoration:underline;}
.reg-wrap .agree-group .agree-txt + .answer {margin-top:10px;}
.reg-wrap .agree-group .answer {display:flex; flex-flow:row; position:relative; padding-left:23px; text-align:left;}
.reg-wrap .btn-wrap {margin-top:30px;}

/* Check */
.form-check {display:inline-block; position:relative; margin:0; vertical-align:top;}
.form-check .inp-wrap {display:flex; flex-flow:row wrap;}
.ld-content .form .form-check label {display:inline-flex;/*display:block;*/ position:relative; width:50%; margin-top:5px;}
.form-check label > span {display:inline-block; position:relative; padding:0 0 0 35px; font-size:14px; line-height:25px; color:#666;}
.form-check label > span:before, .form-check label > span:after {content:''; position:absolute; left:0; top:0;}
.form-check label > span:before {top:0; width:25px; height:25px; border-radius:50%; background:#cccccc;}
.form-check label > span:after {width:12px; height:7px; left:6px; top:7px; background:none; border-left:2px solid #fff; border-bottom:2px solid #fff; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.form-check label > input {position:absolute; left:0; top:0; width:25px; height:25px; opacity:0; z-index:1;}
.form-check label > input:checked + span:before {background-color:#1b3c6a;}
/*.form-check label > input[type="checkbox"]:checked + span:before {background-color:#1b3c6a;}
.form-check label > input[type="checkbox"]:checked + span:after {width:10px; height:7px; background:none; border-left:2px solid #2dabe2; border-bottom:2px solid #f68c30; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
.form-check label > input[type="radio"] + span:before {border-color:#ccc; border-radius:50%;}
.form-check label > input[type="radio"]:checked + span:after {top:4px; left:4px; width:12px; height:12px; border-radius:50%; background:#2dabe2;} */

/* input */
input[type=text], input[type=password] {font-size:14px; color:#333; font-family:"NotoSansKR";}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {font-family:"NotoSansKR"; color:#999;}/* IE 10 + */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {font-family:"NotoSansKR"; color:#999;}/* Webkit Browser */
input:-moz-placeholder, textarea:-moz-placeholder {font-family:"NotoSansKR"; color:#999;}/* Mozilla Firefox 4 to 18 */
input::-moz-placeholder, textarea::-moz-placeholder {font-family:"NotoSansKR"; color:#999;}/* Mozilla Firefox 19+ */
select {appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;}
select::-ms-expand {display:none;}
:root select {padding:0px 30px 0px 10px;}

.inp-row {display:block; position:relative; width:100%; margin-top:10px;}
.inp-wrap {display:block; position:relative; width:100%;}
.inp-wrap.required:before {display:block; position:absolute; height:33px; top:2px; left:10px; font-size:16px; color:#ff7059; content:"*"; line-height:33px; z-index:1;}
.inp-wrap.required:before + input:focus {display: none;}
.inp-wrap .inp {width:100%;}

.inp-wrap .inp-default {height:33px; padding:0 20px 0 25px; border:transparent; border-radius:2px; background-color:#f3f3f3; line-height:33px;}
.inp-wrap .sel-default{width:100%; height:33px; padding:0 0 0 25px; border:transparent; border-radius:2px; font-family:"NotoSansKR"; font-size:14px; color:#999; line-height:33px; background:url('/Images/Common/btn_sel_arrow_on.png') #f3f3f3 right 10px center no-repeat; background-size:12px;}

/* button */
.btn:hover {opacity:1;}
.btn-submit {width:100%; height:50px; border-radius:2px; line-height:50px;}
.btn-submit span {font-weight:300; font-size:16px; color:#fff;}
/* .btn-submit.type01 {background:linear-gradient(-45deg, 1b3c6a 0%, #3c8ce7, 45%, #00eaff 55%, #1b3c6a 100%); background-size:400% 400%;} */
.btn-submit.type01 {background:linear-gradient(-45deg, #3c8ce7, #3c8ce7,  #00eaff, #3c8ce7, #3c8ce7); background-size:500% 500%; }
.btn-submit.type02 {background:linear-gradient(-45deg, #3aaad5,#d53abd, #873ad5, #3aaad5); background-size:400% 400%;}

/* .btn-submit:hover {width:calc(100% + 6px); height:56px; transition:all 0.3s ease-in-out ; -webkit-transition:all 0.3s ease-in-out;} */
.btn-submit.type01:hover,
.btn-submit.type02:hover {background:linear-gradient(#1b3c6a 0%, #1b3c6a 45%, #1b3c6a 55%, #1b3c6a 100%); transform: scale(1.05); transition:all 0.3s ease-in-out ; -webkit-transition:all 0.3s ease-in-out;}
.btn-submit:hover span {font-size:16px;}

/* type-wide */
.ld-content.type-wide .form .inp-group {display:flex; flex-wrap:wrap; margin:-10px 0 0 -10px;}
.ld-content.type-wide .form .inp-group .inp-row {width:calc(50% - 10px); margin:10px 0 0 10px;}
.ld-content.type-wide .form .form-check label {display:inline-flex;  position:relative; width:33%; margin-top:5px;}

/* 애니메이션 키 프레임 */
/*@-webkit-keyframes gradient {
    0%{background-position:0% 0%}
    100%{background-position:100% 100%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}

@-ms-keyframes gradient {
    0%{background-position:0% 50%}
    100%{background-position:100% 50%}
}*/

@-webkit-keyframes gradient {
    0%{background-position:100% 50%}
    25%{background-position:75% 50%}
    50%{background-position:50% 50%}
    75%{background-position:25% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    25%{background-position:25% 50%}
    50%{background-position:50% 50%}
    75%{background-position:75% 50%}
    100%{background-position:100% 50%}
}

@-ms-keyframes gradient {
    0%{background-position:0% 50%}
    25%{background-position:25% 50%}
    50%{background-position:50% 50%}
    75%{background-position:75% 50%}
    100%{background-position:100% 50%}
}

/* @-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@-ms-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
} */
/* @-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
} */
/* .gradient{
    -webkit-animation: gradient 8s ease infinite !important;
    -moz-animation: gradient 8s ease infinite !important;
    animation: gradient 8s ease infinite !important;

} */
.gradient{
    -webkit-animation: gradient 8s linear infinite;
    -moz-animation: gradient 8s linear infinite;
    animation: gradient 8s linear infinite;

}
@media (max-width: 768px) {
	/* header */
	.landing-wrap .landing-header {display:none;}
	.m-landingHeader {display:block; position:relative; width:100%; height:35px; background-color:#3c3c3c;}
	.m-landingHeader .header-wrap {display:block; position:relative; width:100%; height:100%}
	.m-landingHeader .logo {display:block; position:relative; width:100%; height:100%;}
	.m-landingHeader .logo img {width:100px; height:auto; padding:10px 0 0 15px;}
	/* content */
	.content-landing {width:100%;}

	.landing-wrap .landing-body .ld-content .form,
	.landing-wrap .landing-body .ld-content.type-wide .form {position:relative; width:100%; top:0; right:0;}

	.landing-wrap .landing-body .ld-content .content-img {display:none;}
	.landing-wrap .landing-body .ld-content .content-mobimg {display:block;}

	.ld-content.type-wide .form .form-check label {width:50%}
	/* footer */
	.landing-wrap .landing-footer {display:none;}
	.m-landingFooter {display:block; position:relative; width:100%; height:25px; background-color:#3c3c3c;}
	.m-landingFooter .footer {display:block; position:relative;}
	.m-landingFooter .footer::after {content:""; display:block; clear:both;}
	.m-landingFooter .footer .copyright {display:block; position:relative; float:left; margin-left:15px;}
	.m-landingFooter .footer .number {float:right; margin-right:15px;}
	.m-landingFooter .footer p {display:inline-block; color:#9b9b9b; font-size:0.6rem; font-family:"NanumGothic"; line-height:25px;}
	.m-landingFooter .footer p + p {padding-left:8px;}
	.m-landingFooter .footer .line {display:inline-block; position:relative;}
	.m-landingFooter .footer .copyright .line::after{display:block; position:absolute; top:0; left:61px; content:"|";}
	.m-landingFooter .footer .number .line::after{display:block; position:absolute; top:0; left:45px; content:"|";}

}