/*
Theme Name: siosi
Description: Theme of siosi
Theme URI: 
Author: WordCracker
Author URI: 
Template: twentytwentyone
Version: 1.2
*/


/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'); */
@import url('assets/fonts/pretendard-1.3.9/dist/web/static/pretendard-dynamic-subset.css');

@font-face {
    font-family: 'RIDIBatang';
    /* src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff'); */
    src: url('assets/fonts/RIDIBatang.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* @font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard.woff') format('woff');
    font-weight: 900;
    font-style: normal;
} */

/* ==================common=================== */
#page a,img{ outline: unset !important; }
#page{ background-color: #fff; }
div{ max-width: 100%; }
img { max-width: 100%; margin: 0 auto; }
ul,li{list-style: none;}
h1,h2,p,html ul,li,div{ margin: 0; padding: 0;}
#main .main-sec-com { max-width: 100%; margin: 0;}
#primary .sub-page { margin: 0; max-width: 100%; }
.material-symbols-outlined{vertical-align: middle;}
.site { width: 100%; height: 100vh; background-color: #f0f0f0;  transform-origin: left center; transition: transform 0.5s ease; }
.page_on { transform: scale(0.84) translateX(-85vw) translateY(0) translateZ(0); overflow: hidden; }
.mb_cont{display: none;}
.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { color: #000 !important; text-decoration: none; background-color: transparent !important; }
#page #kboard-contact-form-editor .kboard-attr-row .attr-name{ word-break: keep-all; line-height: 1.5; }
/* ==================header=================== */
#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 33; transition: top 0.4s; }
#header .header-wrap{ max-width: 1650px; margin: 0 auto; }
#header #logo img { max-width: 68px; }
#header.on{ -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.og_menu { display: none; position: fixed; top: 5%; z-index: 999; width: 100%; }
.mobile-menu { width: 100%; height: 100vh; background-color: #111; color: #fff; position: absolute; top: 0; right: 0; transition: right 0.4s; z-index: -1; }
.mobile-menu-on{ right: 0; width: 100%; height: 100vh; }
.mobile_close_btn { position: absolute; right: 30px; top: 30px; }
.mobile_close_btn a span{ font-size: 40px; }
.mobile_menu_list { position: absolute; top: 50%; right: 50%; transform: translate(80%, -50%); }
.mobile_menu_list ul li{ padding-bottom: 28px; }
.mobile_menu_list ul li a{ font-size: 34px; }
.mb_menu { display: none; }
/* ==================main=================== */
main#main { padding: 0; }
.main-sec1{background-color: #fff;  }
.main-sec1 h1{ font-family: 'Pretendard'; font-weight: bold; line-height: 1.5;  letter-spacing: -1px; color: #222; margin: 0 0 37px; word-break: keep-all;}
.main-sec1 h1 span{ display: inline-block; color: #588bff; }
#main .main-sec1 p{font-family: 'Pretendard'; font-weight: 400;  line-height: 1.5;  letter-spacing: -1px; color: #444; word-break:keep-all; }
.main-sec1 p span{display: block;}

/* ==================sub_page_common=================== */
#main .sub_title { max-width: none; margin: 0; padding-top: 100px;}
.sub_title .sub-sec1{background-color: #588bff;}
.sub_title .sub-sec1 .sub-sec1-wrap{ max-width: 940px; margin: 0 auto; }
.sub_title .sub-sec1 h1{font-family: 'Pretendard'; font-weight: bold; line-height: 1.5; color: #fff; text-align: left; word-break: keep-all;}

#main .sub_title2 { max-width: none; margin: 0; }
.sub_title2 .sub-sec1{background-color: #588bff;}
.sub_title2 .sub-sec1 .sub-sec1-wrap{ max-width: 940px; margin: 0 auto; }
.sub_title2 .sub-sec1 h1{font-family: 'Pretendard'; font-weight: bold; line-height: 1.5; color: #fff; text-align: left; word-break: keep-all;}
.sub-page .sub-sec1 .sub-sec1-wrap{ max-width: 940px; margin: 0 auto; }

/* ==================about=================== */
.about{ background-color: #fff; }
.about .sub-sec1 .sub-sec1-wrap ul li:last-child{ padding-bottom: 0; }
.about .sub-sec1 .sub-sec1-wrap ul li strong{ display: block; font-family: 'Pretendard'; font-weight: bold; line-height: 1.5; }
.about .sub-sec1 .sub-sec1-wrap ul li p{ font-family: 'Pretendard';  line-height: 2; word-break: keep-all; }
.about .sub-sec1 .sub-sec1-wrap .about_link_btn { font-family: 'Pretendard'; border: 1px solid #000; padding: 20px 50px;}

/* ==================service=================== */
.service{ background-color: #fff; }
.service .sub-sec1 .sub-sec1-wrap ul li:last-child{ padding-bottom: 0; }
.service .sub-sec1 .sub-sec1-wrap ul li div{ border-bottom: 1px solid #ddd; padding-bottom: 110px; }
.service .sub-sec1 .sub-sec1-wrap ul li:last-child div{ border-bottom: 0; padding-bottom: 0;}
.service .sub-sec1 .sub-sec1-wrap ul li strong{ display: block; font-family: 'Pretendard'; font-weight: bold; line-height: 1.5; word-break: keep-all;}
.service .sub-sec1 .sub-sec1-wrap ul li p{ font-family: 'Pretendard';  line-height: 2; letter-spacing: -.5px; word-break: keep-all; }

/* ==================joinus=================== */
.joinus{ background-color: #fff; }
.joinus .sub-sec1 .sub-sec1-wrap ul li:last-child{ padding-bottom: 0; }
.joinus .sub-sec1 .sub-sec1-wrap ul li strong{ display: block; font-family: 'Pretendard'; font-weight: bold; line-height: 1.5; }
.joinus .sub-sec1 .sub-sec1-wrap ul li p{ font-family: 'Pretendard';  line-height: 2; word-break: keep-all; }
.joinus .sub-sec1 .sub-sec1-wrap .about_link_btn { border: 1px solid #000; padding: 20px 50px;}

.joinus .sub-sec2{ background-color: #fff; }
.joinus .sub-sec2-wrap{ max-width: 940px; }
.joinus .sub-sec2 ul li {border-bottom: 1px solid #eee;} 
.joinus .sub-sec2 ul li .joinus-board-list-items strong{font-family: 'Pretendard'; font-weight: bold;  line-height: 34px; color: #222; display: block; } 
.joinus .sub-sec2 ul li .joinus-board-list-items p{font-family: 'Pretendard';   line-height: 1.5; color: #666; } 
.joinus .sub-sec2 .join_check span{ font-family: 'Pretendard'; font-weight: 600; padding: 7px 15px; display: inline-block;} 
.joinus .sub-sec2 ul li .joinus-board-list-items a{display: block; margin: 35px 0; font-family: 'Pretendard'; line-height: 1.5; color: #444; text-decoration: none;  font-weight: 400; text-align: right;}

/* ==================contact=================== */
.contact .sub-sec1 p{font-family: 'Pretendard';  line-height: 28px; color: #666; word-break: keep-all;} 
.contact .sub-sec2{background-color: #fff;}
.contact .sub-sec2-wrap{ max-width: 940px; }

.contact .sub-sec2 ul li {border-bottom: 1px solid #ddd;} 
.contact .sub-sec2 ul li .board-contact-items strong{font-family: 'Pretendard'; font-weight: bold;   line-height: 1.5; color: #222; display: block; margin-bottom: 35px;} 
.contact .sub-sec2 ul li .board-contact-items p{font-family: 'Pretendard';   line-height: 1.5; color: #666; word-break: keep-all; } 
.contact .sub-sec2 ul li .board-contact-items a{display: block; margin: 35px 0; font-family: 'Pretendard';   line-height: 1.5; color: #444; text-decoration: none;  font-weight: 700; text-align: right;}

/* ==================footer=================== */
footer#colophon{background-color: #fff; margin: 0; padding: 0; max-width: 100%; border-top: 1px solid #ddd;}
footer img{ max-width: 68px; margin: 0; }
footer ul li{ font-family:'Pretendard'; color: #222;}
footer ul li p{ display: inline-block;}
footer span{ font-family:'Pretendard'; color: #222; display: block; }

/* ==================board=================== */
.board_write .sub-sec1-wrap{ max-width: 760px; margin: 0 auto; }
.board_write{ background-color: #fff; }
#kboard-default-document .kboard-document-wrap .kboard-title h1{ font-size: 20px; border-bottom: 2px solid #000; color: #000; }
.kboard-document-wrap .content-view ul li{ border: 0; }
#kboard-default-document .kboard-document-wrap .kboard-content .content-view { padding: 60px 22px; }
#kboard-contact-form-editor .kboard-form .ct_bt{ border:0; border-bottom: 1px solid rgba(0,0,0,.15); }
#kboard-contact-form-editor input[type=text],
#kboard-contact-form-editor select,
#kboard-contact-form-editor textarea{ outline: unset; }
.filePreview img{ width: 100%; height: 100%; object-fit: contain; }
.file-box { display: inline-block; border: 1px solid #e9e9e9; padding: 0 10px; margin: 0; }
.file-box span{ line-height: inherit; vertical-align: middle; }
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file1,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file2,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file3,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file4,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file5  {
 width: auto;
 margin: 0 1rem 0 0;
}
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file2,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file3,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file4,
#kboard-contact-form-editor .kboard-attr-row.kboard-attr-file.meta-key-file5  {
 display: none;
}
.cnf_btn{ background-color:#588bff ; cursor: pointer; }
.cnf_btn span{ font-family:'Pretendard'; font-weight: 600; }
.board_write #kboard-contact-form-editor .editor-textarea{ height: 350px; }
#kboard-contact-form-editor .kboard-control button.kboard-contact-form-button-large,
#kboard-contact-form-editor .kboard-control button:hover
{ background-color: #588bff !important; color: #fff !important; border-radius: 0; padding: 0px 100px; line-height: unset; font-size: 16px; font-family: 'Pretendard'; font-weight: 600; }
/* ==================modal=================== */
#modal-bg { width: 100%; max-width: 100%; height: 100vh; margin: 0; padding: 0; }
.modal_close_btn{ text-align: right; }
.modal_close_btn span{ font-size: 30px; }
.modal_cnt span{ font-size: 200px; color: #588bff; }
.modal_cnt { text-align: center; padding: 50px 0; font-family:'Pretendard'; }
.modal_cnt strong{ font-size: 35px; margin: 20px 0; display: block; color: #588bff;}
.modal_cnt p{ font-size: 18px; word-break: keep-all;}
.modal-bg-wrap{ background: rgba(255,255,255,.6) }

@media (max-width: 1750px) and (min-width: 769px) {
  /* ==================header=================== */
  #header .header-wrap {  padding: 0 1rem; }
  
  /* ==================sub-title=================== */
  .sub_title .sub-sec1 .sub-sec1-wrap { padding-left: 2rem; padding-right: 2rem; }
  /* ==================about=================== */
  .about .sub-sec1-wrap{ padding: 0 2rem; }
  /* ==================service=================== */
  .service .sub-sec1-wrap{ padding: 0 2rem; }
  /* ==================joinus=================== */
  .joinus .sub-sec1-wrap{ padding: 0 2rem; }
  .sub_title2 .sub-sec1 .sub-sec1-wrap { padding-left: 2rem; padding-right: 2rem; }
  .joinus .sub-sec2-wrap{ padding-left: 2rem; padding-right: 2rem; }
  .joinus_write .sub-sec1-wrap{ padding-left: 2rem; padding-right: 2rem; }
  /* ==================contact=================== */
  .contact .sub-sec2-wrap{ padding: 100px 40px; }
  /* ==================footer=================== */
  footer#colophon .foot-wrap { padding: 100px 30px; }
  footer#colophon ul li{ font-size: 13px; }
  }

@media (max-width: 768px){
   /* ==================common=================== */
  .pc_menu{ display: none; }
  .mb_menu { display: block; }
  .mb_cont{display: block;}
  .pc_cont{display: none;}
  /* ==================header=================== */
  #header .header-wrap { padding-top: 100px; position: relative; }
  #header .header_box{ margin: 0; position: absolute; width: 100%; left: 0; top: 50%; transform: translate(0, -50%); padding: 0 1.5rem; }
  #mb_menu_btn{ display: block; }
  #mb_menu_btn span{ font-size: 30px; }
  /* ==================main=================== */
  .main-sec1 .main-sec1-wrap { padding-left: 2rem; padding-right: 2rem; }
  /* ==================sub_title=================== */
  .sub_title .sub-sec1 .sub-sec1-wrap,
  .sub-page .sub-sec1 .sub-sec1-wrap,
  .sub_title2 .sub-sec1 .sub-sec1-wrap{ padding-left: 1.5rem; padding-right: 1.5rem; }
  /* ==================joinus=================== */
  .joinus .sub-sec2-wrap{ padding-left: 2rem; padding-right: 2rem; }
  .joinus .sub-sec2 ul li .mb_cont{ text-align: right; }
  .joinus .sub-sec2 ul li .mb_cont a{ display: inline-block; font-size: 20px; margin-bottom: 70px;}
  /* ==================contact=================== */
  .contact .sub-sec2-wrap{ padding-left: 2rem; padding-right: 2rem; }
  .contact .sub-sec2 ul li .mb_cont{ text-align: right; }
  .contact .sub-sec2 ul li .mb_cont a{ display: inline-block; font-size: 18px; margin-bottom: 40px;}
  /* ==================footer=================== */
  footer#colophon .foot-wrap { padding: 0; }
  footer#colophon .foot-wrap .ac_foot button{ background-color: transparent; outline: unset; border: 0; }
  footer#colophon .foot-wrap .ac_foot strong{ font-family:'Pretendard'; color: #999; font-size: 13px; font-weight: 400; }
  footer#colophon .foot-wrap .ac_foot strong span{ color: #999; font-size: 25px; transition: transform 0.3s; }
  footer#colophon .foot-wrap .ac_foot strong span.on{ transform: rotate(-180deg); }
  #toggleContent { display: none; padding: 0 2rem; }
}



@media (max-width: 480px) {
  #modal-bg .modal-bg-wrap{ width: 90%; }
  .modal_cnt span { font-size: 150px; }
  .modal_cnt strong { font-size: 30px; }
  .modal_cnt p { font-size: 12px; }
}

@media (max-width: 480px) and (min-width: 360px) {
  /* 480px 이하 360px 이상" 경우에만 적용되는 스타일 */

 
  /* ==================main=================== */
  .main-sec1 .main-sec1-wrap { padding: 230px 30px 170px; }
  .main-sec1 h1{ font-size: 33px; margin-bottom: 30px;}
  #main .main-sec1 p{ font-size: 18px; }
 

  /* ==================sub_page_common=================== */
  .sub_title .sub-sec1 .sub-sec1-wrap{ padding-top: 80px; padding-bottom: 80px; }
  .sub_title .sub-sec1 h1{ font-size: 21px; }
  .sub-page .sub-sec1{ padding-top: 70px; padding-bottom: 70px; }

  /* ==================about=================== */
  .about .sub-sec1 .sub-sec1-wrap ul li strong{ font-size: 20px; margin-bottom: 30px; }
  .about .sub-sec1 .sub-sec1-wrap ul li p{ font-size: 14px; font-weight: 500; }
  .about .sub-sec1 .sub-sec1-wrap ul li{ padding-bottom: 60px; }
  .about .sub-sec1 .sub-sec1-wrap .about_link_btn{ font-size: 14px; padding: 12px 35px; font-weight: 600; }
  /* ==================service=================== */

  .service .sub-sec1 .sub-sec1-wrap ul li strong { font-size: 20px; margin-bottom: 30px; }
  .service .sub-sec1 .sub-sec1-wrap ul li p{ font-size: 14px; font-weight: 500; }
  .service .sub-sec1 .sub-sec1-wrap ul li{ padding-bottom: 60px; }
  .service .sub-sec1 .sub-sec1-wrap ul li div{ padding-bottom: 60px; }

  /* ==================joinus=================== */
  .sub_title2 .sub-sec1 h1{ font-size: 21px; }
  .sub_title2 .sub-sec1 .sub-sec1-wrap { padding-top: 70px; padding-bottom: 70px; }
  .joinus .sub-sec1 .sub-sec1-wrap ul li strong{ font-size: 20px; margin-bottom: 30px; }
  .joinus .sub-sec1 .sub-sec1-wrap ul li p{ font-size: 14px; font-weight: 500; line-height: 1.5; }
  .joinus .sub-sec2-wrap{ padding-top: 70px; padding-bottom: 70px; }
  .kboard-default-cut-strings{ font-size: 21px; font-weight: 500;}
  .joinus .sub-sec2 ul li .joinus-board-list-items p{ font-size: 16px }
  .joinus .sub-sec2 ul li .mb_cont a { font-size: 16px; margin-bottom: 40px; }
  .joinus .sub-sec2 ul li .joinus-board-list-items{ padding-bottom: 20px; }
  /* ==================contact=================== */
  .contact .sub-sec2-wrap{ padding: 80px 40px; }
  .contact .sub-sec2 ul li .board-contact-items{ padding-bottom: 15px; }
  .contact .sub-sec2 ul li .board-contact-items strong{ font-size: 21px; font-weight: 500; margin-bottom: 20px; }
  .contact .sub-sec2 .join_check span{ font-size: 13px; font-weight: 400;}
  .contact .sub-sec2 ul li .board-contact-items p{ font-size: 15px; }
  .contact .sub-sec2 ul li .mb_cont{ text-align: right; }
  .contact .sub-sec2 ul li .mb_cont a{ display: inline-block; font-size: 14px; margin-bottom: 40px;}

   /* ==================board=================== */
  #kboard-default-document .cnf_btn{ padding: 10px 30px; font-size: 12px; }
  .board_write .sub-sec1-wrap {padding: 0px 26px; }
  #kboard-default-document .kboard-document-wrap .kboard-content .content-view { padding: 10px 0; }
  #kboard-default-document .cnf_btn_box{ margin-top: 50px; }
}

/* =============갤럭시폴드맞춤================== */
@media (max-width: 359px)  {
  /* 359px 이하 경우에만 적용되는 스타일 */

  /* ==================main=================== */
  .main-sec1 .main-sec1-wrap { padding: 180px 22px 140px; }
  .main-sec1 h1{ font-size: 26px; margin-bottom: 60px;}
  #main .main-sec1 p{ font-size: 14px; }

  /* ==================sub_page_common=================== */
  .sub_title .sub-sec1 h1{font-size: 23px; }
  .sub_title2 .sub-sec1 h1{font-size: 23px; }
  .sub_title .sub-sec1 p{font-size: 12px;}

  /* ==================board=================== */
  #kboard-default-document .cnf_btn{ padding: 10px 30px; font-size: 12px; }
  #kboard-default-document .kboard-document-wrap .kboard-content .content-view { padding: 20px 12px; }
  .board_write .sub-sec1-wrap {padding: 60px 16px; }
  #kboard-contact-form-editor .kboard-control button.kboard-contact-form-button-large, #kboard-contact-form-editor .kboard-control button:hover { padding: 0px 90px; }
}