@import url('sub.css');

/*** Contents ***/
/* ABOUT — FOUNDING */
.founding { display:flex; align-items:center; gap:60px; }
.founding_cont { flex:1; min-width:0; display:flex; flex-direction:column; }
.founding_txt { display:flex; flex-direction:column; gap:10px; }
.founding_txt .point_line { color:var(--main); text-decoration:underline; text-underline-position:from-font; }
.founding_name { display:flex; align-items:center; gap:5px; padding-top:55px; font-weight:300; }
.founding_name span { display:flex; align-items:center; gap:2px; }
.founding_name strong { font-weight:800; }
.founding_img { position:relative; flex-shrink:0; width:620px; aspect-ratio:620/413; overflow:hidden; border-radius:var(--borderR30); }
.founding_img img { display: block; width: 100%; height: 100%; object-fit:cover; }

/* ABOUT — VIRTUE */
.virtue { background:var(--grayBg) url('/about/img/virtue-bg.jpg') no-repeat center / cover; background-blend-mode:multiply; }
.virtue_wrap { display:flex; justify-content:center; padding-top:2px; }
.virtue_diagram { position:relative; width:calc(100% - 240px); max-width:656px; }
.virtue_graphic { position:relative; aspect-ratio:656/635; }
.virtue_img { position:absolute; left:50%; top:50%; width:92.91%; transform:translate(-50%, -50%); }
.virtue_center { position:absolute; left:50%; top:calc(50% + 21px); display:flex; flex-direction:column; align-items:center; gap:15px; transform:translate(-50%, -50%); text-align:center; white-space:nowrap; }
.virtue_center img { width:68px; }
.virtue_center p { font-weight:300; }
.virtue_center strong { font-weight:700; }
.virtue_list { position:absolute; inset:0; }
.virtue_list li { position:absolute; white-space:nowrap; }
.virtue_list br { display:block; }
.virtue_list strong { font-weight:600; }
.virtue_list .icon { display:none; }
.virtue_list .item1 { left:50%; bottom:calc(93.81% + 9px); transform:translateX(-50%); }
.virtue_list .item2 { right:calc(94.01% + 22px); top:42.64%; transform:translateY(-50%); text-align:right; }
.virtue_list .item3 { left:calc(93.98% + 22px); top:42.64%; transform:translateY(-50%); }
.virtue_list .item4 { right:calc(81.82% + 22px); top:81.46%; transform:translateY(-50%); text-align:right; }
.virtue_list .item5 { left:calc(81.79% + 22px); top:81.46%; transform:translateY(-50%); }

/* ABOUT — EDUCATION */
.edu_txt { margin-bottom:30px; word-break:keep-all; }
.edu_box { border:1px solid var(--border); border-radius:var(--borderR30); overflow:hidden; }
.edu_top { display:flex; justify-content:center; padding:100px 0; }
.edu_diagram { position:relative; width:560px; }
.edu_graphic { position:relative; }
.edu_img { display:block; width:100%; }
.edu_center { position:absolute; left:50%; top:calc(50% + 48px); display:flex; flex-direction:column; align-items:center; gap:15px; transform:translate(-50%, -50%); text-align:center; white-space:nowrap; }
.edu_center img { width:50px; }
.edu_center p { font-weight:300; }
.edu_center strong { font-weight:800; }
.edu_list { position:absolute; inset:0; }
.edu_list li { position:absolute; display:flex; flex-direction:column; gap:8px; white-space:nowrap; word-break:keep-all; }
.edu_list br { display:block; }
.edu_list .tit { font-weight:600; }
.edu_list .item1 { left:74.46%; top:5.02%; }
.edu_list .item2 { right:calc(100% + 41px); top:82.3%; transform:translateY(-50%); align-items:flex-end; text-align:right; }
.edu_list .item3 { left:calc(100% + 39px); top:82.3%; transform:translateY(-50%); }
.edu_goal { display:flex; padding:60px 0; background:var(--grayBg); }
.edu_goal li { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; box-sizing: border-box; padding: 0 10px;}
.edu_goal li + li { border-left:1px solid var(--border); }
.edu_goal .head { display:flex; flex-direction:column; align-items:center; }
.edu_goal .icon { display:flex; align-items:center; justify-content:center; width:150px; height:150px; margin-bottom:-19px; }
.edu_goal .icon img { width:80px; }
.edu_goal .num { position:relative; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--borderR100); background:var(--main); font-family:var(--eng); font-weight:700; letter-spacing:0; color:var(--white); }
.edu_goal p { font-weight:300; word-break:keep-all; }
.edu_goal strong { font-weight:600; }

/* ABOUT — GREETING */
.greeting { display:flex; gap:60px; }
.greeting_img { position:relative; flex-shrink:0; width:620px; aspect-ratio:620/580; overflow:hidden; border-radius:var(--borderR30); background:var(--grayBg); }
.greeting_img img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center bottom;}
.greeting_cont { flex:1; min-width:0; display:flex; flex-direction:column; justify-content: center; gap:20px; padding:50px 0; }
.greeting_tit { font-weight:700; word-break:keep-all; }
.greeting_tit span { color:var(--main); }
.greeting_txt { display:flex; flex-direction:column; gap:30px; }
.greeting_txt p { word-break:keep-all; }
.greeting_name { display:flex; align-items:center; gap:5px; padding-top:25px; font-weight:300; }
.greeting_name strong { font-weight:800; }

/* ABOUT — SYMBOL */
.symbol_box { display:flex; align-items:center; gap:60px; padding:60px 100px; border:1px solid var(--border); border-radius:var(--borderR30); background:var(--white); }
.symbol_logo { position:relative; flex-shrink:0; width:190px; aspect-ratio:190/188; overflow: hidden; }
.symbol_logo img { display: block; width: 100%; height: 100%; object-fit: contain;}
.symbol_txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; word-break:keep-all; }
.symbol_txt .tit { padding-bottom:5px; font-weight:700; }
.symbol_txt span { color:var(--main); }

/* ABOUT — MOTTO */
.motto_list { display:flex; gap:30px; }
.motto_list li { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:20px; padding:50px; border-radius:var(--borderR30); background:var(--grayBg); text-align:center; word-break:keep-all; }
.motto_list .icon { width:82px; }
.motto_list .icon img { display:block; width:100%; }
.motto_list .txt { display:flex; flex-direction:column; gap:6px; }
.motto_list .tit { font-weight:700; }

/* ABOUT — EMBLEM */
.emblem_box { display:flex; gap:60px; }
.emblem_img { flex-shrink:0; width:765px; aspect-ratio:765/450; overflow:hidden; border-radius:var(--borderR40); background:var(--black); }
.emblem_img img { display:block; width:100%; height:100%; object-fit:cover; }
.emblem_txt { flex:1; min-width:0; display:flex; flex-direction:column; justify-content: center; align-items:flex-start; gap:40px; word-break:keep-all; }
.emblem_info { display:flex; flex-direction:column; gap:20px; width:100%; }
.emblem_desc { display:flex; flex-direction:column; gap:10px; }
.emblem_desc .tit { font-weight:600; }
.emblem_desc .tit .eng { font-family:var(--eng); font-weight:600; }
.emblem_desc .fs20 { color:var(--basic); }
.emblem .dot-list strong { font-weight:600; color:var(--black); }
.emblem .btn-ico { border-color:var(--main); }
.emblem .btn-ico span { font-weight:600; color:var(--main); }
.emblem .btn-ico:hover span { color:var(--white); }

/* ABOUT — LOCATION */
.location { display:flex; flex-direction:column; gap:40px; }
.location_map { position:relative; height:520px; overflow:hidden; border:1px solid var(--border); border-radius:var(--borderR30); background:var(--white); }
.location_map .map-shield{position:absolute; left:0; top:0; width:100%; height:100%; z-index:5; box-sizing:border-box; cursor:default;}
.location_map .root_daum_roughmap,
.location_map .root_daum_roughmap .wrap_map,
.location_map .root_daum_roughmap iframe {width:100% !important; height:100% !important;}
.location_map .root_daum_roughmap .map_border{display: none !important;}

.location_info { display:flex; align-items:flex-start; justify-content:space-between; gap:30px; }
.location_txt { display:flex; flex-direction:column; gap:10px; }
.location_addr { display:flex; gap:6px; font-weight:600; }
.location_addr::before { content:"\e0c8"; flex-shrink:0; width:24px; height:24px; margin-top:4px; font-family:var(--icon); font-size:24px; line-height:24px; font-weight:400; color:var(--black); }
.location_contact { display:flex; flex-wrap:wrap; align-items:center; gap:5px 30px; }
.location_contact li { display:flex; align-items:center; gap:8px; }
.location_contact b { font-weight:600; color:var(--black); }
.location_contact a, .location_contact span { letter-spacing:0; color:var(--basic); transition:color 0.3s ease; }
.location_contact a:hover { color:var(--main); }
.location_btn { display:flex; align-items:center; justify-content:flex-end; gap:2px; flex-shrink:0; }
.map_btn { position:relative; display:flex; align-items:center; justify-content:space-between; width:192px; height:58px; padding:0 10px 0 20px; box-sizing:border-box; overflow:hidden; border:1px solid var(--border); border-radius:var(--borderR100); background:var(--white); transition:border-color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.map_btn::before { content:''; position:absolute; left:50%; bottom:0; z-index:0; width:16px; height:16px; border-radius:50%; transform:translate(-50%, 50%) scale(0); transition:transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); pointer-events:none; }
.map_btn .txt { position:relative; z-index:1; font-weight:600; color:var(--black); white-space:nowrap; transition:color 0.55s cubic-bezier(0.4, 0, 0.2, 1); }
.map_btn .ico { position:relative; z-index:1; flex-shrink:0; width:38px; height:38px; border-radius:50%; background-repeat:no-repeat; background-position:center; background-size:18px; }
.map_btn.naver::before { background:#00ce6d; }
.map_btn.naver .ico { background-color:#00ce6d; background-image:url('/about/img/naver-icon.svg'); background-size:14px; }
.map_btn.kakao::before { background:#feda0d; }
.map_btn.kakao .ico { background-color:#feda0d; background-image:url('/about/img/kakao-icon.svg'); }
.map_btn.google::before { background:var(--basic); }
.map_btn.google .ico { background-color:var(--grayBg); background-image:url('/about/img/google-icon.svg'); }
.map_btn:hover { border-color:transparent; }
.map_btn:hover::before { transform:translate(-50%, 50%) scale(20); }
.map_btn:hover .txt { color:var(--white); }
.map_btn.kakao:hover .txt { color:var(--black); }

/* ABOUT — TRAFFIC */
.traffic_list { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.traffic_list li { display:flex; align-items:center; gap:40px; word-break:keep-all; }
.traffic_list li:nth-child(-n+2) { grid-column:1 / -1; }
.traffic_list .icon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:80px; height:80px; }
.traffic_list .icon img { display:block; max-width:100%; max-height:100%; }
.traffic_list .txt { display:flex; flex-direction:column; gap:5px; min-width:0; }
.traffic_list .tit { font-weight:700; }





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




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


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

/* ABOUT — FOUNDING */
.founding { gap:40px; }
.founding_img { width:45%; }

/* ABOUT — EDUCATION */
.edu_top { padding:80px 20px; }
.edu_diagram { width:540px; }
.edu_center { top:calc(50% + 46px); }
.edu_list { position:static; display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; width:calc(100% + 184px); margin-left:-92px; }
.edu_list li { position:static; white-space:normal; }
.edu_list br { display:none; }
.edu_list .item1 { position:absolute; left:74.46%; top:24px; width:260px; }
.edu_list .item2 { order:-1; }
.edu_list .item2, .edu_list .item3 { align-items:center; text-align:center; transform:none; }
.edu_list .item2::before, .edu_list .item3::before { content:''; width:1px; height:30px; margin-bottom:6px; background:var(--border); }

/* ABOUT — GREETING */
.greeting { gap:40px; }
.greeting_img { width:45%; }
.greeting_cont { padding:0; }

/* ABOUT — SYMBOL */
.symbol_box { gap:50px; padding:60px; }




/* ABOUT — MOTTO */
.motto_list li { padding:40px 30px; }


/* ABOUT — EMBLEM */
.emblem_box { gap:40px; }
.emblem_img { width:50%; }


/* ABOUT — LOCATION */
.map_btn { width:160px; }
.location { gap:30px; }
.location_info { flex-direction:column; }
.location_btn { justify-content:center; width:100%; }


/* ABOUT — TRAFFIC */
.traffic_list li { gap:30px; }
}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* ABOUT — FOUNDING */
.founding { flex-direction:column; align-items:stretch; }
.founding_img { width:100%; }
.founding_name { padding-top:30px; }

/* ABOUT — VIRTUE */
.virtue_diagram { width:min(480px, calc(100% - 160px)); }
.virtue_center { top:calc(50% + 16px); }
.virtue_center img { display:none; }

/* ABOUT — EDUCATION */
.edu_top { padding:60px 40px; }
.edu_diagram { display:flex; flex-direction:column; align-items:center; width:100%; }
.edu_graphic { width:min(560px, 100%); }
.edu_list { position:static; display:grid; grid-template-columns:1fr; gap:12px; width:100%; margin-top:50px; margin-left:0; }
.edu_list li { position:static; width:auto; white-space:normal; }
.edu_list .item1 { position:static; width:auto; }
.edu_list .item2::before, .edu_list .item3::before { display:none; }
.edu_list li[class*="item"] { transform:none; align-items:flex-start; gap:6px; padding:24px 30px; border-radius:var(--borderR20); background:var(--grayBg); text-align:left; }
.edu_list .tit { display:flex; align-items:center; gap:10px; }
.edu_list .tit::before { content:''; width:10px; height:10px; border-radius:var(--borderR100); background:var(--sub3); flex-shrink:0; }
.edu_list .item1 .tit::before { background:var(--sub); }
.edu_list .item3 .tit::before { background:var(--main); }
.edu_list .tit + p { padding-left:20px; }
.edu_goal { padding:40px 0; }
.edu_goal li { padding:0 15px; }
.edu_goal .icon { width:120px; height:120px; }
.edu_goal .icon img { width:64px; }

/* ABOUT — GREETING */
.greeting { flex-direction:column; align-items:stretch; }
.greeting_img { width:100%; margin:0 auto; }

/* ABOUT — SYMBOL */
.symbol_box { gap:40px; padding:50px 40px; }
.symbol_logo { width:160px; }




/* ABOUT — MOTTO */
.motto_list { gap:20px; }
.motto_list li { padding:40px 20px; }
.motto_list .icon { width:72px; }


/* ABOUT — EMBLEM */
.emblem_box { flex-direction:column; align-items:stretch; gap:30px; }
.emblem_img { width:100%; }
.emblem_txt { gap:30px; }


/* ABOUT — LOCATION */
.location_map { height:400px; }


/* ABOUT — TRAFFIC */
.traffic_list { grid-template-columns:1fr; gap:15px; }
.traffic_list .icon { width:64px; height:64px; }
}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/* ABOUT — FOUNDING */
.founding { gap:30px; }
.founding_name { padding-top:20px; }

/* ABOUT — VIRTUE */
.virtue_diagram { width:100%; }
.virtue_graphic { display:none; }
.virtue_list { position:static; display:flex; flex-direction:column; gap:10px; }
.virtue_list li { position:static; display:flex; align-items:center; gap:15px; white-space:normal; }
.virtue_list li[class*="item"] { transform:none; }
.virtue_list br { display:none; }
.virtue_list .icon { display:block; width:70px; flex-shrink:0; }
.virtue_list .icon img { display:block; width:100%; }

/* ABOUT — EDUCATION */
.edu_top { padding:30px 10px; }
.edu_center { top:57.5%; }
.edu_center img { display:none; }
.edu_center p { padding-top: 25px; font-size: 15px;}
.edu_graphic { width:min(400px, 100%); }
.edu_list { gap:10px; margin-top:30px; }
.edu_list li[class*="item"] { padding:20px; gap: 2px;}
.edu_goal { flex-direction:column; padding:0 20px; }
.edu_goal li { flex-direction:row; gap:15px; padding:20px 0; text-align:left; }
.edu_goal .head { flex-shrink:0; flex-direction: row-reverse;}
.edu_goal .icon { width:70px; height:70px; margin-bottom:0; }
.edu_goal .icon img { width:52px; }
.edu_goal .num { width:28px; height:28px; }
.edu_goal strong { display:block; }
.edu_goal li + li { border-left:0; border-top:1px solid var(--border); }

/* ABOUT — GREETING */
.greeting { gap:30px; }
.greeting_cont { gap:15px; }
.greeting_txt { gap:20px; }
.greeting_name { padding-top:15px; }

/* ABOUT — SYMBOL */
.symbol_box { flex-direction:column; gap:30px; padding:40px 20px; }
.symbol_logo { width:140px; }
.symbol_txt { width:100%; text-align: center;}



/* ABOUT — MOTTO */
.motto_list { flex-direction:column; gap:10px; }
.motto_list li { gap:10px; padding:25px 20px; }
.motto_list .icon { width:50px; }
.motto_list .txt{gap: 4px;}

/* ABOUT — EMBLEM */
.emblem_box { gap:20px; }
.emblem_txt { gap:25px; }
.emblem_info { gap:15px; }


/* ABOUT — LOCATION */
.location { gap:20px; }
.location_map { height:280px; }
.location_info { position:relative; }
.location_txt { gap:8px; }
.location_addr { gap:4px; }
.location_addr::before { width:20px; height:20px; margin-top:2px; font-size:20px; line-height:20px; }
.location_contact { gap:3px 20px; }
.location_btn { position:absolute; right:10px; top:-70px; z-index:5; width:auto; }
.map_btn { width:40px; height:40px; padding:0; }
.map_btn .txt { display:none; }
.map_btn .ico { width:40px; height:40px; }


/* ABOUT — TRAFFIC */
.traffic_list { gap:10px; }
.traffic_list li { align-items:flex-start; gap:15px; }
.traffic_list .icon { width:44px; height:44px; }
.traffic_list .txt { gap:2px; }
}