@charset "utf-8";

.header .head_menu h1 span {font-size: 1.25rem; padding-left: 10px;}
.header .head_menu h1 img {width: 140px;}
.quick li.ico_08 a::before {background-image: url(../images/layout/main/quick_08.png);}
.footer .ft_bottom .ft_sns a.blog {background: url(../images/layout/common/ico_blog.png) center no-repeat;}

.btn_sm {padding: .5rem 1rem; border-radius: 50px; background: #444; color: #fff!important; font-size: 1rem;}
.menu_tabs .depth4 ul li {width: calc(100%/5 - 10px);}
@media screen and (max-width: 768px){
    .menu_tabs .depth4 ul li {width: calc(100%/2 - 10px);}
}

/* 비전 및 가치 */
.vision {max-width: 940px; width: 100%; margin: 50px auto; display: flex; flex-wrap: wrap; gap: 20px;}
.vision .box {width: 100%; display: flex; flex-wrap: wrap; gap: 10px 20px;}
.vision .box h5 {width: 180px; font-size: 1.125rem; font-weight: 700; color: #333; text-align: center; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; border-radius: 10px; padding: 10px;}
.vision .box .txt {width: calc(100% - 200px); display: flex; gap: 10px;}
.vision .box .txt li {width: 100%; font-size: 1.0625rem; color: #333; text-align: center; padding: 1.125rem 10px; border-radius: 10px; list-style: none;}
.vision .box.box01 {display: block; text-align: center; background: url(/resources/site/arte/resource/images/contents/energize_title_bg.png) center no-repeat; background-size: 100%; padding: 30px 10px; color: #f26522;}
.vision .box.box01 h5 {border: none; width: 100%; color: inherit; font-size: 1.0625rem; font-weight: 400; letter-spacing: .5rem;}
.vision .box.box01 .txt {width: 100%; display: block;}
.vision .box.box01 .txt li {padding: 0; font-size: 1.25rem; color: inherit; font-weight: 500;}
.vision .box.box02 .txt li {border: 1px solid #e3c9bd; background: #fff7ea;}
.vision .box.box02 .txt li span {color: #F29300; font-size: 1.125rem; font-weight: 600;}
.vision .box.box03 .txt li {color: #fff; background: #897C75;}
.vision .box.box04 .txt {flex-wrap: wrap;}
.vision .box.box04 .txt li {width: calc(100% / 3 - 7px); border: 1px solid #e3c9bd; background: #fff7ea; line-height: 1.5;}
.vision .box.box05 .txt {flex-wrap: wrap; padding: 15px; border: 1px solid #e5c3b4; background: #fff4ef; border-radius: 10px;}
.vision .box.box05 .txt li {width: calc(100% / 5 - 8px); background: #fff; border: 1px dashed #E94E1B; font-size: 1rem; color: #E94E1B; padding: 10px;}
.vision .box.box05 .txt li.w100 {width: 100%; background: #E94E1B; color :#fff; font-size: 1.0625rem; border: none;}
.vision .box.box06 {display: block; border: 2px solid #F87A34; padding: 30px 10px; color: #f26522; text-align: center;}
.vision .box.box06 .txt {width: 100%; display: block;}
.vision .box.box06 .txt li {padding: 0; font-size: 1.25rem; color: inherit; font-weight: 500;}
.vision .box.box07 .txt {width: 100%;}
.vision .box.box07 .txt li {border: 1px dashed #bd927f; background: #fff4ef;}
.vision .box.box07 .txt li span {display: block; padding: 10px; border-radius: 3px; background: #ffe1d3; color: #E94E1B; font-weight: 600; margin-bottom: 10px;}
.vision .box.box07 .txt li div {font-size: 1rem;}
.vision .box.box08 {padding: 15px; border: 1px dashed #ddd; background: #fafafa; border-radius: 10px;}
.vision .box.box08 ul {width: 100%; display: flex; justify-content: center; gap: 40px 60px;}
.vision .box.box08 ul li {width: 100%; text-align: center; border-radius: 5px; border: 1px solid #e5c3b4; background: #fff; position: relative;}
.vision .box.box08 ul li + li::before {content: ""; background: url(/resources/site/arte/resource/images/contents/vis_arrow.png) center no-repeat; background-size: 100%; mix-blend-mode: luminosity; width: 50px; height: 50px; position: absolute; left: -52px; top: 50%; transform: rotate(90deg) translateX(-50%);}
.vision .box.box08 ul li span {display: block; padding: 10px; background: #E94E1B; color: #fff; border-radius: 5px 5px 0 0;}
.vision .box.box08 ul li div {padding: 10px 0; border-radius: 0 0 5px 5px; font-size: 1rem;}

@media screen and (max-width: 768px){
    .vision .box.box01 {background: #fff; border: 1px dotted #f26522; padding: 10px 10px 20px;}
    .vision .box h5,
    .vision .box .txt {width: 100%;}
}

@media screen and (max-width: 500px){
    .vision .box .txt {flex-wrap: wrap; gap: 5px;}
    .vision .box .txt li {padding: 10px;}
    .vision .box.box04 .txt li {width: 100%;}
    .vision .box.box05 .txt li:not(:first-child) {width: 100%; padding: 5px;}
    .vision .box.box06 {border: 1px dotted #f26522;}
    .vision .box.box08 ul {flex-wrap: wrap;}
    .vision .box.box08 ul li + li::before {left: 50%; top: -45px; transform: rotate(180deg) translateX(50%);}
}


/* 조직도 */
.org ul,
.org li {display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; position: relative;}
.org li.right {margin: 0 15% 0 auto;}
.org > li > ul > li > ul {gap: 80px; width: 100%;}
.org > li > ul > li > ul > li {width: calc(100% / 4 - 60px);}
.org > li > ul > li > ul > li .node {width: 100%; min-width: auto;}
.org .node {display: flex; align-items: center; justify-content: center; min-width: 220px; height: 50px; padding: 20px; background: #333; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; border-radius: 5px;}
.org .node.head {background: #E94E1B;}
.org .node.committee {background: #fff; border: 1px solid #E94E1B; color: #E94E1B;}
.org .node.manager {background: #ff8000; margin-bottom: 50px;}
.org .node.team {background: #897C75;}
.org > li::before {content: ""; width: 1px; height: 150px; background: #ddd; position: absolute; left: 50%; top: 50px; z-index: -1;}
.org > li > ul::before {content: ""; width: 35%; height: 1px; background: #ddd; position: absolute; left: 50%; top: 25px;  z-index: -1;}
.org > li > ul > li > ul::after {content: ""; width: 1px; height: 50px; background: #ddd; position: absolute; left: 50%; top: -100px; z-index: -1;}
.org > li > ul > li > ul::before {content: ""; width: 80.2%; height: 50px; border: 1px solid #ddd; border-bottom: none; position: absolute; left: 50%; top: -50px; transform: translateX(-50%); z-index: -1;}
.org > li > ul > li > ul > li:not(:first-child):not(:last-child)::before {content: ""; width: 1px; height: 50px; background: #ddd; position: absolute; left: 50%; top: -50px; z-index: -1;}

@media screen and (max-width: 768px){
    .org > li > ul > li > ul {gap: 10px 24px; }
    .org > li > ul > li > ul > li {width: calc(100% / 4 - 18px);}
    .org .node.committee {min-width: auto;}
}

@media screen and (max-width: 500px){
    .org > li > ul > li > ul > li {min-width: 220px;}
    .org > li > ul > li > ul::before {width: 120px;}
    .org > li > ul > li > ul > li:not(:first-child):not(:last-child)::before {display: none;}
}


/*찾아오시는 길*/
.map .root_daum_roughmap .cont {display: none;}
.map_info > ul > li {display: flex; flex-wrap: wrap; padding: 40px 0;}
.map_info > ul > li + li {padding-top: 0;}
.map_info > ul > li h4 {width: 250px; padding-left: 45px; color: #000; font-size: 20px; line-height: 1.4; position: relative;}
.map_txt {border-top: 2px solid #333; width: calc(100% - 250px);}
.map_txt li {border-bottom: 1px solid #ddd;padding: 30px 20px;}
.map_txt li:last-child {border-bottom: 0;}
.map_txt li strong {color: #E94E1B;}
.map_info > ul > li h4::before {content:''; width: 22px; height: 22px; position: absolute; left: 12px; top: 2px; background-size: cover;}
.map_info > ul > li h4::after {content:''; width: 35px; height: 35px; position: absolute; top: -5px; left: 5px; border-radius: 100%;z-index: -1}
.add::before {background: url(../images/contents/school-line.svg) no-repeat center center;}
.sub::before {background: url(../images/contents/subway-line.svg) no-repeat center center;}
.bus::before {background: url(../images/contents/bus-line.svg) no-repeat center center;}
.car::before {background: url(../images/contents/roadster-line.svg) no-repeat center center;}
.add::after {background-color: #565656;}
.sub::after {background-color: #f2be00;}
.bus::after {background-color: #f29300;}
.car::after {background-color: #f15922;}

@media (max-width: 768px){
    .map_info > ul > li h4 {width: 100%; margin-bottom: 20px;}
    .map_txt {width: 100%;}
}


/* 제도 안내 */
.process {margin-top: 2rem;}
.process ul {display: flex; gap: 10px 15px;}
.process ul li {position: relative; flex: 1; height: 50px; line-height: 50px; text-align: center; background: #ff8000; border-left: none; color: #fff; font-size: 1.0625rem;}
/*.process ul li:first-child {border-left: 1px solid #ff8000;}*/
.process ul li::before {content: ""; position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 15px solid #fff; z-index: 1;}
.process ul li:first-child::before {display: none;}
.process ul li span::after {content: ""; position: absolute; top: 0; right: -15px; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 15px solid #ff8000; z-index: 2;}
.process ul li:nth-child(1) {background: #FBC400;}
.process ul li:nth-child(1) span::after {border-left-color: #FBC400;}
.process ul li:nth-child(2) {background: linear-gradient(to right, #FBC400, #ff8000);}
.process ul li:nth-child(4) {background: linear-gradient(to right, #ff8000, #E94E1B);}
.process ul li:nth-child(4) span::after {border-left-color: #E94E1B;}
.process ul li.goal {background: #E94E1B;}
.process ul li.goal::after {border-left-color: #E94E1B;}
.process ul li.goal span::after {border-left-color: #E94E1B;}

.role {position: relative; width: 100%; margin: 3rem 0; text-align: center;}
.role .diagram {display: flex; justify-content: center; margin-bottom: 20px;}
.role .diagram .circle {width: 220px; height: 220px; border-radius: 50%; background: #E94E1B; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; font-weight: 500; mix-blend-mode: multiply;}
.role .diagram .circle.circle-left {margin-right: -40px; background: #ff8000;}
.role h5 {font-size: 1.75rem; color: #333; font-weight: 700; margin: 50px 0 -30px;}
.role .arc {position: relative; width: 100%; height: 300px;}
.role .arc .item {position: absolute; width: 160px; height: 160px; background: #fff; border: 1px dotted #bbb; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; line-height: 1.3; z-index: 2; transition: .3s;}
.role .arc .item.item-1 {left: 10%; top: 0;}
.role .arc .item.item-2 {left: 25%; top: 80px;}
.role .arc .item.item-3 {left: 50%; top: 130px; transform: translateX(-50%);}
.role .arc .item.item-4 {right: 25%; top: 80px;}
.role .arc .item.item-5 {right: 10%; top: 0;}
.role .arc .dotted-line {position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 100%; z-index: -1;}

.txt_box {text-align: left; background: #fff8f5; border-radius: 15px; padding: 2rem 2.5rem;}
.txt_box h6 {font-size: 1.25rem; color: #E94E1B; margin-bottom: 10px;}

.orbit {position: relative; width: 600px; height: 750px; margin: 0 auto; display: flex; justify-content: center; align-items: center; transition: .3s;}
.orbit .center {position: absolute; width: 180px; height: 180px; background: #E94E1B; border-radius: 50%; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1rem; text-align: center; z-index: 2;}
.orbit .center strong {font-size: 1.25rem; margin-bottom: 5px;}
.orbit .inner,
.orbit .outer {position: absolute; border-radius: 50%;}
.orbit .inner {width: 400px; height: 400px; z-index: 1; border: 1px solid #ddd; background: #ff80000d;}
.orbit .outer {width: 650px; height: 650px; z-index: 0; border: 1px dashed #ddd; background: #FBC40005;}
.orbit .label {position: absolute; left: 50%; transform: translateX(-50%); text-align: center; font-size: 1rem; font-weight: 500; padding: 5px 20px; color: #fff; border-radius: 10px;}
.orbit .inner .label {top: 40px; background: #ff8000;}
.orbit .outer .label {top: 65px; background: #FBC400;}
.orbit .node {position: absolute; width: 120px; height: 120px; background: #fff; border: 1px solid #ff8000; color: #ff8000; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 1.0625rem; line-height: 1.3;}
.orbit .inner .node.inner-1 {top: 20%; left: -15%;}
.orbit .inner .node.inner-2 {top: 20%; right: -15%;}
.orbit .inner .node.inner-3 {bottom: 5%; left: -7%;}
.orbit .inner .node.inner-4 {bottom: -15%; left: 50%; transform: translateX(-50%);}
.orbit .inner .node.inner-5 {bottom: 5%; right: -7%;}
.orbit .outer .node {border-color: #FBC400; color: #c99d00;}
.orbit .outer .node.outer-1 {top: -10%; left: 50%; transform: translateX(-50%);}
.orbit .outer .node.outer-2 {top: 5%; left: 20px;}
.orbit .outer .node.outer-3 {top: 5%; right: 20px;}
.orbit_txt {display: flex; align-items: center; justify-content: center;}
.orbit_txt p {font-size: 1.25rem; font-weight: 700; color: #E94E1B;}

@media (max-width: 1023px){
    .role .arc .item {width: 120px; height: 120px;}
    .role .arc .item.item-2,
    .role .arc .item.item-4 {top: 60px;}
    .role .arc .item.item-3 {top: 90px;}
}

@media (max-width: 768px){
    .role {width: 100%;}
    .role h5 {margin: 30px 0;}
    .role .diagram .circle {width: 130px; height: 130px;}
    .role .diagram .circle.circle-left {margin-right: -25px;}
    .role .arc {display: flex; gap: 10px; height: auto;}
    .role .arc .item {position: relative; width: 100%; height: auto; border-radius: 5px; left: initial!important; right: initial!important; top: 0!important; transform: initial!important;}
    .role .arc .dotted-line {display: none;}

    .orbit {width: 100%; height: 70vh; transform: scale(0.7);}
    .orbit .node,
    .orbit .center strong {font-size: 1.75rem;}
    .orbit .label,
    .orbit .center {font-size: 1.5rem;}
}

@media (max-width: 500px){
    .process ul {gap: 10px;}

    .role .arc {flex-wrap: wrap;}
    .role .arc .item {width: calc(100% / 2 - 10px); padding: .5rem;}

    .orbit {height: 60vh; transform: scale(0.6);}
}


/* 자격 안내 */
.step {display: flex; flex-direction: column; gap: 100px;}
.step .lebel {position: relative;}
.step .lebel.lebel_2::after {content: ""; background: url(/resources/site/arte/resource/images/contents/level_arrow.png) center no-repeat; width: 617px; height: 120px; background-size: 100%; position: absolute; right: 120px; bottom: -122px;}
.step .lebel ul {display: flex; align-items: center; gap: 50px;}
.step .lebel ul li {width: calc(100% - 50px - 13rem); display: flex; flex-direction: column; gap: 25px;}
.step .lebel ul li .row {display: flex; gap: 50px; position: relative;}
.step .lebel ul li .row .box {width: 100%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; background: #fff8f5; border-radius: 100px; padding: 2rem 1rem; font-size: 1rem; text-align: center; position: relative;}
.step .lebel ul li .row .box::after {content: "»"; color: #ff6439; font-size: 2rem; position: absolute; right: -35px; top: 50%; transform: translateY(-50%);}
.step .lebel.lebel_2 ul li .row .box:first-child {width: 60%;}
.step .lebel.lebel_2 ul li .row .box:last-child {width: calc(40% - 50px);}
.step .lebel ul li .row .box span {color: #E94E1B; font-size: 1.125rem; font-weight: 600; text-align: center;}
.step .lebel ul li .row .box small {display: block; width: 100%; text-align: center;}
.step .lebel ul li .row .box span small {display: inline-block; width: auto; color: #555;}
.step .lebel ul li:last-child {align-items: center; justify-content: center; width: 13rem; height: 13rem; border-radius: 200px; background: #E94E1B; color: #fff; font-size: 1.25rem; letter-spacing: .5rem; text-align: center;}
.step .lebel ul li:last-child b {font-size: 5rem; margin-left: 1.5rem;}

@media (max-width: 1023px){
    .step .lebel.lebel_2::after {width: 50%;}

}

@media (max-width: 768px){
    .step .lebel.lebel_2::after {display: none;}
    .step .lebel ul {flex-wrap: wrap;}
    .step .lebel ul li {flex-direction: row; width: 100%; gap: 30px;}
    .step .lebel ul li:last-child {width: 100%; height: auto; border-radius: 10px; padding: .5rem;}
    .step .lebel ul li:last-child b {font-size: 1.5rem;}
    .step .lebel.lebel_2 ul li .row {flex-direction: column; width: calc(50% - 15px);}
    .step .lebel.lebel_2 ul li .row .box:first-child,
    .step .lebel.lebel_2 ul li .row .box:last-child {width: 100%; height: 100%;}
    .step .lebel ul li .row {width: 100%;}
    .step .lebel ul li .row .box {width: 100%; border-radius: 10px;}
    .step .lebel ul li .row .box::after {right: inherit; top: inherit; left: 50%; bottom: -45px; transform: translateX(-50%) rotate(90deg);}
}


/* 교육과정 */
.art {display: flex; flex-wrap: wrap; gap: 0 40px;}
.art li {width: calc(100% / 4 - 30px); display: flex; flex-wrap: wrap; justify-content: center; text-align: center;}
.art li .img {position: relative; z-index: 2;}
.art li .box {width: 100%; padding: 4rem 1rem 2rem; background: #fafafa; border-radius: 25px; transform: translateY(-3rem);}
.art li .box .tit {font-size: 1.125rem; font-weight: 700; color: #0d3349;}
.art li .box .txt {font-size: 1rem; margin-top: 10px;}

@media (max-width: 768px){
    .art {gap: 0 10px;}
    .art li {width: calc(100% / 2 - 5px);}
}


/* 자격 취득 절차 */
.certificate {display: flex; flex-wrap: wrap; gap: 0 8rem;}
.certificate li {width: calc(100% / 4 - 6rem); display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; position: relative;}
.certificate li + li::after {content: "»"; color: #ff6439; font-size: 2rem; position: absolute; left: -80px; top: 33%; transform: translateY(-50%);}
.certificate li .box {width: 100%; height: 0; padding-top: 100%; position: relative; background: #fff8f5; border-radius: 20px;}
.certificate li .box .inner {position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; width: 100%; height: 100%;}
.certificate li .box .inner .tit {width: 100%; text-align: center; font-size: 1.125rem; font-weight: 700; color: #ff6439; margin-top: 10px;}
.certificate li .box .inner .num {position: absolute; left: 0; top: 0; padding: .75rem; border-radius: 20px 5px 50px 5px; background: #ff6439; color: #fff; font-size: 14px;}
.certificate li .txt {text-align: center; line-height: 1.5; margin-top: 1.25rem;}

@media (max-width: 1023px){
    .certificate {gap: 0 4rem}
    .certificate li {width: calc(100% / 4 - 3rem);}
    .certificate li + li::after {left: -26px;}
}

@media (max-width: 768px){
    .certificate li {width: 100%;}
    .certificate li + li {margin-top: 3rem;}
    .certificate li .box {padding-top: 30%;}
    .certificate li .box .img {text-align: center;}
    .certificate li .box .img img {width: 60%;}
    .certificate li + li::after {display: none;}
}


/* 수강신청 바로가기 */
.class {display: flex; flex-wrap: wrap; gap: 15px 30px;}
.class li {width: calc(50% - 30px);}
.class li a {width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; background: #fff8f5; border-radius: 10px; transition: .3s; position: relative;}
.class li a::after {content: "↗"; width: 45px; height: 45px; border-radius: 50%; background: #fff8f5; color: #fff8f5; font-size: 1.5rem; text-align: center; line-height: 50px; position: absolute; right: 2rem; top: 2rem; transition: .3s;}
.class li a:hover::after {background: #E94E1B; color: #fff;}
.class li a:hover {transform: translateY(-10px); color: #E94E1B;}
.class li a .ico {transition: .3s;}
.class li a:hover .ico {transform: translateY(12px);}
.class li a .txt {width: 100%; font-size: 1.25rem; font-weight: 600; text-align: center;}

@media (max-width: 768px){
    .class li {width: 100%;}
    .class li a {padding: 1rem;}
    .class li a::after {background: #333;}
}