/**
------------------------------------------------------------
 * @프로그램명 :login 스타일시트
 * @파일명 :login.css
 * @작성일 :2017. 12. 31.
 * @작성자 :김동우
------------------------------------------------------------
*/

@font-face {
  font-family:'Noto Sans KR';
  font-style:normal;
  font-weight:100;
  src:/*url(../font/NotoSansKR/NotoSansKR-Thin.woff2) format('woff2'),*/
       url(../font/NotoSansKR/NotoSansKR-Thin.woff) format('woff'),
       url(../font/NotoSansKR/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family:'Noto Sans KR';
  font-style:normal;
  font-weight:300;
  src:/*url(../font/NotoSansKR/NotoSansKR-Light.woff2) format('woff2'),*/
       url(../font/NotoSansKR/NotoSansKR-Light.woff) format('woff'),
       url(../font/NotoSansKR/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
   font-family:'Noto Sans KR';
   font-style:normal;
   font-weight:400;
   src:/*url(../font/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2'),*/
        url(../font/NotoSansKR/NotoSansKR-Regular.woff) format('woff'),
        url(../font/NotoSansKR/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
   font-family:'Noto Sans KR';
   font-style:normal;
   font-weight:500;
   src:/*url(../font/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2'),*/
        url(../font/NotoSansKR/NotoSansKR-Medium.woff) format('woff'),
        url(../font/NotoSansKR/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
   font-family:'Noto Sans KR';
   font-style:normal;
   font-weight:700;
   src:/*url(../font/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2'),*/
        url(../font/NotoSansKR/NotoSansKR-Bold.woff) format('woff'),
        url(../font/NotoSansKR/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
   font-family:'Noto Sans KR';
   font-style:normal;
   font-weight:900;
   src:/*url(../font/NotoSansKR/NotoSansKR-Black.woff2) format('woff2'),*/
        url(../font/NotoSansKR/NotoSansKR-Black.woff) format('woff'),
        url(../font/NotoSansKR/NotoSansKR-Black.otf) format('opentype');
} 
 
@font-face {
    font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
    src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
    url('../font/GmarketSans/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../font/GmarketSans/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
    src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
    url('../font/GmarketSans/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../font/GmarketSans/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
    font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
    src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
    url('../font/GmarketSans/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
    url('../font/GmarketSans/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

html, body {font-family:"Noto Sans KR", "맑은고딕", "Malgun Gothic", "Apple SD Gothic Neo", "돋움", dotum, Arial, sans-serif;font-size:14px;color:#000;}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family:"Noto Sans KR", "맑은고딕", "Malgun Gothic", "Apple SD Gothic Neo", "돋움", dotum, Arial, sans-serif;font-weight:500; line-height:1.1; color:inherit;}
h1, .h1, h2, .h2, h3, .h3 {margin-top:10px; margin-bottom:10px}
a {color:#3b3f42; text-decoration:none}
a, a:visited, a:focus, a:active, :visited, :focus, :active, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {outline:0}
a:hover, a:focus {text-decoration:none;}

html {width:100%; height:100%;}
body {width:100%; height:100%; overflow:auto; background: linear-gradient(to right,  rgba(101,144,192,1) 0%,rgba(71,121,181,1) 100%);}

.login_section {width:100%; height:100%;}
.login_section:before {content:""; display:block; width:950px; height:725px; position:absolute; left:0; top:0; opacity:0.8;
    background:url(../images/loginQC/login_shape.png) no-repeat left top;}
.login_section:after {content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0.8;
    background: linear-gradient(150deg, rgba(255,255,255,1) 0%, rgba(125,185,232,0) 100%);}

.login_section .login_effect {width:950px; height:725px; position:absolute; left:0; top:0; z-index:2;}
.login_section .login_effect span {display:inline-block; width:10px; height:10px; border-radius:5px; background:#fff; position:absolute; filter: blur(1px); -webkit-filter: blur(1px); opacity:1;}
.login_section .login_effect span:after {content:""; display:block; background:#fff; position:absolute; left:0; top:0; width:12px; height:12px; left:-1px; top:-1px; filter: blur(5px); -webkit-filter: blur(5px);}

.login_section .login_effect span:nth-child(1) {left:276px; top:75px;}
.login_section .login_effect span:nth-child(2) {left:270px; top:151px;}
.login_section .login_effect span:nth-child(3) {left:407px; top:112px; animation:twinkle 3.7s ease infinite; animation-delay:0s; opacity:0;}
.login_section .login_effect span:nth-child(4) {left:520px; top:158px;}
.login_section .login_effect span:nth-child(5) {left:616px; top:123px;}
.login_section .login_effect span:nth-child(6) {left:732px; top:92px; animation:twinkle 5.3s ease infinite; animation-delay:0.6s; opacity:0;}
.login_section .login_effect span:nth-child(7) {left:447px; top:191px;}
.login_section .login_effect span:nth-child(8) {left:306px; top:247px;}
.login_section .login_effect span:nth-child(9) {left:681px; top:267px;}
.login_section .login_effect span:nth-child(10) {left:103px; top:402px; animation:twinkle 2.5s ease infinite; animation-delay:1.0s; opacity:0;}
.login_section .login_effect span:nth-child(11) {left:376px; top:359px;}
.login_section .login_effect span:nth-child(12) {left:316px; top:461px;}
.login_section .login_effect span:nth-child(13) {left:438px; top:438px;}
.login_section .login_effect span:nth-child(14) {left:550px; top:401px;}
.login_section .login_effect span:nth-child(15) {left:520px; top:485px;}
.login_section .login_effect span:nth-child(16) {left:683px; top:450px;}
.login_section .login_effect span:nth-child(17) {left:668px; top:474px;}
.login_section .login_effect span:nth-child(18) {left:777px; top:489px; animation:twinkle 4s ease infinite; animation-delay:0.3s; opacity:0;}
.login_section .login_effect span:nth-child(19) {left:693px; top:526px;}
.login_section .login_effect span:nth-child(20) {left:436px; top:622px;}
.login_section .login_effect span:nth-child(21) {left:254px; top:712px; animation:twinkle 2.3s ease infinite; animation-delay:0.44; opacity:0;}
.login_section .login_effect span:nth-child(22) {left:603px; top:653px; animation:twinkle 3.2s ease infinite; animation-delay:0.8s; opacity:0;}
.login_section .login_effect span:nth-child(23) {left:64px; top:85px;}
.login_section .login_effect span:nth-child(24) {left:103px; top:537px;}

.login_area .login_input > li input::placeholder{font-size:12px; font-weight: 500; color: #000000;}

@keyframes twinkle {
    0%      {opacity:0.3; transform:scale(1);}
    30%      {opacity:1; transform:scale(1.3);}
    70%      {opacity:1; transform:scale(1.3);}
    100%    {opacity:0.3; transform:scale(1);}
}

.login_section .login_area {padding:9% 0 0 9%; position:relative; z-index:3;}
.login_section .login_area .login_title {display:inline-block; position:relative;}
.login_section .login_area .login_title h2 {color:#ffffff; font-size:90px; line-height:90px; font-weight:700; font-family:"Gmarket Sans"; letter-spacing:-5px; text-shadow:0 11px 10px rgba(0,0,0,0.1); margin:0;}
.login_section .login_area .login_title h1 {color:#203b93; font-size:120px; line-height:120px; height:240px; font-weight:700; font-family:"Gmarket Sans"; letter-spacing:-6px; text-shadow:0 11px 10px rgba(0,0,0,0.1); 
    margin:0; display:inline-block; margin-top:20px;}
.login_section .login_area .login_title h1 span {position:relative; display:inline-block; float:left; animation:waviy 7.5s infinite; animation-delay:calc(.1s * var(--i));}
@keyframes waviy {
  0%,10%,100% {
    transform: translateY(0)
  }
  5% {
    transform: translateY(-15px)
  }
}

.login_section .login_area .login_title h1 span.heartbeat:after {animation:heartbeat 7.5s infinite; content:""; display:inline-block; color:#203b93; font-size:120px; line-height:120px; font-weight:700; 
    font-family:"Gmarket Sans"; letter-spacing:-6px; position:absolute; left:0; top:0;}
.login_section .login_area .login_title h1 span.heartbeat_q:after {content:"Q"; animation-delay:0s;}
.login_section .login_area .login_title h1 span.heartbeat_c:after {content:"C"; animation-delay:0.8s;}
@keyframes heartbeat {
  0% {transform:scale(1); filter:blur(0px); opacity:0.3;}
  20% {transform:scale(2); filter:blur(10px); opacity:0;}
  100% {transform:scale(2); filter:blur(10px); opacity:0;}
}


.login_section .login_area .login_inner {display:inline-block; padding:70px 50px 110px; margin:60px 0 0 6%; background:#fff; border-radius:30px; vertical-align:top; position:relative; box-shadow:0 20px 40px rgba(0,0,0,0.1);}
.login_section .login_area .login_inner ul.login_input {padding:0; margin:0;}
.login_section .login_area .login_inner ul.login_input li {padding:0; margin:0 0 30px; list-style:none; position:relative;}
.login_section .login_area .login_inner ul.login_input li > label {display:block; font-size:14px; color:#000; font-weight:400;}
.login_section .login_area .login_inner ul.login_input li > input {width:400px;}
.login_section .login_area .login_inner ul.login_input li > input:-webkit-autofill {transition:background-color 10000s ease-in-out 0s; -webkit-text-fill-color:#000;}
.login_section .login_area .login_inner ul.login_input li > .btn_show_pwd {display:block; width:30px; height:30px; border:0; position:absolute; right:0; bottom:0; background:url(../images/loginQC/icon_pw1.png) no-repeat center;}
.login_section .login_area .login_inner ul.login_input li > input[type=text] + button.btn_show_pwd {background:url(../images/loginQC/icon_pw2.png) no-repeat center;}

.login_section .login_area .login_inner .login_function {display:flex; justify-content:space-between; position:relative; top:-10px;}
.login_section .login_area .login_inner .login_function button#btn_findId {background:none; padding:0; border:none; transition:0.2s; color:#000; display:inline-block; font-size:14px;}
.login_section .login_area .login_inner .login_function button#btn_findId:hover {color:#0078ff;}

.login_section .login_area .login_inner button.login_btn {width:117px; height:117px; border-radius:50%; background:#000; background:#000 url(../images/loginQC/login_arrow.png) no-repeat center 40px;
    position:absolute; right:45px; bottom:-57px; border:none; text-indent:-9999px; transition:0.3s; box-shadow:0 10px 20px rgba(0,0,0,0.3);}
.login_section .login_area .login_inner button.login_btn:hover {background-color:#0078ff;}

.login_section .login_area .login_inner .login_browser_info {color:#fff; font-size:12px; position:absolute; left:30px; bottom:-80px; font-weight:200; letter-spacing:0;}
.login_section .login_area .login_inner .login_screen_info {color:#fff; font-size:12px; position:absolute; left:30px; bottom:-40px; font-weight:200; letter-spacing:0;}
.login_section .login_area .login_inner .login_copyright {color:#fff; font-size:12px; position:fixed; left:9%; bottom:40px; font-weight:200; letter-spacing:0;}

@media (max-width:1600px) {
    .login_section .login_area {padding:150px 0 150px 100px;}
    .login_section .login_area .login_title {}
    .login_section .login_area .login_title h2 {font-size:70px; line-height:70px;}
    .login_section .login_area .login_title h1 {font-size:100px; line-height:100px;}
    
    .login_section .login_area .login_inner {}
}



@media (max-width:1400px) {
    .login_section .login_area {padding:60px 0 150px; margin:0 auto; text-align:center;}
    .login_section .login_area .login_title {display:block;}
    .login_section .login_area .login_title h2 {font-size:60px; line-height:60px;}
    .login_section .login_area .login_title h1 {font-size:90px; line-height:90px; height:180px;}
    .login_section .login_area .login_title h1 span.heartbeat:after {font-size:90px; line-height:90px;}
    
    .login_section .login_area .login_inner {display:block; margin:30px auto 0; max-width:500px; text-align:left;}
    
    .login_section .login_area .login_inner .login_browser_info { bottom:-100px; display:block !important;}
    .login_section .login_area .login_inner .login_screen_info {bottom:-60px;}
    .login_section .login_area .login_inner .login_copyright {position:absolute; left:30px; bottom:-36px;}
}



@media (min-width:2100px) {
    .login_section:before {transform:scale(1.3); transform-origin:0% 0%;}
    .login_section .login_effect {transform:scale(1.3); transform-origin:0% 0%;}
    .login_section .login_area .login_title {transform:scale(1.2); transform-origin:0% 0%;}
    .login_section .login_area .login_inner {margin:60px 0 0 18%; transform:scale(1.2); transform-origin:0% 0%;}
}


/** 240821 캐릭터 적용 로그인 css **/
.login_section.login_character .login_area {padding:0;}
/* .login_section.login_character:after {background:url(../images/loginQC/bg_login_character.png) no-repeat center bottom; opacity:1;} */
.login_section.login_character:before {display:none;}
.login_section.login_character .login_area .login_title {position:absolute; left:7%; top:12%;}
.login_section.login_character .login_area .login_title h2 {color:#000; font-size:50px; line-height:50px; letter-spacing:-3px;}
.login_section.login_character .login_area .login_title h1.logo_img {background:url(../images/logo/logo_mdq_new.png) no-repeat center; display:block;
    width:508px; height:152px; background-size: 508px; }
.login_section.login_character .login_area .login_inner {position:absolute; right:0; top:0; margin-top:230px; margin-right:9%; z-index:1;}
.login_section.login_character .character_animation {background:url(../images/loginQC/bg_login_character.png) no-repeat left bottom; background-size:100%;
    height:100vh; width:100%; position:relative; top:0;}

.animation_wrap {position:absolute; width:1200px; height:1000px; transform:scale(0.4) translateX(-50%); bottom:11vw; left:45%; transform-origin:bottom left;}
.animation_wrap img {position:absolute;} 
.animation_wrap img.img_hole {animation:imghole 0.4s 0.4s linear forwards; opacity:0; bottom:200px; left:50%;}

.animation_wrap img.img_soil1 {bottom:73px; left:63px; opacity:0; animation:imgsoil1 0.2s 0.9s ease-in forwards;}
.animation_wrap img.img_soil2 {bottom:72px; right:66px; opacity:0; animation:imgsoil2 0.2s 1.1s ease-in forwards;}
.animation_wrap img.img_soil3 {bottom:80px; right:83px; opacity:0; animation:imgsoil3 0.2s 1.3s ease-in forwards;}
.animation_wrap img.img_soil4 {bottom:71px; left:64px; opacity:0; animation:imgsoil4 0.2s 1.5s ease-in forwards;}
.animation_wrap img.img_soil5_1 {bottom:71px; left:63px; opacity:0; animation:imgsoil5 0.3s 1.7s linear forwards;}
.animation_wrap img.img_soil5_2 {bottom:71px; left:63px; opacity:0; animation:imgsoil5 0.3s 2s linear forwards;}
.animation_wrap img.img_soil5 {bottom:71px; left:63px; opacity:0; animation:imgsoil5 0.2s 2.4s linear forwards;}
.animation_wrap img.img_hole2 {bottom:71px; left:63px; opacity:0; animation:imgsoil5 0.2s 2.4s linear forwards;}
.animation_wrap img.img_soil6 {bottom:71px; left:63px; opacity:0; animation:imgsoil5 0.2s 2.4s linear forwards;}

.animation_wrap img.img_ax {opacity:0; bottom:-150px; right:400px; animation:imgax 1.2s 2.8s ease-in-out forwards; transform-origin:50% 40%;}

.animation_wrap img.img_arm1 {bottom:131px; left:371px; opacity:0; animation:imgarm 0.2s 4.7s linear forwards;}
.animation_wrap img.img_arm2 {bottom:140px; right:322px; opacity:0; animation:imgarm 0.2s 5s linear forwards;}

.animation_wrap .bg_box {opacity:0; display:block; background:#682c22; width:1200px; height:427px; position:absolute; left:0; bottom:-318px; 
	animation:bgBox 0.1s 2.4s linear forwards;}

.animation_wrap .face_wrap {opacity:0; animation:imgbody 2s 4s linear forwards; position:absolute; top:750px; left:397px;}
.animation_wrap img.img_body {top:434px; left:27px;}
.animation_wrap img.img_face {animation:imgface 2s 6.5s linear infinite; transform-origin:bottom;}

    
@keyframes imgax {
    0% {opacity:1; bottom:-50px; right:600px; transform:rotate(-180deg);}
    65% {opacity:1; bottom:400px; right:300px;}
    100% {opacity:1; bottom:250px; right:115px; transform:rotate(360deg);}
}

@keyframes bgBox {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes imgbody {
    0% {opacity:1; top:750px; left:397px;}
    20% {top:575px; left:397px;}
    70% {top:575px; left:397px;}
    100% {opacity:1; top:200px; left:393px;}
}

@keyframes imgface {
    0% {transform:rotate(0);}
    50% {transform:rotate(10deg);}
    100% {transform:rotate(0deg);}
}


/* 흙구덩이 애니메이션 */
@keyframes imghole {
    0% {opacity:0; transform:translateX(-50%) scale(0);}
    20% {opacity:1; transform:translateX(-50%) scale(0.5);}
    60% {opacity:1; transform:translateX(-50%) scale(0.5);}
    100% {opacity:1; transform:translateX(-50%) scale(1);}
}

@keyframes imgsoil1 {
    0% {opacity:0; transform:scale(0.4);}
    /* 40% {opacity:1; transform:scale(0.4);}
    60% {opacity:1; transform:scale(0.4);} */
    100% {opacity:1; transform:scale(1); bottom:73px; left:63px;}
}

@keyframes imgsoil2 {
    0% {opacity:0; transform:scale(0.4);}
    /* 40% {opacity:1; transform:scale(0.4);}
    60% {opacity:1; transform:scale(0.4);} */
    100% {opacity:1; transform:scale(1); bottom:70px; right:66px;}
}

@keyframes imgsoil3 {
    0% {opacity:0; transform:scale(0.4);}
    /* 40% {opacity:1; transform:scale(0.4);}
    60% {opacity:1; transform:scale(0.4);} */
    100% {opacity:1; transform:scale(1); bottom:80px; right:83px;}
}

@keyframes imgsoil4 {
    0% {opacity:0; transform:scale(0.2);}
    /* 40% {opacity:1; transform:scale(0.4);}
    60% {opacity:1; transform:scale(0.4);} */
    100% {opacity:1; transform:scale(1); bottom:71px; left:64px;}
}

@keyframes imgarm {
    0% {opacity:0; transform:scale(0);}
    100% {opacity:1; transform:scale(1);}
}

@keyframes imgsoil5 {
    0% {opacity:0; }
    100% {opacity:1;}
}


.login_section.login_character .login_area .login_inner .login_screen_info {color:#ccc; position:fixed; right:9%; bottom:40px; left:auto;}
.login_section.login_character .login_area .login_copyright {color:#ccc; font-size:12px; font-weight:200; letter-spacing:0; position:absolute; bottom:40px; left:9%; z-index:1;}


@media all and (max-width:1400px) {
    .login_section.login_character .login_area {padding:60px 0 0 0; margin:0 auto; text-align:center;}
    .login_section.login_character .login_area .login_title {position:static; display:block; margin:auto;}
    .login_section.login_character .login_area .login_title h2 {font-size:45px;}
    .login_section.login_character .login_area .login_title h1.logo_img {margin:auto; background-size:70%; height:170px;}
    .login_section.login_character .login_area .login_inner {margin:30px auto 0; display:block; position:relative;}
    .login_section.login_character .character_animation {height:50vh; bottom:0;}

    .login_section.login_character .login_area .login_inner .login_copyright, .login_section.login_character .login_area .login_inner .login_browser_info {color:#ccc;}
    .animation_wrap {transform:scale(0.25) translateX(-50%); bottom:9vw; left:50%;}
    .animation_wrap .bg_box {width:813px; height:435px; left:162px; bottom:-312px;}
    .login_section.login_character .login_area .login_inner .login_browser_info, .login_section.login_character .login_area .login_inner .login_screen_info {display:none !important;}

}


@media all and (max-width:768px) {
    .login_section.login_character .character_animation {background-size:100% 53%; height:36vh;}
    .animation_wrap {bottom:14vw; transform:scale(0.22) translateX(-50%);}
    .animation_wrap .bg_box {height:420px; bottom:-315px;}
}

@media all and (max-width:500px) {
    .login_section.login_character .login_area {padding-top:45px;}
    .login_section.login_character .login_area .login_title h2 {font-size:30px; line-height:40px;}
    .login_section.login_character .login_area .login_title h1.logo_img {background-size:50%; height:115px;}
    .login_section.login_character .character_animation {background-size:100% 51%; height:32vh;}
    .animation_wrap {bottom:18vw; transform:scale(0.18) translateX(-50%);}
    .login_section.login_character .login_area .login_inner {margin:auto 20px 0; padding:15px 30px 75px;}
    .login_section.login_character .login_area .login_inner ul.login_input li > input {width:100%;}
    .login_section.login_character .login_area .login_inner button.login_btn {width:100px; height:100px; background:#000 url(../images/loginQC/login_arrow.png) no-repeat center 25px;
        right:30px; bottom:-42px;}
}