@charset "utf-8";
/*
	HANWOL — English site
	Layered on top of ../../css/common.css.
	Everything here either (a) re-types the site for Latin script, or
	(b) replaces a Korean-text PNG with a live HTML/CSS component.
*/

/* ---------------------------------------------------------------- TYPE */
html,body{font-family:'Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif;}
body{word-break:normal;-webkit-word-break:normal;-moz-word-break:normal;-o-word-break:normal;overflow-wrap:break-word;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,option{font-family:'Noto Sans','Helvetica Neue',Helvetica,Arial,sans-serif;}

/* The KO / EN switch itself is styled in ../../css/common.css so that both
   language versions of the header stay identical. */

/* ---------------------------------------------------------------- MAIN */
div#main p{font-size:30px;}
@media screen and (max-width: 1250px){
	div#main p{font-size:22px;}
}
@media screen and (max-width: 768px){
	div#main p{font-size:14px;}
}
@media screen and (max-width: 576px){
	div#main p{font-size:12px;}
}

/* ================================================================ COMPANY 01 : Vision & Mission
   Replaces company_bg1.png / company_bg2.png (Korean text was baked into the artwork). */
div.company01_con{align-items:center;justify-content:center;margin-top:3.5%;}
div.subpage_con_tit_box{flex:0 0 auto;}

div.vmv_box{
	--d:212px;      /* diamond side, before rotation */
	--step:235px;   /* vertical distance between diamonds (unscaled) */
	--sy:0.433;     /* vertical squash, to match the original flattened rhombus */
	--isy:2.3095;   /* 1 / --sy */
	width:calc(var(--d) * 1.4143);
	height:calc((var(--d) * 1.4143 + var(--step) * 2) * var(--sy));
	position:relative;
	flex:0 0 auto;
}
/* common.css sizes `.company01_con .img_box` at a fixed 478px — outrank it */
div.company01_con div.img_box.vmv_box,
div.vision_top div.img_box.vmv_box{width:calc(var(--d) * 1.4143);}
ul.vmv_stack{
	position:relative;
	width:calc(var(--d) * 1.4143);
	height:calc(var(--d) * 1.4143 + var(--step) * 2);
	transform:scaleY(var(--sy));
	-webkit-transform:scaleY(var(--sy));
	transform-origin:top center;
	-webkit-transform-origin:top center;
}
li.vmv_item{
	position:absolute;
	left:50%;
	width:var(--d);
	height:var(--d);
	margin-left:calc(var(--d) / -2);
	border-radius:calc(var(--d) * 0.235);
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
li.vmv_vision {top:calc(var(--d) * 0.2071);                     z-index:3;background:linear-gradient(135deg,#6aaef9 0%,#3b86ee 100%);}
li.vmv_mission{top:calc(var(--d) * 0.2071 + var(--step));       z-index:2;background:linear-gradient(135deg,#4ec79c 0%,#2fa87d 100%);}
li.vmv_value  {top:calc(var(--d) * 0.2071 + var(--step) * 2);   z-index:1;background:linear-gradient(135deg,#fbaf46 0%,#f2851a 100%);}
span.vmv_label{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:rotate(-45deg) scaleY(var(--isy));
	-webkit-transform:rotate(-45deg) scaleY(var(--isy));
	color:#fff;
	font-size:24px;
	font-weight:700;
	letter-spacing:0.5px;
}

ul.company01_desc{padding:0 0 0 60px;margin-bottom:0;flex:0 1 auto;max-width:640px;}
ul.company01_desc li{margin-top:30px;font-size:17px;line-height:1.55;}
ul.company01_desc li:first-child{margin-top:0;}
ul.company01_desc li:last-child{margin-top:30px;}

@media screen and (max-width: 1600px){
	div.vmv_box{--d:180px;--step:200px;}
	span.vmv_label{font-size:20px;}
	ul.company01_desc{padding-left:44px;}
	ul.company01_desc li{font-size:15px;margin-top:24px;}
	ul.company01_desc li:last-child{margin-top:24px;}
}
@media screen and (max-width: 1250px){
	div.vmv_box{--d:150px;--step:166px;}
	span.vmv_label{font-size:16px;}
	ul.company01_desc{padding-left:30px;}
	ul.company01_desc li{font-size:13px;margin-top:18px;line-height:1.5;}
	ul.company01_desc li:last-child{margin-top:18px;}
}

/* ================================================================ COMPANY 02 : History
   Replaces history_line.png / history_top.png / history_bottom.png. */
/* let the strip fill whatever height is left under the heading rather than
   guessing at it — the section is a fixed 100vh, so a flex column is exact */
div.inner.subpage_company02{display:flex;flex-direction:column;}
div.subpage_company02 div.subpage_tit_box{flex:0 0 auto;}
div.subpage_company02 div.company02_con{
	flex:1 1 auto;
	min-height:0;
	margin-top:56px;
	padding:0 0 40px 140px;
	overflow:visible;
}

/* the tallest year group needs ~255px either side of the axis; below that the
   type steps down (see the max-height query) */
div.timeline{
	position:relative;
	height:100%;
	overflow-x:auto;
	overflow-y:hidden;
	padding-bottom:16px;
	-webkit-overflow-scrolling:touch;
}
/* the gradient axis is painted as the list's own background so it always
   spans the full scroll width, whatever the column width happens to be */
ul.timeline_list{
	position:relative;
	display:flex;
	width:2358px;
	height:100%;
	background:linear-gradient(90deg,#5c9df5 0%,#3fc2d0 18%,#43cf9a 38%,#5ecb85 55%,#8ac96b 70%,#d5cf45 85%,#f79b30 100%) no-repeat left center;
	background-size:100% 4px;
}
li.tl_col{position:relative;flex:0 0 262px;width:262px;height:100%;}
li.tl_col:before{
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:17px;
	height:17px;
	margin-top:-8px;
	border-radius:50%;
	background:#fff;
	border:2px solid #59a0f2;
	z-index:2;
}
div.tl_group{position:absolute;left:0;width:100%;padding:0 22px 0 8px;}
li.tl_up   div.tl_group{bottom:50%;margin-bottom:26px;}
li.tl_down div.tl_group{top:50%;margin-top:26px;}
div.tl_group dl{border-left:1px solid #9cc2f2;padding:0 0 0 16px;}
div.tl_group dl + dl{padding-top:18px;}
div.tl_group dl dt{font-size:20px;font-weight:700;color:#3f80ec;line-height:1.2;}
div.tl_group dl dd{margin-top:5px;font-size:13.5px;font-weight:400;line-height:1.45;color:#333;padding-left:11px;position:relative;}
div.tl_group dl dd:before{content:'';display:block;position:absolute;top:8px;left:0;width:3px;height:3px;border-radius:50%;background:#666;}

/* horizontal scrollbar */
div.timeline::-webkit-scrollbar{height:8px;}
div.timeline::-webkit-scrollbar-track{background:#e4e9f2;border-radius:4px;}
div.timeline::-webkit-scrollbar-thumb{background:#a7b6cc;border-radius:4px;}
div.timeline::-webkit-scrollbar-thumb:hover{background:#8b9db8;}

/* timeline arrows — parked above the strip so they never collide with the
   slide's own Swiper arrows, which sit at the vertical centre of the section */
a.tl_nav{
	position:absolute;
	top:-56px;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#fff;
	border:1px solid #cdd7e6;
	box-shadow:0 2px 10px rgba(31,52,89,0.14);
	z-index:5;
	font-size:0;
}
a.tl_nav:after{
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	width:10px;
	height:10px;
	margin:-5px 0 0 -6px;
	border-top:2px solid #4a7fd0;
	border-right:2px solid #4a7fd0;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
a.tl_nav:hover{border-color:#4a7fd0;}
a.tl_nav_prev{right:200px;transform:rotate(180deg);-webkit-transform:rotate(180deg);}
a.tl_nav_next{right:150px;}
a.tl_nav.off{opacity:0.25;cursor:default;}

@media screen and (max-width: 1250px){
	div.subpage_company02 div.company02_con{padding-left:10%;}
	li.tl_col{flex:0 0 236px;width:236px;}
	ul.timeline_list{width:2124px;}
	div.tl_group dl dt{font-size:18px;}
	div.tl_group dl dd{font-size:12.5px;}
	a.tl_nav_prev{right:110px;}
	a.tl_nav_next{right:60px;}
}

/* short viewports: tighten the type so the year groups still clear the axis */
@media screen and (max-height: 980px){
	div.subpage_company02 div.subpage_tit_box{padding-top:48px;}
	div.subpage_company02 div.company02_con{margin-top:26px;padding-bottom:16px;}
	div.tl_group dl dt{font-size:17px;}
	div.tl_group dl dd{font-size:12px;line-height:1.4;margin-top:3px;}
	div.tl_group dl + dl{padding-top:12px;}
	li.tl_up   div.tl_group{margin-bottom:14px;}
	li.tl_down div.tl_group{margin-top:14px;}
	a.tl_nav{top:-38px;width:30px;height:30px;}
	a.tl_nav:after{width:8px;height:8px;margin:-4px 0 0 -5px;}
}
@media screen and (max-height: 780px){
	div.subpage_company02 div.subpage_tit_box{padding-top:34px;}
	div.subpage_company02 div.company02_con{margin-top:18px;}
	div.tl_group dl dt{font-size:16px;}
	div.tl_group dl dd{font-size:11.5px;line-height:1.32;}
	div.tl_group dl + dl{padding-top:8px;}
	li.tl_up   div.tl_group{margin-bottom:12px;}
	li.tl_down div.tl_group{margin-top:12px;}
	a.tl_nav{top:-32px;width:26px;height:26px;}
}

/* ================================================================ BUSINESS AREA
   Replaces business_area1_bg05.png / business_area2_bg05.png (Korean text was baked in).
   The circular icon PNGs carry no text, so they are reused as-is. */
div.business_area_con{
	width:100%;
	min-width:0;
	max-width:1460px;
	margin:2.5% auto 0 auto;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
div.business_area_con img{position:static;width:100%;}

/* the hub is first in source order so it renders before either list; put it
   back in the middle visually */
div.ba_hub{order:2;}
ul.ba_list_left{order:1;}
ul.ba_list_right{order:3;}

div.ba_hub{position:relative;flex:0 0 280px;width:280px;height:280px;}
div.ba_hub span.ba_core{
	position:absolute;
	left:50%;
	top:50%;
	width:152px;
	height:152px;
	margin:-76px 0 0 -76px;
	border-radius:50%;
	background:#4a90e2;
	color:#fff;
	font-size:21px;
	font-weight:700;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	z-index:2;
}
div.ba_hub_green span.ba_core{background:#3bca8e;font-size:17px;}
div.ba_hub span.ba_pulse{position:absolute;left:50%;top:50%;border-radius:50%;}
div.ba_hub span.ba_pulse1{width:196px;height:196px;margin:-98px 0 0 -98px;background:rgba(126,140,155,0.22);}
div.ba_hub span.ba_pulse2{width:238px;height:238px;margin:-119px 0 0 -119px;background:rgba(126,140,155,0.14);}
div.ba_hub span.ba_pulse3{width:280px;height:280px;margin:-140px 0 0 -140px;background:rgba(126,140,155,0.08);}

ul.ba_list{flex:1 1 0;max-width:480px;}
ul.ba_list li{display:flex;align-items:center;margin-top:44px;}
ul.ba_list li:first-child{margin-top:0;}
span.ba_icon{flex:0 0 92px;width:92px;font-size:0;}
span.ba_icon img{width:100%;display:block;}
div.ba_txt{flex:1 1 auto;}
/* the background photo is light here, so the labels are dark — same as the
   original artwork */
div.business_area_con div.ba_txt h3{font-size:20px;font-weight:700;color:#222;line-height:1.2;}
div.business_area_con div.ba_txt p{font-size:14px;font-weight:400;color:#57626f;line-height:1.5;margin-top:7px;}

ul.ba_list_left{text-align:right;}
ul.ba_list_left div.ba_txt{padding-right:14px;}
ul.ba_list_right{text-align:left;}
ul.ba_list_right div.ba_txt{padding-left:14px;}
ul.ba_list_right span.ba_icon img{transform:scaleX(-1);-webkit-transform:scaleX(-1);}

@media screen and (max-width: 1450px){
	div.business_area_con{margin:3% auto 0 auto;}
	div.ba_hub{flex:0 0 230px;width:230px;height:230px;}
	div.ba_hub span.ba_core{width:128px;height:128px;margin:-64px 0 0 -64px;font-size:18px;}
	div.ba_hub_green span.ba_core{font-size:14px;}
	div.ba_hub span.ba_pulse1{width:164px;height:164px;margin:-82px 0 0 -82px;}
	div.ba_hub span.ba_pulse2{width:198px;height:198px;margin:-99px 0 0 -99px;}
	div.ba_hub span.ba_pulse3{width:230px;height:230px;margin:-115px 0 0 -115px;}
	ul.ba_list li{margin-top:34px;}
	span.ba_icon{flex:0 0 76px;width:76px;}
	div.business_area_con div.ba_txt h3{font-size:17px;}
	div.business_area_con div.ba_txt p{font-size:13px;}
}
@media screen and (max-width: 1250px){
	div.ba_hub{flex:0 0 180px;width:180px;height:180px;}
	div.ba_hub span.ba_core{width:104px;height:104px;margin:-52px 0 0 -52px;font-size:15px;}
	div.ba_hub_green span.ba_core{font-size:12px;}
	div.ba_hub span.ba_pulse1{width:130px;height:130px;margin:-65px 0 0 -65px;}
	div.ba_hub span.ba_pulse2{width:156px;height:156px;margin:-78px 0 0 -78px;}
	div.ba_hub span.ba_pulse3{width:180px;height:180px;margin:-90px 0 0 -90px;}
	ul.ba_list li{margin-top:26px;}
	span.ba_icon{flex:0 0 62px;width:62px;}
	div.business_area_con div.ba_txt h3{font-size:15px;}
	div.business_area_con div.ba_txt p{font-size:12px;margin-top:4px;}
}

/* ================================================================ RECRUIT 01 : Our People
   Replaces recruit01_con.png / m_recruit_con01.png. */
div.recruit01_con{width:100%;min-width:0;max-width:1290px;margin:6% auto 0 auto;}
ul.values_row{display:flex;align-items:center;justify-content:center;position:relative;}
ul.values_row:before{
	content:'';
	position:absolute;
	left:6.5%;
	right:6.5%;
	top:50%;
	height:62%;
	transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
	border-radius:200px;
	background:linear-gradient(90deg,#bfe4fb 0%,#bfeae7 18%,#c4ece0 33%,#c9ecd2 48%,#dbe9c2 66%,#eee7b4 83%,#f7dfb8 100%);
}
ul.values_row li{position:relative;flex:0 0 14.28%;max-width:172px;}
ul.values_row li:before{content:'';display:block;padding-top:100%;}
ul.values_row li span{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:8px;
	color:#fff;
	font-size:16px;
	font-weight:700;
	line-height:1.2;
}
ul.values_row li.v1 span{background:#58b8f7;}
ul.values_row li.v2 span{background:#3fc3d4;}
ul.values_row li.v3 span{background:#3fcfaf;}
ul.values_row li.v4 span{background:#46cf8b;}
ul.values_row li.v5 span{background:#8ac96b;}
ul.values_row li.v6 span{background:#d8d13f;}
ul.values_row li.v7 span{background:#f9a127;}

/* the value descriptions sit in a parallel row so the circles and the gradient
   bar behind them keep their original geometry */
ul.values_desc{display:flex;justify-content:center;margin-top:26px;}
ul.values_desc li{
	flex:0 0 14.28%;
	max-width:172px;
	padding:0 10px;
	text-align:center;
	font-size:12.5px;
	font-weight:300;
	line-height:1.5;
	color:rgba(255,255,255,0.85);
}
@media screen and (max-width: 1450px){
	ul.values_row li span{font-size:14px;}
	ul.values_desc{margin-top:20px;}
	ul.values_desc li{font-size:11.5px;padding:0 7px;}
}
@media screen and (max-width: 1250px){
	ul.values_row li span{font-size:12px;padding:5px;}
	ul.values_desc{margin-top:16px;}
	ul.values_desc li{font-size:11px;padding:0 5px;line-height:1.45;}
}

/* ================================================================ RECRUIT 02 : Hiring process
   Replaces recruit02_con.png / m_recruit_con02.png. */
div.recruit02_con{width:100%;min-width:0;max-width:1120px;margin:4.5% auto 0 auto;}
ul.process_row{display:flex;align-items:flex-start;justify-content:center;}
ul.process_row li{position:relative;flex:1 1 0;max-width:200px;text-align:center;}
ul.process_row li:before{
	content:'';
	position:absolute;
	top:56px;
	left:-50%;
	width:100%;
	height:1px;
	background:rgba(255,255,255,0.35);
	z-index:0;
}
ul.process_row li:first-child:before{display:none;}
span.pr_circle{
	position:relative;
	z-index:1;
	display:flex;
	align-items:center;
	justify-content:center;
	width:112px;
	height:112px;
	margin:0 auto;
}
/* gradient ring: drawn on the pseudo-element so the mask never clips the label */
span.pr_circle:before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:50%;
	border:2px solid transparent;
	background:linear-gradient(135deg,#f0b64a 0%,#3fd0a0 52%,#4aa8f0 100%) border-box;
	-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	        mask-composite:exclude;
}
span.pr_circle em{
	position:relative;
	font-size:26px;
	font-weight:700;
	color:#fff;
	letter-spacing:1px;
}
ul.process_row li p{margin-top:16px;font-size:15px;font-weight:400;color:#fff;line-height:1.35;padding:0 6px;}

/* swiper's slide styling centres text, so the notes have to opt out */
div.process_notes{display:flex;flex-wrap:wrap;margin-top:5%;text-align:left;}
div.pn_col{width:50%;padding-right:6%;}
div.process_notes h4{font-size:14px;font-weight:700;color:#4cdd8a;margin-top:22px;}
div.process_notes h4:first-child{margin-top:0;}
div.process_notes p{font-size:13px;font-weight:300;color:#e6ecf2;line-height:1.5;margin-top:5px;}

@media screen and (max-width: 1450px){
	span.pr_circle{width:92px;height:92px;}
	span.pr_circle em{font-size:22px;}
	ul.process_row li:before{top:46px;}
	ul.process_row li p{font-size:13px;margin-top:12px;}
	div.process_notes h4{font-size:13px;margin-top:16px;}
	div.process_notes p{font-size:12px;}
}
@media screen and (max-width: 1250px){
	span.pr_circle{width:76px;height:76px;}
	span.pr_circle em{font-size:18px;}
	ul.process_row li:before{top:38px;}
	ul.process_row li p{font-size:12px;}
}

/* ================================================================ RECRUIT 03 : Benefits
   Replaces recruit03_con.png / m_recruit_con03.png. */
div.recruit03_con{width:100%;min-width:0;max-width:1320px;margin:5% auto 0 auto;}
ul.benefit_row{display:flex;align-items:stretch;justify-content:center;}
ul.benefit_row li{
	flex:1 1 0;
	max-width:180px;
	margin:0 7px;
	padding:26px 14px 34px 14px;
	min-height:344px;
	border-radius:96px;
	text-align:center;
	background:linear-gradient(180deg,#3d434a 0%,#3d434a 38%,#4f9f84 78%,#57c08f 100%);
}
span.bf_icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:96px;
	height:96px;
	margin:0 auto;
	border-radius:50%;
	background:#2b3036;
}
span.bf_icon svg{
	width:50px;
	height:50px;
	fill:none;
	stroke:#ffffff;
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
ul.benefit_row li h4{margin-top:22px;font-size:15px;font-weight:700;color:#fff;line-height:1.25;}
ul.benefit_row li p{margin-top:9px;font-size:13px;font-weight:300;color:rgba(255,255,255,0.88);line-height:1.4;}

@media screen and (max-width: 1450px){
	ul.benefit_row li{max-width:150px;margin:0 5px;padding:22px 10px 28px 10px;min-height:288px;}
	span.bf_icon{width:78px;height:78px;}
	span.bf_icon svg{width:42px;height:42px;}
	ul.benefit_row li h4{font-size:13px;margin-top:16px;}
	ul.benefit_row li p{font-size:12px;margin-top:6px;}
}
@media screen and (max-width: 1250px){
	ul.benefit_row li{max-width:124px;margin:0 4px;padding:18px 8px 24px 8px;min-height:244px;}
	span.bf_icon{width:64px;height:64px;}
	span.bf_icon svg{width:34px;height:34px;}
	ul.benefit_row li h4{font-size:12px;margin-top:12px;}
	ul.benefit_row li p{font-size:11px;}
}

/* ================================================================ CONTACT US
   Replaces company_info1/2/3.png (Korean labels were baked in). */

/* English-language map. common.css points this at map2.jpg (Korean labels);
   map_en.jpg is the English Naver map carrying the HANWOL marker. */
div.subpage_contact_us div.map{background-image:url("../../img/map_en.jpg");}
div.subpage_contact_us div.address_desc p{font-size:17px;line-height:1.5;}
div.subpage_contact_us div.address_desc p.addr_transit{margin-top:10px;font-size:15px;color:#5c6672;}
div.m_address_desc p.addr_transit{margin-top:6px;font-size:12px;color:#5c6672;}

span.ci_circle{
	position:relative;
	display:block;
	width:100%;
	max-width:166px;
	height:0;
	padding-bottom:100%;
	margin:0 auto;
}
/* gradient ring: on the pseudo-element, so the mask never clips the labels */
span.ci_circle:before{
	content:'';
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:50%;
	border:1px solid transparent;
	background:linear-gradient(135deg,#f2a93f 0%,#3fd0a0 50%,#4aa8f0 100%) border-box;
	-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
	        mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	        mask-composite:exclude;
}
span.ci_circle em{
	position:absolute;
	top:26%;
	left:0;
	width:100%;
	text-align:center;
	font-size:13px;
	font-weight:400;
	color:#6a6a6a;
	letter-spacing:0.5px;
}
span.ci_circle strong{
	position:absolute;
	top:42%;
	left:0;
	width:100%;
	text-align:center;
	font-size:17px;
	font-weight:700;
	color:#222;
	line-height:1.3;
}
@media screen and (max-width: 1450px){
	span.ci_circle em{font-size:11px;}
	span.ci_circle strong{font-size:14px;}
}
@media screen and (max-width: 1250px){
	div.subpage_contact_us div.address_desc p{font-size:15px;}
	div.subpage_contact_us div.address_desc p.addr_transit{font-size:13px;}
	span.ci_circle em{font-size:10px;top:25%;}
	span.ci_circle strong{font-size:12px;top:41%;}
}

/* ================================================================ MOBILE (<=1024px) */
@media screen and (max-width: 1024px){
	/* COMPANY 01 — vision diagram + value chips */
	div.vision_top div.img_box{width:auto;}
	div.vision_top div.vmv_box{--d:106px;--step:118px;}
	div.vision_top span.vmv_label{font-size:11px;}

	div.vision_bottom ul li h5{width:30%;font-size:0;}
	div.vision_bottom ul li p{width:70%;padding-left:4%;}
	span.vmv_chip{display:inline-block;padding:9px 16px;border-radius:20px;color:#fff;font-size:13px;font-weight:700;line-height:1;}
	span.vmv_chip_vision{background:linear-gradient(135deg,#6aaef9,#3b86ee);}
	span.vmv_chip_mission{background:linear-gradient(135deg,#4ec79c,#2fa87d);}
	span.vmv_chip_value{background:linear-gradient(135deg,#fbaf46,#f2851a);}

	/* RECRUIT 01 — circle beside its description, one value per row */
	ul.values_col{flex-direction:column;max-width:400px;margin:0 auto;}
	ul.values_col:before{display:none;}
	ul.values_col li{
		flex:0 0 auto;
		width:100%;
		max-width:none;
		margin:0 0 14px 0;
		display:flex;
		align-items:center;
	}
	ul.values_col li:before{content:none;}
	ul.values_col li span{
		position:static;
		flex:0 0 90px;
		width:90px;
		height:90px;
		font-size:12px;
		padding:6px;
	}
	ul.values_col li p{
		flex:1 1 auto;
		padding-left:16px;
		text-align:left;
		font-size:13px;
		font-weight:300;
		line-height:1.45;
		color:rgba(255,255,255,0.88);
	}
	div.m_recruit_tab_con01 div.img_box{margin-top:7%;}

	/* RECRUIT 02 — process stacked vertically */
	ul.process_col{flex-direction:column;align-items:center;max-width:260px;margin:0 auto;}
	ul.process_col li{flex:0 0 auto;width:100%;max-width:260px;display:flex;align-items:center;text-align:left;margin-top:14px;}
	ul.process_col li:first-child{margin-top:0;}
	ul.process_col li:before{top:auto;bottom:100%;left:38px;width:1px;height:14px;}
	ul.process_col span.pr_circle{width:76px;height:76px;margin:0;flex:0 0 76px;}
	ul.process_col span.pr_circle em{font-size:18px;}
	ul.process_col li p{margin:0 0 0 16px;font-size:14px;text-align:left;padding:0;}

	/* RECRUIT 03 — benefits stacked vertically */
	ul.benefit_col{flex-direction:column;max-width:420px;margin:0 auto;}
	ul.benefit_col li{
		flex:0 0 auto;
		width:100%;
		max-width:none;
		margin:0 0 12px 0;
		padding:10px 20px 10px 10px;
		min-height:0;
		border-radius:60px;
		display:flex;
		align-items:center;
		text-align:left;
		background:linear-gradient(90deg,#3d434a 0%,#4f9f84 45%,#5aa8dd 100%);
	}
	ul.benefit_col li{flex-wrap:wrap;}
	ul.benefit_col li span.bf_icon{flex:0 0 62px;width:62px;height:62px;margin:0;}
	ul.benefit_col li span.bf_icon svg{width:34px;height:34px;}
	ul.benefit_col li h4{width:calc(100% - 78px);margin:0 0 0 16px;font-size:14px;}
	ul.benefit_col li p{width:calc(100% - 78px);margin:3px 0 0 78px;font-size:12px;}

	/* CONTACT — info circles */
	ul.m_company_info span.ci_circle em{font-size:10px;top:25%;}
	ul.m_company_info span.ci_circle strong{font-size:11px;top:41%;}
}

@media screen and (max-width: 576px){
	div.vision_top div.vmv_box{--d:84px;--step:94px;}
	div.vision_top span.vmv_label{font-size:9px;}
	span.vmv_chip{padding:7px 12px;font-size:11px;}
	ul.values_col li{margin-bottom:11px;}
	ul.values_col li span{flex:0 0 74px;width:74px;height:74px;font-size:11px;padding:4px;}
	ul.values_col li p{padding-left:12px;font-size:12px;}
	ul.process_col span.pr_circle{width:62px;height:62px;flex:0 0 62px;}
	ul.process_col span.pr_circle em{font-size:15px;}
	ul.process_col li:before{left:31px;}
	ul.process_col li p{font-size:12px;margin-left:12px;}
	ul.benefit_col li span.bf_icon{flex:0 0 52px;width:52px;height:52px;}
	ul.benefit_col li span.bf_icon svg{width:28px;height:28px;}
	ul.benefit_col li h4{font-size:12px;width:calc(100% - 68px);}
	ul.benefit_col li p{width:calc(100% - 68px);margin-left:68px;font-size:11px;}
}

/* ================================================================ FOOTER */
ul.ft_info li{margin-right:18px;}
@media screen and (max-width: 1250px){
	section.section.ft{height:auto !important;min-height:85px;}
}