@charset "utf-8";
/***** 콘텐츠 리스트 스타일 : start *****/
/* 리스트 스타일 공통 */
[class*="style-"] .data {position:relative;}
[class*="style-"] .card {border-radius:var(--border-radius-s1); box-shadow:var(--boxshadow-s1a), var(--boxshadow-s1b);}
[class*="style-"] .card:hover {transform:scale(1.05); border:rgba(43, 45, 55, 0.5) solid 2px; box-shadow:var(--boxshadow-s2a), var(--boxshadow-s2b);}
[class*="style-"] .thumb {background-repeat:no-repeat; background-size:cover; overflow:hidden;}
[class*="style-"] .design-info {opacity:0; display:none; position:absolute; top:15%; left:50%; transform:translateX(-50%); width:100%; text-align:center;}
[class*="style-"] .design-info>li {text-transform:uppercase;}
[class*="style-"] .design-info>li:first-child {font-size:1rem; font-weight:bold; opacity:.5;}
[class*="style-"] .design-info>li:last-child {font-size:1.8rem;}
[class*="style-"] .card:hover .design-info {opacity:1; display:block; animation:zi-ani-d001 .5s; animation-direction: reverse;}
[class*="style-"] .design-info,
[class*="style-"] .card,
[class*="style-"] .card .info,
[class*="style-"] .card .thumb,
[class*="style-"] .card .thumb,
[class*="style-"] .card .info .tag-box {transition:.3s ease;}
.style-t2 .card:hover,
.style-t3 .card:hover {background-color:var(--defult-color1);}
.style-t1 .card:hover .info,
.style-t5 .card .hover-box,
.popup-area.full .bg-box {-webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px);}
.style-t1 .card:hover .thumb,
.style-t3 .card:hover .thumb {transform:scale(1.2); filter:hue-rotate(180deg); animation:zi-ani-m001 100s linear;}
.style-t3 .card,
.style-t4 .card {background-color:var(--white-rgba1); border:rgba(59, 64, 91, .5) solid 10px; text-align:center;}
.style-t3 .card:hover,
.style-t4 .card:hover {border-width:15px;}
/* 리스트 스타일1 */
.style-t1 .card {min-height:250px; background-color:var(--white-rgba1); overflow:hidden; border:rgba(59, 64, 91, .5) solid 10px;}
.style-t1 .card:hover {padding:0;}
.style-t1 .card .info h2,
.style-t1 .card .info .tag-box {opacity:1;}
.style-t1 .card:hover .info {padding:0; top:0;}
.style-t1 .card:hover .info h2,
.style-t1 .card:hover .info .tag-box {opacity:0; animation:zi-ani-d001 .5s;}
.style-t1 .card .info h2 {font-weight:500; margin:.5em 0;}
.style-t1 .thumb {padding-bottom:100%; background-position:center 0%; background-repeat:repeat-y;}
.style-t1 .info {position:absolute; left:0; top:60%; width:100%; height:110%; padding:10px; background-color:var(--rgba-color2); color:var(--defult-color1); display:flex; flex-direction:column;}
.style-t1 .btn-box {flex:1;}
.style-t1 .btn-box .btn {min-width:100px; text-transform:capitalize;}
/* 리스트 스타일2 */
.style-t2 .card {height:220px; display:flex; flex-direction:column; overflow:hidden; background-color:var(--white-rgba1);}
.style-t2 .card a {color:rgb(80, 104, 133);}
.style-t2 .card a:hover {color:rgb(24, 101, 181);}
.style-t2 .card.cursor {cursor:pointer;}
.style-t2 .thumb {padding-bottom:30%;}
.style-t2 .info {padding:10px 20px;}
.style-t2 .info h2,
.style-t2 .info .text-box {word-break:keep-all;}
.style-t2 .info .btn-box a {border:var(--border-s1);}
.style-t2 .info .day {font-size:.8rem; color:var(--black-rgba1);}
.style-t2 .icon-box {display:flex;}
.style-t2 .icon-box span {padding:3px 10px; border-radius:5px; background-color:var(--blue-color2); color:var(--defult-color1); font-size:.8rem;}
/* 리스트 스타일3 */
.style-t3 .card [class*="info-"],
.style-t3 .card [class*="info-"]::after,
.style-t3 .card [class*="info-"]>.icon,
.style-t3 .card [class*="info-"]>h2 {transition:.7s ease;}
.style-t3 .card {height:200px; overflow:hidden;}
.style-t3 .card [class*="info-"]::before,
.style-t3 .card [class*="info-"]::after {content:""; position:absolute;}
.style-t3 .card [class*="info-"]::after {width:0; height:0; border-radius:100%; top:20%; left:50%; transform:translate(-50%, 0); z-index:1; background-color:var(--defult-color1);}
.style-t3 .card [class*="info-"]::before {width:50px; height:500px; background-image:linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); top:-100px; left:-200%; animation-name:zi-ani-t003; animation-duration:3s; animation-iteration-count:infinite; animation-direction:alternate-reverse; transform:rotate(45deg);}
.style-t3 .card [class*="info-"]>.icon,
.style-t3 .card [class*="info-"]> h2 {position:relative; z-index:2;}
.style-t3 .card [class*="info-"]>.icon {display:inline-block; width:50px; height:50px; border-radius:70% 30% 70% 30% / 30% 60% 40% 70%; margin-top:40px;}
.style-t3 .card .info-photoshop::before {animation-delay:0s;}
.style-t3 .card .info-illustrator::before {animation-delay:11s;}
.style-t3 .card .info-xd::before {animation-delay:3s;}
.style-t3 .card .info-indesign::before {animation-delay:10s;}
.style-t3 .card .info-premierepro::before {animation-delay:6s;}
.style-t3 .card .info-aftereffects::before {animation-delay:20s;}
.style-t3 .card .info-html5::before {animation-delay:12s;}
.style-t3 .card .info-css3::before {animation-delay:5s;}
.style-t3 .card .info-javascript::before {animation-delay:2s;}
.style-t3 .card .info-jquery::before {animation-delay:8s;}
.style-t3 .card .info-sketchup::before {animation-delay:13s;}
.style-t3 .card .info-lumion::before {animation-delay:3s;}
.style-t3 .card .info-specification::before {animation-delay:19s;}
.style-t3 .card:hover {background-color:var(--white-rgba1); cursor:pointer;}
.style-t3 .card:hover [class*="info-"]::after {width:300%; height:300%; top:50%;}
.style-t3 .card:hover [class*="info-"]>.icon {width:80px; height:80px; margin-top:20px; box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}
.style-t3 .card:hover [class*="info-"]>h2 {font-size:1.3rem; color:var(--defult-color1); text-shadow:0 1px 3px rgba(0,0,0,.7);}
.style-t3 .card:active [class*="info-"]>.icon {width:100px; height:100px; box-shadow:0 3px 10px rgba(0,0,0,.7);}
.style-t3 .card:active .info-photoshop .icon,
.style-t3 .card:hover .info-photoshop::after {background-color:rgba(0,110,255,.5);}
.style-t3 .card:active .info-illustrator .icon,
.style-t3 .card:hover .info-illustrator::after {background-color:rgba(255,130,0,.5);}
.style-t3 .card:active .info-xd .icon,
.style-t3 .card:hover .info-xd::after {background-color:rgba(255,0,222,.5);}
.style-t3 .card:active .info-indesign .icon,
.style-t3 .card:hover .info-indesign::after {background-color:rgba(255,0,0,.5);}
.style-t3 .card:active .info-premierepro .icon,
.style-t3 .card:hover .info-premierepro::after {background-color:rgba(74,0,255,.5);}
.style-t3 .card:active .info-aftereffects .icon,
.style-t3 .card:hover .info-aftereffects::after {background-color:rgba(0,10,255,.5);}
.style-t3 .card:active .info-html5 .icon,
.style-t3 .card:hover .info-html5::after {background-color:rgba(255,145,0,.5);}
.style-t3 .card:active .info-css3 .icon,
.style-t3 .card:hover .info-css3::after {background-color:rgba(61,88,142,.5);}
.style-t3 .card:active .info-javascript .icon,
.style-t3 .card:hover .info-javascript::after {background-color:rgba(255,214,0,.5);}
.style-t3 .card:active .info-jquery .icon,
.style-t3 .card:hover .info-jquery::after {background-color:rgba(22,52,93,.5);}
.style-t3 .card:active .info-sketchup .icon,
.style-t3 .card:hover .info-sketchup::after {background-color:rgba(112,14,14,.5);}
.style-t3 .card:active .info-lumion .icon,
.style-t3 .card:hover .info-lumion::after {background-color:rgba(21,83,79,.5);}
.style-t3 .card:active .info-specification .icon,
.style-t3 .card:hover .info-specification::after {background-color:rgba(43,145,38,.5);}
/* 리스트 스타일4 */
.style-t4 .info-box,
.style-t4 .icon-box .icon,
.style-t4 .icon-box .icon::after,
.style-t4 .icon-box .icon::before {-webkit-backdrop-filter:saturate(150%) blur(10px); backdrop-filter:saturate(150%) blur(10px);}
.style-t4 .card:hover .lines::after,
.style-t4 .lines::before {content:""; position:absolute; width:500px; height:150px; top:50%; left:50%; transform:translate(-50%, -50%); animation:zi-ani-r001 10s linear infinite;}
.style-t4 .info-box,
.style-t4 .info-box h2,
.style-t4 .company-box,
.style-t4 .text-box,
.style-t4 .txt span,
.style-t4 .txt p {transition:.7s ease;}
.style-t4 {}
.style-t4 .card {height:350px; overflow:hidden;}
.style-t4 .lines {position:absolute; inset:0; background-color:var(--blue-color1);}
.style-t4 .lines::before {background:linear-gradient(transparent, var(--white-rgba1), transparent);}
.style-t4 .thumb {position:absolute; inset:5px; background-repeat:no-repeat; background-position:center; background-size:cover;}
.style-t4 .info-box {position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0) 10%, var(--white-rgba2) 50%);}
.style-t4 .info-box h2 {font-family: 'yg-jalnan'; color:var(--blue-color1);}
.style-t4 .icon-box {height:122px; position:relative;}
.style-t4 .icon-box .icon {position:absolute; width:100px; height:100px; left:50%; bottom:0; transform:translate(-50%,0); border-radius:100%;}
.style-t4 .icon-box .icon::after,
.style-t4 .icon-box .icon::before {content:""; opacity:0; width:100px; height:100px; background-color:var(--defult-color1); border-radius:100%; transition:1s;}
.style-t4 .icon-box .icon::after,
.style-t4 .icon-box .icon::before,
.style-t4 .icon-box .icon [class*="zicon-"] {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.style-t4 .icon-box .icon [class*="zicon-"] {font-size:3rem; z-index:1; color:var(--defult-color1); opacity:.5; transition:1s; text-shadow:0 0 10px var(--white-rgba2);}
.style-t4 .txt {width:100%;}
.style-t4 .company-box {opacity:1; position:absolute; top:200px;}
.style-t4 .text-box {opacity:0; position:absolute; top:250px;}
.style-t4 .card .txt p {opacity:.7; font-size:.9rem; word-break:keep-all; padding:0 1rem;}
.style-t4 .card:hover .lines::before {animation-duration:5s; background:linear-gradient(transparent, var(--red-color2), transparent)}
.style-t4 .card:hover .lines::after {animation-delay:1s; background:linear-gradient(transparent, var(--blue-color3), transparent);}
.style-t4 .card:hover .icon-box .icon::after,
.style-t4 .card:hover .icon-box .icon::before {opacity:.3; width:300px; height:300px; top:-40%;}
.style-t4 .card:hover .icon-box .icon::before {left:30%;}
.style-t4 .card:hover .icon-box .icon::after {left:70%;}
.style-t4 .card:hover .icon-box .icon [class*="zicon-"] {opacity:1; text-shadow:0 0 10px var(--white-rgba2);}
.style-t4 .card:hover .info-box {background-image:linear-gradient(rgba(0,0,0,0) 10%, var(--black-rgba2) 50%);}
.style-t4 .card:hover .info-box h2 {color:var(--defult-color1);}
.style-t4 .card:hover .company-box {opacity:0; top:250px;}
.style-t4 .card:hover .text-box {opacity:1; color:var(--defult-color1); top:200px;}
.style-t4 .card:hover .text-box span {color:var(--yellow-color1);}
.style-t4 .card:hover .text-box span:first-child {opacity:.7;}
/* 리스트 스타일5 */
.style-t5 .card {width:23%; overflow:hidden; margin:1%; background-color:var(--white-rgba2)}
.style-t5 .card:hover {z-index:1;}
.style-t5 .card:hover .thumb {opacity:.5;}
.style-t5 .card .thumb,
.style-t5 .card .thumb>img {width:100%;}
.style-t5 .card .thumb {max-height:350px; overflow:hidden;}
.style-t5 .card .info {padding:1rem; color:var(--defult-color1);}
.style-t5 .card .info h2 {margin-top:auto; font-size:1.3rem;}
.style-t5 .card .design-info {top:50%; transform:translate(-50%, -50%);}
.style-t5 .card:hover .info {opacity:0;}
.style-t5 .card .hover-box {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; background-image:linear-gradient(180deg, var(--white-rgba2) 50%, var(--white-rgba1)); margin-bottom:20px;}
.style-t5 .card .hover-box .icon {position:absolute; left:50%; top:10%; transform:translateX(-50%); font-size:1rem; animation:none; width:50px; height:50px;  background-color:var(--white-rgba2); border-radius:67% 33% 70% 30% / 37% 65% 35% 63%; box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; padding:15px; opacity:1;}
.style-t5 .card .hover-box .btn-box {position:absolute; left:50%; bottom:10%; transform:translateX(-50%); text-transform:capitalize;}
.style-t5 .card .hover-box .btn-box a {margin:auto 5px;}
.style-t5 .card:hover .hover-box {opacity:1;}
/***** 콘텐츠 리스트 스타일 : end *****/

/***** 클라서별 독립 스타일 : start *****/
/* 태그박스 스타일 */
.tag-box {display:flex; flex-wrap:wrap;}
.tag-box .tag {margin-right:.5em; font-weight:100;}
.tag-box .tag::before {content:"#"; opacity:.7;}

[class*="bg-svg-"] {background-repeat:no-repeat;}
/* 버튼박스 스타일 */
.btn-box {}
.btn-box.moer {text-align:center; padding:2em;}
.btn {display:inline-block; line-height:100%; transition:.5s;}
.btn.type1,
.btn.type2 {padding:.5em 1em; border-radius:5px; text-align:center;}
.btn.type2 {font-size:1rem;}
.btn.type3 {font-size:1.2rem; padding:.8em 2em;}

.blue-yellow-1 {background-color:#272737; color:var(--point-color1);}
.blue-yellow-1:hover {background-color:var(--point-color1) color:#272737;}
.white-black-1 {background-color:var(--defult-color1); color:var(--defult-color2);}
.white-black-1:hover {background-color:var(--defult-color2); color:var(--defult-color1); box-shadow:0 0 2em var(--yellow-color1);}
.yellow-black-1 {background-color:var(--yellow-color1); color:var(--defult-color2);}
.yellow-black-1:hover {background-color:var(--defult-color2); color:var(--point-color1); box-shadow:0 0 2em var(--yellow-color1);}

.more-box {padding:20px; color:var(--defult-color1); text-align:center; margin:100px 0;}
.more-box>a {color:var(--defult-color1); border:var(--defult-color1) solid 1px; padding:10px 50px; white-space:nowrap;}
.more-box>a:hover {color:var(--black-color1); background-color:var(--defult-color1);}
/* 넥스트 아이콘 스타일 */
.nexticon {display:inline-block; background-color:var(--color-w0); border-radius:100px; width:30px; height:50px; position:relative; box-shadow:0 3px 25px 3px var(--color-b1);}
.nexticon::before,
.nexticon::after,
.nexticon>span {border-radius:10px; position:absolute; left:50%; transform:translateX(-50%);}
.nexticon::before {content:""; width:2px; height:50px; background-color:var(--color-w0); top:-20px;}
.nexticon::after {content:""; width:15px; height:15px; border-right:solid 3px var(--color-w0); border-bottom:solid 3px var(--color-w0); transform:translateX(-50%) rotate(45deg); border-radius:0; bottom:-30px; animation:zi-ani1-2 1s ease infinite;}
.nexticon>span {display:inline-block; width:7px; height:15px; border-radius:10px; position:absolute; top:10%; background:linear-gradient(180deg, rgba(255, 148, 0, 1) 0%, rgba(255, 217, 0, 1) 35%, rgba(255, 217, 0, 1) 100%); animation:zi-ani1-3 1s infinite;}
/* 페이징로드 스타일 */
#page-loading {position:fixed; left:0; top:0; width:100vw; height:100vh; background-color:rgba(0,0,0,.9); display:flex; flex-direction:column; justify-content:center; align-items:center; color:var(--defult-color1); z-index:9999;}
#page-loading>[class^="zicon-"] {font-size:5rem; animation:zi-ani1-1 5s linear infinite;}
#page-loading>.text {padding:1em;}

/***** 팝업 스타일 : start *****/
.popup-area {position:fixed; top:0; height:100vh; z-index:10000;}
.popup-area.right {right:0;}
.popup-area.bottom {bottom:0;}

.popup-area.full {left:0; width:100%; display:none;}
.popup-area.full .bg-box {position:absolute; top:0; left:0; width:100%; height:100vh; background-color:var(--rgba-color2);}
.popup-area.full .popupBox {background-color:var(--defult-color1); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
.popup-area.full [class^="popup-"] .inc-box {display:flex; justify-content:space-between; align-items:center; width:100%;}
.popup-area.full .popup-hd,
.popup-area.full .popup-ft {padding:5px 10px; width:100%; display:flex; align-items:center;}
.popup-area.full .popup-hd {height:60px; background-color:var(--defult-color1);}
.popup-area.full .popup-hd a {font-size:1.4rem; color:var(--bs-gray-dark);}
.popup-area.full .popup-hd a:hover {color:var(--point-color1);}
.popup-area.full .popup-hd .inc-box>li:first-child,
.popup-area.full .popup-hd .inc-box>li:last-child {width:20%;}
.popup-area.full .popup-hd .inc-box>li:nth-child(2) {width:60%; justify-content:center;}
.popup-area.full .popup-hd .inc-box>li:last-child {justify-content:flex-end;}
.popup-area.full .popup-hd .inc-box>li {position:relative; display:flex; align-items:center;}
.popup-area.full .popup-hd .icon {width:45px; height:45px; background-color:var(--black-color1); color:var(--defult-color1); display:flex; justify-content:center; align-items:center; border-radius:100%; margin-right:10px;}
.popup-area.full .popup-cnt {height:calc(100% - 120px); overflow-x:hidden; overflow-y:auto;}
.popup-area.full .popup-cnt .imgsize {height:auto; margin-bottom:60px; padding:0 20px 0 30px;}
.popup-area.full .popup-cnt .imgsize.etc {padding:0;}
.popup-area.full .popup-cnt img {width:100%;}
.popup-area.full .popup-ft {height:60px; position:absolute; bottom:0; background-color:var(--defult-color1);}
.popup-area.full .popup-ft .btn-box {display:flex; justify-content:center;}
.popup-area.full .popup-ft .btn-box a {text-align:center;}
.popup-area.full.popup-on {display:block;}

.popup-area.full .btn-box>a {color:var(--defult-color2); position:relative; display:inline-block; font-size:.9rem; padding:10px 15px; border-radius:5px; background-color:var(--defult-color1); box-shadow: -6px -6px 14px rgba(233, 233, 233, 0.7), 6px 6px 10px rgba(0, 0, 0, 0.15); border:var(--border-s1); margin:1%; min-width:50px; background-image:linear-gradient(15deg, var(--gray-color1), var(--defult-color1)); white-space:nowrap; transition:.5s;}
.popup-area.full .btn-box>a::after {content:""; position:absolute; left:50%; bottom:3px; transform:translate(-50%, 0); width:30px; height:3px; background-color:var(--defult-color1); border-radius:10px;}
.popup-area.full .btn-box>a:hover {box-shadow:-2px -2px 4px var(--rgba-color3), 2px 2px 2px var(--rgba-color1); background-image:linear-gradient(-165deg, var(--gray-color1), var(--defult-color1));}
.popup-area.full .btn-box>a:hover::after {background-color:var(--red-color1); transition:.5s;}

.popup-box {position:absolute;}
.popup-box.type1 {top:7%; width:300px; background-color:var(--white-rgba1); border-radius:5px; overflow:hidden; box-shadow:3px 3px 10px var(--rgba-color2); animation:zi-ani-t002 5s 1s 1 cubic-bezier(.68, -.55, .265, 1.55);}
.popup-box.type1::before {content:""; position:absolute; width:5px; height:100%; left:0; top:0; background-color:var(--red-rgba1);}
.popup-box.type1::after {content:attr(title); position:absolute; left:0; top:0; font-size:1em; padding:.5em 1em; color:var(--red-color3);}
.popup-box.type1 li {margin:0 .9em; margin-top:5px;}
.popup-box.type1 li:first-child {margin-top:1.5em; font-size:1.2rem; font-weight:bolder; line-height:130%; word-break:keep-all;}
.popup-box.type1 li:last-child {margin-bottom:1em; background-color:var(--defult-color1); border-radius:5px; padding:10px;}
.popup-box.type1 li.tel {margin-top:1em; margin-bottom:1em;}
.popup-box.type1.bg-svg-w1 {background-position:right -40px bottom; background-size:50%; -webkit-backdrop-filter:saturate(100%) blur(30px); backdrop-filter:saturate(100%) blur(30px);}
.error-box.type1 {background-color:var(--defult-color1); padding:2em; text-align:center; font-size:2em; font-family: 'yg-jalnan'; border-radius:10px;}
/***** 팝업 스타일 : end *****/
/***** 팝업 콘텐츠 스타일(doc 스타일 별도 정리 예정) : start *****/
#popCnt {padding:20px 20px 20px 30px;}
#popCnt h1, #popCnt h2 {margin:auto; padding:0;}
#popCnt h1 {font-size:1.5rem;}
#popCnt h2 {font-size:1.1rem; color:var(--brown-color1); position:relative; border-bottom:var(--brown-color1) solid 1px;}
#popCnt h2::after {content:""; position:absolute; bottom:0; z-index:-1;}
#popCnt h2::after {width:5px; height:5px; background-color:var(--brown-color1);}
#popCnt h2>span {background-color:var(--defult-color1); padding-right:5px;}
#popCnt p {margin:10px 0 15px;}
#popCnt .thumb {margin-bottom:30px;}
#popCnt .title h1 {margin-bottom:10px;}
#popCnt .tags {display:flex; margin-bottom:30px; padding-bottom:30px; border-bottom:var(--border-s1);}
#popCnt .tags>span {padding:5px 10px; border:var(--border-s1); border-radius:100px; font-size:.8rem; margin-right:5px;}
#popCnt .tags>span::before {content:"#";}
#popCnt .cp-top {margin-bottom:2%; padding:1% 0; position:sticky; top:0; background-color:var(--defult-color1); z-index:1;}
#popCnt .cp-top>ul {display:flex; justify-content:space-between; align-items:center; width:100%;}
#popCnt .cp-top>ul>li .icon {width:50px; height:50px; background-color:var(--black-color1); color:var(--defult-color1); border-radius:100%; display:flex; align-items:center; justify-content:center;}
#popCnt .cp-top>ul>li .name {padding:5px;}
#popCnt .cp-top>ul>li:first-child {display:flex; align-items:center;}
#popCnt .cp-top>ul>li:last-child {text-align:right;}
#popCnt .cp-content {display:flex; justify-content:space-between;}
#popCnt .cp-content>.cp-boxl {width:220px;}
#popCnt .cp-content>.cp-boxl .info-box {position:sticky; top:5px;}
#popCnt .cp-content>.cp-boxl .cp-info {}
#popCnt .cp-content>.cp-boxl .cp-info li p {margin:10px 0 30px 0; word-wrap:break-word; word-break:keep-all;}
#popCnt .cp-content>.cp-boxl .cp-info .txt-s1 span {font-size:.7rem; border:var(--border-s1); border-radius:10px; padding:5px 10px; display:inline-block; margin:0 3px 3px 0;}
#popCnt .cp-content>.cp-boxr {width:650px;}
#popCnt .cp-content .data-box .title {font-size:1.1rem; border-bottom:var(--border-s1); margin-top:20px; margin-bottom:5px; text-align:center; }
#popCnt .cp-content .data-box .title>span {background-color:var(--defult-color1); border-radius:10px 10px 0 0; padding:5px 20px; border:var(--border-s1); border-bottom:none;}
#popCnt .cp-content .data-box .txt1 {padding:5px 0 10px; font-size:.8rem; text-align:center; color:var(--gray-color2);}
#popCnt .cp-content .data-box.style2 {position:relative;}
#popCnt .cp-content .data-box.style2>li {margin-bottom:30px;}
#popCnt .cp-content .data-box.style2>li:active {transform:scale(1.3);}
#popCnt .cp-content .data-box.style2>li:active img {position:inherit;}
#popCnt .cp-bottom {border-top:var(--border-s1); padding-top:3%; margin-top:3%;}

#video.youtube {padding-bottom:56.3%; position:relative;}
#video.youtube>iframe {position:absolute; top:0; left:0; width:100% !important; height:100% !important;}
/***** 팝업 콘텐츠 스타일(doc 스타일 별도 정리 예정) : end *****/

[data-scroll] {
  opacity: 0;
  will-change: transform, scale, opacity;
  transform: translateY(6rem) scale(0.93);
  transition: all 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

[data-scroll='in'] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-scroll='out'] {
  opacity: 0;
}

/* @keyframes style area */
@keyframes zi-ani-t001 {
    0% {left:-100%; opacity:0;}
    100% {left:-10px; opacity:1;}
}
@keyframes zi-ani-t002 {
    0%, 100% {transform:translateX(100%);}
    10%, 90% {transform:translateX(-2rem); right:10px;}
}
@keyframes zi-ani-t003 {
    0% {left:-200%;}
    100% {left:200%;}
}
@keyframes zi-ani-m001 {
    0% {background-position:center 0;}
    100% {background-position:center 600%;}
}
@keyframes zi-ani-d001 {
    0% {opacity:1; display:block;}
    100% {opacity:0; display:none;}
}
@keyframes zi-ani1-1 {
    0% {transform:rotate(0);}
    100% {transform:rotate(360deg);}
}
@keyframes zi-ani-r001 {
    0 {transform:translate(-50%, -50%) rotate(0);}
    100% {transform:translate(-50%, -50%) rotate(360deg);}
}

/* @media style area */
@media screen and (min-width:970px) {
    .cp-boxl #thumbBox {display:none;}
    .popup-area.full .popupBox {width:970px; border-radius:10px; overflow:hidden;}
    .popup-area.full .popupBox.hfullp {height:98%;}

}

/* @media screen and (min-width:1300px) {
    .popup-area.full .popupBox {width:90%;}
    #popCnt .cp-content .cp-boxl {width:27%;}
    #popCnt .cp-content .cp-boxr {width:70%;}
} */

@media screen and (max-width:970px) {
    .cp-boxr #thumbBox {display:none;}
    .popup-area.full .popupBox {position:fixed; width:100vw;}
    .popup-area.full .popupBox.hfullp {height:100%;}
    #popCnt .cp-content .cp-boxl {width:27%;}
    #popCnt .cp-content .cp-boxr {width:70%;}
    .style-t5 .card {width:31%;}
}

@media screen and (max-width:850px) {
    @keyframes zi-ani-t001 {
        100% {left:-145px;}
    }
}

@media screen and (max-width:770px) {
    #popCnt .cp-content {flex-direction:column;}
    #popCnt .cp-content .cp-boxl,
    #popCnt .cp-content .cp-boxr {width:100%;}
    .popup-area.full .popup-hd .inc-box>li:first-child .name {display:none;}
}

@media screen and (max-width:450px) {
    .popup-area.full .popup-ft .btn-box>a>span {display:none;}
    @keyframes zi-ani-t001 {
        0% {bottom:-100%; animation-delay:1s;}
        100% {left:-10px;}
    }
    .style-t5 .card {width:98%; margin:3% 1%;}
}

@media screen and (max-height:600px) {
    .popup-area.full .popupBox.hfullp {width:100%; height:100%;}
    .popup-area.full .popup-hd .inc-box>li:first-child .name {display:none;}
    .popup-area.full .popup-cnt .imgsize.etc {height:calc(100% - 120px);}
    .popup-area.full .popup-cnt .imgsize.etc>img {height:100%;}
    .popup-area.full .popupBox.hauto {width:auto; min-width:400px;}
}