@media screen and (max-width:767px) {

.center{text-align:center;}
.pc_img {display:none;}
.tab_img {display:none;}
.mob_img {display:block;}
.pc {display:none;}
.tab {display:none;}
.mob {display:block;}

/* === Main === */
#wrap {position:relative; width:100%; max-width:767px; min-width: 375px; margin:0 auto; overflow:hidden; word-break: keep-all;}
.inner{width:100%; margin:0 auto; padding: 0 2.66%;}

/* cursor */
.cursor2,
.cursor3{position: fixed;border-radius: 50%;transform: translate(-50%, -50%);pointer-events: none;left: 0;top: 0;z-index: 9999;will-change: transform;width: 30px;height: 30px;transition: all 0.15s ease;background: transparent;}

.cursor3.hover::after{content:'';position: absolute;width: 80px; height: 80px; background: url(/assets/images/main/cursor.png)center no-repeat; background-size: cover;animation: cursorAni01 10s linear infinite;}
.cursor2.hover .progress-wrap{box-shadow: initial;}
.cursor2.hover .progress-wrap svg.progress-circle path{opacity: 0;}
@keyframes cursorAni01{
0%{}
100%{transform:rotate(360deg);}
}
.progress-wrap{width: 100%;height: 100%;border-radius: 50%;box-shadow: inset 0 0 0 2px rgba(186,186,186,0.3);display: flex;align-items: center;justify-content: center;}
.progress-wrap svg path{fill: none;stroke: #bababa;stroke-width: 2;transition: stroke-dashoffset 10ms linear;}


#header{position: fixed;top: 0; left: 0; width: 100%;line-height: 1;z-index: 8000;transition: 1s;}
#header.on{background: rgba(34, 34, 34, .7);backdrop-filter: blur(10px);}
#header.active{top: -50px;}
#header .inner{display: flex;align-items: center; justify-content: space-between;height: 50px;}
#header h1 a{position: absolute; top: 17px;}
#header h1 a img{width: 294px;opacity: .5;}

ul.gnb{display: none;gap:65px;}
ul.gnb li a{font-size: 18px; color: #fff; font-family: 'Pretendard-All-R';}

.nav_btn{display: block;font-size: 15px; color: #fff;}
.navigation{position: fixed;top: 0;right: -100%;display: flex;flex-direction: column;justify-content: space-between;width: 50%;height: 100vh;background: #151515;z-index: 8000;line-height: 1;transition: all 700ms cubic-bezier(0.640, 0.005, 0.315, 1.000);}
.navigation.on{right: 0;}
.navigation .nav_top{display: flex;align-items: center;justify-content: flex-end;height: 50px;padding: 0 10px;}
.navigation .nav_top .nav_x_btn{font-size: 15px; color: #fff;}
.navigation .lnb_wrap{padding: 0 20px 50px 20px;transition: all 700ms cubic-bezier(0.640, 0.005, 0.315, 1.000);transform:translateX(60px);transition-delay: .3s;}
.navigation.on .lnb_wrap{transform:translateX(0px);}
.navigation .lnb_wrap h3 a{display: block;font-size: 20px; color: #fff;font-weight: 400;}
.navigation .lnb_wrap h3:not(:last-child){margin-bottom: 25px;}

/* visual_wrap */
#visual_wrap{position: relative;height: 100vh;}

#visual_wrap video{width: 100%;height: 100%;object-fit:cover;}

#visual_wrap .txt{position: absolute; left: 0; top: 50%; transform:translateY(-50%);width: 100%;}
#visual_wrap .txt p{position: relative;font-size: 30px; color: #fff; font-weight: 500; line-height: 35px;text-transform:uppercase;transition:.5s;}
#visual_wrap .txt p:first-child{transform:translateX(30px);}
#visual_wrap .txt p span.ori{display: block;transform-origin: bottom;height: 35px;}
#visual_wrap .txt p span.flip{display: block;position: absolute;top: 4px;transform: rotateX(90deg);transform-origin: bottom;height: 35px;}

#visual_wrap .scroll{display: flex;align-items: center;gap:5px;position: absolute; bottom: 30px;left: 50%; transform:translateX(-50%);}
#visual_wrap .scroll p{font-size: 12px; color: rgba(255,255,255,.5);}
#visual_wrap .scroll .arr01{transform:translateY(1px)}
#visual_wrap .scroll .arr02{transform:translateY(-1px)}
#visual_wrap .scroll img{width: 10px;}

/* section01 */
#section01{padding: 80px 0 0px;line-height: 1;}
#section01 .tit strong{display: block;font-size: 40px; font-weight: 500; color: #222;text-align: center;text-transform:uppercase;}
#section01 .con_wrap .con{padding: 45px 0;}
#section01 .con_wrap .con .img_con{width: calc(100% - 10%);margin: 0 auto; overflow: hidden; border-radius:10px;}
#section01 .con_wrap .con .img_wrap{position:relative; width:100%; padding-bottom:116.667%;height: auto;}
#section01 .con_wrap .con .img_wrap img{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
#section01 .con_wrap .con .img_wrap img:hover{border-radius:50px;}

#section01 .con_wrap .con .txt_con{display: block;align-items: center;justify-content: space-between;width: calc(100% - 10%);margin: 20px auto 0;}
#section01 .con_wrap .con .txt_con p{position: relative;font-size: 12px; color: #222; font-weight: 500;}
#section01 .con_wrap .con .txt_con p strong{display: inline-block;font-size: 18px; color: #222; font-weight: 700; margin-right: 10px;}
#section01 .con_wrap .con .txt_con p em{position: absolute; right: 0;top: 50%;transform:translateY(-50%);width: 100%;height: calc(100% + 5px);background: #222;}
#section01 .con_wrap .con .txt_con .sns{display: flex; align-items: center;gap:5px;margin-top: 10px;}
#section01 .con_wrap .con .txt_con .sns img{width: 20px;}

#section01 .con_wrap .con .bg_txt{display: none;opacity: 0;}
#section01 .con_wrap .con .bg_txt .txt{position: relative;}
#section01 .con_wrap .con .bg_txt strong{display: block;font-size: 70px; color: #222; text-transform:uppercase;height: max-content;font-weight: 400;}
#section01 .con_wrap .con .bg_txt strong.flip{position: absolute;top: 0;left: 0;z-index: -1;}

#section01 .con_wrap .con .bg_txt .l_txt{position: fixed;transform: translateX(-50%) rotate(-90deg);top: 50%; left: 24px;z-index: -1;}
#section01 .con_wrap .con .bg_txt .r_txt{position: fixed;transform: translateX(50%) rotate(90deg);top: 50%; right: 24px;z-index: -1;}

#section01 .con_wrap .con .bg_txt .l_txt strong{transform-origin: bottom;}
#section01 .con_wrap .con .bg_txt .r_txt strong{transform-origin: bottom;}

/* section02 */
#section02{position: relative;padding: 80px 0px 90px;background: url(/assets/images/main/sec02_bg01_mob.jpg)center no-repeat; background-size: cover;line-height: 1;}
#section02 .tit{position: relative;z-index: 10;font-size: 40px; color: #fff; font-weight: 500;margin-bottom: 40px;}
#section02 .slide_wrap{position: relative;z-index: 10;height: 172px; }
#section02 .slide_wrap ul{display: flex;gap:10px;}
#section02 .slide_wrap ul li .img_wrap{position: relative;width: 210px; height: 258px;}
#section02 .slide_wrap ul li .img_wrap img{position: absolute;bottom: 0;width: 100%; height: 100%; object-fit:cover;border-radius:10px;box-shadow:3px 3px 20px rgba(0,0,0,.25); transition: all 500ms cubic-bezier(0.705, -0.005, 0.330, 1.000);}
#section02 .slide_wrap ul li:hover .img_wrap img{border-radius:30px;}
#section02 .slide_wrap ul li .img_wrap:hover img{height: 110%;}

#section02 .slide_wrap ul.sec02_slide01{position: absolute;left: 0;top: 0;width: max-content;animation: img-scrolling01 100s linear infinite;will-change: transform;margin-left: 10px;}
#section02 .slide_wrap ul.sec02_slide02{position: absolute;left: 0;top: 0;width: max-content;animation: img-scrolling02 100s linear infinite;will-change: transform;}
#section02 .slide_wrap ul.on{animation-play-state:paused;}

@keyframes img-scrolling01{
0%{transform: translate3d(100%, 0, 0);}
100%{transform: translate3d(0, 0, 0);}
}
@keyframes img-scrolling02{
0%{transform: translate3d(0, 0, 0);}
100%{transform: translate3d(-100%, 0, 0);}
}

#footer{position: relative;line-height: 1;padding: 30px 0;background: #151515;z-index: 100;border-top: 1px solid #222;}
#footer .f_top{display: flex; align-items: center; justify-content: space-between;margin-bottom: 35px;}
#footer .f_top .f_logo img{width: 132px;}
#footer .f_top .contact_btn{width: 120px; height: 30px; background: #333; padding: 0px 15px;border-radius:20px;overflow: hidden;}
#footer .f_top .contact_btn a{position: relative;display: flex; align-items: center;width: 100%;height: 100%;font-size: 12px; color: #fff;padding-left: 9px;}
#footer .f_top .contact_btn a::after{content:'';position: absolute;left: 0;top: 50%;transform:translateY(-50%);width: 3px; height: 3px; background: #fff; border-radius:50%;transition:1s;mix-blend-mode: difference;}
#footer .f_top .contact_btn:hover a::after{left: -20px;width: 150px; height: 150px;}

#footer .f_bot{display: flex; align-items: center; justify-content: space-between;}
#footer .f_bot address p{font-size: 12px; color: #fff; line-height: 25px;}
#footer .f_bot address p b{display: none;margin: 0 13px;color: #555;font-size: 15px;}
#footer .f_bot address p i{display: block;}
#footer .f_bot .top_btn{display: flex;align-items: center;gap:7px;}
#footer .f_bot .top_btn p{font-size: 12px; color: #fff;}
#footer .f_bot .top_btn .icon{display: flex;align-items: center; justify-content: center;width: 22px; height: 22px; background: #333; border-radius:50%;  border-radius:50%;}
#footer .f_bot .top_btn .icon img{width: 6px;}

/*==sub=============================================================*/

#sub_header{position: fixed;top: 0; left: 0; width: 100%;line-height: 1;z-index: 8000;transition: 1s;}
#sub_header.active{top: -50px;}
#sub_header .inner{display: flex;align-items: center; justify-content: space-between;height: 50px;}
#sub_header h1 a img{width: 132px;}
#sub_header ul.gnb li a{color: #222;font-weight: 500;}
#sub_header .nav_btn{color: #222;}

#sub_contents{padding: 80px 0;margin-top: 50px;min-height: 580px;background: url(/assets/images/sub/sub_bg01_pc.jpg)right top no-repeat; background-size: cover;}
#sub_contents .inner{padding: 0 2.6%;}
#sub_contents .contop{margin-bottom: 30px; line-height: 1; }
#sub_contents .contop h3{font-size: 44px; color: #222;font-weight: 500;text-transform:uppercase;}

/* sub0101 */
.sub0101_wrap{line-height: 1;}
.sub0101_wrap .con{position: relative;display: flex;gap: 25px;padding: 30px 0; flex-wrap:wrap;}
.sub0101_wrap .con:last-child{padding-bottom: 0;}
.sub0101_wrap .con:not(:last-child)::after{content:'';position: absolute; left: 0; bottom: 0; width: 0%; height: 1px; background: #bbb;transition:1.5s;}
.sub0101_wrap .con.on::after{width: 100%;}
.sub0101_wrap .con .tit_wrap{width: 100%;}
.sub0101_wrap .con .tit_wrap strong{font-size: 25px;color: #222; font-weight: 700;}
.sub0101_wrap .con .txt_wrap{width: 100%;}

.sub0101_wrap .con01{padding-top: 30px;}
.sub0101_wrap .con01 .txt_wrap strong{display: block;font-size: 18px; color: #222; font-weight: 700;font-family: 'Pretendard-All-B';margin-bottom: 15px;}
.sub0101_wrap .con01 .txt_wrap .txt p{font-size: 13px; line-height: 1.5; color: #666;}
.sub0101_wrap .con01 .txt_wrap .txt p:not(:last-child){margin-bottom: 12px;}
.sub0101_wrap .con01 .txt_wrap .txt p br{display: none;}
.sub0101_wrap .con01 .txt_wrap .txt p:nth-child(3){margin-bottom: 0;}
.sub0101_wrap .con01 .txt_wrap .txt p.edit_txt{margin-bottom: 0;}

.sub0101_wrap .con02 .img{position: relative;width: 100%; height: 200px; background: url(/assets/images/sub/sub0101_img01.jpg)center no-repeat; background-size: cover; background-attachment: fixed;}
.sub0101_wrap .con02 .img img{position: absolute;bottom: 20px; right: 20px;width: 110px;}
.sub0101_wrap .con02 ul{margin-top: 30px;}
.sub0101_wrap .con02 ul li{display: flex;flex-wrap:wrap;gap:12px;}
.sub0101_wrap .con02 ul li:not(:last-child){margin-bottom: 15px;}
.sub0101_wrap .con02 ul li strong{position: relative;display: block;padding-left: 15px; width: 100%;font-size: 15px; color: #222; font-weight: 700;}
.sub0101_wrap .con02 ul li strong::after{content:'';position: absolute; left: 0; top: 1px; width: 2px; height: 12px; background: #222;}
.sub0101_wrap .con02 ul li p{font-size: 13px; color: #666; padding-left: 15px;  line-height: 1.5;width: 100%;font-family: 'Pretendard-All-R';}
.sub0101_wrap .con02 ul li p br{display: none;}

.sub0101_wrap .con03 .txt_wrap img{max-width: 100%;}

/* sub0201 */
.sub0201_wrap{line-height: 1;}
.sub0201_wrap ul.list_wrap{display: flex;flex-wrap:wrap;gap:40px;}
.sub0201_wrap ul.list_wrap li{width: 100%;}
.sub0201_wrap ul.list_wrap li .img_wrap{position:relative; width:100%; padding-bottom:125.676%; }
.sub0201_wrap ul.list_wrap li .img_wrap img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;border-radius:20px;will-change: transform;}
.sub0201_wrap ul.list_wrap li .txt_wrap{margin-top: 15px;}
.sub0201_wrap ul.list_wrap li .txt_wrap p{font-size: 14px; color: #222;}
.sub0201_wrap ul.list_wrap li .txt_wrap strong{position: relative;display: inline-block; font-size: 16px; color: #222;font-weight: 700;margin-right: 15px;}
.sub0201_wrap ul.list_wrap li .txt_wrap strong::after{content:'';position: absolute; right: -8px; top: 54%; transform:translateY(-50%);width: 1px; height: 10px; background: #ddd;}

.sub0201_wrap .view_wrap{position: fixed; width: 100%; top: -100%; left: 50%; transform:translate(-50%,-50%);line-height: 1;z-index: 8500;transition: all 1s cubic-bezier(0.640, 0.005, 0.210, 1.145);}
.sub0201_wrap .view_wrap.on{top: 50%;}
.sub0201_wrap .view_wrap .x_btn{display: block;position: absolute;top: -40px;width: 30px; height: 30px;margin-left: auto;}
.sub0201_wrap .view_wrap .x_btn::before{content:'';position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) rotate(45deg); width: 100%; height: 4px; background: #222;}
.sub0201_wrap .view_wrap .x_btn::after{content:'';position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) rotate(-45deg); width: 100%; height: 4px; background: #222;}

.sub0201_wrap .view_box{width: 96%;background: #fff;padding: 40px 30px;box-shadow: 3px 3px 20px rgba(0,0,0,.25);height: calc(100vh - 150px);}
.sub0201_wrap .view_box .scr_wrap{height: 100%;overflow-y: scroll;}
.sub0201_wrap .view_box .scr_wrap::-webkit-scrollbar {width: 6px;  /* 스크롤바의 너비 */}
.sub0201_wrap .view_box .scr_wrap::-webkit-scrollbar-thumb{height: 10%; /* 스크롤바의 길이 */background: #ddd; /* 스크롤바의 색상 */border-radius: 10px;}
.sub0201_wrap .view_box .scr_wrap::-webkit-scrollbar-track {background: transparent;  /*스크롤바 뒷 배경 색상*/}

.sub0201_wrap .view_box .prof_box{position: relative;display: flex;gap:40px;flex-wrap:wrap;padding-top: 70px;}
.sub0201_wrap .view_box .img_box{width: 270px;margin: 0 auto;}
.sub0201_wrap .view_box .img_box .img_wrap{width: 270px; height: 320px;border-radius:20px;overflow: hidden;}
.sub0201_wrap .view_box .img_box .img_wrap img{width: 100%; height: 100%; object-fit:cover;}
.sub0201_wrap .view_box .img_box ul{margin-top: 20px;}
.sub0201_wrap .view_box .img_box ul li{display: flex;line-height: 1.5;}
.sub0201_wrap .view_box .img_box ul li:not(:last-child){margin-bottom: 2px;}
.sub0201_wrap .view_box .img_box ul li p{font-size: 14px;color: #666;width: 75px;}
.sub0201_wrap .view_box .img_box ul li span{font-size: 14px;color: #666;width: calc(100% - 75px);}

.sub0201_wrap .view_box .txt_box{width: 100%;}
.sub0201_wrap .view_box .txt_box .tit{display: flex;align-items: flex-start;gap: 5px;flex-direction: column;position: absolute;top: 0; left: 0;margin-bottom: 30px;width: 100%;text-align: center;}
.sub0201_wrap .view_box .txt_box .tit p{font-size: 15px; color: #222; font-weight: 500;}
.sub0201_wrap .view_box .txt_box .tit .sns_wrap{display: flex;gap:5px;justify-content: space-between;padding-right: 10px;margin-left: auto;}
.sub0201_wrap .view_box .txt_box .tit .sns_wrap img{width: 26px;}
.sub0201_wrap .view_box .txt_box .tit strong{position: relative;display: inline-block;font-size: 20px;color: #222; font-weight: 700;margin-right: 20px;vertical-align: baseline;}
.sub0201_wrap .view_box .txt_box .tit strong::after{content:'';position: absolute; right: -11px; top: 50%; transform:translateY(-50%);width: 2px; height: 10px; background: #ddd;}
.sub0201_wrap .view_box .txt_box .box_wrap{display: flex;flex-wrap:wrap;gap:30px 20px;}
.sub0201_wrap .view_box .txt_box .box_wrap .box{width: 100%;}
.sub0201_wrap .view_box .txt_box .box_wrap .box strong{display: block;font-size: 17px;color: #222; font-weight: 700; margin-bottom: 15px;}
.sub0201_wrap .view_box .txt_box .box_wrap .box ul li{display: flex; line-height: 1.5;}
.sub0201_wrap .view_box .txt_box .box_wrap .box ul li:not(:last-child){margin-bottom: 10px;}
.sub0201_wrap .view_box .txt_box .box_wrap .box ul li p{font-size: 14px;color: #666;width: 95px;}
.sub0201_wrap .view_box .txt_box .box_wrap .box ul li span{font-size: 14px;color: #666;width: calc(100% - 95px);}

.sub0201_wrap .view_box .photo_box{padding-top: 40px;overflow: hidden;}
.sub0201_wrap .view_box .photo_box strong{display: block;font-size: 17px; color: #222; font-weight: 700; text-transform:uppercase; margin-bottom: 20px;}
.sub0201_wrap .view_box .photo_box .slide_wrap{position: relative;height: auto;}
.sub0201_wrap .view_box .photo_box .slide_wrap ul{display: flex;gap:20px; flex-direction: column; }
.sub0201_wrap .view_box .photo_box .slide_wrap ul li .img_wrap{width: 100%;height: auto;transition:.3s;}
.sub0201_wrap .view_box .photo_box .slide_wrap ul li .img_wrap img{width: 100%;border-radius:12px;height: 100%;}
.sub0201_wrap .view_box .photo_box .slide_wrap ul li:hover .img_wrap{height: auto;transform:translateY(0px);}
.sub0201_wrap .view_box .photo_box .slide_wrap ul.sec02_slide01{position: initial;left: 0;top: 0;width: 100%;will-change: transform;}

.sub0201_wrap .img_pop_wrap{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);}
.sub0201_wrap .img_pop_wrap .img_pop_box{position: absolute;top: 50%;left: 50%; transform:translate(-50%,-50%);}
.sub0201_wrap .img_pop_wrap .img_pop_box .prev_btn{position: absolute; left: 10px; top: 50%; transform:translateY(-50%);}
.sub0201_wrap .img_pop_wrap .img_pop_box .next_btn{position: absolute; right: 10px; top: 50%; transform:translateY(-50%);}
.sub0201_wrap .img_pop_wrap .img_pop_box .prev_btn img,
.sub0201_wrap .img_pop_wrap .img_pop_box .next_btn img{width: 40px;}
.sub0201_wrap .img_pop_wrap .img_pop_box img{max-width: calc(100vw - 20px); max-height: calc(100vh - 100px);}

/* sub0401 */
.sub0401_wrap{line-height: 1;}
.sub0401_wrap .con{margin-bottom: 50px;}
.sub0401_wrap .con .txt01 strong{display: block;font-size: 16px; color: #222; font-weight: 700;margin-bottom: 15px;}
.sub0401_wrap .con .txt01 p{font-size: 14px; color: #666;line-height: 1.5;}
.sub0401_wrap .con ul{display: flex;flex-wrap:wrap;gap:10px;margin-top: 30px;}
.sub0401_wrap .con ul li{display: flex;align-items: center;width: 100%;}
.sub0401_wrap .con ul li strong{display: block;width: 60px;font-size: 14px; color: #222; font-weight: 700; margin-bottom: 0px;}
.sub0401_wrap .con ul li p{width: calc(100% - 60px);font-size: 13px; color: #666;}
.sub0401_wrap .map_con{position:relative; width:100%; padding-bottom:120%;overflow: hidden; border-radius:20px; box-shadow:3px 3px 12px rgba(0,0,0,.15)}
.sub0401_wrap .map_con iframe{position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:cover;}

}