@import url("sub.css");

/**** S:: 비즈니스 공통 > biz_list ****/
.biz_list { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; column-gap: 40px; row-gap: 0; max-width:1360px; margin:0 auto;}
.biz_list li { width: calc((100% - 40px) / 2); max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.biz_list li:nth-child(odd) { padding-top: 150px; }
.biz_list li figure { display: block; width: 100%; aspect-ratio: 640 / 427; border-radius: var(--borderR20); overflow: hidden; background: var(--black); }
.biz_list li figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biz_list li .txt { display: flex; flex-direction: column; gap: 10px; }
.biz_list li .tit { display: flex; align-items: center; gap: 12px; }
.biz_list li .num { display: flex; align-items: center; justify-content: center; padding: 3px 15px; box-sizing: border-box; border-radius: 100px; background: var(--main); color: var(--white); font-size: 0.667rem; font-weight: 700; line-height: 1.833; flex-shrink: 0; }
.biz_list li .fs24 { color: var(--black); }
.biz_list li .fs18 { color: var(--basic); line-height: 1.667; }
/**** E:: 비즈니스 공통 > biz_list ****/

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1000px; margin: 0 auto; }
#model .diagram ul { display: flex; flex-direction: column; gap: 30px; flex-shrink: 0; }
#model .diagram ul li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 220px; height: 220px; border-radius: 50%; box-sizing: border-box; background: var(--grayBg); border: 3px solid transparent; color: var(--basic); transition: background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease, color 0.55s ease, opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
#model .diagram ul li br {display: block;}
#model .diagram ul li.active { background: var(--white); border-color: var(--main); box-shadow: 0 0 30px rgba(0, 74, 249, 0.25); color: var(--main); }
#model .diagram ul li figure { display: block; width: 80px; height: 60px; overflow: hidden; }
#model .diagram ul li figure img { width: 100%; height: 100%; object-fit: contain; display: block; }
#model .diagram ul li .txt { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
#model .diagram ul li .fsE12 { color: inherit; opacity: 0.4; text-decoration: underline; font-weight: 700; line-height: 1; letter-spacing: 0; transition: color 0.55s ease; }
#model .diagram ul li .fsE16 { color: inherit; font-weight: 500; line-height: 1.25; letter-spacing: 0; font-family: var(--eng); transition: color 0.55s ease; }
#model .diagram ul li > i { position: absolute; top: 50%; width: 116px; height: 12px; transform: translateY(-50%); background-repeat: no-repeat; background-position: center; background-size: 116px 12px; }
#model .diagram .left li > i { left: calc(100% - 4px); background-image: url("/business/img/bm_line_l.svg"); }
#model .diagram .right li > i { right: calc(100% - 4px); background-image: url("/business/img/bm_line_r.svg"); }
#model .diagram .visual { display: block; width: 28%; max-width: 320px; flex-shrink: 0; overflow: hidden; }
#model .diagram .visual img { width: 100%; height: 100%; object-fit: contain; display: block; }
/**** E:: 비즈니스 > Business Model ****/

/*******************************************************************************
	@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) { 

/**** S:: 비즈니스 공통 > biz_list ****/
.biz_list { column-gap: 30px; }
.biz_list li { width: calc((100% - 30px) / 2); }
.biz_list li:nth-child(odd) { padding-top: 100px; }
/**** E:: 비즈니스 공통 > biz_list ****/

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { max-width: 1100px; gap: 30px; }
#model .diagram ul li > i { width: 90px; background-size: 90px 10px; }
/**** E:: 비즈니스 > Business Model ****/

}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 

/**** S:: 비즈니스 공통 > biz_list ****/
.biz_list { column-gap: 24px; }
.biz_list li { width: calc((100% - 24px) / 2); }
.biz_list li:nth-child(odd) { padding-top: 80px; }
/**** E:: 비즈니스 공통 > biz_list ****/

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { max-width: 960px; gap: 20px; }
#model .diagram ul li figure { width: 64px; height: 48px; }
/**** E:: 비즈니스 > Business Model ****/

}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 

/**** S:: 비즈니스 공통 > biz_list ****/
.biz_list { flex-direction: column; column-gap: 0; row-gap: 40px; }
.biz_list li { width: 100%; max-width: 100%; }
.biz_list li:nth-child(odd) { padding-top: 0; }
/**** E:: 비즈니스 공통 > biz_list ****/

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; justify-items: center; max-width: 500px; padding: 20px 0; margin: 0 auto; position: relative; z-index: 1; }
#model .diagram ul { display: contents; }
#model .diagram .visual { grid-column: 1 / 3; width: 240px; margin: 10px 0; max-width: 100%; filter: drop-shadow(0 10px 20px rgba(0, 74, 249, 0.15)); z-index: 2; }
#model .diagram ul li { width: 170px; height: 170px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); z-index: 2; }
#model .diagram ul li > i { display: block; left: 50% !important; right: auto !important; top: 50%; width: 116px !important; height: 12px !important; margin-top: -6px; transform-origin: left center; background-size: 116px 12px !important; background-repeat: no-repeat; z-index: -1; }
#model .diagram .left li:nth-child(1) > i { transform: translate(24px, 74px) rotate(50deg) !important; }
#model .diagram .left li:nth-child(2) > i { transform: translate(-24px, 74px) rotate(130deg) !important; }
#model .diagram .right li:nth-child(1) > i { transform: translate(24px, -74px) rotate(-50deg) !important; }
#model .diagram .right li:nth-child(2) > i { transform: translate(-24px, -74px) rotate(-130deg) !important; }
#model .diagram .right li > i { background-image: url("/business/img/bm_line_l.svg"); }
/**** E:: 비즈니스 > Business Model ****/

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) { 

/**** S:: 비즈니스 공통 > biz_list ****/
.biz_list { row-gap: 30px; }
.biz_list li { gap: 15px; }
.biz_list li .tit { gap: 8px; }
/**** E:: 비즈니스 공통 > biz_list ****/

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { gap: 20px; }
#model .diagram .visual { width: 180px; margin: 0; }
#model .diagram ul li { width: 140px; height: 140px; gap: 8px; border-width: 2px; }
#model .diagram ul li figure { width: 52px; height: 40px; }
#model .diagram ul li > i { width: 90px !important; height: 9.3px !important; margin-top: -4.6px; background-size: 90px 9.3px !important; }
#model .diagram .left li:nth-child(1) > i { transform: translate(20px, 60px) rotate(50deg) !important; }
#model .diagram .left li:nth-child(2) > i { transform: translate(-20px, 60px) rotate(130deg) !important; }
#model .diagram .right li:nth-child(1) > i { transform: translate(20px, -60px) rotate(-50deg) !important; }
#model .diagram .right li:nth-child(2) > i { transform: translate(-20px, -60px) rotate(-130deg) !important; }
#model .diagram .right li > i { background-image: url("/business/img/bm_line_l.svg"); }
/**** E:: 비즈니스 > Business Model ****/

}
/*******************************************************************************
	@media ~480px
*******************************************************************************/
@media all and (max-width:480px) { 

/**** S:: 비즈니스 > Business Model ****/
#model .diagram { gap: 15px; }
#model .diagram .visual { width: 150px; }
#model .diagram ul li { width: 130px; height: 130px; gap: 6px; }
#model .diagram ul li figure { width: 42px; height: 32px; }
#model .diagram ul li .fsE12 { font-size: 0.7rem; }
#model .diagram ul li .fsE16 { font-size: 0.85rem; }
#model .diagram ul li > i { width: 80px !important; height: 8.2px !important; margin-top: -4.1px; background-size: 80px 8.2px !important; }
#model .diagram .left li:nth-child(1) > i { transform: translate(18px, 56px) rotate(50deg) !important; }
#model .diagram .left li:nth-child(2) > i { transform: translate(-18px, 56px) rotate(130deg) !important; }
#model .diagram .right li:nth-child(1) > i { transform: translate(18px, -56px) rotate(-50deg) !important; }
#model .diagram .right li:nth-child(2) > i { transform: translate(-18px, -56px) rotate(-130deg) !important; }
#model .diagram .right li > i { background-image: url("/business/img/bm_line_l.svg"); }
/**** E:: 비즈니스 > Business Model ****/

}