@charset "utf-8";
/* *******************************************************
 * filename : style.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2024-08-26
******************************************************** */

:root {
    --primary-color:#FFA450;
}

/* text color */
.tc_primary {color: var(--primary-color) !important;}



#wrap {position:relative; min-width:100%; min-height:100%;}

/* header */
#header {position:fixed; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:0 40px; width:100%; height:100px; z-index:10;}

#header.active {background-color:#202020; transition-duration:0.5s; transition-timing-function:ease;}
#header.active::after {content:""; position:absolute; left:0; bottom:0; display:block; width:100%; height:1px; background-color:rgba(0, 0, 0, 0.5);}
#header.deactive {background-color:transparent; transition-duration:0.5s; transition-timing-function:ease;}

#header h1 {display:block; width:81px; height:23px; font-size:0; text-indent:-999px; background:url(../images/logo_geulium.png) no-repeat 0 50%;}

#header nav {display:flex; align-items:center;}

#header .nav_list {display:flex; flex-wrap:wrap; align-self:stretch;}
#header .nav_list li:nth-child(n+2) {margin-left:60px;}
#header .nav_list a {position:relative; padding:2px 10px; height:100%; font-size:19px; font-weight:500; color:#fff;}
#header .nav_list a::after {content:""; position:absolute; bottom:-1px; left:10px; width:0; border-bottom:1px solid #fff; transition:0.5s;}
#header .nav_list a:hover::after {content:""; position:absolute; bottom:-1px; left:10px; width:calc(100% - 20px); border-bottom:1px solid #fff; transition:0.5s;}
#header .nav_list .on a {color:var(--primary-color);}
#header .nav_list .on a::after {width:calc(100% - 20px); border-bottom:1px solid var(--primary-color);}

.h-R {display:flex; align-items:center;}
.h-R li:nth-child(n+2) {margin-left:16px;}

.bt_log {padding:0 16px; height:38px; font-size:14px; color:#fff; background-color:transparent; border:1px solid #fff; border-radius:4px;}
.bt_log:hover {background-color:var(--primary-color); border:1px solid var(--primary-color); transition:0.5s;}

.m_btn_menu {display:none; margin-left:16px; width:36px; height:36px; background:url(../images/icon/btn_menu.svg) no-repeat 50% 50%; border:none;}
.m_btn_close {position:absolute; top:32px; right:40px; display:none; width:36px; height:36px; background:url(../images/icon/btn_close.svg) no-repeat 50% 50%; border:none; z-index:11;}



/* container */
#container {position:relative; min-height:100vh;}


/* common */
.content {position: relative; padding: 120px 0;}
.inner {margin: 0 auto; max-width: 1580px;}

.titBox {position: relative; margin-bottom: 60px; padding: 0 40px; padding-top: 60px;}
.titBox h2 {font-family: 'GmarketSansMedium'; font-size: 46px; color: #fff; text-align: center;}
.titBox h2 span {font-family: 'GmarketSansMedium';}

.borT-b {border-top:1px solid rgba(0, 0, 0, 0.5);}

.w100p {width: 100%;}
.plr-auto {padding: 0 40px;}
.br-t {display: none;}
.br-m {display: none;}



/* ****************** ABOUT ********************** */
@media (min-width: 1360px) { 
    #ABOUT h2 {font-size:52px;}
}

/* memory */
.memory {
    display:flex;
    padding: 0 24px;
}

.memory > li {
    position: relative;
    margin: 0 16px;
    width: 25%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 1px 1px 16px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease-in;
}
.memory > li::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid var(--primary-color);
    border-radius: 16px;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
.memory > li:hover {
    box-shadow: 1px 1px 16px rgba(255, 164, 80, 0.4);
}
.memory > li:hover::after {
    opacity: 1;
}

.memory > li img {
    width: 100%;
    transition: 0.3s ease-in;
}
.memory > li .txt-memory {
    position: absolute;
    top: 8%;
    width: 100%;
    color: #fff;
    text-align: center;
    transition: top 0.3s ease-in;
}
.memory > li .txt-memory h3 {
    padding: 0 16px;
}
.memory > li .txt-memory p {
    opacity: 0;
    margin-top: 16px;
    padding: 0 16px;
    line-height: 1.6;
    transition-delay: 0.3s;
    transition: opacity 0.3s ease-in;
}

.memory > li:hover img {
    scale: 110%;
    opacity: 0.2;
}
.memory > li:hover .txt-memory {
    top: 36%;
}
.memory > li:hover .txt-memory h3 {
    color: var(--primary-color);
}
.memory > li:hover .txt-memory p {
    opacity: 1;
}

.bt-box-c {
    display: flex;
    justify-content: center;
    margin-top: 60px;
}
.bt-box-c a {
    display: inline-block;
    padding: 20px 60px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    border-radius: 16px;
    transition: all 0.3s;
}
.bt-box-c a:hover {
    color: #202020;
    background-color: #fff;
}
.bt-box-c a:nth-child(n+2) {
    margin-left: 24px;
}
.bt-box-c a.c-primary {
    background: linear-gradient(to bottom, #FFA450, #E77827, #AD612A);
    border: none;
}
.bt-box-c a.c-primary:hover {
    color: #fff;
}



/* ****************** ai-image ********************** */
/* upload */
.upload-box {position:relative; margin:0 auto; padding:15px; width:100%; max-width:960px; height:360px; background-color:#262626; border-radius:8px; box-shadow:0px 3px 6px rgba(0, 0, 0, 0.12);}

.drop-zone {position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 0; height:100%; border:1px dashed #101010; border-radius:4px;}
.drop-over {background-color:#202020 !important; border-color:#8E633E !important; transition:all 0.5s;}

.ic_upload_img {display:inline-block; width:64px; height:50px; background:url(../images/icon/ic_upload_img.png) no-repeat; transition:transform 0.75s;}
.drop-over .ic_upload_img {transform:translateY(-8px);}

.file-desc {display:flex; flex-direction:column; align-items:center; padding-top:16px;}
.file-desc .ic_upload_img {margin-bottom:20px;}
.file-desc .tit {margin-bottom:6px; font-size:18px; font-weight:600; color:#fff; text-align:center; line-height:1.4;}
.file-desc .tit strong {font-weight:700; color:var(--primary-color);}
.file-desc .con {font-size:15px; color:#808080; text-align:center;}

.btn_upload {position:relative; margin-top:20px; padding:0 12px 0 12px; height:38px; font-size:14px; color:var(--primary-color); background-color:transparent; border:1px solid var(--primary-color); border-radius:4px; transition:0.3s;}
.btn_upload input[type=file] {display:none;}
.btn_upload:hover {color:#fff; background-color:var(--primary-color);}

.dz_thumb {position:relative; width:100%; height:160px; background-position:center center; background-repeat:no-repeat; background-size:contain;}
.dz_thumb::after {content:attr(data-label); position:absolute; top:170px; left:0; display:block; padding:0 10px; width:100%; font-size:13px; text-align:center; box-sizing:border-box;}



/* ****************** animated ********************** */
.animated-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.animated-box .img-animated {
    margin-right: 16px;
}
.animated-box .img-animated img {
    max-width: 200px;
    max-height: 200px;
    border-radius: 16px;
}
.animated-box .video-animated {
    width: 512px;
    height: 512px;
    border-radius: 16px;
}



/* ****************** album ********************** */
.album-content {
    position: relative;
    padding-bottom: 24px;
}
.album-content > div {
    position: relative;
    display: none;
}
.album-content > div.on {
    display: block;
}
.album-content .img-animated {
    position: absolute;
    left: -60px;
    bottom: 0px;
    z-index: 3;
}
.album-content .img-animated img {
    max-width: 160px;
    max-height: 200px;
    border-radius: 16px;
}
.album-content .video-animated {
    width: 512px;
    height: 512px;
    border-radius: 16px;
}



/* ****************** terms ********************** */
.t-box {padding: 0 40px; padding-top: 60px;}
.t-box h2 {margin-bottom:32px; font-size:26px; font-weight:700; color:#fff;}

.t-con {line-height:1.56;}

.t-con > dt {margin-bottom:8px; font-size:18px; font-weight:500; color:#fff;}
.t-con > dt:nth-of-type(n+2) {margin-top:32px;}
.t-con > dd {margin-bottom:8px; font-size:15px; color:#909090;}

.t-con ol > li {display:list-item; margin-left:20px; padding-left:4px; width:calc(100% - 20px);}
.t-con ol > li:nth-of-type(n+2) {margin-top:16px;}
.t-con ol.li-num > li {list-style-type:decimal;}
.t-con ol.li-han > li {list-style-type:hangul;}

.t-con ul > li {display:list-item; margin-left:20px; padding-left:4px; width:calc(100% - 20px);}
.t-con ul > li:nth-of-type(n+2) {margin-top:16px;}
.t-con ul.li-di > li {list-style-type:disc;}

.t-con table {display:table; width:100%; font-size:13px; text-align:left; border-collapse:collapse; border-spacing:0;}
.t-con table th {padding:12px; font-weight:400; color:#aaa; vertical-align:text-top; background-color:#303030; border:1px solid #505050;}
.t-con table td {padding:12px; vertical-align:text-top; border:1px solid #505050;}

.t-con .tit {margin-bottom:8px; font-weight:500;}

.t-con a {color:var(--primary-color); text-decoration:underline;}



/* footer */
footer {
    position: relative;
    display: block;
    padding: 40px;
    background-color: #202020;
}

footer h1 {color: #fff;}

footer .f-nav {display: flex; margin-top: 16px; font-size: 18px;}
footer .f-nav li:nth-child(n+2) {margin-left: 16px;}
footer .f-nav a {transition: 0.3s;}
footer .f-nav a:hover {color: #fff; text-decoration: underline;}

footer .copyright {margin-top: 16px; color: #555555;}



/* button - go to top */
.btn_top {position: fixed; display: block; right: 40px; bottom: -60px; z-index: 10;}
.btn_top.active {bottom: 40px; transition: 0.5s;}
.btn_top.deactive {bottom: -60px; transition: 0.5s;}

.btn_top a {position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: #101010; border-radius: 50%;}
.btn_top a i {display: block; width: 24px; height: 12px; background: url(../images/icon/ic_top.svg) no-repeat 50% 50%; background-size: 18px; transition: ease-in-out 0.3s;}
.btn_top a:hover i{transform:translateY(-3px)}










@media (max-width: 1360px) {   
    /* common */
    .titBox h2 {
        font-size: 42px;
    }    

    /* header */
    #header .nav_list li:nth-child(n+2) {
        margin-left: 36px;
    }
}



@media (max-width: 1280px) {
    /* common */
    .content {
        padding:100px 0;
    }
    /* header */
    #header .nav_list li:nth-child(n+2) {
        margin-left: 24px;
    }
    #header .nav_list a {
        font-size: 18px;
    }

    /* ABOUT */
    .bt-box-c {
        margin-top: 48px;
    }
    .bt-box-c a {
        padding: 16px 48px;
        font-size: 18px;
    }
}



@media (max-width: 1024px) {
    /* common */
    .content {
        padding:80px 0;
    }
    .titBox {
        margin-bottom: 48px;
    }
    .titBox h2 {
        font-size: 38px;
    }

    /* header */
    #header {
        justify-content: flex-start;
    }
    #header nav {
        position: absolute;
        top: 0;
        right: 0;
        display: none;
        margin-left: 0;
        padding: 30px;
        width: 360px;
        height: 100vh;
        background: rgba(0, 0, 0, 0.2);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        z-index: 10;
    }
    #header .nav_list {
        flex-direction: column;
        margin-top: 80px;
    }
    #header .nav_list li:nth-child(n+2) {
        margin-left: 0;
        margin-top: 20px;
    }
    #header .nav_list a {
        font-size: 20px;
    }
    .h-R {
        margin-left: auto;
    }
    .m_btn_menu {
        display: block;
    }    

    /* ABOUT */
    .memory {
        padding: 0 28px;
    }
    .memory > li {
        margin: 0 12px;
    }
    .memory > li .txt-memory h3 {
        font-size: 16px;
        font-weight: 600;
    }
    .memory > li .txt-memory p {
        margin-top: 10px;
        font-size: 13px;
    }

    /* terms */
    .t-box h2 {font-size:22px;}
    .t-con > dt {font-size:15px;}
    .t-con > dd {font-size:13px;}
}



@media (max-width: 834px) {
    /* common */
    .titBox h2 {
        font-size: 34px;
    }
    .br-t {display: unset;}

    /* header */
    #header {
        height: 80px;
    }
    #header nav {
        padding: 30px 24px;
        width: 300px;
    }

    /* animated */
    .animated-box .img-animated img {
        max-width: 100px;
        max-height: 120px;
    }
    .animated-box .video-animated {
        width: 320px;
        height: 320px;
    }

    /* album */
    .album-content .img-animated img {
        max-width: 120px;
        max-height: 160px;
    }
    .album-content .video-animated {
        width: 320px;
        height: 320px;
    }

    /* footer */
    footer h1 {
        font-size: 20px;
    }
    footer .f-nav {
        font-size: 15px;
    }
    footer .copyright {
        margin-top: 12px;
        font-size: 14px;
    }

    /* button - go to top */
    .btn_top.active {
        transform: scale(0.8);
        transform-origin: right bottom;
    }
}



@media (max-width: 768px) {
    /* common */
    .content {
        padding: 60px 0;
    }
    .titBox {
        margin-bottom: 40px;
        padding-top: 48px;
    }
    .titBox h2 {
        font-size: 32px;    
    }

    /* header */
    .bt_log {
        padding: 0 12px;
        height: 34px;
        font-size:12px;
    }

    /* ABOUT */
    .memory {
        padding: 0 32px;
    }
    .memory > li {
        margin: 0 8px;
    }
    .memory > li .txt-memory h3 {
        font-size: 14px;
    }
    .memory > li .txt-memory p {
        margin-top: 8px;
    }
    .memory > li .txt-memory p br {
        display: none;
    }
    .bt-box-c {
        margin-top: 40px;
    }
    .bt-box-c a {
        padding: 16px 32px;
        font-size: 16px;
        border-radius: 10px;
    }
    .bt-box-c a:nth-child(n+2) {
        margin-left: 12px;
    }

    /* terms */
    .t-box {
        padding-top: 48px;
    }
}



@media (max-width: 640px) {
    /* common */
    .titBox h2 {
        font-size: 28px;
    }
    .plr-auto, .t-box {
        padding-left: 24px;
        padding-right: 24px;
    }

    /* header */
    #header {
        padding: 0 24px;
        height: 68px;
    }
    #header h1 {
        width: 70px;
        background-size: contain;
    }
    #header nav {
        padding: 30px 16px;
        width: 260px;
    }
    #header .nav_list a {
        font-size: 18px;
    }
    .m_btn_close {
        top: 17px;
        right: 24px;
    }

    /* ABOUT */
    .memory {
        flex-wrap: wrap;
        padding: 0 24px;
    }
    .memory li {
        margin: 0 10px;
        width: calc(50% - 20px);
    }
    .memory li:nth-child(n+3) {
        margin-top: 20px;
    }
    .memory > li .txt-memory p br {
        display: unset;
    }

    /* animated */
    .animated-box {
        margin: 0 auto;
        padding-bottom: 24px;
        width: 320px;
    }
    .animated-box .img-animated {
        position: absolute;
        left: -40px;
        bottom: 0px;
        margin-right: 0;
    }
    .animated-box .img-animated img {
        border-radius: 8px;
    }
    .animated-box .video-animated {
        width: 320px;
        height: 320px;
    }

    /* album */
    .album-content .img-animated {
        left: -40px;
    }
    .album-content .img-animated img {
        max-width: 100px;
        max-height: 120px;
        border-radius: 8px;
    }
    .album-content .video-animated {
        width: 300px;
        height: 300px;
    }


    /* terms */
    .t-box {
        padding-top: 24px;
    }

    /* footer */
    footer {
        padding: 30px 24px;
    }
    footer h1 {
        font-size: 16px;
    }
    footer .f-nav {
        margin-top: 8px;
        font-size: 13px;
    }
    footer .copyright {
        margin-top: 6px;
        font-size: 13px;
    }

    /* button - go to top */
    .btn_top {
        right: 24px;
    }
    .btn_top.active {
        bottom: 24px;
    }
}



@media (max-width: 480px) {
    /* common */
    .titBox h2 {
        font-size: 24px;
    }
    .br-m {display: unset;}

    /* header */
    #header {
        padding: 0 16px;
        height: 58px;
    }
    #header h1 {
        width: 64px;
    }
    #header nav {
        padding: 24px 16px;
        width: 220px;
    }
    #header .nav_list a {
        font-size: 17px;
    }
    .bt_log {
        padding: 0 10px;
        height: 32px;
        font-size: 11px;
    }
    .m_btn_menu {
        margin-left: 6px;
        transform: scale(0.8);
        transform-origin: right center;
    }
    .m_btn_close {
        top: 11px;
        right: 16px;
        transform: scale(0.8);
        transform-origin: right center;
    }

    /* ABOUT */
    .memory > li .txt-memory p br {
        display: none;
    }    
    .bt-box-c {
        flex-wrap: wrap;
        padding: 0 24px;
    }
    .bt-box-c a {
        width: 100%;
        font-size: 14px;
    }
    .bt-box-c a:nth-child(n+2) {
        margin-left: 0;
        margin-top: 16px;
    }
    
    /* ai-image */
    .upload-box {
        height: 300px;
    }
    .ic_upload_img {
        width: 52px;
        height: 41px;
        background-size: 52px;
    }
    .file-desc .tit {
        font-size: 14px;
    }
    .file-desc .con {
        font-size: 12px;
    }
    .btn_upload {
        font-size: 13px;
    }

    /* animated */
    .animated-box {
        width: 240px;
    }
    .animated-box .img-animated {
        left: -24px;
    }
    .animated-box .img-animated img {
        max-width: 80px;
        max-height: 100px;
    }
    .animated-box .video-animated {
        width: 240px;
        height: 240px;
    }

    /* album */
    .album-content .img-animated {
        left: -24px;
    }
    .album-content .img-animated img {
        max-width: 80px;
        max-height: 100px;
    }
    .album-content .video-animated {
        width: 240px;
        height: 240px;
    }

    /* footer */
    footer .f-nav {
        flex-wrap: wrap;
    }
    footer .f-nav li:first-child {
        margin-bottom: 8px;
        width: 100%;
    }
    footer .f-nav li:nth-child(2) {
        margin-left: 0;
    }
}



@media (max-width: 375px) {
    /* common */
    .titBox {
        margin-bottom: 24px;
        padding-left: 24px;
        padding-right: 24px;
    }
    .titBox h2 {
        font-size: 20px;
    }

    /* ABOUT */
    .memory {
        padding: 0 16px;
    }
    .memory li {
        margin: 0 8px;
        width: calc(50% - 16px);
    }
    .memory li:nth-child(n+3) {
        margin-top: 16px;
    }
    .memory > li .txt-memory h3 {
        font-size: 12px;
    }
    .memory > li .txt-memory p {
        margin-top: 6px;
        font-size: 11px;
    }
    .bt-box-c {
        margin-top: 24px;
    }

    /* animated */
    .animated-box {
        width: 180px;
    }
    .animated-box .img-animated img {
        max-width: 60px;
        max-height: 80px;
    }
    .animated-box .video-animated {
        width: 180px;
        height: 180px;
    }

    /* album */
    .album-content .img-animated img {
        max-width: 60px;
        max-height: 80px;
    }
    .album-content .video-animated {
        width: 180px;
        height: 180px;
    }
}