@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('base.css');
@import url('main.css');
@import url('font.css');


img{vertical-align: top; max-width: 100%;}
body{font-family:'pretendard'; font-size: 16px; line-height: normal;}
a,button{font-family: inherit; font-size: inherit; color: inherit; text-decoration: none;}
.inner{padding: 0 40px; margin: 0 auto; width: 100%; max-width: 1920px; box-sizing: border-box;}

/* header */
.header {position: fixed; left: 0; top:0; right: 0; padding:35px 0; z-index: 1000; transition: 0.3s;}
.header.white {background-color: #fff;}
.header .inner{display: flex; align-items: center; justify-content: space-between;}
.header .logo{font-size: 32px; color:#000; font-weight: 700; transition: 0.3s;}
.header .logo a{display: flex; align-items: center; }
.header .logo img{display: block; margin-right:20px; width:80px; transition: 0.3s;}
.header .btn-down{ padding: 0 10px; margin-right: 37px; vertical-align: middle;  min-width: 215px; height: 70px; font-size: 20px; background: #fff; border-radius: 100px; border:1px solid #000; transition: 0.3s;}
.header .btn-down::after{content: ''; position: relative; margin-left: 8px; top:-3px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background: url(/next/images/aliance/seventy/icon_down.png) center center/ contain no-repeat;}
.header .btn-down.yes{display: inline-block;}
.header .btn-menu{position: relative; display:inline-block; vertical-align: middle; font-size: 0; text-indent: -999999px; width: 48px; height: 48px; background: url(/next/images/aliance/seventy/icon_menu.svg) center center / contain no-repeat; transition: 0.3s;}

.header.static {padding: 20px 0;}
.header.static .logo{font-size: 25px;}
.header.static .logo img{width:60px;}
.header.static .btn-menu{width: 40px; height: 40px;}
.header.static .btn-down{padding: 0 10px; margin-right: 20px; min-width: 180px; height: 60px; font-size: 18px;}

.header .nav{display: none; padding: 170px  0; position: fixed; top:0; bottom: 0; left: 0; right: 0; border-right-width: 0; z-index: 150px; background-color: #000;
background: linear-gradient(100deg,  #e40832 1%,#7a1c47 40%,#053c66 100%);
overflow-y: auto;
height: 100vh;
}
.header .nav .inner{display: flex; align-items: flex-start; justify-content: space-between;}
.header .nav .inner > div{flex: 1 0 0;}
.header .nav .inner .right{padding-left: 150px;}
.header .nav-logo{position: fixed; left: 40px; top:60px; width: 237px;}
.header .nav .btn-close{position: fixed;  right: 40px; top:55px; display:inline-block; vertical-align: middle; width: 48px; height: 48px; text-indent: -99999px; font-size: 0; background: url(/next/images/aliance/seventy/icon_close.png) center center / contain no-repeat;}
.header .nav .title{margin-top: 160px; font-size: 96px; color:#fff; font-weight: 700; line-height: 1.2;}
.header .nav .quick-link{position: absolute; margin-top: 40px; display: inline-block; width: 100%; max-width: 640px; border-radius: 35px; border:2px solid #fff; overflow: hidden;}
.header .nav .quick-link .q-title{position: relative; padding:0 32px; height: 64px; line-height: 64px; font-size: 20px; color:#fff; text-align: left; background: transparent;}
.header .nav .quick-link .q-title::after{content: ''; position: absolute; right:20px; top:50%; width: 24px; height: 24px; background:url(/next/images/aliance/seventy/ico_down.png) center center / contain no-repeat; transform: translateY(-50%);}
.header .nav .quick-link.on .q-title::after{transform:translateY(-50%) rotate(180deg); transform-origin: center;}
.header .nav .quick-link .q-list{display: none; position: relative; background:transparent; height: 254px; overflow-y: auto; border-top:2px solid #fff;}
.header .nav .quick-link .q-list > a{padding: 10px 20px; display: block; padding:0 32px; height: 64px; line-height: 64px; font-size: 20px; color:#fff;}
.header .nav .quick-link .q-list > a:hover{background: rgba(255,255,255,.1);}
.header .nav .quick-link .q-list > a + a{border-top: 1px dashed rgba(255,255,255, 0.2);}
.header .nav .quick-link .q-list > a > span{padding-right: 10px; color:rgba(255,255,255,0.7)}
.header .nav .right .quick-link{display: none;}
.header .nav .tit{margin-bottom: 40px; font-size: 32px; color:#fff; font-weight: 700; line-height: 1.2;}
.header .nav .tt{margin-bottom: 16px; font-size: 20px; color:#fff; font-weight: 700; line-height: 1.2;}
.header .nav .space-img{position: relative; margin-bottom: 48px; display: flex; align-items: center; justify-content: center; width: 100%;}
.header .nav .space-img .point{position: absolute;}
.header .nav .space-img .point .jum{display: block; width: 10px; height: 10px; border-radius: 50%; background: #fff;}
.header .nav .space-img .point .con{top: -82px; left: -7px; position: absolute; white-space: nowrap; font-size: 16px;}
.header .nav .space-img .point .con::after{content: ''; position: absolute; left: 12px; top:5px; display: block; width: 1px; height: 78px; background-color: #fff;}
.header .nav .space-img .point .num{position: relative; display: inline-block; font-size: 16px; width: 24px; height: 24px; border-radius: 50%; color: #000; line-height: 24px; text-align: center; background: #fff; vertical-align: middle; z-index: 3;}
.header .nav .space-img .point .num:hover + .tx{visibility: visible; opacity: 1;}
.header .nav .space-img .point .tx{position: absolute; visibility: hidden; font-size: 16px; color: #fff; vertical-align: middle; opacity: 0; transition: opacity 0.3s;}
.header .nav .space-img .point.n1{right: 27.1%; bottom: 41.38%}
.header .nav .space-img .point.n2{right: 15.8%; bottom: 57.046%;}
.header .nav .space-img .point.n3{right: 15.2%; top: 17.225%;}
.header .nav .space-img .point.n4{right: 36.9%; top: 17.225%;}
.header .nav .space-img .point.n5{right: 51.5%; top: 12.080%;}
.header .nav .space-img .point.n6{left: 25.6%; top: 26.621%;}
.header .nav .space-img .point.n7{left: 12.2%; top: 39.597%;}
.header .nav .space-img .point.n1 .con,
.header .nav .space-img .point.n2 .con,
.header .nav .space-img .point.n7 .con{top: 89px;}
.header .nav .space-img .point.n1 .con::after,
.header .nav .space-img .point.n2 .con::after,
.header .nav .space-img .point.n7 .con::after{bottom: 5px; top: auto; height: 100px;}
.header .nav .space-img .point.n1 .tx{left: 0; bottom:-30px; transform: translateX(-30%);} 
.header .nav .space-img .point.n7 .tx{left: 0; bottom:-30px; transform: translateX(-50%);} 
.header .nav .space-img .point.n2 .tx{left: 0; bottom:-30px; transform: translateX(-30%);}
.header .nav .space-img .point.n5 .tx,
.header .nav .space-img .point.n4 .tx,
.header .nav .space-img .point.n3 .tx{left: 0; bottom:30px; transform: translateX(-50%);} 
.header .nav .space-img .point.n6 .tx{left: -10px; top:2px; transform: translateX(-100%);} 
.header .nav .space-link + .space-link{margin-top: 24px;}
.header .nav .space-link > a{padding:0 30px; margin-right: 16px; margin-bottom: 16px; display: inline-block; font-size: 20px; color:#fff; line-height: 70px; border: 1px solid #fff; border-radius: 100px; transition: all 0.3s;}
.header .nav .space-link > a:last-child{margin-right: 0;}
.header .nav .space-link > a:hover{background-color: #fff; color: #000;}
.header .nav .space-link:last-child > a {border: 0 none;}
.header .nav .space-link:last-child > a:hover {background-color: transparent;}

/* footer */
.footer {position: relative; border-top: 1px solid rgba(0,0,0,.12); background-color: #fff; z-index: 10;}
.footer .inner{position: relative; padding-top: 43px; padding-bottom: 43px;}
.footer .foot-logo{margin-right: 32px; height: 72px;}
.footer .inner{display: flex; align-items: center;}
.footer address{font-size: 12px; color:#999; line-height: 18px; font-style: normal;}
.footer small{font-size: 12px; color:#666; line-height: 18px; font-style: normal;}
.footer .btn-kgr{position: absolute; right: 30px; display: block; font-size: 20px; color:#000a; background: #F0F0F0; width: 100%; max-width: 199px; height: 70px; line-height: 70px; text-align: center; border-radius: 100px;}
.footer .btn-kgr > span::after{content: ''; position: relative; top:-1px; margin-left: 24px; display: inline-block; vertical-align: middle; width: 24px; height: 24px; background: url(/next/images/aliance/seventy/ico_arrow_right.png) center center / contain no-repeat;}

/* subvisual */
.sub-content{padding-top: 200px;}
.sub-content .sub-top .inner{position: relative;}
.sub-content .sub-top .tit{font-size: 120px; color:#000; font-weight: 700; opacity: 0; transform: translateY(20px); transition: all 1s;}
.sub-content .sub-top .txt{margin-top: 24px; font-size: 24px; color:#666; font-weight: 400; line-height: 1.4; opacity: 0; transform: translateY(20px); transition: all 1s 0.3s;}
.sub-content .sub-top .btn-scroll{position: absolute; top:55px; right:30px; display: block; width: 120px; height: 120px; border-radius: 50%; border: 1px solid #000; background: #fff url(/next/images/aliance/seventy/ico_arrow_down.png) center center / 48px no-repeat;  opacity: 0; transform: translateY(20px); transition: all 1s 0.5s;}
.sub-content .sub-top .visual{margin-top: 80px; height: 569px; /* background: url(/next/images/aliance/seventy/sub_bg1.jpg) center center / cover no-repeat; */ opacity: 0; transform: translateY(20px); transition: all 1s 0.5s;}
.sub-content .sub-top .visual img { width: 100%; height: 100%; object-fit: cover; }
.sub-content .sub-con{padding-top: 120px;}
.sub-content .sub-con .inner{position: relative;}

body.on .sub-content .sub-top .tit,
body.on .sub-content .sub-top .txt,
body.on .sub-content .sub-top .btn-scroll,
body.on .sub-content .sub-top .visual{opacity: 1; transform: translateY(0px);}


/* gallery */
.gallery-list {margin:0 -10px -10px; display: flex; flex-wrap: wrap;}
.gallery-list .g-item {position: relative; margin:0 10px 20px; width: calc(33.333% - 20px); height: auto;}
.gallery-list .g-item img{max-width: 100%; width: 100%;}
.gallery-list .g-item .img-info{position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0; transition: all 0.3s;}
.gallery-list .g-item .img-info .tx{position: absolute; bottom: 40px; left: 25px; right:0; font-size: 32px; color:#fff;}
.gallery-list .g-item .img-info .nx{position: absolute; top: 40px; left: 25px; right:0; font-size: 16px; color:#ccc;}
.gallery-list .g-item .img-info::before{content: ''; position: absolute; top:40px; right:40px; width: 48px; height: 48px; background: url(/next/images/aliance/seventy/ico_zoom.png) center center / contain no-repeat; z-index: 3;}
.gallery-list .g-item .img-info::after{content: ''; position: absolute; top:0; bottom: 0; left:0; right:0;
    background-color: #000;
    background: linear-gradient(135deg,  #e40832 1%,#7a1c47 35%,#053c66 100%); backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    opacity: 0.7;
    z-index: -1;
}
.gallery-list .g-item:hover .img-info{opacity: 1;}
.gallery-curtain{position: absolute; bottom: 0; left:0; right:0; padding:60px 40px 120px; background: #fff; z-index: 5;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+100;White+to+Transparent */
    background: linear-gradient(to top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.gallery-curtain .btn-img{width: 100%; height: 80px; font-size: 20px; color:#000; font-weight: 700; background-color: #fff; border-radius: 120px; box-shadow: 0 2px 5px rgba(0,0,0,.2);}


/* gallery-view-list */
.gallery-con{padding-top: 160px; opacity: 0; transition: opacity 1s;}
.gallery-con .gallery-view-lap{display: flex; justify-content: space-between;}
.gallery-con .gallery-view-lap .gallery-view{flex: 0 0 50%;}
.gallery-con .gallery-view-lap.on .gallery-view-list{flex: 0 0 100%;}
.gallery-con .gallery-view-lap.on .gallery-view-list .g-item {width: calc(20% - 20px);}
.gallery-con .gallery-view .view-box{position: fixed; left:0; top: 165px; bottom: 0; width: 50%; z-index: 101 ;}
.gallery-con .gallery-view .view-box .view-head .view-close{position: absolute; right: 0; top:30px; right: 30px; display: block; font-size: 0; text-indent: -999999px; width: 48px; height: 48px; background: url(/next/images/aliance/seventy/icon_close_b.png) center center / 24px no-repeat;}
.gallery-con .gallery-view .view-box .view-head{position: absolute; left: 0; right: 0; margin-bottom: -10px; border-radius: 10px 50px 10px 10px; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.5); z-index: 1;}
.gallery-con .gallery-view .view-box .view-head .lap::after{content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100px; z-index: 2; 
    background: linear-gradient(to top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gallery-con .gallery-view .view-box .view-head .lap{position: relative; padding:40px; height: 300px; overflow: hidden; border-radius: 10px 50px 10px 10px;}
.gallery-con .gallery-view .view-box.on .view-head .lap{height: auto;}
.gallery-con .gallery-view .view-box.on .view-head .lap::after{opacity: 0;}
.gallery-con .gallery-view .view-box .view-head .view-etc button{display: inline-block; margin-right: 30px; font-size: 0; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.gallery-con .gallery-view .view-box .view-head .view-etc button .bul{visibility: hidden; position: absolute; padding:8px 16px; font-size: 14px; color: #000; background: #fff; border-radius: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.2); transform: translate(-26px , 18px);}
.gallery-con .gallery-view .view-box .view-head .view-etc button .bul::before{content: ''; display: inline-block; margin-left: 5px; position: absolute; top:0; border: 5px solid transparent; border-bottom: 5px solid #fff; transform: translate(0, -100%);}
.gallery-con .gallery-view .view-box .view-head .view-etc button:hover .bul{visibility: visible;}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-viewer{background-image: url(/next/images/aliance/seventy/icon_viewer_b.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-print{background-image: url(/next/images/aliance/seventy/icon_print_b.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-download{background-image: url(/next/images/aliance/seventy/icon_download_b.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-photo{background-image: url(/next/images/aliance/seventy/icon_out_b.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-viewer:hover{background-image: url(/next/images/aliance/seventy/icon_viewer.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-print:hover{background-image: url(/next/images/aliance/seventy/icon_print.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-download:hover{background-image: url(/next/images/aliance/seventy/icon_download.png);}
.gallery-con .gallery-view .view-box .view-head .view-etc button.btn-photo:hover{background-image: url(/next/images/aliance/seventy/icon_out.png);}
.gallery-con .gallery-view .view-box .view-head .view-tit{margin-top: 50px; font-size: 48px; font-weight: 700; color:#000;}
.gallery-con .gallery-view .view-box .view-head .view-txt{margin-top: 16px; font-size: 16px; font-weight: 400; color:#666;}
.gallery-con .gallery-view .view-box .view-togle{position: absolute; left:50%; display: block; width: 64px; height: 64px; font-size: 0; text-indent: -999999px; background: #fff url(/next/images/aliance/seventy/ico_toggle.png) center calc(100% - 15px) / 20px no-repeat; border-radius: 50%; transform: translate(-50%, -51%); z-index: 1; clip-path: inset(32px -30px 0% round 500px 500px 0px 0px);}
.gallery-con .gallery-view .view-box.on .view-togle{background-image: url(/next/images/aliance/seventy/ico_toggle_up.png);}
.gallery-con .gallery-view .view-box .view-head .view-source{margin-top: 40px;}
.gallery-con .gallery-view .view-box .view-head .view-source table{font-size: 14px;}
.gallery-con .gallery-view .view-box .view-head .view-source table th{color:#999; font-weight: 400; text-align: left;}
.gallery-con .gallery-view .view-box .view-head .view-source table td{padding:5px 17px; color:#333}
.gallery-con .gallery-view .view-box .view-cont{height: 100%;}
.gallery-con .gallery-view .view-box .view-cont .img{height: 100%; border-radius: 10px 50px 0 0; overflow: hidden;}
.gallery-con .gallery-view .view-box .view-cont .img img{width: 100%; height: 100%; object-fit: cover;}
.gallery-con .gallery-view-list {padding-top: 40px; flex: 0 0 calc(50%); margin:0 -10px -10px; display: flex; flex-wrap: wrap;}
.gallery-con .gallery-view-list .g-item {position: relative; margin:0 10px 20px; width: calc(33.333% - 20px); height: auto;}
.gallery-con .gallery-view-list .g-item img{max-width: 100%;}
.gallery-con .gallery-view-list .g-item .img-info{position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 1; opacity: 0; transition: all 0.3s;}
.gallery-con .gallery-view-list .g-item .img-info::before{content: ''; position: absolute; top:50%; left: 50%; width: 48px; height: 48px; background: url(/next/images/aliance/seventy/ico_zoom.png) center center / contain no-repeat; z-index: 3; transform: translate(-50%, -50%);}
.gallery-con .gallery-view-list .g-item .img-info::after{content: ''; position: absolute; top:0; bottom: 0; left:0; right:0;
    background-color: #000;
    background: linear-gradient(135deg,  #e40832 1%,#7a1c47 35%,#053c66 100%); backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    opacity: 0.7;
    z-index: -1;
}
.gallery-con .gallery-view-list .g-item:hover .img-info{opacity: 1;}
body.on .gallery-con {opacity: 1;}
/* 뷰어 뒷배경 검은색 */
.viewer-backdrop {background-color: rgba(0, 0, 0, 0.95) !important;}

.toast-message { display:none; border-radius: 15px; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; padding: 10px 20px; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; }

/* gallery-pop */
.gallery-pop{position: fixed; top:0; bottom: 0; left: 0; right: 0; z-index: 1200; background-color: #000; display:none; overflow: auto;}
.gallery-pop .con{padding:0 40px; display: flex; flex-direction: column ; height: 100%;}
.gallery-pop .con .tixt{padding:60px 0 0;}
.gallery-pop .con .tit{position: absolute; padding:0 40px; left: 0; font-size: 32px; color:#fff; /*width: 20%;*/}
.gallery-pop .con .txt{margin:0 auto; width: 60%; font-size: 24px; color:#fff; text-align: center;}
.gallery-pop .img{flex: 1 0 0; display: flex; align-items: center; padding: 40px 20px 0; margin:0 auto; max-width: 900px; text-align: center;}
.gallery-pop .img img{width: 100%; height: 100%; object-fit: contain;}
.gallery-pop .btn-close{position: fixed; top:60px; right:40px; width: 40px; height: 40px; font-size: 0; text-indent: -999999px; background: url(/next/images/aliance/seventy/icon_close.png) center center / contain no-repeat; z-index: 5;}

/* photo-con */
.photo-con{padding: 216px 0 160px;}
.photo-con .tit{font-size: 80px; font-weight: 700; color:#000; opacity: 0; transform: translateY(20px); transition: 1s;}
.photo-con .tab{margin: 80px -8px -8px; font-size: 0; opacity: 0; transform: translateY(20px); transition: 1s 0.3s;}
.photo-con .tab > a{display: inline-block; margin: 0 8px 8px; padding: 24px 40px; font-size: 20px; color:#666; border: 1px solid #666; border-radius: 100px; transition: all 0.3s;}
.photo-con .tab > a:last-child{margin-right: 0;}
.photo-con .tab > a:hover{background-color: #eee;}
.photo-con .tab > a.on{
    border: 1px solid transparent;
    color:#fff;
    font-weight: 700;
    background-color: #000;
    background: linear-gradient(135deg,  #e40832 1%,#7a1c47 35%,#053c66 100%); backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
}
.photo-con .info{margin-top: 40px; padding: 40px; display: flex; align-items: center; justify-content: space-between; background-color: #eeed; opacity: 0; transform: translateY(20px); transition: 1s 0.4s;}
.photo-con .info > div{flex: 1 0 0 ;}
.photo-con .info .tt{margin-right: 24px; font-size: 24px; color:rgba(0,0,0,.6); font-weight: 400;}
.photo-con .info .tx{font-size: 24px; color:#000; font-weight: 700;}
.photo-list{margin:50px -20px -20px; display: flex; flex-wrap: wrap; opacity: 0; transform: translateY(20px); transition: 1s 0.4s;}
.photo-list > div{flex: 0 0 calc(50% - 40px); margin: 20px;}
.photo-list > .img{position: relative; padding-bottom: 66.666%;}
.photo-list > .img img{position: absolute; width: 100%; height: 100%; object-fit: cover;}

body.on .photo-con .tit,
body.on .photo-con .tab,
body.on .photo-con .info,
body.on .photo-list{opacity: 1; transform: translateY(0px);}


@media(max-width:1500px){
    .header .nav .inner{align-items: flex-start;}
    .header .nav .inner > div{padding-top: 40px;}
    .header .nav .title{margin-top: 60px; font-size: 70px;}
    .header .nav .quick-link{max-width: 470px;}
}


@media(max-width:1024px){
    .inner{padding: 0 24px;}
    .header .btn-menu{width: 40px; height: 40px;}
    .header .btn-down{display: none!important;}
    .header{padding:32px 0;}
    .header .logo{font-size: 16px;}
    .header .logo img{margin-right: 6px; width: 40px;}
    .header .nav {padding-top: 104px; padding-bottom: 104px;}
    .header .nav .inner{display: block;}
    .header .nav .inner > div{flex: none; padding-top: 0;}
    .header .nav .inner .right{padding-left: 0px;}
    .header .nav-logo{left: 16px; top:32px; width: 118px;}
    .header .nav .btn-close{right: 16px; top:32px; width: 40px; height: 40px;}
    .header .nav .title{margin-top: 0; margin-bottom: 32px; font-size: 32px;}
    .header .nav .quick-link .q-list{border-top: 1px solid #fff; height: auto; overflow-y:hidden;}
    .header .nav .quick-link .q-list > a,
    .header .nav .quick-link .q-title{padding:0 16px; max-width: 100%; height: 52px; line-height: 52px; font-size: 16px; border-width: 1px;}
    .header .nav .quick-link .q-title::after{right: 16px;}
    .header .nav .left .quick-link{display: none;}
    .header .nav .right .quick-link{position: relative; display: block; margin-bottom: 32px; margin-top: 0; max-width: 100%;}
    .header .nav .tit{font-size: 20px;}
    .header .nav .tt{font-size: 16px;}
    .header .nav .space-img{padding:0; margin-bottom: 40px; height: auto;}
    .header .nav .space-link + .space-link{margin-top: 16px;}
    .header .nav .space-link > a{padding:0 16px; margin-right: 16px; margin-bottom: 16px; font-size: 16px; line-height: 54px;}
    .footer .inner{display: block;}
    .footer .foot-logo{width: 142px; height: auto;}
    .footer address{margin-top: 16px;}
    .footer .btn-kgr{position: relative; margin-top: 16px; right: 0; width: 100%; max-width: 100%; height: 54px; line-height: 54px; font-size: 16px;}
    .footer .btn-kgr > span::after{margin-left: 8px; width: 21px; height: 21px;}
    .sub-content{padding-top: 104px;}
    .sub-content .sub-top .tit{font-size: 48px;}
    .sub-content .sub-top .txt{margin-top: 16px; font-size: 16px;}
    .sub-content .sub-top .btn-scroll{position: relative; top:0; right:0; margin:32px auto; width: 80px; height: 80px;}
    .sub-content .sub-top .visual{margin-top: 0; height: 80vw; max-height: 500px;}
    .sub-content .sub-con{padding-top: 80px;}
    .toast-message{top: 65px;}

    /* gallery */
    .gallery-list {margin:0 -8px -8px;}
    .gallery-list .g-item {position: relative; margin:0 8px 16px; width: calc(50% - 16px);}
    .gallery-list .g-item .img-info .tx{bottom: 15px; left: 15px; font-size: 18px;}
    .gallery-list .g-item .img-info .nx{top: 15px; left: 15px; font-size: 12px;}
    .gallery-list .g-item .img-info::before{top:15px; right:15px; width: 28px; height: 28px;}
    .gallery-curtain{padding:60px 40px 120px;}
    .gallery-curtain .btn-img{height: 80px; font-size: 20px;}

    /* gallery-view-list */
    .gallery-con{padding: 100px 0 50px; height: 100vh; height: 100dvh;}
    .gallery-con .inner{padding: 0; height: 100%;}
    .gallery-con .gallery-view .view-box .view-cont{border-radius: 20px 20px 0 0; overflow: hidden;}
    .gallery-con .gallery-view-lap{display: block; height: 100%; display: flex; flex-direction: column;}
    .gallery-con .gallery-view-lap .gallery-view{flex: 1 0 0 ;}
    .gallery-con .gallery-view .view-box{position: relative; top:auto; bottom: auto; width: 100%; height: 100%;}
    .gallery-con .gallery-view .view-box .view-head .view-close{top:32px; right: 16px; width: 24px; height: 24px;}
    .gallery-con .gallery-view .view-box .view-head{top: 0; border-radius: 10px 16px 10px 10px;}
    .gallery-con .gallery-view .view-box .view-head .lap{padding: 40px 16px; height: 200px;}
    .gallery-con .gallery-view .view-box.on .view-head .lap{height: 100%; overflow:hidden; overflow-y: auto;}
    .gallery-con .gallery-view .view-box.on .view-head{bottom: 40%;}
    .gallery-con .gallery-view .view-box .view-head .view-etc button .bul{ transform: translate(-50% , -155%); white-space: nowrap;}
    .gallery-con .gallery-view .view-box .view-head .view-etc button .bul::before{margin-left: 0px; left: 50%; top: auto; bottom: 0; border-bottom-color: transparent; border-top: 5px solid #fff; transform: translate(-50%, 100%);}
    .gallery-con .gallery-view .view-box .view-head .view-tit{margin-top: 0px; font-size: 24px;}
    .gallery-con .gallery-view .view-box .view-head .view-txt{margin-top: 16px; font-size: 16px;}
    .gallery-con .gallery-view .view-box .view-head .view-source{margin-top: 16px;}
    .gallery-con .gallery-view .view-box .view-head .view-etc button.btn-print{display: none;}
    .gallery-con .gallery-view .view-box .view-togle{width: 45px; height: 45px; background-position: center calc(100% - 12px); background-size: 15px; clip-path: inset(21px -30px 0% round 500px 500px 0px 0px);}
    .gallery-con .gallery-view-list{position: relative; padding: 20px 12px; left: 0; right: 0; bottom: 0; display: block; flex: 0 0 auto; font-size: 0; margin:0; white-space: nowrap; overflow: hidden; overflow-x: auto;}
    .gallery-con .gallery-view-list .g-item {position: relative; display: inline-block; margin:0 6px; width: calc(33.333%); max-width: 150px;}
    .gallery-con .gallery-view .view-box .view-head .view-etc{position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-around; padding: 0 16px; height: 50px; background-color: #fff; z-index: 10; border-top: 1px solid rgba(0,0,0,.12);}
    .gallery-con .gallery-view .view-box .view-head .view-etc button{margin: 0;}
    .gallery-con .gallery-view-list .g-item .img-info{position: relative; padding-bottom: 80%;}
    .gallery-con .gallery-view-list .g-item img{position: absolute; top:0; left: 0; width: 100%; height: 100%; object-fit: cover;}
    .gallery-con .gallery-view-list .g-item .img-info::before{width: 30px; height: 30px;}

    /* gallery-pop */
    .gallery-pop .con{padding:32px 16px;}
    .gallery-pop .con .tixt{padding: 0;}
    .gallery-pop .con .tit{position: relative; padding:0 40px 0 0 ; width: 100%; font-size: 20px;}
    .gallery-pop .con .txt{margin-top: 10px; width: 100%; text-align: left; font-size: 14px;}
    .gallery-pop .img{padding:30px 0;}
    .gallery-pop .btn-close{top:32px; right: 16px; width: 24px; height: 24px;}

    /* photo-con */
    .photo-con{padding: 104px 0 64px;}
    .photo-con .tit{font-size: 48px;}
    .photo-con .tab{margin-top: 32px;}
    .photo-con .tab > a{padding: 16px; font-size: 16px; border-radius: 100px;}
    .photo-con .tab > a:last-child{margin-right: 0;}
    .photo-con .info{display: block; margin-top: 32px; padding: 24px;}
    .photo-con .info > div{flex: 1 0 0 ;}
    .photo-con .info > div + div{margin-top: 16px;}
    .photo-con .info .tt{margin-right: 0; font-size: 16px;}
    .photo-con .info .tx{display: block; margin-top: 8px; font-size: 16px;}
    .photo-list{margin:30px -8px -8px; display: flex; flex-wrap: wrap;}
    .photo-list > div{flex: 0 0 calc(50% - 16px); margin: 8px;}
}


@media(max-width:640px){
    .header{padding:20px 0;}
    .header .nav .btn-close {right: 24px; top: 28px; width: 24px; height: 24px;}
    .header .nav .space-link > a{padding:0 16px; margin-right: 8px; margin-bottom: 8px; font-size: 16px; line-height: 54px;}
    .header .nav .space-img .point .jum{opacity: 0;}
    .header .nav .space-img .point .con{top:0; left: 0; transform: translate(-50%, -50%);}
    .header .nav .space-img .point .con::after{display: none;}
    .header .nav .space-img .point .num{margin-right: 0; font-size: 11px; font-weight: 700; width: 20px; height: 20px; line-height: 20px;}
    .header .nav .space-img .point .tx{display: none; position: absolute; font-size: 14px; top: -20px; transform: translateX(-50%);}
    .header .nav .space-img .point.n1 .con,
    .header .nav .space-img .point.n2 .con,
    .header .nav .space-img .point.n7 .con{top: 0;}
    .header .nav .space-img .point.n1 .con::after,
    .header .nav .space-img .point.n2 .con::after,
    .header .nav .space-img .point.n7 .con::after{bottom: 5px; top: auto; height: 153px;}
    .header .nav .space-img .point.n1 .tx,
    .header .nav .space-img .point.n2 .tx,
    .header .nav .space-img .point.n7 .tx {top:auto; bottom: -20px;}
    .header .btn-menu{width: 24px; height: 24px;}
    .sub-content .sub-con{padding-top: 30px;}
    .sub-content .sub-top .btn-scroll{width: 60px; height: 60px;}

    /* gallery */
    .gallery-list {margin:0;}
    .gallery-list .g-item {margin:0 0 16px; width: 100%;}
    .gallery-curtain{position: relative; padding:31px 0 80px;}
    .gallery-curtain .btn-img{height: 70px;}

    /* gallery-view-list */
    .gallery-con{padding-top:90px}
    .gallery-con .gallery-view .view-box .view-head .lap{height: 160px;}
     
    /* photo-con */
    .photo-list{margin:16px 0 0;}
    .photo-list > div{flex: 0 0 100%; margin: 0 0  16px;}

}