@charset "utf-8";

/*
 * Project		:	헬로익스펜스 랜딩 홈페이지
 * File			:	style.css
 * Author		:	YoungJae Lee
 * Date			:	Jau. 2024
 * Description	:	item style
 */



/* --------------------------
:: color
-------------------------- */

:root {
	
	/* -- color */
	--main1: #5860c9;
	--main2: #62c5e9;
	--main3: #abb1ff;
		
	--gradient1: linear-gradient(-170deg, #6fced1 20%, #5567ca 100%);
	--gradient2: linear-gradient(-140deg, #62c5e9 10%, #665be2 100%);
	
	--blue: #276baa;
	--red: #e4211d;
	
	--gray-dark: #333;
	--gray-100: #f5f7fa;
	--gray-200: #edf0f5;
	--gray-300: #dde3ed;
	--gray-400: #ced4da;
	--gray-500: #8f94ae;
	--gray-600: #74788d;
	--gray-700 : #615f74;

}

.colorMain {color: var(--main1);}



/* --------------------------
:: animation
-------------------------- */

@keyframes rotateAni {
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(720deg);
    }
}

@keyframes reRotateAni {
    0%{
        transform: rotate(0deg);
    }

    100%{
        transform: rotate(-720deg);
    }
}

@keyframes fadeInAni {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.ani_doongsil {animation: doongsil 2s ease-in-out infinite alternate;}
@keyframes doongsil {
    from {
    	transform: translateY(-5px);
    }
    to {
    	transform: translateY(5px);
    }
}



/* --------------------------
:: global classname
-------------------------- */

/* useful */
.cl-b {clear:both;}
.show {display:block;}
.hide {display:none;}
.t-l {text-align:left !important;}
.t-r {text-align:right !important;}
.t-c {text-align:center !important;}
.overflow {overflow:hidden !important;}
.dis-inline {display:inline-block;}
.scl {overflow-y:auto;}
.txt-indent {text-indent:10px;}
.font-bold {font-weight: 700;}

/* 위치 속성 공통 클래스 */
.f-l {float:left !important;}
.f-r {float:right !important;}
.rel {position:relative;}
.ab {position:absolute; z-index:1;}

.flex {display:flex; align-items:center;}
.flex > .fixCol {flex-shrink: 0; width:auto;} /* width값 고정된 column */
.flex > .flexCol {flex-grow: 1;} /* width값이 가변적으로 확장 축소되는 column */

/* 반전 */
.rtl {transform: scaleX(-1);}

.moShowBr br {display: none;}



/* ---------------------------------------
:: 텍스트
--------------------------------------- */

/* 타이틀 사이즈 */
.tit-sm {font-size: 16px; line-height: 1.3; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;}
.tit-md {font-size: 20px; line-height: 2.0; font-weight: 400;}
.tit-lg {font-size: 30px; line-height: 1.5; letter-spacing: 0.02em;}
.tit-xl {font-size: 36px; line-height: 1.7; letter-spacing: 0.02em; text-transform: uppercase;}
.tit-2xl {font-size: 44px; line-height: 1.6; letter-spacing: 3px; text-transform: uppercase; font-weight: 200;}

/* 콘텐츠 텍스트 사이즈 */
.txt-sm {font-size: 16px; line-height: 1.6;} /* 기본 텍스트 사이즈 */
.txt-md {font-size: 18px; line-height: 1.4;}
.txt-lg {font-size: 24px; line-height: 1.6; font-weight: 100;}

/* 하이라이트 - main 움직이는 */
.high-line {position: relative; z-index: 1;}
.high-line::after {content: ""; background: var(--gradient2); border-radius: 20px; width: 0; height: 17px; position: absolute; z-index: -1; left: -5px; bottom: 8px; transition: all .3s; opaicity: .6;}
.high-line::before {content:""; opacity: 0; background-color: var(--main2); border-radius: 20px; width: 17px; height: 17px; position: absolute; bottom: 8px; right: -45px;}
.active .high-line::after {width: calc(100% + 15px); transition: all .3s; transition-delay: .75s; opacity: .6;}
.active .high-line::before {transition: all .3s; transition-delay: 1.2s; opacity: .6;}

/* 하이라이트 - static */
.high-border {position: relative; z-index: 1;}
.high-border:after {display: block; content: ""; position: absolute; left: 0; bottom: 8px; z-index: -1; width: 100%; height: 15%; opacity: 0.6; background: var(--gradient2);}

.high-color {color: var(--main1);}

/* 텍스트 그라데이션 */
.txt-gradient {color: transparent; text-transform: uppercase; background: var(--gradient2); -webkit-background-clip: text; -o-background-clip: text; background-clip: text;}



/* ---------------------------------------
:: 버튼
--------------------------------------- */

.btn {display: inline-block; text-align: center; cursor: pointer;}

.btn.radius {border-radius: 30px; font-size: 14px; padding:15px 23px;}
.btn.radius.sm {font-size: 13px; padding: 10px 18px;}
.btn.radius.big {font-size: 18px; padding: 20px 50px;}
.btn.radius.st01 {color: #fff; background-image: linear-gradient(to right, #62c5e9, #665be2, #665be2, #62c5e9); background-size: 300% 100%; transition: all .4s ease-in-out;}
.btn.radius.st01:hover {background-position: 100% 0; transition: all .4s ease-in-out;}
.btn.radius.st02 {color: #fff; background: #424242;}
.btn.radius.st02:hover {background: #272727; transition: all .4s ease-in-out;}

.btn.border {box-sizing: border-box; padding: 13px 18px; background-color: transparent; position: relative; transition: all 0.25s;}
.btn.border::before,
.btn.border::after {box-sizing: inherit; content: ''; position: absolute; width: 0; height: 0; border: 2px solid transparent;}
.btn.border::before {top: 0; left: 0;}
.btn.border::after {bottom: 0; right: 0;}
.btn.border:hover::before,
.btn.border:hover::after {width: 100%; height: 100%;}
.btn.border:hover::before {transition: width 0.1s ease-out, height 0.1s ease-out 0.1s;}
.btn.border:hover::after {transition: border-color 0s ease-out 0.2s, width 0.1s ease-out 0.2s, height 0.1s ease-out 0.3s;}

.btn.border.white {box-shadow: inset 0 0 0 1px #fff; color: #fff;}
.btn.border.white:hover {background-color: rgba(0,0,0,.4);}
.btn.border.white:hover::before {border-top-color: var(--main2); border-right-color:var(--main2);}
.btn.border.white:hover::after {border-bottom-color: var(--main2); border-left-color: var(--main2);}

.btn.border.black {box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);}
.btn.border.black:hover {background-color: var(--gray-100);}
.btn.border.black:hover::before {border-top-color: var(--main1); border-right-color: var(--main1);}
.btn.border.black:hover::after {border-bottom-color: var(--main1); border-left-color: var(--main1);}



/* 로딩바 */
#preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 999;
            background: -webkit-linear-gradient(to bottom, #202639 40%, #3f4c77 100%);
            background: -o-linear-gradient(to bottom, #202639 40%, #3f4c77 100%);
            background: linear-gradient(to bottom, #202639 40%, #3f4c77 100%);}
.preloader-bar {display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent;    
                -webkit-animation: preloader-bar 2s linear infinite;
                        animation: preloader-bar 2s linear infinite; border-top-color: #9370DB;}
.preloader-bar:before {content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent;
                       -webkit-animation: preloader-bar 3s linear infinite;
                               animation: preloader-bar 3s linear infinite; border-top-color: #BA55D3;}
.preloader-bar:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent;
                       -webkit-animation: preloader-bar 1.5s linear infinite;
                               animation: preloader-bar 1.5s linear infinite; border-top-color: #FF00FF;
}
@-webkit-keyframes preloader-bar {
    0%   {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes preloader-bar {
    0%   {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
}



/* 타이틀 데코바 */
.titDeco-bar {width: 1px; height: 100px; position: relative; left: 50%; margin-left: -0.5px; margin-top: 40px;}
.titDeco-bar:after {content: ''; display: block; width: 1px; height: 0; background-color: #414141;
                    -webkit-transition: 350ms; transition: 350ms; transition-delay: 0.35s; -webkit-transition-delay: 0.35s;
                    -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
                    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);}
.titDeco-bar.active:after {height: 100px;}



/* tooltip show button when hover */
.hoverTooltipBtn {cursor: pointer; position: relative; -o-transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; -webkit-font-smoothing: antialiased;}
.hoverTooltipBtn .hoverTooltip {color: #333; position: absolute; top: 0; right: 20px; z-index: -1; font-size: 12px; border-radius: 5px; background: #fff; box-shadow: 0 0 10px rgba(126,142,177,.25); display: inline-block; padding: 10px; width: max-content;
													visibility:hidden; opacity:0; -o-transition:all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.hoverTooltipBtn .hoverTooltip:before {content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; position: absolute; top: 20px; right: -8px; transform: rotate(-90deg);}
.hoverTooltipBtn:hover .hoverTooltip {right: 78px; visibility: visible; opacity: 1; z-index: 1; pointer-events: auto;}



/* 드롭다운 리스트 - js activate */
.js-dropdownWrap {position: relative; display: block;}
.js-dropdownWrap .js-dropdownBtn {position: relative; display: block; cursor: pointer; overflow:hidden;}
.js-dropdownWrap .js-dropdownCon {display: none; position: absolute; overflow: hidden; background: #fff; right: 0; z-index: 100; box-shadow: 0px 0px 13px 3px rgba(0, 0, 0, 35%);}
.js-dropdownWrap.is-open .js-dropdownCon {display: block;}