/*@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);*/ ::-webkit-scrollbar { display:none; } @font-face { font-family: 'Athena'; src: local('Athena'), url('../font/Athena-Regular.eot') format('embedded-opentype'), url('../font/Athena-Regular.ttf') format('truetype'); font-weight: 400; } @font-face { font-family: 'gotham'; src: url('../font/GOTHAM-BOLD.eot'); src: local('../font/GOTHAM-BOLD'), url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'), url('../font/GOTHAM-BOLD.woff2') format('woff2'), url('../font/GOTHAM-BOLD.woff') format('woff'), url('../font/GOTHAM-BOLD.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'gotham'; src: url('../font/GOTHAM-BOLD.eot'); src: local('../font/GOTHAM-BOLD'), url('../font/GOTHAM-BOLD.eot?#iefix') format('embedded-opentype'), url('../font/GOTHAM-BOLD.woff2') format('woff2'), url('../font/GOTHAM-BOLD.woff') format('woff'), url('../font/GOTHAM-BOLD.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Carisma Inline'; src: url('../font/CarismaInlineOblique.eot'); src: local('Carisma Inline Oblique'), local('CarismaInlineOblique'), url('../font/CarismaInlineOblique.eot?#iefix') format('embedded-opentype'), url('../font/CarismaInlineOblique.woff2') format('woff2'), url('../font/CarismaInlineOblique.woff') format('woff'), url('../font/CarismaInlineOblique.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Pretendard'; font-weight: 900; font-display: swap; src: local('Pretendard Black'), url('../../font/Pretendard-Black.woff2') format('woff2'), url('./woff/Pretendard-Black.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url('../../font/Pretendard-ExtraBold.woff2') format('woff2'), url('./woff/Pretendard-ExtraBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('../../font/Pretendard-Bold.woff2') format('woff2'), url('./woff/Pretendard-Bold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 600; font-display: swap; src: local('Pretendard SemiBold'), url('../../font/Pretendard-SemiBold.woff') format('woff2'), url('./woff/Pretendard-SemiBold.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url('../../font/Pretendard-Medium.woff2') format('woff2'), url('./woff/Pretendard-Medium.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('../../font/Pretendard-Regular.woff2') format('woff2'), url('./woff/Pretendard-Regular.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 300; font-display: swap; src: local('Pretendard Light'), url('../../font/Pretendard-Light.woff2') format('woff2'), url('./woff/Pretendard-Light.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 200; font-display: swap; src: local('Pretendard ExtraLight'), url('../../font/Pretendard-ExtraLight.woff2') format('woff2'), url('./woff/Pretendard-ExtraLight.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 100; font-display: swap; src: local('Pretendard Thin'), url('../../font/Pretendard-Thin.woff2') format('woff2'), url('./woff/Pretendard-Thin.woff') format('woff'); } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,th,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} body{ line-height:1.5; font-family:'Dotum'; font-size:16px; color:#333; background:#fff;-ms-overflow-style: none; } audio,canvas,progress,video{display:inline-block;vertical-align:baseline} audio:not([controls]){display:none;height:0;} ul,ol,li{list-style:none} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} fieldset,img{border:0} hr{height:0;} small{font-size:80%} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} sup{top:-0.5em} sub{bottom:-0.25em} address,caption,em,var{font-style:normal;font-weight:normal} a{text-decoration:none;cursor:pointer;color: inherit;} a[href^="tel"]{font-style:normal} a:hover,a:active,a:focus{text-decoration:none !important;} b,strong{font-weight:bold} dfn{font-style:italic} img{border:0;vertical-align:top} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em} table{border-spacing:0;border-collapse:collapse} td,th{padding:0;} legend, caption{overflow:hidden;text-indent:-9999999px; height:0 !important; width:0 !important;line-height:0 !important;margin:0;padding:0;} input{vertical-align:middle;margin:0;padding:0;} input[type="text"],input[type="password"],input[type="email"]{-webkit-appearance:none;border-radius:0;font-family:'Dotum';} input:checked[type="checkbox"]{-webkit-appearance:checkbox} button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{border-radius:0;-webkit-appearance:button;font-family:'Dotum';} button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit} button{overflow:visible;border:none;cursor:pointer;margin:0;padding:0;} a,input,button,select{outline:none} button,select{text-transform:none} optgroup{font-weight:bold} textarea{border:1px solid #bcbcbc;overflow:auto;-webkit-appearance:none} input::-ms-clear{display:none;} * { scroll-behavior: smooth; box-sizing: border-box; } body { width: 100%; max-width: 100%; margin: auto; font-family: 'Noto Sans KR', sans-serif; overflow-x: hidden; } /*body.main { overflow-y: hidden; }*/ /**/ /* .intro {position:fixed; max-width:500px; top: 0; left:0; right:0; margin: 0 auto; z-index: 9999999999; width: 100%; height:100vh; overflow: hidden; animation: intro 14s 0s both; } .int_bg { background: url("../img/main_img.jpg") center top no-repeat; background-size: 100%; width: 100%; height: 100%; animation: int_img 10s 0s both; } .int_bg2 { background: url("../img/main_img.jpg") center top no-repeat; background-size: 100%; width: 100%; height: 100%; animation: int_img2 10s 0s both; } .int_box {display: flex; justify-content: center; top: 0; z-index: 1; left: 0; right: 0; margin: 0 auto; text-align: center; position: absolute;} .int01 { position:relative; z-index: 1; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100vh; background-color: #fff; display: flex; justify-content: center; align-items: center;} .int01_wrap { position: absolute; width: 1%; height: 5px; left: 0; right: 0; margin: 0 auto; overflow: hidden; opacity: 0; display: flex; justify-content: center; align-items: center; transform: translateY(-5rem);} .int01_bg { width: 1920px; height: 100%; opacity: 1; z-index: 1; position: absolute; } .int01_vd { position: absolute; top: 0; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .int01_vd:after { content:''; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 9; } .int01_vd iframe { position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; width: 100%; height: 100%; z-index: 2; opacity: 1; } .int_txt {font-family: "Nanum Myeongjo", serif; color: #fff; position: absolute; z-index: 3; text-align: center; margin: 0 auto; width: 100%;transform: translateY(-3rem); } .int_txt h1 {font-size: 1.2rem;} .int01_txt {margin-top:2rem; opacity: 0;} .int02 { position:absolute; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; opacity: 0; z-index: 2;} .int02_wrap { position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; transform: translateY(-5rem);} .int02_bg { width: 1920px; height: 100%; opacity: 1; z-index: 1; position: absolute; } .int02_vd { position: absolute; top: 0; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .int02_vd:after { content:''; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 9; background-color: #000; opacity: 0.2; } .int02_vd iframe { position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; width: 100%; height: 100%; z-index: 2; opacity: 1; } .int02_txt {margin-top:2rem; opacity: 0;} .int03 { position:absolute; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; opacity: 0; z-index: 2;} .int03_wrap { position: absolute; width: 100%; height: 100%; left: 0; right: 0; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center;} .int03_bg { width: 1920px; height: 100%; opacity: 1; z-index: 1; position: absolute; } .int03_vd { position: absolute; top: 0; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; } .int03_vd:after { content:''; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 9; background-color: #000; opacity: 0.2; } .int03_vd iframe { position: absolute; top: 50%; transform: translate(-50%,-50%); left: 50%; width: 100%; height: 100%; z-index: 2; opacity: 1; } .int03_txt { opacity: 0; transform: translateY(-5rem);} .int03_bg {width: 100%; height: 100%; position: absolute; top:0; overflow: hidden; margin: 0 auto; animation: int_img2 10s 0s both; } .bg03_img {background: url("../img/main_img.jpg") no-repeat; background-size: 100%; background-position: bottom; width: 100%; height: 100%; position: absolute; } .bg03_img { width: 100%; height: 100%; position: absolute; top:-100%;} .bg03_img.active { animation: int_img2 10s 0s both; } .txt_ac { position:relative; left: 0; right: 0; margin: 0 auto; width: 40%;} .txt_ac h1 {font-size: 1.2rem; opacity: 0; } .txt_ac_line {width:0; height: 1px; background-color: #fff; position: absolute; left: 0; opacity: 0;} @keyframes intro { from { top:0; } 90% { top:0; opacity: 1;} 95% { top:0; opacity: 0;} to { opacity: 0; top:-120%; } } */ /**/ .all_wrap { width: 100%; margin: auto; height: auto; position: relative; top: 0; overflow: hidden; z-index: 989; background-color: #fff; box-shadow: 0px 0px 10px rgba(0,0,0,0.3); max-width:500px;} .fixWrap{ position:fixed; top: 0; left: 0;right: 0; margin: auto; width: 100%; height:calc( 100vh + 0vw); z-index: -5; max-width:500px;} .sec{ width: 100%; max-width: 100%; margin: auto;} .main_box { width: 100%; height: 100vh; position: relative; background-color: #fff; overflow: hidden; max-width: 100%; margin: auto; } .main_box>img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*object-fit: cover;*/ transition: 0.2s; } .main_slide_num { position: absolute; left: 105px; top: 0; bottom: 0; margin: auto; height: 13px; line-height: 95%; font-size: 13px; color: #0a2021; text-align: center; letter-spacing: 0; } .main_slide { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; margin-bottom: 0; } .main_img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; margin: 0 auto; transform: scale(1); } .main_img:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: url("../img/main_bg.png") no-repeat; background-size: cover; } .main_img.img01 {background: url("../img/main_img01.jpg") center top no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; } .main_img.img02 { background: url("../img/main_img02.jpg") center top no-repeat; background-size: cover; position: absolute; top: 0; transform: scale(1); } .main_bt_wrap { width: 300px; height: 32px; position: absolute; margin: 0 auto; left: 0; right: 0; top:85vw; z-index:5; } @keyframes int_img2 { from { background-position: bottom;} to { background-position: top; } } @keyframes main_img2 { from { top: -20rem; } to { top: 0px; } } @keyframes main_img { from { transform: scale(1.2); } to { top: 0px; } } .main_txt_box {position: relative; top: 9rem; margin: 0 auto; left: 0; right: 0; text-align: center; color: #fff; z-index: 3;} .back_txt { position: absolute; top: 0; margin: 0 auto; left: 0; right: 0; opacity: 0;} .back_txt h1 { font-family: 'copperplate'; font-size: 3rem; line-height:100%; color: rgba(0,0,0,0.6);} .mm_txt_box { position: absolute; margin: 0 auto; left: 5%; right: 0; top:3rem; text-align: left; } .main_txt_box h3 { font-family: "Nanum Myeongjo", serif; letter-spacing: -1px; font-size: 5.787vw; margin-top:-1rem; font-weight: 500; opacity: 0; transform: translateY(-3rem); } .main_txt_box span { position: relative; display: flex; justify-content: center; margin-top: 7vw; } .main_txt_box span:before { content:''; position: absolute; width: 1px; height: 1px; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); display: block; margin-right: 3.8vw; opacity: 0;} .mm_txt_box>div { text-align: center; margin-top: -4vw;} .main_txt_box .main_txt01 { position: relative; opacity: 0; } .main_txt_box p { font-size: 3vw; line-height: 160%; color: rgba(255,255,255,0.5); margin-top: 9vw; opacity: 0; transform: translateY(-3rem);} .main_txt_box h6 { font-size: 3vw; opacity: 0; line-height: 100%;} .main_txt_box h6:before { content:''; width: 1px; height: 3vw; background-color: #fff; position: relative; top: 0.5vw; left: -2vw; display: inline-block;} .main_txt_box h6:after { content:''; width: 1px; height: 3vw; background-color: #fff; position: relative; top: 0.5vw; right: -2vw; display: inline-block;} .main_line { width: 1px; height: 2.85rem; margin: 1rem auto; position: relative; background-color: #fff; opacity: 0;} .main_txt01:before { content:''; position: absolute; } .main_txt02 {position: absolute; left: 5vw; bottom: 5rem; z-index: 3; margin-top: 3rem; width: 70%; opacity: 0; transform: translateX(-3rem);} .main_txt02 h2 {font-family:"Antro", sans-serif; color: #fff; font-size: 1.6rem; text-align: left; transform: rotate(-4deg);} .main_txt02 b { font-size: 2.6rem; font-weight: 400; } .main_txt02 span { transform: translate(4.5rem,-0.5rem); display: inline-block; } .screen { mix-blend-mode: screen; } .multiply { mix-blend-mode: multiply; } @keyframes main_img { from { transform: scale(1.22); } to { } } @keyframes main_txt { from { opacity: 0; transform: translateY(-40px); } to { } } @keyframes main_txt2 { from { opacity: 0; transform: translateY(40px);} to { } } .main_bt_wrap .swiper-pagination1-0 { width: 90px; height: 20px; position: absolute; left: 180px; bottom: 0; top: 0; margin: auto; z-index: 999; display: flex; justify-content: space-between; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet { width: 100%; height: 20px; border-radius: 0; opacity: 1; background: none; position: relative; outline: none; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet span { content:''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; top: 0; margin: auto; background-color: #0a2021; opacity: 1; animation: bullet 5s 0s both linear; display: none; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet span.stop { animation-play-state: paused; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet:before { content:''; width: 100%; height: 2px; position: absolute; left: 0; bottom: 0; top: 0; margin: auto; background-color: #0a2021; opacity: 0.3; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet p { font-size: 11px; line-height: 100%; color: #0a2021; position: absolute; top: 0; left: -8px; letter-spacing: 0.5px; z-index: -1; opacity: 0; transition: 0.5s; display: none; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet-active span { display: block; } .main_bt_wrap .swiper-pagination1-0 .swiper-pagination-bullet-active p { left: -13px; opacity: 1; } @keyframes bullet { from { width: 0; } to { } } .main_play_bt { width: 20px; height: 30px; color: #fff; position: absolute; right: 0; top: 0; margin: auto; bottom: 0; } .main_play_bt>div { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; cursor: pointer; border-radius: 100%; } .main_play_bt>div>img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .swiper-button-play { display: none; } .swiper1-2 { width: 95px; height: 25px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; z-index: 99; } .swiper1-2 .swiper-slide { width: 25px; height: 25px; cursor: pointer; border: none; overflow: hidden; box-sizing: border-box; border-radius: 100%; } .swiper1-2 .swiper-slide-thumb-active { opacity: 1; } .swiper1-2 .swiper-slide:before { content:''; width: 5px; height: 5px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: #0a2021; z-index: 9; border-radius: 100%; opacity: 0.5; } .swiper1-2 .swiper-slide-thumb-active:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 1px solid #0a2021; z-index: 9; border-radius: 100%; box-sizing: border-box; } .swiper1-2 .swiper-slide-active:before { opacity: 1; } .main_guest_wrap { position: absolute; right: 10vw; bottom: 6rem; z-index: 999; display: flex; justify-content: flex-start; align-items: center; opacity: 0; transform: translateX(3rem); transition: 1.0s 0s; text-align: center; } .main_guest { width: 14.2vw; height: 14.2vw; background-color: #fff; margin: auto; border-radius: 100%; z-index: 99; cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; opacity: 1; cursor: default; transition: 1.0s 0s; opacity: 1; } .main_guest_bg { width: 147.7272%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(1) rotate(0); animation: main_guest_bg 22s 0s linear infinite; } .main_guest p { font-size: 2.8vw; line-height: 100%; color: #000; position: relative; z-index: 9; transform: translateY(0.1875rem); font-weight: 700; margin-top: -0.6vw;} .main_guest p span { font-size: 9px; text-transform: uppercase; opacity: 0.8; line-height: 110%; display: inline-block; margin-top: 0.5vw;} .main_guest img:first-child { width: 100%; } .main_guest_txt { text-align: left; color: #fff; display: flex; justify-content: flex-start; align-items: center; margin-left: 4.125rem; } .main_guest_txt h3 { font-family: 'lexend'; font-size: 1.75rem; line-height: 100%; font-weight: 700; } .main_guest_txt p { font-size: 0.875rem; line-height: 100%; margin-left: 0.625rem; } @keyframes main_guest_bg { from { transform: translate(-50%,-50%) scale(1) rotate(-360deg); } to { } } .main_slide .swiper-slide.swiper-slide-active .main_img { animation: main_img 4s 0s both; } .main_slide .swiper-slide.swiper-slide-active .main_txt_box h3 { opacity: 1; transform: translate(0); transition:1.2s 0.4s;} .main_slide .swiper-slide.swiper-slide-active .main_txt_box span:before { opacity: 1; width: 18.8vw; transition: 1s 0.8s;} .main_slide .swiper-slide.swiper-slide-active .main_txt_box .main_txt01 { opacity: 1; transition: 1s 1.4s;} .main_slide .swiper-slide.swiper-slide-active .main_txt_box h6 { opacity: 1; transition: 1s 1.4s;} .main_slide .swiper-slide.swiper-slide-active .main_txt_box p { opacity: 1; transform: translate(0); transition:1.2s 1.8s; } .main_slide .swiper-slide.swiper-slide-active .main_txt02 { opacity: 1; transform: translate(0); transition:1.2s 1.8s; } .main_slide .swiper-slide.swiper-slide-active .main_guest_wrap { opacity: 1; transform: translate(0); transition:1.2s 1.8s; } /*.main_box.active .main_img { animation: main_img 1.6s 0s both; } .main_box.active .main_txt_box h3 { animation: main_txt 1.0s 7.3s both; } .main_box.active .main_txt_box .main_txt01 { animation: main_txt 1s 7.7s both; } .main_box.active .main_txt_box h2 { animation: main_txt 1.0s 8.2s both; } .main_box.active .main_txt_box p { animation: main_txt 1.0s 8.7s both; } .main_box.active .main_txt_box .main_txt02 { animation: main_txt2 1s 10s both; }*/ /* .main_scroll_box { width: 51px; height: 135px; position: fixed; left: 50px; bottom: 0; top: 0; margin: auto; text-align: center; z-index: 9999999; transform: translateY(20px); } .scroll_w { opacity: 0; transition: 0.3s; } .scroll_b { position: absolute; left: 0; right: 0; top: 0; margin: auto; opacity: 1; transition: 0.3s; } .main_scroll { width: 13px; height: 83px; margin: auto; margin-top: 12px; position: relative; overflow: hidden; } .main_scroll span { position: absolute; left: 0; right: 0; margin: auto; top: -100%; width: 1px; height: 100%; background-color: #000; transition: 0.3s; } .main_scroll:after { position: absolute; content:''; width: 8px; height: 8px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); left: 0; bottom: 2px; right: 0; margin: auto; transition: 0.3s; } .scroll_circle { content:''; position: absolute; left: 0; right: 0; bottom: -22px; margin: auto; width: 50px; height: 50px; z-index: -1; } .scroll_circle span { content:''; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; background-color: #000; width: 100%; height: 100%; border-radius: 100%; opacity: 0.2; transition: 0.3s; } */ /**/ .con_wrap {width: 100%; position: relative; z-index: 2; background-color: #fff; left: 0; right: 0; margin: 0 auto;} .arr_wrap {position:absolute; top: 0; z-index: 3; width: 100%;} /**/ .sec_sum {width: 100%; height: 162vw; position: relative; overflow: hidden; margin-top: calc(100vh - 12vw); background-color: #000; color: #fff; text-align: center; display: flex; justify-content:center; align-items:center; } .sec_sum>div { width: 90%; max-width: 488px; position: relative; } .sec_sum>div>h1 { font-family: 'trajan'; display: inline-block; position: relative; font-size: 6.923vw; line-height: 100%; font-weight: 600; color: #fff; } .sec_sum ul { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; width: 90%; max-width: 480px; margin: auto; margin-top: 6.667vw; } .sec_sum ul>li { width: calc(33.33% - 0.5rem); padding: 2.2rem 0; position: relative; box-sizing: border-box;display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; transition: 0.5s; } .sec_sum ul>li::before { content: ''; width: 0%; height: 1px; position: absolute; left: -1px; top: -1px; background-color: rgba(255,255,255,0.4); transition: 0.8s; } .sec_sum ul>li::after { content: ''; width: 0%; height: 1px; position: absolute; right: -1px; bottom: -1px; background-color: rgba(255,255,255,0.4); transition: 0.8s; } .sec_sum ul>li img { width: 100%; } .sec_sum ul>li>span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sec_sum ul>li>span::before { content: ''; width: 1px; height: 0%; position: absolute; left: -1px; bottom: -1px; background-color: rgba(255,255,255,0.4); transition: 0.8s; } .sec_sum ul>li>span::after { content: ''; width: 1px; height: 0%; position: absolute; right: -1px; top: -1px; background-color: rgba(255,255,255,0.4); transition: 0.8s; } .sec_sum ul>li:nth-child(n+4) { width: calc(50% - 0.375rem); padding: 2.25rem 0; } .sec_sum ul>li h2 { font-family: 'trajan'; font-size: 4.1vw; line-height: 100%; font-weight: 700; opacity: 0; transition: 0.8s; } .sec_sum ul>li h2 span { font-size: 2.8vw;} .sec_sum ul>li h4 { font-size: 2.8vw; line-height: 100%; font-weight: 500; margin-top: 0.375rem; opacity: 0.7; opacity: 0; transition: 0.8s; } .main_sum_over { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; } .main_sum_over::before { content: ''; width: 1px; height: 0; position: absolute; left: -1px; bottom: -1px; background-color: #b9967b; transition: 0.5s; } .main_sum_over::after { content: ''; width: 1px; height: 0; position: absolute; right: -1px; top: -1px; background-color: #b9967b; transition: 0.5s; } .main_sum_over span { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .main_sum_over span::before { content: ''; width: 0%; height: 1px; position: absolute; left: -1px; top: -1px; background-color: #b9967b; transition: 0.5s; } .main_sum_over span::after { content: ''; width: 0%; height: 1px; position: absolute; right: -1px; bottom: -1px; background-color: #b9967b; transition: 0.5s; } .main_sum_bt { display: flex; justify-content: center; align-items: center; gap: 2.6vw; flex-wrap: wrap; margin-top: 7.5vw; opacity: 0; transition: 0.8s; } .main_sum_bt>div { width: 16.875rem; height: 10.6vw; border: 1px solid rgba(255,255,255,0.4); border-radius: 3.75rem; transition: 0.5s; color: #fff; } .main_sum_bt>div>a { font-size: 3.2vw; line-height: 100%; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 2.25rem; color: #fff;} .main_sum_bt>div>a>div { width: 0.9375rem; height: 0.75rem; background: url(../../img/down_w.png) right center no-repeat; background-size: cover; transition: 0.5s; } /* .sec_sum.active .main_sum { opacity: 1; z-index: 15; transition: 0s 0.8s; } */ .sec_sum.active ul>li::before, .sec_sum.active ul>li::after { width: calc(100% + 2px); transition: 1.5s 0.8s; } .sec_sum.active ul>li>span::before, .sec_sum.active ul>li>span::after { height: calc(100% + 2px); transition: 1.5s 0.8s; } .sec_sum.active>div>h1 { transform: translate(0); opacity: 1; transition: 1.2s 0.8s; } .sec_sum.active ul>li h2 { transform: translate(0); opacity: 1; transition: all 0.5s 0s, opacity 1.2s 0.8s; } .sec_sum.active ul>li h4 { transform: translate(0); opacity: 1; transition: all 0.5s 0s, opacity 1.2s 0.8s; } .sec_sum.active .main_sum_bt { opacity: 1; transition: 1.2s 0.8s;} /**/ .sec_loca {width: 100%; height: 335vw; position: relative; top:0; left: 0; right: 0; margin: 0 auto; } .loca_wrap {position: relative; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%;} .loca_bg { position: absolute; right: -5vw; bottom: 23%;} .loca_bg h4 { font-family: 'corsiva'; font-size: 3vw; line-height: 100%; position: absolute; left: 17vw; bottom: 7vw; z-index: 9; } .loca_tit_img01 { width: 100%; height: 81.8vw; overflow: hidden;} .loca_tit_img01 img { width: 100%; height: auto; transform: scale(1.2); } .loca_con01 { position: relative; padding: 15vw 5vw;} .loca_con01 .loca_tit h2 { font-family: "Nanum Myeongjo", serif; font-size: 5.3vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem);} .loca_con01 .loca_tit p { font-size: 3vw; color: rgba(0,0,0,0.7); margin-top: 5.8vw; line-height: 180%; opacity: 0; transform: translateX(-3rem);} .loca_img_box01 { position: relative; width: 100%; margin-top: 8vw; display: flex; justify-content: flex-start; align-items: center; gap:2vw; } .loca_img_box01>div:first-child { width: 100%; max-width: 32vw; opacity: 0; transform: translateY(-3rem);} .loca_img_box01>div:last-child { display: flex; justify-content: center; align-items: flex-start; flex-direction: column; gap:2vw; max-width: 32vw; opacity: 0; transform: translateX(3rem);} .loca_img_box01>div img { width: 100%; height: auto; } .loca_img_box01>div:last-child>img:last-child { width: revert; max-width: 48vw; } .loca_txt_box { margin-top: 8vw; opacity: 0; transform: translateY(3rem);} .loca_txt_box>div { margin-bottom: 8vw;} .loca_txt_box>div:last-child { margin-bottom: 0;} .loca_txt_box h3 { font-size: 3.925vw; color: #9c6c5c; font-weight: 700; line-height: 100%; } .loca_txt_box p { font-size: 3vw; color: #000; opacity: 0.7; line-height: 180%; margin-top: 3vw;} .loca_wrap.active .loca_tit_img01 img{ transform: scale(1); transition: 3s 0.4s;} .loca_con01.active .loca_tit h2 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .loca_con01.active .loca_tit p { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .loca_con01.active .loca_img_box01>div:first-child { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .loca_con01.active .loca_img_box01>div:last-child { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .loca_con01.active .loca_txt_box { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .sec_ach {width: 100%; height: 316vw; position: relative; top:0; left: 0; right: 0; margin: 0 auto; } .ach_wrap { position: relative; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%;} .ach_bg { position: absolute; left: 30vw; bottom: 40%; max-width: 27vw;} .ach_bg img { width: 100%;} .ach_tit_img { width: 100%; height: 111vw; overflow: hidden;} .ach_tit_img img { width: 100%; height: auto; transform: scale(1.2); } .ach_con { position: relative; padding: 15vw 5vw;} .ach_con .ach_tit h3 { font-family: "Nanum Myeongjo", serif; font-size: 4.475vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .ach_con .ach_tit h2 { font-family: "Nanum Myeongjo", serif; font-size: 5.3vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .ach_con .ach_tit p { font-size: 3vw; color: rgba(0,0,0,0.7); margin-top: 5.8vw; line-height: 180%; opacity: 0; transform: translateX(-3rem); } .ach_img_box { position: relative; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15vw; margin-bottom: 10vw;} .ach_img_box img { width: 100%; max-width: 39vw; opacity: 0; } .ach_txt_box { opacity: 0; transform: translateY(2rem); } .ach_txt_box>div { margin-bottom: 8vw;} .ach_txt_box>div:last-child { margin-bottom: 0;} .ach_txt_box h3 { font-size: 3.4vw; color: #9c6c5c; font-weight: 700; line-height: 100%; } .ach_txt_box h3 span { font-size: 2.8vw;} .ach_txt_box p { font-size: 2.8vw; color: #000; opacity: 0.7; line-height: 180%; margin-top: 3vw;} .ach_wrap.active .ach_tit_img img { transform: scale(1); transition: 3s 0.4s; } .ach_con.active .ach_tit h2 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .ach_con.active .ach_tit h3 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .ach_con.active .ach_tit p { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .ach_con.active .ach_img_box img { opacity: 1; transition: 1.2s 0.6s; } .ach_con.active .ach_img_box .ach_txt_box { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .ach_con.active .ach_img_box>div:last-child { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .ach_con.active .ach_txt_box { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } /**/ .sec_land {width: 100%; height: 324vw; position: relative; top:0; left: 0; right: 0; margin: 0 auto; } .land_wrap { position: relative; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; background-color: #f6f3f1;} .land_con { position: relative; padding: 15vw 5vw;} .land_con .land_tit h3 { font-family: "Nanum Myeongjo", serif; font-size: 4.475vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .land_con .land_tit h2 { font-family: "Nanum Myeongjo", serif; font-size: 5.3vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .land_con .land_tit p { font-size: 3vw; color: rgba(0,0,0,0.7); margin-top: 5.8vw; line-height: 180%; opacity: 0; transform: translateX(-3rem); } .land_img_box01 { width: 90%; margin: auto; margin-top: 19.167vw; position: relative; opacity: 0;} .land_img_box01>div { width: 100%; } .land_img_box01 img { width: 100%;} .land_img_txt { position: absolute; width: 0px; top: 0; } .land_img_txt>div { position: absolute; left: -1.5vw; top: 0; display: flex; justify-content: flex-start; align-items: center; transform: rotate(90deg); transform-origin: left top; gap:3vw; width: 50vw; } .land_img_txt h4 { color: #9c6c5c; font-size: 2.33vw; font-weight: 700; letter-spacing: -0.3px;} .land_img_txt span { width: 8.5vw; height: 1px; background-color: #9c6c5c; display: inline-block;} .land_img_box01 h6 { position: absolute; font-family: 'corsiva'; line-height: 100%; top: -5vw; right: 0vw; font-size: 3.5vw;} .land_txt_box { opacity: 0; transform: translateY(2rem); width: 90%; margin: 8.7vw auto 0; } .land_txt_box>div { margin-bottom: 8vw;} .land_txt_box>div:last-child { margin-bottom: 0;} .land_txt_box h3 { font-size: 3.4vw; color: #9c6c5c; font-weight: 700; line-height: 100%; } .land_txt_box h3 span { font-size: 2.8vw;} .land_txt_box p { font-size: 2.8vw; color: #000; opacity: 0.7; line-height: 180%; margin-top: 1vw;} .land_img_box02 { width: 90%; margin: auto; margin-top: 19.167vw; position: relative; display: flex; justify-content: space-between; align-items: center; gap:3vw;} .land_img_box02>div { width: 100%; position: relative;} .land_img_box02>div img { width: 100%;} .land_img_box02>div:first-child { margin-top: 19vw; opacity: 0; transform: translateY(2rem); } .land_img_box02>div:last-child { margin-top: -19vw; opacity: 0; transform: translateY(-2rem);} .land_img_box02>div:last-child .land_img_txt { left: revert; right: -7vw;} .land_txt_box.txt_box02 { text-align: right; opacity: 0; transform: translateY(2rem); } .land_con.active .land_tit h3 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .land_con.active .land_tit h2 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .land_con.active .land_tit p { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .land_con.active .land_img_box01 { opacity: 1; transition: 1.2s 0.6s; } .land_con.active .land_txt_box { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } .land_img_box02.active>div:first-child { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .land_img_box02.active>div:last-child { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .land_txt_box.txt_box02.active { opacity: 1; transform:translate(0); transition: 1.2s 0.6s; } /**/ .sec_commu {width: 100%; height: 503vw; position: relative; top:0; left: 0; right: 0; margin: 0 auto; } .commu_wrap { position: relative; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; } .commu_bg { position: absolute; right: 5vw; top: 10vw; max-width: 26vw;} .commu_bg img { width: 100%; } .commu_con { position: relative; padding: 15vw 5vw;} .commu_tit h3 { font-family: "Nanum Myeongjo", serif; font-size: 4.475vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .commu_tit h2 { font-family: "Nanum Myeongjo", serif; font-size: 6vw; color: #9c6c5c; line-height: 130%; opacity: 0; transform: translateX(-3rem); } .commu_tit p { font-size: 3vw; color: rgba(0,0,0,0.7); margin-top: 5.8vw; line-height: 180%; opacity: 0; transform: translateX(-3rem); } .commu_thum_img { position: relative; } .commu_thum_img>div { display: flex; justify-content: space-between; align-items:center; gap:3vw; } .commu_thum_img img { max-width: 27.3vw;} .commu_thum_img.img01>div>img:first-child { margin-top: 15vw; opacity: 0;} .commu_thum_img.img01>div>img:nth-child(2) { margin-top: 19vw; /* transform: rotate(140deg); */ opacity: 0;} .commu_thum_img.img01>div>img:last-child { margin-top: -10vw; /* transform: rotate(160deg); */ opacity: 0;} .commu_thum_img.img02>div>img:first-child { margin-top: 1vw; opacity: 0;} .commu_thum_img.img02>div>img:nth-child(2) { margin-top: 19vw; /* transform: rotate(90deg); */ opacity: 0;} .commu_thum_img.img02>div>img:last-child { margin-top: -10vw; /* transform: rotate(160deg); */ opacity: 0;} .commu_map { width: 100%; margin-top: 13vw; opacity: 0; transform: translateY(3rem);} .commu_map img { width: 100%;} .commu_con.con01 .line { display: block; width: 100%; height: 1px; background-color: #000; opacity: 0.3; margin: 15vw 0 15vw; } .commu_bottom { width: 90%; margin: auto;} .commu_img_box { position: relative; display: flex; justify-content: space-between; opacity: 0;} .commu_img_box>div { width: 100%; } .commu_img_box>div img { width: 100%;} .commu_img_txt { position: absolute; width: 0px; top: 0; } .commu_img_txt>div { position: absolute; left: -1.5vw; top: 0; display: flex; justify-content: flex-start; align-items: center; transform: rotate(90deg); transform-origin: left top; gap:3vw; width: 50vw; } .commu_img_txt h4 { color: #9c6c5c; font-size: 2.33vw; font-weight: 700; letter-spacing: -0.3px;} .commu_img_txt span { width: 8.5vw; height: 1px; background-color: #9c6c5c; display: inline-block;} .commu_txt_box { opacity: 0; transform: translateY(2rem); margin: 8.7vw 0 13vw;} .commu_txt_box.txt_box01 { text-align: right; } .commu_txt_box>div { margin-bottom: 8vw;} .commu_txt_box>div:last-child { margin-bottom: 0;} .commu_txt_box h3 { font-size: 3.4vw; color: #9c6c5c; font-weight: 700; line-height: 100%; } .commu_txt_box h3 span { font-size: 2.8vw;} .commu_txt_box p { font-size: 2.8vw; color: #000; opacity: 0.7; line-height: 180%; margin-top: 1vw;} .commu_txt_box.txt_box02 { text-align: left; margin-bottom: 0;} .commu_con.con01.active .commu_tit h3 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .commu_con.con01.active .commu_tit h2 { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .commu_con.con01.active .commu_tit p { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } .commu_con.con01.active .commu_thum_img.img01>div>img:first-child { opacity: 1; transition: 1.2s 0.6s;} .commu_con.con01.active .commu_thum_img.img01>div>img:nth-child(2) { opacity: 1; transition: 1.2s 0.8s;} .commu_con.con01.active .commu_thum_img.img01>div>img:last-child { opacity: 1; transition: 1.2s 1s;} .commu_con.con01.active .commu_map { opacity: 1; transform:translate(0); transition: 1.2s 1.2s; } .commu_con.con01.active .commu_thum_img.img02>div>img:first-child { opacity: 1; transition: 1.2s 1.6s;} .commu_con.con01.active .commu_thum_img.img02>div>img:nth-child(2) { opacity: 1; transition: 1.2s 1.6s;} .commu_con.con01.active .commu_thum_img.img02>div>img:last-child { opacity: 1; transition: 1.2s 1.6s;} .commu_img_box.active { opacity: 1; transition: 1.2s 0.4s; } .commu_txt_box.active { opacity: 1; transform:translate(0); transition: 1.2s 0.4s; } /**/ .sec_unit {width: 100%; height: 76vw; position: relative; top:0; left: 0; right: 0; margin: 0 auto; } .unit_wrap { position: relative; top:0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; background-color: #000;} .unit_bg { width: 100%; height: 100%; overflow: hidden; } .unit_bg img { width: 100%; opacity: 0.3; transform: scale(1.2); } .unit_bg img:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; right: 0; top: 0; z-index: 2; background: url("../img/unit_bo.png") no-repeat; background-size: cover; } .unit_con { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items:center; flex-direction: column; color: #fff; top: 0;} .unit_txt_box { text-align: center; } .unit_txt_box h2 { font-family: 'trajan'; font-size: 6.667vw; line-height: 100%; font-weight: 700;} .unit_txt_box p { font-size: 3vw; margin-top: 5vw;} .unit_btn_box { margin-top: 9vw;} .unit_btn_box>div { display: flex; display: flex; justify-content: center; align-items:center; gap:1vw;} .unit_btn_box>div>a { width: 20.5vw; height: 20.5vw; border: 1px solid #fff; display: flex; justify-content: center; align-items:center;} .unit_btn_box h6 { font-size: 3vw; line-height: 100%; color: #fff;} .unit_arrow { position: absolute; top: 30.8vw; width: 100%;} .swiper-button-prev { position: absolute; left: 5vw;} .swiper-button-next { position: absolute; right: 5vw;} .unit_arrow img { max-width: 11.6vw;} .swiper_unit .swiper-slide-active .unit_bg img { transform: scale(1); transition: 4s 0.4s;} /**/ .sec_pre { width: 100%; height: 330vw; position: relative; left: 0; right: 0; margin: 0 auto; top:0;} .pre_wrap { width: 100%; height: 100%; position: relative; display: flex; justify-content:center; align-items: center; text-align: center; } .swiper_pre {width: 100%; height: 100%; position: relative; left: 0; right: 0; margin: 0 auto; top:0;} .pre_con_wrap {width: 100%; height: 100%; position: relative; left: 0; right: 0; margin: 0 auto; top:0; display: flex; justify-content:center; align-items: center; } .pre_con_wrap.wrap01 { color: #000; background: url("../img/pre_bg.jpg") center no-repeat; background-size: cover;} .pre_con_wrap.wrap02 { color: #fff; background: url("../img/pre02_bg.jpg") center no-repeat; background-size: cover;} .pre_con_wrap>div {width: 100%; height: 100%; } .pre_tit_box {width: 100%; margin-top: 5rem; transform: translateY(-3rem); opacity: 0;} .pre_tit_box h2 { font-size: 4.2vw;} .pre_tit_box h1 { font-size: 10vw; font-family: 'copperplate'; } .pre_content { width: 90%; margin: 0 auto; position: relative;} .pre_content.con01 { display: flex; justify-content:flex-start; align-items: center; margin-top: 3rem; gap:2rem; transform: translateX(3rem); opacity: 0; } .pre_content.con02 { margin-top: 4rem; width: 70%; transform: translateX(3rem); opacity: 0; } .pre_content.con03 { margin-top: 4rem; transform: translateY(3rem); opacity: 0; } .pre_img {width:50%;} .pre_img.img02 {width:100%; margin: 0 auto;} .pre_img.img03 { position: absolute; right: 0; } .pre_txt_box { text-align: left; position: relative; } .pre_txt_box h3 { font-size: 4vw; font-weight: 600;} .pre_txt_box p { font-size: 3.2vw; line-height: 160%; margin-top: 1rem; opacity: 0.7;} .pre_txt_box.box02 { margin: 0 auto; margin-top: 3rem; } .pre_txt_box.box03 { position: absolute; left: 0; top: 11rem;} .pre_icon {width:26%;} .pre_icon.icon01 { margin-top: 3rem; } .pre_icon.icon02 { position:absolute; right: 0; top: -1rem; width:15%;} .pre_icon.icon03 { width:18%; margin-bottom: 3rem;} .pre02_icon {width:26%;} .pre02_icon.icon01 { margin-top: 3rem; } .pre02_icon.icon02 { position:absolute; right: 0; top: -1rem; width:13%;} .pre02_icon.icon03 { width:16%; margin-bottom: 3rem; } .swiper_pre .swiper-slide-active .pre_content.con01 {transform: translate(0px); opacity: 1; transition: 1s 0.7s;} .swiper_pre .swiper-slide-active .pre_content.con02 {transform: translate(0px); opacity: 1; transition: 1s 0.9s;} .swiper_pre .swiper-slide-active .pre_content.con03 {transform: translate(0px); opacity: 1; transition: 1s 1s;} .swiper_pre .swiper-slide-active .pre_tit_box {transform: translate(0px); opacity: 1; transition: 1s 0.3s;} /* */ .footer { width: 100%; left:0; right:0; margin:0 auto; max-width:500px; background-color: #fff; color: #000; padding:10vw 6vw 20vw 6vw; position: relative; z-index: 999; text-align: left;} .footer_logo_box { display: flex; justify-content: center; align-items: flex-start; } .footer_logo_box ul { display: flex; justify-content: flex-start; align-items: center; color: #000; margin-top: 1.25rem; width: 70%;} .footer_logo_box ul li { padding-left: 0.955rem; position: relative; } .footer_logo_box ul li:after { position: absolute; content:''; width: 1px; height: 0.8rem; background-color: #759cad; opacity: 0.8; right: 0; bottom: 0; top: -5px; margin: auto; } .footer_logo_box ul li span { font-size: 0.75rem; opacity: 0.7; margin-right: 0.2rem; font-weight: 400; } .footer_logo_box ul li:last-child:after { display: none; } .footer_logo_box ul li:first-child { padding: 0; padding-right: 0.955rem; } .footer_logo_box img {width:100%;} .footer>ul { display: flex; justify-content: center; align-items: flex-end; color: #000; margin-top: 1.25rem; } .footer>ul li { padding: 0 0.425rem; position: relative; font-size: 0.938rem; line-height: 100%; font-weight: 700; } .footer>ul li:first-child { padding-left : 0; } .footer>ul li span { font-size: 0.75rem; opacity: 0.7; margin-right: 0.2rem; font-weight: 400; } .footer>ul li:last-child:after { display: none; } .footer h3 { font-size: 3.1vw; margin-top:0vw; color: #fff; letter-spacing: -0.3vw; line-height: 200%; } .footer h3 span { color: #fff; } .footer h1 { font-size: 2.8vw; line-height: 160%; margin-top:5vw; color: #6e6e6e; letter-spacing: -0.3vw; } .footer h1 span { font-size: 2.8vw; line-height: 160%; margin-top:0vw; color: #b9b9b9; letter-spacing: -0.3vw; } .footer p {color: #6e6e6e; font-size: 2.8vw; margin-top: 5vw; opacity: 1; line-height: 160%; text-align: center;} .footer p span {color: #b9b9b9; } .footer h6 { line-height: 100%; margin-top: 5vw; font-size: 2.8vw; color: #6e6e6e; text-align: center;} .open_b {position:fixed; bottom: 0; width: 100%; left: 0; right: 0; margin: 0 auto; z-index:9999; max-width: 100%; } .footer_bt { width: 35vw; height: 2.75rem; line-height: 2.625rem; font-weight: 500; color: #767676; border: 1px solid #767676; text-align: left; position: absolute; top:11vw; right:6vw;} .footer_bt a { display: block; width: 100%; height: 100%; padding-left: 1rem; box-sizing: border-box; font-size:3.2vw; color:#777;} .footer_bt a::after { content: ''; width: 7px; height: 7px; border-right: 1px solid #767676; border-bottom: 1px solid #767676; transform: rotate(-45deg); position: absolute; right: 1rem; top: 0; bottom: 0; margin: auto; } .fix_bb {position:fixed; bottom: 0; width: 100%; height: 3rem; left: 0; right: 0; margin: 0 auto; z-index:9999; max-width: 100%; background-color: #9c6c5b; text-align: center; display: flex; justify-content: center; align-items: center;} .fix_bb a {color:#fff; font-size: 1.2rem; display: flex; justify-content: center; align-items: center;} .fix_bb a span {font-size: 1.8rem; font-weight: 600;} .contact_box1 { width:100%; padding:60px 40px; background-color: #004e71; } .contact_box2 { width:100%; } .w_color {color:#fff;} .contact_box1 h2 { font-size: 24px; line-height: 100%; margin-bottom: 15px; text-align: left; } .contact_box2 h2 { font-size: 24px; line-height: 100%; margin-bottom: 15px; text-align: left; font-weight: 500;} .contact_box1 h2 img { margin-right:10px; margin-top:-2px; } .contact_box2 h2 img { margin-right:10px; margin-top:-2px; } .contact_map_box { width: 100%; max-width: 527px; border: 1px solid #9e9e9e; } .contact_map_box img { width: 100%; } .contact_txt_box { width: 100%; max-width: 527px; margin: 25px 0;} .contact_txt_box h3 { display: inline-block; font-size: 32px; line-height: 100%; font-weight: 600; position: relative; margin-bottom: 60px; } .contact_txt_box h3:after { content:''; width: 100%; height: 1px; background-color: #000; position: absolute; left: 0; bottom: 0; } .contact_add { display: flex; justify-content: space-between; align-items: center; text-align: left; margin-top:30px;} .contact_add h4 { font-size: 22px; line-height: 100%; font-weight: 600; } .contact_add h4 span { font-size: 12px; line-height: 100%; padding:7px 15px 5px 15px; background-color: #6dadca; border-radius: 15px; margin-left: 8px; position: relative; top: -4px; } .contact_add p { font-size: 14px; line-height: 150%; margin-top: 8px; } .contact_top .contact_add { margin-top: 50px; } .contact_bt { display: flex; justify-content: flex-end; align-items: center; margin-right: 10px; } .contact_bt a { display: block; margin-left: 5px; } @media all and (max-width:300px){ .sec05_txtbox p {font-size:2.3vw;} } @media all and (min-width:375px){ .btn_set { } .swiper-pagination {} } @media all and (min-width:600px){ .int_box {top:200px;} .int_tt { width:50px;} .int_txt01 p { font-size: 18px; margin-bottom:100px; } .int_img {margin-top:270px;} .int_txt02 {top:150px;} .int_txt02 p { font-size: 18px; } .int_txt03 {top:150px;} /**/ .main_box {height:100vh;} .main_txt_box {top:100px;} .txt01 {/*letter-spacing: 1.0vw!important; */opacity: 0; font-size: 22px; margin-top: 0vw;} .main_txt_box h3 { font-size: 18px;} .main_txt01 {margin-top:20px;} .main_txt_box h2 {font-size: 22px; margin-top:30px;} .main_txt_box p { font-size: 15px; line-height:24px!important; letter-spacing: -0.5px!important; margin-top: 20px; letter-spacing: -1px; } .main_txt02 {margin-top:50px;} .main_bt_wrap {top:400px;} /**/ .main_sw {height:200px;} .swiper_msw {padding-top:50px;} .m_icon {margin-right:30px;} .swiper_msw h3 b {font-size: 24px;} .swiper_msw h3 {font-size: 18px;} .swiper_msw p {font-size: 15px; margin-top:20px;} /**/ .sec02 {height: 800px;} .sec02_txtbox {top:100px;} .sec02_txtbox h2 {font-size: 30px;} .sec02_txtbox h4 {font-size: 18px;} .sec02_txtbox p {font-size: 15px; margin-top:60px;} .sec02_img {height: 800px;} .mega_tit {left:-20px; bottom:-60px;} .mega_tit01 {font-size:200px;} .mega_tit02 {font-size:20px; margin-left:-10px; margin-top:130px;} /* sec03 */ .sec03 { height: 1750px; padding-top: 0px; /*margin-top: 100vh; */} .lo_tit_box {margin-top:80px;} .lo_tit_box h1 {font-size:22px; margin-top:20px;} .lo_txt h2 {font-size:18px;} .lo_txt h3 {font-size:30px;} .lo_txt p {font-size:15px;margin-top:20px;} .lo_con {top:70px;} .locon01 .lo_txt {top:90px;} .locon02 {margin-top:320px;} .locon02 .lo_txt {top:90px;} .locon03 {margin-top:550px;} .locon03 .lo_txt {top:90px;} .locon04 {margin-top:1020px;} .locon04 .lo_icon {top:100px;} /* sec05 */ .sec05 { height: 1155px; } .sec05_txtbox {position:absolute; z-index: 2; bottom: 90px;} .sec05_txt { padding-left:0px; } .sec05_tit_wrap {top:100px;} .sec05_tit_wrap h1 {font-size:30px;} .sec05_tit_wrap h3 {font-size:70px;} .sec05_txtbox h4{font-size:33px; line-height:40px; letter-spacing: -0.5px; } .sec05_txtbox p{font-size: 15px; line-height:30px; margin-top:30px; letter-spacing: -0.5px; } /*sec04*/ .sec04 { height: 1450px;} .sec04_tit {left:30px; top: 70px;} .sec04_txt1 { top:111px; left:40px;} .sec04_txt1 h1 {font-size: 35px; line-height:45px; letter-spacing: -2px; } .sec04_txt1 p {margin-top:40px; font-size: 15px; line-height: 28px; letter-spacing: -0.1px; } .sec04_logo {top: 400px; } .sec04_tit2 {right:30px; top:460px;} .sec04_txt2 { top:140px; right:40px;} .sec04_txt2 h1 {font-size:35px; line-height: 45px; letter-spacing: -2px; } .sec04_txt2 p {margin-top:40px; font-size:15px; line-height: 28px; letter-spacing: -0.5px; } .sec04_pjn {top:640px; right: 60px; font-size:26px;} .sec04_btn {bottom: 160px; width: 240px; height: 68px; border: 1px solid #fff; } .sec04_btn a {font-size: 18px; line-height: 68px; } /* unit */ .sec_unit { height: 1040px; } .unit_titbox {padding-top:70px;} .unit_titbox h1{font-size: 22px; line-height: 160%; letter-spacing: -0.5px; padding-left:40px;} .unit_titbox h2{ font-size: 70px; line-height: 110%;letter-spacing: -1px; padding-left:40px;} .unit_titbox p { font-size:15px; line-height: 220%; letter-spacing: -0.5px; margin-top: 30px; padding-left:40px;} .swiper2{margin-left:40px; margin-top:80px; } .unit_img{height: 498px; } .premium_content { width: 100%; height: 35.0rem; } .premium_txt_box { padding-left: 2.0rem; } .premium_content h5 { font-size: 0.75rem; margin-top: 2.25rem; } .premium_content h3 { font-size: 1.25rem; } .premium_content p { font-size: 0.875rem; } .sec_calendar {height:700px; display:none;} .calendar_wrap {height:700px;} .calendar_con { height: 110px; } .calendar_tit h2 { font-size: 70px; } .calendar_tit p { font-size:15px; } .calendar_con h4 { font-size: 25px; } .calendar_con p { font-size: 15px; } .sec_pr {height:1000px; margin-top: 100vh;} .pr_tit {top:80px; left:50px;} .pr_tit h1 {font-size:33px;} .pr_tit p {font-size:15px;} .pr_vd_box {top:200px;} .pr_thumb {top:500px; } .pr_thumb h5 {font-size:18px;} .pr_tabs {top:530px; } .pr_thumb h5 {margin-top:0; line-height:45px;} /* .thumb01 { left:50px; } .thumb02 { left:187px; } .thumb03 { right:50px; } */ /* footer */ .footer { padding:50px 40px 40px 40px; } .footer h3 {font-size: 15px; letter-spacing:0;} .footer h1 { font-size: 14px; line-height: 25px; letter-spacing: -0.5px; margin-top:40px; } .footer h1 span { font-size: 14px; line-height: 25px; margin-top:0vw; color: #b9b9b9; letter-spacing: -0.5px; } .footer p {color: #6e6e6e; font-size: 15px; margin-top:40px; line-height: 160%; padding-bottom:0px;} .footer_family {top:40px;} .footer h6 {font-size: 14px; margin-top:40px; } } @media all and (min-width:1000px){ .sec_pr {height:1300px; margin-top: 100vh;} .pr_tabs {top:700px; } .pr_tit {left:100px;} .sec03 {height:1910px;} .sec05 {height:1555px;} .sec_unit {height:1440px;} .premium_content {height:47rem;} .sec04 {height:1550px;} .sec04_logo {top:230px;} .sec04_tit2 {top:550px;} .sec04_pjn {top:740px;} } /**//**//**//**//**//**//**//**//**//**//**//**/ /* sub */ #all_wrap { width: 100%; height: auto; overflow: hidden; margin: auto; position: relative; font-family: 'Noto Sans KR', sans-serif; max-width:500px;} #container{ width: 100%; position: relative; left: 0; top: 0; z-index: 90; font-family: 'Noto Sans KR', sans-serif; } .sub { position: relative; width: 100%; left: 0; background-color:#fff; top:0; overflow: hidden; } /* */ #snb_wrap { width: 95%; height: auto; position: relative; left: 0; right: 0; margin: 0px auto 0 auto; z-index: 99; text-align: left; font-family: 'Noto Sans KR', sans-serif; margin-top:20px; } #snb { width: 100%; margin:0 auto; position:relative; z-index:199; } #snb:after {content:""; display:block; clear:both; } #snb>li {float:left; position:relative; height:30px;} #snb>li:nth-child(1) { width: 16%; } #snb>li:nth-child(1) img{position: absolute;top: 0;bottom: 0;left: 0;right: 0; margin: auto;} #snb>li:nth-child(2) { width: 42%; } #snb>li:nth-child(3) { width: 42%; } #snb>li:first-child + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%;} #snb>li:first-child + li + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%; margin-top:1px; text-transform: uppercase; } #snb>li:first-child + .ov {margin-left:0;} #snb .ov {margin-left:-1px;} #snb .ov > a { display:block; height:30px; line-height:30px; padding:0 47px 0 15px; font-size:10px; color:#555; letter-spacing:0em; border-left:1px solid #dcdcdc; letter-spacing:-0.075em; font-family: 'NanumBarunGothic'; /*font-family: 'Noto Sans KR', sans-serif; */ font-weight: 500; } #snb .ov ul {position:absolute;left:0;top:100%;min-width:100%;background:#fff;display:none;} #snb .ov ul li {border:1px solid #dcdcdc;margin-top:-1px; font-weight: 500; text-transform: uppercase; background-color: #fff; } #snb .ov ul li:first-child {margin-top:0;} #snb .ov ul li a {display:block;font-size:10px;color:#999;padding:11px 15px;white-space:nowrap;letter-spacing:-0.075em;} #snb .ov:hover ul {display:block;} #snb .ov ul li a:hover {background:#f3f3f3;color:#333;} #sub-top{ width: 100%; height: 60vw; max-width:500px; /*background: #101f3a; */ position: relative; left:0; right:0; margin:0 auto; margin-top: 0px; margin-bottom: 5vw; } .sub_top { position: relative; left: 0; top: 0; width: 100%; height: 15rem; z-index: 1; margin-top: 0; overflow: hidden; } .sub_top:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; } .sub_top_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: url(../img/sub_top2.jpg) center bottom no-repeat; background-size: cover; animation: sub_img 6s 0s ease-in-out both; } .sub_top_bg { position: absolute; animation: sub_top_bg 22s 0s linear infinite; } .sub_top_bg.bg01 { left: 9%; bottom: -30%; } .sub_top_bg.bg02 { right: -4%; bottom: -20%; } .sub_top_bg.bg03 { left: -5%; bottom: -35%; } .sub_top_bg.bg04 { left: 27%; bottom: -33%; } .sub_top_bg.bg05 { left: 13%; top: -28%; } .sub_top_txt { width: 100%; max-width: 1100px; height: 100%; margin: auto; position: absolute; left: 0; right: 0; top: 0%; display: flex; justify-content: center; align-items: center; z-index: 9; color: #fff; text-align: center; animation: sub_top_txt 1.0s 1s both; } .sub_top_txt h2 { font-family: 'copperplate'; font-size: 5vw; line-height: 100%; font-weight: 500; letter-spacing: 0rem; padding-left: 0rem; text-transform: uppercase; margin-top: -0rem; animation: sub_top_txt2 1.6s 1.8s both; } .sub_top_txt h2 span { color: #0aa6b0; } @keyframes sub_img { /* from { background: url(../img/sub_top.jpg) center bottom no-repeat; background-size: cover; } */ from { background: url(../img/main_img2.jpg) center bottom 90% no-repeat; background-size: cover; } to{ } } @keyframes sub_top_txt { from { opacity: 0; } to{ } } @keyframes sub_top_txt2 { from { } to{ letter-spacing: 5vw; padding-left: 1.5rem; } } /* .sub_top_bg{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height:60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg::after{content:''; background: url(../img/sub_top.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg01{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg01::after{ content:''; background: url(../img/sub-top01.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg02{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg02::after{ content:''; background: url(../img/sub-top02.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg03{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg03::after{ content:''; background: url(../img/sub-top03.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg04{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg04::after{ content:''; background: url(../img/sub-top04.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg05{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg05::after{ content:''; background: url(../img/sub-top05.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg06{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg06::after{ content:''; background: url(../img/sub-top06.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg07{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg07::after{ content:''; background: url(../img/sub-top07.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg08{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg08::after{ content:''; background: url(../img/sub-top08.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} .sub_top_bg09{ background-size: cover; width: 100%; left: 0; right: 0; margin: 0 auto; height: 60vw; overflow: hidden;position: relative; z-index: 9; } .sub_top_bg09::after{ content:''; background: url(../img/sub-top09.jpg) center center no-repeat; background-size: cover; width: 100%; height: 60vw; animation: sub-top 1.8s 0.2s both;position: absolute; top: 0;left: 0;} */ /* .sub_top_txt { width: 100%; position: absolute; left: 0; right: 0; top: 56%; margin: auto; z-index: 9; text-align: center; animation: sub_top_txt 1.2s 0.4s both; color: #3e515e;} .sub_top_txt h3 { font-family: 'copperplate', sans-serif; color: #fff; font-size: 5vw; line-height: 150%; font-weight: 400; animation: sub_top_txt 1.3s 1.2s both; letter-spacing: 0vw; transform: translateY(3vw); text-transform: uppercase; } */ .st-line { z-index: -1; height: 1px; background-color: #fff; width: 100%; position: absolute; bottom: -3px; animation: st 0.5s 0.2s both linear; } .st {position: relative; width: 100%; z-index: 2;} @keyframes st { from { width: 0%; } 50% { } to { } } @media all and (min-width:600px){ } #sub {width:100%;margin:0 auto; position:relative; text-align:center; font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:700;} #sub-tit {} #sub .sub-tit {font-size:28px; font-weight:400; padding-bottom:0px; line-height:90%; letter-spacing: -1.5px; margin-top: 40px; text-align:center; } .sub_tit_txt{ font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;font-weight:400; text-align: center; color: #888; font-size:2.5vw;margin: 2vw 0;} .sub-page{ width: 90%; text-align:center; margin:0 auto; margin-top:40px; opacity: 1; overflow: hidden; padding-bottom: 40px; } .sub-page>h2{ font-size:20px; color:#111; padding-top:28px; text-align: left; margin-bottom: 10px;} #sub-tit-line { width: 90%; height: 1px; margin: auto; margin-top: 17px; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; transform: rotate(45deg); } .sub_line { width: 1px; height: 35px; background-color: #404040; margin: auto; margin-top: 35px; } .sub-page img { width: 100%; } /*#sub-tit-line {margin-top:30px; width: 90%; margin-left: 5%; } */ #snb_wrap { width: 95%; height: auto; position: relative; left: 0; right: 0; margin: 0px auto 0 auto; z-index: 99; text-align: left; font-family: 'Noto Sans KR', sans-serif; margin-top:20px; } #snb { width: 100%; margin:0 auto; position:relative; z-index:199; } #snb:after {content:""; display:block; clear:both; } #snb>li {float:left; position:relative; height:30px;} #snb>li:nth-child(1) { width: 16%; } #snb>li:nth-child(1) img{position: absolute;top: 0;bottom: 0;left: 0;right: 0; margin: auto;} #snb>li:nth-child(2) { width: 42%; } #snb>li:nth-child(3) { width: 42%; } #snb>li:first-child + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%;} #snb>li:first-child + li + li > a {background:url(../img/snb-arr.gif) no-repeat 100% 50%; margin-top:1px; text-transform: uppercase; } #snb>li:first-child + .ov {margin-left:0;} #snb .ov {margin-left:-1px;} #snb .ov > a { display:block; height:30px; line-height:30px; padding:0 47px 0 15px; font-size:10px; color:#555; letter-spacing:0em; border-left:1px solid #dcdcdc; letter-spacing:-0.075em; font-family: 'NanumBarunGothic'; /*font-family: 'Noto Sans KR', sans-serif; */ font-weight: 500; } #snb .ov ul {position:absolute;left:0;top:100%;min-width:100%;background:#fff;display:none;} #snb .ov ul li {border:1px solid #dcdcdc;margin-top:-1px; font-weight: 500; text-transform: uppercase; background-color: #fff; } #snb .ov ul li:first-child {margin-top:0;} #snb .ov ul li a {display:block;font-size:10px;color:#999;padding:11px 15px;white-space:nowrap;letter-spacing:-0.075em;} #snb .ov:hover ul {display:block;} #snb .ov ul li a:hover {background:#f3f3f3;color:#333;} .snb_wrap { width: 100%; height: auto; text-align: center; } .snb { width: 100%; display: flex; justify-content: space-between; border-bottom: #e1e1e1 1px solid; } .snb li { font-family: 'Noto Sans KR', sans-serif; font-size: 12px; font-weight: 400; width: 100%; height: 45px; line-height: 45px; box-sizing: border-box; background: #fff;border-left: #e1e1e1 1px solid; } .snb li a { color: #000; display: block; } .snb li:nth-child(1) { border-left: none; } .snb .selected { background-color: #8b2332; } .snb .selected a { color: #fff; } .ready_p { width:80%; font-size: 1.4625rem; text-align: center; margin:3rem auto; background: #000e42; color:#fff; padding:1rem 1rem;} .sub_plan_top { width: 100%; position: relative; border: 2px solid #b0b0b0; margin-top: 10vw; opacity: 0;} .sub_plan_txt { text-align: left; opacity: 0;} .sub_plan_txt h4 { font-size: 4vw; font-weight: 400; margin-bottom: 3vw;} .sub_plan_txt h2 { font-family: "Nanum Myeongjo", serif; font-size: 7vw;} .sub_plan_txt p { font-size: 3.3vw; opacity: 0.7; font-weight: 400; margin-top: 3vw;} .sub_plan_txt.active { opacity: 1; transition: 1.0s 0.2s; } .sub_plan_top.active { opacity: 1; transition: 1.0s 0.4s; } .sub_over_bottom { opacity: 0;} .sub_over_txt_box { margin-top: 50px; /*display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; */ margin-bottom: 50px; text-align:left;} .sub_over_txt_box>div { width: 100%; margin-bottom: 50px; } .sub_over_txt_box>div h4 { font-size: 20px; line-height: 100%; font-weight: 600; border-bottom: 1px solid #383838; padding-bottom: 15px; } .sub_over_txt_box>div p { font-size: 15px; line-height: 170%; margin-top: 15px; font-weight: 500; opacity: 0.7;} .sub_over_txt_box h1{font-size:18px; color:#111; font-weight:500; margin-top:-30px; padding-bottom:5px;} .sub_over_txt_box table{border:1px solid #ddd; width:100%; font-size: 12.5px;font-weight:400; } .sub_over_txt_box table th{background:#4f372b; color:#fff; height:23px; border-bottom:1px solid rgba(255,255,255,0.6); width: 73px;text-align: center; letter-spacing: 2px; padding-left: 2px; } .sub_over_txt_box table th span { display: inline-block; margin: 0 3px; } .sub_over_txt_box table td{background:#fff; color:#222; height:23px; border-bottom:1px solid #ddd; padding: 14px 0px 14px 3%; letter-spacing: -1px; } .sub_over_top { width: 100%; height: auto; position: relative; } .over_tit_box h2 { font-size: 1.625rem; line-height: 140%; color: #262626; font-weight: 200; text-align: left; } .over_tit_box h2 b { font-weight: 700; } .over_txt_box { position: absolute; left: 0; top: 0; text-align: center; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center !important; z-index: 8; color: #000e42; transition: 0.8s; /*opacity: 0; transform: translate(31.25rem,-2.5rem); */} .over_txt_box.white { color: #fff; z-index: 9; } .over_txt_box h4 { font-size: 1.375rem; line-height: 100%; font-weight: 300; letter-spacing: 0.875rem; padding-left: 0.875rem; opacity: 0; transform: translateY(-1.875rem); } .over_txt_box h2 { font-family: "Nanum Myeongjo", serif; font-size: 1.6875rem; line-height: 100%; font-weight: 600; margin-top: 2rem; letter-spacing: 1.0625rem; padding-left: 1.0625rem; opacity: 0; transform: translateY(-1.875rem); } .over_txt_box h2 span { font-size: 2.8125rem; letter-spacing: 2rem; vertical-align: middle; display: inline-block; margin-left: 0.5rem; } .over_img_box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; clip-path: inset(20% 15% 0% 15% round 300px 300px 0 0); opacity: 1; } .over_vd_box { position: relative; left: 0; top: 0; width: 250%; opacity: 1; z-index: 1; overflow: hidden; } .over_vd { position: relative; top: 0; width: 100%; padding-bottom: 56.25%; height: 0; } .over_vd iframe { position: absolute; top: 44%; transform: translate(-74%,-63%); left: 50%; width: 130%; height: 130%; z-index: 2; opacity: 1; } .over_vd:before { content:''; width: 130%; height: 130%; position: absolute; top: 44%; transform: translate(-74%,-63%); left: 50%; background: url(../../sub/planning_bg.jpg) center no-repeat; background-size: cover; z-index: 1; } .over_logo {margin-top:40px;} .over_tit_box.box02 {margin-top:40px;} .over_tit_box p { font-size: 1.025rem; line-height: 138%; font-weight: 500; text-align: right; } .sub_over_top2 { width: 100%; height: auto; position: relative; padding: 0rem 0 0rem; } .over_tit_box2 h2 { font-size: 1.625rem; line-height: 140%; color: #262626; font-weight: 200; text-align: left; } .over_tit_box2 h2 b { font-weight: 700; } .over_txt_box2 h4 { font-size: 1.375rem; line-height: 100%; font-weight: 300; letter-spacing: 0.875rem; padding-left: 0.875rem; opacity: 0; transform: translateY(-1.875rem); } .over_txt_box2 h2 { font-family: "Nanum Myeongjo", serif; font-size: 1.6875rem; line-height: 100%; font-weight: 600; margin-top: 2rem; letter-spacing: 1.0625rem; padding-left: 1.0625rem; opacity: 0; transform: translateY(-1.875rem); } .over_txt_box2 h2 span { font-size: 2.8125rem; letter-spacing: 2rem; vertical-align: middle; display: inline-block; margin-left: 0.5rem; } .over_cg {margin-top:2rem;} .swiper_planning { margin: 0; padding: 0; } .swiper_planning .sub_planning_img { width: 100%; height: 80vw; max-height: 637px; } .sub_planning_img.img01 { background: url(../../sub/planning01.jpg) center no-repeat; background-size: cover; } .sub_planning_img.img02 { background: url(../../sub/planning02.jpg) center no-repeat; background-size: cover; } .sub_planning_img.img03 { background: url(../../sub/planning03.jpg) center no-repeat; background-size: cover; } .swiper_planning_thumb { width: 100%; margin: 0; padding: 0; } .swiper_planning_thumb .swiper-wrapper { display: flex; justify-content: flex-start; flex-direction: row; } .swiper_planning_thumb .swiper-slide { height: 100%; height: 7.3125rem; height: 17vw; max-height: 157px; cursor: pointer; border: none; overflow: hidden; margin-top: 1rem; position: relative; } .swiper_planning_thumb .sub_planning_img { width: 100%; height: 100%; filter: grayscale(1); } .swiper_planning_thumb .swiper-slide-thumb-active .sub_planning_img { opacity: 1; filter: grayscale(0); } .swiper_planning_thumb .swiper-slide-thumb-active:after { content:''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: 3px solid #000; box-sizing: border-box; } .sub_over_top { flex-wrap: wrap; } .swiper_planning { width: 100%; } .swiper_planning .sub_planning_img { height: 53vw; } .swiper_planning_thumb { width: 100%; } .swiper_planning_thumb .swiper-wrapper { justify-content: flex-start; flex-direction: revert; } .swiper_planning_thumb .swiper-slide { max-width: 118px; height: 15vw; } .swiper-button-next-planning { display: none; } .swiper-button-prev-planning { display: none; } .sub_over_bottom.active { opacity: 1; transition: 1.0s 0.4s; } /**/ .sub_location_wrap { width: 100%; /*max-width:500px; */margin: auto; height: auto; position: relative; text-align: left; padding-bottom: 1.5rem; } .sub_location_map_box { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; position: relative; box-sizing: border-box; opacity: 0; margin-top: 20px; } .sub_location_map_wrap { width: 100%; position: relative; margin-left: 0%; } .sub_location_map { width: 100%; height: 15.925rem; position: relative; overflow: hidden; background-color: #f1f4f6; } .sub_location_map_m { display: none; } .sub_location_move { width: 600%; height: 600%; margin-left: -250%; margin-top: -157%; cursor: move; display: flex; justify-content: center; align-items: center; } .sub_location_map img { width: 17%; } .sub_location_map.active img { transform: scale(1.3); } .sub_location_map.active2 img { transform: scale(1.8); } .sub_location_map_plus { /*width: 87px;*/ width: 40px; height: 40px; display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 10px; right: 10px; z-index: 9; } .sub_location_map_plus>div { width: 40px; height: 40px; border-radius: 100%; position: relative; cursor: pointer; } .sub_location_map_plus>div:before { content: ''; width: 30%; height: 1px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #fff; z-index: 9; } .sub_location_map_plus>div:after { content: ''; width: 1px; height: 30%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #fff; } .sub_location_map_plus>div:nth-child(1) { background-color: #000; } .sub_location_map_plus>div:nth-child(2) { background-color: #fff; border:1px #3d3d3d solid; display:none; } .sub_location_map_plus>div:nth-child(2):before { background-color: #000; } .sub_location_map_pop { width: 100%; height: 100%; position: fixed; left: 0; top: -100%; z-index: 999999999999999; transition: 0.8s; display: flex; justify-content: center; align-items: center; overflow: hidden; } .sub_location_map_pop>div { width: 80%; position: relative; } .sub_location_map_pop img { width: 100%; } .sub_location_map_pop_close { width: 30px; height: 30px; border-radius: 100%; position: absolute; background-color: #000; z-index: 9; right: 20px; top: 20px; transform: rotate(-45deg); cursor: pointer; } .sub_location_map_pop_close:before { content: ''; width: 40%; height: 1px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #fff; z-index: 9; } .sub_location_map_pop_close:after { content: ''; width: 1px; height: 40%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #fff; } .sub_location_map_pop_bg { width: 100%; height: 100%; position: fixed; left: -100%; top: 0; z-index: 9999998; background-color: #000; opacity: 0.7; transition: 0.6s 0.2s } .sub_location_map_pop.active { top: 0; transition: 0.8s 0.2s; } .sub_location_map_pop_bg.active { left: 0; transition: 0.6s 0s; } .sub_location_tit { text-align: left; opacity: 0; transform: translateX(20vw);} .sub_location_tit p { font-size: 3.5vw; font-weight: 400;} .sub_location_tit h3 { font-size: 6vw; line-height: 120%; font-weight: 300; margin-top: 0.875rem; } .sub_location_tit h3 b { font-weight: 700; } .sub_location_tit h3 span { color: #2785a3;} .sub_location_bottom { width: 100%; position: relative; } .sub_location_bottom>div { width: 100%; text-align: left;} .sub_location_bottom .location_bottom_txt { position: relative; margin-top: 6vw; opacity: 0;} .sub_location_bottom .location_bottom_txt h4 { font-size: 5.6vw;} .sub_location_bottom .location_bottom_txt h4 span { color: #2785a3;} .sub_location_bottom .location_bottom_txt p { font-size: 3.2vw; font-weight: 400; margin-top: 1vw;} .sub_loca_icon { margin: 6vw 0 7vw;} .location_bottom_txt:after { content:''; width: 100%; height: 1px; background-color: #a0a0a0; position: absolute; left: 0; right: 0; bottom: 0; margin-top: 5vw; opacity: 0.7;} .location_bottom_txt:nth-child(4):after { content:''; display: none;} .sub_location_bottom img { width: revert; } /* .sub_location_img_box { width: 100%; height: 400px; transform: translateX(-5rem); opacity: 0; } .sub_location_img {position: absolute;} .sub_location_img.img01 { width:60%; top:0; left:0;} .sub_location_img.img02 { width:35%; top:0; right:0;} .sub_location_img.img03 { width:35%; top:8.8rem; left:0; } .sub_location_img.img04 { width:60%; top:16.5rem; right:0; } .sub_location_txt_box { text-align: left; color: #2c2928; transform: translateX(5rem); opacity: 0; display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; gap: 3.25rem 0; margin-top:3rem; } .sub_location_txt_box h5 { font-size: 0.75rem; line-height: 100%; color: #b69481; font-weight: 500; letter-spacing: 0; } .sub_location_txt_box h2 { font-size: 1.5rem; line-height: 100%; font-weight: 300; margin-top: 0.25rem; } .sub_location_txt_box h2 b { font-weight: 700; } .sub_location_txt_box p { font-size: 0.775rem; line-height: 178%; font-weight: 500; opacity: 0.7; margin-top: 1.5rem; } */ .location_logo { position: absolute; left: 0rem; right: 0; top: 0; bottom: 0; margin: auto; } .sub_location_map_box.active { opacity: 1; transition: 1.0s 0.2s; } .sub_location_txt_box { transform: translate(0); opacity: 1; transition: 1.0s 0.2s; } .sub_location_img_box { transform: translate(0); opacity: 1; transition: 1.0s 0.2s; } .sub_location_tit.active { transform: translate(0); opacity: 1; transition: 1.0s 0.2s; } .location_bottom_txt.active { opacity: 1; transition: 1.0s 0.2s; } .sub_location_txt_box { transform: translate(0); opacity: 1; transition: 1.0s 0.2s; } .sub_location_img_box { transform: translate(0); opacity: 1; transition: 1.0s 0.2s; } /* */ .sub_premium_wrap { width: 100%; margin: auto; position: relative; text-align: left; margin-bottom: 5.25rem; } .sub_premium_wrap>div { width: 100%; text-align: left; position: relative;} .sub_pre_cont { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10vw 5.7vw; border: 1px solid rgba(0, 0, 0, 0.4); margin-top: 6vw; opacity: 0;} .sub_pre_cont:first-child { margin-top: 0;} .sub_premium_wrap .sub_pre_txt { position: relative; } .sub_premium_wrap .sub_pre_txt h4 { font-size: 5.6vw;} .sub_premium_wrap .sub_pre_txt h4.c { color: #4a99b2;} .sub_premium_wrap .sub_pre_txt p { font-size: 3vw; font-weight: 400; margin-top: 2.5vw; line-height: 180%; opacity: 0.7;} .sub_pre_icon { width: 9vw;} .sub_pre_icon img { width: 100%; height: auto;} .sub_pre_cont.active { opacity: 1; transition: 1.0s 0.2s; } /**/ .premium_tit2 { justify-content: center; transform: translateY(-3rem); } .premium_tit2 h5 { font-size: 1.6rem; margin-right: 1.25rem; margin-bottom: 0.125rem; } .premium_tit2 h2 { font-size: 1.6rem; letter-spacing: 0.325rem; } .premium_box { width: 100%; margin: auto; gap: 2.25rem; margin-top: 2.5rem; transform: translateY(3rem); } .premium_content2 { width: calc(100% - 0rem); max-width: 320px; margin: auto; border-radius: 0 !important; border: 1px solid #c2c2c2; box-sizing: border-box; text-align: left; transition: 0.3s; overflow: hidden; background-color: #fff; margin:2.25rem auto;} .premium_content2>div { width: 100%; height: 100%; padding: 3.375rem 0 3.375rem 2.375rem; color: #2c2928; transition: 0.3s; box-sizing: border-box; } .premium_content2 h2 { font-size: 1.5rem; line-height: 130%; margin-top: 0.5rem; font-weight: 300; letter-spacing: -0.125rem; } .premium_content2 h2 b { font-weight: 900; } .premium_content2 p { font-size: 0.85rem; line-height: 178%; margin-top: 1.375rem; opacity: 0.7; font-weight: 500; } .premium_content2:hover>div { background-color: transparent; color: #2c2928; } .sub_premium_wrap2 { width: 100%; max-width: 1314px; margin: auto; position: relative; text-align: left; margin-bottom: 3.5rem; } .sub_premium_bg { position: absolute; left: -13%; bottom: -56%; z-index: -1; opacity: 0; } .sub_premium_wrap2.active .sub_premium_bg { opacity: 1; transform: translate(0); transition: 1.0s 0s; } .sub_premium_wrap2.active .premium_box2 { opacity: 1; transform: translate(0); transition: 1.0s 0s; } .sub_premium_wrap2 .premium_content2 h2 {font-size: 1.1625rem;} .sub_premium_wrap2 .premium_content2 p {font-size: 0.85rem;} .sub_premium_tit_box.box01.active { opacity: 1; right: -22.5rem; transition: 1.2s 0.2s; } .sub_premium_tit_box.box02.active { opacity: 1; top: 57rem; transition: 1.2s 0.7s; } .sub_premium_content.active { opacity: 1; transform: translate(0); transition: 1.0s 0.2s; } .sub_premium_wrap2 { max-width: 389px; margin: auto; margin-bottom: 4.75rem; } .premium_box2 { gap: 2.25rem 0; } /**/ .sub_contact_wrap { width: 100%; margin: auto; position: relative; text-align: left; color: #010101; } .sub_contact_wrap h2 { font-size: 1.5rem; line-height: 100%; margin-bottom: 0.9375rem; font-weight: 500; } .sub_contact_wrap h2 img { margin-right: 0.625rem; margin-top: 0px; } .sub_contact_top { width: 100%; } .sub_contact_top>div { width: 100%; } .sub_contact_bottom { width: 100%; margin-bottom: 4.375rem; opacity: 0; } .sub_contact_bottom>div { width: 100%; } .sub_contact_map_box { width: 100%; height: 294px; border: 1px solid #9e9e9e; } .sub_contact_map_box img { width: 100%; } .sub_contact_txt_box { width: 100%; margin: 1.5625rem 0; } .sub_contact_txt_box h3 { display: inline-block; font-size: 2rem; line-height: 100%; font-weight: 700; position: relative; margin-bottom: 3.75rem; } .sub_contact_txt_box h3:after { content:''; width: 100%; height: 1px; background-color: #000; position: absolute; left: 0; bottom: 0; } .sub_contact_box.box2 { margin-top:3rem;} .sub_contact_add {/* display: flex; justify-content: space-between; align-items: center; */ margin-top:2rem;} .sub_contact_add h4 { font-size: 1.375rem; line-height: 100%; font-weight: 600; } .sub_contact_add p { font-size: 0.9375rem; line-height: 150%; margin-top: 0.5rem; font-weight: 400; } .sub_contact_top .sub_contact_add { margin-top: 3.125rem; } .sub_contact_bt { display: flex; justify-content: flex-start; align-items: center; } .sub_contact_bt a { display: block; margin-left: 0.3125rem; margin-top: 0.5rem;} .sub_contact_bt a:first-child { margin-left: 0;} #map { position: relative; width: 100%; height: 100%; } #map2 { position: relative; width: 100%; height: 100%; } .map_marker { font-family: 'Pretendard'; width: auto; height: 36px; border: 2px solid #000e42; background-color: #fff; border-radius: 25px; text-align: center; display: flex; justify-content: center; align-items: center; padding: 0 15px; position: relative; box-sizing: border-box; } .map_marker p { font-size: 13px; line-height: 100%; color: #000; font-weight: 600; } .map_marker:after { content:''; width: 0px; height: 0px; border-top: 8px solid #000e42; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; left: 0; right: 0; bottom: -8px; margin: auto; } /*.map_marker.mk01 { width: 82px; z-index: 9; }*/ /* */ .sub_contact_bottom.active { opacity: 1; transition: 1.0s 0s; } /**/ .vr_btn {display: flex; justify-content: center; align-items: center; gap:4vw; margin-top:4vw;} .vr_btn div { width:100%; height:40px; background: #9e6951; display: flex; justify-content: center; align-items: center; color:#fff; border-radius:1000px;} .vr_btn div a { display:block; width:100%; color:#fff; font-size:0.775rem; font-weight: 500;} /**/ .sub_gongo_wrap { width: 100%; max-width: 1100px; margin: auto; height: auto; position: relative; color: #000; } .sub_gongo_top { width: 100%; height: auto; overflow: hidden; } .sub_gongo_img_box { width: 100%; height: 220px; background: url(../../sub/planning01.jpg) center no-repeat; background-size: cover; } .sub_gongo_txt_box { width: 100%; height: 100%; margin-top: 5%; text-align: left; } .sub_gongo_txt_box>div { width: 100%; height: 50%; border: 1px solid #b2b2b2; box-sizing: border-box; margin-bottom: 5%; position: relative; } .sub_gongo_txt_box>div>a { width: 100%; height: 100%; display: block; box-sizing: border-box; padding: 30px 30px 40px; } .sub_gongo_txt_box>div:nth-child(2) { margin-bottom: 0; } .sub_gongo_logo {transform: scale(0.38); transform-origin: left center; margin-left: 2px;} .sub_gongo_txt_box h2 { line-height: 100%; font-size: 20px; margin-top: 10px; margin-left: -2px; } .sub_gongo_txt_box p {line-height: 167%; opacity: 0.7; font-size: 11px; margin-top: 20px;} .sub_gongo_txt_box>div:nth-child(2) { margin-bottom: 10%; } .sub_gongo_bt { width: 35px; height: 35px; background-color: #e3e3e3; position: absolute; right: 22px; bottom: 22px; border-radius: 100%; } .sub_gongo_bt>div {width: 25px; height: 17px; position: absolute; left: -6px; top: 0; bottom: 0; margin: auto; transition: 0.4s; } .sub_gongo_bt>div:before { content:''; width: 100%; height: 1px; background-color: #000; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; } .sub_gongo_bt>div:after { content:''; width: 6px; height: 6px; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(-45deg); transform-origin: center; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; } .sub_gongo_notice { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 30px; } .sub_gongo_notice a { width: 13%; display: block; } .sub_gongo_notice img:nth-child(1) { width: 59%; } .sub_gongo_notice a img:nth-child(1) { width: 100%; } .sub_gongo_notice img:nth-child(3) { width: 28%; } .sub_gongo_txt_box>div>a:before { content:''; width: 0; height: 1px; background-color: #000; position: absolute; left: -1px; top: -1px; transition: 0.4s; } .sub_gongo_txt_box>div>a:after { content:''; width: 1px; height: 0; background-color: #000; position: absolute; right: -1px; top: -1px; transition: 0.4s; } .sub_gongo_txt_box>div:before { content:''; width: 0; height: 1px; background-color: #000; position: absolute; right: -1px; bottom: -1px; transition: 0.4s; } .sub_gongo_txt_box>div:after { content:''; width: 1px; height: 0; background-color: #000; position: absolute; left: -1px; bottom: -1px; transition: 0.4s; } .sub_gongo_txt_box>div:hover>a:before { width: calc(100% + 2px); } .sub_gongo_txt_box>div:hover>a:after { height: calc(100% + 2px); } .sub_gongo_txt_box>div:hover:before { width: calc(100% + 2px); } .sub_gongo_txt_box>div:hover:after { height: calc(100% + 2px); } .sub_gongo_txt_box>div:hover .sub_gongo_bt>div { left: -3px; } .sub_gongo_notice { display: none; } .sub_gongo_txt_box>div:hover .sub_gongo_bt>div { left: -3px; } .sub_ori { width: 100%; max-width: 1100px; margin: auto; background-color: #f3f3f3; text-align: left; padding: 1.25rem 1.417rem; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; margin-top:2rem; } .sub_ori>div { width: 2.917rem; height: 2.917rem; min-width: 2.917rem; border-radius: 100%; background: #04122f url(../../sub/ori.png) center no-repeat; margin-right: 1.167rem; background-size: 0.3rem; } .sub_ori ul { } .sub_ori ul li { font-size: 0.7rem; line-height: 155%; color: #383838; font-weight: 400; letter-spacing: -0.5px; position: relative; } .sub_ori ul li:before { content:'·'; position: absolute; left: -0.5rem; margin-right: 0.167rem; } .sub_ori ul.ori2 li { margin-left: 1.25rem; } .sub_ori ul.ori2 li:first-child { margin-left: 0; font-size: 0.917rem; margin-bottom: 0.167rem; } .sub_ori ul.ori2 li:first-child:before { display: none; } #container{ padding-left:0px; padding:5px 0 100px 0;} ul.tabs { margin: 0; padding: 0; float: left; list-style: none; width: 100%; font-size:13px; border-left: 1px solid #ddd; height:40px; } ul.tabs li { margin-bottom:-1px; color:#444; float: left; text-align:center; cursor: pointer; width:16.5%; height: 39px; line-height: 39px; border: 1px solid #ccc; border-left: none; font-weight: 600; background: #eee; overflow: hidden; position: relative; } ul.tabs li.active { color:#f8981c; background: #FFFFFF; border-bottom: 1px solid #FFFFFF; } ul.tabs li.selected { color:#fff; background: #FFFFFF; border-bottom: 1px solid #FFFFFF; } .tab_container { border: none; border-top: none; clear: both; float: left; width: 100%; background: #FFFFFF;max-width:900px; } .tab_content { position: absolute; margin:40px 0px 0px 0px; padding-right:60px; font-size: 1em; display: none; } .tab_container .tab_content ul { width:100%; margin:0px; padding:0px; } .tab_container .tab_content ul li { padding:5px; list-style:none; } #container { width: 1100px; margin: 0 auto; } #container2{ padding-left:0px; padding:5px 0 100px 0;} ul.tabs2 { font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif; margin: 0; padding: 0; float: left; list-style: none; width: 100%; font-size:14px; height:40px; display: flex; justify-content: space-between; margin-bottom: 2rem; } ul.tabs2 li { margin-bottom:-1px; color:#232222; margin-left:1%; float: left; text-align:center; cursor: pointer; width:18.4%; height: 45px; line-height: 45px; border: 1px solid #e9eaec; font-weight: 400; background: #fff; overflow: hidden; position: relative; width: 100%; } ul.tabs2 li:first-child { margin-left: 0;} ul.tabs2 li.selected, ul.tabs li.selected:hover { position: relative; top: 0px; color:#707070; background: #002f7b ; border: 1px solid #002f7b; } ul.tabs2 li.selected a, ul.tabs li.selected a:hover { color:#fff;} ul.tabs2 li a { font-size:12px; font-weight:600; color:#707070; text-decoration: none; display: block !important; line-height: 41px !important; } ul.tabs2 li.selected a:hover { text-decoration: none; } ul.tabs2 li.selected { color:#fff; } ul.tabs2 li.active { color:#fff; } .tab_container2 { border: none; border-top: none; clear: both; float: left; width: 100%; background: #FFFFFF;max-width:900px; } .tab_content2 { position: absolute; margin:40px 0px 0px 0px; padding-right:60px; font-size: 1em; display: none; } .tab_container2 .tab_content2 ul { width:100%; margin:0px; padding:0px; } .tab_container2 .tab_content2 ul li { padding:5px; list-style:none; } #container2 { width: 1100px; margin: 0 auto; } @media all and (min-width:600px){ .sub_top_txt { top:175px; } .sub_top_bg {height:400px;} #sub-top {height:400px;} .sub_top_txt h3 {font-size:30px;} } ul.tabs3 { font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif; margin: 0; padding: 0; float: left; list-style: none; width: 100%; font-size:14px; height:40px; } ul.tabs3 li { margin-bottom:-1px; color:#232222; margin-left:0px; float: left; text-align:center; cursor: pointer; width:18.4%; height: 45px; line-height: 45px; border: 1px solid #e9eaec; font-weight: 400; background: #e9eaec; overflow: hidden; position: relative; } ul.tabs3 li.selected, ul.tabs3 li.selected:hover { position: relative; top: 0px; color:#707070; background: #009cac ; border: 1px solid #009cac; } ul.tabs3 li.selected a, ul.tabs3 li.selected a:hover { color:#fff;} ul.tabs3 li a { font-size:12px; font-weight:600; color:#707070; text-decoration: none; display: block !important; line-height: 41px !important; } ul.tabs3 li.selected a:hover { text-decoration: none; } ul.tabs3 li.selected { color:#fff; } ul.tabs3 li.active { color:#fff; } /**/ .summary_img_box { width: 100%; /*height: 620px;*/ height: 350px; position: relative; overflow: hidden; } .summary_img { width: 100%; height: 100%; position: absolute; left: 0; top: 0;/*top: 20%;*/ background: #555 url(../../sub/m/planning.jpg) center bottom no-repeat; background-size: cover; z-index: 2; animation: summary_img 1.2s 0.5s both;} .summary_img_txt { position: absolute; left: 6%; top:4%; color: #383838; text-align: left; font-family: 'felixti'; z-index: 9; } .summary_img_txt h4 { font-size: 4vw; line-height: 180%; letter-spacing: -2px; opacity:0.6; margin-left:8vw; animation: summary_txt2 1.2s 1s both;} .summary_img_txt h1 { font-family: 'Nanum Myeongjo', serif; font-size: 7vw; line-height: 130%; letter-spacing: -2px; font-weight: 500; margin-top:20%; margin-left:8vw; animation: summary_txt2 1.2s 1s both;} .summary_img_txt div { width: 1px; height:180px; background-color:#000; position:absolute; animation: summary_txt 1.2s 0.2s both;} .summary_txt_box { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; gap: 3.125rem 5%; text-align: left; margin-top: 4.5rem; animation: summary_img 1.2s 0.5s both;} .summary_txt_box>div { width: 30%; } .summary_txt_box h3 { font-size: 1.3rem; line-height: 100%; font-weight: 600; color: #383838; border-bottom: 1px solid #383838; padding-bottom: 1rem; } .summary_txt_box p { font-size: 1rem; line-height: 180%; margin-top: 1.5rem; } @keyframes summary_img { from { opacity: 0; transform: translateY(30px); } to{ } } @keyframes summary_txt2 { from { opacity: 0; transform: translateX(-30px); } to{ } } @keyframes summary_txt { from { height:0px; } to{ } } /**/ .brand_pop_wrap { width: 100%; height: 100%; position: fixed; left: 0; top: -100%; z-index: 999999999999; display: flex; justify-content: center; align-items: center; color: #000; transition: 0.8s 0s; } .brand_pop_wrap>div { width: 90%; max-height: 500px; overflow: scroll; max-width: 1100px; background-color: #fff; padding: 30px 20px; } .brand_pop_wrap>div::-webkit-scrollbar { display: block; width: 7px; height: 100%; background-color: #f3f3f3; } .brand_pop_wrap>div::-webkit-scrollbar-thumb { width: 100%; background-color: #cacaca; border-radius: 20px; } .brand_pop.pop02 { display: none; } .brand_pop.pop03 { display: none; } .brand_pop_tit { font-size: 22px; line-height: 100%; font-weight: 500; text-align: center; position: relative; } .brand_close { width: 35px; height: 35px; position: absolute; right: -10px; top: -15px; cursor: pointer; } .brand_close:before { content: ''; width: 1px; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #000; transform: rotate(-45deg); } .brand_close:after { content: ''; width: 1px; height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: #000; transform: rotate(45deg); } .brand_pop_wrap table { width: 100%; margin-top: 20px; border: 1px solid #555; text-align: center; } .brand_pop_wrap table tr { } .brand_pop_wrap table tr:first-child td { padding: 6px 0 !important; text-align: center !important; color: #fff; background-color: #555; font-size: 11px; } .brand_pop_wrap table tr td { padding: 9px 0; position: relative; font-size: 12px; line-height: 130%; } .brand_pop_wrap table tr td:before { content:''; width: 100%; position: absolute; height: 1px; background-color: #ddd; left: 0; bottom: 0; } .brand_pop_wrap table tr td:after { content:''; width: 1px; position: absolute; height: 100%; background-color: #ddd; right: 0; bottom: 0; } .brand_pop_wrap table tr td:nth-child(1) { width: 67%; text-align: left; padding: 9px 10px; } .brand_pop_wrap table tr td:nth-child(2) { width: 14%; } .brand_pop_wrap table tr td:nth-child(3) { width: 19%; } .brand_pop_wrap table tr td:last-child:after { display: none; } .brand_pop_wrap table tr:last-child td:before { display: none; } .brand_pop_bg { width: 100%; height: 100%; position: fixed; left: -100%; top: 0; z-index: 999999998; background-color: #000; opacity: 0.7; transition: 0.6s 0.2s; } .brand_pop_wrap.active { top: 0; transition: 0.8s 0.2s; } .brand_pop_bg.active { left: 0; transition: 0.6s 0s; } /**/ .sub_complex_wrap { width: 100%; height: 395vw; position: relative; } .sub_complex_wrap h1 { font-family: 'copperplate'; font-size: 14vw; line-height: 100%; opacity: 0.11; position: absolute; right: -4vw; transform: translate(80%,30%) rotate(90deg); transform-origin: left bottom; text-align: left; font-weight: 400; top: 78vw; } .sub_complex_wrap .sub_complex_bg { position: absolute; bottom: 58vw; width: 36%; right: 0;} .sub_cont_tit { width: 100%; text-align: cetner; opacity: 0;} .sub_cont_tit h4 { font-size: 5vw; font-weight: 100;} .sub_cont_tit h2 { font-size: 8vw; font-weight: 800;} .sub_comp_contbox { margin-top: 2rem;} .sub_comp_cont { width: 100%; height: 100%; position: relative; opacity: 0;} .sub_comp_cont h2 { font-family: 'antro'; transform: rotate(-4deg); text-align: left; position: absolute; font-size: 8.8vw; } .sub_comp_cont:nth-child(1) h2 { top: 6vw; margin-left: 15%; } .sub_comp_cont:nth-child(2) h2 { top: 93vw; z-index: 3; margin-left: 7%;} .sub_comp_cont:nth-child(3) h2 { left: 5vw; margin-top: 5vw;} .sub_comp_cont:nth-child(2) { margin-top: 25vw;} .sub_comp_cont:nth-child(3) { margin-top: 60vw;} .comp_txtbox { width: 49vw; height: 85vw; text-align: left; box-sizing: border-box; position: relative; } .comp_txtbox>div:last-child { margin-top: 5vw;} .comp_txtbox h6 { font-family: 'Nanum Myeongjo', serif; font-size: 5vw; color: #462b2e; font-weight: 600;} .comp_txtbox p { font-size: 2.8vw; font-weight: 400; opacity: 0.7; margin-top: 2.5vw;} .comp_txtbox.txt_box01 { padding: 28vw 6vw 0; background-color: #eee9d9; transform: translateY(3rem);} .comp_txtbox.txt_box02 { height: 70vw; padding: 6vw 6vw 28vw; background-color: #eeeeee; position: absolute; right: 5vw; margin-top: 42vw; z-index: 2; transform: translateY(-3rem);} .comp_txtbox.txt_box03 { width: 45vw; height: 105vw; padding: 6vw 6vw 28vw; background-color: #462b2e; left: 0; color: #fff; transform: translateY(-3rem); } .comp_txtbox.txt_box03 h6 { color: #fff;} .comp_imgbox { position: absolute; top: 0; width: 46vw; } .comp_imgbox.imgbox01 { right: 5vw; margin-top: 22vw; transform: translateY(-3rem);} .comp_imgbox.imgbox02 { position: relative; left: 0; transform: translateY(3rem); width: 60vw;} .comp_imgbox.imgbox03 { width: 65vw; margin: 62vw 0 0 15vw; transform: translateX(-3rem);} .comp_imgbox img { width: 100%; height: auto;} .sub_complex_wrap.active .sub_cont_tit { opacity: 1; transition: 0.8s 0.2s; } .sub_comp_cont.active { opacity: 1; transition: 0.8s 0.2s; } .sub_comp_cont.active .comp_txtbox.txt_box01 { transform:translate(0); transition: 1.0s 0.2s; } .sub_comp_cont.active .comp_imgbox.imgbox01 { transform:translate(0); transition: 1.0s 0.2s; } .sub_comp_cont.active .comp_txtbox.txt_box02 { transform:translate(0); transition: 1.0s 0.2s; } .sub_comp_cont.active .comp_imgbox.imgbox02 { transform:translate(0); transition: 1.0s 0.2s; } .sub_comp_cont.active .comp_txtbox.txt_box03 { transform:translate(0); transition: 1.0s 0.2s; } .sub_comp_cont.active .comp_imgbox.imgbox03 { transform:translate(0); transition: 1.0s 0.2s; } /* */ .sub_event_wrap { width: 100%; max-width: 1100px; margin: auto; } .sub_event_wrap>div { width: 100%; } .sub_event_wrap .tabs2 { margin-top: 1.5rem; margin-bottom: 0; } .sub_event_tit { width: 100%; position: relative; text-align: center; background-color: #f3f3f3; padding: 3.5rem 0 3rem; padding: 0; background: none; } .sub_event_tit img { width: 100%; } /* .sub_event_tit img { width: 16.875rem; } */ .sub_event_tit p { font-size: 0.75rem; line-height: 160%; opacity: 0.8; margin-top: 1.75rem; } /* .sub_event_tit h2 { font-size: 1.5rem; line-height: 100%; margin-top: 4.25rem; font-weight: 500; } .sub_event_tit h2 a { display: flex; justify-content: center; align-items: center; gap: 0 0.625rem; } .sub_event_tit h2 span { font-family: 'lexend'; font-size: 2.625rem; } */ .sub_event_wrap table { width: 100%; display: flex; margin-top: 1.5rem; } .sub_event_wrap table col { display: none !important; } .sub_event_wrap table tbody { display: flex; flex-wrap: wrap; gap: 0 2%; } .sub_event_wrap table tr { width: 23.5%; display: flex; justify-content: center; align-items: center; } .sub_event_wrap table tr td { font-size: 0.75rem; font-weight: 400; line-height: 100%; border-bottom: 1px solid #ccc; padding: 11px 0; text-align: center; display: inline-block; position: relative; } .sub_event_wrap table tr td:nth-child(1) { width: 40%; } .sub_event_wrap table tr td:nth-child(1)::after { content: ''; width: 1px; height: 30%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background-color: #ccc; } .sub_event_wrap table tr td:nth-child(2) { width: 60%; } .sub_event_wrap table tr:nth-child(-n+4) { border-top: 2px solid #000e42; } .sub_event_wrap table tbody { gap: 0 4%; } .sub_event_wrap table tr { width: 48%; } .sub_event_wrap table tr:nth-child(-n+4) { border-top: revert; } .sub_event_wrap table tr:nth-child(-n+2) { border-top: 2px solid #241915 }