@charset "utf-8";

.flex{display:flex;}
.flex.wrap{flex-wrap:wrap;}
.flex.stretch{align-items: stretch;}
.flex.j_center{justify-content: center;}
.flex.j_right{justify-content: right;}
.flex.between{justify-content: space-between;}
.flex.a_center{align-items: center;}
.flex.a_end{align-items: flex-end;}
.flex.column{flex-flow: column;}
.flex .fill, .flex.fill > *{flex:1;}
.flex .auto, .flex.auto > *{flex:auto;}
.flex.gap10{gap:10px;}
.flex.gap15{gap:15px;}
.flex.gap20{gap:20px;}

@media only screen and (max-width:1023px) {
    .flex.gap10{gap:1vw;}
    .flex.gap15{gap:1.5vw;}
    .flex.gap20{gap:2vw;}
    .flex.column_1023{flex-flow: column;}
}
@media only screen and (max-width:639px) {
    .flex.column_639{flex-flow: column;}
}

/*맞춤(좌측, 중앙-center, 우측-right, 양쪽-fill)*/
._wg_align {display: flex; width: auto;}
._wg_align:not(fill) {scrollbar-width: none; overflow-x: auto; scroll-snap-type: x mandatory;}
._wg_align:not(fill) > li {flex:0 0 auto;}
._wg_align.wrap {flex-wrap:wrap;}
._wg_align.center {justify-content: center;}
._wg_align.right {justify-content: right;}
._wg_align.fill > * {flex:1;}

/*위치(위, 아래-bottom, 왼쪽-left, 오른쪽-right)*/
._wg_position {display: flex; flex-wrap: wrap;}
._wg_position.bottom {flex-wrap: wrap-reverse;}
._wg_position.right, ._wg_position.left {flex-wrap:initial;}
._wg_position > * {width: 100%;}
._wg_position.right > *:last-child, ._wg_position.left > *:last-child {flex: 1;}
._wg_position.right > *:first-child {order:1}

/*버튼 border*/
._wg_btn_border {position:relative;cursor:pointer;z-index:0;align-items: center;display: flex;}
._wg_btn_border::after {content:'';position:absolute;width:100%;height:100%;left:0;z-index:-1;top:0;}

.tab_scroll_btn {width:32px; height:32px; position:relative;}
.tab_scroll_btn::before {content:''; display: inline-block; background: url('https://resource.clickn.co.kr/images/tab/scroll_btn.svg') no-repeat center;width: 32px; height: 32px; top:0; left: 0;}
.tab_scroll_btn:hover::before {background: url('https://resource.clickn.co.kr/images/tab/scroll_hover_btn.svg') no-repeat center; }
.tab_scroll_btn.next::before {transform: rotate(180deg);}

.a11y-hidden {position: absolute;height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);}

/* image crop */
.img_crop{ display:inline-block; position:relative; width:100%; margin-bottom:-5px; } /*블록별 max-width 지정*/
.img_crop a{display:block; position:relative; width:100%; } /*블록별 이미지 높이 비율을 padding-top으로 지정*/
.img_crop a > b{position:absolute; top:0; left:0; width:100%; height:100%;}
.edit_mode .img_crop:hover { z-index:400; }
.edit_mode .img_crop a > b:hover{outline:none;}
.edit_mode .img_crop b:hover::after{ content:''; display:inline-block; position:absolute; top:0; left:0; width:100%; height:100%; border:2px #3a7fd0 solid; z-index:99; pointer-events:none; }
.edit_mode .img_crop.circle b:hover::after{border-radius:50%;}
.img_crop img{width:100%; height:100%; object-fit:cover; position:absolute; left:0; }
.img_crop.pt100 a{padding-top:100%;} 

/* 배너전체영역 링크삽입 (전체 영역 박스에 .positioin 추가)
 * <a href='#none' data-link-type='' data-cutting-apply='no' class='banner_link'><b><img src='/assets/images/logo_blank.png' /></b></a>
 */
.banner_link{position:absolute; top:0; left:0; right:0; bottom:0;}
.banner_link b,
.banner_link img{display:inline-block; width:100%; height:100%;}
.banner_link .image_edit{display:none;}

/* 에디터 텍스트영역 모바일 줄바꿈 */

@media only screen and (max-width:1023px) {
    .paragraph_1023 > p{display:inline; margin-right:.3em;}
}
/*
@media only screen and (max-width:639px) {
    .paragraph_639 > p{display:inline; margin-right:.3em;}
}
*/
@media only screen and (max-width:499px) {
    .paragraph_499 > p{margin-right:.3em;}
}