@import url("common.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..500,0..1,-50..200");

/**** S:: ����ž ****/
@keyframes subtop-bg-zoom { 0% { transform: scale(1); } 100% { transform: scale(1.08); } }
@keyframes subtop-fade-up { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes subtop-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes subtop-line-in { 0% { opacity: 0; transform: scaleX(0); } 100% { opacity: 1; transform: scaleX(1); } }


.subtop{position: relative; width: 100%; height: var(--vh); z-index: var(--z-subtop);}
.subtop_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden;}
.subtop_bg .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; animation: subtop-bg-zoom 6.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;}

.subtop_txt{display: flex; flex-direction: column; gap: 15px; color: var(--white); position: absolute; left: 50%; top:50%; text-align:center; transform:translate(-50%,-50%);}
.subtop_tit{color: var(--white); opacity: 0; animation: subtop-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;}
.subtop_desc{color: var(--white); font-weight: 600; opacity: 0; animation: subtop-fade-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.45s forwards;}


.subtop-scroll {pointer-events:auto; display:flex; flex-direction: column; align-items:center; gap:13px; color:var(--white); position: absolute; left: 50%; transform:translateX(-50%); bottom: 40px; z-index: 9;}
.subtop-scroll-ico {position:relative; width:32px; height:38px; border:1px solid rgba(255,255,255,0.3); border-radius:100px; display:block; overflow:hidden; box-sizing:border-box;}
.subtop-scroll-ico svg {display:block; width:10px; height:auto; position:absolute; left:50%; top:50%; margin-left:-5px; margin-top:-5px; animation:visualScrollUpDown 1.2s ease-in-out infinite;}


/**** E:: ����ž ****/



/* css ���� */
.title-area{text-align: center; padding: 0 0 50px;}
.title-area h3{color: var(--black);}



/* �̿���, ����������޹�ħ */
.policy_cont{position:relative; overflow:hidden; font-size:1rem;}
.policy_cont br{display:block;}
.policy_cont strong{font-weight:500; color:var(--black);}
.policy_cont .cont_title{font-size:1.412rem; color:var(--black); padding-bottom:18px; letter-spacing:var(--letter-spacing-default); font-weight:500;}
.policy_cont p.cont_tit {display:block; font-size:1.2em !important; padding-bottom:10px; font-weight:500; color:var(--black) !important; letter-spacing:var(--letter-spacing-default);}
.policy_cont .cont_txt {padding:0px 0px 35px 0;}
.policy_cont .cont_txt2 {padding-bottom:35px;}
.policy_cont .cont_box {padding:25px; background:var(--grayBg); border-radius:var(--borderR10); margin:7px 0px 10px 0px; display:block;  letter-spacing:var(--letter-spacing-default); line-height:1.7;}

.privacy_list {width:100%; overflow:hidden; clear:both; padding:5%; border:1px solid var(--border); border-radius:var(--borderR20); box-sizing:border-box; margin-bottom:30px;}
.privacy_list li {width:50%; float:left; padding-bottom:1%;}
.privacy_list li a {font-weight:500; color:var(--black);} 



.responsive-dim{position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);z-index: 100; display:none;}
.responsive-dim .stock-scroll-drag-guide{position: absolute;top: 50%; left: 0;right: 0; text-align: center; transform: translate(0,-50%);}

.stock-scroll-drag-guide {display:flex; justify-content:center;}
	.stock-scroll-drag-guide .stock-scroll-drag-inner { position: relative; width:50px; height: 50px; }
	.stock-scroll-drag-guide .stock-scroll-drag-inner:before { position:absolute; top:4px; right:0; width:100%; height:3px; background-color:rgba(255,255,255,0.5); content:""; border-radius:5px;}
	.stock-scroll-drag-guide .drag-tail { position: absolute; z-index: 1; left: 0px; top: 3px; animation:stock-drag-hand 3s both infinite; }
	.stock-scroll-drag-guide .drag-tail .tail{display:block; width: 25px; height: 5px; background-color:#fff; border-radius:5px; opacity:1; }
	.stock-scroll-drag-guide .drag-tail .hand-icon{margin-top: 5px; display: block;}
	@keyframes stock-drag-hand {
		0% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		10% {
			left: 0;
			margin-left: 0px;
			transform: rotate(0deg);
		}
		50% {
			left: 100%;
			margin-left: -25px;
		}
		100% {
			left: 0;
			margin-left: 0px;
		}
	}
/*******************************************************************************
    @media 1710px
*******************************************************************************/
@media all and (max-width:1710px){

	
}
/*******************************************************************************
	@media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){





}

/*******************************************************************************
	@media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/**** S:: ����ž ****/
.subtop_txt{gap: 10px;}

.subtop-scroll {bottom: 30px;}
/**** E:: ����ž ****/


/* css ���� */
.title-area{padding: 0 0 40px;}

/* �̿���, ����������޹�ħ */
.policy_cont{}
.policy_cont p.cont_tit {font-size:1.2em !important; padding-bottom:5px;}
.policy_cont .cont_txt {padding:0px 0px 25px 0; }
.policy_cont .cont_txt2 {padding-bottom:25px;}
.policy_cont .cont_box {padding:18px 18px; }

.privacy_list {margin-bottom:30px;}
.privacy_list li {width:100%;  }


}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: ����ž ****/
.subtop_txt{gap: 5px;}

.subtop-scroll {gap:10px; bottom: 20px;}
.subtop-scroll-ico {width:28px; height:33px;}
/**** E:: ����ž ****/

/* css ���� */
.title-area{padding: 0 0 30px;}


}