@import url(default.css);
@import url(common.css);
@import url(layout.css);

/* 
    파일명 : main.css 
    작성자 : 이윤정
    작성일 : 24.03.28
    설  명 : 메인페이지에만 들어가는 스타일을 저장
            ( header와 footer 빼고 전부 다 )
*/

.visual {
    position: relative;
    z-index: -1;
    height: 900px;
    background: url(../images/visual_pc.png) no-repeat center center / cover;
    color: #1d1d1d;
}
.visual .inner {
    padding-top: 250px;
}
.visual h2 {
    font-size: 80px;
    font-weight: 700;
    margin-bottom: 20px;
    font-weight: 900;
    font-family: 'Montserrat Alternates';
    color: #1d1d1d;
}
.visual h2 strong {
    color: #fff;
    text-shadow: 5px 5px rgba(0, 0, 0, 0.1);
}
.visual p {
    font-size: 20px;
    color: #3d3d3d;
}
.visual .character {
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    animation-name: character_move;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-timing-function: linear;
}
@keyframes character_move { /* 애니메이션을 효과를 미리 설정함 */
	0% { transform:translate(0, 0) }  /* 애니메이션을 시작할때의 속성 */
	100% { transform:translate(-50%, 0)} /* 애니메이션이 종료될때의 속성 */
}
@media screen and (max-width:1024px){
    .visual {
        background-image: url(../images/visual_m.png);
        height: 800px;
    }
    .visual h2 {
        font-size: 70px;
    }
}
@media screen and (max-width:768px){
    .visual {
        height: 700px;
    }
    .visual .inner {
        padding-top: 200px;
    }
    .visual h2 {
        font-size: 55px;
    }
    .visual p {
        font-size: 13px;
    }
    .visual .character img {
        width: 1936px;
        height: 194px;
    }
}
@media screen and (max-width:500px){
    .visual {
        height: 480px;
    }
    .visual .inner {
        padding-top: 150px;
    }
    .visual h2 {
        font-size: 40px;
    }
    .visual .character img {
        width: 1485px;
        height: 149px;
    }
}
@media screen and (max-width:380px){
    .visual {
        height: 400px;
    }
    .visual .inner {
        padding-top: 100px;
    }
    .visual p {
        display: none;
    }
}

.info {
    margin: 200px 0 220px 0;
}
.info h2 {
    font-size: 0;
    line-height: 0;
}
.info strong {
    display: block;
    font-size: 150px;
    font-weight: 900;
    font-family: 'Montserrat Alternates';
    color: #1d1d1d;
}
.info .text01 {
    position: relative; /* span 정렬의 기준*/
}
.info .text02 {
    position: relative;
    margin-bottom: 20px;
}
.info span {
    position: relative; /* before 정렬의 기준 */
    display: block;
    width: 170px;
    line-height: 35px;
    padding-left: 45px;
    border-radius: 50px;
}
.info .text01 span {
    position: absolute;
    right: 30%;
    top: 20%;
    background-color: #DEFFFD;
}
.info .text02 span {
    position: absolute;
    right: 50%;
    top: 20%;
    background-color: #FEDCDB;
}
.info span::after {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    content: "";
}
.info .text01 span::after {
    left:11px;
    top: 8px;
    width: 26px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='27' height='14' viewBox='0 0 27 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_601)'%3E%3Cpath d='M20.231 6.92872C20.276 8.91693 21.8742 10.1961 23.7652 10.4512C26.4627 10.8151 25.7949 9.23954 26.4139 8.48928C26.9467 7.84029 24.8382 7.75026 24.8194 6.83118C24.8007 5.91961 26.7854 5.04555 26.2376 4.42282C25.5885 3.68756 25.7874 2.50214 23.6151 3.25616C21.8105 3.88263 20.1934 4.94051 20.2347 6.92872H20.231Z' fill='%2370CACD'/%3E%3Cpath d='M21.6564 5.23311C21.6564 5.23311 23.9375 3.13611 24.5115 3.68005C25.0856 4.224 23.7086 6.40353 24.2076 7.00749C24.7066 7.60771 25.0818 7.52518 25.1681 8.0091C25.2544 8.49302 25.003 9.04447 24.9017 9.63718C24.8004 10.2299 22.0391 9.05197 21.7277 8.49677C21.4163 7.94158 19.728 6.66612 21.6564 5.23686V5.23311Z' fill='%233BC0CB'/%3E%3Cpath d='M20.5272 6.84999C20.6098 10.7139 17.5671 13.9138 13.7327 14C9.89462 14.0826 6.71684 11.0177 6.63055 7.15385C6.54801 3.28621 9.59072 0.0863223 13.4288 4.14645e-05C17.2669 -0.082488 20.4447 2.98236 20.5272 6.84624V6.84999Z' fill='%2398D5CC'/%3E%3Cpath d='M6.93066 7.07127C6.88563 5.08306 5.28736 3.80386 3.3927 3.54877C0.695158 3.18489 1.36298 4.7642 0.747683 5.51072C0.214927 6.1597 2.49602 6.7374 1.73441 7.25509C0.106125 8.36173 0.380006 8.95445 0.92777 9.57717C1.57683 10.3124 1.37799 11.4979 3.55028 10.7438C5.3549 10.1174 6.97192 9.05948 6.93066 7.07127Z' fill='%2370CACD'/%3E%3Cpath d='M18.7524 6.85372C17.6493 8.58309 15.9048 7.4727 13.9538 6.2235C11.9991 4.9743 10.5697 4.05898 11.6765 2.33336C12.7795 0.607744 15.2594 0.217605 17.2141 1.4668C19.1688 2.716 19.8592 5.12811 18.7524 6.85748V6.85372Z' fill='%23ACDBCF'/%3E%3Cpath opacity='0.3' d='M9.3616 1.77441C9.3616 1.77441 7.68079 4.85426 8.8326 7.28138C9.9844 9.7085 13.8563 8.26423 13.6349 9.62972C13.4135 10.9952 18.0958 10.3575 19.3789 9.50593C20.6583 8.65062 17.6381 14.1763 12.6707 13.4448C6.75035 12.5708 5.67358 4.50914 9.36535 1.77441H9.3616Z' fill='%23008EA7'/%3E%3Cpath d='M18.4299 3.51122C18.4299 3.51122 17.9309 1.22665 15.6835 1.31293C13.4362 1.39921 19.1089 4.82794 18.4299 3.51122Z' fill='%23F3EAC7'/%3E%3Cpath d='M4.87089 4.47904C4.87089 4.47904 6.26656 5.12052 6.63049 7.15C6.7618 7.88151 4.51447 9.956 3.76036 10.0835C3.00624 10.2111 3.09629 9.19823 3.08128 8.44796C3.06627 7.69769 4.03799 7.59641 4.10552 7.20627C4.17305 6.81238 2.52226 6.81238 2.85617 6.61731C3.19008 6.42224 4.89715 6.49726 4.70581 5.97583C4.51822 5.45439 3.90292 3.64249 4.87089 4.47904Z' fill='%233BC0CB'/%3E%3Cpath opacity='0.3' d='M20.5084 5.96837C20.5084 5.96837 21.4802 4.20524 22.4631 4.42657C23.0297 4.55412 22.1292 6.41853 22.2493 6.65862C22.3656 6.90245 23.4611 6.65111 23.3598 7.4614C23.2585 8.27169 22.8271 9.10824 23.1647 9.13825C23.5024 9.16826 23.9563 9.64468 23.4161 9.65969C22.8758 9.67094 19.3979 8.39549 20.5084 5.97212V5.96837Z' fill='%23008EA7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_601'%3E%3Crect width='26' height='14' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.info .text02 span::after {
    left:18px;
    top: 8px;
    width: 17px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_611)'%3E%3Cpath d='M9.27468 15.0001C9.27468 15.0001 -2.02529 9.52912 1.0214 2.47107C2.39109 -0.703078 7.38872 -0.988949 9.01303 2.99846C9.01303 2.99846 10.1123 -1.28139 14.7464 0.387831C19.7774 2.19999 17.8897 11.0833 9.27468 15.0017V15.0001Z' fill='%23F6BC9F'/%3E%3Cpath d='M9.18887 11.6699C9.18887 11.6699 3.28865 9.13319 4.86907 5.47437C5.58026 3.82815 8.14755 3.60964 9.13795 6.02147C9.13795 6.02147 9.58222 3.52749 11.9862 4.39332C14.5956 5.33308 13.6562 9.63757 9.18887 11.6699Z' fill='%23EE3A3D'/%3E%3Cpath opacity='0.2' d='M16.5814 3.89044C16.5814 3.89044 16.5814 0.966011 12.3231 0.995584C9.75226 1.01366 9.76104 3.71464 11.5504 5.02242C13.338 6.33184 17.1381 6.43863 16.5832 3.89044H16.5814Z' fill='%23FDFADB'/%3E%3Cpath d='M12.8112 0.47479C12.8112 0.47479 15.7859 0.576652 16.5955 2.8669C17.268 4.77435 16.8957 6.26778 16.4111 6.46165C15.9264 6.65387 17.1188 4.06789 15.3838 2.30666C13.6489 0.545436 11.3573 0.381143 12.8112 0.476433V0.47479Z' fill='%23FDFADB'/%3E%3Cpath opacity='0.2' d='M1.66406 5.03393C1.66406 5.03393 1.69918 0.169198 4.94079 1.22889C8.1824 2.28858 8.99895 5.22615 8.99895 5.22615C8.99895 5.22615 10.7918 0.00161862 13.756 1.67413C19.9688 5.17851 12.0966 13.3735 9.27464 13.3735C6.45272 13.3735 1.86249 8.37237 1.66406 5.03393Z' fill='%23FDFADB'/%3E%3Cpath opacity='0.2' d='M1.08149 4.60031C1.08149 4.60031 0.97788 1.34237 3.03769 1.00722C5.09574 0.670413 5.39075 8.43821 8.71665 9.59977C12.0443 10.763 14.7609 10.1288 14.652 10.6841C14.5431 11.2394 10.2163 14.1441 9.27506 14.3199C8.33384 14.4941 0.926956 9.65563 1.08149 4.59867V4.60031Z' fill='%23EF5451'/%3E%3Cpath opacity='0.2' d='M10.0019 5.53022C10.0019 5.53022 10.5849 4.15015 11.8545 5.24106C13.1241 6.33197 13.1575 7.65289 12.06 7.94041C10.9625 8.22628 9.65071 6.00667 10.0019 5.53022Z' fill='%23FDFADB'/%3E%3Cpath d='M16.4518 7.35538C16.4518 7.35538 15.99 8.42658 15.6019 8.39536C15.2156 8.36415 16.3868 5.97368 16.4518 7.35538Z' fill='%23FDFADB'/%3E%3Cpath opacity='0.2' d='M2.32809 8.13091C2.32809 8.13091 7.04299 14.8522 9.27489 14.3198C10.9975 13.9091 14.0513 11.3971 13.8458 10.7103C13.6404 10.0236 10.5515 13.7793 8.66555 13.0416C6.77784 12.304 1.13575 5.99181 2.32984 8.13091H2.32809Z' fill='%23EF5451'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_611'%3E%3Crect width='17' height='15' fill='white' transform='translate(0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.info p {
    font-size: 25px;
    margin-bottom: 10px;
}
@media screen and (max-width:1320px){
    .info {
        margin: 170px 0 190px 0;
    }
    .info strong {
        font-size: 130px;
    }
    .info span {
        width: 150px;
        line-height: 35px;
        padding-left: 40px;
        border-radius: 40px;
    }
    .info p {
        font-size: 20px;
    }
}
@media screen and (max-width:1024px){
    .info {
        margin: 120px 0 170px 0;
    }
    .info strong {
        font-size: 90px;
    }
    .info .text01 span {
        right: 40%;
        top: 10%;
    }
    .info .text02 span {
        right: 60%;
        top: 10%;
    }
    .info p {
        font-size: 15px;
    }
}
@media screen and (max-width:768px){
    .info {
        margin: 100px 0 140px 0;
    }
    .info strong {
        font-size: 70px;
    }
    .info span {
        width: 140px;
        line-height: 30px;
        padding-left: 35px;
        border-radius: 30px;
    }
    .info .text01 span::after {
        left: 11px;
        top: 8px;
        width: 26px;
        height: 14px; 
    }
    .info .text02 span::after {
        left: 18px;
        top: 8px;
        width: 17px;
        height: 15px;
    }
    .info p {
        font-size: 13px;
        margin-bottom: 5px;
    }
}
@media screen and (max-width:500px){
    .info {
        margin: 80px 0 110px 0;
        text-align: center;
    }
    .info strong {
        font-size: 40px;
    }
    .info span {
        display: none;
    }
}

.best {
    margin-bottom: 200px;
}
.best strong {
    display: block;
    font-size: 20px;
    color: #3d3d3d;
    text-align: center;
    margin-bottom: 5px;
}
.best h2 {
    font-size: 70px;
    font-weight: 900;
    color: #1d1d1d;
    font-family: 'Montserrat Alternates';
    text-align: center;
    margin-bottom: 30px;
}
.best .list > ul {
    display: flex;
    justify-content: center;
    position: relative; /* detail정렬의 기준*/
}
.best .list > ul > li button {
    width: 90px;
    height: 90px;
    color: #3d3d3d;
    border: 1px solid #3d3d3d;
    border-radius: 100%;
    margin: 0 15px;
}
.best .list > ul >li.list_on button,
.best .list > ul >li button:hover{
    color: #fff;
    background-color: #ED2985;
    border: 0;
}
.best .list > ul >li > .detail{ 
    display: none;
    position: absolute;
    text-align: center;
    left: 0;
    top: 160px;
    transition: 0.5s;
}
.best .list > ul >li.list_on > .detail {
    display: block;
    width: 100%;
}
.best .list > ul >li > .detail > ul {
    display: flex;
    justify-content: center;
    color: #999;
}
.best .list > ul >li > .detail > ul > li {
    position: relative; /*photo_hover 정렬기준*/
}
.best .list > ul >li > .detail > ul > li > a {
    display: block;
    width: 408px;
    height: 580px;
    border-radius: 100px;
    margin: 0 14px 0 14px;
}
.best .list > ul >li > .detail > ul > li > a {
    border: 5px solid transparent;
}
.best .list > ul >li > .detail > ul > li.active > a {
    border: 5px solid #3d3d3d;
} 
.best .list > ul >li > .detail > ul > li .photo {
    margin: 80px auto 70px auto;
    width: 280px;
    height: 209px;
    transition: 0.5S;
}
.best .list > ul >li > .detail > ul > li.active .photo {
    animation-name: photo_hover_move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    width: 330px;
}
.best .list > ul >li > .detail > ul > li .photo img {
    
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.best .list > ul >li > .detail > ul > li.active .photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
@keyframes photo_hover_move { 
	0% { transform:translate(0, 0) }  
	50% { transform:translate(2px, 10px) }
	100% { transform:translate(0, 0) } 
}
.best .list > ul >li > .detail > ul > li .photo_hover {
    display: none;
    position: absolute;
    left: 40px;
    top: 10px;
    animation-name: list_photo_hover_move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}
.best .list > ul >li > .detail > ul > li.active .photo_hover {
    display: block;
}
@keyframes list_photo_hover_move { 
	0% { transform:translate(0, 0) }  
	50% { transform:translate(5px, 20px) }
	100% { transform:translate(0, 0) } 
}
.best .list > ul >li > .detail > ul > li h3 {
    font-size: 20px;
    font-weight: 700;
}
.best .list > ul >li > .detail > ul > li.active  h3 {
    color: #2d2d2d;
}
.best .list > ul >li > .detail > ul > li p {
    margin: 10px 0 20px 0;
}
.best .list > ul >li > .detail > ul > li span {
    margin: 0 5px;
    display: block;
}
.best .list > ul >li > .detail > ul > li.active  p,
.best .list > ul >li > .detail > ul > li.active  span {
    color: #3d3d3d;
}
.best .more {
    position: relative; /* before 정렬의 기준 */
    margin-top: 750px;
    text-align: right;
}
.best .more a {
    display: inline-block;
    background-color: #ED2985;
    color: #fff;
    width: 95px;
    padding:0 38px 0 14px;
    line-height: 32px;
    border-radius: 50px;
    transform: translate(-4px, -6px);
    transition: 0.5s;
}
.best .more a:hover {
    transform: translate(0, 0);
}
.best .more::before {
    position: absolute;
    border-radius: 50px;
    background-color: #1d1d1d;
    width: 95px;
    height: 32px;
    content: "";
}
.best .more a::before {
    position: absolute;
    right: 13px;
    top: 5px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.37516 11.1249H5.2085C5.03141 11.1249 4.88298 11.065 4.76318 10.9451C4.64339 10.8253 4.5835 10.6768 4.5835 10.4996C4.5835 10.3225 4.64339 10.1741 4.76318 10.0544C4.88298 9.93475 5.03141 9.87492 5.2085 9.87492H9.37516V5.70825C9.37516 5.53117 9.43508 5.38273 9.55491 5.26294C9.67476 5.14315 9.82326 5.08325 10.0004 5.08325C10.1776 5.08325 10.326 5.14315 10.4456 5.26294C10.5653 5.38273 10.6251 5.53117 10.6251 5.70825V9.87492H14.7918C14.9689 9.87492 15.1173 9.93484 15.2371 10.0547C15.3569 10.1745 15.4168 10.323 15.4168 10.5002C15.4168 10.6773 15.3569 10.8257 15.2371 10.9454C15.1173 11.0651 14.9689 11.1249 14.7918 11.1249H10.6251V15.2915C10.6251 15.4686 10.5652 15.6171 10.4454 15.7369C10.3255 15.8566 10.177 15.9165 9.99987 15.9165C9.8227 15.9165 9.67429 15.8566 9.55464 15.7369C9.43499 15.6171 9.37516 15.4686 9.37516 15.2915V11.1249Z' fill='white'/%3E%3C/svg%3E%0A");
    content: "";
}
@media screen and (max-width:1320px){
    .best {
        margin-bottom: 170px;
    }
    .best h2 {
        font-size: 60px;
        margin-bottom: 25px;
    }
    .best .list > ul > li button {
        width: 80px;
        height: 80px;
        margin: 0 10px;
    }
    .best .list > ul >li > .detail > ul > li > a {
        width: 300px;
        height: 500px;
        border-radius: 50px;
        border: 3px solid transparent;
    }
    .best .list > ul >li > .detail > ul > li.active > a {
        border: 3px solid #3d3d3d;
    } 
    .best .list > ul >li > .detail > ul > li .photo {
        width: 200px;
    }
    .best .list > ul >li > .detail > ul > li.active .photo {
        width: 200px;
    }
    .best .list > ul >li > .detail > ul > li .photo_hover {
        left: 26px;
        top: 26px;
        width: 270px;
    }
    .best .list > ul >li > .detail > ul > li .photo_hover img{
        width: 100%;
        object-fit: contain;
    }
    .best .list > ul >li > .detail > ul > li p {
        margin: 8px 15px 0 0;
    }
    .best .more {
        margin-top: 680px;
    }
}
@media screen and (max-width:1024px){
    .best {
        margin-bottom: 140px;
    }
    .best strong {
        font-size: 18px;
    }
    .best h2 {
        font-size: 50px;
        margin-bottom: 20px;
    }
    .best .list > ul > li button {
        width: 60px;
        height: 60px;
        margin: 0 8px;
        border: 1px solid #666;
    }
    .best .list > ul >li > .detail{ 
        text-align: left;
        top: 130px;
    }
    .best .list > ul >li > .detail > ul {
        display: block;
        color: inherit;
    }
    .best .list > ul >li > .detail > ul > li > a {
        width: 100%;
        height: 230px;
        border-radius: 50px;
        margin: 0 auto;
        border: 0;
        background-color: #ededed;
        margin-bottom: 20px;
    }
    .best .list > ul >li > .detail > ul > li.active > a {
        border: 0
    } 
    .best .list > ul >li > .detail > ul > li .photo {
        margin: 0 20px 0 100px;
        float: left;
        animation-name: photo_hover_move;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }
    @keyframes photo_hover_move { 
        0% { transform:translate(0, 0) }  
        50% { transform:translate(3px, 3px) }
        100% { transform:translate(0, 0) } 
    }
    .best .list > ul >li > .detail > ul > li.active .photo_hover {
        display: none;
        width: 200px;
    }
    .best .list > ul >li > .detail > ul > li h3 {
        padding-top: 70px;
        padding-left: 50%;
    }
    .best .list > ul >li > .detail > ul > li p {
        margin: 10px 0 20px 0;
        padding-left: 50%;
    }
    .best .list > ul >li > .detail > ul > li span {
        padding-left: 50%;
        margin: 0;
    }
    .best .more {
        margin-top: 845px;
    }
    .best .more a {
        display: inline-block;
        background-color: #fff;
        border: 2px solid #ED2985;
        color: #ED2985;
        width: 95px;
        padding:0 35px 0 0;
        line-height: 32px;
        border-radius: 20px;
        transform: translate(0, 0);
        transition: 0.5s;
    }
    .best .more::before {
        display: none;
    }
    .best .more a::before {
        position: absolute;
        right: 10px;
        top: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.03125 7.96872H3.90625C3.77344 7.96872 3.66211 7.92378 3.57227 7.83391C3.48242 7.74402 3.4375 7.63265 3.4375 7.49978C3.4375 7.36691 3.48242 7.2556 3.57227 7.16586C3.66211 7.07612 3.77344 7.03125 3.90625 7.03125H7.03125V3.90625C7.03125 3.77344 7.07619 3.66211 7.16606 3.57227C7.25595 3.48242 7.36732 3.4375 7.50019 3.4375C7.63306 3.4375 7.74437 3.48242 7.83411 3.57227C7.92385 3.66211 7.96872 3.77344 7.96872 3.90625V7.03125H11.0937C11.2265 7.03125 11.3379 7.07619 11.4277 7.16606C11.5175 7.25595 11.5625 7.36732 11.5625 7.50019C11.5625 7.63306 11.5175 7.74437 11.4277 7.83411C11.3379 7.92385 11.2265 7.96872 11.0937 7.96872H7.96872V11.0937C7.96872 11.2265 7.92378 11.3379 7.83391 11.4277C7.74402 11.5175 7.63265 11.5625 7.49978 11.5625C7.36691 11.5625 7.2556 11.5175 7.16586 11.4277C7.07612 11.3379 7.03125 11.2265 7.03125 11.0937V7.96872Z' fill='%23ED2985'/%3E%3C/svg%3E%0A");
    }
}
@media screen and (max-width:768px){
    .best {
        margin-bottom: 120px;
    }
    .best strong {
        font-size: 15px;
        margin-bottom: 2px;
    }
    .best h2 {
        font-size: 40px;
    }
    .best .list > ul > li button {
        width: 50px;
        height: 50px;
        margin: 0 5px;
    }
    .best .list > ul >li > .detail{
        top: 100px;
    }
    .best .list > ul >li > .detail > ul > li > a {
        height: 200px;
        border-radius: 40px;
        margin-bottom: 15px;
    }
    .best .list > ul >li > .detail > ul > li .photo {
        width: 135px;
        margin:0 30px 0 60px;
    }
    .best .list > ul >li > .detail > ul > li.active .photo {
        width: 135px;
    }
    .best .list > ul >li > .detail > ul > li h3 {
        padding-top: 40px;
    }
    .best .list > ul >li > .detail > ul > li p {
        margin: 10px 10px 0 0;
    }
    .best .list > ul >li > .detail > ul > li span {
        display: none;
    }
    .best .more {
        margin-top: 725px;
    }
    .best .more a {
        border: 1px solid #ED2985;
        width: 85px;
        padding:0 30px 0 0;
        line-height: 28px;
    }
    .best .more a::before {
        right: 7px;
        top: 3px;
    }
}
@media screen and (max-width:500px){ 
    .best {
        margin-bottom: 100px;
    }
    .best strong {
        font-size: 13px;
    }
    .best h2 {
        font-size: 30px;
    }
    .best .list > ul >li > .detail > ul > li .photo {
        width: 100px;
        margin:0 30px 0 30px;
    }
    .best .list > ul >li > .detail > ul > li.active .photo {
        width: 100px;
    }
    .best .list > ul >li > .detail > ul > li h3 {
        padding-top: 40px;
    }
    .best .list > ul >li > .detail > ul > li p {
        font-size: 13px;
    }
    .best .list > ul > li button {
        width: 40px;
        height: 40px;
        margin: 0 3px;
        font-size: 11px;
    }
}   
.event {
    margin-bottom: 200px;
}
.event .wrapper {
    position: relative;
}
.event strong {
    display: block;
    font-size: 20px;
    color: #3d3d3d;
    margin-bottom: 5px;
}
.event h2 {
    font-size: 70px;
    font-weight: 900;
    color: #1d1d1d;
    font-family: 'Montserrat Alternates';
    margin-bottom: 60px;
}
.event .list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}
.event .photo_grup .item .item_wrap {
    width: 517px;
    height: 764px;
    margin-bottom: 100px;
}
.event .photo_grup .item .photo {
    width: 517px;
    height: 764px;
    border-radius: 50px;
    overflow: hidden;
}
.event .photo_grup .item .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event .photo_grup .item:nth-child(2) .photo {
    margin-left: 15px;
}
.event .photo_grup .item:nth-child(3) .photo {
    margin-left: 30px;
}
.event .photo_grup .item:nth-child(4) .photo {
    margin-left: 45px;
}
.event .pagination {
    position: absolute;
    left: 48%;
}
.event .pagination span {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #FFC2D4;
    margin-bottom: 20px;
}
.event .pagination span:last-child {
    margin-bottom: 0;
}
.event .pagination[data-active="0"] span:nth-child(1) {
    background-color: #ED2985;
}
.event .pagination[data-active="1"] span:nth-child(2) {
    background-color: #ED2985;
}
.event .pagination[data-active="2"] span:nth-child(3) {
    background-color: #ED2985;
}
.event .pagination[data-active="3"] span:nth-child(4) {
    background-color: #ED2985;
}
.event .text_grup {
    width: 45%;
}
.event .text_grup .detail {
    height: 764px;
    padding-top: 200px;
    margin-bottom: 100px;
}
.event .text_grup h3 {
    font-size: 30px;
    font-weight: 700;
    color: #1d1d1d;
}
.event .text_grup strong {
    font-size: 20px;
    color: #2d2d2d;
    margin: 10px 0 20px 0;
}   
.event .text_grup span {
    font-size: 18px;
    color: #3d3d3d;
    display: block;
    margin-bottom: 10px;
}
.event .text_grup p {
    margin-top: 20px;
    color: #666;
}
.event .more {
    position: absolute; /* before 정렬의 기준 */
    right: 0;
    bottom: 0;
    text-align: right;
}
.event .more a {
    display: inline-block;
    background-color: #ED2985;
    color: #fff;
    width: 95px;
    padding:0 38px 0 14px;
    line-height: 32px;
    border-radius: 50px;
    transform: translate(-4px, -6px);
    transition: 0.5s;
}
.event .more a:hover {
    transform: translate(0, 0);
}
.event .more::before {
    position: absolute;
    border-radius: 50px;
    background-color: #1d1d1d;
    width: 95px;
    height: 32px;
    content: "";
}
.event .more a::before {
    position: absolute;
    right: 13px;
    top: 5px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.37516 11.1249H5.2085C5.03141 11.1249 4.88298 11.065 4.76318 10.9451C4.64339 10.8253 4.5835 10.6768 4.5835 10.4996C4.5835 10.3225 4.64339 10.1741 4.76318 10.0544C4.88298 9.93475 5.03141 9.87492 5.2085 9.87492H9.37516V5.70825C9.37516 5.53117 9.43508 5.38273 9.55491 5.26294C9.67476 5.14315 9.82326 5.08325 10.0004 5.08325C10.1776 5.08325 10.326 5.14315 10.4456 5.26294C10.5653 5.38273 10.6251 5.53117 10.6251 5.70825V9.87492H14.7918C14.9689 9.87492 15.1173 9.93484 15.2371 10.0547C15.3569 10.1745 15.4168 10.323 15.4168 10.5002C15.4168 10.6773 15.3569 10.8257 15.2371 10.9454C15.1173 11.0651 14.9689 11.1249 14.7918 11.1249H10.6251V15.2915C10.6251 15.4686 10.5652 15.6171 10.4454 15.7369C10.3255 15.8566 10.177 15.9165 9.99987 15.9165C9.8227 15.9165 9.67429 15.8566 9.55464 15.7369C9.43499 15.6171 9.37516 15.4686 9.37516 15.2915V11.1249Z' fill='white'/%3E%3C/svg%3E%0A");
    content: "";
}
@media screen and (min-width:1025px){
    .event .photo_grup .item.fixed .photo {
        position: fixed;
        top: 100px;
        z-index: 1;
    }
    .event .photo_grup .item.fixed:nth-child(2) .photo {
        top: 110px;
    }
    .event .photo_grup .item.fixed:nth-child(3) .photo {
        top: 120px;
    }
    .event .photo_grup .item.fixed:nth-child(4) .photo {
        top: 130px;
    }
    .event .photo_grup .item.fixed_before .photo {
        position: relative;
        z-index: 10;
    }
    .event .photo_grup .item.fixed_before:nth-child(1) .photo img {
        opacity: 1;
    }
    .event .photo_grup .item.fixed_before .photo img {
        opacity: 0.8;
    }
    .event .photo_grup .item.fixed_after .photo {
        position: absolute;
        bottom: 130px;
    }
    .event .photo_grup .item:nth-child(2).fixed_after .photo {
        bottom: 120px;
    }
    .event .photo_grup .item:nth-child(3).fixed_after .photo {
        bottom: 110px;
    }
    .event .photo_grup .item:nth-child(4).fixed_after .photo {
        bottom: 100px;
    }
    .event .text_grup .detail.fixed_other {
        opacity: 0.4;
    }
    .event .text_grup .detail:last-child.fixed_other {
        opacity: 1;
    }
}
@media screen and (max-width:1320px){
    .event {
        margin-bottom: 170px;
    }
    .event h2 {
        font-size: 60px;
        margin-bottom: 50px;
    }
    .event .photo_grup .item .item_wrap {
        width: 430px;
        height: 635px;
    }
    .event .photo_grup .item .photo {
        width: 430px;
        height: 635px;
        border-radius: 40px;
    }
    .event .pagination span {
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background-color: #FFC2D4;
        margin-bottom: 15px;
    }
    .event .text_grup .detail {
        height: 635px;
        padding-top: 150px;
    }
    .event .text_grup h3 {
        font-size: 25px;
    }
    .event .text_grup strong {
        font-size: 15px;
        margin: 10px 0 15px 0;
    } 
    .event .text_grup span {
        font-size: 15px;
        margin-bottom: 5px;
    }
    .event .text_grup p {
        margin-top: 15px;
    }
}
@media screen and (max-width:1024px){
    .event {
        margin-bottom: 140px;
    }
    .event .list {
        display: block; /* flex 해제*/
        overflow-x: auto;
    }
    .event strong {
        font-size: 18px;
    }
    .event h2 {
        font-size: 50px;
        margin-bottom: 40px;
    }
    .event .photo_grup {
        display: flex;
        width: 1800px;
    }
    .event .photo_grup .item .item_wrap {
        margin: 0 20px 40px 0;
    }
    .event .photo_grup .item:nth-child(2) .photo,
    .event .photo_grup .item:nth-child(3) .photo,
    .event .photo_grup .item:nth-child(4) .photo {
        margin-left: 0;
    }
    .event .text_grup {
        display: flex;
        width: 1800px;
        text-align: center;
    }
    .event .text_grup .detail {
        width: 430px;
        height: auto;
        padding-top: 0;
        margin-right: 20px;
    }
    .event .text_grup h3 {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .event .text_grup strong {
        display: none;
    } 
    .event .text_grup span {
        font-size: 13px;
        margin-bottom: 5px;
    }
    .event .text_grup p {
        display: none;
    }
    .event .more {
        position: absolute; /* before 정렬의 기준 */
        right: 0;
        bottom: 0;
        text-align: right;
    }
    .event .more a {
        display: inline-block;
        background-color: #fff;
        border: 2px solid #ED2985;
        color: #ED2985;
        width: 95px;
        padding:0 35px 0 0;
        line-height: 32px;
        border-radius: 20px;
        transform: translate(0, 0);
        transition: 0.5s;
    }
    .event .more::before {
        display: none;
    }
    .event .more a::before {
        position: absolute;
        right: 10px;
        top: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.03125 7.96872H3.90625C3.77344 7.96872 3.66211 7.92378 3.57227 7.83391C3.48242 7.74402 3.4375 7.63265 3.4375 7.49978C3.4375 7.36691 3.48242 7.2556 3.57227 7.16586C3.66211 7.07612 3.77344 7.03125 3.90625 7.03125H7.03125V3.90625C7.03125 3.77344 7.07619 3.66211 7.16606 3.57227C7.25595 3.48242 7.36732 3.4375 7.50019 3.4375C7.63306 3.4375 7.74437 3.48242 7.83411 3.57227C7.92385 3.66211 7.96872 3.77344 7.96872 3.90625V7.03125H11.0937C11.2265 7.03125 11.3379 7.07619 11.4277 7.16606C11.5175 7.25595 11.5625 7.36732 11.5625 7.50019C11.5625 7.63306 11.5175 7.74437 11.4277 7.83411C11.3379 7.92385 11.2265 7.96872 11.0937 7.96872H7.96872V11.0937C7.96872 11.2265 7.92378 11.3379 7.83391 11.4277C7.74402 11.5175 7.63265 11.5625 7.49978 11.5625C7.36691 11.5625 7.2556 11.5175 7.16586 11.4277C7.07612 11.3379 7.03125 11.2265 7.03125 11.0937V7.96872Z' fill='%23ED2985'/%3E%3C/svg%3E%0A");
    }
}
@media screen and (max-width:768px){
    .event strong {
        font-size: 15px;
        margin-bottom: 2px;
    }
    .event h2 {
        font-size: 40px;
    }
    .event .photo_grup {
        width: 1320px;
    }
    .event .photo_grup .item .photo {
        width: 320px;
        height: 470px;
        border-radius: 20px;
    }
    .event .photo_grup .item .item_wrap {
        width: 320px;
        height: 470px;
        margin: 0 20px 20px 0;
    }
    .event .text_grup {
        width: 1320px;
    }
    .event .text_grup .detail {
        width: 320px;
        margin-right: 10px;
    }
    .event .text_grup h3 {
        font-size: 15px;
        margin-bottom: 20px;
    }
    .event .text_grup span {
        display: none;
    }
    .event .more {
        bottom: 20px;
    }
    .best .more a {
        border: 1px solid #ED2985;
        width: 85px;
        padding:0 30px 0 0;
        line-height: 28px;
    }
    .best .more a::before {
        right: 7px;
        top: 3px;
    }
}

.news {
    background-color: #ED2985;
    padding: 120px 0 150px 0;
}
.news strong {
    display: block;
    font-size: 20px;
    color: #fff;
    margin-bottom: 5px;
    text-align: right;
}
.news h2 {
    font-size: 70px;
    font-weight: 900;
    color: #fff;
    font-family: 'Montserrat Alternates';
    margin-bottom: 50px;
    text-align: right;
    margin-bottom: 30px;
}
.news ul li a {
    display: flex;
    justify-content: space-between;
    line-height: 100px;
    border-top: 1px solid #fff;
    padding: 0 20px;
}
.news ul li:first-child a {
    border-top: 5px solid #fff;
}
.news ul li:last-child a {
    border-bottom: 5px solid #fff;
}
.news ul li:hover a {
    background-color: #fff;
} 
.news ul li a strong {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.news ul li:hover strong {
    color: #ED2985;
}
.news ul li a span {
    color: #fff;
}
.news ul li:hover span {
    color: #ED2985;
}
.news .more {
    position: relative; /* before 정렬의 기준 */
    margin: 60px 0 0 0;
    text-align: center;
}
.news .more a {
    display: inline-block;
    background-color: #1d1d1d;
    color: #fff;
    width: 95px;
    padding:0 38px 0 14px;
    line-height: 32px;
    border-radius: 50px;
    transform: translate(-4px, -6px);
    transition: 0.5s;
}
.news .more a:hover {
    transform: translate(0, 0);
}
.news .more::before {
    position: absolute;
    border-radius: 50px;
    background-color: #fff;
    width: 95px;
    height: 32px;
    content: "";
}
.news .more a::before {
    position: absolute;
    right: 13px;
    top: 5px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.37516 11.1249H5.2085C5.03141 11.1249 4.88298 11.065 4.76318 10.9451C4.64339 10.8253 4.5835 10.6768 4.5835 10.4996C4.5835 10.3225 4.64339 10.1741 4.76318 10.0544C4.88298 9.93475 5.03141 9.87492 5.2085 9.87492H9.37516V5.70825C9.37516 5.53117 9.43508 5.38273 9.55491 5.26294C9.67476 5.14315 9.82326 5.08325 10.0004 5.08325C10.1776 5.08325 10.326 5.14315 10.4456 5.26294C10.5653 5.38273 10.6251 5.53117 10.6251 5.70825V9.87492H14.7918C14.9689 9.87492 15.1173 9.93484 15.2371 10.0547C15.3569 10.1745 15.4168 10.323 15.4168 10.5002C15.4168 10.6773 15.3569 10.8257 15.2371 10.9454C15.1173 11.0651 14.9689 11.1249 14.7918 11.1249H10.6251V15.2915C10.6251 15.4686 10.5652 15.6171 10.4454 15.7369C10.3255 15.8566 10.177 15.9165 9.99987 15.9165C9.8227 15.9165 9.67429 15.8566 9.55464 15.7369C9.43499 15.6171 9.37516 15.4686 9.37516 15.2915V11.1249Z' fill='white'/%3E%3C/svg%3E%0A");
    content: "";
}
@media screen and (max-width:1320px){
    .news {
        padding: 100px 0 130px 0;
    }
    .news h2 {
        font-size: 60px;
        margin-bottom: 50px;
    }
    .news ul li a {
        line-height: 80px;
        padding: 0 20px;
    }
    .news ul li:first-child a {
        border-top: 3px solid #fff;
    }
    .news ul li:last-child a {
        border-bottom: 3px solid #fff;
    }
}
@media screen and (max-width:1024px){
    .news {
        padding: 70px 0 100px 0;
    }
    .news strong {
        font-size: 18px;
    }
    .news h2 {
        font-size: 50px;
        margin-bottom: 40px;
    }
    .news ul li a strong {
        font-size: 18px;
        font-weight: 500;
    }
    .news .more a {
        display: inline-block;
        background-color: #fff;
        border: 2px solid #ED2985;
        color: #ED2985;
        width: 95px;
        padding:0 15px 0 0;
        line-height: 32px;
        border-radius: 20px;
        transform: translate(0, 0);
        transition: 0.5s;
    }
    .news .more::before {
        display: none;
    }
    .news .more a::before {
        position: absolute;
        right: 10px;
        top: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.03125 7.96872H3.90625C3.77344 7.96872 3.66211 7.92378 3.57227 7.83391C3.48242 7.74402 3.4375 7.63265 3.4375 7.49978C3.4375 7.36691 3.48242 7.2556 3.57227 7.16586C3.66211 7.07612 3.77344 7.03125 3.90625 7.03125H7.03125V3.90625C7.03125 3.77344 7.07619 3.66211 7.16606 3.57227C7.25595 3.48242 7.36732 3.4375 7.50019 3.4375C7.63306 3.4375 7.74437 3.48242 7.83411 3.57227C7.92385 3.66211 7.96872 3.77344 7.96872 3.90625V7.03125H11.0937C11.2265 7.03125 11.3379 7.07619 11.4277 7.16606C11.5175 7.25595 11.5625 7.36732 11.5625 7.50019C11.5625 7.63306 11.5175 7.74437 11.4277 7.83411C11.3379 7.92385 11.2265 7.96872 11.0937 7.96872H7.96872V11.0937C7.96872 11.2265 7.92378 11.3379 7.83391 11.4277C7.74402 11.5175 7.63265 11.5625 7.49978 11.5625C7.36691 11.5625 7.2556 11.5175 7.16586 11.4277C7.07612 11.3379 7.03125 11.2265 7.03125 11.0937V7.96872Z' fill='%23ED2985'/%3E%3C/svg%3E%0A");
    }
}
@media screen and (max-width:768px){
    .news {
        padding: 50px 0 80px 0;
    }
    .news strong {
        font-size: 15px;
        margin-bottom: 2px;
    }
    .news h2 {
        font-size: 40px;
        margin-bottom: 30px;
    }
    .news ul li a {
        padding: 0;
        align-items: center;
    }
    .news ul li strong {
        width: 70%;
        line-height: 1.4;
        height: 2.8em;
        overflow: hidden;
        text-align: left;
    }
    .news .more {
        margin-top: 30px;
    }
    .news .more a {
        border: 1px solid #ED2985;
        width: 85px;
        padding:0 20px 0 0;
        line-height: 28px;
    }
    .news .more a::before {
        right: 7px;
        top: 3px;
    }
}
@media screen and (max-width:500px){
    .news ul li span {
        display: none;        
    }
    .news ul li a {
        padding: 10px 20px;
    }
    .news ul li strong {
        width: auto;
    }
}
.move_txt {
    position: relative;
    margin: 200px 0 230px 0;
    border-top: 1px solid #ED2985;
    border-bottom: 1px solid #ED2985;    
    height: 100px;
}
.move_txt span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 40px;
    line-height: 100px;
    animation:rolling; 
    animation-duration:15s; 
    animation-timing-function:linear; 
    animation-iteration-count:infinite;
    white-space:nowrap;
}
@keyframes rolling {
0% { transform:translate(0, 0) }
100% { transform:translate(-33.32%, 0) } /* 글자가 움직여서 처음과 동일한 위치가 되는 값 (동일한 문장을 여러번 쓰기 때문에 3-4번째 문장이 다시 시작하는 위치로 하면 됨) */
}
@media screen and (max-width:1320px){
    .move_txt {
        margin: 150px 0 180px 0;
        font-size: 35px;
        line-height: 90px;
    }
}
@media screen and (max-width:1024px){ 
    .move_txt {
        margin: 100px 0 130px 0;
        font-size: 30px;
        line-height: 80px;
    }
}
@media screen and (max-width:768px){
    .move_txt {
        margin: 80px 0 100px 0;
        font-size: 25px;
        line-height: 60px;
    }
}
.sns strong {
    display: block;
    font-size: 20px;
    color: #3d3d3d;
    margin-bottom: 5px;
    text-align: center;
}
.sns h2 {
    font-size: 70px;
    font-weight: 900;
    color: #1d1d1d;
    font-family: 'Montserrat Alternates';
    margin-bottom: 10px;
    text-align: center;
}
.sns .sns_iocn {
    margin-bottom: 60px;    
}
.sns .sns_iocn ul {
    display: flex;
    justify-content: center;
}
.sns .sns_iocn ul li a { 
    display: block;
    font-size: 0;
    line-height: 0;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 10px;
}
.sns .sns_iocn ul li.insta a {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_676)'%3E%3Cpath d='M29.8752 0H10.1248C4.53301 0 0 4.53301 0 10.1248V29.8752C0 35.467 4.53301 40 10.1248 40H29.8752C35.467 40 40 35.467 40 29.8752V10.1248C40 4.53301 35.467 0 29.8752 0Z' fill='url(%23paint0_linear_58_676)'/%3E%3Cpath d='M26.1268 12.5977C25.3728 12.5977 24.7739 13.2076 24.7739 13.9506C24.7739 14.6936 25.3839 15.3035 26.1268 15.3035C26.8698 15.3035 27.4798 14.6936 27.4798 13.9506C27.4798 13.2076 26.8698 12.5977 26.1268 12.5977Z' fill='white'/%3E%3Cpath d='M20.0941 14.3389C16.9446 14.3389 14.394 16.9006 14.394 20.0389C14.394 23.1772 16.9557 25.7389 20.0941 25.7389C23.2324 25.7389 25.7941 23.1772 25.7941 20.0389C25.7941 16.9006 23.2324 14.3389 20.0941 14.3389ZM20.0941 23.6874C18.0758 23.6874 16.4456 22.0461 16.4456 20.0389C16.4456 18.0317 18.0869 16.3904 20.0941 16.3904C22.1013 16.3904 23.7425 18.0317 23.7425 20.0389C23.7425 22.0461 22.1013 23.6874 20.0941 23.6874Z' fill='white'/%3E%3Cpath d='M24.6188 31.6164H15.3701C11.5332 31.6164 8.41699 28.5002 8.41699 24.6633V15.4146C8.41699 11.5776 11.5332 8.46143 15.3701 8.46143H24.6188C28.4558 8.46143 31.572 11.5776 31.572 15.4146V24.6633C31.572 28.5002 28.4558 31.6164 24.6188 31.6164ZM15.3701 10.635C12.7308 10.635 10.5905 12.7753 10.5905 15.4146V24.6633C10.5905 27.3026 12.7308 29.4428 15.3701 29.4428H24.6188C27.2581 29.4428 29.3984 27.3026 29.3984 24.6633V15.4146C29.3984 12.7753 27.2581 10.635 24.6188 10.635H15.3701Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_58_676' x1='-0.432492' y1='-0.432492' x2='38.8023' y2='38.8023' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBE18A'/%3E%3Cstop offset='0.21' stop-color='%23FCBB45'/%3E%3Cstop offset='0.38' stop-color='%23F75274'/%3E%3Cstop offset='0.52' stop-color='%23D53692'/%3E%3Cstop offset='0.74' stop-color='%238F39CE'/%3E%3Cstop offset='1' stop-color='%235B4FE9'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_58_676'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.sns .sns_iocn ul li.naver a {
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='40' viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_682)'%3E%3Cpath d='M37.2408 0H3.75915C1.95917 0 0.5 1.45917 0.5 3.25915V36.7408C0.5 38.5408 1.95917 40 3.75915 40H37.2408C39.0408 40 40.5 38.5408 40.5 36.7408V3.25915C40.5 1.45917 39.0408 0 37.2408 0Z' fill='%236BBC44'/%3E%3Cpath d='M30.432 10.8652V29.1352H23.7665L17.2338 19.9392V29.1352H10.5684V10.8652H17.2338L23.7665 20.4345V10.8652H30.432Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_682'%3E%3Crect x='0.5' width='40' height='40' rx='8' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.sns .list {
    height: 700px;
    margin: 0 100px;
    overflow: visible;
    position: relative;
}
.sns .list ul {
    display: flex;
    position: absolute;
    left: 0;
    width: 100%;
    top: 50px;
}
.sns .list ul li {
    position: relative;
    width: 16.66%;
}
.sns .list ul li a {
    position: absolute;
    display: block;
    left: calc(50% - 165px);
    top: 0;
    width: 330px;
    height: 480px;
    transform-origin: center center;
    border-radius: 20px;
    padding: 40px 15px;
    color: #fff;
    transition: 0.5s;
}
.sns .list ul li.naver a {
    background-color: #ED2985;
}
.sns .list ul li.insta a {
    background-color: #1d1d1d;
}
@media screen and (min-width:1025px){ 
    .sns .list ul li:nth-child(1) a {
        transform: rotate(5deg) translate(-10px, 0);
    }
    .sns .list ul li[data-hover='cur']:nth-child(1) a{
        transform: rotate(0) translate(0, 0);
        z-index: 10;
    }
    .sns .list ul li:nth-child(1)[data-hover='pre'] a {
        transform: rotate(10deg) translate(0, -20px);
    }
    .sns .list ul li:nth-child(2) a {
        transform: rotate(-20deg) translate(0, 30px);
    }
    .sns .list ul li:nth-child(2)[data-hover='cur'] a {
        transform: rotate(0) translate(0, 50px);
        z-index: 10;
    }
    .sns .list ul li[data-hover='pre']:nth-child(2) a {
        transform: rotate(-10deg) translate(0, 80px);
    }
    .sns .list ul li[data-hover='next']:nth-child(2) a {
        transform: rotate(-10deg) translate(0, 50px);
    }
    .sns .list ul li:nth-child(3) a {
        transform: rotate(20deg) translate(0, 50px);
    }
    .sns .list ul li[data-hover='cur']:nth-child(3) a {
        transform: rotate(0) translate(0, 0);
        z-index: 10;
    }
    .sns .list ul li[data-hover='pre']:nth-child(3) a {
        transform: rotate(10deg) translate(0, 80px);
    }
    .sns .list ul li[data-hover='next']:nth-child(3) a {
        transform: rotate(30deg) translate(0, 50px);
    }
    .sns .list ul li:nth-child(4) a {
        transform: rotate(-10deg) translate(0, 0);
    }
    .sns .list ul li[data-hover='cur']:nth-child(4) a {
        transform: rotate(0) translate(0, 80px);
        z-index: 10;
    }
    .sns .list ul li[data-hover='pre']:nth-child(4) a {
        transform: rotate(10deg) translate(0, 100px);
    }
    .sns .list ul li[data-hover='next']:nth-child(4) a {
        transform: rotate(10deg) translate(0, 50px);
    }
    .sns .list ul li:nth-child(5) a {
        transform: rotate(5deg) translate(0, 0px);
    }
    .sns .list ul li[data-hover='cur']:nth-child(5) a {
        transform: rotate(0) translate(0, 30px);
        z-index: 10;
    }
    .sns .list ul li[data-hover='pre']:nth-child(5) a {
        transform: rotate(10deg) translate(0, 50px);
        z-index: 10;
    }
    .sns .list ul li[data-hover='next']:nth-child(5) a {
        transform: rotate(5deg) translate(0, 50px);
    }
    .sns .list ul li:nth-child(6) a {
        transform: rotate(20deg) translate(0, 20px);
    }
    .sns .list ul li[data-hover='cur']:nth-child(6) a {
        transform: rotate(0) translate(0, 0);
        z-index: 10;
    }
    .sns .list ul li[data-hover='next']:nth-child(6) a {
        transform: rotate(10deg) translate(0, 50px);
    }
}
.sns .list ul li span {
    display: block;
    position: relative; /* bofore after 정렬의 기준 */
    font-size: 20px;
    padding-left: 40px;
}
.sns .list ul li span::before {
   position: absolute;
   left: 0;
   top: -5px;
   width: 30px;
   height: 30px;
   background-repeat: no-repeat;
   background-position: center center;
   background-size: contain;
   content: "";
}
.sns .list ul li.naver span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='40' viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_682)'%3E%3Cpath d='M37.2408 0H3.75915C1.95917 0 0.5 1.45917 0.5 3.25915V36.7408C0.5 38.5408 1.95917 40 3.75915 40H37.2408C39.0408 40 40.5 38.5408 40.5 36.7408V3.25915C40.5 1.45917 39.0408 0 37.2408 0Z' fill='%236BBC44'/%3E%3Cpath d='M30.432 10.8652V29.1352H23.7665L17.2338 19.9392V29.1352H10.5684V10.8652H17.2338L23.7665 20.4345V10.8652H30.432Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_682'%3E%3Crect x='0.5' width='40' height='40' rx='8' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.sns .list ul li.insta span::before {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_676)'%3E%3Cpath d='M29.8752 0H10.1248C4.53301 0 0 4.53301 0 10.1248V29.8752C0 35.467 4.53301 40 10.1248 40H29.8752C35.467 40 40 35.467 40 29.8752V10.1248C40 4.53301 35.467 0 29.8752 0Z' fill='url(%23paint0_linear_58_676)'/%3E%3Cpath d='M26.1268 12.5977C25.3728 12.5977 24.7739 13.2076 24.7739 13.9506C24.7739 14.6936 25.3839 15.3035 26.1268 15.3035C26.8698 15.3035 27.4798 14.6936 27.4798 13.9506C27.4798 13.2076 26.8698 12.5977 26.1268 12.5977Z' fill='white'/%3E%3Cpath d='M20.0941 14.3389C16.9446 14.3389 14.394 16.9006 14.394 20.0389C14.394 23.1772 16.9557 25.7389 20.0941 25.7389C23.2324 25.7389 25.7941 23.1772 25.7941 20.0389C25.7941 16.9006 23.2324 14.3389 20.0941 14.3389ZM20.0941 23.6874C18.0758 23.6874 16.4456 22.0461 16.4456 20.0389C16.4456 18.0317 18.0869 16.3904 20.0941 16.3904C22.1013 16.3904 23.7425 18.0317 23.7425 20.0389C23.7425 22.0461 22.1013 23.6874 20.0941 23.6874Z' fill='white'/%3E%3Cpath d='M24.6188 31.6164H15.3701C11.5332 31.6164 8.41699 28.5002 8.41699 24.6633V15.4146C8.41699 11.5776 11.5332 8.46143 15.3701 8.46143H24.6188C28.4558 8.46143 31.572 11.5776 31.572 15.4146V24.6633C31.572 28.5002 28.4558 31.6164 24.6188 31.6164ZM15.3701 10.635C12.7308 10.635 10.5905 12.7753 10.5905 15.4146V24.6633C10.5905 27.3026 12.7308 29.4428 15.3701 29.4428H24.6188C27.2581 29.4428 29.3984 27.3026 29.3984 24.6633V15.4146C29.3984 12.7753 27.2581 10.635 24.6188 10.635H15.3701Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_58_676' x1='-0.432492' y1='-0.432492' x2='38.8023' y2='38.8023' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FBE18A'/%3E%3Cstop offset='0.21' stop-color='%23FCBB45'/%3E%3Cstop offset='0.38' stop-color='%23F75274'/%3E%3Cstop offset='0.52' stop-color='%23D53692'/%3E%3Cstop offset='0.74' stop-color='%238F39CE'/%3E%3Cstop offset='1' stop-color='%235B4FE9'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_58_676'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.sns .list ul li span::after {
    position: absolute;
    right: 0;
    top: -5px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='19' viewBox='0 0 21 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7456 0.265625C17.7832 0.265625 20.2456 2.76562 20.2456 6.26562C20.2456 13.2656 12.7456 17.2656 10.2456 18.7656C7.74561 17.2656 0.245605 13.2656 0.245605 6.26562C0.245605 2.76562 2.74561 0.265625 5.74561 0.265625C7.60558 0.265625 9.24561 1.26562 10.2456 2.26562C11.2456 1.26562 12.8856 0.265625 14.7456 0.265625Z' fill='white'/%3E%3C/svg%3E%0A");
    content: "";
}
.sns .list ul li .photo {
    width: 300px;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin: 15px 0 10px 0;
}
.sns .list ul li .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sns .list ul li h3 {
    font-size: 20px;
}
.sns .more {
    position: relative; /* before 정렬의 기준 */
    margin: 60px 0 200px 0;
    text-align: right;
}
.sns .more a {
    display: inline-block;
    background-color: #ED2985;
    color: #fff;
    width: 95px;
    padding:0 38px 0 14px;
    line-height: 32px;
    border-radius: 50px;
    transform: translate(-4px, -6px);
    transition: 0.5s;
}
.sns .more a:hover {
    transform: translate(0, 0);
}
.sns .more::before {
    position: absolute;
    border-radius: 50px;
    background-color: #1d1d1d;
    width: 95px;
    height: 32px;
    content: "";
}
.sns .more a::before {
    position: absolute;
    right: 13px;
    top: 5px;
    z-index: 1;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.37516 11.1249H5.2085C5.03141 11.1249 4.88298 11.065 4.76318 10.9451C4.64339 10.8253 4.5835 10.6768 4.5835 10.4996C4.5835 10.3225 4.64339 10.1741 4.76318 10.0544C4.88298 9.93475 5.03141 9.87492 5.2085 9.87492H9.37516V5.70825C9.37516 5.53117 9.43508 5.38273 9.55491 5.26294C9.67476 5.14315 9.82326 5.08325 10.0004 5.08325C10.1776 5.08325 10.326 5.14315 10.4456 5.26294C10.5653 5.38273 10.6251 5.53117 10.6251 5.70825V9.87492H14.7918C14.9689 9.87492 15.1173 9.93484 15.2371 10.0547C15.3569 10.1745 15.4168 10.323 15.4168 10.5002C15.4168 10.6773 15.3569 10.8257 15.2371 10.9454C15.1173 11.0651 14.9689 11.1249 14.7918 11.1249H10.6251V15.2915C10.6251 15.4686 10.5652 15.6171 10.4454 15.7369C10.3255 15.8566 10.177 15.9165 9.99987 15.9165C9.8227 15.9165 9.67429 15.8566 9.55464 15.7369C9.43499 15.6171 9.37516 15.4686 9.37516 15.2915V11.1249Z' fill='white'/%3E%3C/svg%3E%0A");
    content: "";
}
@media screen and (max-width:1600px){
    .sns .list {
        margin: 0 80px;
    }
    .sns .list ul li a {
        left: calc(50% - 150px);
        width: 300px;
        height: 450px;
        border-radius: 20px;
        padding: 40px 20px;
    }
    .sns .list ul li .photo {
        width: 260px;
        height: 260px;
        border-radius: 10px;
        margin: 15px 0 15px 0;
    }
    .sns .list ul li h3 {
        font-size: 18px;
    }
}
@media screen and (max-width:1320px){
    .sns .list {
        height: 600px;
    }
    .sns h2 {
        font-size: 60px;
        margin-bottom: 15px;
    }
    .sns .sns_iocn {
        margin-bottom: 30px;
    }    .sns .list ul li {
        width: 20%;
    }
    .sns .list ul li:last-child {
        display: none;
    }
}
@media screen and (max-width:1280px){
    .sns .list {
        margin: 0 50px;
        height: 550px;
    }
    .sns strong {
        font-size: 18px;
    }
    .sns h2 {
        font-size: 50px;
        margin-bottom: 10px;
    }
    .sns .sns_iocn {
        margin-bottom: 20px;    
    }
    .sns .sns_iocn ul li a {
        width: 35px;
        height: 35px;
        margin: 0 5px;
    }
    .sns .list ul li a {
        left: calc(50% - 135px);
        width: 270px;
        height: 400px;
        border-radius: 20px;
        padding: 30px 15px;
    }
    .sns .list ul li span {
        font-size: 18px;
        padding-left: 30px;
    }
    .sns .list ul li span::after {
        top: -3px;
        width: 20px;
        height: 20px;
    }
    .sns .list ul li span::before {
        top: -3px;
        width: 25px;
        height: 25px;
    }
    .sns .list ul li .photo {
        width: 240px;
        height: 240px;
        border-radius: 10px;
    }
    .sns .list ul li h3 {
        font-size: 15px;
    }
    .sns .more {
        margin: 40px 0 180px 0;
    }
}
@media screen and (max-width:1024px){
    .sns .list {
        height: 500px;
    }
    .sns .list ul li {
        position: relative;
        width: auto;
    }
    .sns .list ul li a {
        position: relative;
    }
    .sns .swiper-pagination-bullet {
        opacity: 1;
        background-color: #FFC2D4;
    }
    .sns .swiper-pagination-bullet-active {
        opacity: 1;
        background-color: #ED2985;
    }
    .sns .more {
        margin: 20px 0 130px 0;
    }
    .sns .more a {
        background-color: #fff;
        border: 2px solid #ED2985;
        color: #ED2985;
        width: 95px;
        padding:0 35px 0 0;
        line-height: 32px;
        border-radius: 20px;
        transform: translate(0, -0);
    }
    .sns .more::before {
        display: none;
    }
    .sns .more a:hover {
        transform: translate(0, 0);
    }
    .sns .more a::before {
        right: 10px;
        top: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.03125 7.96872H3.90625C3.77344 7.96872 3.66211 7.92378 3.57227 7.83391C3.48242 7.74402 3.4375 7.63265 3.4375 7.49978C3.4375 7.36691 3.48242 7.2556 3.57227 7.16586C3.66211 7.07612 3.77344 7.03125 3.90625 7.03125H7.03125V3.90625C7.03125 3.77344 7.07619 3.66211 7.16606 3.57227C7.25595 3.48242 7.36732 3.4375 7.50019 3.4375C7.63306 3.4375 7.74437 3.48242 7.83411 3.57227C7.92385 3.66211 7.96872 3.77344 7.96872 3.90625V7.03125H11.0937C11.2265 7.03125 11.3379 7.07619 11.4277 7.16606C11.5175 7.25595 11.5625 7.36732 11.5625 7.50019C11.5625 7.63306 11.5175 7.74437 11.4277 7.83411C11.3379 7.92385 11.2265 7.96872 11.0937 7.96872H7.96872V11.0937C7.96872 11.2265 7.92378 11.3379 7.83391 11.4277C7.74402 11.5175 7.63265 11.5625 7.49978 11.5625C7.36691 11.5625 7.2556 11.5175 7.16586 11.4277C7.07612 11.3379 7.03125 11.2265 7.03125 11.0937V7.96872Z' fill='%23ED2985'/%3E%3C/svg%3E%0A");
    }
}
@media screen and (max-width:768px){
    .sns .more a {
        border: 1px solid #ED2985;
        width: 85px;
        padding:0 35px 0 0;
        line-height: 28px;
    }
    .sns .more a::before {
        right: 7px;
        top: 3px;
    }
}