@charset "utf-8";
/* introduce */
.it-box { position: relative; overflow: hidden; height: 100vh;}
.it-img { margin: 60px 0 100px; transition-timing-function:cubic-bezier(.175,.885,.32,1.275); transition-duration: 3s; transition-property:opacity,transform; opacity: 0;}
.it-img.aos-animate { transform:translate3d(100px,0,0); opacity: 1; }
.it-tit { font-size: 30px; font-weight: 800; line-height: 1.3em; margin-bottom: 20px; color: #000; }
.it-txt { font-size: 20px; font-weight: 400; color: #000; line-height: 1.6em; }
.it-box .right {width:60%; position:absolute; right: -36%; top: 50%; transform: translateY(-50%);}
.it-box .right .circle-wrap {position:relative; width:82.2%;}
.it-box .right .circle-1 {padding-bottom:calc(100% - 2px); }
.it-box .right .circle-2 {position:absolute; top:34px; left:34px; right:34px; bottom:34px; border-radius:100%;}
.it-box .right .circle-2 span {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ffd2cd; border-radius:100%; animation:5s circle_rotate linear infinite;}
.it-box .right .circle-2 span:before {content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-50%); background:#000; width:22px; height:22px; border-radius:100%;}
.it-box .right .circle-3 {position:absolute; top:75px; left:75px; right:75px; bottom:75px; background:#ff695b; border-radius:100%;}
.it-box .right .circle-wrap.st2 .circle-1 {border-color:#acb9ec;}
.it-box .right .circle-wrap.st2 .circle-2 span {border-color:#000;}
.it-box .right .circle-wrap.st2 .circle-2 span:before {background:#000;}
.it-box .right .circle-wrap.st2 .circle-3 {background:transparent;}
@keyframes circle_rotate{
	0% {transform:rotate(-200deg);}
	100% {transform:rotate(20deg);}
}
.it-box .right .box-wrap {position:absolute; left: -50px; top: 0; height: 100%; width: 100%;}
.it-box .right .box-wrap .box { opacity:0; transition-property:opacity,transform; transition-duration:1s; transition-timing-function:cubic-bezier(.175,.885,.32,1.275); text-align: right; display: inline-block; position: absolute; width: 100px; height: 65px;}
.it-box .right .box-wrap .box.cs { top: 25%; left: 0;}
.it-box .right .box-wrap .box.ws { left: 0; bottom: 25%;}
.it-box .right .box-wrap .box h3 { font-size: 36px; font-weight: 600; line-height: 1em; margin-bottom: 5px; color: #000;}
.it-box .right .box-wrap .box.cs { transform:translate3d(100px,0,0);}
.it-box .right .box-wrap .box.ws { transform:translate3d(100px,0,0);}
.it-box .right .box-wrap.aos-animate .box.cs {opacity:1; transform:translate3d(0,0,0); transition-delay: 3.1s;}
.it-box .right .box-wrap.aos-animate .box.ws {opacity:1; transform:translate3d(0,0,0); transition-delay: 1.8s;}
.it-box .contain2 { max-width: 1650px;}

/* support */
.sp-tt {transform:skew(.1deg); font-size:17px; line-height:1.6em; color:#000; margin:-6px 0 110px 10px;}
.sp-tt span {color: #60a7fc; font-weight:300;}
.sp-wrap { max-width: 1085px; width: 100%; margin: auto; }
.sp-box { position: relative;}
.sp-ctt { display: flex; padding: 35px 10px 35px 78px; align-items: flex-end; flex-wrap: wrap; gap: 10px; justify-content: space-between; border: 1px solid #555; border-radius: 100px 0 0 100px; border-right: none; position: relative; height: 150px; z-index: 1;}
.sp-ctt .year { max-width: 260px; display: inline-block; padding-left: 10px; background: #fff; line-height: 1em; font-size: 20px; font-weight: 400; color: #333; font-family: 'Pretendard'; position: absolute; right: 0; top: -11px; width: 100%;}
.sp-box::before { content: ""; position: absolute; left: -15px; border: 1px solid #60a7fc; width: 150px; height: 150px; top: 0; margin: auto; border-radius: 100%; transition: .3s; z-index: -1;}
.sp-box:hover::before { background: #60a7fc;}
.sp-ctt .titbox { text-align: center; font-weight: 400; line-height: 1em; color: #000; position: relative; z-index: 1;}
.sp-ctt .titbox h2 { font-size: 30px; margin-bottom: 30px; font-weight: 400; letter-spacing: 0.4em;}
.sp-ctt .titbox h3 { font-size: 25px; font-weight: 400;}
.sp-ctt .linkbox { display: flex; gap: 30px; position: relative; top: 25px;}
.sp-ctt .linkbox a { display: inline-block; text-align: center;}
.sp-ctt .linkbox a span {display: block; margin-top: 10px; line-height: 1em; font-size:10px; font-weight: 400; color: #4d4d4d;}
.sp-ctt .linkbox a svg {display:block; margin:0 auto;}
.sp-ctt .linkbox .svg-plus {transition: .6s; transform-origin:center center;}
.sp-ctt .linkbox a:hover .svg-down {animation: smoothbounceball .5s cubic-bezier(.5,.05,1,.5) infinite alternate;}
.sp-ctt .linkbox a:hover .svg-plus {transform: rotate(360deg);}

@keyframes smoothbounceball {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(0 , 10px, 0);
    }
}


/*
.sp-ctt .linkbox a.down:hover img { animation: smoothbounceball .5s cubic-bezier(.5,.05,1,.5) infinite alternate; }
@keyframes smoothbounceball {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(0 , 15px, 0);
    }
}
.sp-ctt .linkbox a.view img { transition: .6s;}
.sp-ctt .linkbox a.view:hover img { transform: rotate(360deg);}
*/

.sp-box.mb { margin-bottom: 100px;}
.sp-copy {text-align:right; margin-top: 10px; transform:skew(.1deg); _font-family:'NanumGothic',sans-serif; font-size: 12px; line-height:1.3em; color:#686868;}

/* plant */
.plant { max-width: 1100px; margin:0 auto; width:100%; padding-top:1em;}
.plant .title {transform:skew(.1deg); font-size: 15px; font-weight: 400; line-height: 1em; padding-bottom: 14px; border-bottom: 1px solid #000;}
.plant .imgbox {border-bottom: 1px solid #ddd;}
.plant .imgbox .thumb {position:relative; max-width:350px; margin:auto; background:#000;}
.plant .imgbox .thumb:before {content:''; display:block; padding-bottom:74.29%;}
.plant .imgbox .thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:contain;}
.plant .info { border-bottom: 1px solid #ddd; padding: 20px; }
.plant .info ul li {transform:skew(.1deg); display: flex; color: #000; margin-bottom: 25px;}
.plant .info ul li:last-child { margin-bottom: 0; }
.plant .info ul li .tit { line-height: 1.6em; position: relative; width: 115px; padding-left: 18px; font-size: 16px; font-weight: 400; }
.plant .info ul li .tit::before { content: ""; position: absolute; left: 0; width: 8px; height: 8px; border-radius: 8px; background: #60a7fc; top: 7px;}
.plant .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: 15px; font-weight:400; line-height: 1.6em; color:#333;}