@charset "utf-8";

/*
 * custom_layout.css
 * 디자이너 커스텀요소
 *
 * custom selection
 * tab scroll mob
 * content tab
 * word
 * hide show - motion
 * 이미지 fixed
 * button motion
 * img 설정
 * content box
 * slide control
 * map box
 * gird	box
 * flex box
 * mob control - 모바일 안보이게 처리
 * data-form
 *
 */
 
:root{
	--page-pad:60rem;
	--page-top:120rem;
	--page-topMain:100rem;
	
	/* height */
	--higMob100:calc(var(--vh, 1vh) * 100);
}
@media (max-width:1600px){
	:root{
		--page-pad:30rem;
	}
}
@media (max-width:1024px){
	:root{
		--page-pad:20rem;
		--page-top:100rem;
		--page-topMain:80rem;
	}
}
@media (max-width:480px){
	:root{
		--page-top:80rem;
	}
}
 
/* custom selection */
::selection{background:#9cbcec; color:#fff; text-shadow:none;}
::-moz-selection{background:#9cbcec; color:#fff; text-shadow:none;}
::-webkit-selection{background:#9cbcec; color:#fff; text-shadow:none;} 
@media (min-width:1025px){
	::-webkit-scrollbar {width:15rem;}
	::-webkit-scrollbar-thumb {border:4rem solid #f7f7f7; border-radius:20rem; background:#c5c5c5;}
	::-webkit-scrollbar-track {background:#f7f7f7;}
	/* transparent scroll */
	.overlay-scroll{overflow:overlay;}
	.overlay-scroll::-webkit-scrollbar{width:8rem;}
	.overlay-scroll::-webkit-scrollbar-thumb{background-color:hsla(0, 0%, 42%, 0.30); border-width:0rem;}
	.overlay-scroll::-webkit-scrollbar-track{background-color:transparent;}
	/* custom-scroll */
	.custom-scroll::-webkit-scrollbar {width:6rem;}
	.custom-scroll::-webkit-scrollbar-thumb {border:0; border-radius:20rem; background:#c5c5c5;}
	.custom-scroll::-webkit-scrollbar-track {background:rgba(255,255,255,0.7);}
}

/* tab scroll mob  */
.scroll_control .inner ul{display:flex;}
.scroll_control .inner ul li{flex:none; white-space:nowrap;}
.scroll_control .inner ul li:first-child{padding-left:0 !important;}
.scroll_control.full{--sizeBg:40rem; position:relative;}
.scroll_control.full .inner{position:relative; overflow-x:auto; overflow-y:hidden; width:100%;}
.scroll_control.full .inner > ul{flex-wrap:nowrap; justify-content:flex-start; margin:0;}
.scroll_control.full .inner > ul > li:last-child{padding-right:var(--sizeBg);}
	/* mask사용시 */
.scroll_control.full{mask:linear-gradient(90deg, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);}
	/* bg사용시 */
/* .scroll_control.full:after{content:''; display:block; position:absolute; right:0; top:0; width:var(--sizeBg); height:100%; background-image:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6) 20%, rgba(255,255,255,1) 80%);} */


/* content tab */
.tab-area{
	&{position:relative;}
	.tab{
		&{--sizeGap:10rem; display:flex; align-items:stretch;}
		li{display:flex; padding:0 var(--sizeGap);}
		a{display:inline-flex; justify-content:center; align-items:center; position:relative; font-size:var(--font20); transition:color 0.3s;}
		.active a,
		a.on{color:var(--color-point); font-weight:600;}
	}
	.tab-box{
		&{opacity:0; visibility:hidden; position:absolute; width:100%; transition:0.3s ease; transition-property:opacity, visibility;}
		&.active{opacity:1; visibility:visible;}
	}
}

/* word */
.wordAni{opacity:0;}
.wordAni.active{opacity:1;}
.wordAni > span{display:inline-block;}
.wordAni .word{display:inline-block;}
	/* motion rail */
[data-motion-rail]{position:absolute; left:0; top:0; text-transform:uppercase; font-size:200rem; letter-spacing:2rem; white-space:nowrap;}
[data-motion-rail]	.eocjs-newsticker-container{position:relative; width:100%; padding-top:30%;}
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-one,
[data-motion-rail].eocjs-newsticker .eocjs-newsticker-two{position:absolute; left:0; top:0; white-space:nowrap;}

/* hide show - motion */
/*
	--aniEase:(transition-timing-function)
	--aniSize:(모션기초세팅사이즈)
	--aniDelay:(transition-delay)
	--aniTime:(transition-duration)
*/
[data-motion] img{width:100%;}
[data-motion="hide_show"]{opacity:0; transition:opacity 0.7s var(--aniEase, ease) 0s;}
[data-motion="hide_show"].motion__in{opacity:1;}
[data-motion="hide_showDown"]{opacity:0; transform:translateY(var(--aniSize, -30rem)); transition:var(--aniTime, 1s) var(--aniEase, ease) 0s; transition-property:opacity, transform;}
[data-motion="hide_showDown"].motion__in{opacity:1; transform:translateY(0); transition-delay:var(--aniDelay, 0s);}
[data-motion="hide_showUp"]{opacity:0; transform:translateY(var(--aniSize, 30rem)); transition:var(--aniTime, 1s) var(--aniEase, ease) 0s; transition-property:opacity, transform;}
[data-motion="hide_showUp"].motion__in{opacity:1; transform:translateY(0rem); transition-delay:var(--aniDelay, 0s);}
[data-motion="hide_showLeft"]{opacity:0; transform:translateX(var(--aniSize, -30rem)); transition:var(--aniTime, 0.9s) var(--aniEase, ease) 0s; transition-property:opacity, transform;}
[data-motion="hide_showLeft"].motion__in{opacity:1; transform:translateX(0rem); transition-delay:var(--aniDelay, 0s);}
[data-motion="hide_showRight"]{opacity:0; transform:translateX(var(--aniSize, 30rem)); transition:var(--aniTime, 0.9s) var(--aniEase, ease) 0s; transition-property:opacity, transform;}
[data-motion="hide_showRight"].motion__in{opacity:1; transform:translateX(0); transition-delay:var(--aniDelay, 0s);}
[data-motion="slide_showX"]{clip-path:polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_showX"].motion__in{clip-path:polygon(0% 0, 100% 0, 100% 100%, 0% 100%); transition-delay:var(--aniDelay, 0.2s);}
[data-motion="slide_show_down"]{clip-path:polygon(100% 0, 100% 0, 0 0, 0 0); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_down"].motion__in{clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 0); transition-delay:var(--aniDelay, 0.2s);}
[data-motion="slide_show_up"]{clip-path:polygon(100% 100%, 100% 100%, 0 100%, 0 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_up"].motion__in{clip-path:polygon(100% 0, 100% 100%, 0 100%, 0 0); transition-delay:var(--aniDelay, 0.2s);}
[data-motion="slide_show_right"]{clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_right"].motion__in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay:var(--aniDelay, 0.2s);}
[data-motion="slide_show_left"]{clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%); transition:clip-path var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="slide_show_left"].motion__in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); transition-delay:var(--aniDelay, 0.2s);}
[data-motion="mark"] mark{background:linear-gradient(90deg, var(--color-point, #333), var(--color-point, #333)); background-repeat:no-repeat; background-position:0 100%; background-size:0 100%; transition:var(--aniTime, 0.9s) var(--aniEase, ease) 0s;}
[data-motion="mark"].motion__in mark{background-size:100% 100%;}
[data-motion="blur"]{filter:blur(var(--aniBlur, 10rem)); transition:filter var(--aniTime, 1.5s) var(--aniEase, ease) 0s;}
[data-motion="blur"].motion__in{filter:blur(0);}
	/* div[data-motion="hide_overUp"] span > i */
[data-motion="hide_overUp"] span{overflow:hidden; display:inline-block;}
[data-motion="hide_overUp"] span i{display:inline-block; transform:translateY(100%); transition:transform var(--aniTime, 0.9s) var(--aniEase, ease) 0s;}
[data-motion="hide_overUp"].motion__in span i{transform:translateY(0%); transition-delay:var(--aniDelay, 0s);}
	/* div[data-motion="hide_pectiveUp"] span or etc */
[data-motion="hide_pectiveUp"]{perspective:var(--aniPect, 1500rem);}
[data-motion="hide_pectiveUp"] > *{opacity:0; display:block; transform:translateY(var(--aniSize, 300rem)) rotateX(var(--aniDeg, 45deg)); transition:1s var(--aniEase, ease) 0s; transition-property:opacity, transform;}
[data-motion="hide_pectiveUp"].motion__in > *{opacity:1; transform:translateY(0) rotateX(0); transition-delay:var(--aniDelay, 0s); transition-duration:var(--aniTime, 0.7s);}
/* flow text */
/*
	--aniTime:(animation-duration)	
*/
.flow-text{overflow:hidden; display:flex; white-space:nowrap; transition:0.3s;}
.flow-wrap{padding-right:1.4881vw; line-height:1.1cap; animation:textLoop var(--aniTime, 20s) linear infinite;}
.flow-text.hover:hover .flow-wrap{animation-play-state:paused; cursor:pointer;}
@keyframes textLoop{
    0% {transform: translate3d(0, 0, 0);}
    100%{transform: translate3d(-100%, 0, 0);}
}

/* 이미지 fixed */
.over-bg{position:relative; z-index:-1; height:var(--sizeHig, 600rem); box-sizing:border-box;}
.over-bg .obj-bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.over-bg .obj-bg i{position:fixed; top:0; left:0; display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.over-bg .obj-bg i img{width:100%;}
.ie .over-bg .obj-bg{clip:rect(0,auto,auto,0);}
@media screen and (-webkit-min-device-pixel-ratio:0){ 
	.over-bg .obj-bg{-webkit-mask-image:-webkit-linear-gradient(top, #fff 0%, #fff 100%);}
}
@media (max-width:1024px){
	.over-bg .obj-bg i{height:var(--higMob100);}
}

/* button motion */
	/* size별도선언할것 */
.primary-button{overflow:hidden; display:inline-flex; justify-content:center; align-items:center; position:relative;}
.primary-button:hover,
.primary-button:hover span{color:#fff;}
.primary-button	.round{position:absolute; top:5px; left:10px; z-index:-1; background-color:#373737; border-radius:50%; animation:scale-down 0.2s forwards;}
.primary-button.animate .round{animation:scale-up 0.5s forwards;}
@keyframes scale-up{
    to{transform:scale(600);}
}
@keyframes scale-down{
    from{transform:scale(600);}
    to{ransform:scale(0);}
}

/* img 설정 */
#content img{max-width:100%;}

/* content box */
[class*="inr-1"]{padding:0 var(--page-pad); margin:0 auto; box-sizing:content-box;}
.inr-1500{max-width:1500rem;}
.inr-1400{max-width:1400rem;}
.inr-1200{max-width:1200rem;}
.inr-1000{max-width:1000rem;}

/* slide control */
.swiper-page,
.swiper-pagination-bullets.swiper-pagination-horizontal{width:auto;}
.swiper-page{--swiper-theme-color:#beac9c /* 기본컬러 */; display:flex; justify-content:center; align-items:center;}
.swiper-page .swiper-pagination-bullet{--swiper-pagination-bullet-size:10rem /* 블릿사이즈 */; --swiper-pagination-bullet-horizontal-gap:5rem /* 블릿여백 */; --swiper-pagination-bullet-inactive-color:#beac9c /* 기본색상 */; --swiper-pagination-bullet-inactive-opacity:0.3 /* 블릿투명도 */;}

/* map box */
.root_daum_roughmap{width:100% !important; height:100%;}
.root_daum_roughmap .wrap_map{height:100% !important;}

/* gird box */
[data-grid]{display:grid;}
[data-grid="2"]{grid-template-columns:repeat(2, 1fr);}
[data-grid="3"]{grid-template-columns:repeat(3, 1fr);}
[data-grid="4"]{grid-template-columns:repeat(4, 1fr);}
[data-grid="5"]{grid-template-columns:repeat(5, 1fr);}

/* flex box */
.flex-group{display:flex; justify-content:space-between; align-items:flex-start;}
.flex-group.left{justify-content:flex-start;}

/* mob control */
@media (max-width:1024px){
	[data-mobNone="1024"]{display:none;}
}
@media (max-width:768px){
	[data-mobNone="768"]{display:none;}
}
@media (max-width:480px){
	[data-mobNone="480"]{display:none;}
}

/* data-form */
[data-form="write"]{--sizeHig:60rem;}
[data-form="write"] input:not([type="checkbox"]):not([type="radio"]),
[data-form="write"] select,
[data-form="write"] textarea{width:100%; height:var(--sizeHig); box-sizing:border-box; padding:0 30rem; background:transparent; border:1rem solid #d9d9d9; border-radius:0; vertical-align:middle; font-size:var(--font18); font-weight:500; letter-spacing:-0.5rem; transition:border 0.3s ease 0s;;}
[data-form="write"] textarea{resize:none; height:190rem; padding:20rem 30rem;}
[data-form="write"] select{padding-right:30rem; background:var(--color-white, #fff) url(../images/board/select_arrow.svg) no-repeat calc(100% - 15rem) 50%; background-size:7rem 7rem;}
[data-form="write"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-form="write"] textarea:focus{outline:none;}
[data-form="write"] :is( input[readonly], input[disabled]){background-color:#f5f5f5 !important; color:#aaa !important;}
[data-form="write"]{display:grid; grid-template-columns:repeat(2, 1fr); gap:60rem 50rem; padding-bottom:90rem;}
[data-form="write"] > li{display:flex; flex-direction:column; position:relative;}
[data-form="write"] > li.full{grid-column:1/3;}
[data-form="write"] > li.full.textarea{margin-top:30rem;}
[data-form="write"] > li :is(> label, em){opacity:1; visibility:visible; display:inline-block; margin-bottom:10rem; font-size:var(--font20); color:#000; font-weight:600; transition:0.3s ease 0s;;}
[data-form="write"] > li em{display:block;}
[data-form="write"] .marking{margin-left:10rem;}
[data-form="write"] .in{z-index:90;}
[data-form="write"] .in :is( input, select, textarea, .designSelect .selectbox){border-color:#222;}
[data-form="write"] :is(.active, .in) > label,
[data-form="write"] :is(.active, .in) > em{color:var(--color-point);}
[data-form="write"] .designRadio,
[data-form="write"] .designCheck{min-height:var(--sizeHig); box-sizing:border-box;}
[data-form="write"] :is(.designRadio, .designCheck) label,
[data-form="write"] :is(.designRadio, .designCheck) em{color:inherit;}
[data-form="write"] > li small{display:inline-block; margin-left:10rem; font-size:var(--font16); color:#999;}
[data-form="write"] input::placeholder{color:#999; font-size:var(--font16); font-weight:400;}
[data-form="write"] ::placeholder{opacity:1; color:#999; font-size:var(--font16); font-weight:400;}
[data-form="write"] ::-ms-input-placeholder{color:#999; font-size:16rem; font-weight:400;}
[data-form="write"] input[data-form-type="datepicker"]{padding-right:40rem !important; text-align:left;}
[data-form="write"] .ui-datepicker-trigger{position:absolute; right:10rem; top:50%; transform:translateY(-50%);}
[data-form="select"]{z-index:9;}
[data-formwrite="mail"] > div{display:grid; grid-template-columns:1fr 1fr; gap:10rem 30rem;}
[data-formwrite="mail"] > div > div{display:flex; align-items:center; gap:10rem; position:relative;}
[data-formwrite="mail"] > div i{position:absolute; left:-23rem; top:50%; z-index:50; font-size:var(--font20); color:#999; font-weight:500; transform:translateY(-50%);}
[data-formWrite="case"] .designRadio input[type="radio"] + label{margin-right:40rem; font-size:var(--font18);}
[data-formWrite="case"] .designRadio input[type="radio"] + label:last-child{margin-right:0;}
[data-formWrite="case"] > div{margin-top:10rem;}
[data-formWrite="conts"] > div{margin-top:20rem;}
[data-form="write"] [data-formwrite="mail"] .select_input{opacity:0; visibility:hidden; position:relative; z-index:30; width:calc(100% - 55rem); padding-left:45rem;}
[data-form="write"] [data-formwrite="mail"] .select_input.active{opacity:1; visibility:visible;}
[data-form="write"] [data-formwrite="mail"] .select_input.active ~ .designSelect .selectbox{font-size:0;}
[data-formwrite="address"] .button{height:var(--sizeHig);}
[data-formWrite="file"] .designFile{flex:none; width:100%; box-sizing:border-box;}
[data-formWrite="file"] .designFile.mob{line-height:37rem;}
[data-formWrite="file"] .designFile.mob input{height:auto; padding:0 !important;}
[data-formwrite="spam"] .inr{display:flex; align-items:stretch; gap:10rem;}
[data-formwrite="spam"] .spam{display:flex; justify-content:center; align-items:center; padding:0 20rem; background-color:#222; font-weight:700; color:#fff;}
[data-formwrite="spam"] input{width:100%; margin:0;}
.box_agree.designCheck{margin-top:0;}
.box_agree.designCheck input[type="checkbox"] + label{display:inline-flex; flex-wrap:wrap; align-items:center; gap:3rem 5rem; margin-right:10rem; vertical-align:middle; padding-left:0; font-size:var(--font18); font-weight:400;}
.box_agree.designCheck input[type="checkbox"] + label:before{position:static; width:22rem; height:22rem;}
.box_agree.designCheck input[type="checkbox"] + label i{line-height:1.2; vertical-align:middle; font-size:var(--font15); color:#c31717;}
.box_agree.designCheck a{display:inline-block; line-height:1.2; font-size:var(--font16); color:#aaa; font-weight:500; transition:0.3s ease 0s;;}
.box_agree.designCheck a:after{content:''; display:block; width:100%; height:1rem; margin-top:-3rem; background:#aaa; transition:0.3s ease 0s;;}
@media (hover:hover){
	.box_agree.designCheck a:hover,
	.box_agree.designCheck a:focus{color:#666;}
	.box_agree.designCheck a:hover:after,
	.box_agree.designCheck a:focus:after{background:#666;}
}
@media screen and (max-width:1024px){
	/* data-form */
	[data-form="write"]{grid-template-columns:1fr;}
	[data-form="write"] > li.full{grid-column:1/2;}
	[data-form="write"] > li > div{margin-top:0;}
	[data-form="write"] > li[data-formwrite="conts"] > div{margin-top:20rem;}
	[data-form="write"] textarea{height:130rem;}
		/* designFile */
	[data-form="write"] .designFile:not(.mob) label.button{min-width:inherit; width:70rem;}
	[data-form="write"] .designFile:not(.mob) input[type="text"]{padding-right:80rem;}
	[data-form="write"] [data-formWrite="file"] .designFile label.button{right:0;}
	[data-formWrite="file"] .designFile{padding-right:0;}
	[data-formWrite="file"] .file{width:70%;}
	[data-formWrite="file"] .file > a{word-break:break-all;}
}

@media screen and (max-width:768px){
	/* data-form */
	[data-form="write"]{gap:40rem;}
	[data-form="write"] .designRadio,
	[data-form="write"] .designCheck{min-height:inherit; padding-top:0;}
		/* designFile */
	[data-formWrite="file"] .designFile,
	[data-formWrite="file"] .file{width:100%; padding-right:0;}
	[data-form="write"] [data-formWrite="file"] .designFile label.button{right:0;}
}

@media screen and (max-width:480px){
	/* data-form */
	[data-form="write"]{--sizeHig:50rem;}
	[data-form="write"] input:not([type="checkbox"]):not([type="radio"]),
	[data-form="write"] select{padding:0 20rem;}
	[data-form="write"] select{padding-right:35rem;}
	[data-form="write"] textarea{height:100rem; padding:20rem;}
	[data-formwrite="mail"] > div{grid-template-columns:1fr;}
	[data-formwrite="mail"] > div > div{width:100%; margin-right:0;}
	[data-formwrite="mail"] > div > div:nth-of-type(2){flex-wrap:wrap;}
	[data-formwrite="mail"] > div i{position:static; transform:translateY(0);}
	[data-formwrite="mail"] > div select{width:calc(100% - 30rem); margin-left:auto;}
	[data-formwrite="mail"] .designSelect{width:calc(100% - 35rem);}
	[data-form="write"] [data-formwrite="mail"] .select_input{width:calc(100% - 45rem); padding-left:0;}
	[data-formWrite="case"] .designRadio input[type="radio"] + label{margin-right:20rem;}
	.box_agree.designCheck input[type="checkbox"] + label{margin-right:10rem; line-height:1.3;}
}

/* 노출 */
[aria-hidden="true"]{display:none !important;}