@charset "utf-8";

/*───────────────────────────────────────────────────────────
	
	서브 비주얼이 있는 서브페이지용 css입니다.	
    
    HANSANG INTERNATIONAL CORP / ABOUT US
    기업연혁 / HISTORY
    HBT / HBT
    오시는 길 / CONTACT
    문의상담 / INQRUIY
    자주묻는질문 / FAQs

───────────────────────────────────────────────────────────*/

/* 공통 */
:root {
    --font-76: 600 76px/110% 'Inter', 'Noto Sans KR';
    --font-32: 600 32px/140% 'Inter', 'Noto Sans KR';
    --font-28: 600 28px/115% 'Inter', 'Noto Sans KR';
    --font-24: 400 24px/140% 'Inter', 'Noto Sans KR';
}
.sub_vis_wrap { width: 90%; max-width: 1600px; margin:0px auto; position: relative; }
.sub_vis_wrap .sub_vis { width: 100%; height: 500px; margin: 40px auto 0; border-radius: 40px; overflow: hidden; position: relative; }
.sub_vis_wrap .sub_vis.aos-animate { animation: visAni 2000ms ease 0s normal forwards; }
.sub_vis_wrap .sub_vis .sub_vis_img { width: 100%; height: 100%; position: absolute; right:0px; top:0px; }
.sub_vis_wrap .sub_vis img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.sub_vis_wrap .sub_vis_text { margin-top: 55px; display: flex; justify-content: right; font: var(--font-32); color:var(--black); }
.sub_vis_wrap .sub_vis_text > div { max-width: 1076px; }
@keyframes visAni {
    0% { width: 0px; }
    100% { width: 100%; }
}
@media only screen and (max-width:1600px) {
    :root {
        --font-76: 600 64px/110% 'Inter', 'Noto Sans KR';
        --font-32: 600 28px/140% 'Inter', 'Noto Sans KR';
        --font-28: 600 24px/120% 'Inter', 'Noto Sans KR';
        --font-24: 400 20px/140% 'Inter', 'Noto Sans KR';
    }
    .sub_vis_wrap { width: 96%; }
    .sub_vis_wrap .sub_vis { height: 400px; margin-top: 20px; }
    .sub_vis_wrap .sub_vis_text { margin-top: 40px; }
}
@media only screen and (max-width:1400px) {
    :root {
        --font-76: 600 58px/110% 'Inter', 'Noto Sans KR';
        --font-28: 600 20px/120% 'Inter', 'Noto Sans KR';
    }
}
@media only screen and (max-width:1024px) {
    :root {
        --font-76: 600 42px/110% 'Inter', 'Noto Sans KR';
        --font-32: 600 26px/140% 'Inter', 'Noto Sans KR';
        --font-28: 600 19px/130% 'Inter', 'Noto Sans KR';
        --font-24: 400 18px/140% 'Inter', 'Noto Sans KR';
    }
    .sub_vis_wrap .sub_vis { margin-top: 0; height: 360px; border-radius: 30px; }
    .sub_vis_wrap .sub_vis_text { margin-top: 30px; }
}
@media only screen and (max-width:768px) {
    :root {
        --font-76: 600 34px/110% 'Inter', 'Noto Sans KR';
        --font-32: 600 20px/140% 'Inter', 'Noto Sans KR';
        --font-28: 600 17px/150% 'Inter', 'Noto Sans KR';
        --font-24: 400 16px/140% 'Inter', 'Noto Sans KR';
    }
    .sub_vis_wrap .sub_vis { height: 280px; border-radius: 20px; }
    .sub_vis_wrap .sub_vis_text { margin-top: 20px; }
    .sub_vis_wrap .sub_vis.aos-animate { animation-duration: 1.5s; }
}
@media only screen and (max-width:500px) {
    .sub_vis_wrap .sub_vis { height: 220px; border-radius: 16px; }
    .sub_vis_wrap .sub_vis.aos-animate { animation-duration: 1s; }
}


/* ABOUT US */
.abus_01 { padding-top:160px; }
.abus_01 ul { display: grid; grid-template-columns: repeat(2, 1fr); font: var(--font-24); line-height: 160% !important; }
.abus_01 ul:nth-child(1) { border-radius: 30px 30px 0 0 ; overflow: hidden; }
.abus_01 ul:nth-child(2) { border-radius: 0 0 30px 30px; overflow: hidden; }
.abus_01 ul:nth-child(1) li { display: flex; align-items: end; }
.abus_01 ul img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/2; }
.abus_01 ul .li_txt { background:#FAFAFA; padding:40px; position: relative; }
.abus_01 ul .li_txt::before { content: ''; display: block; width: 40px; height: 40px; position: absolute; right:40px; top:40px; background:url('../images/sub/hansang_simbol.png') no-repeat center/contain; filter: brightness(0.5); }
.abus_01 ul:nth-child(2) .li_txt::before { display: none; }


.abus_02 { padding-top:160px; position: relative; }
.abus_02 .abus_img { border-radius: 30px; overflow: hidden; }
.abus_02::before { content: ''; width: 30%; aspect-ratio: 1/1; background:#fffbdb; position: absolute; left:-14%; top:0px; border-radius: 50%; }
.abus_02 .abus_text { display: flex; justify-content: right; margin-top: 55px; font: var(--font-24); }
.abus_02 .abus_text > div { max-width: 992px; }

@media only screen and (max-width:1600px) {
    .aboutus .sub_vis_wrap .sub_vis img { object-position: right; }
}
@media only screen and (max-width:1024px) {
    .abus_01 { padding-top:100px; }
    .abus_01 ul .li_txt { padding: 30px; }
    .abus_01 ul .li_txt::before { width: 30px; height: 30px; right: 30px; top:30px; }

    .abus_02 { padding-top: 100px; }
    .abus_02 .abus_text { margin-top: 40px; }

    .abus_01 ul:nth-child(1) { border-radius: 20px 20px 0 0 ; }
    .abus_01 ul:nth-child(2) { border-radius: 0 0 20px 20px; }
    .abus_02 .abus_img { border-radius: 20px; }
}
@media only screen and (max-width:768px) {
    .abus_01 { padding-top:80px; }
    .abus_01 ul .li_txt { padding: 20px; }
    .abus_01 ul .li_txt::before { display: none; }

    .abus_02 .abus_img { height: 210px; }
    .abus_02 .abus_img img { height: 100%; object-fit: cover; }
}
@media only screen and (max-width:560px) {
    .abus_01 ul { display: flex; flex-wrap:wrap;}
    .abus_01 ul:nth-child(2) { margin-top: 40px; flex-direction: column-reverse; }
    .abus_01 ul img { aspect-ratio: 2/1; }
    .abus_02 .abus_text { margin-top: 20px; }

    .abus_01 ul:nth-child(1) { border-radius: 20px; }
    .abus_01 ul:nth-child(2) { border-radius: 20px; }
}


/* History */
.history_01 { padding: 200px 0 200px; position: relative; color:var(--black); z-index: 1; overflow: hidden; }
.history_01 .swiper-container { width: 1500px; padding: 80px 40px 80px 120px; position: relative; position: absolute; top:-80px; left:340px; overflow: hidden; background: #f9fbff; }
.history_01 ul { display: flex; }
.history_01 li { width: 380px; position: relative; text-align: center; }
.history_01 li:nth-child(1) .his_mark::before { width: 180px; }
.history_01 li:nth-child(1)::before { content: ''; width: 14px; height: 14px; position: absolute; left:0px; top:150px; background:#8db2ea; border-radius: 50%; z-index: 2; transform: translateX(-50%); }

.history_01 .his_year { margin-bottom: 60px; font:var(--font-76); position: relative; z-index: 1; }
.history_01 .his_mark { display: flex; align-items: center; justify-content: space-between; width: 20px; height: 26px; margin:0px auto 42px; position: relative; z-index: 1; }
.history_01 .his_mark span { display: inline-block; width: 1px; height: 100%; background:#8db2ea; }
.history_01 .his_mark span:nth-child(2) { height: 120%; }
.history_01 .his_mark::before { content: ''; width:480px; height:2px; background: #8db2ea; position: absolute; left:0px; top:50%; transform: translate(-100%, -50%); }
.history_01 .his_cont { font:var(--font-24); }

.history_01 .his_goal { width: 380px; position: relative; text-align: center; padding:60px; z-index: 5; background:var(--sub); color:white; }
.history_01 .his_goal .his_mark::before { display: none; }

@media only screen and (max-width:1600px) {
    .history_01 .swiper-container { left: 310px; width: 1220px; }
    .history_01 .his_goal { width: 340px; }
    .history_01 .his_year { margin-bottom: 50px; }
    .history_01 .his_mark { width: 16px; height: 18px; margin-bottom: 38px; }
    .history_01 .his_mark::before { width: 375px; }
    .history_01 li:nth-child(1)::before { top:122px; }
    .history_01 li:nth-child(1) .his_mark::before { width: 140px; }
}
@media only screen and (max-width:1400px) {
    .history_01 li:nth-child(1) .his_mark::before { width: 160px; }
    .history_01 li:nth-child(1)::before { top:116px; }
}
@media only screen and (max-width:1200px) {
    .history_01 .swiper-container { left: 280px; width: 1050px; }
    .history_01 li:nth-child(1) .his_mark::before { width: 130px; }
}
@media only screen and (max-width:1024px) {
    .history_01 { padding:120px 0 40px; }
    .history_01 .his_goal { width: auto; display: grid; grid-template-columns: 140px 28px auto; gap:8px; padding: 30px 20px; align-items: center; }
    .history_01 .his_goal .his_cont { margin-top: 0; }
    .history_01 .his_goal .his_mark { margin: 0; }
    
    .history_01 .swiper-container { position: initial; width: 100%; padding: 50px 20px; margin-top:60px; }
    .history_01 ul { display: block; }
    .history_01 li { width: 100%; display: grid; grid-template-columns: 140px 28px auto; gap:8px; padding-bottom: 50px; }
    .history_01 li::after { content: ''; display: block; height: 100%; width: 1px; border-left: 1px solid #8db2ea; position: absolute; left:153px; top:10px; }
    .history_01 li:nth-last-child(2)::after { display: none; }
    .history_01 li:nth-child(1)::before { display: none; }
    .history_01 li.dummy { display: none; }
    .history_01 .his_year { margin-bottom: 0; }
    .history_01 .his_cont { margin-top: 6px; text-align: left; padding-right: 20px; line-height: 160%; }
    .history_01 .his_mark { width: 12px; height: 12px; margin: 9px 0; border: 3px solid var(--sub); border-radius: 50%; background: white; }
    .history_01 .his_mark span { display: none; }
    .history_01 .his_mark::before { display: none; }
}
@media only screen and (max-width:768px) {
    .history_01 { padding-top: 80px; }
    .history_01::before { width: 300px; }
    .history_01 .swiper-container { padding-top: 40px; margin-top: 60px; }
    .history_01 .his_goal { align-items: center; }
    .history_01 .his_goal .his_mark { margin:0; }
    .history_01 .his_goal,
    .history_01 li { grid-template-columns: 104px 24px auto; gap:0px; }
    .history_01 .his_mark { width: 8px; height: 8px; margin: 9px 0; border: 2px solid var(--sub); }
    .history_01 li::after { left: 107px; }
}
@media only screen and (max-width:500px) {
    .history_01 .his_goal .his_cont { margin-top: 6px; }
    .history_01 .his_goal .his_mark { display: none; }
    .history_01 .his_goal,
    .history_01 li { grid-template-columns: repeat(1, 1fr); padding-left: 34px; padding-bottom: 40px; }
    .history_01 li::after { left: 18px; top:15px; }
    .history_01 .his_year { text-align: left; }
    .history_01 .his_mark { position: absolute; left:15px; margin-top: 15px; }
    .history_01 .swiper-container { margin-top: 40px; padding: 40px 0; }
}

/* inquiry */
.sub_vis_wrap.sub_inquiry .sub_vis { height: 320px; }

    /* 폼메일 */
    .bbs_write { display: grid; grid-template-columns: 1fr 1.6fr; justify-content: space-between; margin-top: 150px; }
    .bbs_write .bbs_h4 { max-width: 400px; font: 600 40px 'Inter', 'Noto Sans KR'; color:var(--black); letter-spacing: 0; }
    .bbs_write li:first-child { margin-top: 20px; }
    .bbs_write li { margin-top: 28px; }
    .bbs_write li .form_item_tit { width: 100%; margin-bottom: 16px; font: 600 20px 'Inter', 'Noto Sans KR'; color:var(--black); letter-spacing: 0; }
    .bbs_write li .required_mark { display: inline-block; margin-right: 6px; color:#ED1B23; }
    .bbs_write input[type='text'],
    .bbs_write input[type='password'],
    .bbs_write input[type='file'],
    .bbs_write textarea { display: block; width: 100%; height: 52px; border:none; border-bottom:1px solid #EEEEEE; font: 400 19px 'Inter', 'Noto Sans KR'; }
    .bbs_write input[type='text']:focus,
    .bbs_write input[type='password']:focus,
    .bbs_write input[type='file']:focus,
    .bbs_write textarea:focus { border:none; background:#F5F5F5; transition: background 0.3s; }
    .bbs_write input[type='file'] { height: auto !important; margin-top: -10px; padding: 10px 0; font-size: 16px; }
    .bbs_write textarea { height: 90px; resize: none; }
    .bbs_write textarea::-webkit-scrollbar { width: 7px; }
	.bbs_write textarea::-webkit-scrollbar-thumb { max-height:80%; background-color: #D9D9D9; }
	.bbs_write textarea::-webkit-scrollbar-track { background: #EEEEEE; }
    .bbs_write .policy_cont .form_item_tit { line-height: 30px; }
    .bbs_write .policy_cont textarea { height: 160px; margin-top: -4px; padding:16px 20px; font-size: 16px; background:#F5F5F5; }
    .bbs_write .policy_cont .btn_sm { font-size: 14px; font-weight: 400; }
    
    #frm .btn_wrap { display: flex; justify-content: center; gap:8px; padding-top: 0; margin-top: 100px; }
    #frm .btn_wrap button { width: 100%; max-width: 424px; background:#D9D9D9; color:var(--black); }
    #frm .btn_submit { display: block; width: 100%; height: 100%; display: flex; height: 82px; align-items: center; justify-content: center; font: 600 20px 'Inter', 'Noto Sans KR'; color:var(--black); }

@media only screen and (max-width:1600px) {
    .sub_vis_wrap.sub_inquiry .sub_vis { height: 300px; }

    .bbs_write { grid-template-columns: 1fr 1.8fr; margin-top: 120px; }
    .bbs_write .bbs_h4 { font-size: 36px; }
    .bbs_write input[type='text'], 
    .bbs_write input[type='password'] { height: 46px; }
    #frm .btn_wrap { margin-top: 80px; }
    #frm .btn_submit { height: 76px; }
}
@media only screen and (max-width:1024px) {
    .sub_vis_wrap.sub_inquiry .sub_vis { height: 280px; }

    .bbs_write { grid-template-columns: 1fr; margin-top: 80px; }
    .bbs_write .bbs_h4 { max-width: none; font-size: 32px; }
    .bbs_write li { margin-top: 24px; padding-left: 4px; }
    .bbs_write li:first-child { margin-top: 36px; }
    .bbs_write li .form_item_tit { margin-bottom: 12px; font-size: 18px; }
    .bbs_write input[type='text'], 
    .bbs_write input[type='password'] { height: 44px; font-size: 17px; }
    .bbs_write input[type='file'] { font-size: 15px; margin-top: 0; }
    .bbs_write textarea { font-size: 17px; }
    .bbs_write .policy_cont textarea { font-size: 15px; margin-top: 4px; }
    #frm .btn_wrap { margin-top: 60px; }
    #frm .btn_submit { height: 64px; font-size: 18px; }
}
@media only screen and (max-width:768px) {
    .sub_vis_wrap.sub_inquiry .sub_vis { height: 220px; }

    .bbs_write { margin-top: 60px; }
    .bbs_write .bbs_h4 { font-size: 26px; }
    .bbs_write li .form_item_tit { font-size: 17px; margin-bottom: 4px; }
    .bbs_write input[type='text'], 
    .bbs_write input[type='password'], 
    .bbs_write textarea { font-size: 16px; }
    .bbs_write input[type='file'] { font-size: 14px; }
    .bbs_write .policy_cont textarea { font-size: 14px; }
    #frm .btn_wrap { margin-top: 40px; }
    #frm .btn_submit { height: 52px; font-size: 17px; }
}
@media only screen and (max-width:500px) {
    .sub_vis_wrap.sub_inquiry .sub_vis { height: 180px; }
    .bbs_write li .required_mark { margin-right: 2px; }
}


/* hbt */
.sub_hbt { color:var(--black) }
.hbt_01 { padding-top: 160px; }
.hbt_01 .hbt_top { display: grid; grid-template-columns: 1fr 0.8fr; gap:30px; align-items: end }
.hbt_01 .hbt_img { height: 445px; overflow: hidden; }
.hbt_01 .hbt_img img { max-width: none; width: 110%; height: 100%; object-fit: cover; object-position: left; }
.hbt_01 .hbt_logo img { width:80%; max-width: 463px; }
.hbt_01 .hbt_logo p { margin-top: 24px; padding-left: 10px; font:var(--font-28); line-height: 150% !important; font-weight: 500 !important; }
.hbt_01 .hbt_text { width: 75%; margin-top: 30px; font:var(--font-32); font-weight: 500 !important; }

.hbt_02 { padding-top: 160px; text-align: center; }

.hbt_03 { padding-top: 160px; padding-bottom: 40px; }
.hbt_03 h4 { margin-bottom: 45px; font:var(--font-32); }
.hbt_03 .hbt_img { width: 40%; height: 420px; float: right; transition: width 1s ease !important; transition-delay: 0.3s; }
.hbt_03 .hbt_img.aos-animate { width: 840px; }
.hbt_03 .hbt_img img { height: 100%; object-fit: cover; }
.hbt_03 .hbt_text { width: calc(100% - 900px); margin-top: 45px; font:var(--font-32); font-weight: 400 !important; }
.hbt_03 .hv-view-more { margin-top: 80px; color:#555555; border-color: #555555; }
.hbt_03 .hv-view-more:hover { color:white; }

@media only screen and (max-width:1400px) {
    .hbt .sub_vis_wrap .sub_vis img { object-position: right; }
    .hbt_01 .hbt_img { height: 345px; }

    .hbt_03 .hbt_img { position: absolute; right: -3%; }
    .hbt_03 .hbt_img.aos-animate { width: 720px; }
    .hbt_03 .hbt_text { width: calc(100% - 740px); }
    .hbt_03 .hv-view-more { margin-top: 60px; }
}
@media only screen and (max-width:1200px) {
    .hbt_01 .hbt_img { height: 275px; }
    .hbt_02 img { width: 60%; }
    .hbt_03 h4 { margin-bottom: 38px; }
    .hbt_03 .hbt_img { margin: 0 0 0 auto; position: relative; right: -3%; float: unset; }
    .hbt_03 .hbt_img.aos-animate { width: 840px; }
    .hbt_03 .hbt_text { width: 100%; margin-top: 38px; }
}
@media only screen and (max-width:1024px) {
    .hbt_01 { padding-top: 100px; }
    .hbt_01 .hbt_img { height: 205px; }
    .hbt_01 .hbt_logo p { margin-top: 14px; padding-left: 5px; }
    .hbt_02 { padding-top: 100px; }
    .hbt_03 { padding-top: 100px; }
    .hbt_03 h4 { margin-bottom: 30px; }
    .hbt_03 .hbt_img { height: 380px; }
    .hbt_03 .hbt_img.aos-animate { width: 760px; }
    .hbt_03 .hbt_text { margin-top: 30px; width: 100%; }
    .hbt_03 .hv-view-more { margin-top: 40px; color:white; border-color: white; }
}
@media only screen and (max-width:768px) {
    .hbt_01 { padding-top: 80px; }
    .hbt_01 .hbt_top { grid-template-columns: 1fr; gap:30px; }
    .hbt_01 .hbt_logo img { width: 240px; }
    .hbt_01 .hbt_text { width: 100%; margin-top: 20px; padding-left: 5px; }
    .hbt_02 { padding-top: 80px; }
    .hbt_02 img { width: 80%; }
    .hbt_03 { padding-top: 80px; }
    .hbt_03 .hbt_img { height: 360px; right: 0; }
    .hbt_03 .hbt_img.aos-animate { width: 100%; }
    .hbt_03 .hv-view-more { margin-top: 30px; }
}
@media only screen and (max-width:640px) {
    .hbt_03 .hbt_img { height: 305px; }
}
@media only screen and (max-width:500px) {
    .hbt_01 .hbt_img { height: 180px; }
    .hbt_01 .hbt_logo img { width: 200px; }
    .hbt_02 { padding-top: 60px; }
    .hbt_03 { padding-top: 60px; }
    .hbt_03 .hbt_img { height: 230px; }
}


/* faq */
.sub_faq { color:var(--black); } 
.sub_faq .board_search { display: none; }
.sub_faq .sub_vis_wrap .sub_vis { height: 320px; }

.faq_box { margin-top: 160px; border-top: 3px solid #008CFF; }
.faq_box .faq_list { padding: 10px 40px 0px; }
.faq_box .faq_q { display: flex; gap:45px; align-items: baseline; padding-top: 20px; margin-top: 40px; border-top: 1px solid #DDDDDD; }
.faq_box .faq_q:nth-child(1) { margin-top: 0; border-top: none; }
.faq_box .faq_q .faq_mark { font: 700 50px/140% 'Noto Sans KR'; }
.faq_box .faq_q .faq_title { font: 700 32px/140% 'Noto Sans KR'; }
.faq_box .faq_a { display: none; margin-top: 40px; margin-left: 102px; padding: 30px 40px 40px; background:#F5F5F5; }
.faq_box .faq_a .faq_mark { font: 500 40px/140% 'Noto Sans KR'; }
.faq_box .faq_a .faq_cont { margin-top: 20px; font: 400 28px/140% 'Noto Sans KR'; }

@media only screen and (max-width:1600px) {
    .sub_faq .sub_vis_wrap .sub_vis { height: 300px; }
    .faq_box .faq_q { gap:35px;  }
    .faq_box .faq_q .faq_mark { font-size: 44px; }
    .faq_box .faq_q .faq_title { font-size: 30px; }
    .faq_box .faq_a { margin-top: 30px; padding: 20px 30px 30px; margin-left: 82px; }
    .faq_box .faq_a .faq_mark { font-size: 30px; }
    .faq_box .faq_a .faq_cont { font-size: 26px; }
}
@media only screen and (max-width:1200px) {
    .faq_box .faq_list { padding: 6px 30px 0px; }
    .faq_box .faq_q { gap:28px; padding-top: 16px; margin-top: 30px; }
    .faq_box .faq_q .faq_mark { font-size: 38px; }
    .faq_box .faq_q .faq_title { font-size: 26px; }
    .faq_box .faq_a { margin-top: 20px; padding: 20px 30px 30px; margin-left: 62px; }
    .faq_box .faq_a .faq_mark { font-size: 30px; }
    .faq_box .faq_a .faq_cont { margin-top: 16px; font-size: 23px; }
}
@media only screen and (max-width:1024px) {
    .sub_faq .sub_vis_wrap .sub_vis { height: 280px; }
    .faq_box { margin-top: 100px; }
    .faq_box .faq_list { padding: 6px 10px 0px; }
    .faq_box .faq_q .faq_mark { font-size: 28px; }
    .faq_box .faq_q .faq_title { font-size: 22px; }
    .faq_box .faq_q { gap:18px; margin-top: 22px; }
    .faq_box .faq_a { margin-left: 42px; }
    .faq_box .faq_a .faq_mark { font-size: 24px; }
    .faq_box .faq_a .faq_cont { margin-top: 12px; font-size: 19px; }
}
@media only screen and (max-width:768px) {
    .sub_faq .sub_vis_wrap .sub_vis { height: 220px; }
    .faq_box { margin-top: 60px; }
    .faq_box .faq_q .faq_mark { font-size: 22px; }
    .faq_box .faq_q .faq_title { font-size: 18px; }
    .faq_box .faq_a .faq_mark { font-size: 20px; }
    .faq_box .faq_a .faq_cont { margin-top: 6px; font-size: 17px; }
}
@media only screen and (max-width:500px) {
    .sub_faq .sub_vis_wrap .sub_vis { height: 180px; }
    .faq_box .faq_list { padding: 2px 0 0; }
    .faq_box .faq_q { gap:10px; padding: 16px 12px 0; }
    .faq_box .faq_a { margin-left: 0px; padding: 12px 18px 16px; }
}

.sub_agree { font:var(--font-24); color:var(--black) }