/**
  * ----------------------------------------
  * basic
  * 공통영역
  * re/basic.css에 들어가있는 내용 중 공통
  * ----------------------------------------
  */
 /* color system */
* {
    border-color:var(--gr150);
}
button{
    cursor: pointer;
}
:root {
    /*
    color system
    - Black & white
    */
    --bl:#16191C;
    --wh:#fff;

    /*
    color system
    - Black Opacity
    */
    --bl90:rgba(22, 25, 28, 0.90);
    --bl80:rgba(22, 25, 28, 0.80);
    --bl60:rgba(22, 25, 28, 0.60);
    --bl50:rgba(22, 25, 28, 0.50);
    --bl40:rgba(22, 25, 28, 0.40);
    --bl30:rgba(22, 25, 28, 0.30);
    --bl20:rgba(22, 25, 28, 0.20);
    --bl10:rgba(22, 25, 28, 0.10);
    --bl04:rgba(22, 25, 28, 0.04);

/*
color system
- Primary color
Primary main : pri500
*/

  --c_pri50:  #D9DFFF;
  --c_pri150: #B4C0FF;
  --c_pri250: #8FA1FE;
  --c_pri350: #6982FF;
  --c_pri450: #4463FF;
  --c_pri500: #1F44FF; /* main */
  --c_pri600: #0025E4;
  --c_pri700: #001CAB;
  --c_pri800: #001272;
  --c_pri900: #000939;
  /*그라데이션*/
    --c_pri_gra-start: #1F44FF;
  --c_pri_gra-end:   #009DFF;

  /*
  color system
  - Secondary color
  Secondary main : sec500
  */
  --c_sec50:  #D4EEFF;
  --c_sec150: #A9DEFF;
  --c_sec250: #7FCDFF;
  --c_sec350: #55BDFE;
  --c_sec450: #2AADFF;
  --c_sec500: #009DFF; /* main */
  --c_sec600: #007DCC;
  --c_sec700: #005E99;
  --c_sec800: #003E66;
  --c_sec900: #001F32;

    
    /*
    color system
    - systme color
    Tertiary main : sec500
    */
    --success:#3BD59E;
    --danger:#FF5847;
    --danger_light:#FF7063;
    --danger_dark:#E54F40;
    --danger_disabled:#FFBCB6;
}

a {
cursor: pointer;
}

/*
scroll
*/
/* 스크롤바 스타일링 - body */

body::-webkit-scrollbar {
    width: 16px; /* 스크롤바 너비 */
}

body::-webkit-scrollbar-thumb {
    background-color: #88888886; /* 스크롤바 색상 */
    border-radius: 999px; /* 스크롤바 모서리 둥글게 */
    border: 4px solid #fff;
}

body::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}

/* 스크롤바 스타일링 - box */
.scrollable-containerL::-webkit-scrollbar {
    width: 16px; /* 스크롤바 너비 */
}

.scrollable-containerL::-webkit-scrollbar-thumb {
    background-color: #88888886; /* 스크롤바 색상 */
    border-radius: 999px; /* 스크롤바 모서리 둥글게 */
    border: 4px solid #fff;
}

.scrollable-containerL::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}


/* 스크롤바 스타일링 - box */
.scrollable-container::-webkit-scrollbar {
    width: 10px; /* 스크롤바 너비 */
}

.scrollable-container::-webkit-scrollbar-thumb {
    background-color: #88888875; /* 스크롤바 색상 */
    border-radius: 8px; /* 스크롤바 모서리 둥글게 */
    border: 2px solid #fff;
}

.scrollable-container::-webkit-scrollbar-track {
    background-color: #ffffff00; /* 스크롤바 트랙 색상 */
    border-radius: 5px; /* 스크롤바 트랙 모서리 둥글게 */
}

body{
    font-size: 16px;
    font-family: 'Pretendard', sans-serif;
    font-style: normal;
}

/*
font style
- font-weight
*/

.bd{
    font-weight: 700;
}
.sb{
    font-weight: 600;
}

.md{
    font-weight: 500;
}
.rg{
    font-weight: 400;
}

/*
font style
- heading
*/

.hd{
    line-height: 140%;
    letter-spacing: -0.02em;
}

.hd1{
    font-size: 2.5rem;
}

.hd2{
    font-size: 2rem;
}

.hd3{
    font-size: 1.75rem;
}

.hd4{
    font-size: 1.5rem;
}

.hd5{
    font-size: 1.375rem;
}

/*
font style
- body
*/
.bdFont{
    line-height: 160%;
    letter-spacing: -0.025rem;
}

.bd1{
    font-size: 1.25rem;
}
.bd2{
    font-size: 1.125rem;
}
.bd3{
    font-size: 1rem;
}
.bd4{
    font-size: 0.875rem;
}
.bd5{
    font-size: 0.75rem;
}

/*
font style
- label
*/
.lb{
    line-height: 100%;
    letter-spacing: -0.02rem;
}

.lb1{
    font-size: 1em;
}
.lb2{
    font-size: 0.875rem;
}

/*
font style
- caption 
*/

.cap{
    line-height: 140%;
    letter-spacing: -0.02rem;
}

.cap1{
    font-size: 0.875rem;
}
.cap2{
    font-size: 0.8125rem;
}
.cap3{
    font-size: 0.75rem;
}
.cap4{
    font-size: 0.6875rem;
}

/*
font style
- button
*/

.btn{
    line-height: 100%;
    letter-spacing: -0.02rem;
}
.btn1{
    font-size: 1.125rem;
}

.btn2{
    font-size: 1rem;
}

.btn3{
    font-size: 0.875rem;
}

.btn4{
    font-size: 0.75rem;
}

.txtCenter{
	text-align:center;
}
/*
font style
- span
*/
.pri{color: var(--c_pri500);}
.lightGray{color:var(--gr400,#6D757E);}
.underLineGray{text-decoration: var(--gr400,#6D757E) underline;}
.col_tit{color:var(--gr900, #212529);}
.col_tit2{color:var(--gr900, #212529);}
.col_body{color:var(--gr700,#3B4044);}
.col_caption{color:var(--gr400, #6D757E);}
.col_pri{color:var(--c_pri500);}
.col_wh{color:var(--wh);}
.col_gra{  background: linear-gradient(
    to right,
    var(--c_pri_gra-start),
    var(--c_pri_gra-end)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Firefox: */
  background-clip: text;
  color: transparent;}
/*
common
layout*/
.boxGrid > div{
    flex: 1;
}

.roundBox{
    border-radius: 20px;
}

.roundBoxS{
    border-radius: 16px;
}

.roundBoxES{
    border-radius: 12px;
}

.flxBox{
    display: flex;
}

.alignCenter{
    align-items: center;
}

.layoutWrap{
    width:1280px;
    padding: 0 40px;
    margin: 0 auto;
}

.layoutWrap.fullLayout{
    width: 100%;
    padding:0;
}


/*
margin system
*/
.boxMarginS{
    margin-bottom: 60px;
}

.boxMargin{
    margin-bottom: 100px;
}
.boxPaddingTop{
    padding-top: 100px;
}

.titMargin{
    margin-bottom: 40px;
}


.txtMarginXL{
    margin-bottom: 32px;
}

.txtMarginL{
    margin-bottom: 20px;
}

.txtMarginM{
    margin-bottom: 12px;
}
.txtMarginS{
    margin-bottom: 8px;
}
.txtMarginEs{
    margin-bottom: 4px;
}


/* Accordion styles */

.accordianTabWrap{
    overflow: hidden;
    border: 1px solid var(--gr150);
    border-radius: 8px;
}

.accordianTabWrap input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:0;
    display:none;
}

.accordianTabWrap .tabs{
    overflow: hidden;
}

.accordianTabWrap .tab {
    width: 100%;
    color:var(--gr900);
    overflow: hidden;
    border-bottom: 1px solid var(--gr150);
    display: flex;
    flex-direction: column;
}
.accordianTabWrap .tab:last-child{
    border: none;
}
.tab-label {
    display: flex;
    justify-content: space-between;
    padding: 24px 20px;
    cursor: pointer;
    position: relative;
    padding-left: 44px;
    word-break: keep-all;
}

.tab-label::before{
    position: absolute;
    content: "Q.";
    left: 20px;
    color:var(--c_pri500);
}

.tab-label::after {
    content: "";
    display: block;
    background: url(https://www.wjthinkbig.com/re/images/icons/arrowRightSmall_gr.svg) center center / cover no-repeat;
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
    transition:  0.2s;
}
.tab-content {
    max-height: 0;
    padding: 0 1rem;
    color:var(--gr600);
    transition: all 0.2s;
    position: relative;
    padding-left: 44px;
    background:var(--gr0);
    word-break: keep-all;
    line-height:160%;
}

.tab-content::before{
    position: absolute;
    content: "A.";
    font-weight: 600;
    left: 20px;
    color:var(--c_pri500);
}

input:checked + .tab-label::after {
    transform: rotate(-90deg);
    align-items: center;
    transition:  0.2s;
}
input:checked ~ .tab-content {
    border-top: 1px solid var(--gr150);
    max-height: max-content;
    padding: 20px;
    transition:  0.2s;
    padding-left: 44px;
}


/*아코디언 학습*/
.accordianTabWrap.curiArco .tab-label::before{
    display: none;
}

.accordianTabWrap.curiArco .tab-content::before{
    display: none;
}

.accordianTabWrap.curiArco .tab-label{
    padding-left: 20px;
}

.accordianTabWrap.curiArco .tab-content{
    padding-left: 20px;
}

/*미디어쿼리*/
@media only screen and (max-width: 480px) { 
    .boxMargin{
        margin-bottom: 60px;
    }
    .boxPaddingTop{
        padding-top: 60px;
    }
    .boxMarginS{
        margin-bottom: 20px;
    }
}