@charset "utf-8";

:root{
    
    /*키컬러 텍스트*/
    --color-text-key01 : #1D1D1F;
    --color-text-key02 : #ffffff;
    
    /*키컬러 배경*/
    --color-bg-key01 : #1D1D1F;
    --color-bg-key02 : #ffffff;
    
    /*키컬러 테두리*/
    --color-border-key01 : #1D1D1F;
    --color-border-key02 : #ffffff;
    
    /*키컬러 버튼*/
    --color-btn-key01:#1D1D1F;
    --color-btn-key02:#ffffff;
/*********************************/
    /*기본텍스트*/    
    --color-text-white : #ffffff;
    --color-text-black : #1D1D1F;
    --color-text-transparent : transparent;
    
    --color-text-gray-100 : #F4F4F6;
    --color-text-gray-200 : #ECECF0;
    --color-text-gray-300 : #E6E6EB;
    --color-text-gray-400 : #DFDFE5;
    --color-text-gray-500 : #6F6F76;
    --color-text-gray-600 : #5F5F66;
    --color-text-gray-900 : #8F8F96;
        
    /* red */
    --color-text-red : #ff0000;
    --color-text-red-100:#fdecea;
    --color-text-red-200:#f9c9c4;
    --color-text-red-300:#f28b82;
    --color-text-red-500:#e53935;
    --color-text-red-700:#c62828;

    /* blue */
    --color-text-blue : #0000ff;
    --color-text-blue-100:#e3f2fd;
    --color-text-blue-200:#bbdefb;
    --color-text-blue-300:#90caf9;
    --color-text-blue-500:#1e88e5;
    --color-text-blue-700:#1565c0;
    /*********************************/
    /*기본배경*/
    --color-bg-white : #ffffff;
    --color-bg-black : #1D1D1F;
	--color-bg-transparent : transparent;
    
    --color-bg-gray-100 : #F4F4F6;
    --color-bg-gray-200 : #ECECF0;
    --color-bg-gray-300 : #E6E6EB;
    --color-bg-gray-400 : #DFDFE5;
    --color-bg-gray-500 : #6F6F76;
    --color-bg-gray-600 : #5F5F66;
    --color-bg-gray-900 : #8F8F96;

    /* red */
    --color-bg-red : #ff0000;
    --color-bg-red-100:#fdecea;
    --color-bg-red-200:#f9c9c4;
    --color-bg-red-300:#f28b82;
    --color-bg-red-500:#e53935;
    --color-bg-red-700:#c62828;

    /* blue */
    --color-bg-blue : #0000ff;
    --color-bg-blue-100:#e3f2fd;
    --color-bg-blue-200:#bbdefb;
    --color-bg-blue-300:#90caf9;
    --color-bg-blue-500:#1e88e5;
    --color-bg-blue-700:#1565c0;	
/*********************************/
/*기본테두리*/
    --color-border-white : #ffffff;
    --color-border-black : #1D1D1F;
	--color-border-transparent : transparent;
    
    --color-border-gray-100 : #F4F4F6;
    --color-border-gray-200 : #ECECF0;
    --color-border-gray-300 : #E6E6EB;
    --color-border-gray-400 : #DFDFE5;
    --color-border-gray-500 : #6F6F76;
    --color-border-gray-600 : #5F5F66;
    --color-border-gray-900 : #8F8F96;
/*********************************/    
/* 셀렉트버튼 색상: 검정 버튼 (기본) */    

	--color-select-text-white : #ffffff;
    --color-select-text-black : #1D1D1F;
	--color-select-text-transparent : transparent;    

    --color-select-text-gray-100 : #F4F4F6;
    --color-select-text-gray-200 : #ECECF0;
    --color-select-text-gray-300 : #E6E6EB;
    --color-select-text-gray-400 : #DFDFE5;
    --color-select-text-gray-500 : #6F6F76;
    --color-select-text-gray-600 : #5F5F66;
    --color-select-text-gray-900 : #8F8F96;	

    --color-select-bg-white : #ffffff;
    --color-select-bg-black : #1D1D1F;
	--color-select-bg-transparent : transparent;
    
    --color-select-bg-gray-100 : #F4F4F6;
    --color-select-bg-gray-200 : #ECECF0;
    --color-select-bg-gray-300 : #E6E6EB;
    --color-select-bg-gray-400 : #DFDFE5;
    --color-select-bg-gray-500 : #6F6F76;
    --color-select-bg-gray-600 : #5F5F66;
    --color-select-bg-gray-900 : #8F8F96;
    
    --color-select-border-white : #ffffff;
    --color-select-border-black : #1D1D1F;
	--color-select-border-transparent : transparent;
    
    --color-select-border-gray-100 : #F4F4F6;
    --color-select-border-gray-200 : #ECECF0;
    --color-select-border-gray-300 : #E6E6EB;
    --color-select-border-gray-400 : #DFDFE5;
    --color-select-border-gray-500 : #6F6F76;
    --color-select-border-gray-600 : #5F5F66;
    --color-select-border-gray-900 : #8F8F96;    

/*********************************/    
    
/* 버튼 색상:  배경 */
    --color-btn-bg-white : #ffffff;
    --color-btn-bg-black : #1D1D1F;
	--color-btn-bg-transparent : transparent;
    
    --color-btn-bg-gray-100 : #F4F4F6;
    --color-btn-bg-gray-200 : #ECECF0;
    --color-btn-bg-gray-300 : #E6E6EB;
    --color-btn-bg-gray-400 : #DFDFE5;
    --color-btn-bg-gray-500 : #6F6F76;
    --color-btn-bg-gray-600 : #5F5F66;
    --color-btn-bg-gray-900 : #8F8F96;  
    
    /*  버튼 색상:  테두리 */
    --color-btn-border-white : #ffffff;
    --color-btn-border-black : #1D1D1F;
	--color-btn-border-transparent : transparent;
    
    --color-btn-border-gray-100 : #F4F4F6;
    --color-btn-border-gray-200 : #ECECF0;
    --color-btn-border-gray-300 : #E6E6EB;
    --color-btn-border-gray-400 : #DFDFE5;
    --color-btn-border-gray-500 : #6F6F76;
    --color-btn-border-gray-600 : #5F5F66;
    --color-btn-border-gray-900 : #8F8F96;
    
	/*  버튼 색상 : 텍스트  */
    
    --color-btn-text-white : #ffffff;
    --color-btn-text-black : #1D1D1F;
	--color-btn-text-transparent : transparent;
    
    --color-btn-text-gray-100 : #F4F4F6;
    --color-btn-text-gray-200 : #ECECF0;
    --color-btn-text-gray-300 : #E6E6EB;
    --color-btn-text-gray-400 : #DFDFE5;
    --color-btn-text-gray-500 : #6F6F76;
    --color-btn-text-gray-600 : #5F5F66;
    --color-btn-text-gray-900 : #8F8F96;   

/*********************************/        
    /*  네비게이션 색상 : 배경*/
    --color-nav-bg-white : #ffffff;
    --color-nav-bg-black : #1D1D1F;
    --color-nav-bg-transparent : transparent;
    
    --color-nav-bg-gray-100 : #F4F4F6;
    --color-nav-bg-gray-200 : #ECECF0;
    --color-nav-bg-gray-300 : #E6E6EB;
    --color-nav-bg-gray-400 : #DFDFE5;
    --color-nav-bg-gray-500 : #6F6F76;
    --color-nav-bg-gray-600 : #5F5F66;
    --color-nav-bg-gray-900 : #8F8F96;
    
    /*  네비게이션 색상 : 테두리*/
    --color-nav-border-white : #ffffff;
    --color-nav-border-black : #1D1D1F;
	--color-nav-border-transparent : transparent;
    
    --color-nav-border-gray-100 : #F4F4F6;
    --color-nav-border-gray-200 : #ECECF0;
    --color-nav-border-gray-300 : #E6E6EB;
    --color-nav-border-gray-400 : #DFDFE5;
    --color-nav-border-gray-500 : #6F6F76;
    --color-nav-border-gray-600 : #5F5F66;
    --color-nav-border-gray-900 : #8F8F96;  
    
    /*  네비게이션 색상 : 텍스트 또는 아이콘*/
    --color-nav-icon-white : #ffffff;
    --color-nav-icon-black : #1D1D1F;
	--color-nav-icon-transparent : transparent;
    
    --color-nav-icon-gray-100 : #F4F4F6;
    --color-nav-icon-gray-200 : #ECECF0;
    --color-nav-icon-gray-300 : #E6E6EB;
    --color-nav-icon-gray-400 : #DFDFE5;
    --color-nav-icon-gray-500 : #6F6F76;
    --color-nav-icon-gray-600 : #5F5F66;
    --color-nav-icon-gray-900 : #8F8F96;      

/*********************************/        
    

/*********************************/        
    
    /*  스와이프 페이지네이션 : 배경*/    
    --color-swiper-pagi-bg-white : #ffffff;
    --color-swiper-pagi-bg-black : #1D1D1F;
	--color-swiper-pagi-bg-transparent : transparent;
    
    --color-swiper-pagi-bg-gray-100 : #F4F4F6;
    --color-swiper-pagi-bg-gray-200 : #ECECF0;
    --color-swiper-pagi-bg-gray-300 : #E6E6EB;
    --color-swiper-pagi-bg-gray-400 : #DFDFE5;
    --color-swiper-pagi-bg-gray-500 : #6F6F76;
    --color-swiper-pagi-bg-gray-600 : #5F5F66;
    --color-swiper-pagi-bg-gray-900 : #8F8F96;  
    
    /*  스와이프 페이지네이션 : 테두리*/    
    --color-swiper-pagi-border-white : #ffffff;
    --color-swiper-pagi-border-black : #1D1D1F;
	--color-swiper-pagi-border-transparent : transparent;
    
    --color-swiper-pagi-border-gray-100 : #F4F4F6;
    --color-swiper-pagi-border-gray-200 : #ECECF0;
    --color-swiper-pagi-border-gray-300 : #E6E6EB;
    --color-swiper-pagi-border-gray-400 : #DFDFE5;
    --color-swiper-pagi-border-gray-500 : #6F6F76;
    --color-swiper-pagi-border-gray-600 : #5F5F66;
    --color-swiper-pagi-border-gray-900 : #8F8F96;     
    
    /*  스와이프 페이지네이션 : 텍스트 또는 아이콘*/    
    --color-swiper-pagi-icon-white : #ffffff;
    --color-swiper-pagi-icon-black : #1D1D1F;
	--color-swiper-pagi-icon-transparent : transparent;
    
    --color-swiper-pagi-icon-gray-100 : #F4F4F6;
    --color-swiper-pagi-icon-gray-200 : #ECECF0;
    --color-swiper-pagi-icon-gray-300 : #E6E6EB;
    --color-swiper-pagi-icon-gray-400 : #DFDFE5;
    --color-swiper-pagi-icon-gray-500 : #6F6F76;
    --color-swiper-pagi-icon-gray-600 : #5F5F66;
    --color-swiper-pagi-icon-gray-900 : #8F8F96;       
    
    /*  스와이프 페이지네이션 : active 활성화 */    
    --color-swiper-pagi-active-white : #ffffff;
    --color-swiper-pagi-active-black : #1D1D1F;
	--color-swiper-pagi-active-transparent : transparent;    
    
    --color-swiper-pagi-active-gray-100 : #F4F4F6;
    --color-swiper-pagi-active-gray-200 : #ECECF0;
    --color-swiper-pagi-active-gray-300 : #E6E6EB;
    --color-swiper-pagi-active-gray-400 : #DFDFE5;
    --color-swiper-pagi-active-gray-500 : #6F6F76;
    --color-swiper-pagi-active-gray-600 : #5F5F66;
    --color-swiper-pagi-active-gray-900 : #8F8F96;     
    
/*********************************/   
    /*  스와이프 프로그래스 : 배경 */    
    --color-swiper-progress-bg-white : #ffffff;
    --color-swiper-progress-bg-black : #1D1D1F;
	--color-swiper-progress-bg-transparent : transparent;
    
    --color-swiper-progress-bg-gray-100 : #F4F4F6;
    --color-swiper-progress-bg-gray-200 : #ECECF0;
    --color-swiper-progress-bg-gray-300 : #E6E6EB;
    --color-swiper-progress-bg-gray-400 : #DFDFE5;
    --color-swiper-progress-bg-gray-500 : #6F6F76;
    --color-swiper-progress-bg-gray-600 : #5F5F66;
    --color-swiper-progress-bg-gray-900 : #8F8F96;         
    
    /*  스와이프 프로그래스 : active 활성화 배경*/    
    --color-swiper-progress-bg-active-white : #ffffff;
    --color-swiper-progress-bg-active-black : #1D1D1F;
	--color-swiper-progress-bg-active-transparent : transparent;
    
    --color-swiper-progress-bg-active-gray-100 : #F4F4F6;
    --color-swiper-progress-bg-active-gray-200 : #ECECF0;
    --color-swiper-progress-bg-active-gray-300 : #E6E6EB;
    --color-swiper-progress-bg-active-gray-400 : #DFDFE5;
    --color-swiper-progress-bg-active-gray-500 : #6F6F76;
    --color-swiper-progress-bg-active-gray-600 : #5F5F66;
    --color-swiper-progress-bg-active-gray-900 : #8F8F96;      
    
    /*  스와이프 프로그래스 : 테두리 */    
    --color-swiper-progress-border-white : #ffffff;
    --color-swiper-progress-border-black : #1D1D1F;
	--color-swiper-progress-border-transparent : transparent;
    
    --color-swiper-progress-border-gray-100 : #F4F4F6;
    --color-swiper-progress-border-gray-200 : #ECECF0;
    --color-swiper-progress-border-gray-300 : #E6E6EB;
    --color-swiper-progress-border-gray-400 : #DFDFE5;
    --color-swiper-progress-border-gray-500 : #6F6F76;
    --color-swiper-progress-border-gray-600 : #5F5F66;
    --color-swiper-progress-border-gray-900 : #8F8F96;    

    
/*********************************/                
    /*  스와이프 스크롤바 :  배경*/    
    --color-swiper-scrollbar-bg-white : #ffffff;
    --color-swiper-scrollbar-bg-black : #1D1D1F;
	--color-swiper-scrollbar-bg-transparent : transparent;
    
    --color-swiper-scrollbar-bg-gray-100 : #F4F4F6;
    --color-swiper-scrollbar-bg-gray-200 : #ECECF0;
    --color-swiper-scrollbar-bg-gray-300 : #E6E6EB;
    --color-swiper-scrollbar-bg-gray-400 : #DFDFE5;
    --color-swiper-scrollbar-bg-gray-500 : #6F6F76;
    --color-swiper-scrollbar-bg-gray-600 : #5F5F66;
    --color-swiper-scrollbar-bg-gray-900 : #8F8F96;      
    
    /*  스와이프 스크롤바 : active 활성화 배경*/    
    --color-swiper-scrollbar-bg-active-white : #ffffff;
    --color-swiper-scrollbar-bg-active-black : #1D1D1F;
	--color-swiper-scrollbar-bg-active-transparent : transparent;
    
    --color-swiper-scrollbar-bg-active-gray-100 : #F4F4F6;
    --color-swiper-scrollbar-bg-active-gray-200 : #ECECF0;
    --color-swiper-scrollbar-bg-active-gray-300 : #E6E6EB;
    --color-swiper-scrollbar-bg-active-gray-400 : #DFDFE5;
    --color-swiper-scrollbar-bg-active-gray-500 : #6F6F76;
    --color-swiper-scrollbar-bg-active-gray-600 : #5F5F66;
    --color-swiper-scrollbar-bg-active-gray-900 : #8F8F96;       
    
    /*  스와이프 스크롤바  : 테두리*/    
    --color-swiper-scrollbar-border-white : #ffffff;
    --color-swiper-scrollbar-border-black : #1D1D1F;
	--color-swiper-scrollbar-border-transparent : transparent;
    
    --color-swiper-scrollbar-border-gray-100 : #F4F4F6;
    --color-swiper-scrollbar-border-gray-200 : #ECECF0;
    --color-swiper-scrollbar-border-gray-300 : #E6E6EB;
    --color-swiper-scrollbar-border-gray-400 : #DFDFE5;
    --color-swiper-scrollbar-border-gray-500 : #6F6F76;
    --color-swiper-scrollbar-border-gray-600 : #5F5F66;
    --color-swiper-scrollbar-border-gray-900 : #8F8F96;       
    

/*********************************/                    
    
    /*  프로그래스바 : 배경*/
    
    --color-progress-bg-white : #ffffff;
    --color-progress-bg-black : #1D1D1F;
	--color-progress-bg-transparent : transparent;
    
    --color-progress-bg-gray-100 : #F4F4F6;
    --color-progress-bg-gray-200 : #ECECF0;
    --color-progress-bg-gray-300 : #E6E6EB;
    --color-progress-bg-gray-300 : #E6E6EB;
    --color-progress-bg-gray-400 : #DFDFE5;
    --color-progress-bg-gray-500 : #6F6F76;
    --color-progress-bg-gray-600 : #5F5F66;
    --color-progress-bg-gray-900 : #8F8F96;
    
    /*  프로그래스바 : 테두리*/
    
    --color-progress-border-white : #ffffff;
    --color-progress-border-black : #1D1D1F;
	--color-progress-border-transparent : transparent;
    
    --color-progress-border-gray-100 : #F4F4F6;
    --color-progress-border-gray-200 : #ECECF0;
    --color-progress-border-gray-300 : #E6E6EB;
    --color-progress-border-gray-400 : #DFDFE5;
    --color-progress-border-gray-500 : #6F6F76;
    --color-progress-border-gray-600 : #5F5F66;
    --color-progress-border-gray-900 : #8F8F96;    
    
    /*무료배송*/
    --color-progress-bg : #F4F4F6;
    --color-progress-border : #1D1D1F;
    
/************************************************************************************************************************/                   
    
    /*  페이지네이션 : 텍스트*/
    
    --color-pagination-text-white : #ffffff;
    --color-pagination-text-black : #1D1D1F;
	--color-pagination-text-transparent : transparent;
    
    --color-pagination-text-gray-100 : #F4F4F6;
    --color-pagination-text-gray-200 : #ECECF0;
    --color-pagination-text-gray-300 : #E6E6EB;
    --color-pagination-text-gray-400 : #DFDFE5;
    --color-pagination-text-gray-500 : #6F6F76;
    --color-pagination-text-gray-600 : #5F5F66;
    --color-pagination-text-gray-900 : #8F8F96;    
    
    /*  페이지네이션 : 배경*/
    
    --color-pagination-bg-white : #ffffff;
    --color-pagination-bg-black : #1D1D1F;
	--color-pagination-bg-transparent : transparent;
    
    --color-pagination-bg-gray-100 : #F4F4F6;
    --color-pagination-bg-gray-200 : #ECECF0;
    --color-pagination-bg-gray-300 : #E6E6EB;
    --color-pagination-bg-gray-400 : #DFDFE5;
    --color-pagination-bg-gray-500 : #6F6F76;
    --color-pagination-bg-gray-600 : #5F5F66;
    --color-pagination-bg-gray-900 : #8F8F96;
    
    /*  페이지네이션 : 테두리*/
    
    --color-pagination-border-white : #ffffff;
    --color-pagination-border-black : #1D1D1F;
	--color-pagination-border-transparent : transparent;
    
    --color-pagination-border-gray-100 : #F4F4F6;
    --color-pagination-border-gray-200 : #ECECF0;
    --color-pagination-border-gray-300 : #E6E6EB;
    --color-pagination-border-gray-400 : #DFDFE5;
    --color-pagination-border-gray-500 : #6F6F76;
    --color-pagination-border-gray-600 : #5F5F66;
    --color-pagination-border-gray-900 : #8F8F96;      
/*********************************/                    
   
    /*공통 좌우 여백*/
    --padding-lr : 2.5vw;    
    /*섹션 마진 여백*/
    --section-margin-top : 150px;
    --section-margin-top2 : 75px;
    /*트렌지션*/
    --transition : cubic-bezier(0.215, 0.61, 0.355, 1);   
        
    
}

@media(min-width:1921px){
:root{
    --padding-lr : 2.5vw;
    }
}

@media(max-width:1024px){    
    :root{
        --section-margin-top : 100px;
        --section-margin-top2 : 50px;
    }
}

@media(max-width:720px){
	:root{
        --section-margin-top : 100px;        
        --section-margin-top2 : 50px;        
	}
}

@media(max-width:640px){
    :root{
        --section-margin-top : 100px;
        --section-margin-top2 : 50px;
    }
}

@media(max-width:480px){
    :root{
        --section-margin-top : 100px;
        --section-margin-top2 : 50px;
    }
}