@charset "UTF-8";
@import url("../../font.css");
@import url("../../animation.css?v=2501030000");
/*
 *  File Name : /resources/css/responsive/common/common.css
 *  Description : 전체 공통 스타일
 */

/* common */
:root {
	--ft-family_NotoSansKR-400: 'NotoSansKR-Regular';
	--ft-family_NotoSansKR-600: 'NotoSansKR-SemiBold';
	--ft-family_NotoSansKR-700: 'NotoSansKR-Bold';
	--ft-family_NotoSansKR-900: 'NotoSansKR-Black';

	--ft-family_Poppins-100: 'Poppins-Thin';
	--ft-family_Poppins-200: 'Poppins-ExtraLight';
	--ft-family_Poppins-300: 'Poppins-Light';
	--ft-family_Poppins-400: 'Poppins-Regular';
	--ft-family_Poppins-500: 'Poppins-Medium';
	--ft-family_Poppins-600: 'Poppins-SemiBold';
	--ft-family_Poppins-700: 'Poppins-Bold';
	--ft-family_Poppins-800: 'Poppins-ExtraBold';
	--ft-family_Poppins-900: 'Poppins-Black';

	--ft-family_Poppins-italic-100: 'Poppins-ThinItalic';
	--ft-family_Poppins-italic-200: 'Poppins-ExtraLightItalic';
	--ft-family_Poppins-italic-300: 'Poppins-LightItalic';
	--ft-family_Poppins-italic-400: 'Poppins-Italic';
	--ft-family_Poppins-italic-500: 'Poppins-MediumItalic';
	--ft-family_Poppins-italic-600: 'Poppins-SemiBoldItalic';
	--ft-family_Poppins-italic-700: 'Poppins-BoldItalic';
	--ft-family_Poppins-italic-800: 'Poppins-ExtraBoldItalic';
	--ft-family_Poppins-italic-900: 'Poppins-BlackItalic';

	--header-height: 76px;
	--inner-padding: 60px;
}
body {position: relative;}
body * {letter-spacing: 0;}
button {padding: 0; background: none; border: 0; cursor: pointer;}
a {display: inline-block; text-decoration: none; }
.blind {overflow: hidden; position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0);}
.dis-none {display: none;}
.dis-block {display: block;}
.dis-flex {display: flex;}
.inner {position: relative; padding: 0 var(--inner-padding); box-sizing: border-box;}
.layout-inner {position: relative; width: 1280px; height: 100%; padding: 0; margin: 0 auto; box-sizing: border-box;}

/* pc, mobile */
.mode-pc {display: block;}
.mode-mobile {display: none;}

/* animation */
.cookiebanner-ani-fadein {animation: fadeIn 0.5s ease-in 0.2s forwards;}
.cookiebanner-ani-fadeout {animation: fadeOut 0.5s ease-in 0.2s forwards;}

/* cookiebanner */
.cookiebanner {opacity: 0; z-index: 9999; display: none; position: fixed; left: 0; bottom: 0; width: 100%; padding: 25px 50px; background-color: rgba(0, 0, 0, 0.9); border-top: 1px solid #777777; box-sizing: border-box;}
.cookiebanner * {font-family: var(--ft-family_Poppins-400); font-size: 14px;}
.cookiebanner button:not(:disabled) {cursor: pointer;}
.cookiebanner .cookie-inner {display: flex; align-items: center; color: #ffffff; line-height: 1.5;}
.cookiebanner .button-area {display: flex; margin-left: 20px;}
.cookiebanner .button-area > .btn {display: inline-block; min-width: 6.5vw; margin-right: .5vw; background-color: transparent; border: 1px solid transparent; border-radius: 4px; color: #fff; text-align: center; line-height: 2.8; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; font-size: 13px; white-space: nowrap;}
.cookiebanner .button-area > .btn:last-child {margin-right: 0 !important;}
.cookiebanner .button-area .btn-secondary {background-color: #6c757d; border-color: #6c757d;}
.cookiebanner .button-area .btn-secondary:hover {background-color: #5a6268; border-color: #545b62;}
.cookiebanner .button-area .btn-success {background-color: #101224; border-color: #252a57;}
.cookiebanner .button-area .btn-success:hover {background-color: #252a57; border-color: #252a57;}
.cookiebanner .button-cookie-close {position: absolute; right: 10px; top: -15px; width: 30px; height: 30px; background: #fff; border-radius: 50%; border: 1px solid #101224;}
.cookiebanner .button-cookie-close::before,
.cookiebanner .button-cookie-close::after {content: ""; display: inline-block; position: absolute; left: 50%; top: 50%; width: 3px; height: 15px; background: #101224;}
.cookiebanner .button-cookie-close::before {transform: translate(-50%, -50%) rotate(45deg);}
.cookiebanner .button-cookie-close::after {transform: translate(-50%, -50%) rotate(-45deg);}

/* button - top */
.btn-top-comm {display: none; /* display: flex; */ justify-content: center; align-items: center; flex-direction: column; z-index: 1; position: fixed; right: var(--inner-padding); bottom: 50px; width: 70px; height: 70px; background: #fff; border-radius: 50%; box-shadow: 2px 2px 10px rgb(0, 0, 0, .2); color: #101224; font-family: var(--ft-family_Poppins-600); font-size: 15px; font-weight: bold;}
.btn-top-comm::before {content: ""; display: inline-block; width: 10px; height: 10px; border-top: 2px solid #101224; border-right: 2px solid #101224; transform: rotate(-45deg);}

/* icon - arrow */
[class*=ico-arr-comm] {position: relative;}
[class*=ico-arr-comm]::before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='72' viewBox='0 0 110 72' fill='none'%3E%3Crect width='110' height='72' rx='36' transform='matrix(-1 0 0 1 110 0)' fill='%230486FF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M53.8772 13.3473C52.3802 11.5509 49.9531 11.5509 48.4561 13.3473L33.1228 31.7473C31.6257 33.5437 31.6257 36.4563 33.1228 38.2527L48.4561 56.6527C49.9531 58.4491 52.3802 58.4491 53.8772 56.6527C55.3743 54.8563 55.3743 51.9437 53.8772 50.1473L45.0878 39.6H74.1667C76.2838 39.6 78 37.5405 78 35C78 32.4595 76.2838 30.4 74.1667 30.4H45.0878L53.8772 19.8527C55.3743 18.0563 55.3743 15.1437 53.8772 13.3473Z' fill='white'/%3E%3C/svg%3E");}
.ico-arr-comm-right::before {transform: rotate(180deg);}

/* 
 *  [해상도 ~1919px] 
 */
@media all and (max-width:1919px) {
    /* common */
    :root {
        --header-height: 3.958vw;
        --inner-padding: 3.125vw;
    }
    .layout-inner {width: 66.667vw;}

    /* button - top */
    .btn-top-comm {bottom: 2.604vw; width: 3.646vw; height: 3.646vw; font-size: 0.9vw;}
    .btn-top-comm::before {width: 0.521vw; height: 0.521vw; border-width: 0.2vw;}

    /* cookiebanner */
    .cookiebanner {padding: 2vw;}
    .cookiebanner * {font-size: 1vw;}
    .cookiebanner .button-area {margin-left: 1vw;}
    .cookiebanner .button-area > .btn {border-radius: 0.208vw; font-size: .9vw;}
    .cookiebanner .button-cookie-close {right: 0.521vw; top: -0.781vw; width: 1.563vw; height: 1.563vw; }
    .cookiebanner .button-cookie-close::before,
    .cookiebanner .button-cookie-close::after {width: 0.156vw; height: 0.781vw;}
}

/* 
 *  [해상도 769px ~ 1024px]
 *  - 낮은 해상도의 PC
 *  - 태블릿 가로모드
 */
@media all and (max-width:1024px) {
    /* common */
    :root {
        --inner-padding: 4vw;
    }

    /* button - top */
    .btn-top-comm {bottom: 4vw; width: 6vw; height: 6vw; font-size: 1.6vw;}
    .btn-top-comm::before {width: .9vw; height: .9vw; border-width: 0.3vw;}
    
    /* cookiebanner */
    .cookiebanner * {font-size: 1.3vw;}
    .cookiebanner .button-area > .btn {border-radius: 2px; font-size: 1.1vw;}
    .cookiebanner .button-cookie-close {right: 1.8vw; top: -1vw; width: 3vw; height: 3vw;}
    .cookiebanner .button-cookie-close::before, 
    .cookiebanner .button-cookie-close::after {width: .3vw; height: 65%;}
    .cookiebanner .button-area .btn-secondary:hover {background-color: #6c757d; border-color: #6c757d;}
    .cookiebanner .button-area .btn-success:hover {background-color: #101224; border-color: #101224;}
}

/* 
 *  [해상도 481px ~ 768px]
 *  - 모바일 가로모드
 *  - 태블릿 세로모드
 */
@media all and (max-width:768px) {

}

/* 
 *  [해상도 ~ 480px]
 *  - 모바일 (최소 360px까지)
 *  - 모바일 ui 적용 (mode-mobile)
 */
@media all and (max-width:480px) {
    /* common */
    :root {
        --header-height: 11.733vw;
        --inner-padding: 4.667vw;
    }
    .layout-inner {width: 100%;}

    /* pc, mobile */
    .mode-pc {display: none !important;}
    .mode-mobile {display: block !important;}

    /* button - top */
    .btn-top-comm {width: 9.5vw; height: 9.5vw; font-size: 2.4vw;}
    .btn-top-comm::before {width: 1.4vw; height: 1.4vw; border-width: 0.5vw;} 

    /* cookiebanner */
    .cookiebanner * {font-size: 2.2vw;}
    .cookiebanner .button-area > .btn {font-size: 2vw;}
    .cookiebanner .button-cookie-close {top: -2.5vw; width: 5vw; height: 5vw;}
    .cookiebanner .button-cookie-close::before, 
    .cookiebanner .button-cookie-close::after {width: .5vw;}
}
