.mo_br{display: block;} .eTit{color: #BE9473;font-family: "Montserrat", sans-serif;font-size: 1.2rem;font-weight: 700;line-height: 1; display:inline-block; margin:0 0 10px;} .mainTit{font-size:3rem;font-weight: 800;line-height: 120%; color:#252525;} .mainTit.w{color: #fff;} .section {overflow:hidden; clear:both; position: relative; width: 100%; height: 100vh; word-break: keep-all; box-sizing:border-box; display:flex; justify-content: center; flex-direction: column; } .section .fp-tableCell {vertical-align: middle; } .section.business .fp-tableCell, .section.professoinals .fp-tableCell, .section.case .fp-tableCell, .section.contact .fp-tableCell, .section.location .fp-tableCell{padding-top:90px;} .moreBtn{vertical-align:middle; font-size: 0.88889rem;font-weight: 700; display:inline-block; } .moreBtn::after{content:""; display:inline-block; width:10px; height:3px; background:#444; vertical-align:middle; margin:0 0 2px 10px;} /* 占쏙옙占쏙옙占? */ .slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;} .slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important; outline: 0 !important;} .slick-track {display:flex; } .slick-slide{border:0; outline: 0 !important;} .slick-initialized .slick-slide{display:block; outline: 0 !important;} /* ����� */ .slick-slider{position: relative; display: block; box-sizing: border-box; -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y; touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;} .slick-list{position: relative; display: block; overflow: hidden; margin: 0; padding:0 !important; outline: 0 !important;} .slick-track {display:flex; } .slick-slide{border:0; outline: 0 !important;} .slick-initialized .slick-slide{display:block; outline: 0 !important;} .slick-dots{position: absolute;bottom: 240px;left: 50%; transform: translate(-50%, 0);z-index: 1000;display: flex; gap:10px ;} .slick-dots li{display: flex; } .slick-dots li button{border:1px solid rgba(255, 255, 255, 0.80);width: 10px;height: 10px; border-radius: 10px;background:none;outline:none;font-size: 0;;} .slick-dots li.slick-active button{width: 23px; background-color:#fff;;} .visual{position:relative; width: 100%; height: 100vh; background:#000; overflow:hidden; z-index:1;} .visual .visual_in{width: 100%; height: 100%; position: relative;} .visual .vRoll{position:relative; width: 100%; height: 100vh; } .visual .visual_in .vRoll .bg{position:absolute; left:0; top:0; width:100%; height:100vh; background-repeat:no-repeat; background-size:cover; background-position:center; -webkit-transition:transform 3000ms ease-in-out; -moz-transition:transform 3000ms ease-in-out; -o-transition:transform 3000ms ease-in-out; -ms-transition:transform 3000ms ease-in-out; transition:transform 3000ms ease-in-out;} .visual .visual_in .vRoll .bg .jarallax{position: relative; width: 100%; height:100%; opacity:1;} .visual .visual_in .vRoll .bg .jarallax iframe{position: absolute;} .visual .visual_in .vRoll .vTxt{text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:80%} /*.visual .visual_in .vRoll .vTxt img{position:relative; transition:all .6s 0s linear; transform:translateY(60px); opacity:0;}*/ .visual .visual_in .vRoll .vTxt img{position:relative; transition:all .6s 0s linear; transform:translateY(60px); opacity:0;padding-top: 60px;} .visual .visual_in .vRoll .vTxt h3{position:relative;font-family: 'Raleway', sans-serif;line-height: 1; margin:0 0 28px; transition:all .6s 0.3s linear; transform:translateY(60px); opacity:0;color: rgba(255, 255, 255, 0.95);text-align: center;font-size: 72px;font-weight: 700; text-shadow:2px 3px 8px rgba(0,0,0,0.3); } .visual .visual_in .vRoll .vTxt p{position:relative;color: rgba(255, 255, 255, 1);font-size: 25px;font-weight:400;transition:all .6s 0.6s linear; transform:translateY(60px); opacity:0; line-height: 36px;text-shadow:2px 3px 5px rgba(0,0,0,0.7);word-break:keep-all; } .visual .visual_in .vRoll.action .bg{transform: scale(1.05);} .visual .visual_in .vRoll.action .vTxt img, .visual .visual_in .vRoll.action .vTxt h3, .visual .visual_in .vRoll.action .vTxt p{transform:translateY(0); opacity:1;} /* Section01 */ .section01 {background:url('../img/sec01_bg.jpg') center 100% no-repeat; background-size:cover;} .section01 > div{padding-top:70px;} .section01 .title{text-align: center;} .section01 .title h4{color: #F8DF5A;font-family: Raleway;font-size: 25px;font-weight: 600;letter-spacing: -0.5px;} .section01 .title h3{color: #FFF;text-align: center;font-family: Raleway;font-size: 65px;font-weight: 700;letter-spacing: -1.3px;} .section01 .title h3:after{content:"";display: block; width: 147px; height: 1px;background: rgba(255, 255, 255, 0.70);margin: 40px auto;} .section01 .title p{color: rgba(255, 255, 255, 0.90);text-align: center;font-size: 24px;font-weight: 400;line-height: 35px; /* 145.833% */letter-spacing: -0.48px;word-break:keep-all;} .section01 .btnbox{display: flex;justify-content: center;padding: 70px 0 0;} .section01 .btnbox a{display: flex;width: 280px;height: 65px; min-width: 280px;padding:0 10px 0 40px;justify-content: space-between;align-items: center;border-radius: 80px;background: #3C871E;color: #FFF;font-family: Raleway;font-size: 22px;font-weight: 600;line-height: 80px; /* 363.636% */letter-spacing: -0.44px;} .section01 .btnbox a span{display: flex;width: 45px;height: 45px;justify-content: center;align-items: center;flex-shrink: 0;aspect-ratio: 1/1;border-radius: 80px;background: #24660A;} .section01 .btnbox a:hover, .section01 .btnbox a:focus {background: #124100;} /* Section02 */ .section02 {} .section02 .prd_wrap{display: flex;} .section02 .prd_wrap a{display: flex; width: 33.33333%;height: 100vh;box-sizing: border-box;padding: 180px 80px 0;overflow: hidden;position: relative;flex-direction: column;background-color: #000;} .section02 .prd_wrap a .bgimg{position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%);z-index:0;transition: all .7s;;} .section02 .prd_wrap a .tbox{position: relative;z-index: 1;} .section02 .prd_wrap a .tbox h4{color: #FFF;font-family: Raleway;font-size: 20px;font-weight: 600;line-height: 35px; /* 175% */letter-spacing: -0.4px;margin:0 0 15px 0;} .section02 .prd_wrap a .tbox h3{color: #FFF;font-size: 46px;font-weight: 700;line-height: 35px; /* 76.087% */letter-spacing: -0.92px;} .section02 .prd_wrap a .hover{position: relative;z-index: 1;transition: all .7s;} .section02 .prd_wrap a .hover h5{color: #FFF;font-size: 28px;font-weight: 600;line-height: 35px; /* 125% */letter-spacing: -0.56px;} .section02 .prd_wrap a .hover h5:before{content:"";display: block;width: 1px;height: 80px;background: rgba(255, 255, 255, 0.50);margin:30px 0;} .section02 .prd_wrap a .hover p{color: rgba(255, 255, 255, 0.80);font-size: 19px;font-weight: 400;line-height: 31px; /* 163.158% */letter-spacing: -0.38px;margin:30px 0 70px;word-break:keep-all;} .section02 .prd_wrap a .hover .btns{display: flex;width: 165px; padding: 12px 10px ;border-bottom: 1px solid #FFF; justify-content: space-between;align-items: center;color: #FFF; font-size: 18px;font-weight: 600;letter-spacing: -0.36px;line-height: 1;;} /* Section03 */ .section03 {background:url('../img/sec03_bg.jpg') center 100% no-repeat; background-size:cover;} .section03 > div{padding-top:70px;} .section03 .title{text-align: center;} .section03 .title h4{color: #3C871E;font-family: Raleway;font-size: 25px;font-weight: 600;letter-spacing: -0.5px;line-height: 1;margin: 0 0 20px 0;;} .section03 .title h3{color:#111111;text-align: center;font-family: Raleway;font-size: 65px;font-weight: 700;letter-spacing: -1.3px;line-height: 1;} .section03 .title h3:after{content:"";display: block; width: 147px; height: 1px;background: rgba(147, 147, 147, 0.70);margin: 20px auto;} .section03 .title p{color: #888888;text-align: center;font-size: 24px;font-weight: 400;line-height: 35px; /* 145.833% */letter-spacing: -0.48px;} .section03 .sch_box{display: flex;border-radius: 80px;border: 2px solid #3C871E;background: #FFF;box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);box-sizing: border-box; padding-left: 40px;align-items: center;justify-content: space-between;height: 90px;margin:60px 0;} .section03 .sch_box label{display: flex; align-items: center;;flex-grow: 1;height:109%;} .section03 .sch_box label p{ flex-shrink: 0;color: #111;font-size: 28px;font-weight: 500;line-height: 1; /* 321.429% */letter-spacing: -0.56px;border-right:2px solid #ccc;padding-right:20px;} .section03 .sch_box label input{width:100%; box-sizing: border-box; padding:5px 0 5px 20px; font-size:22px; color:#222; font-weight: 500;;} .section03 .sch_box label input:focus{border:none !important; outline:none !important;box-shadow: none !important;;} .section03 .sch_box a.s_btn{display: flex; width: 117px;height: 90px;align-items: center; justify-content: center;background-color: #3C871E;border-radius: 80px;;} .section03 .sch_box a.s_btn:hover, .section03 .sch_box a.s_btn:focus{ background-color:#24660A} .section03 .sch_box .s_btn{display: flex; width: 117px;height: 90px;align-items: center; justify-content: center;background-color: #3C871E;border-radius: 80px;;} .section03 .sch_box .s_btn:hover, .section03 .sch_box .s_btn:focus{ background-color:#24660A} .section03 .best h4{color: #111;text-align: center;font-family: Raleway;font-size: 30px;font-weight: 600;line-height: normal;letter-spacing: -0.6px;margin: 0 0 30px 0;;} .section03 .best ul{display: flex;justify-content: center;align-items: flex-start;gap: 30px;} .section03 .best ul li{display: flex;min-width: 340px;height: 110px;padding: 20px 40px;justify-content: center;align-items: center;gap: 35px;border-radius: 100px;border: 1px solid #FFF;background: #FFF;box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);color: #111; font-size: 29px;font-weight: 600;line-height: normal;letter-spacing: -0.58px;} /* Section04 */ .section04 {background:url('../img/sec04_bg.jpg') center 100% no-repeat; background-size:cover;} .section04 > div{padding-top:80px;} .section04 .title{text-align: center;} .section04 .title h3{color:#111111;text-align: center;font-family: Raleway;font-size: 65px;font-weight: 700;letter-spacing: -1.3px;line-height: 1;margin:0 0 20px 0;} .section04 .title p{color: #999;text-align: center;font-size: 23px;font-weight: 500;line-height: normal;letter-spacing: -0.46px;} .section04 .title a.more{display: flex;width: 165px; padding: 12px 10px ;border-bottom: 1px solid #000;margin:25px auto 65px;justify-content: space-between;align-items: center;color: #111111;font-size: 18px;font-weight: 600;letter-spacing: -0.36px;line-height: 1;;} .section04 .title a.more span{transition: all .4s;} .section04 .title a.more:hover span, .section04 .title a.more:focus span{transform: rotate(180deg);} .section04 ul.news {display: grid; grid-template-columns: repeat(3, 1fr);gap: 20px;} .section04 ul.news li{width: ;} .section04 ul.news li a{display: flex;flex-direction: column;align-items: flex-start;gap: 20px;} .section04 ul.news li a .thumb{width:100%;overflow: hidden;} .section04 ul.news li a .thumb img{width:100%;height:100%;aspect-ratio: 3 / 2;object-fit: cover;transition: all .6s;} .section04 ul.news li a .tit{color: #000;font-size: 21px;font-weight: 500;line-height: normal;letter-spacing: -0.42px;padding:5px 0 0;} .section04 ul.news li a .date{color: #AFAFAF;font-size: 18px;font-weight: 400;line-height: normal;letter-spacing: -0.36px;} .section04 ul.news li a:hover .thumb img{transform: scale(1.05);} .section04 ul.news li a:hover .tit {color: #24660A;} /******************************************************************************* @media ~1280px *******************************************************************************/ @media all and (max-width:1450px){ } @media all and (max-width:1300px){ #fp-nav{display:none !important; z-index:9999999 !important;} .visual .visual_in .slick-prev{left:30px;} .visual .visual_in .slick-next{right:30px;} #footer .footer_in{width:100%;padding:50px 60px;} #footer .footer_nav{padding:16px 0;} } @media all and (max-width:1280px){ .visual .visual_in .vRoll .vTxt h3{font-size: 57px;} .visual .visual_in .vRoll .vTxt p { font-size: 22px;line-height: 33px;word-break:keep-all;} .section01 .title h3{font-size:55px;} .section01 .title p{font-size:22px;word-break:keep-all;} .section02 .prd_wrap a{padding:180px 50px 0;} .section02 .prd_wrap a .tbox h3{font-size:40px;} .section02 .prd_wrap a .tbox h4{font-size:17px;} .section02 .prd_wrap a .hover h5:before{height: 50px;} .section02 .prd_wrap a .hover h5{font-size:22px; line-height:30px;} .section02 .prd_wrap a .hover p{font-size:17px; line-height:28px;} .section02 .prd_wrap a .hover p br{display:none;} .section03 .title h3{font-size:55px;} .section03 .best ul li{font-size:25px; height:90px;padding:16px 30px;} .section03 .sch_box label p{font-size:25px;} .section04 .title h3{font-size:55px;} } /******************************************************************************* @media ~980px *******************************************************************************/ @media all and (max-width:980px){ .visual .visual_in .vRoll .vTxt{width:92%;box-sizing:border-box;} .visual .visual_in .vRoll .vTxt h3{font-size: 50px;} .visual .visual_in .vRoll .vTxt p { font-size: 20px;line-height: 33px;} .visual .visual_in .vRoll .vTxt p br{display:none;} .section01 {padding:80px 0;} .section01 > div{padding:0;} .section01 .title h3{font-size:40px;} .section01 .title p{font-size:19px;} .section01 .title p br{display:none;} .section02 .prd_wrap {flex-direction: column;} .section02 .prd_wrap a{ padding: 50px 50px 0;width: 100%; height: 300px;} .section02 .prd_wrap a .tbox h3{font-size:36px;} .section02 .prd_wrap a .tbox h4{margin:0 0 8px 0;} .section02 .prd_wrap a .bgimg{width:100%;} .section02 .prd_wrap a .hover{display:none;} .section03{padding:80px 0;} .section03 > div{padding:0;} .section03 .title h3{font-size:40px;} .section03 .title p{font-size:19px;} .section03 .sch_box{height: 80px;} .section03 .sch_box label p{font-size:22px;} .section03 .sch_box label input{font-size:19px;} .section03 .sch_box .s_btn{height:80px;width:100px;} .section03 .sch_box .s_btn img{width:33px;} .section03 .best h4{font-size:27px;} .section03 .best ul{gap:20px;} .section03 .best ul li{ padding: 13px 35px;height:70px;min-width:auto;gap:12px;font-size:19px;} .section03 .best ul li img{ height:35px;} .section04 {padding:80px 0;} .section04 > div{padding:0;} .section04 .title h3{font-size:40px;} .section04 .title p{font-size:19px;} .section04 ul.news li a .tit{font-size:18px;} .section04 ul.news li a .date{font-size:15px;} } @media all and (max-width:768px){ #topgo{width:40px;right:10px;gap:5px;} #topgo a{width:40px;height:40px;} #topgo a img{max-width:16px;} #topgo a.topbtn img{max-width:12px;} } /******************************************************************************* @media 481~680px *******************************************************************************/ @media all and (max-width:680px){ .visual .visual_in .vRoll .vTxt h3{font-size: 41px;line-height: 1.2;} .visual .visual_in .vRoll .vTxt p {font-size:17px;line-height:27px;} .slick-dots{bottom:3vh;} #footer .footer_in{padding:40px 24px;} } @media all and (max-width:540px){ } /******************************************************************************* @media ~480px *******************************************************************************/ @media all and (max-width:490px){ .section01 .title h3{font-size:30px;line-height:1.3;} .section01 .title h3:after{width:80px;} .section01 .title h4{font-size:20px;margin:0 0 8px 0;} .section01 .title p{font-size:17px;line-height: 29px;} .section01 .btnbox a{min-width:220px; width:auto;font-size:18px;height: 50px;gap: 10px; text-align:left;padding:0 10px 0 24px;} .section01 .btnbox a span {width:40px; height:40px;} .section01 .btnbox a span img{width:16px;} .section02 .prd_wrap a{padding:40px 40px 0;height: 260px;} .section02 .prd_wrap a .tbox h3{font-size:30px;} .section02 .prd_wrap a .tbox h4{margin:0 0 5px 0;font-size:15px; line-height: 25px;} .section03 .title h4{font-size:20px;margin:0 0 8px 0;} .section03 .title h3{font-size:30px;line-height:1.3;} .section03 .title h3:after{width:80px;} .section03 .title p{font-size:17px;line-height: 29px;word-break:keep-all;} .section03 .sch_box{padding-left:20px;height:60px;} .section03 .sch_box label p {font-size: 17px;padding-right: 10px;} .section03 .sch_box label input{font-size:16px; padding:5px 0 5px 10px;} .section03 .sch_box .s_btn{height:60px;width:70px;} .section03 .sch_box .s_btn img{width:20px;} .section03 .best h4{font-size:23px;} .section03 .best ul{flex-direction:column;align-items:center;gap:10px;} .section03 .best ul li{min-width:250px;height:55px;font-size:17px;} .section04 .title h3{font-size:30px;line-height:1.3;} .section04 .title p{font-size:17px;line-height: 29px;} .section04 ul.news{ grid-template-columns: repeat(1, 1fr);} } /******************************************************************************* @media ~360px *******************************************************************************/ @media all and (max-width:360px){ }