body { margin:0; padding:0; background-color:#1E1E1E; color:#fff; font-size:14px; line-height:1;-webkit-text-size-adjust:none; -ms-text-size-adjust: none;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,big, cite, code, del, dfn, em, textarea,
img, ins, kbd, q, s, samp, small, strike,strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset,form, label, legend, table,button,
caption, tbody, tfoot, thead, tr, th, article, aside, canvas, footer, header, menu, nav, section, summary, video {z-index: inherit;padding: 0;border: 0;margin: 0;vertical-align: baseline;font: inherit;font-size: 100%; font-family: 'Pretendard', sans-serif;font-weight: 300;   }

select{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;-o-appearance: none;appearance: none;}
li{ list-style:none; }
table{ width:100%; border-collapse:collapse; border-spacing:0; }
th, td{ border-collapse:collapse; }
legend, caption, hr{ display:none; }
a { text-decoration:none; color:#838383;}
a:hover {  color:#838383;}

*{-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
        }

*:focus {
    outline: none;
    /* border: 0 none; */
}

::placeholder { color:rgb(255 255 255 / 60%);}
:-ms-input-placeholder {  color:rgb(255 255 255 / 60%);}
::-ms-input-placeholder { color:rgb(255 255 255 / 60%);}


input:-webkit-autofill {background-color: transparent !important;}
input:-moz-autofill {background-color: transparent !important;}
input:-ms-autofill {background-color: transparent !important;}
input:-webkit-autofill::first-line {background-color: transparent !important;}

*{box-sizing: border-box;
resize: none;
}

body{
	--primary : #22B785;
  --primary-press :  #276e56;
  --secondary : #FFFFA9;
  --white : #fff;
  --black : #000;
  --photo-bg : #dbdbdb;
  --gray1 : #444;
  --gray2 : #E2E2E2;
  --gray4 : #010101;
  --gray-a: #aaa;
  --error:#f00;

  --bg-size : 25%;

  --primary-box : rgb(34 183 133 / 10%);
  --boxholder-margin: 100px;
  --boxinner:80px;
  --description : 16px;
  --row-gap:50px;
  
  --column-default : 50px;
  --toast-bottom : -120px;
  --toast-top : 100px;

}

h1{font-size: 56px; line-height: 120%; font-weight: 700;}
.h1{font-size: 50px; line-height: 120%; font-weight: 700;}

h2{font-size: 40px;  font-weight: 700;        word-break: keep-all;}
h3{font-size: 32px;  font-weight: 600;        word-break: keep-all;}
.h3{font-size: 28px;  font-weight: 600; line-height: 130%;        word-break: keep-all;}
h4{font-size: 26px;         word-break: keep-all;}
h5{font-size: 20px; line-height: 150%;        word-break: keep-all;}
.h5{font-size: 18px; line-height: 28px;        word-break: keep-all;}
h6{font-size: 16px; line-height: 24px;         word-break: keep-all;}
.h6{font-size: 14px; line-height: 24px;         word-break: keep-all;}


.flex{display: flex; }
.flex.div li{flex: 1; margin:  0 10px; min-width: 200px; }
.flex.div{flex-wrap: wrap; width: calc(100% + 130px); margin-left: -65px;}
.flex.between{justify-content: space-between; align-items: center;}
.flex.around{justify-content: space-around; align-items: center;}
.flex.evenly{justify-content: space-evenly; align-items: center;}
.flex.reverse{flex-direction: row-reverse;}
.flex.div2x1 img{object-fit: contain; width: 100%; height: 100%;}
.flex.colum-center{justify-content: center; flex-direction: column;}
.flex.baseline{align-items: baseline;}
.flex.end{align-items: end;}
.flex.row{flex-direction: row;}
.flex.center{align-items: center;}
.flex-wrap{flex-wrap: wrap;}
.flex-none{flex: none !important;}

.mt16{margin-top: 16px;}
.mt28{margin-top: 28px;}

.mt60{margin-top: 60px;}
.mt90{margin-top: 90px;}
.gap12{gap: 12px;}
.gap20{gap: 20px;}
.gap30{gap: 30px;}
.br{display: none;}


.primary{color: var(--primary); font-weight: inherit;}
.text-holder{display: flex; justify-content: center; margin-bottom: 50px; flex-direction: column; align-items: center;}
.text-holder h1+h5{margin-top: 10px; color: var(--white);}

.wrap-holder .box-holder:not(.first){margin-top: var(--boxholder-margin);}
.boxinner{margin-top: var(--boxinner);}
.description{margin-top: var(--description);    margin-bottom: var(--boxinner);}
.description *{color: var(--gray1);}
.subtitle{color: var(--primary);}
.screen1 .description *,
.screen2 .description *,
.screen3 .description *{color: var(--gray-a);}
.span-holder {display: flex;flex-wrap: wrap;}
.span-holder .span-ani{margin-right: 6px;}
.span-holder.h1s .span-ani{margin-right: 20px;}
.span-holder.h2s .span-ani{margin-right: 16px;}
.span-ani span{font-size: inherit;font-family: inherit;font-weight: inherit;} 
.active.span-holder,
.active .span-holder{opacity: 0;}
.active.animate.span-holder,
.active.animate .span-holder{opacity: 1;}

.span-holder div{display: flex; width: 100%; justify-content: center;flex-wrap: wrap;}


.progress-wrap {position: fixed;right: 30px;bottom: 30px;height: 50px;width: 50px;cursor: pointer;display: block;border-radius: 50px;box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);opacity: 0;visibility: hidden;transform: translateY(15px);-webkit-transition: all 200ms linear;transition: all 200ms linear;z-index: 1;}
.progress-wrap div{background: url(/images/arrow3.svg) center no-repeat; background-size: 60%;transform: rotate(180deg); cursor: pointer; position: absolute; width: 100%; height: 100%; top: 0;}
.progress-wrap.active {opacity: 1;visibility: visible;transform: translateY(0);}
.progress-wrap.active.bottom {transform: translateY(-70px);}

.progress-wrap svg path { fill: rgb(255 255 255 / 40%); }
.progress-wrap svg.progress-circle path {stroke: var(--primary);stroke-width: 4;box-sizing:border-box;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
/*input*/
[class^="txt-type"] { width: 100%; line-height: 1; color: #fff; background-color:rgba(0,0,0,0.3); font-size: 16px; border: 1px solid rgb(255 255 255 / 50%); padding: 20px 12px; border-radius: 5px;font-family: 'Pretendard', sans-serif; font-weight: 300; height: 60px;}
/* [class^="txt-type"]:focus {border: 1px solid var(--primary);box-shadow: 0px 0px 0px 3px rgb(167 215 199 / 24%); } */
[class^="txt-type"]:disabled {opacity: .3;}
.input-holder{position: relative; border-radius: 5px; overflow: hidden; font-size: 0;}
.txt-type-normal:disabled {background-color: #fff; border-color: var(--gray2); } 
.input-holder.error input {border: 1px solid #E22A2A;}
.input-holder .message{font-size: 12px; margin-top: 8px; align-items: center; display: none; position: absolute;}
.input-holder.error .message{color: #E22A2A; display: block;}
.input-holder.error .message i{width: 12px; height: 12px; margin-right: 7px; background: url(/images/icon_08.svg) center no-repeat; display: inline-block;}

[class^="sbox-type"] ~ .focus,
textarea ~ .focus,
input ~ .focus{width: 0; position: absolute;top: 0; left: 0; height: 100%; background-color: rgb(0 0 0 / 20%); border-bottom: 2px solid var(--primary); transition: 0.4s;}


[class^="sbox-type"]:focus ~ .focus,
textarea:focus ~ .focus,
input:focus ~ .focus{width: 100%;}


/*checkbox*/
[class^="cbox-type"] {display: none;}
[class^="cbox-type"] + label {height: 20px;line-height: 24px;word-break: keep-all;letter-spacing: -0.32px;  color: #333; padding: 0 30px 0 30px;background-color: #fff;background: url(../images/i_radio_n.svg) left top no-repeat; background-size: contain; font-size: 14px;display: inline-block;cursor: pointer;}
input[type=checkbox]:checked + label {background-image: url(/images/i_radio_s.svg);}
input[type=checkbox]:disabled + label {background-image: url(/images/i_radio_n.svg);cursor: default;}



/*select*/
[class^="sbox-type"] { font-size: 16px;  width: 100%; padding: 20px 30px 20px 12px; border: solid 1px rgb(255 255 255 / 50%); border-radius: 5px; background: url(/images/down-arrow.svg) right 18px center no-repeat;background-size: 40px; background-color: rgba(0,0,0,0.3); font-family: 'Pretendard', sans-serif; font-weight: 300; color: var(--white); }
[class^="sbox-type"]:not(:disabled):hover{box-shadow: 0 0 3px 0 rgba(109, 110, 131, 0.3);}
/* [class^="sbox-type"]:focus {border: 1px solid var(--primary);box-shadow: 0px 0px 0px 3px rgb(167 215 199 / 24%);  } */
[class^="sbox-type"]:disabled{background-color: #F6F6F6; border: 1px solid #e2e2e2;background-image: url(/images/dropdown_d.svg);}

textarea {border: 1px solid rgb(255 255 255 / 50%);width: 100%;padding: 9px 12px 8px;background: rgba(0,0,0,0.3);border-radius: 5px;font-family: inherit;font-size: 16px; color: var(--white);}
/* textarea:focus {border: 1px solid var(--primary);box-shadow: 0px 0px 0px 3px rgb(167 215 199 / 24%);} */

/* button */
[class^="btn-type"] { display: inline-block; position: relative; height: 34px; letter-spacing: -0.32px; color: #fff; border: solid 1px #353642; background: #353642; cursor: pointer; font-size: 14px; text-align: center; vertical-align: top; border-radius: 4px; padding: 6px 0px; min-width: 88px;}

.active .span-holder{opacity: 0;}
.active.animate .span-holder{opacity: 1;}
.grid { display: grid; grid-gap: 2.6%; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
.grid .img img{object-fit: contain; width: 100%; height: 100%;}
ul .icon img{width: 80px; height: 80px;}
.img{font-size: 0;}
.overflow{overflow: hidden; display: inline-flex;}
.wrap{ text-align: center; background: var(--white); position: relative; z-index: 1;}
.wrap .wrap-holder.no{border-bottom: none;}

/* header */
.header{position: fixed;z-index: 10; width: 100%; top: 0;}
.header .header-holder{padding: 28px 90px; background: rgba(0,0,0,0);transition: all .3s; height: 80px; z-index: 11; border-bottom: 1px solid rgba(255,255,255,0); }
.header .logo{background: url(http://adotcure.cdn1.cafe24.com/images/adotcure.png) no-repeat center; background-size: contain; width: 138px; height: 40px; cursor: pointer;z-index: 5; }
.menu {margin-right: 50px;}
.header .pc-menu{margin-left: 10px;}

.header-holder .mobile-menu {width: 34px; cursor: pointer; display: none;}
.header-holder .mobile-menu .bar{display: block; height: 1px; width: 24px; background: var(--white); margin: 6px auto;	transition: all .7s ease;}

.header-holder .mobile-menu.on .bar{ background: var(--white);    }
.header-holder .mobile-menu.on .top{	transform: translateY(7px) rotateZ(45deg);}
.header-holder .mobile-menu.on .bottom {	transform: translateY(-7px) rotateZ(-45deg);}
.header-holder .mobile-menu.on .middle {width: 0; } 
.headerOn .header-holder .mobile-menu .bar{background: var(--white);}


.headerOn .header .header-holder{ background: rgba(0,0,0,.9); border-bottom: 1px solid rgba(255,255,255,0.3);}

.menu li{margin-left: clamp(14px, 3vw, 50px); font-size: 16px; font-weight: 300; color: var(--white); cursor: pointer; position: relative;transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1); padding: 2px 0; overflow: hidden; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.menu li:first-child{margin: 0;}
.menu li::before{content: ''; position: absolute; left: 0; bottom: 0px; width: 100%; height: 2px; background: var(--white);transition: inherit;transform-origin: right; transform: scaleX(0); }
.menu li:hover::before{transform-origin: left; transform: scaleX(1);}
.menu li.on::before{transform: scaleX(1);transform-origin: left; }

.pc-menu button{height: 40px; font-size: 14px; min-width: auto;}

.language {font-size: 12px; border:1px solid rgba(255,255,255,0.8); border-radius: 6px; padding: 4px 6px; display: inline-block;   position: relative; display: flex; align-items: center; color: var(--gray-a);    justify-content: space-evenly;}
.language p{ padding: 8px 8px; cursor: pointer;}
.language p:hover{color: var(--white);text-decoration: underline; text-underline-offset: 5px;}
.language p.on{color: var(--white); cursor: default; pointer-events: none;}
.header .link{min-width: 57px;}


.title em{color: var(--primary); font-weight: 700;}

button {padding: 14px 10px;display: flex;align-items: center;justify-content: center;background: var(--primary);color: var(--white);border-radius: 6px;font-size: 18px;min-width: 200px;transition: all .3s;border: none;cursor: pointer; border: 1px solid var(--primary); height: 60px; width: 100%;}
button.line{background: transparent; border: 1px solid rgba(255,255,255,0.8);}
.link i {width: 0;height: 16px;background: url(/images/arrow.svg);margin-left: 0;transition: all .3s;}
.link .line i {background: url(/images/arrow2.svg);}
.link *{user-select: none;-webkit-user-select: none;}

.link.on button { border-color: var(--primary); background: var(--primary-press);}
.link.on button i{ width: 18px; margin-left: 10px; opacity: 1;}
.link.on button.line{background: var(--black);}


/*popup*/
.pri {margin-bottom: var(--column-default);}
.privacy-btn{cursor: pointer; flex: none !important; }
.privacy-btn button{height: 50px !important;}

.popup-wrap { z-index: 20; position: fixed; left: 0; right: 0; top: 0; bottom: 0; visibility: hidden; display: flex; }
.popup-wrap:before {content:'';position:fixed;width:100%;height:100%;background:rgba(0, 0, 0, 0);z-index:-1; transition: background 0.3s;}
.popup-wrap.on:before {background:rgba(0, 0, 0, .7);}
.popup-wrap .popup { width: 80%;   background: #fff; position:  relative; color: #333;  margin: auto;  padding: 24px 30px;box-shadow: 0 2px 13px 0 rgba(109, 110, 131, 0.15); }
.popup-wrap .popup .title{ font-weight: 900;  line-height: 1.45;  }
.popup-wrap .popup .title em{color: #0287df;}
.popup-wrap .popup > .txt{ font-size: 16px;margin-top: 12px; line-height: 22px;}
.popup-wrap .popup > .txt span{font-size: 16px;}
.popup-wrap .popup .result{width: 220px; height: 34px; border-radius: 3px; margin: 20px 0 3px; background: #f2f2f2; padding-top: 10px; font-size: 12px;}
.popup-wrap .close{width: 50px; min-width: auto;background: url(/images/close.svg) center no-repeat; background-size: contain; border: none;}
.popup-wrap .close div{}
.y-scroll{margin: 40px; margin-left: 0; margin-right: 0;}
.y-scroll p{font-weight: bold; margin-top: 10px;}
.pri-btn{margin-right: 10px; cursor: pointer;}
.pri-btn h6{font-weight: bold;}

@media (hover: hover) {
  .link button:hover { border-color: var(--primary); background: var(--primary-press);}
  .link button:hover i{ width: 18px; margin-left: 10px; opacity: 1;}
  .link button:hover.line{background: var(--black); color: var(--primary);}
}




/* screen */
[class *=screen] {display: flex; justify-content: center; text-align: left; position: relative; overflow: hidden;}
[class *=screen] .wrap-holder{padding:  100px 15px; display: flex; flex-direction: column;  }
[class *=screen].section{margin-top: var(--section-margin);}


.screen0 { background: #4c4c4c;}
.screen1 { background: #1E1E1E;}

.screen0 h5{margin-top: 20px; font-weight: 300; letter-spacing: 1px;}
.screen0 .wrap-holder{height: 790px;justify-content: end; align-items: center;}
.screen0 .btn-holder{display: flex; justify-content: center; gap: 16px; margin-top: 40px;}
.screen0 .video{    position: absolute;left: 0;top: 0;width: 100%;height: 100%;overflow: hidden;}
.screen0 .div{text-align: center;}
.screen0 video {position: absolute;top: 50%;left: 50%;min-width: 100%;min-height: 100%;width: auto;height: auto;transform: translateX(-50%) translateY(-50%);background-size: cover;}
.screen0 .dot{background: url(/images/dot.png); height: 100%; position: relative;}


.screen1 .box{text-align: center;gap: 5%;}
.screen1 .box li{flex: 1; display: flex; flex-direction: column; align-items: center;}
.screen1 .box li>div{ border-radius: 16px; max-width:264px; aspect-ratio: 1; position: relative; width: 100%;}
.screen1 .box li>div h3{position: absolute;}
.screen1 .box h3{ margin-top: 20px;}
.screen1 .box li:nth-child(1) div{background: url(http://adotcure.cdn1.cafe24.com/images/screen1-1.png) no-repeat center; background-size: 100%; background-color: var(--primary-box);}
.screen1 .box li:nth-child(2) div{background: url(http://adotcure.cdn1.cafe24.com/images/screen1-2.png) no-repeat center; background-size: 100%; background-color: var(--primary-box);}
.screen1 .box li:nth-child(3) div{background: url(http://adotcure.cdn1.cafe24.com/images/screen1-3.png) no-repeat center; background-size: 100%; background-color: var(--primary-box);}


.screen1 h3 span{font-size: 15px;display: inline-block;}
.screen1 .h3{color: rgb(255 255 255 / 60%); font-size: clamp(14px, 3vw, 28px);} 

.screen1 .box2{text-align: center; gap: 5%; }
.screen1 .box2 li{max-width: 410px; flex: 1;}
.screen1 .box2 li>div{background: var(--black); border-radius: 16px; width:100%; aspect-ratio: 410/264; overflow: hidden; position: relative;}
.screen1 .box2 h3{line-height: 107%; margin-top: 20px;    position: absolute; bottom: 20px; width: 100%;}
.screen1 .video video{width: 100%; height: 100%;    object-fit: cover;}
.screen1 .video video + div{    background: url(/images/dot.png), rgba(0, 0, 0, 0.4);position: absolute;left: 0;top: 0;height: 100%;width: 100%;}
.screen1 .video.b video{transform: translate(0%, -14%);}


.screen2{background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0) 100%), url(http://adotcure.cdn1.cafe24.com/images/screen2-bg.jpg) no-repeat center; background-size: cover; color: var(--white);}
.screen2 .wrap-holder{ height: 900px;}
.screen2 .input-holder{width: 400px;}
.screen2 .input-wrap{justify-content: center; }


.screen2-{background: #f7f7f7;}
.screen2- .wrap-holder{}
.screen2- .partner{gap: 5%;}
.screen2- .partner li{ display: flex;}
.screen2- .partner li img{width: 100%; height: 100%; object-fit: contain;}
.screen2- .beyless{max-width: 154px;}
.screen2- .kumc{max-width: 324px;}
.screen2- .inbody{max-width: 174px;}

.screen2- .data-view{border: 1px solid #e3e3e3; border-radius: 10px; color: var(--black); background: var(--white); padding: 32px 0;}
.screen2- .data-view li{height: 100px;  align-items: center; position: relative; flex: 1;}
.screen2- .data-view li h6{color: #626262; margin-bottom: 6px;}
.screen2- .data-view li:not(:first-child):before{content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #e3e3e3;}


.screen3{background: #1E1E1E;}
.screen3 .wrap-holder{flex-direction: row;  display: block;}
.screen3 .wrap-holder > div{gap: 5%;}
.screen3 .div{position: relative; flex: 1;}
.screen3 ._img {background: url(http://adotcure.cdn1.cafe24.com/images/photo.png) no-repeat center; background-size: 100%;  height: 350px;}
.screen3 .certification {background: url(http://adotcure.cdn1.cafe24.com/images/certification.png) no-repeat center; background-size: 100%; width: 43%; aspect-ratio: 227/180; position: absolute; right: 25px; top: 60%;}

.screen4{background: #f5f5f5; color: var(--black);}
.screen4 .talk {flex: .4; margin-right: 60px;}
.screen4 .talk ._img { max-width: 272px;aspect-ratio: 272 / 326;}
.screen4 .talk ._img img{width: 100%; height: 100%; object-fit: contain;}
.screen4 h5{text-align: center; margin-top: 15px; position: absolute; max-width: 160px; width: 100%;}
.screen4 .voice{width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--black); overflow: hidden; position: absolute;}
.screen4 .voice video {width: auto;height: 100%;transform: translateX(0%); aspect-ratio: 1;}
.screen4 .svg{width: 100%; height: 100%; background: url(/images/analyze.svg) no-repeat center; background-size: contain; }
.screen4 .chart{width: 100%; height: 100%; background: url(http://adotcure.cdn1.cafe24.com/images/talk4.png) no-repeat; background-size: contain;}
.screen4 h1{font-size: 72px;}
.screen4 li .box{ max-width: 160px; width: 100%; height: 100%; position: relative;}
.screen4 li .box img{width: 100%; height: 100%; object-fit: contain;}
.screen4 li div{ display: flex; align-items: center;}
.screen4 .voice-wrap{display: flex; align-items: flex-end;flex: 1; }
.screen4 .voice-wrap ul{width: 100%;}
.screen4 .voice-wrap li{flex: 1; position: relative; }
.screen4 .boxinner{justify-content: space-evenly; row-gap: 70px;}


.screen5{color: var(--black);}
.screen5 div._img {color: var(--white); width: 220px; height: 474px; border-radius: 22px; margin-bottom: 20px; overflow: hidden; }
.screen5 div._img h5,
.screen5 div._img h6{color: var(--white); text-align: center; display: block;}

.screen5  h5 {font-weight: 600; display: flex; align-items: center; margin-bottom: 10px;}
.screen5  h5 i{width: 20px; height: 20px; display: inline-block; margin-right: 10px;}
.screen5 ul{    display: grid; grid-gap: var(--row-gap) 20px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));}
.screen5 ul li{display: flex; justify-content: center; position: relative;}
.screen5 ul li:nth-child(1) i{background: url(/images/svg1.svg) no-repeat center;}
.screen5 ul li:nth-child(2) i{background: url(/images/svg2.svg) no-repeat center;}
.screen5 ul li:nth-child(3) i{background: url(/images/svg3.svg) no-repeat center;}
.screen5 ul li:nth-child(4) i{background: url(/images/svg4.svg) no-repeat center;}

.screen5 ul li div._img > div{width: 100%; height: 100%; padding: 15px;border-radius: 22px;display: flex;
  flex-direction: column;
  justify-content: end;}
.screen5 ul li:nth-child(1) div._img > div{background: url(http://adotcure.cdn1.cafe24.com/images/screen5-1.png) no-repeat center, var(--gray4); background-size: contain; }
.screen5 ul li:nth-child(2) div._img > div{background: url(http://adotcure.cdn1.cafe24.com/images/screen5-2.png) no-repeat center, var(--gray4); background-size: contain;}
.screen5 ul li:nth-child(3) div._img > div{background: url(http://adotcure.cdn1.cafe24.com/images/screen5-3.png) no-repeat center, var(--gray4); background-size: contain;}
.screen5 ul li:nth-child(4) div._img > div{background: url(http://adotcure.cdn1.cafe24.com/images/screen5-4.png) no-repeat center, var(--gray4); background-size: contain;}



.screen5 ul .sub{height: 40px; background: var(--white); border-radius: 13px; color: var(--black);text-align: center; font-size: 12px; font-weight: 700; padding: 14px; margin-bottom: 30px;}

.screen5 ul li:nth-child(2) div._img h6{margin-bottom: 110px;}
.screen5 ul li:nth-child(3) div._img h5{margin-bottom: 0px;}
.screen5 ul li:nth-child(3) div._img h6{margin-bottom: 30px; font-size: 12px;}
.screen5 ul li > div{width: 100%;}

.screen5 h6{color: var(--gray1);}

.screen6{color: var(--black); background: #f5f5f5;}
.screen6 .wrap-holder{flex-direction: row; }
.screen6 .wrap-holder .flex{gap: 5%; }
.screen6 .div{flex: 1;}
.screen6 .right{flex: 1.3;}
.screen6 .right .row{gap: 24px; position: relative; padding: 32px 0; color: var(--gray4);}
.screen6 .right .chip{padding: 1px 16px; border-radius: 100px; background: #EC4899; color: var(--white); display: inline-block; font-size: 12px; height: 24px; font-weight: 600; margin-bottom: 16px ;}

.screen6 .right .row:nth-of-type(1) { padding-top: 0;}
.screen6 .right .row:nth-of-type(3) { padding-bottom: 0;}
.screen6 .right .row:nth-of-type(1) .chip{background: #EC4899;}
.screen6 .right .row:nth-of-type(2) .chip{background: #4E8AF4;}
.screen6 .right .row:nth-of-type(3) .chip{background: #10B981;}

.screen6 .right .row ._img{ max-width: 264px; flex: 1; border-radius: 12px; overflow: hidden; position: relative;}
.screen6 .right .row ._img img{width: 100%; height: 100%; object-fit: contain;}
.screen6 .right .row ._img img + img{position: absolute; left: 0; top: 0;}
.screen6 .right .row ._img + div{flex: 1;}

.screen6 .right .row:not(:first-child):before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #e3e3e3;}
.screen6 .wrap-holder{flex-direction: row;  display: block;}


.screen7{color: var(--black);     }

.screen7 .photo{ border-radius: 10px; font-size: 0; overflow: hidden; position: relative; }
.screen7 .photo img{    object-fit: contain;width: 100%;height: 100%;}

.screen7 .ceo .photo{background: url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size:var(--bg-size); }
.screen7 .cm .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }
.screen7 .coo .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }
.screen7 .cto .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }
.screen7 .cro .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }
.screen7 .cpo .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }
.screen7 .cmo .photo{background:  url(http://adotcure.cdn1.cafe24.com/images/logo-bg.png), var(--photo-bg) ; background-size: var(--bg-size); }

.screen7 .history{margin-top: 40px; position: relative; color: var(--gray1);}
.screen7 .history::before{content: ''; position: absolute; left: 0; top: -20px; width: 45px; height: 3px; border-radius: 10px; background: var(--gray1);}
.screen7 .people ul{justify-content: space-between;     column-gap: 6%;    row-gap: 0;}
.screen7 .people h4{font-weight:600; margin: 20px 0 5px;}
.screen7 .people h6{color: #3c3c3c;}
.screen7 .people p{padding: 2px 0 5px 10px; margin-left: 5px; position: relative;word-break: keep-all;}
.screen7 .people p::before{content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 100%; background: #3c3c3c;position: absolute;top: 8px; left: 0; }
.screen7 .people li{cursor: default; transition:all 0.5s; display: flex; flex-direction: column; justify-content: space-between;margin-bottom: var(--column-default); position: relative;}
.screen7 .text-holder h1+h5 {color: var(--black);}
.screen7 .company {display: flex; height: 32px; gap: 15px;margin: 5px 0 0 10px;}
.screen7 .company img{height: 100%; object-fit: contain;filter: grayscale(1);}
.screen7 .blank{position: absolute; opacity: 0;transition:all 0.5s;}
@media (hover: hover) {
  .screen7 .people li:hover {transform: translateY(-10px);}
  .screen7 .people li:hover .blank { width: calc(100% + 26px); height: calc(100% + 26px); left: -13px; top: -13px; border-radius: 10px; box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 20%); opacity: 1;}
  .screen7 .people li:hover .photo {animation: over-photo 1s}
  @keyframes over-photo {
    0% { filter: brightness(1) contrast(1) grayscale(0);}
    10% {  filter: brightness(1.5) contrast(1) grayscale(0.5); }
    100% { filter: brightness(1) contrast(1) grayscale(0);}
  }
}



.screen8{background: url(http://adotcure.cdn1.cafe24.com/images/bg-contact.jpg) no-repeat center,#0c0b0c ; background-size: cover;}
.screen8 .txt{color: var(--white); margin-top: 10px;}

.screen10 {color: var(--black);background: #f5f5f5;}
.screen10 .text-holder h1+h5 {color: var(--black);}
.screen10  ul {justify-content: space-between;column-gap: 6%;row-gap: 0;}
.screen10 li {cursor: default;transition: all 0.5s;display: flex;flex-direction: column;justify-content: space-between;margin-bottom: var(--column-default);position: relative;}
.screen10 .news-img  img{object-fit: contain;width: 100%;height: 100%;}
.screen10 a{color: var(--black);text-decoration: none;}
.screen10 .news-source{word-wrap: break-word;color: var(--gray1); margin-top: 10px; color: var(--gray-a);}
.screen10 h4{font-weight: 600;    margin: 20px 0 5px;}
.screen10 .news-content{margin-top: 10px;
  /* display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; */
}
.screen10 .news-img{aspect-ratio: 1;border-radius: 10px;
  font-size: 0;
  overflow: hidden;
  position: relative;}
.screen10 .blank {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
@media (hover: hover) {
  .screen10 li:hover {transform: translateY(-10px); }
  .screen10 li:hover .blank {background: var(--white); width: calc(100% + 26px); height: calc(100% + 26px); left: -13px; top: -13px; border-radius: 10px; box-shadow: 0px 20px 20px 0px rgb(0 0 0 / 20%); opacity: 1;}

}




.contact .label{margin-bottom: 8px; color: var(--white); font-size: 14px; font-weight: 600;}
.contact .required{color: #E22A2A; font-size: 14px; vertical-align: super; margin-left: 2px; font-weight: 700;}
.contact .division {display: flex; margin-bottom: var(--column-default); }
.contact .division  > div{flex: 1;}
.contact .division  > div:first-child{margin-right: 30px;}
.contact .division  > div:last-child{margin-right: 0px;}
.contact .division.end{align-items: flex-end; margin-bottom: 30px;}
.contact .link{width: 210px; margin-left: auto;}
.contact button{margin-left: auto;}

footer{background: #1e1e1e;}
footer *{color: rgba(255,255,255,0.6);}
footer .wrap-holder{height: 120px;padding: 0 15px !important;}
footer .div{align-items: center; display: flex; justify-content: space-between; height: 100%;}
footer .sns {justify-content: center; align-items: center; gap: 20px;}
footer .sns div{ display: inline-block; cursor: pointer;}
footer .sns .facebook{background: url(/images/logo-facebook.svg) no-repeat center; background-size: contain; width: 30px; height: 30px;}
footer .sns .linked{background: url(/images/logo-linkedIn.svg) no-repeat center; background-size: contain; width: 40px; height: 40px;}
footer .logo{    background: url(http://adotcure.cdn1.cafe24.com/images/adotcure.png) no-repeat center;background-size: contain;width: 110px;height: 40px;}
footer .flex{align-items: center;}
footer h6{margin: 6px 0 0 0px;}
footer .left{gap: 10px;}

.toast{ position: fixed; z-index: 10; bottom: var(--toast-bottom); display: flex; justify-content: center; width: 100%;}
.toast .toast-box{ background:#FFFFA9; color: var(--black); padding: 22px 0px; text-align: center; border-radius: 6px; width: 600px;  }
.toast .toast-box h5{font-weight: 600; margin-bottom: 6px;}
.toast.show{animation: fadein 0.5s, fadeout 0.5s 2.5s ease-in;bottom: var(--toast-top);}
.toast.error .toast-box{background: #fbcfcf; color: var(--error);}
.toast b{font-weight: 700;}

@keyframes fadein {
  0% {bottom: var(--toast-bottom); opacity: 0;}
  70% {bottom: 110px; opacity: 1;}
  100% {bottom: var(--toast-top); opacity: 1;}
}
@keyframes fadeout {
  0% {bottom: var(--toast-top); opacity: 1;}
  30% {bottom: 110px; opacity: 1;}
  100% {bottom: var(--toast-bottom); opacity: 0;}
}



.moving{opacity: 0;}
.moving.animate {
  -webkit-animation: up 0.75s ease forwards;
  animation: up 0.75s ease forwards;
}
@-webkit-keyframes up {
  0% { -webkit-transform: translateY(50px); opacity: 0; }
  100% { -webkit-transform: translateY(0px); opacity: 1; }
}
@keyframes up {
  0% { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.photo-up.animate {
  animation: up-photo 1s ease forwards;
}
@keyframes up-photo {
  0% { transform: translateY(100px); opacity: 0;filter: brightness(500%) contrast(150%) grayscale(100%); }
  100% { transform: translateY(0px); opacity: 1; }
}


.moving.animate.A{animation-delay: .2s;}
.moving.animate.B{animation-delay: .4s;}
.moving.animate.C{animation-delay: .6s;}
.moving.animate.D{animation-delay: .8s;}

.moving.animate.count-holder {
  animation: nones 0.75s ease forwards;
}
@keyframes nones {
  0% { transform: translateY(0px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}


.mobile .menu-holder {  position: fixed; flex-direction: column;  left: 0;  top: 0px;  width: 100%;  height: 100%;  background: #000;  z-index: 10;  display: none;  margin: 0 auto;  color: #fff;}
.mobile .menu-holder ul{flex-direction: column;     justify-content: flex-start;align-items: flex-start; margin: 100px 0 0 20px;}
.mobile .menu-holder li{padding: 5px 0;; font-size: 42px;  color: var(--white); margin-left: 0;}
.mobile .menu-holder ul li::before {bottom: 12px; background: var(--white);}
.mobile .menu-holder.slideDown li{animation: menu-active 0.5s ease-out forwards; animation-delay: calc( var(--index)/8 + 0.35s); opacity: 0; height: auto;}
.mobile .menu-holder ul + div{margin: 30px; border-top:1px solid rgba(255,255,255,0.6) ; padding-top: 30px; opacity: 0;}
.mobile .menu-holder .link{flex: 1;}
.mobile .menu-holder .language{flex: 0.5; font-size: 15px;}


@keyframes menu-active {
	from { transform: translateX(-50%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}


.slide {	animation: slideUp 0.5s ease forwards;}
.slide.slideDown {animation: slideDown 0.5s ease forwards;}
@keyframes slideDown {
	from { transform: translateY(-100%); opacity: 1; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes slideUp {
	from { transform: translateY(0);}
	to { transform: translateY(-100%);}
}

.slideDown .in {animation: slideDown2 0.5s 1.5s ease-out forwards;}
@keyframes slideDown2 {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}



.span-ani{display: flex; overflow: hidden; flex-wrap: wrap; justify-content: center;}
.span-ani span{ animation: letter-stop 0.8s  cubic-bezier(0.445,0.05,0.55,0.95)  forwards;}
.animate .span-ani span{ 
  transform: translateY(115%);
  animation: letter-active 0.8s  cubic-bezier(0.445,0.05,0.55,0.95)  forwards;
}
.is-ready .span-ani span{animation-delay: calc( 0.8/2*var(--index)/30);} 

@keyframes letter-active {
  0% {transform: translateY(115%);}
  to {transform: translate(0);}
}

/* responsive */

@media (min-width: 1200px) {
  [class *=screen] .wrap-holder {width: 1200px;}
}

@media (min-width: 749px) and (max-width: 1199px) {
  [class *=screen] .wrap-holder {width: 100%;}
  .header .header-holder{padding: 28px 20px;}
  .menu{margin-right: 30px;}
  .menu li{margin-left: 20px;}
}
@media (max-width: 999px) {
  .screen4 .boxinner{justify-content: center;}
}



@media (max-width: 749px) {
  body{
    --boxinner:50px;
  }
  [class *=screen] .wrap-holder {width: 100%;padding: 50px 15px;}
  .header .header-holder{padding: 10px 20px; height: 50px; }
  .header .pc-menu{display: none;}
  .header .mobile-menu {display: block;}
  .header .logo{width: 100px; height: 30px;}
  .screen4 .boxinner{flex-direction: column;}
  .screen4 .talk{display: block; margin:  0 0 40px 0;}
  .screen4 .talk ._img{margin: auto;}

  .screen4 .talk h5{width: 80%; left: 10%; }
  .y-scroll{margin: 20px; margin-left: 0; margin-right: 0;}
}

@media (max-width: 699px) {
  body{
    --boxholder-margin: 50px;
    --boxinner:40px;
    --description : 8px;
    --row-gap:25px;
    --column-default : 30px;
  }

  h1{font-size: 36px; line-height: 120%; font-weight: 700;}
  .h1{font-size: 32px; line-height: 120%; font-weight: 700;}
  h2{font-size: 34px;  font-weight: 700;}
  h3{font-size: 26px;  font-weight: 600;}
  .h3{font-size: 24px;  font-weight: 600; line-height: 130%;}
  h4{font-size: 20px; }
  h5{font-size: 18px; line-height: 150%;}
  .h5{font-size: 16px; line-height: 1.2;}
  h6{font-size: 15px; line-height: 24px; }
  .h6{font-size: 14px; line-height: 24px; }

  .progress-wrap{width: 40px; height: 40px;    right: 15px;bottom: 20px;}
  .popup-wrap .popup{width: 95%;padding: 24px 20px;}
  

  button{height: 50px; font-size: 16px;}
  [class^="txt-type"]{height: 50px;}

  
  .text-holder{margin-bottom: 25px;}
  .screen0 .wrap-holder{height: 530px;}
  .screen2 .input-holder{flex: 1; width: 280px;}
  .screen2 .wrap-holder{height: auto;}
  .screen0 .btn-holder{gap: 10px;}

  .screen2 {background:  linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.1) 35%, rgba(255,255,255,0) 100%),  #000;background-size: cover;background-position-y: bottom;}

  .screen2 .wrap-holder .mt50{margin: 50px 0 90px; width: 100%;}
  .screen2- .data-view{flex-direction: column; gap: 20px; display: grid;    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
  .screen2- .data-view li{width: 100%; height: 70px;}

  .screen2- .partner{padding: 10px;}
  .screen3 .wrap-holder > div{flex-direction: column;}

  .screen4 .voice-wrap{flex: auto;margin-bottom: 40px;}
  .screen4 .voice-wrap h1{font-size: clamp(40px, 3vw, 72px);}

  .screen5 div._img{width: 180px; height: auto; aspect-ratio: 220/474; margin:  0 auto 10px;}
  .screen5 h5{margin-bottom: 5px;}
  .screen5 ul .sub{margin-bottom: 10px;}
  .screen5 ul li:nth-child(3) div._img h6{margin-bottom: 20px;}


  .screen6 .wrap-holder .flex{flex-direction: column; gap: 0;}
  .screen6 .right .row ._img{max-width: 100%;}
  .screen6 .right .chip{font-size: 14px; font-weight: 400; height: auto; padding: 4px 16px; margin: 0 0 26px 20px;}

  .screen6 .right .row ._img + div{margin-top: -50px;}
  .screen6 h5{font-size: 16px;}

  .contact .division{flex-direction: column; margin: 0;}
  .contact .division > div:first-child{margin-right: 0;}
  .contact .division > div{margin-bottom: 30px;}

  .toast .toast-box{width: 90%;}
}

@media (max-width: 489px) {

  .screen2 .input-wrap{width: 100%;}
  .screen2 .input-wrap button{min-width: 160px;}

  .screen7 .people ul{grid-gap: 50px;}
  footer .left{flex-direction: column; gap: 0;       align-items: flex-start;}
  footer .h6{margin: 0; line-height: 16px;}
  footer .sns{gap: 10px;}

}

@media (max-width: 459px) {
  button{min-width: auto;}
  .screen0 h1{font-size: 32px;}
  .screen0 .btn-holder{width: 100%;}
  .screen0 .btn-holder > div{ flex: 1;}
  .screen0 .span-holder.h2s .span-ani{margin-right: 10px;}
  .screen2 .input-wrap button{min-width: auto}

  .screen5 h3 .br{display: block;}


  .screen5  li:not(:first-child):before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: #e3e3e3;}
  .screen5  li:not(:first-child){padding-top: 20px;}

  .screen7 .man{display: flex; gap: 20px;}
  .screen7 .man > div{flex: 1;}
  .screen7 .people h4{margin-top: 0;}  
  .screen7 .order{margin-top: 50px;}
  .screen7 .history:not(:first-child):before {content: none;}
  .screen7 .order .grid li:before,
  .screen7 .grid li:not(:first-child):before{content: '';position: absolute;left: 0;top: -50px;width: 100%;height: 1px;background: #e3e3e3;}
  .screen7 .history{margin-top: 20px;}
} 

@media (max-width: 414px) {
  h3{font-size: 25.5px; letter-spacing: -0.3px;}

}

@media (max-width: 375px) {
  h3{font-size: 25px;}

}

@media (max-width: 360px) {
  h3{font-size: 24px;}
}
.count{overflow: hidden; height: 48px;font-size:40px;font-weight: 700;}
.count > span{height: 48px;overflow: hidden;}
.count span{font-size:40px; font-weight: 700; width: 27px; display: inline-block; line-height: 48px;  text-align: center;  transition: margin .3s;}
.count .point{width: 10px;}
.count .point span{text-align: left;transition:none}