@charset "utf-8";

body.overscroll{overflow: hidden;}

:root {
/*     --stroke-Gra: linear-gradient(281deg, #EEA00F -2.81%, #64B3F4 103.03%); */
    --stroke-Gra: linear-gradient(91.78deg, #2DC537 0%, #237DBD 107.42%);
    --stroke-Gra2: linear-gradient(91.78deg, #237DBD 0%, #2DC537 107.42%);
    --green-Gra: linear-gradient(95.97deg, #23CE4F 0%, #072C81 224.22%);
    --util-topGradi: linear-gradient(91deg, #D7162D 43.16%, #DE2E2E 217.25%);
    --color-link: #1373B7;
    --color-link2: #02A45C;
    --color-bbs-link: #F3810F;
    --color-green: #02A45C;
    --color-green2: #007641;
    --color-green-bright: #ECF9F3;
    --color-green-bright2: #F3FFFA;
    --color-blue: #1283D3;
    --color-blue2: #05609F;
    --color-dark: #4F4F4F;
    --color-dark2: #222;
    --color-silver: #D8DBE2;
    --color-silver-light: #F1F3F8;
    --color-silver2: #D8DBE2;
    --color-silver-hover: #565656;
    --color-point: #F35F0F; /* 주황 */
    --color-point2: #F9954E; /* 주황 */
    
    --color-old: #0086f8;
    --color-old2: #00aa4b;
/*     --icon-plus: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.14294 8L14.8572 8' stroke='%2302A45C' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 1.14282L8 14.8571' stroke='%2302A45C' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A"); */
    --icon-plus: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.85712 7L12.1428 7' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M7 1.85742L7 12.1431' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --icon-down: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3125 11.5625L7.65626 5.90626L2.00002 11.5625' stroke='%23FFB37D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}


a.link {color: var(--color-link);}
a.link2 {color: #222;}
a.link2:hover, a.link2:focus, a.link2:active {color: var(--color-link2);}
.btn {
	padding: .7em;
	border: none;
	border-radius: .54em;
	background-color: var(--color-dark);
	color: #fff;
	font-family: inherit;
	font-size: inherit;
	font-weight: 600;
	min-width: 100px;
	line-height: 1.4;
	
	display: flex;
	gap: 10px;
	justify-content: center;
	align-items: center;
	
	transition: .3s;
}
.btn:hover, .btn:focus, .btn:hover {background-color: #000;}
.btn-dark {background-color: var(--color-dark); color: #fff;}
.btn-dark:hover, .btn-dark:focus, .btn-dark:active {background-color: #000; color: #fff;}
.btn-dark-i {background-color: var(--color-dark) !important; color: #fff !important;}
.btn-dark-i:hover, .btn-dark-i:focus, .btn-dark-i:active {background-color: #000 !important; color: #fff !important;}
.btn-silver {background-color: var(--color-silver); color: var(--color-dark2);}
.btn-silver:hover, .btn-silver:focus, .btn-silver:active {background-color: var(--color-silver-hover); color: #fff;}
.btn-silver-i {background-color: var(--color-silver) !important; color: var(--color-dark2) !important;}
.btn-silver-i:hover, .btn-silver-i:focus, .btn-silver-i:active {background-color: var(--color-silver-hover) !important; color: #fff !important;}
.btn-silver-light {background-color: var(--color-silver-light); color: var(--color-dark2);}
.btn-silver-light:hover, .btn-silver-light:focus, .btn-silver-light:active {background-color: var(--color-dark2); color: #fff;}
.btn-silver2 {background-color: var(--color-silver); color: var(--color-dark2);}
.btn-silver2:hover, .btn-silver2:focus, .btn-silver2:active {background-color: var(--color-dark2); color: #fff;}
.btn-silver2-i {background-color: var(--color-silver) !important; color: var(--color-dark2) !important;}
.btn-silver2-i:hover, .btn-silver2-i:focus, .btn-silver2-i:active {background-color: var(--color-dark2) !important; color: #fff !important;}
.btn-green, a.btn-green {background-color: var(--color-green); color: #fff;}
.btn-green:hover, .btn-green:focus, .btn-green:active {background-color: var(--color-green2);}
.btn-green-i {background-color: var(--color-green) !important; color: #fff !important;}
.btn-green-i:hover, .btn-green-i:focus, .btn-green-i:active {background-color: var(--color-green2) !important;}
.btn-green-alt, a.btn-green-alt {background-color: #fff; color: var(--color-green); border: 1px solid var(--color-green);}
.btn-green-alt:hover, .btn-green-alt:focus, .btn-green-alt:active {background-color: var(--color-green); color: #fff;}
.btn-green-alt-i {background-color: #fff !important; color: var(--color-green) !important; border: 1px solid var(--color-green) !important;}
.btn-green-alt-i:hover, .btn-green-alt-i:focus, .btn-green-alt-i:active {background-color: var(--color-green) !important; color: #fff !important;}
.btn-blue {background-color: var(--color-blue); color: #fff;}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active {background-color: var(--color-blue2); color: #fff;}
.btn-blue-i {background-color: var(--color-blue) !important; color: #fff !important;}
.btn-blue-i:hover, .btn-blue-i:focus, .btn-blue-i:active {background-color: var(--color-blue2) !important; color: #fff !important;}
.btn-warning {background-color: var(--color-silver-light); color: var(--color-dark2);}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {background-color: var(--color-point); color: #fff;}
.btn-warning-i {background-color: var(--color-silver-light) !important; color: var(--color-dark2) !important;}
.btn-warning-i:hover, .btn-warning-i:focus, .btn-warning-i:active {background-color: var(--color-point) !important; color: #fff !important;}
.btn-plus::after, .btn-plus-before::before {
	content: ''; background: none;
	display: block; width: 12px; height: 12px; transition: .3s;
	background-color: var(--color-dark2);
	mask-image: var(--icon-plus);
	mask-repeat: no-repeat;
/* 	mask-position: center left; */
	mask-position: center;
	mask-size: contain;
}
.btn-plus:hover::after,  .btn-plus:focus::after, .btn-plus:active::after, 
.btn-plus-before:hover::before, .btn-plus-before:focus::before, .btn-plus-before:active::before {background-color: #fff;}
.btn-plus-i::after, .btn-plus-before-i::before {
	content: '' !important; background: none !important;
	display: block; width: 12px; height: 12px; transition: .3s;
	background-color: var(--color-dark2);
	mask-image: var(--icon-plus);
	mask-repeat: no-repeat;
/* 	mask-position: center left; */
	mask-position: center;
	mask-size: contain;
}
.btn-plus-i:hover::after,  .btn-plus-i:focus::after, .btn-plus-i:active::after, 
.btn-plus-i-before:hover::before, .btn-plus-before-i:focus::before, .btn-plus-before-i:active::before {background-color: #fff !important;}
.btn-plus.btn-green-alt::after {background-color: var(--color-green);}
.btn-plus-i.btn-green-alt-i::after {background-color: var(--color-green) !important;}
.btn-plus-i.btn-green-alt-i:hover::after, .btn-plus-i.btn-green-alt-i:focus::after, .btn-plus-i.btn-green-alt-i:active::after,
.btn-plus.btn-green-alt-i:hover::after, .btn-plus.btn-green-alt-i:focus::after, .btn-plus.btn-green-alt-i:active::after {background-color: #fff !important;}
input:text, input:number, input:search {}
.border, .juyo_info {
	background-origin: border-box;
	background-clip: content-box, border-box;
	backdrop-filter: blur(4px);
	border: 2px solid transparent;
	background-image: linear-gradient(#fff, #fff), var(--stroke-Gra);
}
.main .border {border-width: 1px; backdrop-filter: blur(2px); background-image: linear-gradient(#fff, #fff), var(--stroke-Gra2);}


.note-modal-content, .note-modal-header, .note-modal-body, .note-modal-footer {box-sizing: content-box;}
.btn.note-btn {
  display: inline-block;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  outline: 0;
  color: #333;
  background-color: #fff;
  border: 1px solid #dae0e5;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 3px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  border-radius: 0;
  min-width: auto;
  transition: none;
}
.btn.note-btn-primary {
  background: #fa6362;
  color: #fff;
}
.btn.note-btn.disabled, .btn.note-btn[disabled], fieldset[disabled] .btn.note-btn {
  cursor: not-allowed;
  -webkit-opacity: .65;
  -khtml-opacity: .65;
  -moz-opacity: .65;
  opacity: .65;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=65);
  filter: alpha(opacity=65);
  box-shadow: none;
}
.btn.note-btn-primary.focus, .btn.note-btn-primary:focus, .btn.note-btn-primary:hover {
  color: #fff;
  text-decoration: none;
  border: 1px solid #dae0e5;
  background-color: #fa6362;
  border-radius: 1px;
}


/* 비주얼 */

/* .main #header .right_new_btn, */
.main #hsearchForm, .main #header .sear_ch_com {
    display: none;
}
/* .sear_ch_com{position: relative; height: 60px; width: 100%; border: 2px solid #0086f8; box-sizing: border-box; border-radius: 10px; overflow: hidden;} */
.sear_ch_com input{width: 100%; height: 100%; padding: 0 70px 0 30px; font-size: 18px; letter-spacing: -0.025em; color: #222; border: none; outline: none; box-sizing: border-box;}
/* .sear_ch_com input::placeholder{color: #aaaaaa;} */
/* .sear_ch_com .sear_btn{ height: 82%; aspect-ratio: 1/1; border-radius: 10px; background-color: #0086f8; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; right: 5px; transform: translateY(-50%);} */


.main {
    overflow-x: hidden;
    background: url(/img/visual-bg.png) no-repeat center;
    background-size: cover;
}


.main .main-visual::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    background: url(/img/dandelion.svg) no-repeat left bottom;
    background-size: cover;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -2;
}

.bg,
.main .main-visual {
    width: 100vw;
    /* height: calc(100vh - 110px); */
    box-sizing: border-box;
    position: relative;
}

.bg {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.bg .top::before,
.bg .top::after,
.bg .bottom::before,
.bg .bottom::after {
    content: '';
    display: block;
    width: 220%;
    height: 220%;
    background: url(/img/blue_cir.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    left: -122%;
    bottom: 22%;
    animation:rot 10s linear infinite;
    transform-origin: center;
}

.bg .top::after {
    background-image: url(/img/yellow_cir.svg);
    left: -112%;
    bottom: 35%;
    animation:rot 8s linear infinite;
}


.bg .bottom::before,
.bg .bottom::after {
    width: 190%;
    height: 190%;
    background-image: url(/img/blue_cir2.svg);
    left: -1%;
    bottom: -131%;
    animation-direction: reverse;
}

.bg .bottom::after {
    background-image: url(/img/yellow_cir2.svg);
    left: -3%;
    bottom: -145%;
    width: 215%;
    height: 215%;
    animation:rot 8s linear infinite reverse;
}

@keyframes rot{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.main .main-visual .inner {
    width: 100%;
    height: 100%;
    max-width: 1600px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main .inner .left {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    /* height: 900px; */
    padding-top: 100px;
}

.main .inner .left > * {
    width: 100%;
}


.visual-tit {
    color: var(--bk_00, #000);
    font-family: Pretendard;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}
.visual-tit .num {
    color: var(--bk_00, #000);
    font-family: Pretendard;
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .comomn-btn-list {
    display: flex;
    gap: 20px;
}

.main .comomn-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
}

.main .comomn-btn span {
/*     width: calc(100% - 60px); */
    padding-left: 25px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .comomn-btn i {
    display: block;
    min-width: 60px;
    height: 60px;
    background: #252525;
    border-left: 1px solid var(--color-black);
    transition: .3s;
    overflow: hidden;
}

.main .comomn-btn i::after {
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    background: url(/img/ico_btn_plus.svg) no-repeat center;
    transition: .3s;
}

.main .comomn-btn:not(.link):hover i::after, .main .comomn-btn:not(.link):focus i::after {
    transform: rotate(180deg);
}

.main .comomn-btn.link i::after {
    transform: rotate(-45deg);
    background-image: url(/img/ico_btn_link.svg);
}

.main .comomn-btn.link:hover i::after, .main .comomn-btn.link:focus i::after {
    animation:link_btn_ani2 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes link_btn_ani {
	0% {
	  transform:translateX(0%);
	}
	60% {
	  transform:translateX(100%);
	  opacity:1;
	}
	61% {
		opacity:0;
	}
	62% {
		transform:translateX(-80%);
	}
	70% {
		transform:translateX(-80%);
		opacity:1;
	  }
	100% {
	  transform:translateX(0%);
	}
}

@keyframes link_btn_ani2 {
	0% {
		transform:rotate(-45deg) translate(0px,0px);
	  }
	  60% {
		transform:rotate(-45deg) translate(50px,-10px);;
		/*opacity:1;*/
	  }
	  61% {
		opacity:0;
	  }
	  62% {
			transform:rotate(-45deg) translate(-100px,30px);
	  }
	  70% {
		transform:rotate(-45deg) translate(-100px,30px);
		opacity:1;
		}
	  100% {
		transform:rotate(-45deg) translate(0px,0px);
	  }
}

.main .main-visual .sear_ch_com {
    border: 2px solid #363636;
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.10);
    margin: 1.5rem 0 5rem 0;
}

.sear_ch_com.visual {
    height: fit-content;
}

.sear_ch_com.visual input {
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    padding: 19px 4rem 15px 2rem;
}

.sear_ch_com.visual input::placeholder {
    color: #989898;
}

.sear_ch_com.visual .sear_btn {
    width: 60px;
    background-size: 60px;
}

.main .inner .right {
    width: 55%;
    padding-bottom: 70px;
    min-height: 596px;
}

.main .visual-card-list {
    width: 100%;
    height: 100%;
    min-height: 880px;
    display: flex;
    gap: 20px;
}
.main .visual-card-list .btn-lounge {
	display: none;
}

.main .visual-card-list > div {
    width: calc(50% - 10px);
    height: calc(100% - 80px);
    height: 91.11%;
    display: flex;
    flex-direction: column;
    gap: 20px;    
}

.main .visual-card-list .compare {
    margin-top: auto;
    margin-top: 80px;
}

.main .visual-card {
    display: block;
    width: 100%;
    /* height: 100%; */
    align-items: center;
    border-radius: 20px;
    backdrop-filter: blur(2px);
    position: relative;
    border: 1px solid transparent;
    background-image: linear-gradient(#fff, #fff), var(--stroke-Gra2);
    background-origin: border-box;
    background-clip: content-box, border-box;
    position: relative;
    transition: .3s;
}

.main .visual-card:hover, .main .visual-card:focus {
    background-color: rgba(0, 0, 0, 0.50);
    background-image:  rgba(0, 0, 0, 0.50), var(--stroke-Gra);
}

.main .visual-card::after {
    content: '';
    display: block;
    width: 87px;
    height: 87px;
    /* background:  rgba(255, 255, 255, 0.90) url(/img/ico_card-hover.svg) no-repeat center; */
    background:  rgba(255, 255, 255, 0.90) url(/img/ico_card-hover2.svg) no-repeat center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
    visibility: hidden;
}

.main .visual-card:hover::after, .main .visual-card:focus::after {
    visibility: visible;
}

.main .visual-card .cont {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 175px;
}

.main .visual-card .cont > * {
    width: 100%;
}

.main .visual-card .tit {
    color: var(--bk_00, #000);
    font-size: 26px;
    font-size: clamp(20px, 1.3542vw, 26px);
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
}

.main .visual-card .tit,
.main .visual-card .txt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.main .visual-card .txt {
    color: var(--bk_32, #323232);
    text-align: right;
    font-size: clamp(18px, 0.9375vw, 16px);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
}

@media all and (max-width:1620px){
    
    .main .main-visual .inner {
		width: calc(100% - 40px);
		max-width: none;
	}
}

@media all and (max-width:1400px){
    .visual-tit {
        font-size: 32px;
    }

    .visual-tit .num {
        font-size: 48px;
    }

    .sear_ch_com.visual input {
        font-size: 20px;
    }

    .main .comomn-btn span {
        font-size: 16px;
        padding-left: 1rem;
    }

    .main .comomn-btn i {
        min-width: 50px;
        height: 50px;
    }
}

@media all and (max-width:1024px){

    #header:not(:has(~ main.rival_m_scroll)) {
        padding: 10px 20px;
        border-bottom: 1px solid #DADADA;
        background-color: #fff;
    }

    #header:not(:has(~ main.rival_m_scroll)) .logo img {
        width: 103px;
    }

    #header:not(:has(~ main.rival_m_scroll)) .user_href a img,
    #header:not(:has(~ main.rival_m_scroll)) .user_href a {
        width: 40px;
        height: 40px;
    }

    #header:not(:has(~ main.rival_m_scroll)) .user_href a {
        background-color: #434343;
    }

    main:not(.rival_m_scroll) ~ #footer {
        padding: 30px 20px;
    }

    main:not(.rival_m_scroll) ~ #footer h1 {
        padding-bottom: 30px;
    }

    main:not(.rival_m_scroll) ~ #footer h1 img {
        height: 19px;
    }

    main:not(.rival_m_scroll) ~ #footer .top_foot {
        padding-bottom: 0;
    }

    main:not(.rival_m_scroll) ~ #footer .top_foot .copy {
        font-size: 14px;
    }

    .bg .top::before, .bg .top::after, .bg .bottom::before, .bg .bottom::after {
        display: none;
    }

    .sear_ch_com.visual .sear_btn {
        background-size: 50px;
    }

    .main .main-visual::before {
        width: 100%;
        height: 100%;
        top: -770px;
        left: 0;
        background-size: 980px;
    }

    .main .main-visual .inner {
		flex-direction: column;
	}

    .main .main-visual .sear_ch_com {
        margin: 1rem 0 2rem;
    }

    .main .inner .left,
    .main .inner .right {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .main .inner .right {
        padding-bottom: 60px;
    }

    .sear_ch_com.visual input {
        font-size: 16px;
        padding: 20px 5rem 12px 17px;
    }

    .main .comomn-btn span {
        font-size: 16px;
    }

    .main .comomn-btn-list {
        padding-bottom: 30px;
    }

    .visual-tit {
        padding-top: 30px;
        font-size: 24px;
        text-align: center;
    }

    .visual-tit .num {
        font-size: 32px;
    }

    .main .visual-card-list > div {
        width: 100%;
    }

    .main .visual-card-list .compare {
        /* display: none; */
        margin-top: 0;
    }
    .main .visual-card-list {
    	flex-direction: column;
    	gap: 20px;
    }
	.main .visual-card-list .btn-lounge {
		display: inherit;
	}

    .main .visual-card .cont {
        padding: 20px;
        min-height: 144px;
    }

    .main .visual-card .txt {
        font-size: 16px;
    }

    .main .visual-card::after {
        width: 60px;
        height: 60px;
        background-size: 60px;
    }
}


@media all and (max-width:768px){
    
}

@media all and (max-width:460px){
    .main .comomn-btn-list {
    	flex-direction: column;
    }
}