@media only screen and (max-width: 1320px){
	main{
		max-width: 1024px;
	}
	.trigger-2 {
		width: 750px;
		padding: 15px 60px;
		font-size: 20px;
        max-width: 100%;
	}
	.arrow {
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		border-left: 8px solid #fff;
		border-left-width: 12px;
	}
	.collapse {
		width: 750px;
		max-width: 100%;
	}
	.left-container {
		width: 550px;
		margin: 0px 11px 0px 0px;
	}
	.right-container{
		width: 430px;
	}
	.title {
		width: 430px;
		left: 0px;
	}
	body.en .mid {
		font-size: 24px;
		line-height: 1.2;
	}


	.font-20{
		font-size: 20px;
	}
	.font-15{
		font-size: 15px !important;
	}

	.m-font-sc{
		font-size: 14px;
	}
	.th-m-font{
		font-size: 15px;
	}
	.steps-wrap {
	    left: 35px;
	}
}

@media only screen and (max-width: 1024px){
	body{
		background-image: url("main-background-767.2024.jpg");
		background-color: #051628;
		background-position: center 80px;
	}

	.span2{
		top: 0px!important;
	}
	.tpl-nav-prod{
    display: none;
	}
	main{
		max-width: 767px;
	}
	.left-container {
		background-size: contain !important;
		width: 400px;
		margin: 0px;
	}
	.title {
	    background-size: contain !important;
	    height: 45px;
	    width: 290px;
	    left: 0;
	}
	.marketing-msg {
		background-size: contain !important;
        width: 312px;
        margin-top: 55px;
        font-size: 0px;
	}

	.slick-dots {
		bottom: 17px;
	}
	.mid {
	    font-size: 27px;
	    letter-spacing: 0;
		line-height: unset;
	}

	body.en .mid {
		font-size: 21px;
		line-height: 1.2;
	}
	body.kr .mid {
	    font-size: 28px;
	    letter-spacing: 0;
	    line-height: unset;
	}

	.main-offer-image {
	    margin-top: -30px;
	    width: 180%;
	    left: -45px;
	}
	.right-container {
		width: 352px;
	}

	body.kr .regform-item.regform-bday .item-element-wrapper>select#regForm_birthdate_day, body.kr .regform-item.regform-bday .item-element-wrapper>select#regForm_birthdate_month {
	    width: 74px !important;
	}

	.step, .step-glow {
	    background-size: contain !important;
	    width: 350px;
	    height: 70px;
	}
	.step-no {
		width: 26px;
	}
	.big-2 {
		font-size: 33px;
	}
	.mid-2 {
		font-size: 14px;
	}
	.mid-3 {
		font-size: 13px;
	}
	.mid-4 {
		font-size: 13px;
	}
	.mid-5 {
		font-size:17px;
	}
	.mid-6 {
		font-size:16px;
	}
	body.en .mid-5 {
		font-size: 14px;
	}
	body.kr .mid-5 {
		font-size:15px;
	}
	.step-desc {
	    width: 205px;
	    font-size: 9px;
	    padding-right: 5px;
	}
	.step .step-no, .step .step-desc {
	    margin-top: 12px;
	}
	.steps-wrap {
	    margin: 60px auto 24px;
	    left: 0px;
	}
	.step-no {
	    left: -40px;
	    top: -2px;
	}
	.feature-item {
	    width: 185px;
	    height: 280px;
	    margin-bottom: 25px;
	}
	.feature-item img{
		width:100%;
	}
	.label-wrap {
		background-size: contain !important;
		width: 170px;
		height:52px;
		padding: 14px;
		margin: -40px auto 0px;
	}
    body.kr .label-wrap {
        padding-top: 15px;
    }
	.label-wrap.mid-2 {
		font-size: 12px;
	}
	.single-line {
		padding-top: 20px;
	}
	.feature-desc{
		background-size: contain !important;
		width: 157px;
		height: 89px;
		margin-top: 13px;
		padding:20px 5px 5px;
		font-size:10px;
	}
	.fast-reg-wrap .country-area-code input {
		padding-left: 95px!important;
	}
	.country-area-code span.trigger:after {
		display: none !important;
	}
	.country-area-code .trigger:before {
		top: -2px !important;
	}
	.country-area-code span.trigger:before {
		margin-right: 2px !important;
	}

	body.en .cn-ny-promo {
		font-size: 12px;
	}

	body.en .cn{
		padding-top: 17px;
	}
	
	body.kr .cn-ny-promo {
		font-size: 12px;
	}

	body.kr .cn{
		padding-top: 11px;
	}

	body.kr .three-lines{
		padding-top:7px;
	}

	.font-20{
		font-size: 15px;
	}
	.font-15{
		font-size: 12px !important;
	}
	.m-font{
		font-size: 12px !important;
	}

	.m-font-sc {
	    font-size: 10px;
	}
	.m-font-p{
		font-size: 10px;
	}
	.top-m{
		margin-top: 7px;
	}

	body.kr .step-no {
	    left: -40px;
	    top: -4px;
	    font-size: 30px;
	}

	#feature-item-link4 li {
	    width: 110px;
	}

	body.kr #feature-item-link4 li {
	    width: 110px;
	    font-size: 9px;
	}

	.slick-list {
	    height: auto !important;
	}

	.main-offer-container {
	    margin-left: -226px;
	    margin-top: 10px;
	}
	.main-offer-glow {
	    top: 2px;
	}
	.main-offer-image,
	.main-offer-glow {
	    width: 825px;
	    height: 769px;
	}
}

@media only screen and (max-width: 767px){
	body{
		background-position: center 18px;
	}
	main{
		max-width: 599px;
	}
	.left-container {
		width: 260px;
		height: 359px;
	}
	.right-container {
		/* width: 333px; */
		width: 100%;
	}
	.marketing-msg {
	    background-size: contain !important;
	    height: auto;
	    width: 260px;
	    margin-top: 40px;
	    font-size: 12px;
	    padding: 0;
	    margin-bottom: 10px;
	}

	.slick-dots {
		bottom: 10px;
	}
	.slick-dots li {
		width: 15px;
	}
	.slick-dots li button:before {
		font-size: 7px;
	}
	.mid {
		font-size: 21px;
		letter-spacing: 1px;
	}

	.main-offer-image {
	    margin-top: 10px;
	    left: -110px;
	    width: 245%;
	}
	
	.step, .step-glow {
	    background-size: contain !important;
	    width: 275px;
	    height: 50px;
	    top: 0;
	    position: relative;
	}
	.step .step-no, .step .step-desc {
	    margin-top: 7px;
	}
	.step-no {
	    left: -12px;
	    top: 0px;
	}
	.step-desc {
	    width: 199px;
	}
	.big-2 {
		font-size: 28px;
	}
	.mid-2 {
		font-size: 13px;
	}
	.mid-3 {
		font-size: 11px;
	}
	.mid-4 {
		font-size: 11px;
	}
	.mid-5 {
		font-size:13px;
	}
	.mid-6 {
		font-size:13px;
	}
	body.kr .mid-5 {
		font-size:12px;
	}
	.featured-wrap {
		width: 80%;
	}

	body.en .cn-ny-promo {
		font-size: 10px;
	}

	body.en .cn {
		padding-top: 11px;
	}
	

	body.kr .marketing-msg {
		padding-top: 10px;
	}

	body.kr .cn{
		padding-top: 17px;
	}

	body.kr .three-lines{
		padding-top:13px;
	}

	body.kr .cn-ny-promo {
		font-size: 9px;
	}

	.font-20{
		font-size: 11px;
	}
	body.kr .mid {
	    font-size: 22px !important;
	    display: inline-block;
	    margin-top: 5px;
	    line-height: 18pt;
	}
	.m-font {
	    font-size: 10px !important;
	}
	.font-15 {
	    font-size: 10px !important;
	}

	.m-font-sc {
	    font-size: 8px;
	}
	body.sc .mid {
	    font-size: 11px;
	}
	.m-font-p{
		font-size: 8px;
	}
	.th-m-font {
	    font-size: 10px;
	}
	.f-m {
	    font-size: 13px !important;
	    margin-bottom: -28px !important;
	}
	.f-d-m {
	    font-size: 11px !important;
	    display: inline-block !important;
	    margin-bottom: -82px !important;
	}
	.p-t-0 {
	    margin-top: -7px !important;
	}

	body.kr .step-no {
	    left: -11px;
	    top: 0px;
	    font-size: 25px;
	}

	body.kr .regform-item.regform-bday .item-element-wrapper>select#regForm_birthdate_day, body.kr .regform-item.regform-bday .item-element-wrapper>select#regForm_birthdate_month {
	    width: 69px !important;
	}

	.main-offer-container {
	    margin-left: -315px;
	    margin-top: 10px;
	}
	.main-offer-glow {
	    top: 32px;
	}
	.main-offer-image, .main-offer-glow {
	    width: 825px !important;
	    height: 720px;
	}
}
@media only screen and (max-width: 650px){
    .main-offer-image, .main-offer-glow {
        width: 825px !important;
        height: 720px;
	}
}
@media only screen and (max-width: 599px){

	.desktop{
		display: none;
	}
	.mobile{
		display: block;
	}
	body{
		background-image: url("main-background-480.2024.jpg");
		background-color: #051628;
		background-position: center -310px;
		overflow-x: hidden;
	}
	main {
		text-align: center;
		width: 350px;
	}	

	.right-container {
		margin-top: 15px !important;
	}
	.title {
	    background: url("page-title-en-mobi.2024.png") center top no-repeat;
	    height: 100px;
	    width: 240px;
	}
	.title-glow{
		background: url("page-title-glow-en-mobi.2024.png") center top no-repeat;
	}
	.left-container {
		width: 290px;
		height: 364px;
	}
	.marketing-msg {
		width: 310px;
	}
	.steps-wrap {
		margin: 26px auto 24px;
	}
	.step {
		margin: 0 10px;
	}
	.featured-wrap {
		width: 100%;
	}
	.feature-item img {
		z-index: 1;
		position: relative;
	}
	.feature-desc {
	    padding: 17px 7px 5px 7px;
	}
	.label-wrap {
		text-align: center;
	}
	.feature-item {
		height: 290px;
	}
	.featured-wrap {
		margin: 50px auto 10px;
	}
	.main-offer-image {
	    margin-top: 10px;
	    left: -120px;
	    width: 180%;
	    margin: 0 auto;
	    top: 220px;
	}
	.header-title {
	    top: -450px;
	    display: none;
	}
	.marketing-msg {
	    top: 0px;
	}
	.fast-reg-wrap {
	    top: 0px;
	}
	.steps-wrap.mobile {
	    margin: 0 auto;
	    top: 25px;
	    display: flex;
	    flex-direction: column;
	    align-content: center;
	    justify-content: center;
	    align-items: center;
	}
	.featured-wrap {
	    margin: 25px auto 10px;
	}
	.step-desc {
	    width: 200px;
	}
	.step-no {
	    left: -12px;
	}
	.feature-item {
	    margin-bottom: 5px;
	}
	.join-now-btn-mobile {
	    display: none;
	}
	.slick-list {
	    height: auto !important;
	}

	.main-offer-container {
	    margin-left: -266px;
	    margin-top: -15px;
	}
	.main-offer-glow {
	    top: 7px;
	}
	.main-offer-image, .main-offer-glow {
	    width: 825px !important;
	    height: 720px;
	}
	.main-offer-overlay {
	    height: 300px;
	    width: 130%;
	    position: relative;
	    top: -300px;
	    background: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 5%, #051628 20%);
	}

	.tnc {
		margin-top: 30px;
	}
	.trigger-2 {
		width: 90%;
		padding: 15px 20px;
		font-size: 15px;
	}
	.arrow {
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid #fff;
        border-left-width: 10px;
    }
	.collapse {
		width: 90%;
		position: relative;
		z-index: 999;
		font-size: 15px;
		padding: 40px;
		margin: 0 auto 0;
	}
	.collapse ol li {
		font-size: 13px;
		line-height: 22px;
		text-align: left;
	}
}

@media only screen and (max-width: 479px){
	main {
		width: 320px;
	}
	.right-container {
		width: 320px;
	}
	.single-line {
		padding-top: 15px;
	}
	.label-wrap.mid-2 {
		font-size: 12px;
	}

	.marketing-msg {
	    background-size: contain !important;
	    height: auto;
	    width: 320px;
	    margin-top: -30%;
	    font-size: 12px;
	    padding: 17px 0;
	    margin-bottom: 0;
	}

	.main-offer-container {
	    margin-left: -272px;
	    margin-top: -70px;
	}
	.main-offer-image, .main-offer-glow {
	    background-size: 140vw;
	    width: 830px !important;
	    height: 570px;
	}
	.main-offer-glow {
	    top: -48px;
	}
	.main-offer-overlay {
	    height: 200vw;
	    width: 134%;
	    position: relative;
	    top: 90px;
	    background: linear-gradient(to bottom, rgba(255, 255, 255, 0%) 5%, #051628 20%);
	}
	.right-container {
	    margin-top: -20vw;
	}

	body.kr .mid{
	    font-size: 26px !important;
	}
}

@media only screen and (max-width: 440px){

	.main-offer-overlay {
        left: -22px;
        width: 128%;

    }
}

@media only screen and (max-width: 420px){

	.main-offer-overlay {
        left: -22px;
        width: 126%;

    }
}

@media only screen and (max-width: 413px){

	.main-offer-overlay {
		position: absolute;
        z-index: 0;
        left: -20px;
        height: 200vw;
        width: 126%;
    }
}

@media only screen and (max-width: 390px){

	.main-offer-overlay {
        width: 123%;
    }
}


@media only screen and (max-width: 378px){

	.main-offer-overlay {
        left: -22px;
        width: 125%;
    }
}

@media (max-width: 767px) {
  .left-container {
    width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .main-offer-container {
    position: relative;
    width: clamp(280px, 90vw, 420px);
    margin: 0 auto !important;
  }

  .main-offer-image,
  .main-offer-glow {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 825 / 700;
    background-size: contain !important;
    background-position: center top !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0 !important;
  }

  .main-offer-glow {
    position: absolute !important;
    inset: 0 !important;
  }

  .main-offer-overlay {
	/* display: none !important;  */
	position: absolute;
	z-index: 0;
	left: -20%;
	}

	.main{
		width: 350px !important;
	}

	.hero{
		width: 350px;
	}

	.left-container{
		width: 350px !important;
	}

	.main-offer-image,
	.main-offer-glow {
	position: relative;
	left: 50% !important;
	transform: translateX(-50%);
	}

}

@media (max-width: 599px) {
  .main-offer-container { width: clamp(260px, 92vw, 380px); }
}
@media (max-width: 479px) {
  .main-offer-container { width: clamp(240px, 92vw, 360px); }
}

@media only screen and (max-width: 350px){
	.main{
		width: 330px !important;
	}

	.hero{
		width: 330px !important;
	}

	.left-container{
		width: 330px !important;
	}
}