@media screen and (max-width: 844px) {
 .wrap_body{
     overflow: hidden;
 }


.doc_header {
    height: 64px;
    transition-property: height;
    transition-duration: 0.2s;
    overflow: hidden;
    align-items: start;
}

.doc_header .wrap_header {
    width: 100%;
    height: 32px;
    padding:0px 24px;
    margin-top:16px;

}

.doc_header .wrap_header .logo img{
    max-height: 32px;
    transition-property: height;
    transition-duration: 0.2s;
}


.doc_header.show_nav { 
  height:418px;
  transition-property: height;
  transition-duration: 0.3s;
  box-shadow: 0px 10px 10px rgb(0 0 0 / 10%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.doc_header .wrap_header nav {
    display: flex;
    position: absolute;
    top:80px;
    left: 0px;
    right: 0px;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding:16px 32px 32px 32px;
    z-index: 7777;
}

.doc_header .wrap_header nav a{
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: left;
    padding:0px;
    margin: 0px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


.doc_header .wrap_header nav a:last-child{
    border-bottom: none;
}


.doc_header .wrap_header .area_util .btn_hamburger {
    background: none;
    padding:0px;
    width:32px;
    height: 32px;
    background: url(../images/hamburger-24.svg) no-repeat 50%;
    background-size: 24px;
    display: inline-block;
}

.doc_header.show_nav .wrap_header .area_util .btn_hamburger {
    background: url(../images/x-24.svg) no-repeat 50%;
}

.doc_header.slim {
    height: 56px;
    transition-property: height;
    transition-duration: 0.2s;
}

.doc_header.slim.show_nav {
    height: 394px;
    transition-property: height;
    transition-duration: 0.2s;
}

.doc_header.slim .wrap_header {
   margin-top:12px;
}

.doc_header.slim .wrap_header .logo img{
    height:24px;
    transition-property: height;
    transition-duration: 0.2s;
}


.doc_header.slim .wrap_header nav {
    top:56px;
    transition-property: top, height;
    transition-duration: 0.2s, 0.2s;
}


/* button */
.pagination {padding-bottom:0px;}


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

/*list_board */
.list_board .row {height: auto; padding:16px 8px 16px 8px; text-align: left;}
.list_board .row::before {left: 0px; right:0px;}
.list_board .row .data div {padding:0px;}
.list_board .row .data {align-items: start;justify-content: start;}
.list_board .row .data .thy_1 {font-size: var(--fs_l);}
.list_board .row .data .w_fill {width:85%;}
.list_board .row .data::before {
    content: '';
    background: url(../images/bullet.svg) no-repeat 50%;
    background-size: 8px;
    width: 8px; 
    height: 8px;
    border-radius: 4px;
    display: inline-block;
    margin-top:4px;
    margin-right:16px;
}

/* datagrid */
/* .wrap_datagrid .left {
    width: 168px;
}

.wrap_datagrid .right {
    min-width: calc(100% - 168px);
}


.wrap_datagrid .right .data .item {
    width: 168px;
} */

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

.wrap_datagrid .left {
   width: 168px;
}

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

.wrap_datagrid .mask {
    width: 16px;
    top:0px;
    bottom:0px;
    left: 168px;
    display: block;
    position: absolute;
    background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);

}

.wrap_datagrid .right .datagrid {
    width: fit-content;
}

.wrap_datagrid .right .data .item {
    width: 100px;
} 


.datagrid .row {height: 40px;}

.datagrid .row .data .thy_1 {
    font-size: var(--fs_m);
}

.datagrid .row .data .thy_2 {
    font-size: var(--fs_s);
}

.datagrid .row .data .thy_3 {
    font-size: var(--fs_s);
}

.datagrid .row .data div {padding:0px 16px;}

.datagrid .row .data .border_r::before {display: none;}

.section_header {
    padding-top:0px;
    justify-content: center;

}

.section {
    padding: 64px 24px 32px 24px !important;
}

.section .section_inner {
    width: 100%;
    margin-bottom:0px;
}

#sec_stock #stock_info {
    padding: 0;
    border:none;
}

#sec_stock #stock_corporation {
    flex-direction: column;
}

#sec_stock #stock_corporation div{
    padding:6px 0px;
}

#sec_stock #stock_value{
    flex-direction: column;
}

#sec_stock #stock_value #last_value{
    flex-direction: column;
    align-items: center;
}

#sec_stock #stock_value #last_value .stock_price_changed{
    width: 100%;
    margin-top:48px;
    margin-bottom:32px;
    flex-direction: column;
    border: 1px solid var(--adaptiveGrey200);
}

#sec_stock #stock_value #last_value .stock_price_changed div {
    width: 100%;
    border: none;
    height: 48px;
    justify-content: space-between;
    border-radius: 0px;
}

#sec_stock #stock_value #last_value .stock_price_changed .percent {
    border-top: 1px solid var(--adaptiveGrey200);
}

#sec_stock #stock_chart .tab {
    justify-content: center;
    padding:16px
 }
 

#sec_stock #stock_chart .tab button{
   margin:0px 4px;
   font-size: 12px;
   padding:0px 10px;
   height: 32px;
}

#sec_stock .stock_price_table { width: 100%;}




#sec_keyword {padding:32px 0px;}

#sec_keyword .scroll_control{
    overflow-x: scroll;
    padding-bottom: 40px;
    margin-top: 0px;
    flex-direction: unset;
    align-items: normal;
    flex: none;
}

#keyword_present, #keyword_past {
    align-items: center;
    background: #ECFAFF;
    padding:24px 0px 32px 0px;
    min-width: calc(100vw - 48px);
    border-radius: 24px;
    /* margin:0px 24px; */
}

.balloon div {
    width: 80%;
}

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

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


.balloon.ty2 div {
    width: 100%;
}

.balloon_scroll {
    padding: 0px 16px 0px 8px;
    height: 96px;
}

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

    overflow-x: scroll;
}




#sec_income .wrap_content{
    margin:32px 0px 0px 0px;
}


#sec_income #income_chart_container {
    flex-direction: column;
}


#sec_income .scroll_control{
    overflow-x: scroll;
    padding-bottom: 40px;
    margin-top: 0px;
    flex-direction: unset;
    align-items: normal;
    flex: none;
}

#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;
}


#sec_announcement .wrap_content{
    padding: 0px;
    border:none;
}

#sec_financial_info .tab {
    padding:8px;
    flex-wrap: wrap;
}

#sec_financial_info .tab button{
    flex: 1 1 40%;
    background-color: var(--adaptiveGrey100);
    margin:8px;
    height: 32px;
    font-size: 12px;
}

#sec_financial_info .tab button.selected{

    background-color: var(--adaptiveGrey500);
}


#sec_income #income_chart_container .left_content {
    width: 100%;
}


#sec_income #income_chart_container .right_content {
    width: 100%;
}

#sec_income #income_data{
    flex-direction: column;
    padding:24px 0px 24px 24px;
    float: left;
    width: 65%;
}

#sec_income #income_year{
    flex-direction: column;
    padding:24px 24px 24px 0px;
    float: right;
    width: 35%;
}

#sec_income #income_data .custom_checkbox,
#sec_income #income_year .custom_checkbox
{
    margin:8px 0;
}

#sec_announcement .list_board .row .data .item:nth-child(2),
#sec_announcement .list_board .row .data .item:nth-child(3) {
    display: none;
}

#sec_footage .wrap_content{
    padding: 0px;
    border:none;
}

#sec_footage .list_board .row .data .item:nth-child(2) {
    display: none;
}

#sec_footage .list_board .row .data .item:nth-child(3) {
    max-width:none;
    width: auto;
    padding-left:24px;
}

#sec_footage .list_board .row .data .item:nth-child(3) button{
    width: 32px;
    height: 32px;
    padding: 0px;
    margin-top:-8px;
}

#sec_footage .list_board .row .data .item:nth-child(3) button label{
   display: none;
}

#sec_footage .list_board .row .data .item:nth-child(3) button img{
    margin: 0;
 }
 

#sec_question .wrap_content{
    padding: 0px;
    border: none;

}

#sec_question .section_header .right{
    position: relative;
   

}

#sec_question .list_card.x2 .item {
    flex:100%;
}

#sec_question .list_card .item .data {
    margin:12px 0px;
}

#sec_question .marker {
    height: 24px;
    padding: 0px 12px;
}

#sec_question .list_card .item .data .thy_1 {
    font-size: var(--fs_m);
    margin-top: 16px;
    height: auto;
}

.list_card .item .data .thy_2 {
    font-size: var(--fs_s);
    margin-top: 8px;
    height: auto;
}



#sec_contact h2{
    font-size: var(--fs_xl);
}

#sec_contact .fs_l_b{
    font-size: var(--fs_m);
}

#sec_contact .social_banner,
#sec_contact .social_banner:hover{
   background: none;
   padding: 0px;
   border:none;
}



#sec_contact .social_banner label{
   display: none;
 }

#sec_contact .social_banner img{
   margin:0;
 }


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

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

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

.canvas_income_statement {
    width:180%;
    height: 320px;
    padding-bottom:16px;
}

.canvas_income_statement_y_axis {
    height: 320px;
    padding-bottom:16px;
}

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

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


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

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



.popup_modal {
    padding:88px 0px 0px 0px;
}
 

.wrap_popup {
    width: 100%;
    border-radius: 24px 24px 0px 0px;
    padding: 16px 0px;
    min-height: calc(100vh - 88px);
}

.wrap_popup .header {
    height: 40px;
}

.wrap_popup .header .right{
    padding-right: 16px;
}

.wrap_popup .wrap_content .subject {
    flex-direction: column;
    align-items: start;
    height: auto;
    padding: 16px 0px;
}

.wrap_popup .wrap_content .subject .left h2{
    font-size: 18px;
}

.wrap_popup .wrap_content .subject .right {
   margin-top: 8px;
}

.wrap_popup .list_board .row {
    padding:16px 24px;
}

.wrap_popup .list_board .row .data {
    justify-content: space-between;
}


.wrap_popup .list_board .row .data .w_fill{
    max-width: 75%;
}


.wrap_popup .list_board .row .data .thy_1{
    padding-right: 24px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}



.wrap_popup .list_board .row .data::before{
    display: none ;
}


.popup_modal.write .form .form_row{
    padding: 0px 0px 16px 0px;
    flex-direction: column;
}


.popup_modal.write .form .form_row .item,
.popup_modal.write .form .form_row .custom_input,
.popup_modal.write .form .form_row .custom_input input,
.popup_modal.write .form .form_row .custom_select,
.popup_modal.write .form .form_row .custom_input select{
    width: 100%;
}



.popup_modal.password {
    padding: 0px;
    align-items: flex-end;
}

.popup_modal.password .wrap_popup {
    width: 100%;
    padding: 64px 0px 88px 0px ;
    position: fixed;
    bottom:0px;
    min-height: auto;
}

.scroll_content .scroll_body {
    padding: 8px 16px;
}


.main_copy_writing {
    position: absolute;
    left: 0px;
    right: 0px;
    top:20%;
    text-align: center;
    color: #fff;
    font-size: 24px;
    line-height: 1.6;
    font-weight: 600;
}


.main_slider {
    margin: 0;
    left: 0px;
    right:0px;
    width: 100%;
}

.slide_card {
    height: 160px;
    border-radius: 24px;
}

.slide_card .slide_header {
    height: 64px;
    padding: 0 24px;
}

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


.slide_card .slide_header .marker {
    height: 24px;
    padding: 0 12px;
    font-size: var(--fs_s);
}

.slide_card .contents {
  padding:0 24px;
}




.slide_card .contents .text {
    text-overflow:ellipsis;
    overflow:hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: var(--fs_m);
    line-height: 1.6;
    padding-top: 8px;
}


.slide_card .contents h3 {
    font-size: 16px;
    font-weight: 500;
}


.swiper-pagination {
    margin:40px 0px;
}




/* popup ani */
.popup_modal.password .wrap_popup{
    animation-name: ani_pop_1;
    animation-duration:1s;
    animation-iteration-count:unset;
    /* animation-direction: forwards; */
    animation-fill-mode: forwards;
}

  
@-webkit-keyframes ani_pop_1 {
    0% {
    bottom:-100vh;
    }

    20% {
    bottom:-100vh;
    }

    100% {
    bottom:0px;
    }
}

.popup_modal.read,
.popup_modal.write,
.popup_modal.ask,
.popup_modal.footage {
    animation-name: ani_pop_2;
    animation-duration:1s;
    animation-iteration-count:unset;
    /* animation-direction: forwards; */
    animation-fill-mode: forwards;
}

   
  @-webkit-keyframes ani_pop_2 {
    0% {
      padding-top:100vh;
    }

    20% {
        padding-top:100vh;
    }

    100% {
        padding-top:88px;
    }
  }


/* end mobile */
}