/* Slider */ .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; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } [data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)} /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 웹폰트 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ @font-face { font-family: 'Pretendard Variable'; font-weight: 45 920; font-style: normal; font-display: swap; src: local('Pretendard Variable'), url('/css/charm/font/PretendardVariable.woff2') format('woff2-variations'); } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Thin.woff') format('woff'); font-weight: 100; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-ExtraLight.woff') format('woff'); font-weight: 200; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Light.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; } @font-face { font-family: 'Pretendard'; src: url('/css/charm/font/Pretendard-Black.woff') format('woff'); font-weight: 900; font-display: swap; } /* SBAggro */ @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroL.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroL.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroM.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroM.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'SBAggro'; src: url('/css/charm/font/SB/SBAggroB.woff2') format('woff2'), url('/css/charm/font/SB/SBAggroB.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// reset css ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ * { box-sizing:border-box; } html, body { height:100%; } html { font-size:10px; font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; color:#333; font-weight:300; line-height: 1.2; } body{min-width:320px; word-break: keep-all; overflow-x:hidden; letter-spacing:-0.01rem; margin:0 auto; font-size:1.6rem; line-height:1.6; } body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,a,button,select {margin:0;padding:0;box-sizing:border-box; word-break:keep-all;} body,input,textarea,select,button,table,label {-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none; text-size-adjust:none; font-weight:300; font-family:'SBAggro', 'Pretendard', 'Noto Sans KR','Apple SD Gothic Neo', sans-serif; color:var(--text-dkgrey); } a {text-decoration:none;} a:link {text-decoration:none; color:#575757;} a:visited {text-decoration:none; color:#575757; } a:active {text-decoration:none; color:#575757;} a:hover {text-decoration:none;} ul, li{list-style:none;} caption,legend,.blind{overflow:hidden;position:absolute;top:0;left:-9999px;width:0;height:0;font-size:0;line-height:0;text-align:left;} input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button], select {width:100%; height:4.0rem;padding:0 15px;border:1px solid #ccc; color:#333;vertical-align:middle; font-size:1.6rem; background:#fff; } input[type=password],input[type=email]{ime-mode:disabled;} input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, select:focus, textarea:focus{border:1px solid #999;} input[type=file]{width:100%;height:4.0rem;border:1px solid #ccc;background:#fff;} textarea{width:100%;padding:10px;border:1px solid #ccc;resize:none; font-size:1.6rem; color:#333;} table{width:100%;border-collapse:collapse;border-spacing:0;} button[type='button'], input[type='button'] {cursor:pointer;} select option { font-weight:300;} input::placeholder, textarea::placeholder { color:#999; } img { max-width:100%;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { } @media all and (max-width: 768px) { input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button] { padding:0 10px; font-size:1.5rem;} textarea{font-size:1.5rem;} select {padding-left:10px; font-size:1.5rem; } } @media all and (max-width: 480px) { input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=button], select {font-size:1.4rem; } textarea{font-size:1.4rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ /* 색상 */ :root { --gra-main-90deg: linear-gradient(0deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-main--90deg: linear-gradient(180deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-main: linear-gradient( 90deg, rgb(199,123,163) 0%, rgb(170,144,188) 100%); --gra-pink: linear-gradient(90deg, rgb(199,121,139) 0%, rgb(218,172,163) 100%); --gra-yellow: linear-gradient( 90deg, rgb(245,177,70) 0%, rgb(244,215,165) 100%); --gra-blue: linear-gradient( 90deg, rgb(121,170,198) 0%, rgb(151,193,184) 100%); --gra-green: linear-gradient( 90deg, rgb(144,185,98) 0%, rgb(184,212,116) 100%); --gra-bp: linear-gradient( -90deg, rgb(154,95,152) 0%, rgb(127,102,155) 28%, rgb(82,152,169) 100%); --main : #c77ba3; --pink:#c7798b; --purple: #aa90bc; --blue:#75a5bf; --green:#8eb179; --yellow:#f0a93b; --orange: #f26822; --border-ltgrey: #efefef; --text-main:#ab5683; --text-pink:#bd687b; --text-purple:#8d69a5; --text-blue:#619cbc; --text-green:#7da962; --text-yellow:#f0a93b; --text-black:#101010; --text-dkgrey:#333; --text-grey:#575757; --text-ltgrey:#777; --text-ltgrey01:#999; --text-white:#fff; } /* 배경 그라디언트 */ .bg-gra-main { background:var(--gra-main) !important; } .bg-gra-main-90deg { background:var(--gra-main-90deg) !important; } .bg-gra-main--90deg { background:var(--gra-main--90deg) !important; } .bg-gra-pink { background:var(--gra-pink) !important; } .bg-gra-yellow { background:var(--gra-yellow) !important; } .bg-gra-blue { background: var(--gra-blue) !important; } .bg-gra-green { background:var(--gra-green) !important; } .bg-white { background:#fff !important; } /* 폰트 색상*/ .text-main { color:var(--text-main) !important; } .text-pink { color:var(--text-pink) !important; } .text-blue { color:var(--text-blue) !important; } .text-green { color:var(--text-green) !important; } .text-black { color:var(--text-black) !important; } .text-dkgrey { color:var(--text-dkgrey) !important; } .text-grey { color:var(--text-grey) !important; } .text-white { color:#fff !important; } .hidden { position:absolute; font-size:0; line-height:0; left:-10000px; padding:0 !important; margin:0; height:0;} .f-left {float:left !important;} .f-right {float:right !important;} .dis-block {display:block !important;} .dis-none {display:none !important;} .text-c {text-align:center !important;} .text-l {text-align:left !important;} .text-r {text-align:right !important;} .vt-t {vertical-align:top !important;} .vt-m {vertical-align:middle !important;} .vt-b {vertical-align:bottom !important;} .bg-none {background:none !important;} .border-none {border:none !important;} .clearfix:after {content:"";display:block;clear:both;} .text-vc { margin-bottom:-3px; } /* 텍스트 디자인상 세로방향 가운데 정렬 문제*/ .flex-c { display:flex; justify-content:center;} .w100p { width:100% !important;} /* ios */ a[x-apple-data-detectors] { color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important; white-space:nowrap; } .mt0 { margin-top:0rem !important; } .mt5 { margin-top:0.5rem !important; } .mt10 { margin-top:1rem !important; } .mt20 { margin-top:2rem !important; } .mt30 { margin-top:3rem !important; } .mt40 { margin-top:4rem !important; } .mt50 { margin-top:5rem !important; } .mt60 { margin-top:6rem !important; } .mt70 { margin-top:7rem !important; } .mt80 { margin-top:8rem !important; } .mt90 { margin-top:9rem !important; } .mt100 { margin-top:10rem !important; } .mb0 { margin-bottom:0rem !important; } /* 버튼 */ .btn { height:4.0rem; line-height:4.0rem; padding:0 2.0rem; font-size:1.6rem; color:#000; border:1px solid #b6b6b8; background:#fff; text-align:center; display:inline-block; border-radius:4px; cursor:pointer; } .buttonBig { padding:0 2.5rem; width:auto; height:56px; line-height:58px; font-size:1.8rem; font-weight:300; border-radius:28px; display:inline-block; cursor:pointer; } .buttonBig.arrow { display:inline-flex; gap:30px; padding:0 10px 0 25px; justify-content:flex-start; align-items:center; transition:all 0.3s; } .buttonBig.arrow:after { content:''; width:40px; aspect-ratio:1/1; border-radius:50%; } .buttonBig.arrow:hover { gap:45px; transition:all 0.3s;} .btn.small { height:3.0rem; line-height:3.0rem; padding:0 1.0rem; font-size:1.4rem; font-weight:300; } .purpleBtn { background:var(--gra-main); color:#fff !important; border:none; } .pinkBtn { background:var(--gra-pink); color:#fff !important; border:none; } .yellowBtn { background:var(--gra-yellow); color:#fff !important; border:none; } .blueBtn { background:var(--gra-blue); color:#fff !important; border:none; } .greenBtn { background:var(--gra-green); color:#fff !important; border:none; } .bpBtn { background:var(--gra-bp); color:#fff !important; border:none;} .greyBtn { background:#ccc; color:#555 !important; border:none; } .pinkBtn.arrow:after { background:#fff url(../images/common/btn_arw_pink.png)center; background-size:contain; } .yellowBtn.arrow:after { background:#fff url(../images/common/btn_arw_yellow.png)center; background-size:contain; } .blueBtn.arrow:after { background:#fff url(../images/common/btn_arw_blue.png)center; background-size:contain; } .greenBtn.arrow:after { background:#fff url(../images/common/btn_arw_green.png)center; background-size:contain; } .purpleBtn.arrow:after { background:#fff url(../images/common/btn_arw_purple.png)center; background-size:contain; } .border2Btn { border:2px solid #efefef; } .buttonBig.border2Btn { line-height:56px; } .brGreenBtn { border:2px solid var(--green); color:var(--text-green) !important; } .brPinkBtn { border-color:2px solid var(--pink); color:var(--text-pink) !important;} .brPurpleBtn { border-color:2px solid var(--main); color:var(--text-main) !important;} .brGreenBtn.arrow:after { background:var(--green) url(../images/common/btn_arw_white.png)center; background-size:contain; } .brPinkBtn.arrow:after { background:var(--pink) url(../images/common/btn_arw_white.png)center; background-size:contain; } .brPurpleBtn.arrow:after { background:var(--main) url(../images/common/btn_arw_white.png)center; background-size:contain; } /* 말줄임 */ .line1-text-eps { white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; display:block; } .line2-text-eps { display:block; line-height:1.5em; max-height:3em; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } .line3-text-eps { display:block; line-height:1.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } .line4-text-eps { display:block; line-height:1.5em; max-height:6em; display:-webkit-box; -webkit-line-clamp:4; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; } /* 리스트 */ ul.list_bullet > li { padding-left:0.8rem; /*line-height:1.5;*/ position:relative; } ul.list_bullet > li:before { content:''; width:3px; height:3px; border-radius:50%; background:#666; display:block; position:absolute; left:0; top:0.9rem; } ul.list_bullet > li + li { margin-top:0.8rem; } /* 테이블 */ table { border-collapse:collapse; } table.table { position:relative; } table.table th, table.table td { padding:1rem 2rem; line-height:1.5; border:1px solid #dfdfdf; } table.table th { font-weight:500; color:var(--text-dkgrey); background:#f9f9f9; font-size:1.6rem; } table.table td { font-weight:300; color:var(--text-grey); background:#fff; font-size:1.5rem; } table .trDiv th, table .trDiv td { border-top-width:2px; border-top-color:#ccc; } table.table.purple .th-top th { background:var(--main); color:#fff; font-weight:300; border-color:#a6547f; } table.table.pink thead th { background:var(--pink); color:#fff; font-weight:300; border-color:#b46174; } table.table.blue thead th { background:var(--blue); color:#fff; font-weight:300; border-color:#5b8ea9; } table.table.green thead th { background:var(--green); color:#fff; font-weight:300; border-color:#72955d;} table.td-center td { text-align:center; } table .td-center { text-align:center; } table.tableS th, table.tableS td { padding:1rem; line-height:1.2; border:1px solid #efefef; font-size:1.3rem; font-weight:300; } /* check, radio 타입 */ span.check_type { position:relative; padding-left:15px; cursor:pointer; } span.check_type input[type="checkbox"], span.check_type input[type="radio"] { display:none; } span.check_type input + label { font-size:1.5rem; } span.check_type input + label:before { width:12px; height:12px; content:''; display:block; position:absolute; top:50%; left:0; background:url(../images/common/check_type.png); background-size:100%; background-position:0 -100%; transform:translateY(-50%); } span.check_type input:checked + label:before { background-position:0 0; } .notScroll { top:0; position:fixed; overflow:hidden; width:100%; } /* /////////////// Skip Navigation ////////////////////// */ .skipNav {font-size:0; line-height:0; } .skipNav a {display:block; width:100%; color:#fff; position:absolute; left:0; top:-100px; text-align:center; background:#101010; border:0 none;z-index:1000; font-size:1.4rem; } .skipNav a:focus, .skipNav a:hover, .skipNav a:active {top:0; font-weight:bold;font-size:14px;line-height:39px; outline:2px dotted red; } *:focus {/*border:1px dotted blue;*/} /* 토스트 메시지 */ .toast-container { position:fixed; left:50%; bottom:20%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:9999; pointer-events:none; } .toast-msg { min-width:260px; max-width:360px; padding:10px 14px; line-height:1.1; border-radius:8px; color:#fff; font-size:14px; line-height:1.4; box-shadow:0 4px 12px rgba(0,0,0,0.25); display:flex; align-items:flex-start; gap:8px; opacity:0; transform:translateY(12px); pointer-events:auto; animation:toast-slide-in 0.25s ease-out forwards, toast-fade-out 0.35s ease-in forwards 2.7s; } /* 타입별 스타일 */ .toast-msg.info { background:rgba(40,40,40,0.95); } .toast-msg.success { background:var(--gra-main); } .toast-msg.error { background:rgba(40,40,40,0.95); } .toast-msg.warn { background:rgba(40,40,40,0.95); } .toast-icon { flex:0 0 auto; font-size:16px; margin-top:1px; } .toast-text { flex:1 1 auto; } /* 애니메이션 - 아래에서 위로 */ @keyframes toast-slide-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } } @keyframes toast-fade-out { from { opacity:1; } to { opacity:0; } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { *:focus {border:none;} html { font-size:9.5px; } /* 버튼 */ .btn { font-size:1.5rem; } .buttonBig { height:52px; font-size:1.7rem; border-radius:26px; line-height:56px; } .buttonBig.arrow { padding:0 8px 0 25px; } .buttonBig.arrow:after { width:36px; } .buttonBig.border2Btn { line-height:52px; } } @media all and (max-width: 1024px) { table.table th, table.table td { padding:1rem; font-size:1.5rem;} } @media all and (max-width: 768px) { html { font-size:9px; } .not_scroll{ position:fixed; overflow:hidden; width:100%; } /* 버튼 */ .buttonBig { height:46px; font-size:1.55rem; border-radius:23px; line-height:50px;} .buttonBig.arrow { padding:0 5px 0 23px; gap:20px; } .buttonBig.arrow:after { width:36px; } .buttonBig.border2Btn { line-height:46px; } /* 테이블 */ table.table th, table.table td { padding:1rem; } /* 리스트 */ ul.list_bullet li + li { margin-top:0.8rem; } } @media all and (max-width: 768px) { .table_wrap { overflow-x: auto; width:100%; } .table_wrap table { max-width:768px; min-width:720px;} } @media all and (max-width: 480px) { /* 버튼 */ .buttonBig { height:40px; font-size:1.5rem; border-radius:18px; font-weight:300; line-height:40px;} .buttonBig.arrow { padding:0 5px 0 20px; gap:10px; } .buttonBig.arrow:after { width:26px; } .buttonBig.border2Btn { line-height:36px; } /* 테이블 */ table.table th, table.table td { font-size:1.44rem; font-weight:300;} table.mobile_block { display:block; width:100%; border-top:1px solid #ccc; } table.mobile_block colgroup, table.mobile_block col, table.mobile_block tr, table.mobile_block th, table.mobile_block td { display:block; } table.mobile_block th { border-bottom:0; border-top:0; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// header ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .nav_wrapper { position:fixed; top:0; left:0; width:100%; transition:all 0.3s ease-out; height:110px; z-index:100; opacity:1; background:rgba(255,255,255,0.9); backdrop-filter: blur(5px); box-shadow:0 2px 10px rgba(0,0,0,0.1); } .nav_wrapper.open { background:rgba(255,255,255,1); } .nav_wrapper.scroll { top:-40px; } .nav_wrapper .inner { width:100%; max-width:1660px; margin:0 auto; padding:0 30px; display:flex; align-items:center; } .nav_wrapper.enter {-webkit-animation:enter 2s forwards; animation:enter 2s forwards; animation-delay:0s; } /* .nav_wrapper:after { position:absolute; top:100%; left:0; width:100%; height:50px; content:''; background:linear-gradient( to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0) ); } */ .headerTop { position:relative; } .headerTop .inner { justify-content:flex-end; gap:20px; height:40px; } .headerTop .memberBtns { display:flex; align-items:center; height:32px; background:var(--gra-main); border-radius:16px; padding:0 5px; } .headerTop .memberBtns a { display:flex; align-items:center; } .headerTop .memberBtns a:not(:last-child):after { display:block; content:''; width:1px; height:12px; background:rgba(255,255,255,0.3); } .headerTop .memberBtns a span { color:#fff; display:inline-block; font-size:1.4rem; padding:0 15px; line-height:32px; translate: 0 2px; } .headerTop .snsBtns { display:flex; align-items:center; gap:5px; } .headerTop .snsBtns a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .headerTop .snsBtns a.cafe { background:url(../images/common/sns_cafe_g.png)center; background-size:contain; } .headerTop .snsBtns a.blog { background:url(../images/common/sns_blog_g.png)center; background-size:contain; } .headerTop .snsBtns a.youtube { background:url(../images/common/sns_youtube_g.png)center; background-size:contain; } .headerTop .snsBtns a.insta { background:url(../images/common/sns_insta_g.png)center; background-size:contain; } .headerTop .snsBtns a.mall { font-size:1.4rem; font-weight:300; color:var(--text-ltgrey); display:flex; align-items:center; } .headerTop .snsBtns a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_g.png); background-size:100%; } .headerTop .snsBtns a.mall:before {width:1px; height:12px; content:''; display:block; background:#ccc; margin:0 15px 0 10px; } .headerBottom { height:70px; } .headerBottom .inner { display:flex; justify-content:space-between; gap:30px; } .logo { width:20%; max-width:240px; display:flex; align-items:center; flex-shrink:0; } .logo a { display:block; width:100%; aspect-ratio:240/48; background:url(../images/common/logo.png)center no-repeat; background-size:100%; } .gnbWrap { flex-grow:1; max-width:1100px; height:70px; position:relative; } .gnbWrap .gnbMenu { display:flex; justify-content:flex-end; } .gnbWrap .gnbMenu .navi { display:flex; justify-content:space-between; width:100%; } .gnbWrap .gnbMenu .navi > li { text-align:center; position:relative; flex-grow:1; } .gnbWrap .gnbMenu .navi > li:last-child { /*text-align:right; flex-grow:0.5;*/ } .gnbWrap .gnbMenu .navi > li > a { color:#333; font-size:1.6rem; line-height:70px; font-weight:500; display:block; width:100%; white-space:nowrap; position:relative; } /* .gnbWrap .gnbMenu .navi .subMenu { position:absolute; top:60px; left:0; width:auto; min-width:100%; padding:15px; box-shadow: 0 5px 10px rgba(0,0,0,0.1); z-index:1000; display:none; border-radius:0 16px 0 16px; background: var(--gra-main-90deg); } */ .gnbWrap .gnbMenu .navi .subMenu { width:100%; z-index:1000; display:none; padding:10px 5px 10px 5px; position:absolute; top:100%; left:0; width:100%; } .gnbWrap .gnbMenu .navi .subMenu li { text-align:center; } .gnbWrap .gnbMenu .navi .subMenu li a { display:block; font-size:1.5rem; color:var(--text-dkgrey); line-height:1.4; transition: all 0.3s ease; padding:8px 0; } .gnbWrap .gnbMenu .navi .on > a, .gnbWrap .gnbMenu .navi .current > a { color:var(--text-main);} .gnbWrap .gnbMenu .navi .on .subMenu { background: var(--gra-main-90deg); border-radius:1.0rem 0 2.0rem 0; } .gnbWrap .gnbMenu .navi .on .subMenu li a { color:#fff; } .gnbWrap .gnbMenu .navi .subMenu li a:hover { color:#facce3; font-weight:500; } .gnbWrap .nav-scroll-arrow { display:none;} .sitemapWrap { display:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .nav_wrapper { height:100px !important; } .nav_wrapper.scroll { top:0px; } .nav_wrapper .inner { padding:0; } .headerTop { position:absolute; top:0; right:20px; height:60px; display:flex; align-items:center; } .headerTop .inner { gap:4px; } .headerTop .memberBtns { height:40px; background:transparent; border-radius:0px; padding:0; } .headerTop .memberBtns a:not(.login) { display:none; } .headerTop .memberBtns a:after { display:none !important;} .headerTop .memberBtns a.login { width:40px; background:url(../images/common/icon_login.png)center no-repeat; background-size:100%; font-size:0; text-indent:-10000px;} .headerTop .memberBtns a.login span { line-height:40px; padding:0; } .headerTop .memberBtns a.login.out { width:40px; background:url(../images/common/icon_logout.png)center no-repeat; background-size:100%; font-size:0; text-indent:-10000px;} .headerTop .snsBtns { display:none; } .headerBottom { height:100px; } .headerBottom .inner { gap:0; flex-wrap:wrap; } .logo { width:100%; height:60px; padding:0 20px; } .logo a { display:block; width:auto; height:40px; aspect-ratio:240/48; } .gnbWrap { width:100%; height:40px; border-top:1px solid #d4d4d4; border-bottom:1px solid #d4d4d4; } .gnbWrap .gnbMenu { justify-content:center; } .gnbWrap .gnbMenu .navi { justify-content:space-evenly; } .gnbWrap .gnbMenu .navi > li > a { line-height:40px; font-size:1.5rem; } .gnbWrap .gnbMenu .navi .subMenu { display:none !important;} .spinner-master { z-index:100; text-align:center; display:block; width:40px; aspect-ratio: 1/1; position:relative; } .spinner-master * { transition:all 0.3s; box-sizing:border-box; } .spinner-master .spinner-spin {width:100%; height:100%; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; cursor:pointer; } .spinner-master .spinner-spin .spinner { height:2px; width:24px; padding:0; background:var(--main); border-radius:2px; } .sitemapWrap { position:fixed; z-index:1000;display:block; } .sitemapWrap .sitemapBg { position:fixed; top:0; right:-100vw; background:#fff; width:100vw; height:100%; min-height:100%; z-index:1000; transition: right 0.4s cubic-bezier(0.77,0,0.175,1); } .sitemapWrap .sitemap { width:100vw; min-height:100%; overflow-y:auto; z-index:1001; position:fixed; top:0; right:-100vw; transition: right 0.4s cubic-bezier(0.77,0,0.175,1); } .sitemapWrap.active .sitemapBg { right:0; } .sitemapWrap.active .sitemap { right:0; } .sitemap .sitemapHeader { display:flex; justify-content:space-between; align-items:center; padding:0 30px; background:var(--gra-main); height:60px; } .sitemap .sitemapHeader .memberBtns01 { display:flex; align-items:center; } .sitemap .sitemapHeader .memberBtns01 a { color:#fff; font-size:1.6rem; display:flex; align-items:center; } .sitemap .sitemapHeader .memberBtns01 a:not(:last-child):after { display:block; content:''; width:1px; height:12px; background:rgba(255,255,255,0.3); margin:0 10px; } .sitemap .menuWrap { padding:30px 20px; } .sitemap .menuWrap > li { border-top:1px solid #efefef; } .sitemap .menuWrap > li:last-child { border-bottom:1px solid #efefef; } .sitemap .menuWrap .depth01 { height:50px; padding:0 0 0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; } .sitemap .menuWrap .depth01 a { font-size:1.8rem; font-weight:500; color:var(--text-dkgrey); flex-grow:1; } .sitemap .menuWrap .depth01.open a { color:var(--text-main); } .sitemap .menuWrap .depth01 .arrow { width:40px; height:100%; flex-shrink:0; content:''; background:url(../images/common/menu_down.png)center no-repeat; background-size:100%; } .sitemap .menuWrap .depth01.open .arrow { background:url(../images/common/menu_up.png)center no-repeat; background-size:100%; } .sitemap .menuWrap .depth02 { background:#f7f7f7; padding:8px 10px; display:none; border-top:1px solid #efefef; } .sitemap .menuWrap .depth02 a { font-size:1.6rem; color:var(--grey); font-weight:300; padding:7px 10px; position:relative; display:block; width:100%;} .sitemap .menuWrap .depth02 a.current { color:var(--text-main); font-weight:500;} .sitemap .menuWrap .depth02 a:before { width:3px; height:3px; content:''; display:block; background:var(--main); border-radius:50%; opacity:0; position:absolute; top:50%; left:0px; margin-top:-2px;} .sitemap .menuWrap .depth02 a.current:before { opacity:1; } .sitemap .snsBtns01 { display:flex; align-items:center; gap:5px; padding:0 30px; } .sitemap .snsBtns01 a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .sitemap .snsBtns01 a.cafe { background:rgba(192,123,163,0.6) url(../images/common/sns_cafe_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.blog { background:rgba(192,123,163,0.6) url(../images/common/sns_blog_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.youtube { background:rgba(192,123,163,0.6) url(../images/common/sns_youtube_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.insta { background:rgba(192,123,163,0.6) url(../images/common/sns_insta_w.png)center; background-size:contain; } .sitemap .snsBtns01 a.mall { font-size:1.4rem; font-weight:300; color:#fff; display:flex; align-items:center; background:rgba(192,123,163,0.6); padding:0 15px; border-radius:18px; } .sitemap .snsBtns01 a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_w.png); background-size:100%; } .sitemapWrap .sitemap_close { width:40px; aspect-ratio:1/1; position:relative; background:transparent; border:0;} .sitemapWrap .sitemap_close .bar { position:absolute; top:50%; left:50%; width:24px; height:2px; border-radius:2px; background:#fff; translate: -50% 0; } .sitemapWrap .sitemap_close .bar:nth-child(1) { transform:rotate(45deg); } .sitemapWrap .sitemap_close .bar:nth-child(2) { transform:rotate(-45deg); } } @media all and (max-width: 768px) { .gnbWrap .gnbMenu { width:100%; position:relative; overflow: hidden; } .gnbWrap .gnbMenu .navi { min-width:100%; width:auto; overflow-x:auto; display:flex; justify-content:flex-start; gap:12px; scrollbar-width:none; padding:0 12px; } .gnbWrap .gnbMenu .navi::-webkit-scrollbar { display:none; } .gnbWrap .gnbMenu .navi > li > a { font-size:1.5rem; font-weight:300; letter-spacing:-0.05em;} .gnbWrap .gnbMenu .navi .m_hidden { display:none; } .gnbWrap .nav-scroll-arrow { position:absolute; top:0; width:15px; height:calc(100% - 2px); border:none; z-index:100; opacity:0; pointer-events:none; transition:opacity 0.25s; } .gnbWrap .nav-scroll-arrow-right { right:0; background:rgba(255,255,255,0.8) url('../images/common/slide_next.png') center no-repeat; background-size:30px auto; } .gnbWrap .nav-scroll-arrow-left { left:0; background: rgba(255,255,255,0.9) url('../images/common/slide_prev.png') center no-repeat; background-size: 30px auto; } .gnbWrap .gnbMenu.show-arrow .nav-scroll-arrow, .gnbWrap .gnbMenu.show-arrow .nav-scroll-arrow-left { opacity:1; pointer-events:auto; } .sitemap .sitemapHeader { padding:0 20px; } .sitemap .sitemapHeader .memberBtns01 a { font-size:1.4rem;} .sitemap .menuWrap .depth01 a { font-weight:300; font-size:1.7rem;} .sitemap .menuWrap .depth02 a { font-size:1.5rem; } } @media all and (max-width: 480px) { .logo a { height:30px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// footer ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .footer { width:100%; background:var(--gra-main); border-radius:30px 30px 0 0; overflow:hidden; color:#fff; padding-top:30px; } .footer .inner { width:100%; max-width:1660px; margin:0 auto; padding:0 30px; } .certiAgency { width:100%; padding:0 40px; height:80px; display:flex; align-items:center; border-radius:40px; background:#fff; box-shadow:0 0 15px rgba(131,46,101,0.3); } .certiAgency ul { width:100%; display:flex; justify-content:space-evenly;} .footTop { margin:30px 10px 0; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:5px; } .footTop .footMenu { display:flex; align-items:center; } .footTop .footMenu a { color:#fff; position:relative; font-size:1.5rem; display:flex; align-items:center; } .footTop .footMenu a:not(:last-child):after { content:''; display:block; width:1px; height:12px; background:rgba(255,255,255,0.2); margin:0 15px; } .footSns { display:flex; align-items:center; gap:5px; } .footSns a:not(.mall) { width:36px; aspect-ratio:1/1; border-radius:50%; } .footSns a.cafe { background:rgba(255,255,255,0.1) url(../images/common/sns_cafe_w.png)center; background-size:contain; } .footSns a.blog { background:rgba(255,255,255,0.1) url(../images/common/sns_blog_w.png)center; background-size:contain; } .footSns a.youtube { background:rgba(255,255,255,0.1) url(../images/common/sns_youtube_w.png)center; background-size:contain; } .footSns a.insta { background:rgba(255,255,255,0.1) url(../images/common/sns_insta_w.png)center; background-size:contain; } .footSns a.mall { font-size:1.4rem; font-weight:300; color:#fff; display:flex; align-items:center; background:rgba(255,255,255,0.1); padding:0 15px; border-radius:18px; } .footSns a.mall .icon { width:36px; aspect-ratio: 1/1; background:url(../images/common/mall_icon_w.png); background-size:100%; } .footBottom { margin:50px 10px 80px; display:flex; justify-content:space-between; align-items:flex-end; } .footBottom .footAddress { display:flex; gap:30px; font-size:1.5rem; color:#fff; white-space:nowrap; max-width:780px; } .footBottom .footAddress .company { font-size:2.6rem; font-weight:500; } .footBottom .footAddress .companyAdress { display:flex; flex-wrap:wrap; gap:10px 10px; } .footBottom .footAddress .companyAdress span { white-space:nowrap; } .footBottom .copyright { white-space:nowrap; font-size:1.4rem; color:rgba(255,255,255,0.8); } @keyframes enter { 25%{ opacity:0; } 100%{ opacity:1; } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .certiAgency ul li img { height:40px; width:auto; } } @media all and (max-width: 1024px) { .certiAgency { padding:0 30px; height:66px; border-radius:33px; } .certiAgency ul { justify-content:space-between; } .certiAgency ul li img { height:30px !important; width:auto; } .footTop .footMenu a { font-size:1.4rem; } .footTop .footMenu a:not(:first-child):before { margin:0 10px; } .footBottom { margin:30px 10px 60px; flex-wrap:wrap; align-items:flex-start; } .footBottom .footAddress {flex-wrap:wrap; gap:20px; width:100%; font-size:1.4rem; } .footBottom .footAddress .companyAdress { gap:7px 10px; } .footBottom .footAddress .company { font-size:2.2rem; } .footBottom .copyright {width:100%; margin-top:25px; font-size:1.3rem; } } @media all and (max-width: 768px) { .certiAgency { height:50px; line-height:50px; border-radius:25px; padding:10px 20px;} .certiAgency ul { width:auto; max-width:100%; gap:15px; justify-content:flex-start; } .certiAgency ul li { margin-right:20px; vertical-align:middle; height:30px;} .footer { padding-top:20px; border-radius: 15px 15px 0 0; } .footer .inner { padding:0 20px; } .footTop { margin:20px 10px 0; flex-wrap:wrap; gap:10px; padding-bottom:15px; } } @media all and (max-width: 480px) { .footTop .footMenu { flex-wrap:wrap; gap:5px 0;} .footTop .footMenu a { font-size:1.3rem; } .footBottom { margin:20px 0 60px; } .footBottom .footAddress { gap:8px; font-size:1.25rem; letter-spacing:0; } .footBottom .footAddress .companyAdress { gap:3px 5px; } .footBottom .footAddress .company { font-size:1.6rem; font-weight:300; } .footBottom .copyright {margin-top:20px; font-size:1.2rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 레이어팝업 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .layerPopWrap { position:fixed; width:100%; height:100%; top:0; bottom:0; left:0; right:0; z-index:1000; display:none; } .layerPopWrap .dimmed { width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.75); } .layerPopWrap .layerPop { position:fixed; width:90%; max-width:1000px; height:auto; top:50%; left:50%; background:#fff; border-radius:20px; transform: translate(-50%, -50%); overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.2); } .layerPop .layerPopHeader { height:60px; padding:0 35px; display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--main); } .layerPop .layerPopHeader .layerPop_tit { flex-grow:1; font-size:2.4rem; color:#fff; font-weight:500; } .layerPop .layerPopHeader .layerClose { width:40px; aspect-ratio: 1/1; flex-shrink:0; background:url(../images/common/layer_close_white.png)no-repeat center; background-size:100%; border:0; cursor:pointer; } .layerPop .layerPopCenter { padding:35px; font-size:1.6rem; color:var(--text-grey); max-height:85vh; overflow-y:auto; position:relative; } .layerPop .layerPop_tit_1 { font-size:2.0rem; color:var(--black); font-weight:500; } .layerPop .layerPop_tit_1:not(:first-child) { margin-top:30px;} /* 간편상담신청 레이어 */ #counselLayer.layerPopWrap .layerPop { height:90vh; position:relative; } #counselLayer .layerPop .layerPopCenter { height:calc(100% - 60px); padding-bottom:100px; } #counselLayer .layerPop_tit_1 small { font-size:1.4rem; font-weight:300; } #counselLayer .layerPop_tit_1 small .orange { color:var(--orange); } #counselLayer .formInputTable { display:flex; gap:5px 10px; flex-wrap:wrap; justify-content:space-between; } #counselLayer .formInputTable .inputItem { width:100%; } #counselLayer .formInputTable .inputItem:not(.w50) { width:100%; } #counselLayer .formInputTable .inputItem.w50 { width:calc(50% - 5px); } #counselLayer .formInputTable .address { display:flex; flex-direction:column; gap:3px; } #counselLayer .formInputTable .address .address_1 { display:flex; gap:10px; width:100%; } #counselLayer .formInputTable .address .address_1 > * { width:calc(50% - 5px); display:flex; } #counselLayer .formInputTable .address .address_1 .postNum { display:flex; justify-content:space-between; gap:3px; } #counselLayer .formInputTable .address .address_2 { width:100%; } #counselLayer .formInputTable .postBtn { background:#a4a4a4; padding:0 10px; border-radius:4px; border:1px solid #a4a4a4; font-size:1.6rem; color:#fff; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { width:100%; border:1px solid #d4d4d4; height:54px; line-height:54px; font-size:1.6rem; color:var(--text-dkgrey); font-weight:300; position:relative; border-radius:4px;} #counselLayer .formInputTable select option { font-weight:300; } #counselLayer .formInputTable .required { display:block; position:relative; } #counselLayer .formInputTable .required:before { content:'*'; color:var(--orange); font-size:1.6rem; position:absolute; top:50%; left:4px; z-index:10; translate: 0 -50%; } #counselLayer .agreeTerm { margin-top:10px; display:flex; gap:10px; margin-bottom:15px; } #counselLayer .term_view { background:#efefef; border-radius:4px; padding:0 10px; font-size:1.3rem; height:22px; line-height:24px; border:0; } #counselLayer .btmBtnWrap { display:flex; justify-content:center; gap:5px; position:absolute; bottom:0; left:0; width:100%; padding:20px 35px; background:rgba(255,255,255,0.9); } #counselLayer .btmBtnWrap .counselBtn { padding:0 80px; height:56px; background:var(--gra-main); color:#fff; font-size:2.0rem; font-weight:500; border-radius:28px; border:0; display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:100; } #counselLayer .serviceSelWrap { display:flex; gap:10px; justify-content:space-between; } #counselLayer .serviceSelWrap .serviceSel { width:calc(33.3333% - 20px/3); flex-grow:1;} #counselLayer .serviceSelWrap .serviceSel input[type="radio"] { display:none; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.6rem; color:var(--black); font-weight:500; height:60px; border:2px solid #efefef; border-radius:6px; display:flex; justify-content:space-between; align-items:center; padding:0 15px; transition:all 0.3s; cursor:pointer;} #counselLayer .serviceSelWrap .serviceSel label .check { transition:all 0.3s; width:20px; aspect-ratio: 1/1; border-radius:50%; background:#efefef url(../images/common/check_icon.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.pink input:checked + label { border-color:var(--pink); color:var(--text-pink); } #counselLayer .serviceSelWrap .serviceSel.pink input:checked + label .check { background:var(--pink) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.blue input:checked + label { border-color:var(--blue); color:var(--text-blue); } #counselLayer .serviceSelWrap .serviceSel.blue input:checked + label .check { background:var(--blue) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } #counselLayer .serviceSelWrap .serviceSel.green input:checked + label { border-color:var(--green); color:var(--text-green); } #counselLayer .serviceSelWrap .serviceSel.green input:checked + label .check { background:var(--green) url(../images/common/check_icon_white.png)no-repeat; background-size:100%; } .termLayer { max-height:150px !important; overflow-y:auto; border:1px solid #efefef; padding:15px; } .termLayer .termTitle { font-size:1.8rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:10px; } .termLayer .termDetailBox { font-size:1.5rem; line-height:1.5; color:var(--text-grey); } #counselLayer .formInputTable .inputItem .captcha_box { display:flex; gap:5px; align-items:center; } #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { width:auto; height:52px; border-radius:4px; overflow:hidden;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .layerPopWrap .dimmed { display:none; } .layerPopWrap .layerPop { width:100%; max-width:initial; height:100%; border-radius:0; } .layerPop .layerPopCenter { max-height:calc(100% - 60px); } #counselLayer.layerPopWrap .layerPop { height:100vh; } } @media all and (max-width: 768px) { .layerPop .layerPopHeader { padding:0 20px; } .layerPop .layerPopHeader .layerPop_tit { font-size:2.0rem; } .layerPop .layerPopCenter { padding:20px;} .layerPop .layerPop_tit_1 { font-size:1.8rem; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.55rem; height:44px; padding:0 10px; } #counselLayer .serviceSelWrap .serviceSel label .check { width:18px; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { height:44px; line-height:44px; font-size:1.55rem; } #counselLayer .btmBtnWrap .counselBtn { height:50px; font-size:1.8rem; } #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { height:42px;} } @media all and (max-width: 480px) { #counselLayer .serviceSelWrap { gap:3px; } #counselLayer .serviceSelWrap .serviceSel label { font-size:1.5rem; height:40px; padding:0 5px; } #counselLayer .serviceSelWrap .serviceSel label .check { width:16px; } #counselLayer .formInputTable input[type="text"], #counselLayer .formInputTable input[type="date"], #counselLayer .formInputTable input[type="number"], #counselLayer .formInputTable select { height:40px; line-height:40px; font-size:1.44rem; } #counselLayer .btmBtnWrap .counselBtn { height:44px; font-size:1.6rem; } #counselLayer .formInputTable .address .address_1 { flex-direction:column; gap:3px;} #counselLayer .formInputTable .address .address_1 > * { width:100%;} #counselLayer .formInputTable .inputItem.w50 { width:100%;} #counselLayer .formInputTable .inputItem .captcha_box .captchaImg { height:38px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 하단고정 간편상담 신청 버튼 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .btmFixedBanner { position:fixed; bottom:0; left:0; right:0; background:linear-gradient( 90deg, rgba(199,123,163,0.75) 0%, rgba(170,144,188,0.75) 100%); padding:18px 20px; z-index:100; backdrop-filter: blur(5px); border-radius:30px 30px 0 0; opacity:1; transition:all 0.3s; } .btmFixedBanner .btmCounselWrap { display:flex; justify-content:center; align-items:center; gap:10px; color:#fff; font-size:2.0rem; font-weight:500; } .btmFixedBanner .btmCounselWrap .btmCounselInput { display:flex; gap:10px; width:500px; justify-content:space-between; } .btmFixedBanner .btmCounselWrap .inputBox { height:44px; background:#fff; padding:0 10px; border-radius:6px; flex:1 1 50%; display:flex; justify-content:center; align-items:center; } .btmFixedBanner .btmCounselWrap input[type="text"] { border:0; font-size:1.8rem; padding:0; width:100%; } .btmFixedBanner .btmCounselWrap input:focus { outline:none;} .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:44px; line-height:44px; background:var(--main); color:#fff; font-size:1.8rem; font-weight:500; border-radius:6px; width:250px; border:0; display:flex; justify-content:center; align-items:center; } .btmFixedBanner.scroll { opacity:0; bottom:-200px; transition:all 0.3s;} .rightCounselBtn { transition:all 0.7s; position:fixed; right:85px; bottom:-100px; opacity:0; display:flex; justify-content:center; align-items:center; width:30rem; height:60px; border-radius:30px; background:var(--gra-bp); color:#fff; font-size:1.8rem; font-weight:500; border:0; z-index:100; } .rightCounselBtn:before { content:''; display:block; width:43px; aspect-ratio:52/40; background:url(../images/common/icon_counsel.png)center no-repeat; background-size:contain; } .rightCounselBtn.is-showing { bottom:20px; opacity:1; } .scroll-top { position:fixed; right:20px; bottom:-100px; width:60px; aspect-ratio:1/1; font-size:1.2rem; color:var(--text-main); cursor:pointer; border-radius:50%; opacity:0; z-index:105; transition: all 0.3s; display:flex; justify-content:center; align-items:center; flex-direction:column;gap:5px; background:#fff; border:1px solid var(--main); font-weight:500; } .scroll-top:before { content:''; display:block; width:13px; aspect-ratio: 1/1; background: url(../images/common/icon_top.png)center no-repeat; background-size:contain; } .scroll-top.is-showing { bottom:20px; opacity:1; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .btmFixedBanner { padding:10px 20px; border-radius:15px 15px 0 0; } .btmFixedBanner .btmCounselWrap { gap:10px; } .btmFixedBanner .btmCounselWrap p { display:none; } .btmFixedBanner .btmCounselWrap .btmCounselInput { gap:5px; } .btmFixedBanner .btmCounselWrap .inputBox { height:40px; } .btmFixedBanner .btmCounselWrap input[type="text"] { font-size:1.6rem; } .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:40px; line-height:40px; font-size:1.6rem; width:auto; padding:0 20px; } .rightCounselBtn { right:75px; width:auto; height:50px; border-radius:25px; font-size:1.6rem; padding:0 30px; } .rightCounselBtn:before { width:36px; } .scroll-top { width:50px; } .scroll-top:before { width:12px; } } @media all and (max-width: 768px) { } @media all and (max-width: 480px) { .btmFixedBanner .btmCounselWrap { gap:5px; flex-wrap:wrap; } .btmFixedBanner .btmCounselWrap .inputBox { height:30px; } .btmFixedBanner .btmCounselWrap input[type="text"] { font-size:1.4rem; line-height:24px; height:24px; } .btmFixedBanner .btmCounselWrap .btmCounselBtn { height:32px; line-height:32px; width:100%; } .rightCounselBtn { right:65px; height:40px; border-radius:20px; font-size:1.4rem; } .rightCounselBtn:before { width:26px; } .scroll-top { width:40px; flex-direction:column; gap:3px; } .scroll-top:before { width:10px; } } @charset "utf-8"; /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// main 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section .innerWrap { width:100%; max-width:1800px; margin:0 auto; padding:100px 0; } .section .innerBox { width:100%; max-width:1660px; padding:0 30px; position:relative; margin:0 auto; } .section .article { display:block; } .section .article .artTit { font-size:2.6rem; font-weight:500; color:var(--text-dkgrey);} .section .article .artText { font-size:1.6rem; line-height:1.5; margin-top:1.5rem; color:var(--text-grey); } .section .article .artText strong { font-weight:500; } .section .secTit { font-size:3.6rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:20px; } .section .secTitBig { font-size:4.5rem; font-weight:500; color:var(--text-dkgrey); margin-bottom:20px; line-height:1.2;} .section .roundedBox { border-radius:24px; } .section .moreView { transition:all 0.3s; width:40px; aspect-ratio:1/1; border-radius:50%; border:1px solid #ccc; background: url(../images/common/more.png)center no-repeat; background-size:100%; } .section .moreView:hover { transform:rotate(180deg); transition:all 0.3s;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .section .article .artTit { font-size:2.5rem; } .section .secTit { font-size:3.4rem; } .section .secTitBig { font-size:4.0rem; } } @media all and (max-width: 1024px) { .section .innerWrap { padding:80px 0; } .section .article .artTit { font-size:2.2rem; } .section .article .artText { font-size:1.5rem; } .section .secTit { font-size:3.0rem; margin-bottom:15px; } .section .secTitBig { font-size:3.6rem; margin-bottom:15px; } .section .roundedBox { border-radius:20px; } .section .moreView { width:36px; } } @media all and (max-width: 768px) { .section .innerWrap { padding:60px 0; } .section .innerBox { padding:0 20px; } .section .article .artTit { font-size:2.0rem; } .section .article .artText { font-size:1.5rem; } .section .secTit { font-size:2.8rem; margin-bottom:15px; } .section .secTitBig { font-size:2.8rem; margin-bottom:15px; } .section .roundedBox { border-radius:16px; } .section .moreView { width:36px; } } @media all and (max-width: 480px) { .section .innerWrap { padding:40px 0; } .section .article .artTit { font-size:1.8rem; font-weight:300; } .section .article .artText { font-size:1.4rem; } .section .secTit { font-size:2.2rem; font-weight:300; margin-bottom:12px; } .section .secTitBig { font-size:2.2rem; font-weight:300; margin-bottom:12px; } .section .roundedBox { border-radius:10px; } .section .moreView { width:26px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// 속보게시판 공통 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .boardWrap .boardItem .itemImg { width:100%; aspect-ratio:280/168; border-radius:10px; overflow:hidden; border:1px solid #efefef; } .boardWrap .boardItem .itemImg img {width:100%; height:100%; object-fit:cover; object-position:center; transition: transform 0.3s ease; } .boardWrap .boardItem:hover .itemImg img { transform: scale(1.08); } .boardWrap .boardItem .itemText { padding:15px 3px 0; } .boardWrap .boardItem .itemText .subject { font-size:1.6rem; font-weight:500; color:var(--text-black); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .boardWrap .boardItem .itemText .cntText { font-size:1.4rem; color:var(--text-grey); margin-top:15px; line-height:1.5em; height:4.5em; max-height:4.5em; display:-webkit-box; -webkit-line-clamp:3; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all;} .boardWrap .boardItem .date { margin-top:25px; color:var(--text-grey); font-size:1.3rem; } /* ================================== 반응형 ================================== */ @media all and (max-width: 768px) { .boardWrap .boardItem:hover .itemImg img { transform: scale(1); } } @media all and (max-width: 480px) { .boardWrap .boardItem .itemText .subject { font-size:1.5rem; font-weight:300; } .boardWrap .boardItem .itemText .cntText { font-size:1.4rem; margin-top:7px; line-height:1.3em; height:3.9em; max-height:3.9em; } .boardWrap .boardItem .date { margin-top:10px; font-size:1.22rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// main visual ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .mainVisualWrap { width:100%; position:relative; z-index:1; } .mainVisual { width:100%; position:relative; overflow:hidden; height:800px; } .mainVisual .visualItem { position:relative; width:100%; height:800px; overflow:hidden; } .mainVisual .visualBg {width:100%; position:relative; height:800px; transform:scale(1.1); } .visualItem .visualText { position:absolute; top:25%; left:50%; transform:translate(-50%, 0); width:100%; max-width:1500px; z-index:10; padding:0 30px; } .visualItem .visualText .text_1 { opacity:0;} .visualItem .visualText .text_1 img { height:34px; width:auto; } .visualItem .visualText .text_2 { margin-top:25px; font-size:5.4rem; line-height:1.3; color:var(--text-grey); opacity:0; } .visualItem .visualText .text_2 .crown img { width:78px; } .visualItem .visualText .text_3 { margin-top:50px; opacity:0; display:inline-block; } .visualItem .visualText strong { font-weight:500; } .visualItem .visualText small { font-size:3.6rem; } .visualItem.visual01 .visualText strong { color:var(--text-pink); } .visualItem.visual02 .visualText strong { color:var(--text-yellow); } .visualItem.visual03 .visualText strong { color:var(--text-blue); } .visualItem.visual04 .visualText strong { color:var(--text-green); } .visualItem .visualText .crown img { display:inline !important; vertical-align:middle; } .visualItem.slick-current .text_1 { animation:enterText 0.8s forwards; animation-delay:0.8s; } .visualItem.slick-current .text_2 { animation:enterText 1.0s forwards; animation-delay:1.0s; } .visualItem.slick-current .text_3 { animation:enterText 1.5s forwards; animation-delay:1.5s; } .visualItem .visualBg .visualImg { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%; background-size:cover !important; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1.jpg)center no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2.jpg)center no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3.jpg)center no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4.jpg)center no-repeat;} .visualItem.slick-current .visualBg{ animation:visualBg 2.0s forwards; animation-delay:0.4s; } .mainVisualWrap .slideControl { position:absolute; bottom:150px; left:50%; width:100%; max-width:1500px; translate:-50% 0; z-index:30; display:flex; gap:30px; align-items:center; padding:0 30px; } .mainVisualWrap .arrowSlider { display:flex; gap:0; align-items:center;} .mainVisualWrap .arrowSlider .arrows {width:5.0rem; aspect-ratio: 1/1; border-radius:50%; } .mainVisualWrap .arrowSlider .arrows.prev { background:rgba(255,255,255,0.5) url(../images/common/slide_prev.png)center no-repeat; background-size:contain; border:0;} .mainVisualWrap .arrowSlider .arrows.next { background:rgba(255,255,255,0.5) url(../images/common/slide_next.png)center no-repeat; background-size:contain; border:0; } .mainVisualWrap .slideControl .visualPage { font-size:1.8rem; display:flex; gap:10px; align-items:center;} .mainVisualWrap .slideControl .visualPage .bar { display:block; width:50px; height:1px; background:#999; } .mainVisualWrap .slideControl .visualPage span:not(.bar) { width:25px; text-align:center; } @keyframes visualBg { 0%{ opacity:1; transform:scale(1.1); } 100%{ opacity:1; transform:scale(1.0); } } @keyframes enterText { 0%{ opacity:0; transform: translateY(80px); } 100%{ opacity:1; transform: translateY(0); } } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .mainVisual, .mainVisual .visualItem, .mainVisual .visualBg { height:auto; aspect-ratio:1280/900; min-height:600px; max-width:100%; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1_m.jpg)center no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2_m.jpg)center no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3_m.jpg)center no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4_m.jpg)center no-repeat;} .visualItem .visualText { top:28%; transform:translate(-50%, 0); } .visualItem .visualText .text_1 img { height:28px; width:auto; } .visualItem .visualText .text_2 { margin-top:20px; font-size:5.0rem; } .visualItem .visualText .text_3 { margin-top:40px; } .visualItem .visualText small { font-size:3.0rem; } } @media all and (max-width: 1024px) { .visualItem .visualText .text_1 img { height:26px; width:auto; } .visualItem .visualText .text_2 { margin-top:15px; font-size:4.0rem; } .visualItem .visualText .text_2 .crown img { width:60px; } .visualItem .visualText .text_3 { margin-top:30px; } .visualItem .visualText small { font-size:2.8rem; } .mainVisualWrap .slideControl { bottom:125px } .mainVisualWrap .arrowSlider .arrows {width:4.2rem; } .mainVisualWrap .slideControl .visualPage { font-size:1.6rem;} .mainVisualWrap .slideControl .visualPage .bar { width:40px;} } @media all and (max-width: 768px) { .mainVisual, .mainVisual .visualItem, .mainVisual .visualBg { height:auto; aspect-ratio:750/1000; min-height:initial; max-height:600px; } .visualItem.visual01 .visualBg .visualImg { background:url(../images/main/main_visual1_s.jpg)bottom left no-repeat;} .visualItem.visual02 .visualBg .visualImg { background:url(../images/main/main_visual2_s.jpg)bottom left no-repeat;} .visualItem.visual03 .visualBg .visualImg { background:url(../images/main/main_visual3_s.jpg)bottom left no-repeat;} .visualItem.visual04 .visualBg .visualImg { background:url(../images/main/main_visual4_s.jpg)bottom left no-repeat;} .visualItem .visualText { top:150px; } .mainVisualWrap .slideControl { display:none; } .mainVisual .slick-dots { position:absolute; bottom:10px; left:0; right:0; width:100%; z-index:100; display:flex; justify-content:center; gap:5px; } .mainVisual .slick-dots li { display:block; padding:0;} .mainVisual .slick-dots button { width:16px; height:16px; border-radius:50%; text-indent:-10000px; border:1px solid var(--pink); background:#fff; } .mainVisual .slick-dots .slick-active button { background:var(--pink);} } @media all and (max-width: 480px) { .visualItem .visualText { padding:0 20px; } .visualItem .visualText .text_1 img { height:18px; } .visualItem .visualText .text_2 { margin-top:15px; font-size:2.9rem; } .visualItem .visualText .text_2 .crown img { width:40px; } .visualItem .visualText .text_3 { margin-top:20px; } .visualItem .visualText small { font-size:1.44rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section01 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section01 { margin-top:-100px; z-index:20; position:relative; } .section01 .innerWrap { background:rgba(255,255,255,0.7); border-radius:60px 60px 0 0; padding:24px 0 0 0; } .section01 .innerBox { display:flex; justify-content:space-between; gap:20px; } .section01 .innerBox .service { width:calc(33.3333% - 40px/3); position:relative; transition:all 0.3s;} .section01 .innerBox a { width:100%; display:flex; align-items:center; } .service .serviceText { flex-grow:1; padding:30px 0 52px 30px; min-height:218px; } .service .serviceText .artText { opacity:0.9; } .service .serviceImg { width:40%; max-width:214px; flex-shrink:0; } .service .arrow { position:absolute; bottom:20px; left:30px; width:32px; height:32px; border-radius:50%; } .service .arrow img { width:100%; } .service01 { background:#fff1f1; border-radius:0 0 0 24px; } .service02 { background:#e1eff5; } .service03 { background:#f2f9e4; border-radius:0 0 24px 0; } .service01:hover { background:var(--gra-pink); transition:all 0.3s; border-radius:24px; } .service02:hover { background:var(--gra-blue); transition:all 0.3s; border-radius:24px; } .service03:hover { background:var(--gra-green); transition:all 0.3s; border-radius:24px; } .service:hover .artTit { color:#fff !important; transition:all 0.3s;} .service:hover .artText { color:#fff !important; opacity:0.9; transition:all 0.3s;} .service .arrow { display:block;} .service .arrow-mobile { display:none;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section01 .innerBox a { padding-bottom:130px; } .service .serviceText { padding:20px 20px 0 20px; width:100%; min-height:initial } .service .serviceImg { width:clamp(100px,60%,160px); position:absolute; bottom:0; right:0; } } @media all and (max-width: 768px) { .section01 { margin-top:10px; } .section01 .innerBox { gap:5px;} .section01 .innerBox .service { width:calc(33.3333% - 15px/3); border-radius:10px; } .section01 .innerBox a { padding:15px 10px 10px 10px; flex-wrap:wrap; justify-content:center;} .service .serviceText { padding:0; } .service .serviceText .artTit { text-align:center; display:flex; gap:3px; align-items:center; justify-content:center; } .service .serviceText .artText { display:none; } .service .serviceImg { position:relative; bottom:initial; right:initial; width:100%; max-width:160px; margin:10px auto 0; } .service .arrow { display:none;} .service .arrow-mobile { display:block; width:20px; height:20px; line-height:0; border-radius:50%; flex-shrink:0; margin-top:-2px; } } @media all and (max-width: 480px) { .service .arrow-mobile { width:16px; height:16px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section02 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section02 { margin-top:100px; position:relative; width:100%; overflow:hidden; background:#fff;} .section02:before { content:''; width:50%; height:100%; background:linear-gradient( 0deg, rgb(251,234,214) 20%, rgb(253,247,240) 80%); position:absolute; left:0; top:0; } .section02 .innerWrap { background:linear-gradient( 0deg, rgb(251,234,214) 20%, rgb(253,247,240) 80%); border-radius:0 60px 100px 0; } .section02 .innerBox { display:flex; gap:20px; justify-content:space-between;} .section02 .innerBox > div { width:calc(50% - 10px); display:flex; gap:20px 20px; justify-content:space-between; flex-wrap:wrap; } .section02 .innerBox > div .article:not(.w100) { width:calc(50% - 10px); } .section02 .innerBox > div .article.w100 { width:100%; } .section02 .article { padding:min(4.8%, 40px); position:relative; display:block; } .sec02Left .article { background:#fff; border:1px solid #f5ebe2; } .sec02Left .article > a { display:block; width:100%;} .sec02Left .article > a:hover .artText { text-decoration:underline; } .sec02Left .article .btns { margin-top:35px; position:relative; z-index:2; } .sec02Left .article .btns li:not(:first-child) { margin-top:8px; } .sec02Left .article .btns a { display:inline-flex; gap:10px; align-items:center; font-weight:500; } .sec02Left .article .btns a .arrow { width:26px; height:26px; flex-shrink:0; display:block; border-radius:50%; line-height:1; } .sec02Left .article .btns a .arrow img { width:100%; transition:all 0.3s; transform:translate(0, 0);} .sec02Left .article .btns a:hover .arrow img { transform: translate(5px, -5px); transition:all 0.3s;} .sec02Left .article .icon { position:absolute; bottom:min(4.8%, 40px); right:min(4.8%, 40px); z-index:1; width:min(142px, 30%); } .sec02Left .article .icon img { width:100%; } .sec02Right .article:nth-child(1) { background:linear-gradient( 90deg, rgb(244,192,109) 0%, rgb(244,204,109) 100%); } .sec02Right .article:nth-child(2) { background: linear-gradient( 90deg, rgb(144,185,98) 0%, rgb(181,203,114) 100%); } .sec02Right .article:nth-child(3) { background:rgba(255,255,255,0.5); } .sec02Right .article:nth-child(1) .artTit { color:#bc642f; } .sec02Right .article:nth-child(2) .artTit { color:#547d22; } .sec02Right .article:nth-child(3) .artTit { color:var(--text-black); } .sec02Btn { margin-top:50px; height:44px; border:2px solid rgba(255,255,255,0.5); border-radius:22px; padding:0 4px 0 20px; display:inline-flex; gap:20px; align-items:center; color:#fff !important; font-weight:500; transition:all 0.3s; } .sec02Btn .arrow { background:#fff; width:32px; aspect-ratio:1/1; border-radius:50%; line-height:0;} .sec02Btn .arrow img { width:100%; } .sec02Btn:hover { gap:30px; transition:all 0.3s;} .sec02Right .article:nth-child(3) .artTextWrap { display:flex; gap:30px; justify-content:space-between; align-items:flex-end;} .sec02Right .article:nth-child(3) .artTextWrap a { width:206px; flex-shrink:0;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .section02 .innerBox { flex-wrap:wrap; } .section02 .innerBox > div { width:100%;} } @media all and (max-width: 1024px) { .section02 { margin-top:80px; } } @media all and (max-width: 768px) { .section02 { margin-top:60px; } .section02 .innerWrap { border-radius:0 20px 40px 0; } .section02 .innerBox { gap:10px;} .section02 .innerBox > div { gap:10px 10px;} .section02 .innerBox > div .article:not(.w100) { width:calc(50% - 5px); } .section02 .article { padding:min(4.8%, 40px) min(3%, 15px); } .section02 .article:not(.w100) { text-align:center;} .sec02Left .article .artText, .sec02Left .article .icon, .sec02Right .article:not(.w100) .artText { display:none;} .section02 .article:not(.w100) .artTit { text-align:center;} .sec02Right .article.w100 { display:none;} .sec02Left .article .btns { margin-top:20px;} .sec02Left .article .btns li { display:flex; justify-content:center; } .sec02Left .article .btns li:not(:first-child) { margin-top:5px; } .sec02Left .article .btns a { gap:5px;} .sec02Left .article .btns a .arrow, .sec02Btn .arrow { width:20px; height:20px; } .sec02Btn { margin:20px auto 0 auto; height:40px; border-width:1px; padding:0 4px 0 15px; gap:10px; white-space:nowrap; } } @media all and (max-width: 480px) { .section02 { margin-top:40px; } .sec02Left .article .btns a .arrow, .sec02Btn .arrow { width:16px; height:16px; } .sec02Left .article .btns { margin-top:12px;} .sec02Left .article .btns a { font-size:1.5rem; } .sec02Btn { margin:15px auto 0 auto; height:32px; font-size:1.5rem; padding:0 4px 0 10px; gap:5px;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section03 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section03 { background: linear-gradient( 0deg,rgb(245,222,222) 20%, rgb(251,234,214) 85%); position:relative; width:100%; overflow:hidden; } .section03:before { content:''; width:50%; height:100%; background:#fff; position:absolute; right:0; top:0; } .section03 .innerWrap { background:#fff; border-radius:60px 0 0 100px; } .section03 .innerBox { display:flex; gap:60px; justify-content:space-between;} .section03 .eventSection { width:min(25%, 360px); flex-shrink:0; position:relative;} .section03 .reviewSection { flex-grow:1; width:calc(75% - 60px); position:relative;} .reviewSlide { width:calc(100% + 10px); margin-left:-5px; } .reviewSlide .slideItem { } .reviewSlide .slick-slide { margin:0 10px; } .reviewWrap .arrowSlider { position:absolute; right:0; top:0; display:flex; align-items:center; } .reviewWrap .arrowSlider .arrows { width:40px; aspect-ratio:1/1; border-radius:50%; border:1px solid #ccc; } .reviewWrap .arrowSlider .arrows.prev { background:#fff url(../images/common/slide_prev.png)center no-repeat; background-size:contain; } .reviewWrap .arrowSlider .arrows.next { background:#fff url(../images/common/slide_next.png)center no-repeat; background-size:contain; } .eventWrap { padding:min(10%, 30px); position:absolute; bottom:0; left:0; height:calc(100% - 74px); display:block; width:100%; min-height:120px;} .eventWrap a { display:block; width:100%; height:100%; } .eventWrap .artTit strong { color:#fcd55f !important; font-weight:500; } .eventWrap .eventText { font-size:1.8rem; font-weight:30; margin-top:25px; line-height:1.5; position:relative; z-index:2; } .eventWrap .eventText strong { color:#fcd55f !important; font-weight:500; border-bottom:1px solid #fcd55f; } .eventWrap .eventImg { position:absolute; bottom:-30px; right:-5px; width:min(40%, 160px); z-index:1; } .eventWrap .eventImg img { width:100%; } .reviewSlide .branchInfo { display:flex; gap:7px; margin-top:10px; align-items:center; } .reviewSlide .branchName { color:var(--text-grey); font-size:1.3rem; margin-top:3px;} .reviewSlide .starScore { display:flex; align-items:center; gap:3px; } .reviewSlide .starScore:before { width:90px; aspect-ratio:124/20; background-size:contain !important; display:block; content:''; } .reviewSlide .starScore.star1:before { background:url(../images/startImg_1.png)no-repeat center;} .reviewSlide .starScore.star2:before { background:url(../images/startImg_2.png)no-repeat center;} .reviewSlide .starScore.star3:before { background:url(../images/startImg_3.png)no-repeat center;} .reviewSlide .starScore.star4:before { background:url(../images/startImg_4.png)no-repeat center;} .reviewSlide .starScore.star5:before { background:url(../images/startImg_5.png)no-repeat center;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1360px) { .eventWrap .eventText { margin-top:15px;} } @media all and (max-width: 1279px) { .section03 .innerBox { gap:40px;} .section03 .reviewSection { width:calc(75% - 40px); } .eventWrap .eventText { font-size:1.6rem; } .reviewSlide .slick-slide { margin:0 5px; } } @media all and (max-width: 1024px) { .eventWrap { height:calc(100% - 57px); } .eventWrap .eventText { font-size:1.5rem; } } @media all and (max-width: 768px) { .section03 .innerBox { flex-wrap:wrap;} .section03 .eventSection, .section03 .reviewSection { width:100%;} .reviewSlide .slick-slide { width:230px;} .reviewWrap .arrowSlider { display:none;} .eventWrap { position:relative; bottom:initial; left:initial; height:auto; padding:20px; } .eventWrap .eventText { margin-top:10px; } .eventWrap .eventText .mobile-hidden { display:none;} .eventWrap .eventImg { width:min(40%, 82px); bottom:-10px; right:10px;} } @media all and (max-width: 480px) { .section03 .innerWrap { border-radius:20px 0 0 40px; } .eventWrap .eventText { font-size:1.4rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section04 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section04 { position:relative; width:100%; overflow:hidden; background:#fff; } .section04:before { content:''; width:50%; height:100%; background:linear-gradient( 0deg, rgb(246,231,221) 20%, rgb(245,222,222) 80%); position:absolute; left:0; top:0; } .section04 .innerWrap { background: linear-gradient( 0deg, rgb(246,231,221) 20%, rgb(245,222,222) 80%); border-radius:0 60px 100px 0; } .quickMenuList { display:flex; justify-content:center; gap:20px;} .quickMenuList li { width:calc(20% - 80px/5); text-align:center;} .quickMenuList li .icon { width:92px; margin:0 auto; border-radius:10px; aspect-ratio:1/1 !important; display:flex; align-items:center; justify-content:center; overflow:hidden; } .quickMenuList li .icon img { width:100%; transition: all 0.3s ease; translate:0 0; } .quickMenuList li a:hover .icon img { transition: all 0.3s ease; translate:0 -10px; } .quickMenuList li .text { margin:30px auto 0; max-width:200px; } .quickMenuList li .text strong { color:var(--text-dkgrey); font-size:2.0rem; } .quickMenuList li .text strong br { display:none;} .quickMenuList li .text p { color:var(--text-ltgrey); font-size:1.4rem; line-height:1.5; margin-top:15px; } .quickMenuList li.qm01 .icon { background:rgba(199, 123, 163, 0.6);} .quickMenuList li.qm02 .icon { background:rgba(237, 163, 113, 0.6);} .quickMenuList li.qm03 .icon { background:rgba(248, 207, 103, 0.6);} .quickMenuList li.qm04 .icon { background:rgba(137, 185, 95, 0.6);} .quickMenuList li.qm05 .icon { background:rgba(125, 193, 169, 0.6);} .quickMenuList li.v-mobile { display:none;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1024px) { .quickMenuList li .text strong { font-size:1.8rem; } .quickMenuList li .text p { margin-top:10px; } } @media all and (max-width: 768px) { .section04 .innerWrap { border-radius:0;} .quickMenuList { flex-wrap:wrap; gap:20px 10px;} .quickMenuList li { width:calc(33.3333% - 20px/3); } .quickMenuList li .text { margin:10px auto 0; } .quickMenuList li .text p { display:none;} .quickMenuList li .text strong { font-size:1.5rem; line-height:1.2; display:inline-block; } .quickMenuList li .text strong br { display:initial;} .quickMenuList li.v-mobile { display:block;} .quickMenuList li.v-mobile .icon { background:rgba(255, 255, 255, 0.6);} .quickMenuList li.v-mobile .text strong { font-size:1.2rem;} } @media all and (max-width: 480px) { .quickMenuList li .icon { width:70px; } .quickMenuList li .text strong { font-size:1.4rem; } .quickMenuList li.v-mobile .text strong { font-size:1.0rem;} } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section05 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section05 { background:#f6e7dd; position:relative; width:100%; overflow:hidden; padding-bottom:100px;} .section05:before { content:''; width:50%; height:calc(100% - 100px); background:#fff; position:absolute; right:0; top:0; } .section05 .innerWrap { background:#fff; border-radius:60px 0 0 100px; } .section05 .innerBox { display:flex; justify-content:space-between; gap:60px; } .section05 .sec05Left { flex-grow:1; } .section05 .sec05Right { width:37.5%; flex-shrink:0; } .section05 .SecSmall { position:relative; } .section05 .moreView { position:absolute; top:0; right:0; } .pressWrap { display:flex; gap:20px; } .pressWrap .pressItem { width:calc(33.3333% - 40px/3); flex-shrink:0; } .pressWrap .pressItem a {display:block; width:100%; } .boardWrap .boardItem.pressItem .itemText .subject { line-height:1.4em; height:3em; max-height:2.8em; white-space: normal; display:-webkit-box; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis;-webkit-box-orient:vertical; word-wrap:break-word;} .noticeWrap, .faqeWrap { display:flex; flex-direction:column; gap:12px; } .noticeWrap .noticeItem, .faqeWrap .faqItem { display:flex; justify-content:space-between; align-items:center; } .noticeWrap .noticeItem .subject, .faqeWrap .faqItem .subject { flex-grow:1; font-size:1.6rem; color:var(--text-black); white-space:nowrap; overflow:hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; } .noticeWrap .noticeItem .subject:hover, .faqeWrap .faqItem .subject:hover { text-decoration: underline; } .noticeWrap .noticeItem:before { content:'·'; width:10px; flex-shrink:0; } .noticeWrap .noticeItem .date { width:110px; flex-shrink:0; font-size:1.6rem; color:var(--text-ltgrey); text-align:right; } .faqSection { margin-top:60px; } .faqeWrap .faqItem .cat { width:90px; height:24px; line-height:28px; margin-right:8px; flex-shrink:0; color:#fff; border-radius:6px; text-align:center; font-size:1.4rem; display:flex; justify-content:center; align-items:center; } .faqeWrap .faqItem:nth-child(1) .cat { background:var(--gra-main); } .faqeWrap .faqItem:nth-child(2) .cat { background:var(--gra-pink); } .faqeWrap .faqItem:nth-child(3) .cat { background:var(--gra-blue); } .faqeWrap .faqItem:nth-child(4) .cat { background:var(--gra-green); } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { .pressWrap { gap:10px; } .pressWrap .pressItem { width:calc(33.3333% - 20px/3); } } @media all and (max-width: 1024px) { .section05 { padding-bottom:80px;} .section05 .innerBox { flex-wrap:wrap; } .section05 .sec05Left, .section05 .sec05Right { width:100%;} .section05 .sec05Right { display:flex; gap:40px;} .section05 .sec05Right .SecSmall { width:calc(50% - 40px); margin-top:0; } } @media all and (max-width: 768px) { .section05 { padding-bottom:0px;} .section05 .innerWrap {border-radius:20px 0 0 40px; } .section05 .innerBox { gap:40px; } .section05 .sec05Right { flex-wrap:wrap; gap:40px;} .section05 .sec05Right .SecSmall { width:100%; } } @media all and (max-width: 480px) { .section05 .innerWrap {border-radius:0; } .section05 .innerBox { gap:30px; } .section05 .sec05Right { gap:30px;} .pressWrap { flex-wrap:wrap; } .pressWrap .pressItem { width:100%; } .pressWrap .pressItem a { display:flex; gap:15px; align-items:flex-start; } .pressWrap .pressItem a .itemImg { width:140px; flex-shrink:0; height:auto; } .pressWrap .pressItem .itemText { padding:0;} .boardWrap .boardItem.pressItem .itemText .subject { height:auto;} .boardWrap .boardItem.pressItem .itemText .cntText { height:auto;} .noticeWrap, .faqeWrap { gap:7px;} .noticeWrap .noticeItem .subject, .faqeWrap .faqItem .subject, .noticeWrap .noticeItem .date { font-size:1.5rem; } .faqeWrap .faqItem .cat { width:70px; height:20px; line-height:20px; margin-right:6px; border-radius:4px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section06 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .movieSection { text-align:center; } .movieSection .secTitBig strong { font-weight:500; color:var(--text-main); } .movieSection .tit_texts { font-size:1.8rem; color:var(--text-grey) !important; font-weight:300; margin-top:10px; } .movieWrap { position:relative; width:100%; aspect-ratio:15/6; margin-top:40px; border-radius:36px; overflow:hidden; } .movieWrap .movie { position:absolute; top:50%; left:50%; translate:-50% -50%; width:100%; height:100%;} /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { } @media all and (max-width: 768px) { .section06 { background:#f6e7dd; } .movieSection .tit_texts { font-size:1.5rem;} .movieWrap { aspect-ratio:16/9; border-radius:10px; margin-top:30px; } } @media all and (max-width: 480px) { .movieSection .tit_texts { font-size:1.333rem; margin-top:5px;} .movieWrap { margin-top:20px; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section07 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section07 { margin-bottom:100px; } .branchSection { text-align:center; } .branchTabs { display:flex; height:60px; border-radius:30px; border:1px solid var(--main); width:100%; justify-content:space-around;} .branchTabs li { flex-grow:1; } .branchTabs li a { height:58px; line-height:58px; display:flex; width:100%; font-size:1.8rem; font-weight:500; color:var(--dkgrey); background:#fff; transition:all 0.3s; border-radius:30px; justify-content:center; align-items:center; gap:10px; } .branchTabs li a span { margin-bottom:-2px; } .branchTabs li a.current { background:var(--gra-main); color:#fff; transition:all 0.3s; } .branchTabs li a:after { content:''; width:8px; height:8px; border:2px solid #fff; border-width:0 2px 2px 0; display:block; rotate: 45deg; margin-top:-4px; } .branchListWrap { display:flex; justify-content:space-between; gap:40px; margin-top:40px; } .branchListWrap > div { flex-basis:calc(50% - 20px); flex-grow:1; max-width:1000px; margin:0 auto; } .branchListWrap .branchCnts { } .branchListWrap .branchCnts.active { display:block; } .branchCnts .area { height:40px; line-height:40px; font-size:1.8rem; font-weight:500; border-radius:10px 10px 0 0; } .branchCnts + .branchCnts { margin-top:10px; } .branchCnts .listTable li {display:flex; position:relative; border:2px solid transparent; } .branchCnts .listTable li:before { position:absolute; bottom:-3px; left:0; content:''; width:100%; height:1px; background:#efefef; } .branchCnts .listTable li:hover { border:2px solid var(--main); } .branchCnts .listTable li > div { padding:5px 10px; vertical-align:middle;font-size:1.5rem; color:var(--grey); } .branchCnts .listTable li > div a { color:var(--grey); } .branchCnts .listTable .branchName{ width:150px; flex-shrink:0; text-align:left; font-weight:500; display:flex; gap:5px; align-items:center; } .branchCnts .listTable .branchName a, .branchCnts .listTable .serviceArea a { display:block;} .branchCnts .listTable .branchName a span { margin-top:3px;} .branchCnts .listTable .serviceArea {flex-grow:1; text-align:left; margin-top:3px; } .branchCnts .listTable .telNum{ width:150px; flex-shrink:0; font-weight:500; display:flex; gap:5px; align-items:center; justify-content:flex-end; } .branchCnts .listTable .branchName:before {content:''; width:15px; aspect-ratio:18/23;} .listLeft .branchCnts .listTable .branchName:before { background:url(../images/common/icon_location_pink.png)center no-repeat; background-size: contain;} .listRight .branchCnts .listTable .branchName:before { background:url(../images/common/icon_location_purple.png)center no-repeat; background-size: contain;} .branchCnts .listTable .telNum a { cursor:default; pointer-events:none; } .branchCnts .listTable .telNum:before {content:''; width:12px; aspect-ratio:1/1; background:url(../images/common/icon_tel.png)center no-repeat; background-size:contain; display:none; flex-shrink:0; } .branchCnts .area:after { display:none; } .branchCnts .listTable .noBranch { text-align:center; width:100%;} .listLeft .branchCnts .area { background:#f4e5ed; color:var(--text-pink); } .listRight .branchCnts .area { background:#f1ebf5; color:var(--text-main); } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section07 { margin-bottom:80px; } .branchTabs { height:50px; border-radius:25px;} .branchTabs li a { height:48px; line-height:48px; font-size:1.6rem; border-radius:25px; gap:5px; } .branchListWrap { gap:10px; flex-direction:column; } .branchListWrap > div { width:100% !important; } } @media all and (max-width: 768px) { .section07 { margin-bottom:60px; padding-top:60px; } .branchTabs { display:none; } .branchListWrap .branchCnts { display:none; } .branchListWrap .branchCnts.active { display:block; } .branchCnts .listTable li { flex-wrap:wrap; gap:0 5px;} .branchCnts .listTable .branchName{ order:1; flex-grow:1; } .branchCnts .listTable .serviceArea { width:100%; order:3; padding:0 0 5px 25px;} .branchCnts .listTable .telNum{ order:2; width:auto; } .branchCnts .listTable .telNum:before { display:block; flex-shrink:0; } .branchCnts .area { display:flex; height:36px; line-height:36px; justify-content:space-between; align-items:center; padding:0 15px; font-size:1.55rem; } .branchCnts .area:after { content:''; display:block; width:6px; height:6px; border:2px solid var(--pink); border-width:0 2px 2px 0; rotate: 45deg; margin-top:-4px; } .branchCnts.active .area:after { rotate: 225deg; margin-top:0;} .listRight .branchCnts .area:after { border-color: var(--purple); } .branchCnts .listTable .telNum a { pointer-events: initial; } .branchCnts .listTable .telNum a[href="tel:"] { pointer-events:none;} } @media all and (max-width: 480px) { .section07 { margin-bottom:40px; padding-top:40px; } .branchCnts .listTable .branchName:before { width:9px; } .branchCnts .listTable .branchName{ font-size:1.44rem; } .branchCnts .listTable .serviceArea { font-size:1.33rem; } .branchCnts .listTable .telNum { font-size:1.33rem; } } /* ----------------------------------------------------------------------------------------------- ///////////////////////////////////////////// section08 ////////////////////////////////////// --------------------------------------------------------------------------------------------------*/ .section08 { margin-bottom:100px; } .section08Bg { background: url(../images/main/sec08_bg.jpg)center no-repeat; background-size:cover; border-radius:24px; overflow:hidden; padding:80px 20px; text-align:center; color:#fff; } .section08Bg a { display:block; width:100%; height:100%; color:#fff;} .section08Bg p { font-size:2.2rem; color:#fff; } .section08Bg span { font-size:2.2rem; font-weight:500; color:#fff; margin-top:10px; cursor:default; pointer-events:none; } /* ================================== 반응형 ================================== */ @media all and (max-width: 1279px) { } @media all and (max-width: 1024px) { .section08 { margin-bottom:80px; } } @media all and (max-width: 768px) { .section08 { margin-bottom:60px; } .section08Bg { background: url(../images/main/sec08_bg_mobile.jpg)center right no-repeat; background-size:cover; text-align:left; border-radius:12px; padding:30px; padding-right:40%;} .section08Bg p { font-size:1.55rem; } .section08Bg span { font-size:1.55rem; margin-top:5px; } } @media all and (max-width: 480px) { .section08 { margin-bottom:40px; } .section08Bg {padding:20px; padding-right:40%;} .section08Bg p { font-size:1.44rem; } .section08Bg span { font-size:1.44rem; margin-top:5px; } }