@charset "utf-8";

@font-face {
    font-family:'Cafe24ShiningStar';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Shiningstar.woff') format('woff');
    font-weight:normal;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight:100;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight:200;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight:300;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight:400;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight:500;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight:600;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight:700;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight:800;
    font-display:swap;
}

@font-face {
    font-family:'Pretendard';
    src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight:900;
    font-display:swap;
}
/* common */
:root{
    --border:2px solid #000;
    --shadow:4px 6px 2px rgba(0,0,0,0.05);
    --shadow2:4px 6px 2px rgba(0,0,0,0.2);

    --pink300:#FF4EC4;
    --pink400:#EB00B1;
    --green800:#003304;
}
/* reset */
html:has(.clickn.interactive){-webkit-text-size-adjust:none;}
html:has(.clickn.interactive) .wrap{overflow-x:clip;}
a{text-decoration:none;}
ul,ol{list-style:none;}
.clickn *{margin:0;padding:0;box-sizing:border-box;font-family:"Pretendard";font-weight:500;letter-spacing:normal;}
.clickn .blind{position:absolute;left:-9999px;}
.blind{position:absolute;left:-9999px;}
.center_wrap{width:1220px;margin:0 auto;font-weight:400;}
.f_dc{flex-direction:column;}
.pc_con{display:block;}
.m_con{display:none;}

/* common */
.clickn .btn_link{display:flex;align-items:center;gap:4px;line-height:20px;padding:20px 35px;border:1px solid #E4E4E4;border-radius:100px;font-size:18px;color:#838383;white-space:pre;line-height:13px;letter-spacing:-0.18px;}
.clickn .btn_link::after{display:inline-block;content:"";width:16px;height:16px;background-image:url(/images/event/clickn/ico_arrow_right.svg);background-size:contain;}
.clickn .btn_link:hover{border-color:#A4A4A4;color:#101010;}
.clickn .btn_link:hover::after{filter:brightness(0);}
.clickn .dot_list > li{position:relative;left:2px;display:flex;align-items:flex-start;width:calc(100% - 16px);font-size:clamp(14px, 1.6vw, 18px);}
.clickn .dot_list > li::before{position:relative;content:'';top:5px;width:14px;aspect-ratio:1/1;background-image:url(/images/event/clickn/ico_check_blue.svg); background-size:contain;margin-right:7px;}
.clickn .dotL_list > li{position:relative;left:16px;}
.clickn .dotL_list > li::before{position:absolute;content:'';top:14px;left:-12px;width:4px;height:4px;border-radius:4px;background-color:#000;}
/* interactive */
.clickn {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.clickn .interactive section{opacity:0;transition:.5s;visibility:hidden;}
.clickn .interactive section.is-active{opacity:1;visibility:visible;}
.clickn .interactive section .wrap > *{ opacity:0;transform:translateY(.75rem);transition:.5s;}
.clickn .interactive section.is-active .wrap > *{ opacity:1;transform:translateY(0);}
.clickn .interactive section.is-active .wrap > *:nth-child(1){transition-delay:.4s;}
.clickn .interactive section.is-active .wrap > *:nth-child(2){transition-delay:.6s;}
.clickn .interactive section.is-active .wrap > *:nth-child(3){transition-delay:.8s;}
.clickn .interactive section.is-active .wrap > *:nth-child(4){transition-delay:1.2s;}
.clickn .interactive section.is-active .wrap > *:nth-child(5){transition-delay:1.4s;}
.clickn .interactive section.is-active .wrap > *:nth-child(6){transition-delay:1.6s;}

/* page */
/* overview */
@keyframes btnFloat{0%{transform:translateY(-10px);}50%{transform:translateY(0);}100%{transform:translateY(-10px);}}
@keyframes btnFloatRev{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}}
@keyframes imgShake{0%{transform:rotate(0deg);} 25%{transform:rotate(2deg);} 50%{transform:rotate(-2deg);} 75%{transform:rotate(2deg);} 100%{transform:rotate(0deg);}}
@keyframes badgeShow{0%{opacity:0;visibility:hidden;}30%{opacity:0;visibility:hidden;}50%{opacity:1;visibility:visible;}80%{opacity:1;visibility:visible;}100%{opacity:0;visibility:hidden;}}
.clickn .overview{position:relative;min-height:860px;background:url(/images/event/clickn/bg_overview.png) repeat-x center;background-size:cover;overflow:hidden;}
.clickn .overview .bg_wrap{position:absolute;z-index:0;width:100%;height:100%;}
.clickn .overview .bg_wrap *{background-repeat:no-repeat;background-position:center;background-size:contain;font-size:0;}
.clickn .overview .bg_wrap li{position:absolute;z-index:-1;background-size:contain;background-repeat:no-repeat;transform:translate(-50%,-50%);}
.clickn .overview .bg_wrap li > img{width:100%;height:100%;}
.clickn .overview .bg_wrap > li:nth-child(1){top:calc(50% - 17.2vw);left:calc(50% - 27.5vw);width:38.231vw;aspect-ratio:734/523;}
.clickn .overview .bg_wrap > li:nth-child(2){bottom:calc(50% - 37.4vw);right:calc(50% - 75.7vw);width:33.438vw;aspect-ratio:642/587;}
.clickn .overview .bg_wrap > li:nth-child(3){bottom:calc(50% - 13.8vw);left:calc(50% - 32.1vw);width:12.552vw;aspect-ratio:241/106;}
.clickn .overview .bg_wrap > li:nth-child(4){top:calc(50% - 16.2vw);right:calc(50% - 31.1vw);width:9.792vw;aspect-ratio:188/100;}
.clickn .overview .bg_wrap > li:nth-child(1) > img{animation:imgShake 5s infinite;}
.clickn .overview .bg_wrap > li:nth-child(2) > img{animation:imgShake 5s 2.5s infinite;}
.clickn .overview .bg_wrap > li:nth-child(3) > img{animation:btnFloat 6s infinite;}
.clickn .overview .bg_wrap > li:nth-child(4) > img{animation:btnFloatRev 6s infinite;}
.clickn .overview .overview_wrap{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:38px;padding:204px 0 210px;}
.clickn .overview .overview_wrap div{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;}
.clickn .overview .overview_wrap small{position:relative;z-index:1;font-family:'Cafe24ShiningStar';color:#3A4658;font-size:clamp(24px, 4vw, 51px);letter-spacing:-0.51px;line-height:normal;}
.clickn .overview .overview_wrap small::after{position:absolute;z-index:-1;bottom:14%;left:calc(50% + 1%);display:block;content:"";width:121.25%;aspect-ratio:338/18.96;background-image:url(/images/event/clickn/img_overview_underline.png);transform:translateX(-50%);}
.clickn .overview .overview_wrap small em{font-family:inherit;color:#0052EB;}
.clickn .overview .overview_wrap sub{color:#000;font-size:clamp(30px, 5vw, 70px);font-weight:300;line-height:70px;letter-spacing:-2.8px;}
.clickn .overview .overview_wrap h2{display:flex;align-items:center;color:#000;font-size:clamp(32px, 6vw, 96px);font-weight:800;line-height:normal;}
.clickn .overview .overview_wrap h2 em{margin-left:12px;color:#0052EB;font-weight:inherit;}
.clickn .overview .overview_wrap h2 strong{position:relative;display:inline-block;margin-right:11px;padding:4px clamp(24px, 6vw, 43px);border-radius:100px;background:#0066FF;font-size:clamp(24px, 5vw, 92px);color:#fff;font-weight:inherit;line-height:109px;letter-spacing:-1.84px;overflow:hidden;}
.clickn .overview .overview_wrap h2 strong:before{display:block;position:absolute;top:50%;left:50%;width:100%;padding:0 clamp(24px, 6vw, 40px);content:"쇼핑몰";background:#0066FF;opacity:1;visibility:visible;animation:badgeShow 4s infinite;transform:translate(-50%, -50%);text-align:center;white-space:pre;}
.clickn .overview .overview_wrap p{color:#1B1B1B;font-size:clamp(16px, 2.2vw, 20px);font-weight:400;text-align:center;line-height:32px;letter-spacing:-0.4px;}
@media only screen and (max-width:1024px) {
    .clickn .overview{min-height:auto;}
    .clickn .overview .overview_wrap{gap:20px;padding:14vh 0;}
    .clickn .overview .overview_wrap div{gap:10px;}
    .clickn .overview .bg_wrap > li:nth-child(1){top:calc(50% - 24.2vh);left:calc(50% - 21.5vw);width:62vw;}
    .clickn .overview .bg_wrap > li:nth-child(2){bottom:calc(50% - 64.4vw);right:calc(50% - 105.7vw);width:52.438vw;}
    .clickn .overview .bg_wrap > li:nth-child(3){bottom:calc(50% - 38.8vw);left:calc(50% - 32.1vw);width:27vw;}
    .clickn .overview .bg_wrap > li:nth-child(4){top:calc(50% - 31.2vw);right:calc(50% - 49vw);width:20vw;}
    .clickn .overview .overview_wrap sub,
    .clickn .overview .overview_wrap h2 strong{line-height:clamp(32px,7vw,109px);}
}
@media only screen and (max-width:640px) {
    .clickn .overview .overview_wrap{padding:10vh 0;}
    .clickn .overview .overview_wrap h2 strong{margin-right:8px;}
    .clickn .overview .overview_wrap p{line-height:28px;}
    .clickn .overview .overview_wrap{gap:20px;}
    .clickn .overview .overview_wrap div{gap:10px;}
    .clickn .overview .bg_wrap > li:nth-child(1){top:calc(50% - 27.2vh);left:calc(50% - 21.5vw);width:62vw;}
    .clickn .overview .bg_wrap > li:nth-child(2){bottom:calc(50% - 42.2vh);right:calc(50% - 138.7vw);width:70vw;}
    .clickn .overview .bg_wrap > li:nth-child(3){bottom:calc(50% - 56.8vw);left:calc(50% - 32.1vw);width:35vw;}
    .clickn .overview .bg_wrap > li:nth-child(4){top:calc(50% - 38.2vw);right:calc(50% - 57.1vw);width:30vw;}
}

/* video */
.clickn .video{display:flex;align-items:center;gap:clamp(38px, 5vw, 64px);padding:clamp(60px, 10vw, 114px) 0 clamp(60px, 10vw, 120px);background:url(/images/event/clickn/bg_video.png) repeat-x center;background-size:cover;}
.clickn .video * {color:#fff;}
.clickn .video .tit_wrap,
.clickn .video > article{display:flex;flex-direction:column;text-align:center;}
.clickn .video .tit_wrap{gap:10px;}
.clickn .video .tit_wrap h3{font-size:clamp(32px, 4.4vw, 64px);font-weight:800;line-height:normal;}
.clickn .video .tit_wrap small{font-size:clamp(16px, 3.2vw, 34px);letter-spacing:-0.68px;line-height:normal;}
.clickn .video .player {position:relative;padding-top:56.25%;border-radius:20px;overflow:hidden;}
.clickn .video .center_wrap {width:1120px;}
.clickn .video .player iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

/* case */
.clickn .case {display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4.2vw,60px);padding:clamp(60px, 10vw, 120px) 0 clamp(80px, 14vw, 160px);}
.clickn .case .top_wrap{width:100%;display:flex;flex-direction:column;text-align:center;gap:clamp(20px,5vw,80px);}
.clickn .case .tit_wrap{display:flex;text-align:center;gap:clamp(8px, 2vw, 24px);}
.clickn .case .tit_wrap h3{font-size:clamp(26px, 3.8vw, 52px);font-weight:800;line-height:clamp(32px, 5.5vw, 52px);}
.clickn .case .tit_wrap h3 strong{color:#0066FF;font-weight:800;line-height:clamp(32px, 4vw, 52px);}
.clickn .case .tit_wrap small{font-size:clamp(16px, 3vw, 28px);color:#555555;font-weight:400;line-height:28px;letter-spacing:-0.56px;}
.clickn .case .tab{display:flex;gap:min(12px, 2vw);justify-content:center;}
.clickn .case .tab li{position:relative;display:flex;align-items:center;padding:7px 20px 7px 12px;gap:8px;font-size:clamp(14px, 1.6vw, 18px);font-weight:500;color:#A4A4A4;text-align:center;white-space:nowrap;border:1px solid #E4E4E4;border-radius:40px;background:#fff;cursor:pointer;}
.clickn .case .tab li.on{color:#fff;border-color:var(--keyColor);background:var(--keyColor);}
.clickn .case .tab li[data-cate="all"]{--keyColor:#2C2C2C;}
.clickn .case .tab li[data-cate="community"]{--keyColor:#0066FF;}
.clickn .case .tab li[data-cate="portfolio"]{--keyColor:#FF5191;}
.clickn .case .tab li[data-cate="business"]{--keyColor:#6E32FB;}
.clickn .case .tab li[data-cate="construction"]{--keyColor:#06C3A3;}
.clickn .case .tab li[data-cate="legal"]{--keyColor:#F97B2D;}
.clickn .case .tab li[data-cate="food"]{--keyColor:#FF4B4B;}
.clickn .case .tab li[data-cate="medical"]{--keyColor:#004CD8;}
.clickn .case .tab li::before,
.clickn .case .tab li::after{display:inline-block;content:"";}
.clickn .case .tab li::before{width:clamp(28px, 4vw, 44px);height:clamp(28px, 4vw, 44px);background:#DEDEDE;border-radius:30px;background-size:cover;}
.clickn .case .tab li::after{position:absolute;left:clamp(19px, 2.3vw, 22px);width:clamp(14px, 2.2vw, 24px);height:clamp(14px, 2.2vw, 24px);background-size:cover;filter:grayscale(1) brightness(10);}
.clickn .case .tab li.on::before{background:#fff;}
.clickn .case .tab li.on::after{filter:none;}
.clickn .case .tab li[data-cate="all"]::after{background-image:url(/images/event/clickn/ico_cite_all.svg);}
.clickn .case .tab li[data-cate="all"].on::after{background-image:url(/images/event/clickn/ico_cite_all.svg);}
.clickn .case .tab li[data-cate="community"]::after{background-image:url(/images/event/clickn/ico_cite_community.svg);}
.clickn .case .tab li[data-cate="portfolio"]::after{background-image:url(/images/event/clickn/ico_cite_portfolio.svg);}
.clickn .case .tab li[data-cate="business"]::after{background-image:url(/images/event/clickn/ico_cite_business.svg);}
.clickn .case .tab li[data-cate="construction"]::after{background-image:url(/images/event/clickn/ico_cite_construction.svg);}
.clickn .case .tab li[data-cate="legal"]::after{background-image:url(/images/event/clickn/ico_cite_legal.svg);}
.clickn .case .tab li[data-cate="food"]::after{background-image:url(/images/event/clickn/ico_cite_food.svg);}
.clickn .case .tab li[data-cate="medical"]::after{background-image:url(/images/event/clickn/ico_cite_medical.svg);}
.clickn .case .case_wrap li{box-shadow:none !important;border:1px solid #EEEEEE;border-radius:10px;overflow:hidden;}
.clickn .case .case_wrap li[data-sub-idx="1"]{order:1;}
.clickn .case .case_wrap li[data-sub-idx="2"]{order:3;}
.clickn .case .case_wrap li[data-sub-idx="3"]{order:4;}
.clickn .case .case_wrap li[data-sub-idx="4"]{order:4;}
.clickn .case .case_wrap li[data-sub-idx="5"]{order:5;}
.clickn .case .case_wrap li[data-sub-idx="6"]{order:6;}
.clickn .case .case_wrap li[data-sub-idx="7"]{order:7;}
.clickn .case .case_wrap li[data-sub-idx="8"]{order:8;}
.clickn .case article{display:none;}
.clickn .case article.on{display:block;}
.clickn .case_slider_wrap .slider{position:relative;}
.clickn .case_slider_wrap .case_wrap li{display:none;width:auto;}
.clickn .case_slider_wrap .case_wrap li.on{display:block;}
.clickn .case_wrap ul li{position:relative;}
.clickn .case_wrap li:hover{cursor:pointer;}
.clickn .case_wrap li::before{position:absolute;z-index:1;display:none;content:'';width:100%;height:100%;background-color:#00000050;}
.clickn .case_wrap li:hover::before{display:block;}
.clickn .case_wrap li span{position:absolute;z-index:1;display:none;gap:2px;justify-content:center;align-items:center;width:100%;height:100%;font-size:16px;color:#fff;font-weight:400;}
.clickn .case_wrap li:hover span{display:flex;}
.clickn .case_wrap li span::after{content:'';display:block;z-index:1;width:clamp(8px,5vw,16px);height:clamp(8px,5vw,16px);background:url(/images/event/clickn/ico_arrow_link.svg) no-repeat;background-size:contain;}
.clickn .case_wrap li a img{display:block;width:100%;}
.clickn .case_all_wrap .case_slider_wrap .swiper-wrapper{gap:25px;}
@keyframes parter_flow {from {transform:translateX(0)} to {transform:translateX(-1806px)}}
.clickn .case_all_wrap .case_slider_wrap .swiper-wrapper{animation:parter_flow 50s linear infinite;}
.clickn .case_all_wrap:hover .case_slider_wrap .swiper-wrapper{animation-play-state:paused;}
.clickn .case_slider_org{margin-bottom:13px;}
.clickn .case_slider_wrap{overflow-x:scroll;}
.clickn .case_slider_rev{transform:scale(-1);}
.clickn .case_slider_rev li{transform:scale(-1);}
.clickn .case_other_wrap ul{display:grid;grid-template-columns:repeat(3, 1fr);gap:25px;}
.clickn .case_other_wrap ul li{display:none;}
.clickn .case_other_wrap ul li.on{display:block;}

@media only screen and (max-width:1024px) {
    .clickn .case_other_wrap ul{grid-template-columns:repeat(2, 1fr);}
    .clickn .case .tab_wrap{position:relative;-ms-overflow-style:none;padding:0 5vw;}
    .clickn .case .tab_wrap::after{display:block;content:"";}
    .clickn .case .tab_wrap::-webkit-scrollbar{display:none;}
    .clickn .case .tab{justify-content:flex-start;}
}
@media only screen and (max-width:640px) {
    @keyframes parter_flow {from {transform:translateX(0)} to {transform:translateX(-792px)}}
    .clickn .case .tab li{padding:5px 14px 5px 12px;}
	.clickn .case_slider_org{margin-bottom:0;}
	.clickn .case_slider_wrap:active .swiper-wrapper{animation-play-state:paused;}
	.clickn .case_slider_wrap .case_wrap li{width:230px;}
    .clickn .case_other_wrap ul{gap:12px;}
    .clickn .case_all_wrap .case_slider_wrap .swiper-wrapper{gap:12px;}
	.clickn .case_slider_wrap li .tit{left:.5em;bottom:.5em;font-size:14px;}
	.clickn .case_slider_wrap li a:hover::after{width:6em;height:2em;font-size:14px;line-height:2em;}
}

/* function */
.clickn .function{background:#101010;}
.clickn .function > div{position:relative;display:flex;align-items:flex-start;justify-content:space-between;padding:clamp(60px, 10vw, 140px) 0 clamp(80px, 14vw, 160px);}
.clickn .function .tit_wrap{position:sticky;top:212px;display:flex;text-align:center;gap:24px;color:#fff;text-align:left;}
.clickn .function .tit_wrap *{color:inherit;}
.clickn .function .tit_wrap h3{font-size:clamp(26px, 3.8vw, 52px);font-weight:800;line-height:72px;}

.clickn .function .tit_wrap h3 strong{color:#73ABFF;font-weight:800;}
.clickn .function article > ul{display:grid;grid-template-columns:repeat(1, 1fr);flex-direction:column;gap:48px;}
.clickn .function article > ul > li{position:relative;border-radius:20px;background-color:#fff;overflow:hidden;}
.clickn .function article > ul > li div{position:absolute;top:0;left:0;padding:clamp(20px, 4vw, 42px) clamp(20px, 4vw, 44px) 0;}
.clickn .function article > ul > li h4{margin-bottom:10px;font-size:clamp(20px, 3.2vw, 30px);font-weight:700;color:#000;}
.clickn .function article > ul > li p{font-size:clamp(14px, 2vw, 18px);font-weight:500;color:#4E4E4E;}
.clickn .function article > ul > li:last-child{height:766px;}
.clickn .function article > ul > li{background:#fff;}
@media only screen and (max-width:1024px) {
    .clickn .function{padding:clamp(60px, 10vw, 120px) 0;}
    .clickn .function > div{flex-direction:column;gap:clamp(20px,5vw,80px);align-items:normal;padding:0;}
    .clickn .function .tit_wrap{position:relative;top:0;text-align:center;}
    .clickn .function article > ul{gap:clamp(20px, 2vw, 48px);}
    .clickn .function article > ul > li:last-child{height:auto;}
    .clickn .function article > ul > li img{width:100%;margin-top:-20%;}
    .clickn .function article > ul > li div{position:relative;}
}
@media (min-width:640px) and (max-width:1024px) {
    .clickn .function article > ul{grid-template-columns:repeat(2, 1fr);}
    .clickn .function article > ul > li:last-child{display:flex;height:auto;grid-column:auto / span 2;background:linear-gradient(180deg, #FFF 37%, #DEEBFF 100%);}
    .clickn .function article > ul > li:last-child img{width:40%;margin-top:-2%;}
    .clickn .function article > ul > li:last-child div{flex:0 1 55%;}
}
@media only screen and (max-width:640px) {
    .clickn .function article > ul > li:last-child img{width:100%;margin-top:-30%;}
}

/* why */
.clickn .why {display:flex;flex-direction:column;gap:clamp(20px,5vw,37px);padding:clamp(40px, 10vw, 132px) 0 clamp(40px, 10vw, 160px);background-color:#F4F6F9;}
.clickn .why .tit_wrap{display:flex;text-align:center;gap:clamp(0px, 1.4vw, 20px);}
.clickn .why .tit_wrap h3{font-size:clamp(26px, 3.8vw, 68px);font-weight:800;line-height:68px;letter-spacing:-2.04px;}
.clickn .why .tit_wrap h3 strong{color:#0066FF;font-weight:800;letter-spacing:-2.04px;}
.clickn .why .tit_wrap small{font-size:clamp(16px, 3vw, 48px);color:#555555;font-weight:400;line-height:48px;letter-spacing:-1.44px;}
.clickn .why article{width:1291px;margin:0 auto;}
.clickn .why article > img:last-child{display:none;}
.clickn .why img{width:100%;}
@media only screen and (max-width:1040px) {
    .clickn .why article{width:100%;padding:0 8vw 0 5vw;}
    .clickn .why article > img:first-child{display:none;}
    .clickn .why article > img:last-child{display:block;}
}

/* benefit */
.clickn .benefit {display:flex;flex-direction:column;gap:clamp(20px,5vw,68px);padding:clamp(60px, 12vw, 127px) 0 clamp(80px, 14vw, 160px);overflow:hidden;}
.clickn .benefit .tit_wrap *{color:inherit;}
.clickn .benefit .tit_wrap h3{margin-left:8px;font-size:clamp(26px, 3.8vw, 52px);font-weight:800;word-break:keep-all;}
.clickn .benefit .tit_wrap h3 br{display:none;}
.clickn .benefit .tit_wrap h3 strong{color:#0066FF;font-weight:800;}
.clickn .benefit li{position:relative;border-radius:20px;overflow:hidden;background-color:var(--keyColor);}
.clickn .benefit ul > li div{position:absolute;top:0;left:0;padding:clamp(20px, 4vw, 42px) clamp(20px, 4vw, 48px) 0;}
.clickn .benefit ul > li img{width:100%;}
.clickn .benefit ul > li h4{font-size:clamp(20px, 3.2vw, 30px);font-weight:800;color:#fff;}
.clickn .benefit ul > li p{margin:4px 0 13px;font-size:clamp(14px, 1.6vw, 18px);font-weight:500;color:#FFFFFF;line-height:28px;}
.clickn .benefit ul > li small{position:absolute;right:32%;bottom:5.5%;font-size: clamp(14px, 1.6vw, 16px);color: #ffffff94;line-height: 28px;}
.clickn .benefit ul > li div > small{display: none;}
@media only screen and (max-width:1024px) {
    .clickn .benefit .tit_wrap h3{text-align:center;}
}
@media only screen and (max-width:640px) {
    .clickn .benefit .tit_wrap h3 br{display:block;}
    .clickn .benefit ul > li p{line-height:20px;}
    .clickn .benefit ul > li small{display:none;}
    .clickn .benefit ul > li div{flex:0 1 100%;position:relative;top:1px;background-color:var(--keyColor);}
    .clickn .benefit ul > li div > small{position:static;display:block;}
}

/* cite */
.clickn .cite{display:flex;flex-direction:column;gap:clamp(20px,5vw,76px);padding:clamp(60px, 12vw, 140px) 0;background-color:#F4F6F9;}
.clickn .cite .tit_wrap{display:flex;text-align:center;gap:7px;}
.clickn .cite .tit_wrap h3{font-size:clamp(26px, 3.8vw, 52px);font-weight:800;}
.clickn .cite .tit_wrap h3 strong{color:#0066FF;font-weight:800;}
.clickn .cite .tit_wrap small{font-size:clamp(16px, 2vw, 24px);color:#555555;font-weight:400;letter-spacing:-0.48px;}
.clickn .cite > article{position:relative;overflow:hidden;}
.clickn .cite .swiper-slide{position:relative;width:fit-content;aspect-ratio:680/434;transition:0.5s;transition:0.3s;border-radius:20px;overflow:hidden;}
.clickn .cite .swiper-slide *{letter-spacing:-0.4px;}
.clickn .cite .swiper-slide a{position:relative;display:block;}
.clickn .cite .swiper-slide div:has(h4){position:absolute;display:flex;flex-direction:column;gap:8px;position:absolute;width:100%;bottom:28px;text-align:center;}
.clickn .cite .swiper-slide div:has(span){position:absolute;z-index:1;opacity:0;}
.clickn .cite .swiper-slide a div:has(span) span{display:flex;align-items:center;}
.clickn .cite .swiper-slide a div:has(span) span::after{display:inline-block;content:"";z-index:1;width:clamp(8px,5vw,16px);height:clamp(8px,5vw,16px);background:url(/images/event/clickn/ico_arrow_link.svg) no-repeat;background-size:contain;}
.clickn .cite .swiper-slide a:hover div:has(h4){opacity:0;}
.clickn .cite .swiper-slide a:hover div:has(span){display:flex;align-items:center;gap:2px;justify-content:center;width:100%;height:100%;background:rgba(0,0,0,.3);font-size:18px;color:#fff;font-weight:400;text-align:center;opacity:1;}

.clickn .cite .swiper-slide p{color:#E5E5E5;font-weight:400;font-size:clamp(16px, 4vw, 20px);line-height:18px;}
.clickn .cite .swiper-slide h4{color:#FFFFFF;font-weight:700;font-size:clamp(18px, 2vw, 24px);line-height:24px;}
.clickn .cite .swiper-slide img{display:block;width:100%;}
.clickn .cite .swiper-slide-prev,
.clickn .cite .swiper-slide-next{transform:scale(0.63);opacity:0.5;margin-top:20px;}
.clickn .cite .swiper-slide-prev div,
.clickn .cite .swiper-slide-next div{opacity:0;}
.citeSwiper-navigation{position:relative;}
.clickn .cite .citeSwiper-button-prev,
.clickn .cite .citeSwiper-button-next{position:absolute;top:44.5%;width:48px;aspect-ratio:1/1;font-size:0;background-repeat:no-repeat;background-size:contain;filter:opacity(0.6);}
.clickn .cite .citeSwiper-button-prev:hover,
.clickn .cite .citeSwiper-button-next:hover{filter:opacity(1);}
.clickn .cite .citeSwiper-button-prev{left:calc(50% - 22.5vw);background-image:url(/images/event/clickn/ico_arrowRound_left.svg);}
.clickn .cite .citeSwiper-button-next{right:calc(50% - 22.5vw);background-image:url(/images/event/clickn/ico_arrowRound_right.svg);}
@media screen and (max-width:1024px){
    .clickn .cite .citeSwiper-button-prev,
    .clickn .cite .citeSwiper-button-next{display:none;}
}
@media screen and (max-width:640px){
    .clickn .cite .swiper-slide div:has(h4){bottom:8px;gap:4px;}
    .clickn .cite > article{margin:0 5vw;}
    .clickn .cite .swiper-slide-prev,
    .clickn .cite .swiper-slide-next{transform:scale(1);opacity:0.5;margin-top:0;}
}

/* reason */
.clickn .reason{display:flex;flex-direction:column;gap:clamp(20px,5vw,80px);padding:clamp(60px, 10vw, 120px) 0;}
.clickn .reason h3{font-size:clamp(26px, 3.8vw, 52px);font-weight:800;text-align:center;}
.clickn .reason ul{display:grid;grid-template-columns:repeat(3, 1fr);gap:1px;background:#e6e6e6;}
.clickn .reason li{flex:0 1 33%;padding:59px 0 5px;text-align:center;background:#fff;}
.clickn .reason li:nth-child(-n + 3){padding:clamp(20px, 4vw, 14px) 0 clamp(20px, 5vw, 78px);}
.clickn .reason li:last-child{border-right:none;}
.clickn .reason strong{display:flex;justify-content:center;align-items:center;font-size:clamp(36px, 3.6vw, 60px);color:#0066FF;font-weight:700;line-height:normal;letter-spacing:-1.8px;}
.clickn .reason strong sub{margin-bottom:-4px;font-size:clamp(28px, 4vw, 50px);font-weight:800;line-height:42px;letter-spacing:-1.5px;}
.clickn .reason h4{margin:clamp(4px, 2.8vw, 20px) 0 clamp(8px, 1.4vw, 10px);font-size:clamp(24px, 3.2vw, 32px);font-weight:700;line-height:normal;letter-spacing:-0.96px;}
.clickn .reason p{font-size:clamp(16px, 2.2vw, 20px);color:#333;line-height:26px;letter-spacing:-0.4px;font-weight:400;}
.clickn .reason small{font-size:clamp(15px, 2vw, 16px);color:#989898;line-height:26px;letter-spacing:-0.32px;font-weight:400;}
@media screen and (max-width:1024px){
    .clickn .reason ul{grid-template-columns:repeat(2, 1fr);}
    .clickn .reason li:nth-child(-n + 3),
    .clickn .reason li{flex:0 1 33%;padding:clamp(20px, 5vw, 40px) 0 clamp(20px, 5vw, 40px);text-align:center;background:#fff;}
}
@media screen and (max-width:640px){
    .clickn .reason ul{grid-template-columns:repeat(1, 1fr);}
}

/* short */
.clickn .short{padding:clamp(20px,5vw,78px) 0 clamp(20px,5vw,80px);background-color:#101010;}
.clickn .short ul{display:flex;justify-content:space-between;}
.clickn .short li{display:flex;flex:0 1 100%;flex-direction:column;gap:clamp(16px, 4vw, 40px);padding:26px 0;border-right:1px solid #272727;text-align:center;align-items:center;}
.clickn .short li:last-child{border-right:0;}
.clickn .short li div{display:flex;flex-direction:column;gap:clamp(7px,0.8vw,14px);}
.clickn .short li small{font-size:clamp(15px, 1.4vw, 20px);color:#ACACAC;font-weight:500;letter-spacing:-0.6px;line-height:14px;}
.clickn .short li p{font-size:clamp(22px, 3.2vw, 28px);color:#fff;font-weight:700;line-height:36px;letter-spacing:-0.28px;line-height:36px;}
.clickn .short li strong{display:block;font-size:inherit;font-weight:inherit;color:var(--keyColor);letter-spacing:-0.28px;}
.clickn .short a{display:inline-flex;align-items:center;gap:2px;padding:clamp(5px,0.8vw,9px) 22px;border:1px solid #555;border-radius:50px;color:#898989;font-size:clamp(14px, 1.6vw, 18px);font-weight:500;line-height:24px;letter-spacing:-0.18px;}
.clickn .short a:hover{border-color:#fff;color:#fff;}
.clickn .short a:after{display:inline-block;content:'';width:16px;height:16px; background:url(/images/event/clickn/ico_arrow_link.svg) no-repeat;background-size:cover;filter:opacity(0.5);}
.clickn .short a:hover:after{filter:opacity(1);}
@media screen and (max-width:1024px){
    .clickn .short ul {flex-direction:column;}
    .clickn .short li {border-right:none;border-bottom:1px solid #272727;}
    .clickn .short li:last-child{border-bottom:none;}
}
@media (min-width:641px) and (max-width:1024px){
    .clickn .short ul {flex-direction:column;padding:0 5vw;}
    .clickn .short li{flex-direction:row;justify-content:space-between;}
    .clickn .short li div{align-items:baseline;}
    .clickn .short li strong{display:inline-block;margin-right:0.8vw;}
}

/* way */
.clickn .way{display:flex;flex-direction:column;align-items:center;gap:clamp(24px, 4vw, 64px);padding:clamp(60px, 8vw, 120px) 0 clamp(60px, 8vw, 115px);text-align:center;}
.clickn .way div{display:flex;flex-direction:column;gap:clamp(16px, 2vw, 36px);}
.clickn .way small{font-size:clamp(26px, 3vw, 40px);color:#000;font-weight:300;line-height:28px;}
.clickn .way h3{font-size:clamp(28px, 4.2vw, 64px);color:#000;font-weight:800;text-align:center;line-height:45px;letter-spacing:-0.4px;}
.clickn .way h3 strong{color:#06F;font-weight:inherit;}
.clickn .way a{padding:clamp(16px, 2vw, 28px) clamp(20px,5vw,68px);border-radius:50px;font-size:clamp(18px, 3vw, 30px);font-weight:800;color:#fff;background:#06F;line-height:normal;}
.clickn .way a:hover{background:linear-gradient(90deg, #4A93FF 0%, #0166FF 100%);}

/* faq */
.clickn .faq{display:flex;flex-direction:column;align-items:center;gap:clamp(20px,5vw,70px);padding:clamp(60px, 12vw, 140px) 0;background-color:#F4F6F9;font-size:clamp(8px, 1vw, 10px);}
.clickn .faq * {font-size:inherit;}
.clickn .faq h3{display:flex;align-items:center;gap:6px;font-size:clamp(26px, 3.8vw, 44px);color:#000;font-weight:800;line-height:31px;letter-spacing:-0.44px;}
.clickn .faq article{display:flex;flex-direction:column;gap:24px;}
.clickn .faq article:has(.list_dot){margin-bottom:80px;padding-bottom:80px;border-bottom:1px solid #DFDFDF;}
.clickn .faq .list_dot li{position:relative;left:10px;font-size:2em;color:#555;font-weight:400;line-height:32px;letter-spacing:-0.4px;word-break:keep-all;}
.clickn .faq .list_dot li::before{position:absolute;left:-9px;display:inline-block;content:"·";margin-left:1px;}
.clickn .faq .faqlist_wrap{display:flex;flex-direction:column;gap:24px;padding:0;}
.clickn .faq .faqlist_wrap > li{padding:clamp(8px, 3.2vw, 40px);border-radius:clamp(10px,2vw,20px);background-color:#E4E9F0;}
.clickn .faq .faqlist_wrap ul{padding-top:9px;}
.clickn .faq .faqlist_wrap li:has( > small + a){display:flex;align-items:center;gap:8px;}
.clickn .faq details{position:relative;}
.clickn .faq details::details-content{opacity:0;block-size:0;overflow-y:clip;transition:content-visibility 0.5s allow-discrete, opacity 0.5s, block-size 0.5s;}
.clickn .faq details[open]::details-content{opacity:1;block-size:auto;}
.clickn .faq details summary{position:relative;margin-left:27px;padding-right:27px;font-size:2em;color:#444;font-weight:700;line-height:30px;word-break:keep-all;list-style:none;-webkit-appearance:none;appearance:none;}
.clickn .faq details summary::before{position:absolute;left:-27px;content:"Q.";}
.clickn .faq details summary:hover{cursor:pointer;}
.clickn .faq details > summary:after{position:absolute;z-index:0;top:8px;right:0;display:block;content:'';width:14px;height:14px;background:url(/images/event/clickn/ico_arrow_top.svg);background-size:contain;font-size:10px;transition:.3s;transform:rotate(180deg);}
.clickn .faq details[open] > summary::after{transform:rotate(0deg);}
.clickn .faq details summary::marker,
.clickn .faq details summary::-webkit-details-marker{display:none;content:'';}
.clickn .faq details summary + div{position:relative;width:calc(100% - 27px);left:27px;padding-top:15px;font-size:1.8em;color:#696F78;font-weight:400;line-height:27px;word-break:keep-all;}
.clickn .faq details summary + div *{font-weight:400;}
.clickn .faq details summary + div b{font-weight:600;}
.clickn .faq ul.divide_wrap{display:flex;gap:16px;margin-top:20px;}
.clickn .faq ul.divide_wrap a{display:flex;align-items:center;gap:2px;font-size:clamp(14px, 1.6vw, 16px);color:#0066FF;font-weight:600;letter-spacing:-0.16px;}
.clickn .faq ul.divide_wrap a:after{display:inline-block;content:"";width:14px;height:14px;background:url(/images/event/clickn/ico_arrow_link_blue.svg);background-size:contain;transition:.3s;}
.clickn .faq ul.divide_wrap li{line-height:16px;}
.clickn .faq ul.divide_wrap li:first-child{padding-right:16px;border-right:1px solid #C2C4CA;}
.clickn .faq ul + a{line-height:20px;padding:20px 35px;border:1px solid #E4E4E4;border-radius:100px;font-size:18px;color:#838383;white-space:pre;line-height:13px;letter-spacing:-0.18px;}
.clickn .faq ul + a:hover{border-color:#A4A4A4;color:#101010;}
@media (prefers-reduced-motion:no-preference){
    .clickn details{interpolate-size:allow-keywords;}
}


/* faq // -------------- */

/* responsive */
@media screen and (max-width:1024px){
    .pc_con{display:none;}
    .m_con{display:block;}

    section{width:100%;padding-right:5vw;padding-left:5vw;}
    .clickn .video .center_wrap,
    .center_wrap{width:100%;}
    .clickn .video,
    .clickn .function,
    .clickn .benefit,
    .clickn .reason,
    .clickn .faq {padding-left:5vw;padding-right:5vw;}
    .clickn .why .tit_wrap small,
    .clickn .why .tit_wrap h3,
    .clickn .faq details summary,
    .clickn .function .tit_wrap h3,
    .clickn section h3{line-height:normal;}
    .clickn .function .tit_wrap h3{line-height:48px;}
    .clickn .case .tab_wrap{overflow-x:auto !important;}
    .clickn .why article{width:100%;margin:0 auto;}
}
@media screen and (max-width:640px){
    .clickn section.center_wrap{padding-left:10px !important;padding-right:10px !important;}
    .clickn .faq details summary + div{line-height:20px;}
    .clickn .benefit li{display:flex;flex-direction:column;aspect-ratio:1/0.8;}
    .clickn .benefit ul > li div{flex:0 1 100%;position:relative;top:1px;background-color:var(--keyColor);}
    .clickn .faq ul.divide_wrap{flex-direction:column;gap:12px;}
    .clickn .faq ul.divide_wrap li:first-child{border:0;}

    .clickn .btn_link,
    .clickn .faq ul + a{padding:14px 26px;font-size:16px;}

}