@charset "utf-8";
:root{
	--main-color : #C80F19;
}

#brand, #safety {font-family: 'Pretendard-Regular', sans-serif; word-break:keep-all;}
#brand .section_title, #safety .section_title { color: #222; font-size: 50px; font-family: 'Pretendard-Bold'; margin-bottom: 80px; text-align: center; }

/* brand story */

.brand_story .inner, .safety_policy .inner  { max-width: 1280px; margin: 0 auto; margin-bottom: 100px;}
.brand_story .inner_title { color: #222; font-size: 40px; font-family: 'Pretendard-Bold'; margin-bottom: 50px; }
.story_wrap .main_txt { padding: 30px 0; border:1px dashed #CCCCCC; border-radius:10px; font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; text-align: center; color: #222; }
.story_wrap .main_txt > b { color: var(--main-color); }
.dashed_line { max-width:660px; margin:0 auto; text-align: center; }
.dashed_line > span { display: inline-block; }
.dashed_line > span:nth-child(1) { width: 1px; height: 20px; border-left:1px dashed #CCCCCC; }
.dashed_line > span:nth-child(2) { display: flex; justify-content:space-between; width: 100%; height: 20px; border-top:1px dashed #CCCCCC; border-left:1px dashed #CCCCCC; border-right:1px dashed #CCCCCC; }
.dashed_line > .row > span { width: 1px; height: 20px; border-left:1px dashed #CCCCCC; }
.story_area { display: flex; flex-wrap:wrap; gap:40px; }
.story_area .box { width: calc(50% - 20px); padding: 25px; border-radius:10px; background-color: #F9F9F9; }
.story_area .box .img_box { margin-bottom: 30px; padding: 33px 0; border-radius:10px; background-color: #fff; text-align: center; }
.story_area .box .img_box img { height: 65px; }
.story_area .box .txt { font-size: 19px; line-height: 1.65; letter-spacing: -0.02em; color: #555; text-align: center; }
.story_area .box .txt > b { font-weight: 600; color: #333; }
.story_wrap .sub_txt { margin-top: 25px; border-radius:10px; padding: 28px 20px; background-color: var(--main-color); text-align: center; }
.story_wrap .sub_txt > .arrow { display: inline-block; width: 23px; height: 18px; margin-right: 20px; background: url("/img/sub/company/brand_arrow.svg") no-repeat center center/contain; vertical-align: text-top; }
.story_wrap .sub_txt > span { font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -0.02em; color: #fff; }
.color_wrap { padding: 100px 0; margin-bottom: 100px; background-color: #F9F9F9; }
.color_wrap .inner { margin-bottom: 0; }
.color_area { display: flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:40px; }
.color_area .left { width: 45.35%; max-width:580px; }
.color_area .img_box { width: 100%; aspect-ratio:1.137; border-radius:10px; background: url("/img/sub/company/brand_color.jpg") no-repeat center center/cover; }
.color_area .right { width: 48.85%; max-width:625px; }
.color_area .info_list { padding-bottom: 50px; border-bottom:1px solid #DDDDDD; }
.color_area .info_list > li { display: flex; }
.color_area .info_list > li + li { margin-top: 20px; }
.color_area .info_list .label { position: relative;  width: 105px; padding-left: 14px; font-size: 20px; font-weight: 600;line-height: 1.3; letter-spacing: -0.02em; color: #222; }
.color_area .info_list .label::before { content:""; position: absolute; left: 0; top:50%; margin-top: -2px; display: block; width: 4px; height: 4px; border-radius:50%; background-color: var(--main-color); }
.color_area .info_list .txt { width: calc(100% - 105px); font-family: 'Pretendard-Light', sans-serif; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; color: #555; }
.color_area .txt_box { padding-top: 50px; }
.color_area .txt_box .title { margin-bottom: 30px;  font-size: 24px; font-weight: 600; line-height: 1.65; letter-spacing: -0.02em; color: #222; }
.color_area .txt_box .txt { font-size: 19px; line-height: 1.6; letter-spacing: -0.02em; color: #555; }
.logo_area { display: flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:40px; }
.logo_area .left { width: 45.35%; max-width:580px; }
.logo_area .img_box { position: relative; display: flex; justify-content:center; align-items:center; width: 100%; aspect-ratio:1.137; border:1px solid #DDDDDD; border-radius:10px; }
.logo_area .right { width: 48.85%; max-width:625px; }
.logo_area .right > *+* { margin-top: 70px; }
.logo_area .right dl { display: flex; column-gap:20px; margin-bottom: 30px; }
.logo_area .right dt { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: var(--main-color); }
.logo_area .right dd { position: relative; font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; color: #222; }
.logo_area .right dd::before { content: ""; position: absolute; left: -11px; top: 50%; display: block; width: 1px; height: 15px; background-color: #CCCCCC; transform: translateY(-50%); }
.logo_area .txt_box .txt { font-size: 19px; line-height: 1.6; letter-spacing: -0.02em; color: #555; }
.calligraphy_wrap { padding: 100px 0; background-color: #F9F9F9; }
.calligraphy_wrap .inner { margin-bottom: 0; }
.calligraphy_area { padding: 90px 30px; border-radius:10px; background-color: #fff; text-align: center; }
.calligraphy_area img { max-width:100%; }
.calligraphy_area .txt_box { margin-top: 60px; }
.calligraphy_area .main_txt { font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -0.02em; }
.calligraphy_area .main_txt > b { font-weight: 600; color: var(--main-color); }
.calligraphy_area .sub_txt { margin-top: 40px; font-size: 19px; line-height: 1.6; letter-spacing: -0.02em; color: #555; }
.calligraphy_area .sub_txt > br { display:none; }

/* safety policy */
.policy_wrap { padding: 90px 100px 95px; border:1px solid #DDDDDD; border-radius:10px; }
.policy_list > li {display: flex; font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; color: #555; }
.policy_list > li + li { margin-top: 20px; }
.policy_top .policy_list > li::before { content:""; display: block; min-width: 24px; height: 24px; margin-right: 20px; background: url("/img/sub/company/icon_policy_check.svg") no-repeat center center/contain; }
.policy_basic { margin-top: 85px; }
.policy_basic .title { font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -0.02em;  color: var(--main-color);}
.policy_basic .policy_list { margin-top: 20px; }
.policy_basic .policy_list > li::before { content:"하나,"; margin-right: 12px; font-weight: 600; color: #333; }
.policy_bottom { display:flex; justify-content:space-between; align-items:flex-end; margin-top: 85px; }
.sign_box { display: flex; align-items:center; column-gap:10px; }
.sign_box span, .sign_box b { font-size: 19px; line-height: 1.3; letter-spacing: -0.02em; color: #333; }
.sign_box b { font-weight: 600; }
.policy_bottom .date { font-family: 'Pretendard-Light', sans-serif; font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; color: #666; }

@media screen and (max-width:1800px){
    .brand_story .inner, .safety_policy .inner {width: 90%;}
}

@media screen and (max-width: 1300px) {
	.story_area .box .txt > br, .color_area .txt_box .txt > br, .logo_area .txt_box .txt > br { display: none; }

	.dashed_line {max-width:clamp(200px,50.77vw,660px);}
}
@media screen and (max-width: 1100px) {
    .brand_story .inner_title { font-size: 30px; }
	.policy_wrap { padding: 50px 40px; }
}

@media screen and (max-width: 1024px) {
	.color_area .left, .logo_area .left { width: 100%; max-width: 360px; margin: 0 auto; }
	.color_area .right, .logo_area .right { width: 100%; max-width: initial; }
	.logo_area .img_box img { width: 200px; }
}

@media screen and (max-width: 768px) {
	.brand_story .inner_title { font-size: 24px; }

	.story_wrap .main_txt { padding: 30px 15px; font-size: 18px; }
	.dashed_line { display:none; }
	.story_area { gap:25px;	margin-top: 40px; }
	.story_area .box { width: 100%; }
	.story_area .box .txt { font-size: 16px; }
	.story_wrap .sub_txt > .arrow { width: 20px; margin-right: 6px; }
	.story_wrap .sub_txt > span { font-size: 16px; }
	.color_area .info_list .label,.color_area .info_list .txt { font-size: 18px; }
	.color_area .txt_box .title { font-size: 20px; }
	.color_area .txt_box .txt { font-size: 16px; }
	.logo_area .right > *+* { margin-top: 40px; }
	.logo_area .right dl { margin-bottom: 15px; }
	.logo_area .right dt, .logo_area .right dd { font-size: 20px; }
	.logo_area .txt_box .txt { font-size: 16px; }
	.calligraphy_area { padding: 60px 30px; }
	.calligraphy_area .main_txt { font-size: 20px; }
	.calligraphy_area .sub_txt { font-size: 16px; }
	.calligraphy_area .sub_txt > br { display: inline; }

	.policy_wrap { padding: 50px 20px; }
	.policy_list > li { font-size: 16px; }
	.policy_list > li + li { margin-top: 14px; }
	.policy_top .policy_list > li::before { min-width:20px; height: 20px; margin-right: 10px; }
	.policy_basic { margin-top: 60px; }
	.policy_basic .title { font-size: 20px; }
	.policy_bottom { flex-direction:column; row-gap:10px; }
	.sign_box span, .sign_box b { font-size: 16px; }
	.sign_box img { width: 50px; }
	.policy_bottom .date { font-size: 14px; }
}

@media screen and (max-width: 500px) {
	.color_area .left, .logo_area .left { max-width: 100%; }
}