@charset "UTF-8";

/* 메인 더보기 버튼 */

/* 자세히보기 버튼 효과1 */
/* #main-section1 .more-box {
    position:absolute;
    width:100%;
    bottom: 20%;left: 0;
    text-align: center;
}
#main-section1 .more-box .more-gap {display: inline-block;}

#main-section1 .more-box .more-gap > a {
    border: 1px solid #ffffff;
    padding: 16px 31px;
    position: relative;
    color: #fff;
    font-family: 'ELAND_Choice_M';
    z-index: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
#main-section1 .more-box .more-gap > a:after {
    content: "";
    width: 0%;
    height: 100%;
    top: 0;
    position: absolute;
    left: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background: #ffffff;
}
#main-section1 .more-box .more-gap > a:hover {
    color: #333;
    font-family: 'ELAND_Choice_B';
}
#main-section1 .more-box .more-gap > a:hover:after {
    width: 100%;
    z-index: -1;
} */

/* 자세히보기 버튼 효과2 */
.more-box {
    position: absolute;
    bottom: 20%;left: 0;
    font-weight: 500;
    font-size: 17px;
    font-family: 'ELAND_Choice_M';
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.more-box .rlink{
    border: 1px solid #fff;
}

/* 더보기버튼 아웃라인 스타일 */
.more-box .text-outlined{
    --ui-text-outlined-weight: 2px;
    --ui-text-outlined-line-color: #fff;

    display: inline-flex;
    position: relative;
    padding: 16px 31px;
    color: #fff;
}


/* 리뷰 페이지 더보기 버튼 */
/* 더보기 버튼 */
.review-more {
    position: absolute;
    bottom: 2%;
    right: 10%;
    font-weight: 600;
    transition: transform .3s;
    font-size: 17px;
    font-family: 'ELAND_Choice_M';
    border: 1px solid #bbb;
    box-sizing: border-box;
}

/* 더보기버튼 아웃라인 효과 */
.rlink{
    display:inline-flex;
}

.rlink[href]{
    color: var(--rlink-color);
    text-decoration: var(--rlink-text-decoration, none);
}

.rlink:not([href]){
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ha-transition-pseudo::before,
  .ha-transition-pseudo::after{
    transition-property: var(--ha-transition-pseudo-property);
    transition-duration: var(--ha-transition-pseudo-duration);
    transition-timing-function: var(--ha-transition-pseudo-timing-function);
    transition-delay: var(--ha-transition-pseudo-delay);
    will-change: var(--ha-transition-pseudo-property);
  }
}

/* 더보기버튼 아웃라인 스타일 */
.text-outlined{
    --ui-text-outlined-weight: 3px;
    --ui-text-outlined-line-color: rgba(88, 128, 103, 1);

    display: inline-flex;
    position: relative;
    padding: 19px 38px;
    color: rgba(88, 128, 103, 1);
}

@media (max-width:500px){
    .text-outlined{
        padding: 15px 26px;
    }

}

@media (max-width:400px){
    .text-outlined{
        padding: 12px 22px;
    }

}

.text-outlined__label{
    display: block;
}

:is(.text-outlined, .text-outlined__label)::before,
:is(.text-outlined, .text-outlined__label)::after{ 
    content: "";     
    background-color: var(--ui-text-outlined-line-color);
    position: absolute; 
}

.text-outlined::before, 
.text-outlined::after{
    width: 100%;
    height: var(--ui-text-outlined-weight);
    left: 0;
}

.text-outlined__label::before,
.text-outlined__label::after{
    width: var(--ui-text-outlined-weight);
    height: 100%;
    top: 0;
}

.text-outlined::before{
    top: 0;
}

.text-outlined::after{
    bottom: 0;
}

.text-outlined__label::before{
    left: 0;
}

.text-outlined__label::after{
    right: 0;
}

:is(.text-outlined, .text-outlined__label)::before,
:is(.text-outlined, .text-outlined__label)::after{ 
    opacity: var(--text-outlined-line-opacity, 0);
}

:is(a[href], button:not(:disabled)):hover .text-outlined{
    --text-outlined-line-opacity: var(--text-outlined-line-opacity-hover, 1);
}

.text-outlined{
    --default-ui-text-outlined-line-transition-property: transform, opacity;
    --default-ui-text-outlined-line-transition-duration: .2s, .15s;
    --default-ui-text-outlined-line-transition-timing-function: ease-out;
    --default-ui-text-outlined-line-transition-delay: 0s, .15s;
    
    overflow: hidden;
}

.text-outlined::before{
    --ha-transition-pseudo-property: var(--ui-text-outlined-top-line-transition-property, var(--text-outlined-top-line-transition-property, var(--default-ui-text-outlined-line-transition-property)));
    --ha-transition-pseudo-duration: var(--ui-text-outlined-top-line-transition-duration, var(--text-outlined-top-line-transition-duration, var(--default-ui-text-outlined-line-transition-duration)));
    --ha-transition-pseudo-timing-function: var(--ui-text-outlined-top-line-transition-timing-function, var(--text-outlined-top-line-transition-timing-function, var(--default-ui-text-outlined-line-transition-timing-function)));
    --ha-transition-pseudo-delay: var(--ui-text-outlined-top-line-transition-delay, var(--text-outlined-top-line-transition-delay, var(--default-ui-text-outlined-line-transition-delay)));

    transform: var(--ui-text-outlined-top-line-transform, var(--text-outlined-top-line-transform, translate3d(-105%, 0, 0)));
}

.text-outlined::after{
    --ha-transition-pseudo-property: var(--ui-text-outlined-bottom-line-transition-property, var(--text-outlined-bottom-line-transition-property, var(--default-ui-text-outlined-line-transition-property)));
    --ha-transition-pseudo-duration: var(--ui-text-outlined-bottom-line-transition-duration, var(--text-outlined-bottom-line-transition-duration, var(--default-ui-text-outlined-line-transition-duration)));
    --ha-transition-pseudo-timing-function: var(--ui-text-outlined-bottom-line-transition-timing-function, var(--text-outlined-bottom-line-transition-timing-function, var(--default-ui-text-outlined-line-transition-timing-function)));
    --ha-transition-pseudo-delay: var(--ui-text-outlined-bottom-line-transition-delay, var(--text-outlined-bottom-line-transition-delay, var(--default-ui-text-outlined-line-transition-delay)));

    transform: var(--ui-text-outlined-bottom-line-transform, var(--text-outlined-bottom-line-transform, translate3d(105%, 0, 0)));
}

.text-outlined__label::before{ 
    --ha-transition-pseudo-property: var(--ui-text-outlined-left-line-transition-property, var(--text-outlined-left-line-transition-property, var(--default-ui-text-outlined-line-transition-property)));
    --ha-transition-pseudo-duration: var(--ui-text-outlined-left-line-transition-duration, var(--text-outlined-left-line-transition-duration, var(--default-ui-text-outlined-line-transition-duration)));
    --ha-transition-pseudo-timing-function: var(--ui-text-outlined-left-line-transition-timing-function, var(--text-outlined-left-line-transition-timing-function, var(--default-ui-text-outlined-line-transition-timing-function)));
    --ha-transition-pseudo-delay: var(--ui-text-outlined-left-line-transition-delay, var(--text-outlined-left-line-transition-delay, var(--default-ui-text-outlined-line-transition-delay)));

    transform: var(--ui-text-outlined-left-line-transform, var(--text-outlined-left-line-transform, translate3d(0%, -100%, 0)));
}

.text-outlined__label::after{ 
    --ha-transition-pseudo-property: var(--ui-text-outlined-right-line-transition-property, var(--text-outlined-right-line-transition-property, var(--default-ui-text-outlined-line-transition-property)));
    --ha-transition-pseudo-duration: var(--ui-text-outlined-right-line-transition-duration, var(--text-outlined-right-line-transition-duration, var(--default-ui-text-outlined-line-transition-duration)));
    --ha-transition-pseudo-timing-function: var(--ui-text-outlined-right-line-transition-timing-function, var(--text-outlined-right-line-transition-timing-function, var(--default-ui-text-outlined-line-transition-timing-function)));
    --ha-transition-pseudo-delay: var(--ui-text-outlined-right-line-transition-delay, var(--text-outlined-right-line-transition-delay, var(--default-ui-text-outlined-line-transition-delay)));
    
        transform: var(--ui-text-outlined-right-line-transform, var(--text-outlined-right-line-transform, translate3d(0%, 100%, 0)));
}

:is(a[href], button:not(:disabled)):hover > .text-outlined{
    --ui-text-outlined-top-line-transform: var(--text-outlined-top-line-transform-hover, translate3d(0, 0, 0));
    --ui-text-outlined-right-line-transform: var(--text-outlined-right-line-transform-hover, translate3d(0, 0, 0));
    --ui-text-outlined-bottom-line-transform: var(--text-outlined-bottom-line-transform-hover, translate3d(0, 0, 0));
    --ui-text-outlined-left-line-transform: var(--text-outlined-left-line-transform-hover, translate3d(0, 0, 0));

    --ui-text-outlined-top-line-transition-property: var(--text-outlined-top-line-transition-property-hover);
    --ui-text-outlined-right-line-transition-property: var(--text-outlined-right-line-transition-property-hover);
    --ui-text-outlined-bottom-line-transition-property: var(--text-outlined-bottom-line-transition-property-hover);
    --ui-text-outlined-left-line-transition-property: var(--text-outlined-left-line-transition-property-hover);
    
    --ui-text-outlined-top-line-transition-duration: var(--text-outlined-top-line-transition-duration-hover, .25s);
    --ui-text-outlined-right-line-transition-duration: var(--text-outlined-right-line-transition-duration-hover, .25s);
    --ui-text-outlined-bottom-line-transition-duration: var(--text-outlined-bottom-line-transition-duration-hover, .25s);
    --ui-text-outlined-left-line-transition-duration: var(--text-outlined-left-line-transition-duration-hover, .25s);

    --ui-text-outlined-top-line-transition-timing-function: var(--text-outlined-top-line-transition-timing-function-hover);
    --ui-text-outlined-right-line-transition-timing-function: var(--text-outlined-right-line-transition-timing-function-hover);
    --ui-text-outlined-bottom-line-transition-timing-function: var(--text-outlined-bottom-line-transition-timing-function-hover);
    --ui-text-outlined-left-line-transition-timing-function: var(--text-outlined-left-line-transition-timing-function-hover);  
    
    --ui-text-outlined-top-line-transition-delay: var(--text-outlined-top-line-transition-delay-hover, 0s);
    --ui-text-outlined-right-line-transition-delay: var(--text-outlined-right-line-transition-delay-hover, 0s);
    --ui-text-outlined-bottom-line-transition-delay: var(--text-outlined-bottom-line-transition-delay-hover, 0s);
    --ui-text-outlined-left-line-transition-delay: var(--text-outlined-left-line-transition-delay-hover, 0s);

    --ui-text-outlined-will-change: var(--text-outlined-will-change-hover);
}

.text-outlined_v5{
    --text-outlined-top-line-transform: translate3d(-100%, 0, 0);
    --text-outlined-right-line-transform: translate3d(0, -100%, 0);  
    --text-outlined-bottom-line-transform: translate3d(100%, 0, 0);
    --text-outlined-left-line-transform: translate3d(0, 100%, 0);
    
    --text-outlined-top-line-transform-hover: translate3d(0, 0, 0);
    --text-outlined-right-line-transform-hover: translate3d(0 0, 0);  
    --text-outlined-bottom-line-transform-hover: translate3d(0, 0, 0);
    --text-outlined-left-line-transform-hover: translate3d(0, 0, 0);

    --text-outlined-top-line-transition-duration-hover: .25s;
    --text-outlined-right-line-transition-duration-hover: .25s;  
    --text-outlined-bottom-line-transition-duration-hover: .25s;  
    --text-outlined-left-line-transition-duration-hover: .25s;

    --text-outlined-top-line-transition-delay-hover: 0s;
    --text-outlined-right-line-transition-delay-hover: 0s;
    --text-outlined-bottom-line-transition-delay-hover: 0s;
    --text-outlined-left-line-transition-delay-hover: 0s;    
}

