#cursor { position: fixed; z-index: 100; left: 0; top: 0; pointer-events: none; will-transfrm: transform; } .cursor__inner { width: 25px; height: 25px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient( rgba(231,196,166,0.8), rgba(240,222,208,0.7)); transition: all .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s cubic-bezier(0.16, 1, 0.3, 1); } .hide .cursor__inner { opacity: 0; width: 2.5vw; height: 2.5vw; } .popup-youtube{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999999; display: none;} .popup-youtube .bg{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);} .popup-youtube .youtube-box{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: auto; transform: translate3d(-50%,-50%, 0) scale(0.3); opacity: 0;} .popup-youtube .youtube-box .movbox{ position: relative; padding-top: 55.75%;} .popup-youtube .youtube-box .movbox iframe{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;} #wrap.over .popup-youtube .youtube-box{ transform: translate3d(-50%, -50%, 0) scale(1); transition: all 0.8s 0.3s ease-in-out !important; opacity: 1;} #fullpage > section{ width: 100%; height: 100vh; position: relative; overflow: hidden;} #full_navi{ position: fixed; right: 75px; transform:translateY(-50%); top: 56%; z-index: 99; display: flex; flex-direction: column; align-items: center;} #full_navi .home{ cursor:pointer; } #full_navi .full-arrow{ } #full_navi .full-arrow p{ cursor:pointer; color:#fff; } #full_navi .line{ position: relative; width: 1px; height: 180px; background: rgba(255,255,255,0.2); overflow: hidden;} #full_navi .line span{ position: absolute; top: 0; left: 0; width: 1px; background: #fff; height: 22.5px; transition:all 0.5s; } #full_navi .txt{ color:#fff; font-family: 'Nanum Myeongjo', serif; font-weight: bold; font-size:14px;} #full_navi .current{ margin: 5px 0 15px;} #full_navi .total{ margin: 15px 0 8px;} #full_navi.black .home img{ filter: invert(1);} #full_navi.black .full-arrow p{ color:#000; } #full_navi.black .line{ background: #eee;} #full_navi.black .line span{ background: #333;} #full_navi.black .txt{ color:#333; } #full_navi.half .total.txt{ color:rgba(255,255,255,0.5)} #full_navi.half .line{ background: #EEEEEE;} #full_navi.half .line span{ background:#585858;} #full_navi.half p i{ color:#fff; } #fullpage .visual{ background: url("/img/main/main_bg.jpg") 50% 50% no-repeat; background-size:cover; } #fullpage .visual .txtBox{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; text-align: center; overflow: hidden;} #fullpage .visual .txtBox h1{ font-family: 'Nanum Myeongjo', serif; font-size: 102px; color:#fff; margin-bottom: 40px; opacity: 0; white-space: nowrap; } #fullpage .visual .txtBox p{ font-size:25px; color:#fff; font-weight: 200; line-height: 1.6; opacity: 0;} #fullpage .visual .txtBox p span{ font-weight: 600; } #fullpage .visual .scroll{ font-family: 'Lora', serif; font-size:15px; color:#fff; position: relative; position: absolute; transform:translateX(-50%); left: 50%; bottom: 65px; } #fullpage .visual .scroll p{ margin-bottom: 13px;} #fullpage .visual .scroll i{ position: absolute; transform:translateX(-50%); left: 50%; animation: scrolldown 1s ease infinite; } #fullpage .visual.on .txtBox h1{ animation: fadeIn 1s 0.3s both} #fullpage .visual.on .txtBox p{ animation: fadeUp 1s 0.5s both} #fullpage .result{} #fullpage .result .font160{ position: absolute; bottom: -50px; left: -10px; font-family: 'Lora', serif; color:rgba(196,154,108,0.1); z-index: 1; letter-spacing: -2.5px; } #fullpage .result .ctnBox{ display:flex; height: 100%;} #fullpage .result .ctnBox > div{ width: 50%; height: 100%; padding: 290px 0 0 8.333333333333333%;} #fullpage .result .ctnBox > .txtBox{ opacity: 0;} #fullpage .result .ctnBox > .txtBox h4{ font-size: 52px; line-height: 1.5; color:#111; font-weight: 300;} #fullpage .result .ctnBox > .txtBox h4 span{ font-weight: 600;} #fullpage .result .ctnBox > .txtBox p.txt{ font-size: 20px; font-weight: 300; color:#555; margin: 50px 0 0; } #fullpage .result .ctnBox > .txtBox p.num{ font-family: 'Lora', serif; font-size: 120px; color:#C49A6C; margin-bottom: 80px;} #fullpage .result .ctnBox > .txtBox p.num .percent{ font-size: 42px; font-family: 'Nanum Myeongjo', serif; margin-left: 7px; } #fullpage .result .ctnBox > .txtBox p.view a{ font-size: 16px; font-family: 'Lora', serif; color:#111; } #fullpage .result .ctnBox > .txtBox p.view img{ filter:invert(1); vertical-align:middle; margin-left: 5px;} #fullpage .result .ctnBox > .countBox{ background: url("/img/main/result_bg.jpg") no-repeat 50% 50%; background-size:cover; padding-right: 160px;} #fullpage .result .ctnBox > .countBox .numBox{ display:flex; flex-wrap:wrap; gap:160px 0; padding-top: 10px; opacity: 0;} #fullpage .result .ctnBox > .countBox .numBox .itemBox{ width: calc(100% / 2); } #fullpage .result .ctnBox > .countBox .numBox .itemBox .txt{ color:#fff; font-weight: 500; line-height: 1.5;} #fullpage .result .ctnBox > .countBox .numBox .itemBox .numT{ color:#C49A6C; font-family: 'Lora', serif; opacity: 0;} #fullpage .result .ctnBox > .countBox .numBox .itemBox .numT .sideTxt{ font-family: 'Nanum Myeongjo', serif;} #fullpage .result.on .ctnBox > .txtBox{ animation:fadeUp 1s 0.3s both; } #fullpage .result.on .ctnBox > .countBox .numBox{ animation:fadeIn 1s 0.3s both; } #fullpage .result.on .ctnBox > .countBox .numBox .itemBox .numT{ animation:fadeIn 1s 0.5s both; } #fullpage .people{ overflow: hidden;} #fullpage .people .font160{ font-family: 'Lora', serif; position: absolute; top: 220px; left: -15px; color:rgba(196,154,108,0.1); z-index: 1; letter-spacing: -2.5px; opacity: 0; } #fullpage .people .bg_circle{ position: absolute; transform: translate(-50%, -50%); top: 50%; left: 105%;} #fullpage .people .ctnBox{ margin: 0 0 0 8.333333333333333%; display:flex; align-items:center; height: 100vh; } #fullpage .people .ctnBox .txtBox{ flex-shrink:0; margin: 180px 210px 0 0; overflow: hidden; } #fullpage .people .ctnBox .txtBox h4{ font-size:52px; color:#111; line-height: 1.4; font-weight: 300; opacity: 0;} #fullpage .people .ctnBox .txtBox h4 span{ font-weight: 600; } #fullpage .people .ctnBox .txtBox p{ font-size:23px; color:#555; line-height: 1.8; font-weight: 300; margin: 70px 0 100px; opacity: 0;} #fullpage .people .ctnBox .txtBox .arrowBox{ opacity: 0; } #fullpage .people .ctnBox .txtBox .arrowBox .arrows{ display:inline-block; cursor:pointer; } #fullpage .people .ctnBox .txtBox .arrowBox .arrows.prev_arrow { margin-right: 13px;} #fullpage .people .ctnBox .slideBox{ position: relative; opacity: 0; width: 100%; height: 100%; } #fullpage .people .ctnBox .slideBox .firstBox{ height: 100%; } #fullpage .people .ctnBox .slideBox .firstBox .swiper_img #m_circle_img01{ position: absolute; transform: translateY(-50%); top: 53%; left: -20px;} #fullpage .people .ctnBox .slideBox .firstBox .swiper_img #m_circle_img02{ position: absolute; transform: translateY(-50%); top: 49%; left: 0px;} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper{ height: 100%; margin-top: -150px; overflow: inherit; } #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide{} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide .inner{ transition: all 0.8s; transform: scale(0.5); display:none; } #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide-active .inner { display:block; transform: scale(1); width: 600px;} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide-prev .inner{ display:block; transform-origin: right top; display: flex; justify-content: flex-end; margin:-20px -130px 0 0;} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide-next .inner{ display:block; transform-origin: right bottom; display: flex; justify-content: flex-end; margin: 20px -130px 0 0;} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide .name{ font-size:22px; font-weight: 600; color:#111; text-align: center; margin-top: 20px; display:none; } #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide .name img{ margin: 3px 15px 0 0; } #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide .name span{ font-size:18px; color:#555; font-weight: 400; display:inline-block; margin-left: 10px;} #fullpage .people .ctnBox .slideBox .firstBox .circle_swiper .swiper-slide-active .name{ display:block; } #fullpage .people.on .font160{ animation:fadeIn 1s 0.5s both; } #fullpage .people.on .ctnBox .txtBox h4{ animation:fadeLeft 1s both; } #fullpage .people.on .ctnBox .txtBox p{ animation:fadeUp 1s 0.3s both; } #fullpage .people.on .ctnBox .txtBox .arrowBox{ animation:fadeUp 1s 0.5s both; } #fullpage .people.on .ctnBox .slideBox{ animation:fadeIn 1s 0.5s both; } #fullpage .story{ background: #3C3B3C;} #fullpage .story > div { position: relative; } #fullpage .story .w1600 { display:flex; /*position: absolute; transform: translate(-50%, -50%); top: 73%; left: 50%;*/ } #fullpage .story .w1600 > .txtBox{ margin-right: 100px; overflow: hidden; flex-shrink: 0; position: absolute; transform: translateY(-50%); top: 73%; height: 100%;} #fullpage .story .w1600 > .txtBox > p{ opacity: 0; } #fullpage .story .txtBox h3{ font-size:68px; color:#fff; font-weight: 200; opacity: 0; } #fullpage .story .txtBox h3 span.num{ font-size:102px; font-family: 'Nanum Myeongjo', serif; display:inline-block; position: relative; } #fullpage .story .txtBox h3 span.percent{ font-size:42px; font-family: 'Nanum Myeongjo', serif; } #fullpage .story .txtBox > p{ font-size:23px; font-weight: 200; color:#aaa; margin: 40px 0;} #fullpage .story .txtBox .inputBox{ position: relative; overflow: hidden; width: 500px; height: 63px; border-radius: 10px; background: #383736; border:1px solid rgba(255,255,255,0.2); display:flex; opacity: 0; } #fullpage .story .txtBox .inputBox input{ width: calc(100% - 63px) ; height: 100%; background: none; padding: 0 25px; color:#fff; font-weight: 300; } #fullpage .story .txtBox .inputBox input::placeholder{ color:#fff; font-weight: 300; } #fullpage .story .txtBox .keywordBox{ width: 500px; margin-top: 25px; display:flex; opacity: 0; } #fullpage .story .txtBox .keywordBox .title{ color:#DDAC77; font-weight: 500; flex-shrink:0; margin-right: 30px; } #fullpage .story .txtBox .keywordBox ul{ display:flex; flex-wrap:wrap; gap:14px; } #fullpage .story .txtBox .keywordBox ul li a{ display:block; width: 100%; height: 100%; font-size: 15px; color:#DCDCDC; } #fullpage .story .scrollBox{ overflow-y: scroll; height: 100%; position: absolute;width: 100%; -ms-overflow-style: none; scrollbar-width: none; max-width: 1050px; transform: translateX(-50%);left: 67%;} #fullpage .story .scrollBox::-webkit-scrollbar { display: none; } #fullpage .story .scrollBox .arrowBox{ display:none; } #fullpage .story .ctnBox{ display: flex; flex-wrap: wrap; align-content: flex-start; gap: 40px; margin-top: 200px; padding: 0 0 100px;} #fullpage .story .ctnBox .itemBox{ width: 480px; height: 230px; background: #2A2826; border-radius:15px; padding: 0 30px; box-shadow: 15px 15px 21px rgb(0 0 0 / 25%); transition:all 0.2s; opacity: 0;} #fullpage .story .ctnBox .itemBox > a{ display:flex; align-items: center; width: 100%; height: 100%;} #fullpage .story .ctnBox .itemBox .circleBox{ position: relative; width: 170px; height: 170px; flex-shrink:0; margin-right: 20px; transition:auto; } #fullpage .story .ctnBox .itemBox .circleBox .in{ width: 100%; height: 100%; position: absolute; opacity: 0.1;} #fullpage .story .ctnBox .itemBox .circleBox .out_img{ display:none; width: 100%; height: 100%; position: absolute; top: 0; left: 0;} #fullpage .story .ctnBox .itemBox .circleBox .out{ width: 100%; height: 100%; position: absolute; } #fullpage .story .ctnBox .itemBox .circleBox svg.out{ width: 170px; height: 170px; } #fullpage .story .ctnBox .itemBox .circleBox svg circle{ fill: transparent; stroke:#C49A6C; stroke-width:20; stroke-dasharray: 471; stroke-dashoffset: 471; /*animation:c_line 2s forwards;*/ transform: rotate(-90deg); transform-origin:50% 50%; stroke-linecap:round; } #fullpage .story .ctnBox .itemBox .circleBox .ctxt{ position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; color:#fff; text-align: center;} #fullpage .story .ctnBox .itemBox .circleBox .ctxt p.num{ font-size: 42px; font-weight: bold; display: inline-block; font-family: 'Nanum Myeongjo', serif; } #fullpage .story .ctnBox .itemBox .circleBox .ctxt span.per{ font-size: 20px; font-family: 'Nanum Myeongjo', serif; } #fullpage .story .ctnBox .itemBox .circleBox .ctxt p.txt{ font-size:18px; font-family: 'Pretendard', sans-serif; } #fullpage .story .ctnBox .itemBox:nth-child(2){ margin-top: 40px;} #fullpage .story .ctnBox .itemBox:nth-child(2n-1):not(:first-child) { margin-top: -40px;} #fullpage .story .ctnBox .itemBox .txtBox{} #fullpage .story .ctnBox .itemBox .txtBox p{ font-size: 28px; font-weight: 500; color:#fff; margin: 0 0 20px 0; -webkit-line-clamp: 1; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;} #fullpage .story .ctnBox .itemBox .txtBox ul{ display:flex; gap:5px; flex-wrap: wrap;} #fullpage .story .ctnBox .itemBox .txtBox ul li{ font-size: 14px; background: rgba(255,255,255,0.1); color:#aaa; font-weight: 500; border-radius:30px; padding: 6px 15px;} #fullpage .story .ctnBox .itemBox:hover{ background: #fff; } #fullpage .story .ctnBox .itemBox:hover .txtBox p{ color:#111;} #fullpage .story .ctnBox .itemBox:hover .circleBox p,#fullpage .story .ctnBox .itemBox:hover .circleBox .ctxt span.per{ color:#C49A6C; } #fullpage .story .ctnBox .itemBox:hover .circleBox .in{ opacity: 1; } #fullpage .story .ctnBox .itemBox:hover .txtBox ul li{ background: #E8E8E8;} #fullpage .story .font160{ font-family: 'Lora', serif; position: absolute; left: -15px; bottom: -65px; color:rgba(255,255,255,0.1); opacity: 0; } #fullpage .story.on .w1600 > .txtBox h3{ animation:fadeLeft 1s both; } #fullpage .story.on .w1600 > .txtBox > p{ animation:fadeUp 1s 0.3s both; } #fullpage .story.on .txtBox .keywordBox,#fullpage .story.on .txtBox .inputBox{ animation:fadeLeft 1s 0.5s both; } #fullpage .story.on .ctnBox .itemBox{ animation: s_scale 1s 0.7s both;} #fullpage .story.on .font160{ animation:fadeUp 0.5s 0.7s both; } #fullpage .analyze{ background: url("/img/main/analyze_bg.jpg") 50% 50% no-repeat; background-size:cover; position: relative; } #fullpage .analyze .font160{ font-family: 'Lora', serif; position: absolute; right: -25px; bottom: -65px; color:rgba(196,154,108,0.1); z-index: 1; letter-spacing: -2.5px; opacity: 0;} #fullpage .analyze .ctnBox{ display:flex; padding: 100px 0 0 8.333333333333333%; align-items: center;} #fullpage .analyze .ctnBox .txtBox{ flex-shrink:0; margin-right: 120px; overflow: hidden;} #fullpage .analyze .ctnBox .txtBox p.num{ font-size:120px; color:#c49a6c; font-family: 'Lora', serif; position: relative; opacity: 0;} #fullpage .analyze .ctnBox .txtBox p.num sup{ font-size:64px; font-weight: 600; position: absolute; top: 0; right: 10%;} #fullpage .analyze .ctnBox .txtBox p.title{ font-size:52px; color:#111; font-weight: 600; margin: 30px 0 10px; opacity: 0;} #fullpage .analyze .ctnBox .txtBox p.txt{ font-size:23px; font-weight: 300; color:#555; opacity: 0;} #fullpage .analyze .ctnBox .txtBox .a_pagi{ position: relative; display:flex; margin-top: 100px; opacity: 0;} #fullpage .analyze .ctnBox .txtBox .a_pagi .a_pagination{ width: auto; font-size:16px; color:#111; font-weight: 500; font-family: 'Lora', serif; margin-right: 35px; } #fullpage .analyze .ctnBox .txtBox .a_pagi .a_pagination .swiper-pagination-total{ color:#999;} #fullpage .analyze .ctnBox .txtBox .a_pagi .buttonBox{ display:flex; } #fullpage .analyze .ctnBox .txtBox .a_pagi .buttonBox .arrows{ cursor:pointer; } #fullpage .analyze .ctnBox .txtBox .a_pagi .buttonBox .arrows:after{ display:none; } #fullpage .analyze .ctnBox .txtBox .a_pagi .buttonBox .prev_swiper{ margin-right: 13px; } #fullpage .analyze .ctnBox .slideBox{ width: 100%; position: relative; opacity: 0;} #fullpage .analyze .ctnBox .slideBox .m_swiper{ position: relative; width: 640px; height: 640px; } #fullpage .analyze .ctnBox .slideBox .m_swiper .swiper_img{ position: absolute; width: 100%; height: 100%; z-index: 1;} #fullpage .analyze .ctnBox .slideBox .m_swiper .swiper_img #m_circle_img03{ position: absolute; transform: translate(-50%, -50%); top: 55%; left: 45%; } #fullpage .analyze .ctnBox .slideBox .m_swiper .swiper_img #m_circle_img04{ position: absolute; transform: translate(-50%, -50%); top: 45%; left: 55%;} #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox{ position: absolute; display:flex; justify-content:center; align-items:center; flex-direction: column; width: 220px; height: 220px; border-radius:50%; border:1px solid #C49A6C; background: #fff; z-index: 5; bottom: 0; right: 0; transition:all 0.5s; } #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox p.title{ font-size:24px; font-weight: 600; color:#111; margin-bottom: 5px;} #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox p.more{ font-size:16px; color:#111; font-family: 'Lora',serif; } #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox p.more img{ filter:invert(1); vertical-align:middle; margin-left: 5px; } #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox:hover{ background: #C49A6C; border:1px solid #fff;} #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox:hover p{ color:#fff; } #fullpage .analyze .ctnBox .slideBox .m_swiper .viewBox:hover p.more img{ filter: none; } #fullpage .analyze .ctnBox .slideBox .m_swiper .swiper-slide{ opacity: 0; transition:all 1s; } #fullpage .analyze .ctnBox .slideBox .m_swiper .swiper-slide.swiper-slide-active{ opacity: 1;} #fullpage .analyze .ctnBox .slideBox .s_swiper{ position: relative; position: absolute; max-width: 2040px; transform: translate(-50%, -50%); top: 70%; left: 110.5%;} #fullpage .analyze .ctnBox .slideBox .s_swiper .swiper{ overflow: inherit; overflow-x: clip;} #fullpage .analyze .ctnBox .slideBox .s_swiper .swiper-slide{ width: 360px; border-radius: 100px; overflow: hidden; box-shadow: 15px 20px 33px rgb(0 0 0 / 30%); cursor:pointer; opacity: 1; transition:all 0.5s;} #fullpage .analyze .ctnBox .slideBox .s_swiper .swiper-slide.swiper-slide-active{ box-shadow:none; opacity: 0;} #fullpage .analyze .ctnBox .slideBox .s_swiper .cap_w{ height: 600px; width: 400px; position: absolute; top: 0; left: -110px; background: url("/img/main/cap_bg.png") 50% 50% no-repeat; background-size:cover; z-index: 2;} #fullpage .analyze.on .ctnBox .txtBox p.num{ animation: fadeLeft 1s both; } #fullpage .analyze.on .ctnBox .txtBox p.title{ animation: fadeUp 1s 0.3s both; } #fullpage .analyze.on .ctnBox .txtBox p.txt{ animation: fadeUp 1s 0.5s both; } #fullpage .analyze.on .ctnBox .txtBox .a_pagi{ animation: fadeLeft 1s 0.5s both; } #fullpage .analyze.on .ctnBox .slideBox{ animation:fadeIn 1s 0.5s both; } #fullpage .analyze.on .font160{ animation: fadeUp 1s 0.7s both; } #fullpage .video_blog{ position: relative; } #fullpage .video_blog .w1600{ position: absolute; transform:translate(-50%,-50%); top: 70%; left: 50%;} #fullpage .video_blog .font160{ font-family: 'Lora', serif; position: absolute; left: -10px; bottom: -50px; color:rgba(196,154,108,0.1); z-index: -1; letter-spacing: -2.5px; } #fullpage .video_blog .vb_bg{ position: absolute; bottom: 0; left: 0; width: 100%; height: 455px; background: #3C3B3C; z-index: -2;} #fullpage .video_blog .pagi{ position: absolute; z-index: 5; display:flex; align-items:center; } #fullpage .video_blog .pagi .vb_pagination{ width: auto; font-size:16px; color:#111; font-weight: 500; font-family: 'Lora', serif; margin-right: 35px; } #fullpage .video_blog .pagi .vb_pagination .swiper-pagination-total{ color:#999;} #fullpage .video_blog .pagi .buttonBox{ display:flex; gap:13px; } #fullpage .video_blog .pagi .buttonBox .arrows{ cursor:pointer; } #fullpage .video_blog .videoBox{ position: relative; height: 350px;} #fullpage .video_blog .videoBox .v_pagi{ position: absolute; top: 10px; right: 0; z-index: 5; display:flex; align-items:center; } #fullpage .video_blog .videoBox .mainBox{ position: relative; width: 100%; height: 100%;} #fullpage .video_blog .videoBox .mainBox .swiper-slide{ position: relative; height: 100%; overflow: hidden; display: flex; } #fullpage .video_blog .videoBox .mainBox .swiper-slide .movbox{ position: relative; overflow: hidden; width: 37.5%; height: 100%; flex-shrink: 0;} #fullpage .video_blog .videoBox .mainBox .swiper-slide .movbox .imgbox{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; background-position: center; background-size:cover; } #fullpage .video_blog .videoBox .mainBox .swiper-slide .movbox .btn-icon .icon{ position: absolute; transform:translate(-50%,-50%); top: 50%; left: 50%; width: 82px; height: 82px; border-radius:50%; border:1px solid #fff; display:flex; justify-content:center; align-items:center; z-index: 10; cursor:pointer; } #fullpage .video_blog .videoBox .mainBox .swiper-slide .txtbox{ opacity: 0; transition:all 0.5s; margin-left: 60px; } #fullpage .video_blog .videoBox .mainBox .swiper-slide .txtbox dt{ color:#111; font-weight: 600; margin-bottom: 15px;} #fullpage .video_blog .videoBox .mainBox .swiper-slide .txtbox dd{ color:#555; font-weight: 300; line-height: 1.5;} #fullpage .video_blog .videoBox .mainBox .swiper-slide.swiper-slide-active .txtbox{ opacity: 1;} #fullpage .video_blog .videoBox .subBox{ animation: ani_2 0.8s 0.4s both; position: absolute; right: 0; bottom: 0; width: calc(100% - 37.5% - 60px); height: 173px; overflow: hidden;} #fullpage .video_blog .videoBox .subBox .swiper-slide{ position: relative; overflow: hidden; width: 33.33%; cursor: pointer;} #fullpage .video_blog .videoBox .subBox .swiper-slide img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; -o-object-fit: cover; } #fullpage .video_blog .blogBox{ display:flex; margin-top: 70px;} #fullpage .video_blog .blogBox .txtBox{ margin-right: 70px; flex-shrink:0; opacity: 0;} #fullpage .video_blog .blogBox .txtBox .title{ color:#fff; font-weight: 600; line-height: 1.5;} #fullpage .video_blog .blogBox .txtBox .txt{ color:#aaa; font-weight: 300; margin: 10px 0 87px;} #fullpage .video_blog .blogBox .blogswiper{ width: 100%; opacity: 0;} #fullpage .video_blog .blogBox .pagi .vb_pagination{ color:#fff; } #fullpage .video_blog.on .blogBox .txtBox{ animation:fadeLeft 1s 0.2s both; } #fullpage .video_blog.on .blogBox .blogswiper{ animation: fadeUp 1s 0.2s both} #fullpage .news{ background: url("/img/main/news_bg.jpg") 50% 50% no-repeat; background-size:cover;} #fullpage .news .w1600{ position: absolute; transform: translate(-50%, -50%); top: 74.5%; left: 50%;} #fullpage .news .w1600 .txtBox{ overflow: hidden; } #fullpage .news .w1600 .txtBox h5{ font-size:72px; color:#fff; font-family: 'Lora', serif; margin-bottom: 30px; opacity: 0;} #fullpage .news .w1600 .txtBox p{ font-size:23px; font-weight: 300; color:#aaa; opacity: 0; } #fullpage .news .w1600 .slideBox{ margin-top: 30px; position: relative; } #fullpage .news .w1600 .slideBox > p{ text-align: right; opacity: 0;} #fullpage .news .w1600 .slideBox > p a{ font-size:16px; font-family: 'Lora', serif; color:#fff; } #fullpage .news .w1600 .slideBox > p a img{ vertical-align: middle; margin-left: 5px; } #fullpage .news .w1600 .slideBox .newsswiper{ margin: 30px 0 40px;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide{ height: 309px; border:1px solid rgba(255,255,255,0.43); border-radius:25px; position: relative; overflow: hidden; opacity: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide a{ display:flex; flex-direction: column; justify-content: space-between; padding: 60px 46px 60px 40px; width: 100%; height: 100%;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide p.title{ font-size:22px; color:#fff; letter-spacing: -0.4px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide p.ctn{ font-size:17px; font-weight: 300; color:#aaa; letter-spacing: -0.4px; margin: 30px 0 0; line-height: 1.6; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide p.day{ font-size:16px; font-weight: 300; color:#aaa; display: flex; align-items: center; } #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide p.day img{ margin-right: 10px; } #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide img.bg{ width: 100%; height: 100%; opacity: 0; } #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide figure{ position: relative; width: 100%; height: 100%; position: absolute; top:0; left: 0; z-index: -1; border-radius: 20px; overflow: hidden;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide figure:after{ content:''; width: 100%; height: 100%; position: absolute; top:0; left: 0; background: rgba(255,255,255,0.1); opacity: 1; transition:all 0.5s; } #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide:hover{ border:1px solid rgba(255,255,255,0); -webkit-backdrop-filter: none; backdrop-filter: none;} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide:hover img.bg{ opacity: 1; filter: blur(3px);} #fullpage .news .w1600 .slideBox .newsswiper .swiper-slide:hover figure:after {opacity: 1;} #fullpage .news .w1600 .slideBox .news_pagi{ position: relative; float: right; display:flex; } #fullpage .news .w1600 .slideBox .news_pagi .swiper-pagination{ position: relative; bottom: auto; left: auto; font-family: 'Lora', serif; color:#fff; margin-right: 34px; } #fullpage .news .w1600 .slideBox .news_pagi .swiper-pagination .swiper-pagination-total{ color:#999; } #fullpage .news .w1600 .slideBox .news_pagi .swipper-arrows{ display: flex; gap:13px; } #fullpage .news .w1600 .slideBox .news_pagi .swipper-arrows .arrows{ top: auto; left: auto; right: auto; position: relative; width: 38px; height: 24px; margin-top: 0;} #fullpage .news .w1600 .slideBox .news_pagi .swipper-arrows .arrows:after{ display:none; } #fullpage .news.on .w1600 .txtBox h5{ animation:fadeLeft 1s both; } #fullpage .news.on .w1600 .txtBox p{ animation:fadeUp 1s 0.3s both; } #fullpage .news.on .w1600 .slideBox .newsswiper .swiper-slide{ animation:s_scale 1s 0.5s both; } #fullpage .news.on .w1600 .slideBox > p{ animation:fadeIn 1s 0.7s both; } #fullpage .contact { display:flex; } #fullpage .contact > div { display:flex;} #fullpage .contact .leftBox{ width: 50%; position: relative;} #fullpage .contact .leftBox .inBox{ position: absolute; left: 0; bottom: 0; z-index: 2; display:flex; justify-content:space-between; width: 100%; height: 220px; padding: 90px 90px 0 100px; background: linear-gradient(to top, rgb(48,48,48),transparent);} #fullpage .contact .leftBox .inBox .txtBox .font30{ font-family: 'Lora', serif; color:#C49A6C; margin-bottom: 15px;} #fullpage .contact .leftBox .inBox .txtBox .font18{ font-weight: 200; color:#fff;} #fullpage .contact .leftBox .inBox button{ width: 156px; height: 53px; background: #C49A6C; border-radius:10px; color:#fff; font-weight: 500; margin-top: 10px;} #fullpage .contact .map_wrap{ border-right:1px solid #C49A6C; opacity: 0;} #fullpage .contact .ctnBox{ margin-top: 11%; padding: 0 0 0 100px; } #fullpage .contact .ctnBox .txtBox h4{ font-size:72px; color:#111; font-family: 'Lora', serif; opacity: 0;} #fullpage .contact .ctnBox .txtBox p{ font-size:23px; color:#555; font-weight: 300; margin-top: 20px; opacity: 0;} #fullpage .contact .ctnBox .inputBox{ margin-top: 80px; opacity: 0; position: relative; z-index: 1;} #fullpage .contact .ctnBox .inputBox p.txt{ width: 700px; height: 65px; line-height: 65px; padding: 0 30px; font-size:18px; font-weight: 500; color:#aaa; background: #f8f8f8; border-radius: 10px;} #fullpage .contact .ctnBox .inputBox p.txt:not(:last-child){ margin-bottom: 10px;} #fullpage .contact .ctnBox .inputBox p span{ width: 50px; display: inline-block;} #fullpage .contact .ctnBox .inputBox p span.view{ width: auto; margin-left: 15px; text-decoration:underline; text-underline-offset:5px; color:#111; font-size:16px; font-family: 'Lora', serif; cursor:pointer; } #fullpage .contact .ctnBox .inputBox p span.view i{ font-weight: 600; vertical-align: bottom;} #fullpage .contact .ctnBox .inputBox p input[type="text"]{ height: 100%; margin-left: 15px; background: #f8f8f8;} #fullpage .contact .ctnBox .inputBox p.checkBox { margin: 40px 0 20px;} #fullpage .contact .ctnBox .inputBox p input[type="checkbox"] + label{ display: inline-block; position: relative; padding-left: 28px; cursor: pointer; } #fullpage .contact .ctnBox .inputBox p input[type="checkbox"] + label:before{ content:""; width: 18px; height: 18px; display:inline-block; border-radius:50%; border:1px solid #ddd; position: absolute; top: 0; left: 0;} #fullpage .contact .ctnBox .inputBox p input[type="checkbox"] + label:after{ content:""; width: 6px; height: 6px; display:inline-block; border-radius:50%; position: absolute; top: 7px; left: 7px; background: #C49A6C; opacity: 0;} #fullpage .contact .ctnBox .inputBox p input[type="checkbox"]:checked + label:after{ opacity: 1; } #fullpage .contact .ctnBox .inputBox p label span{ width: auto; font-size:16px; font-weight: 300; } #fullpage .contact .ctnBox .inputBox .selectBox{ position: relative; width: 700px; height: 65px; border-radius: 10px; background: #fff; cursor: pointer; margin-bottom: 30px;} /*#fullpage .contact .ctnBox .inputBox .selectBox .label { display: flex; align-items: center; width: inherit; height: inherit; outline: 0 none; padding-left: 25px;*/ /* background: transparent; border: 1px solid #ddd; cursor: pointer; font-size:18px; color:#aaa; border-radius: 10px;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionBox{ width: 700px; height: 212px; border: 1px solid #ddd; background: #fff; border-radius: 10px; transition: .3s ease-in; margin-top: -1px; display:none;*/ /* position: absolute; z-index: 1;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionList { position: absolute; top: 0px; left: 0; width: calc(100% - 50px); color: #aaa; padding: 0; overflow: hidden;*/ /* max-height: 0; transition: .3s ease-in; font-size: 18px; font-weight: 300; z-index: 1; opacity: 0; overflow-y: scroll; margin: 20px 25px;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionItem { padding: 11px 0 11px; transition: .1s; line-height: 1.25;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionItem:hover { color:#C49A6C; font-weight: 600; }*/ /*#fullpage .contact .ctnBox .inputBox .selectBox img{ position: absolute; right: 25px; top: 28px; transition:all 0.5s; }*/ /*#fullpage .contact .ctnBox .inputBox .selectBox.active .optionBox{ display:block; }*/ /*#fullpage .contact .ctnBox .inputBox .selectBox.active .optionList { max-height: 175px; opacity: 1;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox.active img{ transform:rotate(180deg);}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionList::-webkit-scrollbar{ width: 3px; margin-right: 30px;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionList::-webkit-scrollbar-thumb{ border-radius:30px; background: #ddd;}*/ /*#fullpage .contact .ctnBox .inputBox .selectBox .optionList::-webkit-scrollbar-track{ background: #f8f8f8; border-radius:30px;}*/ #fullpage .contact .ctnBox .apply{ float: right; opacity: 0; width: 700px; display: flex; justify-content: flex-end; } #fullpage .contact .ctnBox .apply button{ font-size: 18px; font-weight: bold; color:#fff; display:inline-block; width: 300px; height: 65px; background: #C49A6C; border-radius:15px; text-align: center;} #fullpage .contact .ctnBox .apply button img{ vertical-align: middle; margin-left: 15px;} #fullpage .contact.on .map_wrap{ animation:fadeIn 1s both; } #fullpage .contact.on .ctnBox h4{ animation:fadeUp 1s both; } #fullpage .contact.on .ctnBox p{ animation:fadeUp 1s 0.3s both; } #fullpage .contact.on .ctnBox .inputBox{ animation:fadeUp 1s 0.5s both; } #fullpage .contact.on .ctnBox .apply{ animation:fadeUp 1s 0.7s both; }