@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


/* reset */
* {
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;
    margin:0;
    padding:0;
}
html,
body{height:100%; }
body {color:var(--adaptiveGrey900);font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;}
body:before{position:fixed;left:0;top:0;width:100%;height:0;content:'';}/* fix webkit bug(scroll event delay) */


body {
    --adaptiveGrey25: #FCFCFC;
    --adaptiveGrey50: #F8F8F9;
    --adaptiveGrey100: #F3F3F3;
    --adaptiveGrey200: #E5E7EA;
    --adaptiveGrey300: #D3D5D7;
    --adaptiveGrey400: #AFB4BA;
    --adaptiveGrey500: #888F98;
    --adaptiveGrey600: #676F79;
    --adaptiveGrey700: #434D5A;
    --adaptiveGrey800: #3C4653;
    --adaptiveGrey900: #191F28;
    --blue1:#2F80ED;
    --blue2:#2D9CDB;
    --blue3:#56CCF2;
    --green2: #27AE60;
    --orange: #F2994A;
    --purple1:#9B51E0;
    --red:#EB5757;
    --transparent: rgba(255,255,255,0);
    --fs_xl:20px;
    --fs_l:16px;
    --fs_m:14px;
    --fs_s:12px;
   

}

body.guide { background: #E5E7EA; text-align: center;}
li{list-style:none;}
a{color:inherit;text-decoration:none;outline-offset:-1px;-webkit-tap-highlight-color: rgba(0,0,0,0);}
img{border:0;vertical-align:middle;}
/* ::-moz-selection{color:#fff;background-color:#825a4a}
::selection{color:#fff;background-color:#825a4a} */


h1 {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 32px;
    display: flex;
    align-items: center;
}

h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 24px;
}

h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 20px;
}

h4 {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 18px;
}

h1.display {
    font-style: normal;
    font-weight: normal;
    font-size: 50px;
    line-height: 50px;
}


.fs_xl{font-size: 20px;}
.fs_l{font-size: 18px;}
.fs_m{font-size: 14px;}
.fs_s{font-size: 12px;}

.fs_xl_b{font-size: 20px;font-weight: 600;}
.fs_l_b{font-size: 18px;font-weight: 600;}
.fs_m_b{font-size: 14px;font-weight: 600;}
.fs_s_b{font-size: 12px;font-weight: 600;}

.bold {font-weight: 600;}


.al_l{text-align: left;}
.al_c{text-align: center;}
.al_r{text-align: right;}

.mar_l_xs{margin-left: 16px;}
.mar_r_xs{margin-right: 16px;}
.mar_t_xs{margin-top: 16px;}
.mar_b_xs{margin-bottom: 16px;}

.mar_l_sm{margin-left: 24px;}
.mar_r_sm{margin-right: 24px;}
.mar_t_sm{margin-top: 24px;}
.mar_b_sm{margin-bottom: 24px;}

.mar_l_md{margin-left: 32px;}
.mar_r_md{margin-right: 32px;}
.mar_t_md{margin-top: 32px;}
.mar_b_md{margin-bottom: 32px;}

.mar_l_lg{margin-left: 40px;}
.mar_r_lg{margin-right: 40px;}
.mar_t_lg{margin-top: 40px;}
.mar_b_lg{margin-bottom: 40px;}

.mar_l_xl{margin-left: 48px;}
.mar_r_xl{margin-right: 48px;}
.mar_t_xl{margin-top: 48px;}
.mar_b_xl{margin-bottom: 48px;}

.mar_l_xxl{margin-left: 56px;}
.mar_r_xxl{margin-right: 56px;}
.mar_t_xxl{margin-top: 56px;}
.mar_b_xxl{margin-bottom: 56px;}

.mar_l_xxxl{margin-left: 64px;}
.mar_r_xxxl{margin-right: 46px;}
.mar_t_xxxl{margin-top: 64px;}
.mar_b_xxxl{margin-bottom: 64px;}

.pad_md{padding:32px;}
.pad_t_less{padding-top:0px;}
.pad_sm{padding:24px;}

.shadow_sm {box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);}
.shadow_md {box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);}
.shadow_lg {box-shadow: 0px 16px 24px rgba(0, 0, 0, 0.1);}

.layout_h {display: flex;flex-direction: row; width:100%;}
.layout_v {display: flex;flex-direction: column; width:100%;} 

.layout_h.jst_space, .layout_v.jst_space  {justify-content: space-between;}
.layout_h.jst_center, .layout_v.jst_center  {justify-content: center;}
.layout_h.jst_end, .layout_v.jst_end {justify-content: end;}

.layout_h.start, .layout_v.start  {align-items: flex-start;}
.layout_h.end, .layout_v.end  {align-items: flex-end;}




.wrap_body{
    width:100%;
    text-align: center;
}


.demo_box {background-color:var(--adaptiveGrey50)}
.demo_box2 {background-color: var(--adaptiveGrey200)}




/* stock price */
.stock_price_current {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 50px;
    color: var(--adaptiveGrey800);
    font-weight: 600;
}

.stock_price_changed{
    display: flex;
    flex-direction: column;
    border: 1px solid;
    border-color: var(--adaptiveGrey200);
    border-radius: 8px;
    background-color:#fff;
    width:216px;
}

.stock_price_changed div{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 48px;
    padding:0px 16px;
    justify-content: space-between;
    font-size: var(--fs_l);
    font-weight: 600;
 }

 .stock_price_changed .percent {
     border-top:1px solid;
     border-color: var(--adaptiveGrey100);
 }

 .stock_price_changed div span{
   height: 100%;
   display: flex;
   flex-direction: row;
   align-items: center;
 }


.stock_price_changed div span:last-child{
    color:var(--blue1);
    font-size: var(--fs_xl);
 }


 


.price_up::before {
    content: '';
    width:32px;
    height:32px;
    background-image: url("../images/triangle-up-24.svg");
    background-size: 32px 32px;
    display: inline-block;
    margin-right:8px;
}

.price_down::before {
    content: '';
    width:32px;
    height:32px;
    background-image: url("../images/triangle-down-24.svg");
    background-size: 32px 32px;
    display: inline-block;
    margin-right:8px;
}

.stock_price_table {
    border: 1px solid;
    border-color: var(--adaptiveGrey200);
    border-radius: 8px;
    width:502px;
}

.stock_price_table .row:first-child li{
    font-weight: 600;
}

.stock_price_table ul{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid;
    border-color: var(--adaptiveGrey200);
}

.stock_price_table ul:first-child{
    border-top: none;
}


.stock_price_table ul li{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 48px;
    padding: 0px 16px;
    border-left: 1px solid;
    border-color: var(--adaptiveGrey200);
    justify-content: center;
}

.stock_price_table ul li:first-child{
    border-left: none;
}



/* component */

.custom_checkbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right:24px;
}

.custom_checkbox.mg_less{
    margin-right:0px;
}

.custom_checkbox input[type="checkbox"] {
	opacity: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    margin:0px;
    cursor: pointer;
}

.custom_checkbox input[type="checkbox"] + label {
    margin:0px 0px 0px 8px;
    position: relative;
    display: inline-block;
    line-height: 16px;
    font-size: var(--fs_m);
}

.custom_checkbox input[type="checkbox"] + label::before {
    content:'';
	display: inline-block;	
	position: absolute;
    left:-24px;
    top:0px;
	cursor: pointer;
    width:12px;
    height:12px;
    background-color: #fff;
    border: 2px solid #676F79;
    pointer-events: none;
    border-radius: 4px;
}

.custom_checkbox input[type="checkbox"]:checked + label::before {
	display: inline-block;	
    width:16px;
    height:16px;
    border:0px;
	cursor: pointer;	
	background-image: url(../images/check-white-24.svg);
    background-size: 16px;
    background-color: #676F79;
}







.custom_checkbox.sky input[type="checkbox"] + label::before {
    border-color: #56CCF2;
}

.custom_checkbox.blue input[type="checkbox"] + label::before {
    border-color: #016EFF;
}

.custom_checkbox.red input[type="checkbox"] + label::before {
    border-color: #F04C4C;
}

.custom_checkbox.yellow input[type="checkbox"] + label::before {
    border-color: #F2994A;
}

.custom_checkbox.purple input[type="checkbox"] + label::before {
    border-color: #9B51E0;
}


.custom_checkbox.sky input[type="checkbox"]:checked + label::before {
    background-color: #56CCF2;
}

.custom_checkbox.blue input[type="checkbox"]:checked + label::before {
    background-color: #016EFF;
}

.custom_checkbox.red input[type="checkbox"]:checked + label::before {
    background-color: #F04C4C;
}

.custom_checkbox.yellow input[type="checkbox"]:checked + label::before {
    background-color: #F2994A;
}

.custom_checkbox.purple input[type="checkbox"]:checked + label::before {
    background-color: #9B51E0;
}




.custom_input {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.custom_input input {
    background: var(--adaptiveGrey100);
    border-radius: 8px;
    border:none;
    text-indent: 16px;
    height: 40px;
    color: var(--adaptiveGrey700);
    font-size: var(--fs_m);
}

.custom_input input:focus {
    border:none;
    outline: none;
    box-shadow: 0px 0px 0px 4px rgba(86, 204, 242, 1);
}

.custom_input input.center {
    text-indent: 0px;
    text-align: center;
}



.custom_textarea {
    width: 100%;
}
.custom_textarea textarea {
    height: 200px;
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
    background: var(--adaptiveGrey100);
    color: var(--adaptiveGrey700);
    font-size: var(--fs_m);
    border:none;
    border-radius: 8px;
    resize: none;
}

.custom_textarea textarea:focus {
    border:none;
    outline: none;
    box-shadow: 0px 0px 0px 4px rgba(86, 204, 242, 1);
}


.custom_select {
    position: relative;
    width: 150px;
    height: 40px;
    
    
}
.custom_select select {
    width: inherit;
    height: inherit;
    background: var(--adaptiveGrey100);
    font-size: var(--fs_m);
    color: var(--adaptiveGrey700);
    border: 0 none;
    outline: 0 none;
    text-indent: 16px;
    position: relative;
    cursor: pointer;
    z-index: 3;  
    border-radius: 8px;
    /* select가 위로 올라와야 함 */
}

.custom_select select:hover{
    box-shadow: 0px 0px 0px 4px rgba(86, 204, 242, 1);
    /* select가 위로 올라와야 함 */
}

.custom_select .icoArrow {
    position: absolute; 
    background: var(--adaptiveGrey100);
    border-radius: 8px;
    top: 0; 
    right: 0px; 
    z-index: 10; 
    width: 35px; 
    height: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.custom_select .icoArrow img {
    width: 50%;
    transition: .3s; 
    /* 부드럽게 회전 */
}








/* mark */
.hyphen::before {
    content: '-';
    width:32px;
    text-align: center;
    color: var(--adaptiveGrey500);
    display: inline-block;
}

.red_dot::after {
    content: '';
    background: rgba(235, 87, 87, 1);
    width:4px;
    height:4px;
    border-radius: 2px;
    margin-left:8px;
    margin-top:-8px;
    text-align: center;
    color: var(--adaptiveGrey500);
    display: inline-block;
}







/* doc_header */
.doc_header {
    width:100%;
    height:80px;
    top:0px;
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05);
    -webkit-backdrop-filter: saturate(180%) blur(40px);
    backdrop-filter: saturate(180%) blur(40px);
    z-index: 8888;
}
.doc_header .wrap_header {
    width:1120px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.doc_header .wrap_header .logo {display: inline-block;}
.doc_header .wrap_header .logo img{height:40px;}

.doc_header .wrap_header nav {text-align:center;}
.doc_header .wrap_header nav a {
    display: inline-block;
    font-size: var(--fs_xl);
    font-weight: 600;
    color: var(--adaptiveGrey900);
    padding:0 8px;
    margin:0 16px;
    height:40px;
    line-height: 40px;
}

.doc_header .wrap_header .area_util{display: inline-block;}
.doc_header .wrap_header .area_util .btn_contact {
    font-size: var(--fs_m);
    color: var(--adaptiveGrey900);
    background: var(--adaptiveGrey100);
    border-radius: 20px;
    font-weight: 600;
    height:40px;
    line-height: 40px;
    padding:0px 16px;
    display: inline-block;
}

.doc_header .wrap_header .area_util .btn_contact img{
  margin-right:8px;
}


.doc_header .wrap_header .area_util .btn_hamburger {
    display: none;
}


/* section */
section.main_visual {
    position: relative;
    width: 100%;
    overflow: hidden;

}
section.main_visual .wrap_video{
    position: relative;
    overflow: hidden;
    width: auto;
    height: 100vh;
}

section.main_visual .wrap_video video{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

section.main_visual .wrap_video img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}





.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 0px 60px 0px;
    
}
.section.gray{ background-color: var(--adaptiveGrey50);}

.section .section_inner {
    width: 1120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    margin: 32px;
}

.section .wrap_content {
    color: var(--adaptiveGrey800);
    border-radius: 18px;
    background: #fff;
    border:1px solid #E8E8E8;
    box-sizing: border-box;
    width:100%;
    padding: 32px;
}

.section .wrap_content.pad_less{
    padding: 0px;
}

.section .wrap_content.transparent{
    background:none;
    border:none;
}



.section_header {
    color: var(--adaptiveGrey900);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 32px 16px;
    width: 100%;
    position: relative;
}

.section_header .left,.section_header .right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.section_header .left .tab{
    margin-left:32px;
}




/* list_card */
.list_card {
	display: flex;
	flex-wrap: wrap;
    width: 100%;
}

.list_card.x2 .item {
	flex: 1 1 40%;
}

.list_card.x3 .item {
	flex: 1 1 30%;
}

.list_card .item .data{
    border-radius: 16px;
    padding:24px;
    margin:12px;
    transition-duration: 0.3s ;
    transition-timing-function: ease;
    transition-property: background-color, box-shadow;
    box-shadow: 0px 1px 8px rgba(0, 0, 0, 0);
}

.list_card .item .data.gray{
    background-color: #F8F8F9;
}



.list_card .item .data:hover{
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border: 2px solid #E0E0E0;
    box-sizing: border-box;
    padding:22px;

    
}


.list_card .item .data .thy_1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--fs_l);
    color: var(--adaptiveGrey700);
    font-weight: 600;
    height: 52px;
}

.list_card .item .data .thy_2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--fs_m);
    color: var(--adaptiveGrey700);
    height: 24px;
}

.list_card .item .data .thy_3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: var(--fs_s);
    color: var(--adaptiveGrey700);
    height: 24px;
}






/*list_board */

.list_board {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: static;
    width: 100%;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
    box-sizing: border-box;
    border-radius: 24px;
}
.list_board .row {
    width: 100%;
    height: 64px;
    display: block;
    position: relative;
    cursor: pointer;   
}
.list_board .row::before {
    position: absolute;
    content: '';
    background-color: var(--transparent);
    left: 16px;
    right:16px;
    top:2px;
    bottom:2px;
    border-radius: 16px;
    transition-duration: 0.2s ;
    transition-timing-function: ease;
} 
.list_board .row:hover::before {
    background-color: var(--adaptiveGrey100);
    left: 0px;
    right:0px;
    top:0px;
    bottom:0px;
} 
.list_board .row .data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    position: relative;
    width: 100%;
    height: 100%;
}
.list_board .row .data div {
display: flex;
flex-direction: row;
align-items: center;
padding: 0px 32px;
height: 100%;
}

.list_board .row .data .w_fix{
    max-width:192px;
    width:100%;
}
.list_board .row .data .w_fill{
    width:100%;
    overflow: hidden;
}

.list_board .row .data .thy_1 {
    font-size: var(--fs_l);
    color: var(--adaptiveGrey900);
    font-weight: 600;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.list_board .row .data .thy_2 {
    font-size: var(--fs_m);
    color: var(--adaptiveGrey600);
}


/* data grid */
/* .wrap_datagrid {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: start;
    overflow: hidden;
    border-radius: 0px 0px 17px 17px;
}

.wrap_datagrid .left {
   width: 280px;
}

.wrap_datagrid .right {
    min-width: calc(100% - 280px);
   overflow-x: scroll;
    margin-top: 0px;
    flex-direction: unset;
    align-items: normal;
} */


.wrap_datagrid {
    position: relative;
    overflow: hidden;
    border-radius: 0px 0px 17px 17px;
}

.wrap_datagrid .left {
   width: 280px;
}

.wrap_datagrid .right {
   position:absolute;
   left: 280px;
   right: 0px;
   top:0px;
   bottom: 0px;
   overflow-x: scroll;
}

.wrap_datagrid .mask {
    display: none;

 }

.datagrid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: static;
    width: 100%;
    left: 0px;
    top: 0px;
    background: #FFFFFF;
    box-sizing: border-box;
    overflow: hidden;
}
.datagrid .row {
    width: 100%;
    height: 64px;
    display: block;
    position: relative;
    /* cursor: pointer;    */
}
.datagrid .row.primary::before {
    position: absolute;
    content: '';
    background-color: var(--adaptiveGrey25);
    left: 0px;
    right:0px;
    top:0px;
    bottom:0px;
} 

.datagrid .row .data {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    position: relative;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid;
    border-color: var(--adaptiveGrey100);
}

.datagrid .row.header {
    border-top: 1px solid var(--adaptiveGrey100);
   
}


.datagrid .row.header .data {
    border-bottom: 1px solid var(--adaptiveGrey300);
   
}

.datagrid .row:last-child .data {
    border: none;
}


.datagrid .row.header::before{
   display: none;
}



.datagrid .row .data div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0px 32px;
    height: 100%;
    position: relative;
}

.datagrid .row .data .subject {
    justify-content: start;
}



.datagrid .row .data .border_r::before {
    content: '';
    position: absolute;
    right:0px;
    top:0px;
    bottom:-1px;
    border-right: 1px solid;
    border-color: var(--adaptiveGrey200);
    z-index: 100;
}
    

.datagrid .row .data .w_fix{
    max-width:192px;
    width:100%;
}
.datagrid .row .data .w_fill{
    width:100%;
}

.datagrid .row .data .thy_1 {
    font-size: var(--fs_l);
    color: var(--adaptiveGrey900);
    font-weight: 600;
}

.datagrid .row .data .thy_2 {
    font-size: var(--fs_l);
    color: var(--adaptiveGrey700);
    font-weight: 600;
}

.datagrid .row .data .thy_3 {
    font-size: var(--fs_m);
    color: var(--adaptiveGrey600);
    font-weight: 600;
}








.article_container {
    border-radius: 18px;
    background: #fff;
    margin:32px 0px; 
}

.article_container .content_wrap {
    padding:32px; 
    width:100%;
}

.wrap_guide { 
    margin: auto;
    height: 100%;
    width:1200px;
    text-align: center;
    padding:100px;
}


/* pagination */

.pagination {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 24px 0px;
    position: static;
    width: 100%;
    height: 80px;
}

.pagination button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    position: static;
    width: 32px;
    height: 32px;
    border:none;
    background:none;
    border-radius: 16px;
    cursor: pointer;
    margin:0 4px;
    background-color: rgba(255,255,255,0);
    transition-duration: 0.5s;
    transition-timing-function: ease;
    font-weight: 600;
    color: var(--adaptiveGrey600);
    font-size: var(--fs_l);
}

.pagination button.icon{
    width:32px;
    height:32px;
 }

.pagination button.icon img{
   width:16px;
   height:16px;
}

.pagination button:hover{
    background-color: rgba(248, 248, 249, 1);
}

.pagination button.selected{
    background-color:rgba(243, 243, 243, 1);
}


/* buttons */

button{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 40px;
    border:none;
    background:var(--adaptiveGrey800);
    cursor: pointer;
    padding:0px 16px;
    border-radius: 8px;
    font-size: var(--fs_m);
    font-weight: 400;
    color: #ffffff;
    text-align: left;
}

button label {cursor: pointer;}

button.sm{
    height: 32px;
    padding:0px 16px;
    font-size: var(--fs_s);
    font-weight: 400;
}

button:hover{
    background: var(--adaptiveGrey600);
}

button.selected{
    background: var(--adaptiveGrey600);
}


button.secondary{
    background: #ffffff;
    border:1px solid var(--adaptiveGrey300);
    font-weight: 400;
    color: var(--adaptiveGrey800);
}

button.secondary:hover{
    background: #ffffff;
    border:1px solid var(--adaptiveGrey400);
}

button.secondary.selected{
    background: #ffffff;
    border:1px solid var(--adaptiveGrey400);
}


button.tertiary{
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--adaptiveGrey800);
    background: none;
}

button.tertiary:hover{
    background-color: var(--adaptiveGrey100);
}

button.tertiary.selected{
    background-color: var(--adaptiveGrey500);
    color:#fff;
}

button img{
    width: 16px;
    height: 16px;
    margin-right:8px;
}

button.icon{
  padding:0;
  width:40px;
}

button.icon img{
    margin: 0;
}

button.blue {
    color: #fff;
    border: none;
    background: var(--blue1);
}

button.rounded {
    border-radius: 20px;
}

button.stroke {
    border-radius: 16px;
    border:2px solid var(--adaptiveGrey300);
    background: #ffffff;
    height: 56px;
    color: var(--adaptiveGrey800);
    font-size: var(--fs_l);
    font-weight: 600;
}

.btn_space button{margin:0px 8px;}




/* Tab Buttons */
.tab {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    padding: 24px 32px;
}

.tab button{ margin:0px 8px;}
.tab button:first-child{ margin:0px;}


/* marker */
.marker{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;    
    padding: 0px 16px;
    height:32px;
    color:#ffffff;
    background: #56CCF2;
    border-radius: 16px;
    font-size: var(--fs_s);
}

.marker.green {
    background-color: var(--green2);
}

.marker.red {
    background-color: var(--red);
}


.marker_icon{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;   
    height:24px;
    font-size: var(--fs_s);
}

.marker_icon img{
    width:16px;
    height:16px;
    margin-right:8px;
}


.marker_icon.green{
    color:var(--green2);
}

.marker_icon.orange{
    color:var(--orange);
}

.marker_icon img{
    width:16px;
    height:16px;
    margin-right:8px;
}


/* social_banner */
.social_banner {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 32px;
    height: 96px;
    background-color: var(--adaptiveGrey50);
    font-size: var(--fs_m);
    font-weight: 600;
    color:var(--adaptiveGrey700);
    border-radius: 16px;
    margin:0px 12px;
    width:100%;
    cursor:pointer;
    transition-duration: 0.3s ;
    transition-timing-function: ease;
    transition-property: background-color, box-shadow;

}
.social_banner:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border: 2px solid #E0E0E0;
    box-sizing: border-box;
    padding: 0px 30px;
   

} 

.social_banner img{
    margin-right:16px;
} 



/* chart */
.chart_wrap {}

.legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--adaptiveGrey900);
    font-size: var(--fs_l);
    font-weight: 600;
    height: 16px;
    margin:0 12px;
}

.legend::before {
    content: '';
    width: 10px;
    height:10px;
    border-radius: 5px; 
    margin-right:8px;
}

.legend.blue1::before {
    background-color: var(--blue1);
    
}

.legend.blue2::before {
    background-color: var(--blue2);
    
}

.legend.blue3::before {
    background-color: var(--blue3);
    
}


.balloon {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 73px;
}

.balloon::before {
    content: '';
    width:58px;
    height:58px;
    background-image: url("../images/emoji_smile.png");
    background-size: 58px 58px;
    
}

.balloon div{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    cursor: pointer;
}


.balloon div::before {
    content:'';
    width:40px;
    height: 73px;
    display: inline-block;
    background-image: url("../images/bg_msg_balloon.png");
    background-size: 620px 73px;
    background-position: top left;
    background-repeat: no-repeat;
  
}

.balloon div span {
    height: 73px;
    line-height: 73px;
    display: inline-block;
    background-image: url("../images/bg_msg_balloon.png");
    background-size: 620px 73px;
    background-position: top right;
    background-repeat: no-repeat;
    padding-right:32px;
    max-width: 380px;
    overflow: hidden;
    text-overflow:ellipsis; white-space:nowrap;
}
.balloon div:hover::before,
.balloon div:hover span {
    background-image: url("../images/bg_msg_balloon_blue.png");
}

.balloon.ty2 {
    margin-bottom:16px;
}

.balloon.ty2::before {
    display: none;
}

.balloon.ty2 div span {
    max-width: none;
    width: 100%;
}

.balloon_scroll {
    width: 100%;
    height: 139px;
    padding:0px 32px 0px 16px;
    overflow: hidden;
     -webkit-mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, transparent 100%);
    mask-image: linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, transparent 100%);
}

.balloon_item {
  width: 100%;
  animation-name: ani_balloon;
  animation-duration:10s;
  animation-iteration-count:infinite;
  animation-direction: backwards;
  /* animation-fill-mode: ; */
}


@-webkit-keyframes ani_balloon {
    0% {
      margin-top:0px;
    }

    30% {
        margin-top:-89px;
    }
    40% {
        margin-top:-89px;
    }

    60% {
        margin-top:-178px;
      }

    70% {
      margin-top:-178px;
    }

    90% {
        margin-top:-267px;
      }

    100% {
      margin-top:-267px;
    }
  }

/* poppup */
.popup_modal {
    position: fixed;
    left: 0px;
    right:0px;
    top:0px;
    bottom:0px;
    overflow-y: auto;
    background-color: rgba(31, 34, 37, 0.85);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 88px 0px 88px 0px;
    z-index: 9999;
    max-height: 100vh;
   
    
}

.popup_modal.hide {
    display: none;
}

.wrap_popup {
    width: 1120px;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px;
}

.wrap_popup .header{
    width: 100%;
    height:64px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

}

.wrap_popup .header .left{
    padding: 0px 32px;
}



.wrap_popup .header .category{
    color: var(--adaptiveGrey600);
    font-size: var(--fs_m);
    font-weight: bold;
}

.wrap_popup .wrap_content .subject{
    width: 100%;
    height:80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom:2px solid ;
    border-color: var(--adaptiveGrey100);
}

.wrap_popup .wrap_content .subject .left,
.wrap_popup .wrap_content .subject .right{
    padding: 0px 32px;
}

.wrap_popup .wrap_content .date{
    color: var(--adaptiveGrey600);
    font-size: var(--fs_m);
}


.wrap_popup .wrap_content .content{
    color: var(--adaptiveGrey900);
    font-size: var(--fs_m);
    line-height: 24px;
    padding: 32px;
    
}



.wrap_popup .list_board .row {
    border-bottom: 2px solid;
    border-color: var(--adaptiveGrey100);
}

.wrap_popup .list_board .row:first-child{
    border-top: 2px solid;
    border-color: var(--adaptiveGrey100);
}


.wrap_popup .list_board .row::before {
   border-radius: 0;
   top:0px;
   left:0px;
   right:100px;
   bottom:0px;
}

.wrap_popup .list_board .row:hover::before {
    border-radius: 0;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
 }

.wrap_popup .list_board .row .data .w_fix {
    width: auto;
}


.wrap_popup .attachment{
    padding:32px;
    display: flex;
    flex-direction: column;
    align-items: start;
}


.wrap_popup .attachment button{
    margin-top:16px;
}






.popup_modal.password .wrap_popup{
    width: 550px;
}

.emoji.xxl{width:128px;}

/* form */
.form {

}

.form .form_row {
    padding:16px 0px;
    display: flex;
    flex-direction: row;
    align-items: start;
    position: relative;
    width: 100%;
}

.form .form_row .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
}

.form .form_row .item.w_fill {
    width:calc(100% - 140px);
}


.form .form_row .item.label{
    font-size: var(--fs_l);
    color: var(--adaptiveGrey600);
    width: 128px;
    height: 40px;
}

.scroll_content {
    display: flex;
    flex-direction: column;
    align-items: start;
    border:1px solid var(--adaptiveGrey300);
    border-radius: 16px;
    overflow:hidden;
}

.scroll_content .scroll_body {
    overflow-y: scroll;
    height: 144px;
    padding:24px;
    color: var(--adaptiveGrey600);
}

.scroll_content .scroll_header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom:1px solid var(--adaptiveGrey200);
    height: 56px;
    padding:0 24px;
}

.scroll_content .scroll_header .left{
    color: var(--adaptiveGrey800);
    font-size: var(--fs_m);
    font-weight: bold;
}




#sec_stock .wrap_chart_financial{
    overflow: hidden;
    position: relative;
}

#sec_stock .wrap_chart_financial .left{
   width: 64px;
   overflow: hidden;
}

#sec_stock .wrap_chart_financial .right{
    position: absolute;
    left: 64px;
    right: 0px;
    top:0px;
    bottom:0px;
    overflow: hidden;
 }
 


#sec_income #income_chart_container .left_content {
    width: calc(50% - 16px);
}


#sec_income #income_chart_container .right_content {
    width: calc(50% - 16px);
}

#sec_income .wrap_chat_income  {
    position: relative;

}

#sec_income .wrap_chat_income .left {
    width: 56px;
}

#sec_income .wrap_chat_income .right {
    position: absolute;
    left: 56px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* overflow-x: scroll; */
}



.canvas_eps {
    width:100%;
    height: 412px;
}

.canvas_sales {
    width:100%;
    height: 206px;
}

.canvas_performance {
    width:100%;
    height: 206px;
}

.canvas_income_statement {
    width:100%;
    height: 304px;
}

.canvas_income_statement_y_axis {
    width:100%;
    height: 304px;
}

.canvas_candle_y_axis {
    width:100%;
    height: 304px;
}

.canvas_candle {
    width:100%;
    height: 304px;
}


.canvas_volume {
    width:100%;
    height: 120px;
}

.canvas_volume_y_axis {
    width:100%;
    height: 120px;
}




.forbid_scroll {
    /* pointer-events: none; */
    overflow: hidden;
    /* touch-action: none;     */

}

/* .allow_scroll {
    pointer-events: none;

} */

.main_copy_writing {
    position: absolute;
    left: 0px;
    right: 0px;
    top:200px;
    text-align: center;
    color: #fff;
    font-size: 48px;
    line-height: 1.6;
}



.main_slider {
    position: absolute;
    bottom: 0px;
    width: 1160px;
    left:50%;
    margin-left:-580px;
    overflow: hidden;
    padding:0px 20px;
    /* -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 1) 2%, rgba(0, 0, 0, 1) 98%, transparent 100%); */
}

.swiper {
    width: 100%;
    height: 100%;
  }

.slide_card {
    text-align: left;
    background: rgba(231, 231, 231, 0.95);
    box-shadow: 0px 1px 0px rgb(0 0 0 / 5%);
    -webkit-backdrop-filter:  blur(40px);
    backdrop-filter: blur(0px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 227px;
    border-radius: 32px;
    overflow: hidden;
}


.swiper-pagination {
    position: relative;
    margin: 64px 0px;
}


.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: none;
    border: 2px solid #fff;
    opacity: 1;
    margin:0px 16px;
}

.swiper-pagination-bullet-active {
background: #ffffff;
}

.slide_card .slide_header{
    height: 88px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    width: 100%;
}

.slide_card .slide_header img{
    width: 40px; 
    height: 40px;
}

.slide_card .contents{
    padding: 0 32px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--adaptiveGrey900);
}

.slide_card .contents .text{
    padding-top: 16px;
    line-height: 30px;
    font-size: var(--fs_l);
}