@charset "euc-kr";

:root {--color-main: #f7455d; }

    
    /* ÇØ´õ */
    .headerWrap.aiColoringForm{width: 100%; padding: 0 20px; background-color: transparent; z-index: 999; border-bottom: 0;}
    .headerWrap.aiColoringForm.on{background-color: #fff;}
    .headerWrap.aiColoringForm .header{height: 80px; display: flex; align-items: center; max-width: 1280px; margin: 0 auto;}
    .headerWrap.aiColoringForm .header .header__logoWrap{display: flex; align-items: center; justify-content: flex-start; gap: 10px; }
    .headerWrap.aiColoringForm .header .header__logoWrap a{font-size: 20px; color: #000; font-weight: var(--weight-bold); margin-top: 0;}
    .headerWrap.aiColoringForm .header .rightWrap{gap: 13px !important; max-width: fit-content; width: 100% !important;}
    .headerWrap.aiColoringForm .header .rightWrap .info{color: #666;}
    .headerWrap.aiColoringForm .header .rightWrap .info strong{color: #666;}

    .aiColoringForm .btn-chip{font-size: 13px; border-radius: 50px; padding: 0px 18px; height: 28px; line-height: 26px; border: 1px solid #c2c2c2; color: #666;}
    .headerWrap.aiColoringForm .header .chip-credits{border: 1px solid #fa8f9e; color: var(--color-main);}
    .headerWrap.aiColoringForm .header .chip-credits *{color: inherit; font-size: inherit; }

    section > div.title{margin-bottom: 30px;}

    .leftWrap > .container {padding-top: /*50px >*/ 25px;}
    .leftWrap .searchWrap{justify-content: unset;} 
    .headerWrap .header .leftWrap form{width: 100%;}
    .searchWrap .hedaer__search { position: absolute; z-index: 100; }



    /* 1 - ½áÄ¡ */
    main.main-coloringAi::before{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 722px; background-image: -webkit-linear-gradient(0deg, rgb(255, 0, 0) 0%, rgb(180, 0, 255) 100%); mask-image: linear-gradient(to bottom, black 90%, transparent 100%); mask-mode: alpha; opacity: .1;}
    main.main-coloringAi{display: flex; flex-direction: column; align-items: center; gap: 80px; padding-top: 50px;}


    .sec-main { display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; width: 100%; position: relative; z-index: 1;}
    .sec-main .title { font-size: 30px; line-height: 1; margin: 0; }
    .sec-main .title .slide-Keyword { height: 30px; overflow: hidden; }
    .sec-main .title .slide-Keyword .swiper-slide{ font-size: 30px; font-weight: var(--weight-bold); line-height: 29px; color: inherit;}
    .sec-main .subTitle{font-size: 18px; color: #666;}
    .sec-main .subTitle img{height: 18px;}



    .sec-main .header__search{ width: 740px; height: 55px; box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 10px; border: 0; background-color: #fff; color: #666; display: flex; align-items: center; padding: 0; margin-top: 0;}
    .sec-main .header__search .searchSec__input{width: 100%; height: 100%; margin-left: 30px; font-size: 18px; line-height: normal; }
    .sec-main .header__search .searchSec__input::placeholder { color: #000 !important; opacity: 1; font-size: 18px; line-height: normal;}
    .sec-main .header__search .btn-member--grd.ai{width: 120px; height: 40px; margin-right: 10px; }
    .sec-main .header__search .btn-member--grd.ai .ico-magicWand{width: 20px;} 
    .toggles-box{margin-bottom: 0;}
    .toggles-box .radio-wrap{padding: 0 6px;}
    .toggles-box .radio-wrap .slide-item{width: 130px; height: 40px; background-color: #fff !important;}
    .toggles-box .radio-wrap input[type="radio"]:nth-of-type(1):checked ~ .slide-item{left: 6px;}

    .toggles-box .radio-wrap{background-color: #e1ced8; box-shadow: none; width: 271px; height: 50px; max-height: 50px; }
    .toggles-box .radio-wrap label{color: #000; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; }
    .toggles-box .radio-wrap label i.ico-search--black{width: 22px;}
    .toggles-box .radio-wrap label i.ico-magicWand--black{width: 20px;}
    .toggles-box .radio-wrap input[type="radio"]:nth-of-type(1):checked ~ label i.ico-search--black{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 -960 960 960'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25' gradientTransform='rotate(30)'%3E%3Cstop offset='0%25' style='stop-color:%23f7455d;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23bf6ce2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z' fill='url(%23grad1)'/%3E%3C/svg%3E%0A");}
    .toggles-box .radio-wrap input[type="radio"]:nth-of-type(2):checked ~ label i.ico-magicWand--black{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='23' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25' gradientTransform='rotate(30)'%3E%3Cstop offset='0%25' style='stop-color:%23f7455d;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23bf6ce2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23grad1)' d='m6.78578 5.33693 1.64627.89867c.21173.1159.28909.38157.17305.59235-.04004.07251-.09976.13283-.17305.17282l-1.64627.89935c-.07329.03999-.133.09963-.17304.17283l-.9005 1.64419c-.11604.21077-.38069.28876-.59241.17282-.07329-.03999-.13301-.10031-.17304-.17282l-.9005-1.64419c-.04004-.0732-.10043-.13284-.17372-.17283l-1.6456-.89867c-.21172-.1159-.28908-.38157-.17304-.59235.04004-.07251.09976-.13283.17304-.17282l1.6456-.89868c.07329-.03998.13368-.1003.17372-.1735l.9005-1.64419c.11604-.21077.38069-.28871.59241-.17282.07329.03999.133.10031.17304.17282l.90186 1.64352c.03935.07319.09907.13283.17168.1735ZM19.0528 14.1211l1.6456.8986c.2117.1159.289.3816.173.5924-.04.0725-.0998.1328-.173.1728l-1.6456.8994c-.0733.04-.1337.0996-.1738.1728l-.9005 1.6442c-.116.2108-.3807.2887-.5924.1728-.0733-.04-.133-.1003-.173-.1728l-.9005-1.6442c-.0401-.0732-.0998-.1328-.1731-.1728l-1.6462-.8994c-.2118-.1159-.2891-.3816-.1731-.5923.0401-.0725.0998-.1329.1731-.1729l1.6462-.8986c.0733-.04.133-.1003.1731-.1735l.9005-1.6442c.116-.2108.3807-.2887.5924-.1728.0733.0399.133.1003.173.1728l.9005 1.6442c.0401.0732.1005.1335.1738.1735ZM11.92 3.45349l1.081.59031c.1392.07658.1894.25076.1127.3897-.0265.04744-.0652.08675-.1127.1125l-1.081.59099c-.0481.02575-.0875.06506-.114.11318l-.591 1.07963c-.076.13894-.2497.18977-.3889.11386-.0481-.02643-.0882-.06574-.114-.11386l-.5917-1.07963c-.0265-.04812-.0651-.08675-.1133-.11318L8.92607 4.546c-.13911-.0759-.19001-.2494-.114-.38834.02646-.04812.06582-.08811.114-.11386l1.08103-.59031c.0482-.02643.0875-.06574.1133-.11386l.5917-1.07895c.076-.13894.2498-.18977.3889-.11386.0482.02643.0882.06574.114.11386l.591 1.08098c.0265.04745.0659.08608.114.11183Zm8.6562.49407L19.05 2.42401c-.5652-.56523-1.482-.56523-2.048-.00068l-.0006.00068L3.40163 16.0065c-.56595.5646-.56595 1.4802-.00068 2.0454l.00068.0007 1.52616 1.5236c.56527.5652 1.48205.5652 2.048.0006l.00068-.0006L20.5762 5.99365c.5653-.56524.5653-1.48086 0-2.04609ZM15.275 9.08345l-1.3667-1.36564 4.0282-4.02305 1.3673 1.36564-4.0288 4.02305Z'/%3E%3C/svg%3E%0A");}

    .contents-wrap .contents.share,
    .contents-wrap .contents.sale{display: none;}
    .contents-wrap .contents.share.on,
    .contents-wrap .contents.sale.on{display: block; animation: show .4s ease-in-out; }


    @keyframes show {
        0% { opacity: 0; transform: translateX(-20px); }
        100% { opacity: 1; transform: translateX(0); }    
    }

    .dimBox.dim + .searchWrap .searchWord{display: block !important;}
    .sec-main .searchWrap .dimBox.dim + .header__search  { z-index: 1041; }
    .searchWrap{width: fit-content; justify-content: center;}
    .searchWrap .searchWord{width: 100%; top: 55px; left: 0; border-radius: 0 0 10px 10px;}
    /* .searchWrap .searchWord{width: 100%; left: 0; top: 50px; padding-top: 8px; border-radius: 0 0 10px 10px; box-shadow: 2px 5px 6px 0px rgba(0, 0, 0, 0.1)} */
    .searchWrap .searchWord .search-tit{text-align: center;}
    .searchWrap .searchWord .search-tit img{height: 20px; margin-bottom: 4px; }
    /* .searchWrap .searchWord .recent{padding: 25px 20px; margin: 0;} */
    .searchWrap .searchWord .recent ul{display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px;}
    .searchWrap .searchWord .recent ul li{width: fit-content; height: 30px; background-color: #f8f8f8; border-radius: 50px; text-align: center; }
    .searchWrap .searchWord .recent ul li a:first-child{height: 30px; line-height: 30px; -webkit-line-clamp: unset; text-align: center; padding: 0 15px; font-size: 13px; text-decoration: none !important; }

    /* #typing-input::placeholder { color: #aaa; opacity: 1; } */

    .sec-slider1{margin-top: -40px; max-width: 100%;}
    .sec-slider1 .splide__slide{min-width: 230px;max-width: 230px; text-align: left;}
    /* .sec-slider1 .section__list .list__thumb{width: auto !important; height: auto !important;} */

    /* »ý¼º Çϱâ AI Ãßõ ÇÁ·ÒÇÁÆ® Ãß°¡*/
    .pDimBox.dim +  .createPrompt{display: block !important;}
    .sec-main .header__search {position: relative;}
    .sec-main .header__search.on{border-radius: 10px 10px 0 0;}
    .sec-main .createPrompt { position: absolute; top: 100%; left: 0; width: 100%; z-index: 100; background-color: #ffffff; border: 1px solid #e0e0e0; border-top: none; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 0 0 8px 8px; margin-top: -1px; padding: 10px; box-sizing: border-box;}
    .sec-main .createPrompt .search-tit{text-align: center;}
    .sec-main .createPrompt .search-tit img{height: 15px; margin-bottom: 4px; }
    .sec-main .createPrompt .recent{padding: 25px 20px; margin: 0;}
    .sec-main .createPrompt .recent ul{display: flex; flex-wrap: wrap; gap: 8px; }
    .sec-main .createPrompt .recent ul li{width: fit-content; background-color: #f8f8f8; border-radius: 50px; text-align: center; }
    .sec-main .createPrompt .recent ul li a:first-child{height: 30px; line-height: 30px; -webkit-line-clamp: unset; text-align: center; padding: 0 15px; font-size: 13px; text-decoration: none !important; } */

    .section__list{gap: 30px;}
    .section__list.item5 .list__item  { max-width: calc(20% - 24px); }

    /* ¸¹ÀÌ Ã£À¸½Ã´Â »öÄ¥°øºÎ */
    .swiper-Category--wrap{position: relative;}
    /* .swiper-wrapper{gap: 30px;} */
    .swiper-button{width: 40px; height: 40px; z-index: 9; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='19.5' fill='white' stroke='%23D3D3D3'/%3E%3Cpath d='M17 19.535L23 14' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 19.535L23 25.07' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}
    .swiper-Category--wrap .swiper-button-next{right: -19px; transform: rotate(180deg);}
    .swiper-Category--wrap .swiper-button-prev{left: -24px;}
    .swiper-Category {overflow: hidden;     margin: -10px 0 -10px -10px; padding: 10px 0 10px 15px; }
    .swiper-Category .swiper-slide {width: 133px; max-width: 133px; height: 130px;}
    .swiper-Category .swiper-slide a{width: 100%; height: 100%; background-color: #f7f7f7; border-radius: 5px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 25px; /* transition: transform .1s ease; */ font-weight: 600;}
    .swiper-Category .swiper-slide a img{height: 30px;}
    .swiper-Category .swiper-slide a:hover{transform: scale(1.0667) translateZ(0);}

    /* ÃֽŠµî·ÏµÈ »öÄ¥°øºÎ */
    .sec-recommend .tab-menu--wrap{width: 100%; overflow: auto; }
    .sec-recommend .tab-menu--wrap .tab-menu.keyword{width: max-content; padding-bottom: 0px; margin: 0 auto; }
    .sec-recommend .tab-menu--wrap ~ .tab-con{margin-top: 30px;}
    .sec-recommend .tab-menu.keyword { display: flex; justify-content: center; align-items: center; gap: 15px; padding-bottom: 40px; margin: 0; overflow: unset; }
    .sec-recommend .tab-menu.keyword .swiper-slide { width: fit-content; }
    .sec-recommend .tab-menu.keyword .swiper-slide a{font-size: 15px; border: 1px solid #e8e8e8; text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 25px; box-shadow: none; color: var(--color-Cont); font-weight: var(--weight-bold); gap: 5px; border-radius: 25px;}
    .sec-recommend .tab-menu.keyword .swiper-slide img{height: 15px;}
    .sec-recommend .tab-menu.keyword .swiper-slide.on a{color: var(--color-main); border: 1px solid var(--color-main); background-color: #fff;}
    .sec-recommend .tab-con .none { display:none; }
    .sec-recommend .tab-con .block { display:block; }


    /* ÀÚÁÖ¹¯´Â Áú¹® */
    .section-faq .content{width: 100%; text-align: left; margin-bottom: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5%; margin-top: -15px}
    .section-faq .content .faq-wrap{width: 47%;}
    .section-faq .content li{font-size: 15px; color: #666666; display: flex; align-items: center; box-sizing: border-box; }
    .section-faq .content li.q {height: 60px; border-bottom: var(--border-default); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
    .section-faq .content li.q:hover {color: #000;}
    .section-faq .content li.q span.ico-Aarrow--gray { transform: rotate(270deg); }
    .section-faq .content li.q.thisOne{font-weight: var(--weight-bold); color: #000;}
    .section-faq .content li.q.thisOne .ico-Aarrow--gray{    transform: rotate(360deg);}
    .section-faq .content li.a { display: none; color: var(--color-Cont); font-size: 15px; font-weight: var(--weight-medium); padding: 20px 0px; border-bottom: 1px #ecebf3 solid;}


    /* ǪÅÍ - ÀÎÆ÷ */
    .footer.new {clear: both;border-top:2px solid #000;background: #f4f5f6; overflow: hidden;}
    .footer.new .utility{position:relative;border-bottom:1px solid #dadada;}
    .footer.new .utility .content{height: 53.333px !important;}
    .footer.new .list-utility{padding:18px 0;margin-bottom:0}
    .footer.new .list-utility li{position: relative;display: inline-block;padding:0 25px;line-height: 1;margin-right: -5px;}
    .footer.new .list-utility li:first-child{padding-left:0;}
    .footer.new .list-utility li:after{content:"";width: 1px;height: 13px;position: absolute;top: 0;right: 0;background-color: #d8d8d8;}
    .footer.new .list-utility li:last-child:after{display:none;}
    .footer.new .list-utility li a{font-size: var(--size-small);color: #666;}
    .footer.new .list-utility li.private-txt a{font-weight: var(--weight-bold);}

    .footer.new .content {width: 100%; max-width: 1280px ;height: 205px;min-height: 0px !important;padding: 0;position: relative;z-index: 0;}
    .footer.new .content .top { position: absolute; top: 0; right: -65px; padding: 0; margin: 0; height: 45px; border-radius: 0 0 22px 22px; background: #1c1e24; overflow: hidden; }
    .footer.new .center {float: left;width: 438px;}
    .footer.new .center img{vertical-align:bottom;}
    .footer.new .center p {margin: 38px 0 15px 0;font-size: var(--size-medium);font-weight: var(--weight-bold);color: #000;    line-height: normal;}
    .footer.new .center p.cscenter-info{margin-top: 10px;color: var(--color-Cont); font-size: var(--size-small); font-weight: var(--weight-medium); line-height: var(--gap-narrow);}
    .footer.new .center .cs-btn{display:inline-block;width: 124px;height: 27px;padding-left: 18px;margin-left: 6px;border-radius:27px;border:1px solid #f2f2f2;font-size: var(--size-small-small); font-weight: var(--weight-medium); line-height:27px;letter-spacing:-0.5px;color:#000;  background:#fff url("https://imgs.yesform.com/z_n/imgs/2020/common/cs_btn_bg.png") no-repeat 125px center;box-sizing: content-box;}
    .footer.new .customer {float: left;margin: 34px 0 0 51px;}
    .footer.new .family{position:absolute;right:0;top:0;}
    .footer.new .family .select a {display: block;width: 194px;height: 28px;margin-top: 10px;padding-left: 10px;line-height: 26px;text-decoration: none;border-radius: 5px;border: solid 1px #cbd4d9;background: #fff url("https://imgs.yesform.com/z_n/imgs/2016/main/footer-family-arr.gif") no-repeat 187px 50%;  box-sizing: content-box; color: #666;}
    .footer.new .family .option {padding:0;margin:0;border:solid 1px #cbd4d9;background: #fff;position: absolute;bottom: 0px;left:0;z-index: 100; border-radius: 5px; width: 100%;}
    .footer.new .family .option li a {display:block;width:194px;height:20px;padding-left:10px;line-height:20px;font-size: var(--size-small-small);color: var(--color-Cont);}
    .footer.new .family .option li a:hover {text-decoration: underline;}
    .footer.new .family:hover .option{display: block !important;}
    .footer.new .address {float: left;margin: 72px 0 0 0;font-size: 13px;line-height:1.5;color: var(--color-Cont);}
    .footer.new .address p{font-size: var(--size-small); font-weight: var(--weight-medium); color: #666;}
    .footer.new .address strong{display:block;color: #000; font-size: 15px;}
    .footer.new .address p:first-child{float:left;width:310px;}
    .footer.new .address p:last-child{float:right;}
    .about {width: 980px;margin: 0 auto;overflow: hidden;}
    .about .certiArea{float:left;}
    .about .partnerArea{float:right;}
    .about .certiArea div, .about .partnerArea div{display: inline-block;padding:24px 0;margin-right:-4px;}
    .about .certiArea div{margin-right: 30px;}
    .about .partnerArea div:last-child{margin-right:0;}

    /* ǪÅÍ - ½ÉÇà */
    .footer__simple { display: none;}




    @media (max-width: 1600px){
        .sec-main{padding-left:0; padding-right: 0;}
    }

    @media (max-width: 991px) {
        .footer__simple { flex-direction: column-reverse; justify-content: center; font-size: 13px; height: 125px; margin-top: 3rem; }
        .footer__simple .copyright { margin-right: 0; margin-top: 8px; font-size: var(--size-small-small);}
        .footer__simple ul li a { font-size: var(--size-small-small);}
        .footer ul li::after { vertical-align: unset;}

    }
    @media (min-width: 1280px) {
        .section__list .list__thumb{width: 230px; height: 325px;}
    }

    @media all and (max-width: 1280px) {
        .swiper-Category--wrap{margin: 0 23px; padding: 0 10px;}

        /* .swiper-Category{width: max-content;} */

        .section-faq .content{gap: 0%;}
        .section-faq .content .faq-wrap{width: 100%;}
        .section-faq .content .faq-wrap:last-child li.q:nth-child(1) {border-top: 0;}
    }
    @media (max-width: 1024px) {
        .section__list.item5 .list__item  { max-width: calc(33.333% - 20px); }

        .sec-recommend .tab-menu.keyword .swiper-slide a{height: unset;  line-height: unset;}

    }

    @media all and (max-width: 991px) {
        .section-faq .content { margin-top: 30px; margin-bottom: 0; }
        .footer__simple {display: flex;}

    }
    @media (max-width: 768px) {
        main.main-coloringAi::before{height: 14%;}

        .leftWrap > .container{padding-top: 20px;}
        .searchWrap{width: 100%;}
        .sec-main .searchWrap { padding-right: 0; }
        
        .sec-main .title .slide-Keyword { height: 67px;}
        .sec-main .title .slide-Keyword .swiper-slide{ font-size: 24px; font-weight: var(--weight-bold); line-height: 1.4; color: inherit;}
        .sec-main .subTitle{font-size: 15px; padding: 0 20px;}

        .headerWrap.aiColoringForm .header{padding: 0; height: unset; }
        .aiColoringForm .btn-chip{padding: 0px 14px; height: 24px; line-height: 22px;}
        .headerWrap.ver_02.aiColoringForm .header .btn-menu{width: fit-content; top: 15px;}

        main.main-coloringAi{padding-top: 25px}
        .sec-main {gap: 25px;}
        .sec-main .title{font-size: 24px; line-height: 1.4;}
        .sec-main .header__search{width: 100%;}
        .sec-main .contents-wrap{ width: 90%;}
        .searchWrap .searchWord .recent ul{justify-content: center;}

        .sec-slider1 .splide__slide{width: calc(50% - 25px) !important; min-width: unset; max-width: 100%; margin-left: 10px !important}

        .toggles-box .radio-wrap { max-width: 100%; }
        .sec-main .header__search .btn-member--grd.ai{width: 40px;}


        .swiper-Category .swiper-slide{max-width: 74px; height: 102px; }
        .swiper-Category{    padding: 0; margin: 0; }
        .swiper-Category--wrap{overflow: hidden; margin: 0; padding: 0;}
        /* .swiper-Category{    width: max-content;} */
        .swiper-Category--wrap .swiper-button{display: none;}

        .sec-recommend .tab-menu--wrap ~ .tab-con{margin-top: 0;}
        .section__list.item5 .list__item:nth-child(n+5){display: none;}

        .sec-recommend .tab-menu.keyword{display: none;}
        .sec-recommend .tab-con .content > div .doc:nth-child(n+5){display: none;}
    }