/*인사말*/
.greeting-wrap::after{content:""; display: table; clear: both;}
.greeting-image-box{width: 500px; float: left; position: relative;}
.greeting-image-box::after{content:"";display: block; position: absolute; right: -10px; bottom: -10px; background: url(../../images/sub/greeting_main_back.png) no-repeat; width: 100%; height: 100%; z-index: -1; background-size: cover;}
.greeting-name-box{width: 100%; height: 100%; position: absolute; left: 0; bottom: 0;}
.greeting-name-box > span{display: block; font-size: 15px; color: white; padding-left: 50px; position: absolute; bottom: 5.5%; letter-spacing: .8em; transform: skew(-10deg);}
.greeting-name-box .greeting-name{position: absolute; right: -50px; bottom: -30px; background-color: #A90057; text-align: center; color: white; padding: 40px 22px 18px 22px; border-top-left-radius: 50px;}
.greeting-name-box .greeting-name::after{content:""; display: block; position: absolute; width: 50px; height: 50px; right: -22px; bottom: -25px; background-color: rgba(206,40,86,.5); z-index: 2;}
.greeting-name-box .greeting-name span{font-size: 14px; line-height: 23px;}
.greeting-name-box .greeting-name h1{font-size: 30px; font-family:'Arita Medium';}
.greeting-name-box::after{content:""; display: table; clear: both;}
.greeting-text-box{width: calc(100% - 500px); float: left; padding-left: 122px;}
.greeting-text-header{position: relative; padding-right: 120px; padding-top: 21px;}
.greeting-text-header::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 86px; height: 77px; background: url(../../images/sub/dot_left.png) no-repeat;}
.greeting-text-header::after{content:""; display: block; position: absolute; right: 0; top: 0; width: 117px; height: 113px; background: url(../../images/sub/text_deco.png) no-repeat;}
.greeting-text-header span{font-size: 40px; font-family: 'Nanum Myeongjo'; font-weight: 400; color: #333333; font-style: italic; display: block; padding-left: 92px;}
.greeting-text-header h1{font-size: 36px; line-height: 60px; color: #a90056; font-family: 'Nanum Myeongjo'; font-weight: 700; font-style: italic; margin-top: 5px; display: inline-block; position: relative;}
.greeting-text-header h1 p{z-index: 2; position: relative; }
.greeting-text-header h1::after{content:""; display: block; position: absolute; right: -20px; bottom: -15px; width: 86px; height: 77px; background: url(../../images/sub/dot_right.png) no-repeat;}
.greeting-text-content{margin-top: 43px;}
.greeting-text-content li{margin-bottom: 25px;}
.greeting-text-content li:last-child{margin-bottom: 0;}
.greeting-text-content li h1{font-size: 18px; font-weight: 500; color: #222; margin-bottom: 5px;}
.greeting-text-content li p{font-size: 16px; line-height: 30px; color: #666;}
.greeting-text-content > p{font-size: 16px; color: #666; margin-top: 35px;}

@media all and (max-width: 1250px) {
  .greeting-image-box{width: 400px;}
  .greeting-name-box > span{bottom: 5%;}
  .greeting-text-box{width: calc(100% - 400px); padding-left: 80px;}
}

@media all and (max-width: 1024px) {
  .greeting-image-box{float: none; margin: 0 auto;}
  .greeting-text-box{width: 100%; float: none; padding-left: 0; margin-top: 100px;}
}

@media all and (max-width: 768px) {
  .greeting-image-box{width: calc(100% - 50px); margin: 0;}
  .greeting-image-box img{width: 100%;}
  .greeting-text-header::after{display: none;}
  .greeting-text-header{padding-right: 0;}
  .greeting-text-header span{font-size: 30px; padding-left: 0;}
  .greeting-text-header h1{font-size: 28px; line-height: 40px}
  .greeting-text-header::before, .greeting-text-header h1::after{display: none}
}

@media all and (max-width: 460px) {
  .greeting-name-box > span{padding-left: 20px; font-size: 12px; letter-spacing: .25em;}
}

/*약력*/
.history-wrap::after{content:""; display: table; clear: both;}
.history-wrap .history-image-box{width: 550px; float: left; position: relative; z-index: 2;}
.history-wrap .history-image-box::after{content:""; display: block; position: absolute; width: 100%; height: 100%; background: url(../../images/sub/history_background.png) no-repeat; background-size: cover; right: -10px; bottom: -10px; z-index: -1;}
.history-wrap .history-text-inner{width: calc(100% - 550px); float: right; margin-top: 50px;}
.history-wrap .history-text-box{background: url(../../images/sub/history_text_background.png) no-repeat; background-size: cover; padding: 41.25px 0 41.25px 90px; position: relative;}
.history-wrap .history-text-box::before{content:"Gangneung-Wonju National University"; display: block; position: absolute; right: 0; top: -31px; font-size: 24px; color: #dfdfdf; font-family: "Gm"; font-weight: 400;}
.history-wrap .history-text-box::after{content:""; display: block; position: absolute; width: 122px; height: 100px; background: url(../../images/sub/history_text_deco.png); right: 0; bottom: -32px;}
.history-wrap .history-text h1{font-weight: 500; font-size: 25px; color: #222222; margin-bottom: 10px;}
.history-wrap .history-text p{font-size: 17px; line-height: 30px; color: #666666}
.history-wrap .history-career-box{margin-left: 12.6%; position: relative; margin-top: 40px;}
.history-wrap .history-career-text{position: absolute; left: 0; top: 0; background: url(../../images/sub/career_background.png) no-repeat center center;}
.history-wrap .history-career-text::after{content:""; display:block; position: absolute; width: 207px; height: 129px; background: url(../../images/sub/career_deco.png) no-repeat center center; left: -28px; bottom: -31px; z-index: -1;}
.history-wrap .history-career-text h1{ color: white; font-size: 30px; line-height: 35px; font-weight: 500; padding: 56px 65.5px 70px 55.5px;}
.history-wrap .history-career-list{margin-left: 60px;}
.history-wrap .history-career-list > h1{text-align: center; font-size: 60px; color: rgba(169,0,87,.3); font-family:'Titil Bold';}
.history-wrap .history-career-list ul{position: relative;}
.history-wrap .history-career-list ul::before{content:""; display: block; position: absolute; width: 1px; height: 94%; background-color : #d8d8d8; left: 50%; top: 17px;}
.history-wrap .history-career-list li{margin-bottom: 25px;}
.history-wrap .history-career-list li:last-child{margin-bottom: 0;}
.history-wrap .history-career-list li:nth-child(odd){text-align: left;}
.history-wrap .history-career-list li:nth-child(even){text-align: right;}
.history-wrap .history-career-list li:nth-child(odd) .history-career{text-align: right; padding-right: 30px;}
.history-wrap .history-career-list li:nth-child(even) .history-career{text-align: left; padding-left: 30px;}
.history-wrap .history-career-list .history-career{width: 50%; display: inline-block; position: relative;}
.history-wrap .history-career-list .history-career::before{content:""; display: block; position: absolute; width: 10px; height: 10px; background-color: #a90057; border-radius: 50%;}
.history-wrap .history-career-list .history-career::after{content:""; display: block; position: absolute; width: 6px; height: 3px; background-color: #a90057;}
.history-wrap .history-career-list li:nth-child(odd) .history-career::before{right: -5px; top: 15px;}
.history-wrap .history-career-list li:nth-child(odd) .history-career::after{right: 7px; top: 19px;}
.history-wrap .history-career-list li:nth-child(even) .history-career::before{left: -5px; top: 15px;}
.history-wrap .history-career-list li:nth-child(even) .history-career::after{left: 7px; top: 19px;}
.history-wrap .history-career-list .history-career h1{font-weight: 600; color: #969697; font-size: 30px; margin-bottom: 7px;}
.history-wrap .history-career-list .history-career p{color: #666666;}

@media all and (max-width: 1600px) {
  .history-wrap .history-career-box{margin-left: 50px}
}

@media all and (max-width: 1500px) {
  .history-wrap .history-image-box{width: 400px}
  .history-wrap .history-text-inner{width: calc(100% - 400px);}
  .history-wrap .history-career-list{margin-left: 140px;}
  .history-wrap .history-career-list > h1{font-size: 50px;}
  .history-wrap .history-career-list .history-career h1{font-size: 22px;}
  .history-wrap .history-career-list .history-career p{font-size: 14px;}
}

@media all and (max-width: 1250px) {
  .history-wrap .history-career-list > h1{font-size: 40px; line-height: 50px;}
  .history-wrap .history-career-list > h1 span{display : block;}
  .history-wrap .history-career-text h1{font-size: 20px; padding: 50px 65.5px 60px 55.5px;}
  .history-wrap .history-career-text{background-size: cover;}
}

@media all and (max-width: 1024px) {
  .history-wrap .history-image-box{float: none; margin: 0 auto;}
  .history-wrap .history-text-box{padding: 41.25px 10px; text-align: center;}
  .history-wrap .history-text-inner{width: 100%; float: none;}
  .history-wrap .history-career-text{position: relative; width: 159px; margin: 0 auto;}
  .history-wrap .history-career-box{margin-left: 0;}
  .history-wrap .history-career-list{margin-top: 50px; margin-left: 0;}
  .history-wrap .history-career-list > h1 span{display: inline-block; margin: 0 5px;}
  .history-wrap .history-career-list ul{margin-top: 20px;}
  .history-wrap .history-career-list ul::before{height: 95%;}
}

@media all and (max-width: 768px) {
  .history-wrap .history-text-box::before{font-size: 16px; top: -20px;}
}

@media all and (max-width: 500px) {
  .history-wrap .history-image-box{width: 100%;}
  .history-wrap .history-text-box::before{font-size: 13px; top: -16px;}
}

/*역대교장*/
.frame-list ul{margin: 0 -2.2%;}
.frame-list ul::after{content:""; display: table; clear: both;}
.frame-list li{float: left; width: 16.6666%; position: relative; padding: 0 2.2%;}
.frame-list li .frame-background img{width: 100%;}
.frame-list li .frame-content{position: absolute; left:0; top: 18%; width: 100%; text-align: center;}
.frame-list li.line-two .frame-content{top: 16%;}
.frame-list li .frame-image{width: 40.2%; display: inline-block; position: relative;}
.frame-list li .frame-image::before{content:""; display: block; position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); border: 5px solid white; left: -5px; top: -5px; z-index: 2;}
.frame-list li .frame-image::after{content:""; display: block; position: absolute; width: calc(100% + 10px); height: calc(100% + 10px); box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.35); left: -5px; top: -5px; z-index: 3;}
.frame-list li .frame-info{margin-top: 17px; padding: 0 20%;}
.frame-list li .frame-info h1{font-size: 14px; color: #1c1c1c}
.frame-list li .frame-info p{font-size: 14px; color: #666666;}

@media all and (max-width: 1500px) {
  .frame-list li{width: 23%; margin-top: 20px;}
  .frame-list li:nth-child(-n+4){margin-top: 0;}
}

@media all and (max-width: 1024px) {
  .frame-list li{width: 25%; margin-bottom: 30px;}
  .frame-list li .frame-info p{font-size: 13px;}
  .frame-list li .frame-info{padding: 0 16%; margin-top: 12px;}
}

@media all and (max-width: 768px) {
  .frame-list li{width: 33.3333%;}
}

@media all and (max-width: 600px) {
  .frame-list li{width: 50%;}
  .frame-list li .frame-info{margin-top: 13%;}
  .frame-list li.line-two .frame-info{margin-top: 10%;}
}

/*교훈*/
.lesson-wrap{text-align: center;}
.lesson-image{width: 100%; height: 500px; background: url(../../images/sub/lesson_background.jpg) no-repeat top center; position: relative; background-size: cover;}
.lesson-image::before{content:""; display: block; position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px; border: 1px solid rgba(255,255,255,0.7);}
.lesson-content{display: inline-block; background-color: white; position: relative; margin-top: -152px; padding: 0 5%; width: 100%; max-width: 1200px;}
.lesson-content-box{margin-top: -58px;}
.lesson-content .lesson-title{padding: 74px 42.5px 82px 33.5px; display: inline-block; background: url(../../images/sub/career_background.png) no-repeat center center;}
.lesson-content .lesson-title h1{font-size: 27px; font-weight: 500; color: white;}
.lesson-text-top{position: relative;}
.lesson-text-top h1{font-weight: 500; font-size: 25px; line-height: 40px; color: #222222; padding-bottom: 20px;}
.lesson-text-top::after{content:""; display: block; width: 77%; height: 1px; background-color: #d8d8d8; margin: 0 auto;}
.lesson-text-bottom{margin-top: 30px;}
.lesson-text-bottom p{font-size: 17px; line-height: 30px; color: #666;}
.color_1{color: #a90057;}
.color_2{color: #008dfa;}
.color_3{color: #ff6600;}
.lesson-content-image{margin-top: 30px; background: url(../../images/sub/lesson_background.png) no-repeat bottom 13% center;}
.lesson-content-image li{display: inline-block; position: relative;}
.lesson-content-image li h1{width: 210px; text-align: center; border-radius: 20px; border-top-left-radius: 0; color: white; font-size: 18px; padding: 9px 0; margin: 0 auto;}
.lesson-content-image li h1 .lesson-bold{font-weight: 500;}
.lesson-content-image li h1 .lesson-noto{font-family: "Noto Medium";}
.lesson-content-image .lesson-color-1 h1{background-color: #a90057}
.lesson-content-image .lesson-color-2 h1{background-color: #25aae2}
.lesson-content-image .lesson-color-3 h1{background-color: #f39100}
.lesson-content-image li p{font-weight: 400; font-size: 14px; line-height: 23px; color: #666666;}
.lesson-content-image li p span{display: block; color: #003162; margin-bottom: 5px; font-size: 16px; margin-top: 10px; font-weight: 400;}
.lesson-content-image li .lesson-content-image-img{position: relative;}
.lesson-content-image .lesson-content-image-img img{position: relative; z-index: 2;}
.lesson-content-image .lesson-color-1 .lesson-content-image-img{padding-top: 45px;}
.lesson-content-image .lesson-color-1 .lesson-content-image-img::before{content:""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #949494; left: 50%; top: 0; margin-left: -6px;}
.lesson-content-image .lesson-color-1 .lesson-content-image-img::after{content:""; display: block; position: absolute; width: 1px; height: 100%; background-color: #949494; left: 50%; bottom: 0;}
.lesson-content-image .lesson-color-2{top: -30px;}
.lesson-content-image .lesson-color-2 .lesson-content-image-text{float: left; margin-right: 20px; margin-top: 22px;}
.lesson-content-image .lesson-color-2 .lesson-content-image-img{float: right; padding-left: 42px;}
.lesson-content-image .lesson-color-2 .lesson-content-image-img::before{content:""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #949494; left: 0; top: 50%; margin-top: -6px;}
.lesson-content-image .lesson-color-2 .lesson-content-image-img::after{content:""; display: block; position: absolute; width: 100%; height: 1px; background-color: #949494; left: 0; top: 50%;}
.lesson-content-image .lesson-color-3{top: -30px; left: 15px;}
.lesson-content-image .lesson-color-3 .lesson-content-image-text{float: right; margin-left: 20px; margin-top: 22px;}
.lesson-content-image .lesson-color-3 .lesson-content-image-img{float: left; padding-right: 42px;}
.lesson-content-image .lesson-color-3 .lesson-content-image-img::before{content:""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 50%; background-color: #949494; right: 0; top: 50%; margin-top: -6px;}
.lesson-content-image .lesson-color-3 .lesson-content-image-img::after{content:""; display: block; position: absolute; width: 100%; height: 1px; background-color: #949494; right: 0; top: 50%;}


@media all and (max-width: 1500px) {
  .lesson-content{width: 90%;}
}

@media all and (max-width: 1250px) {
  .lesson-content-image{background: none;}
  .lesson-content-image li .lesson-content-image-img{width: 110px;}
  .lesson-content-image .lesson-color-1 .lesson-content-image-img{margin: 0 auto; margin-bottom: 14px;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img, .lesson-content-image .lesson-color-3 .lesson-content-image-img{width: 152px;}
}

@media all and (max-width: 1024px) {
  .lesson-image{height: 400px;}
  .lesson-content-image{background: none;}
  .lesson-content-image li{display: block; margin-bottom: 50px;}
  .lesson-content-image li:last-child{margin-bottom: 0;}
  .lesson-content-image .lesson-color-1 .lesson-content-image-text{margin-bottom: 20px;}
  .lesson-content-image .lesson-color-2{top: 0;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-text{float: none; margin-right: 0; margin-bottom: 10px;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img{float: none;}
  .lesson-content-image .lesson-color-3{top: 0; left: 0;}
  .lesson-content-image .lesson-color-3 .lesson-content-image-text{float: none; margin-left: 0; margin-bottom: 20px;}
  .lesson-content-image .lesson-color-3 .lesson-content-image-img{float: none;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img, .lesson-content-image .lesson-color-3 .lesson-content-image-img{width: 120px; padding-top: 45px;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img{padding-left: 0; margin: 0 auto;}
  .lesson-content-image .lesson-color-3 .lesson-content-image-img{padding-right: 0; margin: 0 auto;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img::before{left: 50%; top: 0; margin-top: 0; margin-left: -6px;}
  .lesson-content-image .lesson-color-2 .lesson-content-image-img::after{width: 1px; height: 100%; left: 50%; top: 0;}
  .lesson-content-image .lesson-color-3 .lesson-content-image-img::before{right: 50%; top: 0; margin-top: 0; margin-right: -6px;}
  .lesson-content-image .lesson-color-3 .lesson-content-image-img::after{width: 1px; height: 100%; right: 50%; top: 0;}
  .lesson-content-image br{display: none;}
}

@media all and (max-width: 768px) {
  .lesson-image{height: 300px;}
  .lesson-text-top h1{font-size: 20px; line-height: 30px;}
}

/*사명*/
.mission-wrap{text-align: center;}
.mission-image{width: 100%; height: 500px; background: url(../../images/sub/mission_background.jpg) no-repeat top center; position: relative; background-size: cover;}
.mission-image::before{content:""; display: block; position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px; border: 1px solid rgba(255,255,255,0.7);}
.mission-content{display: inline-block; background-color: white; position: relative; margin-top: -152px; padding: 0 5%; width: 100%; max-width: 1200px;}
.mission-content-box{margin-top: -58px;}
.mission-content .mission-title{padding: 59px 46.5px 67px 37.5px; display: inline-block; background: url(../../images/sub/mission_title_background.png) no-repeat center center;}
.mission-content .mission-title h1{font-size: 20px; font-weight: 500; line-height:35px; color: white;}
.mission-content .mission-title h1 span{font-size: 27px; font-weight: 500; color: white; display: block;}
.mission-text-inner{margin-top: 85px;}
.mission-text p{font-size: 25px; line-height: 40px; font-weight: 500;}
.mission-main-title{display: inline-block; background-color: #ededed; position: relative; padding: 22.75px 128px; border-radius: 50px;}
.mission-main-title::before{content:""; display: block; position: absolute; width: 47px; height: 51px; background: url(../../images/sub/title_deco.png); left: 50%; margin-left: -23.5px; top: -33px;}
.mission-main-title p{font-size: 23px; color: #222; font-weight: 500;}
.mission-chapter{margin-top: 80px; margin-bottom: 10px;}
.mission-chapter ul::after{content:""; display: table; clear: both;}
.mission-chapter li{float: left; width: 33.3333%; padding: 0 45px;}
.mission-chpater-box{position: relative; position: relative; border-radius: 20px;}
.mission-chapter .mission-chapter-logo{width: 70px; height: 70px; border-radius: 50%; position: absolute; top: -35px; left: 50%; margin-left: -35px;}
.mission-chapter li:nth-child(1) .mission-chpater-box{border: 3px solid #e83692;}
.mission-chapter li:nth-child(2) .mission-chpater-box{border: 3px solid #53a3eb;}
.mission-chapter li:nth-child(3) .mission-chpater-box{border: 3px solid #e89451;}
.mission-chapter li:nth-child(1) .mission-chapter-logo{background: #a90057 url(../../images/sub/mission_icon_1.png) no-repeat center center;}
.mission-chapter li:nth-child(2) .mission-chapter-logo{background: #0067c3 url(../../images/sub/mission_icon_2.png) no-repeat center center;}
.mission-chapter li:nth-child(3) .mission-chapter-logo{background: #ff7200 url(../../images/sub/mission_icon_3.png) no-repeat center center;}
.mission-chapter .mission-chapter-title{padding: 44px 0 142px;}
.mission-chapter .mission-chapter-title p{font-weight: 500; font-size: 18px;}
.mission-chapter li:nth-child(1) .mission-chapter-title p{color : #a90057}
.mission-chapter li:nth-child(2) .mission-chapter-title p{color : #0067c3}
.mission-chapter li:nth-child(3) .mission-chapter-title p{color : #ff7200}
.mission-chapter-content{position: absolute; width: calc(100% + 6px); left: -3px; background-color: white; bottom: -3px;}
.mission-chapter-content-box{height: 120px; display: table; width: 100%; border-radius: 20px;}
.mission-chapter li:nth-child(1) .mission-chapter-content-box{background: url(../../images/sub/mission_back_1.png) no-repeat center center;}
.mission-chapter li:nth-child(2) .mission-chapter-content-box{background: url(../../images/sub/mission_back_2.png) no-repeat center center;}
.mission-chapter li:nth-child(3) .mission-chapter-content-box{background: url(../../images/sub/mission_back_3.png) no-repeat center center;}
.mission-chapter-content-box p{display: table-cell; vertical-align: middle; line-height: 25px; color: white;}
.mission-chapter-order{padding-top: 55px; background: url(../../images/sub/mission_arrow.png) no-repeat top center; margin-top: 30px;}
.mission-chapter-order-box{background: url(../../images/sub/mission_line.png); height: 80px; width: 100%; display: table; position: relative; border-radius: 50px;}
.mission-chapter-order-box::before{content:""; display: block; position: absolute; width: calc(100% - 14px); height: calc(100% - 14px); left: 7px; top: 7px; border-radius: 50px; background-color: white;}
.mission-chapter-order-box p{display: table-cell; vertical-align: middle; font-weight: 500; font-size: 18px; color: #666666; position: relative; z-index: 3;}

@media all and (max-width: 1500px) {
  .mission-content{width: 90%;}
  .mission-chapter li{padding: 0 20px;}
  .mission-chapter-content-box p{font-size: 14px; line-height: 20px;}
}

@media all and (max-width: 1024px) {
  .mission-image{height: 400px;}
  .mission-chapter li{float: none; width: 100%; padding: 0; margin-bottom: 50px;}
  .mission-chapter li:last-child{margin-bottom: 0;}
  .mission-chapter li:nth-child(1) .mission-chapter-content-box,.mission-chapter li:nth-child(2) .mission-chapter-content-box,.mission-chapter li:nth-child(3) .mission-chapter-content-box{background-size: cover;}
  .mission-chapter-content-box p{font-size: 16px; line-height: 25px; padding: 0 20px;}
}

@media all and (max-width: 768px) {
  .mission-image{height: 300px;}
  .mission-text p{font-size: 20px; line-height: 30px;}
  .mission-chapter-content-box p{font-size: 14px; line-height: 20px;}
}

@media all and (max-width: 460px) {
  .mission-main-title{display: block; padding: 22px 0; width: 100%;}
}

/*비전*/
.vision-list ul{margin: 0 -42.5px; padding-left: 27px;}
.vision-list ul::after{content:""; display: table; clear: both;}
.vision-list li{width: 25%; float: left; padding: 0 42.5px;}
.vision-box{position: relative;}
.vision-box .vision-logo-box{position: absolute; width: 100px; height: 100px; top: -40px; left: -30px; border-radius: 50%;}
.vision-list li:nth-child(1) .vision-box .vision-logo-box{background-color: #a90057;}
.vision-list li:nth-child(2) .vision-box .vision-logo-box{background-color: #25aae2;}
.vision-list li:nth-child(3) .vision-box .vision-logo-box{background-color: #f39100;}
.vision-list li:nth-child(4) .vision-box .vision-logo-box{background-color: #a18e6b;}
.vision-box .vision-logo{width: 54px; height: 54px; margin: 0 auto; margin-top: 10px;}
.vision-list li:nth-child(1) .vision-box .vision-logo{background: url(../../images/sub/vision_1.png) no-repeat center center;}
.vision-list li:nth-child(2) .vision-box .vision-logo{background: url(../../images/sub/vision_2.png) no-repeat center center;}
.vision-list li:nth-child(3) .vision-box .vision-logo{background: url(../../images/sub/vision_3.png) no-repeat center center;}
.vision-list li:nth-child(4) .vision-box .vision-logo{background: url(../../images/sub/vision_4.png) no-repeat center center;}
.vision-box .vision-logo-box p{font-size: 16px; color: white; position: absolute; width: 100%; left: 0; bottom: 10px; text-align: center;}
.vision-list li .vision-box{border-radius: 20px;}
.vision-list li:nth-child(1) .vision-box{border: 3px solid #e83692;}
.vision-list li:nth-child(2) .vision-box{border: 3px solid #79cef2;}
.vision-list li:nth-child(3) .vision-box{border: 3px solid #f0b358;}
.vision-list li:nth-child(4) .vision-box{border: 3px solid #e0d0b2;}
.vision-list li .vision-box h1{font-weight: 500; font-size: 18px; line-height: 21px; text-align: center; padding: 30px 0 140px}
.vision-list li:nth-child(1) .vision-box h1{color: #a90057;}
.vision-list li:nth-child(2) .vision-box h1{color: #25aae2;}
.vision-list li:nth-child(3) .vision-box h1{color: #f39100;}
.vision-list li:nth-child(4) .vision-box h1{color: #9d8456;}
.vision-list li .vision-content{position: absolute; background-color: white; left: -3px; bottom: -3px; width: calc(100% + 6px);}
.vision-list li .vision-content-box{width: 100%; height: 120px; display: table; border-radius: 20px;}
.vision-list li:nth-child(1) .vision-content-box{background: url(../../images/sub/mission_back_1.png) no-repeat center center; background-size: cover;}
.vision-list li:nth-child(2) .vision-content-box{background: url(../../images/sub/mission_back_2.png) no-repeat center center; background-size: cover;}
.vision-list li:nth-child(3) .vision-content-box{background: url(../../images/sub/mission_back_3.png) no-repeat center center; background-size: cover;}
.vision-list li:nth-child(4) .vision-content-box{background: url(../../images/sub/mission_back_4.png) no-repeat center center; background-size: cover;}
.vision-list li .vision-content-box p{display: table-cell; vertical-align: middle; font-size: 16px; color: white; text-align: center;}

@media all and (max-width: 1680px) {
  .vision-list ul{margin: 0;  padding-left: 0;}
  .vision-list li{padding: 0 20px;}
}

@media all and (max-width: 1440px) {
  .vision-list li{width: 50%; margin-bottom: 50px;}
  .vision-list li .vision-content-box p{padding: 0 10px;}
}

@media all and (max-width: 768px) {
  .vision-list li{width: 100%; float: none;}
}

@media all and (max-width: 460px) {
  .vision-list li .vision-box h1{font-size: 16px;}
}

/*연력*/
.all-history-wrap{margin-bottom: 70px;}
.all-history-wrap > h1{font-size: 48px; line-height: 60px; color: #dfdfdf; text-align: center; font-family: "Gm"; font-weight: 600; margin-bottom: 40px;}
.all-history-inner ul::after{content:""; display: table; clear: both;}
.all-history-inner> ul > li{width: 50%; float: left;}
.all-history-inner li::after{content:""; display: table; clear: both;}
.all-history-inner li .all-history-title{float: left; position: relative; margin-left: 30px;}
.all-history-inner li .mobile-history-content{display: none;}
.all-history-inner li:nth-child(1) .all-history-title{background: url(../../images/sub/career_background.png);}
.all-history-inner li:nth-child(1) .all-history-title::before{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 207px; height: 129px; background: url(../../images/sub/career_deco.png) no-repeat center center; left: -28px; bottom: -31px; z-index: -1;}
.all-history-inner li:nth-child(2) .all-history-title{background: url(../../images/sub/history_title_background.png);}
.all-history-inner li:nth-child(2) .all-history-title::before{content:""; display: block; position: absolute; left: 0; bottom: 0; width: 207px; height: 129px; background: url(../../images/sub/career_deco_2.png) no-repeat center center; left: -28px; bottom: -31px; z-index: -1;}
.all-history-inner li .all-history-title h1{font-weight: 500;color: white; font-size: 30px; padding: 70px 65px 80px 55px;}
.all-history-inner li .all-history-content{float: right; width: calc(100% - 210px); margin-top: 45px;}
.all-history-inner li .all-history-content h1{font-family:'Titil Bold'; font-size: 60px; line-height: 47px; opacity: 0.3;}
.all-history-inner li:nth-child(1) .all-history-content h1{color: #a90057;}
.all-history-inner li:nth-child(2) .all-history-content h1{color: #f39100;}
.all-history-inner li .all-history-content ul{margin-left: 30px; margin-top: 35px; position: relative;}
.all-history-inner li .all-history-content ul::before{content:""; display: block; position: absolute; left: 4px; top: 20px; width: 1px; height: calc(100% - 40px); background-color: #d8d8d8;}
.all-history-inner li .all-history-content li{padding-left: 30px; position: relative; margin-bottom: 35px;}
.all-history-inner li .all-history-content li:last-child{margin-bottom: 0;}
.all-history-inner li .all-history-content li::before{content:""; display: block; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; border-radius: 50%; background-color: #a90057;}
.all-history-inner li .all-history-content li::after{content:""; display: block; position: absolute; width: 6px; height: 3px; left: 12px; top:20px; background-color: #a90057;}
.all-history-inner li .all-history-content li a{width: 100%; height: 100%; display: block;}
.all-history-inner li .all-history-content li a::after{content:""; display: table; clear: both;}
.all-history-inner li .all-history-content li a span{display: block; float: left; font-weight: 600; font-size: 25px; color: #969697; margin-right: 30px;}
.all-history-inner li .all-history-content li a p{float: left; color: #666666; line-height: 37.5px;}
.all-history-inner li:nth-child(2) .all-history-content li::before{background-color: #f39100;}
.all-history-inner li:nth-child(2) .all-history-content li::after{background-color: #f39100;}

.sub-history-wrap{position: relative; border-top: 1px dashed #dddddd;}
.sub-history-title{position: absolute; width: 200px; height: 200px; background: #f0ece4 url(../../images/sub/main_logo.png) no-repeat center center; border-radius: 50%; top: -100px; left: 50%; margin-left: -100px;}
.sub-history-title::after{content:""; display: block; position: absolute; width: 100%; height: 100%; background: url(../../images/sub/main_logo_background.png); right: -5px; bottom: -5px; z-index: -1;}
.sub-history-list::after{content:""; display: table; clear: both;}
.sub-history-list > ul{width: 50%; float: left; padding-top: 120px;}
.sub-history-list > ul > li a{display: block; width: 100%; height: 100%;}
.sub-history-list > ul > li a::after{content:""; display: table; clear: both;}
.sub-history-list > ul > li a > span{font-family: "Titil Bold"; font-size: 50px; color: #bcbcbc; display: block; float: left;}
.sub-history-list > ul > li a ul{float: right; width: calc(100% - 130px); margin-top: 27px;}
.sub-history-list > ul > li a ul li{margin-bottom: 5px;}
.sub-history-list > ul > li a ul li:last-child{margin-bottom: 0;}
.sub-history-list > ul > li a li::after{content:""; display: table; clear: both;}
.sub-history-list > ul > li a li span{float: left; font-weight: 500; color: #969697; font-size: 20px; padding-right: 23px; background: url(../../images/sub/sub_history_arrow.png) no-repeat right center; display: block;}
.sub-history-list > ul > li a li p{float: right; color: #666666; width: calc(100% - 80px); margin-top: 3px;}

@media all and (max-width: 1400px) {
  .all-history-inner li .all-history-content li a span{float: none; margin-right: 0;}
  .all-history-inner li .all-history-content li a p{float: none; margin-top: 10px;}
  .all-history-inner li .all-history-content ul::before{height: calc(100% - 80px);}
  .all-history-inner li .all-history-content h1{font-size: 50px; line-height: 40px;}
}

@media all and (max-width: 1024px) {
  .all-history-wrap > h1{font-size: 35px; line-height: 50px;}
  .all-history-inner> ul > li{width: 100%; float: none;}
  .all-history-inner li .all-history-content li a span{float: left; margin-right: 30px;}
  .all-history-inner li .all-history-content li a p{float: left; margin-top: 0;}
  .all-history-inner li .all-history-content ul::before{height: calc(100% - 40px);}
  .sub-history-wrap{margin-top: 150px;}
  .sub-history-list{padding-top: 100px;}
  .sub-history-list > ul{width: 100%; float: none; padding-top: 0;}
  .sub-history-list > ul > li{margin-bottom: 20px;}
}

@media all and (max-width: 768px) {
  .all-history-inner li .all-history-title{float: none; display: inline-block;}
  .all-history-inner li .all-history-content{float: none; width: 100%;}
  .all-history-inner> ul > li{margin-bottom: 50px;}
  .all-history-inner> ul > li:last-child{margin-bottom: 0;}
  .sub-history-list > ul > li a > span{font-size: 35px;}
  .sub-history-list > ul > li a ul{width: calc(100% - 100px);}
  .sub-history-list > ul > li a ul{margin-top: 13px;}
  .sub-history-list > ul > li a li span{padding-right: 15px;}
  .sub-history-list > ul > li a li p{width: calc(100% - 75px);}
}

@media all and (max-width: 500px) {
  .all-history-inner li .all-history-content li a span{float: none; margin-right: 0;}
  .all-history-inner li .all-history-content li a p{float: none; margin-top: 0}
  .all-history-inner li .all-history-content ul::before{height: calc(100% - 80px);}
  .all-history-inner-header::after{content:""; display: table; clear: both;}
  .all-history-inner li .all-history-title{float: left;}
  .all-history-inner li:nth-child(1) .all-history-title{background-size: cover;}
  .all-history-inner li:nth-child(2) .all-history-title{background-size: cover;}
  .all-history-inner li .all-history-title h1{font-size: 20px; padding: 40px 35px 50px 32px;}
  .all-history-inner li .mobile-history-content{display: block; float: right; width: calc(100% - 150px); margin-top: 25px;}
  .all-history-inner li .mobile-history-content h1{font-size: 29px; line-height: 27px; font-family: "Titil Bold"; opacity: .3;}
  .all-history-inner li:nth-child(1) .all-history-title::before{background-size: cover; width: 150px; height: 93px; bottom: 0;}
  .all-history-inner li:nth-child(2) .all-history-title::before{background-size: cover; width: 150px; height: 93px; bottom: 0;}
  .all-history-inner li:nth-child(1) .mobile-history-content h1{color: #a90057;}
  .all-history-inner li:nth-child(2) .mobile-history-content h1{color: #f39100;}
  .all-history-inner li .all-history-content h1{display: none;}
  .all-history-inner li .all-history-content{clear: both; margin-top: 0;}
  .all-history-inner li .all-history-content ul{margin-top: 15px;}
  .sub-history-title{width: 140px; height: 140px; top: -70px; margin-left: -70px; background-size: 55%;}
  .sub-history-title::after{background-size: cover;}

}

/*비전이념체계*/
.system-list > ul > li{margin-bottom: 40px;}
.system-list > ul > li:last-child{margin-bottom:0 ;}
.system-list > ul > li::after{content:""; display: table; clear: both;}
.system-list > ul > li .system-title{float: left; padding-right: 46px; background: url(../../images/sub/system_line.png) no-repeat right 10px center;}
.system-list > ul > li .system-title-text{width: 154px; height: 174px; display: table;}
.system-list > ul > li .system-title-text h1{font-size: 20px; color: white; font-weight: 500; text-align: center; display: table-cell; vertical-align: middle;}
.system-list > ul > li:nth-child(1) .system-title-text{background: url(../../images/sub/system_1.png) no-repeat center center}
.system-list > ul > li:nth-child(2) .system-title-text{background: url(../../images/sub/system_2.png) no-repeat center center}
.system-list > ul > li:nth-child(3) .system-title-text{background: url(../../images/sub/system_3.png) no-repeat center center}
.system-list > ul > li:nth-child(4) .system-title-text{background: url(../../images/sub/system_4.png) no-repeat center center}
.system-list > ul > li:nth-child(5) .system-title-text{background: url(../../images/sub/system_5.png) no-repeat center center}
.system-content{float: right; width: calc(100% - 200px); background: url(../../images/sub/mission_line.png); border-radius: 100px; position: relative; height: 174px;}
.system-list > ul > li:last-child .system-content{background: none;}
.system-content::before{content:""; display: block; position: absolute; width: calc(100% - 14px); height: calc(100% - 14px); top: 7px; left: 7px; border-radius: 100px; background-color: white;}
.system-list > ul > li:last-child .system-content::before{display: none;}
.system-content-box{position: relative; z-index: 2; height: 100%; display: table; text-align: center; width: 100%;}
.system-logo-inner{display: table-cell; vertical-align: middle;}
.system-logo-box{display: inline-block;}
.system-logo-box::after{content:""; display: table; clear: both;}
.system-logo-box li{float: left; padding: 0 104px; background: url(../../images/sub/system_plus.png) no-repeat right center;}
.system-logo-box li:first-child{padding-left: 0;}
.system-logo-box li:last-child{padding-right: 0; background: none;}
.system-logo-box li .system-logo{width: 76px; height: 76px;}
.system-logo-box li:nth-child(1) .system-logo{background: url(../../images/sub/system_logo_1.png) no-repeat center center;}
.system-logo-box li:nth-child(2) .system-logo{background: url(../../images/sub/system_logo_2.png) no-repeat center center;}
.system-logo-box li:nth-child(3) .system-logo{background: url(../../images/sub/system_logo_3.png) no-repeat center center;}
.system-logo-box li p{font-size: 18px; font-weight: 500; text-align: center; color: #666666; position: relative; display: inline-block; padding: 0 20px;}
.system-logo-box li p::after{content:""; display: block; position: absolute; width: 28px; height: 28px; right: 0; top: -6px; border-radius: 50%;}
.system-logo-box li:nth-child(1) p::after{background-color: rgba(169,0,87,0.2)}
.system-logo-box li:nth-child(2) p::after{background-color: rgba(37,170,226,0.2)}
.system-logo-box li:nth-child(3) p::after{background-color: rgba(243,145,0,0.2)}
.system-content-box > p{display: table-cell; vertical-align: middle; font-weight: 500; font-size: 18px; color: #666666;}
.system-content-box > h1{display: table-cell; vertical-align: middle; font-weight: 500; font-size: 23px; color: #666666;}
.system-price-list-box{display: table-cell; vertical-align: middle; text-align: center;}
.system-price-list{display: inline-block;}
.system-price-list::after{content:""; display: table; clear: both;}
.system-price-list li{float: left; padding: 0 73px; background: url(../../images/sub/system_plus.png) no-repeat right center;}
.system-price-list li:first-child{padding-left: 0;}
.system-price-list li:last-child{padding-right: 0; background: none;}
.system-price-list li h1{font-weight: 500; font-size: 27px; color: #666666; margin-bottom: 10px; display: inline-block; position: relative; padding: 0 15px;}
.system-price-list li h1::after{content:""; display: block; position: absolute; width: 28px; height: 28px; border-radius: 50%; right: 0; top: -6px;}
.system-price-list li:nth-child(1) h1::after{background-color: rgba(169,0,87,0.2)}
.system-price-list li:nth-child(2) h1::after{background-color: rgba(37,170,226,0.2)}
.system-price-list li:nth-child(3) h1::after{background-color: rgba(243,145,0,0.2)}
.system-price-list li h1 span{font-family: "Noto Regular";}
.system-person-inner{display: table-cell; vertical-align: middle; text-align: center;}
.system-person-title{width: 430px; height: 80px; border-radius: 100px; background: url(../../images/sub/system_title_background.png) no-repeat center center; display: table; margin: 0 auto;}
.system-person-title p{font-weight: 500; font-size: 18px; color: #222222; display: table-cell; vertical-align: middle;}
.system-person-box ul{margin: 0 -28px; position: relative;}
.system-person-box ul::before{content:""; display: block; position: absolute; top: 17px; width: 66.6%; height: 1px; background-color: #d6d6d6; left: 16.7%;}
.system-person-box ul::after{content:""; display: table; clear: both;}
.system-person-box li{float: left; width: 33.3333%; padding: 0 28px; position: relative; padding-top: 32px;}
.system-person-box li::before{content:""; display: block; position: absolute; width: 1px; height: calc(100% - 17px); background-color: #d6d6d6; left: 50%; top: 17px;}
.system-person-box li:nth-child(2)::before{top: 0;}
.system-person{height: 80px; display: table; background: url(../../images/sub/mission_line.png); position: relative; border-radius: 100px; width: 100%;}
.system-person::before{content:""; display: block; position: absolute; width: calc(100% - 14px); height: calc(100% - 14px); left: 7px; top: 7px; background-color: white; border-radius: 100px;}
.system-person-box li p{display: table-cell; vertical-align: middle; color: #666666; font-size: 18px; position: relative; z-index: 2;}

@media all and (max-width: 1400px) {
  .system-content-box > p{padding: 0 20px;}
}

@media all and (max-width: 1024px) {
  .system-logo-box li{padding: 0 50px 0 20px;}
  .system-price-list li{padding: 0 50px 0 20px;}
  .system-person-box li{padding: 0 15px; padding-top: 32px;}
}

@media all and (max-width: 768px) {
  .system-list > ul > li .system-title{float: none; padding-bottom: 23px; background: none; padding-right: 0;}
  .system-list > ul > li .system-title-text{margin: 0 auto;}
  .system-content{float: none; width: 100%; height: auto; padding: 30px 15px;}
}

@media all and (max-width: 600px) {
  .system-content-box > p{font-size: 16px;}
  .system-content-box > h1{font-size: 18px; padding: 0 20px;}
  .system-price-list li h1{font-size: 22px;}
  .system-price-list li p{font-size: 14px;}
  .system-person-title{width: 100%; background-size: cover;}
}

@media all and (max-width: 540px) {
  .system-price-list li:first-child{padding-top: 0;}
  .system-price-list li{float: none; padding: 20px 0 50px 0; background-position: bottom center;}
  .system-price-list li:last-child{padding-bottom: 0;}
}

/*비전2025 발전전략 체계*/
.strategy-inner{margin-top: 20px;}
.mobile-strategy-inner{display: none;}
.strategy-box{margin-bottom: 10px;}
.strategy-box:last-child{margin-bottom: 0; margin-top: 55px;}
.strategy-box::after{content:""; display: table; clear: both;}
.strategy-box .strategy-title{float: left; width: 200px;}
.strategy-box .strategy-title li{margin-bottom: 10px; background: url(../../images/sub/system_line.png) no-repeat right 30px center;}
.strategy-box .strategy-title li:last-child{margin-bottom: 0;}
.strategy-box .strategy-title-box{width: 121px; height: 137px; background: url(../../images/sub/strategy_title.png) no-repeat center center; display: table;}
.strategy-box.sub-title .strategy-title-box{background: url(../../images/sub/strategy_title_2.png) no-repeat center center;}
.strategy-box .strategy-title-box p{display: table-cell; vertical-align: middle; text-align: center; font-weight: 500; font-size: 18px; color: white;}
.strategy-box .strategy-content-box{float: right; width: calc(100% - 200px); border-radius: 75px; background: url(../../images/sub/mission_line.png); position: relative; padding: 7px; height: 430px; display: table;}
.strategy-box .strategy-content{background-color: white; border-radius: 75px; text-align: center; display: table-cell; vertical-align: middle; padding: 0 93px;}
.strategy-box .strategy-content .system-logo-box{margin-bottom: 20px;}
.strategy-box .strategy-text{background-color: #f5f5f5; border-radius: 100px;}
.strategy-box .strategy-text p{font-weight: 500; font-size: 20px; line-height: 36px; color: #666666; padding: 29px 0;}
.strategy-box .strategy-list{margin-top: 30px;}
.strategy-box .strategy-list ul{display: inline-block;}
.strategy-box .strategy-list ul::after{content:""; display: table; clear: both;}
.strategy-box .strategy-list li{float: left; border: 1px solid #afafaf; border-radius: 50px; border-top-left-radius: 0; padding: 16.5px 0; width: 300px; position: relative;}
.strategy-box .strategy-list li::after{content:""; display: block; position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #980046; top: 50%; margin-top: -5px; right: -5px; z-index: 2;}
.strategy-box .strategy-list li:last-child::after{display: none;}
.strategy-box .strategy-list li p{font-size: 18px; color: #666666;}
.strategy-box .strategy-text h1{font-weight: 500; font-size: 24px; padding: 17px 0;}
.strategy-character{display: inline-block; margin-top: 30px;}
.strategy-character::after{content:""; display: table; clear: both;}
.strategy-character li{float: left; border: 1px solid #afafaf; border-radius: 25px; border-top-left-radius: 0; overflow: hidden; width: 300px; margin-right: 80px;}
.strategy-character li:last-child{margin-right: 0;}
.character-header{background-color: #25aae2;}
.character-header h1{font-weight: 500; font-size: 22px; color: white; padding: 13.5px 0;}
.character-text{margin-top: 15px;}
.character-text span{font-weight: 500; font-size: 18px; color: #25aae2; display: inline-block; padding-right: 30px; position: relative;}
.character-text span::after{content:""; display: block; position: absolute; width: 3px; height: 16px; background-color: #25aae2; right: 0; top: 6px;}
.character-text span:last-child{padding-right: 0; padding-left: 25px;}
.character-text span:last-child::after{display: none;}
.character-image{margin-top: 15px;}
.character-image p{font-size: 18px; color: #666666; margin-top: 17px; padding-bottom: 20px;}
.strategy-content > p{font-weight: 500; font-size: 28px; color: #666666; margin-top: 20px;}
.background-text{background-color: #f39100; border-radius :50px; margin: 60px 0 67px 0;}
.background-text p{color: white; font-size: 24px; font-weight: 500; padding: 32px 0;}
.sub-background-text{position: relative; background-color: #f5f5f5; border-radius: 50px; display: inline-block; width: 600px;}
.sub-background-text p{font-weight: 500; font-size: 20px; color: #666666; padding: 15px 0;}
.strategy-box:last-child .strategy-content-box{background: none; padding: 0; position: relative; top: -25px; height: auto;}
.strategy-box:last-child .strategy-content-box::after{content:""; display: block; position: absolute; width: 9px; height: 9px; background-color: #bcbcbc; left: 50%; top:6px; border-radius: 50%; margin-left: -4px;}
.strategy-box:last-child .strategy-content{position: relative;}
.strategy-box:last-child .strategy-content::before{content:""; display: block; position: absolute; left: 11.45%; top: 10px; width: 77.2%; height: 1px; background-color: #bcbcbc;}
.strategy-box:last-child .strategy-content::after{content:""; display: block; position: absolute; left: 50%; width: 1px; height: 78px; top: -71px; background-color: #bcbcbc;}
.strategy-box:last-child .strategy-content{padding: 0;}
.strategy-work ul::after{content:""; display: table; clear: both;}
.strategy-work > ul{margin: 0 -20px;}
.strategy-work > ul > li{float: left; width: 25%; padding: 0 20px; border-radius: 15px; position: relative; margin-top: 47px;}
.strategy-work > ul > li::before{content:""; display: block; position: absolute; left: 50%; top: -37px; width: 1px; height: 37px; background-color: #bcbcbc;}
.strategy-work-box{border-radius: 15px;}
.strategy-work > ul > li:nth-child(1) .strategy-work-box{border: 3px solid #e83692;}
.strategy-work > ul > li:nth-child(2) .strategy-work-box{border: 3px solid #53a3eb;}
.strategy-work > ul > li:nth-child(3) .strategy-work-box{border: 3px solid #e89451;}
.strategy-work > ul > li:nth-child(4) .strategy-work-box{border: 3px solid #c9bc9c;}
.strategy-work-header{position: relative; padding: 17px 0; overflow: hidden;}
.strategy-work-header::before{display: block; position: absolute; left: -5px; top: 10px; font-size: 72px; font-weight: 500; opacity: .2; line-height: 1;}
.strategy-work > ul > li:nth-child(1) .strategy-work-header::before{content:"T"; color: #a90057;}
.strategy-work > ul > li:nth-child(2) .strategy-work-header::before{content:"E"; color: #0067c3;}
.strategy-work > ul > li:nth-child(3) .strategy-work-header::before{content:"R"; color: #ff7200;}
.strategy-work > ul > li:nth-child(4) .strategy-work-header::before{content:"A"; color: #c0a353;}
.strategy-work-header h1{font-size: 18px; line-height: 24px; font-weight: 500;}
.strategy-work > ul > li:nth-child(1) .strategy-work-header h1{color: #e83692;}
.strategy-work > ul > li:nth-child(2) .strategy-work-header h1{color: #53a3eb;}
.strategy-work > ul > li:nth-child(3) .strategy-work-header h1{color: #e89451;}
.strategy-work > ul > li:nth-child(4) .strategy-work-header h1{color: #c9bc9c;}
.strategy-work-content{background-color: white; position: relative; width: calc(100% + 6px); left: -3px; top: 3px;}
.strategy-work-content-box{border: 1px solid #afafaf; border-radius: 17px; min-height: 247px; text-align: left; padding: 20px;}
.strategy-work-content-box li{font-size: 15px; color: #666666; margin-bottom: 7px;}
.strategy-work-content-box li:last-child{margin-bottom: 0;}
.strategy-work > ul > li:nth-child(1) .strategy-work-content-box li.colored{color: #e83692;}
.strategy-work > ul > li:nth-child(2) .strategy-work-content-box li.colored{color: #53a3eb;}
.strategy-work > ul > li:nth-child(3) .strategy-work-content-box li.colored{color: #e89451;}
.strategy-work > ul > li:nth-child(4) .strategy-work-content-box li.colored{color: #c9bc9c;}

@media all and (max-width: 1500px) {
  .strategy-box .strategy-content{padding: 0 8%;}
  .strategy-box:last-child .strategy-content::before{left: 11%; width: 78%;}
  .strategy-character{display: block;}
  .strategy-character li{width: 30%; margin-right: 5%;}
  .strategy-box .strategy-list ul{display: block;}
  .strategy-box .strategy-list li{width: 33.3333%;}
}

@media all and (max-width: 1024px) {
  .strategy-box .strategy-text p{font-size: 16px; line-height: 30px;}
  .strategy-box .strategy-list li p{font-size: 16px;}
  .strategy-box .strategy-text h1{font-size: 20px;}
  .character-text span{font-size: 14px; padding-right: 10px;}
  .character-text span:last-child{padding-left: 0;}
  .character-text span::after{top: 3px;}
  .character-image-box{height: 73px;}
  .character-image p{font-size: 16px;}
  .sub-background-text{width: 100%;}
  .strategy-work-header h1{font-size: 16px;}
  .strategy-work-content-box{padding: 10px;}
}

@media all and (max-width: 768px) {
  .strategy-inner{display: none;}
  .mobile-strategy-inner{display: block;}
  .strategy-box .strategy-content{padding: 20px;}
  .strategy-box .strategy-title{float: none; width: 100%; text-align: center;}
  .strategy-box .strategy-title ul{display: inline-block;}
  .strategy-box .strategy-title ul::after{content:""; display: table; clear: both;}
  .strategy-box .strategy-title li{float: left; background: none; padding: 0 20px;}
  .strategy-box .strategy-content-box{float: none; width: 100%; height: auto;}
  .strategy-box .strategy-title-box{margin: 0 auto;}
  .strategy-work > ul > li{width: 50%; margin-top: 0; margin-bottom: 20px;}
  .strategy-work > ul > li::before{display: none;}
  .strategy-box:last-child .strategy-content::before{display: none;}
  .strategy-box:last-child .strategy-content::after{display: none;}
  .strategy-box:last-child .strategy-content-box::after{display: none;}
  .strategy-box:last-child .strategy-content-box{top: 0;}
  .strategy-work-content-box{min-height: 357px;}

  .mobile-strategy-inner{margin-top: 20px;}
  .mobile-strategy-inner > ul > li{margin-bottom: 30px;}
  .mobile-strategy-inner > ul > li:last-child{margin-bottom: 0;}
  .mobile-strategy-header{padding-bottom: 35px; background: url(../../images/sub/system_line_2.png) no-repeat bottom center;}
  .mobile-strategy-header .strategy-title-box{width: 121px; height: 137px; background: url(../../images/sub/strategy_title.png) no-repeat center center; display: table; margin: 0 auto;}
  .mobile-strategy-header .strategy-title-box p{display: table-cell; vertical-align: middle; text-align: center; font-weight: 500; font-size: 18px; color: white;}
  .mobile-strategy-content{text-align: center; margin-top: 20px;}
  .mobile-strategy-content .system-logo-box li{padding: 0 80px 0 70px;}
  .mobile-strategy-content .system-logo-box li:first-child{padding-left: 0;}
  .mobile-strategy-content .system-logo-box li:last-child{padding-right: 0; background: none;}
  .mobile-strategy-content .strategy-text{background-color: #f5f5f5; border-radius: 100px;}
  .mobile-strategy-content .strategy-text p{font-weight: 500; font-size: 20px; line-height: 36px; color: #666666; padding: 29px 0;}
  .mobile-strategy-content .strategy-list ul::after{content:""; display: table; clear: both;}
  .mobile-strategy-content .strategy-list li{float: left; border: 1px solid #afafaf; border-radius: 50px; border-top-left-radius: 0; padding: 16.5px 0; width: 33.3333%; position: relative;}
  .mobile-strategy-content .strategy-list li::after{content:""; display: block; position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: #980046; top: 50%; margin-top: -5px; right: -5px; z-index: 2;}
  .mobile-strategy-content .strategy-list li:last-child::after{display: none;}
  .mobile-strategy-content .strategy-list li p{font-size: 18px; color: #666666;}
  .mobile-strategy-content .strategy-text h1{font-weight: 500; font-size: 24px; padding: 17px 0;}
  .mobile-strategy-content .character-text{margin: 18.5px 0;}
  .mobile-strategy-content .character-text span{font-size: 18px; padding-right: 30px;}
  .mobile-strategy-content .character-text span:last-child{padding-left: 25px; padding-right: 0;}
  .mobile-strategy-content .character-image{margin-top: 24px;}
  .mobile-strategy-content > p{font-weight: 500; font-size: 28px; color: #666666;}
  .mobile-strategy-content .background-text{margin: 0;}
  .mobile-strategy-content .strategy-work > ul{margin: 0 -10px;}
  .mobile-strategy-content .strategy-work > ul > li{width: 25%; padding: 0 10px;}
  .mobile-strategy-content .strategy-work-content{background-color: white; position: relative; width: 100%;}
  .mobile-strategy-content .strategy-work-content-box{border: 1px solid #afafaf; border-radius: 17px; min-height: 444px; text-align: left; padding: 20px;}
  .mobile-strategy-content .strategy-work-content-box li{font-size: 13px; color: #666666; margin-bottom: 17px; text-align: center; line-height: 15px;}
  .mobile-strategy-content .strategy-work-content-box li:last-child{margin-bottom: 0;}
  .mobile-strategy-content .strategy-work-content-inner > ul > li:nth-child(1) .strategy-work-content-box li.colored{color: #e83692;}
  .mobile-strategy-content .strategy-work-content-inner > ul > li:nth-child(2) .strategy-work-content-box li.colored{color: #53a3eb;}
  .mobile-strategy-content .strategy-work-content-inner > ul > li:nth-child(3) .strategy-work-content-box li.colored{color: #e89451;}
  .mobile-strategy-content .strategy-work-content-inner > ul > li:nth-child(4) .strategy-work-content-box li.colored{color: #c9bc9c;}
  .strategy-work-content-inner > ul{margin: 0 -10px;}
  .strategy-work-content-inner > ul::after{content:""; display: table; clear: both;}
  .strategy-work-content-inner > ul > li{width: 25%; padding: 0 10px; float: left;}
}

@media all and (max-width: 700px) {
  .mobile-strategy-content .character-text span{font-size: 14px; padding-right: 10px;}
  .mobile-strategy-content .character-text span:last-child{padding-left: 5px;}
  .mobile-strategy-content .strategy-work > ul > li{width: 50%; margin-bottom: 10px;}
  .strategy-work-content-inner > ul > li{width: 50%; margin-bottom: 10px;}
  .mobile-strategy-content .strategy-work-content-box{min-height: 355px;}
  .mobile-strategy-content .system-logo-box li{padding: 0 50px 0 20px;}
}

@media all and (max-width: 540px) {
  .strategy-box .strategy-title li{float: none;}
  .strategy-box .strategy-list li{float: none; width: 100%; margin-bottom: 5px;}
  .strategy-box .strategy-list li:last-child{margin-bottom: 0;}
  .strategy-box .strategy-list li::after{display: none;}
  .strategy-character li{width: 100%; float: none; margin-right: 0; margin-bottom: 5px;}
  .strategy-character li:last-child{margin-bottom: 0;}
  .strategy-content > p{font-size: 20px;}
  .background-text p{font-size: 22px; padding: 20px 0;}
  .strategy-work > ul{margin: 0;}
  .strategy-work > ul > li{width: 100%; float: none; padding: 0;}
  .strategy-work-content-box{min-height: auto;}
  .mobile-strategy-content .strategy-list li{width: 100%; float: none; margin-bottom: 10px;}
  .mobile-strategy-content .strategy-list li:last-child{margin-bottom: 0;}
  .mobile-strategy-content .strategy-list li::after{display: none;}
  .mobile-strategy-content .strategy-work > ul > li{width: 100%;}
  .strategy-work-content-inner > ul > li{width: 100%; float: none;}
  .mobile-strategy-content .strategy-work-content-box{min-height: auto;}
  .system-logo-box li .system-logo{width: 45px; height: 45px; margin: 0 auto;}
  .system-logo-box li:first-child{padding-top: 0;}
  .system-logo-box li{padding: 0 30px 0 5px;}
  .system-logo-box li:last-child{padding-bottom: 0;}
  .system-logo-box li p{font-size: 14px;}
  .system-logo-box li:nth-child(1) .system-logo{background-size: contain;}
  .system-logo-box li:nth-child(2) .system-logo{background-size: contain;}
  .system-logo-box li:nth-child(3) .system-logo{background-size: contain;}

  .mobile-strategy-content .system-logo-box li .system-logo{width: 45px; height: 45px; margin: 0 auto;}
  .mobile-strategy-content .system-logo-box li:first-child{padding-top: 0;}
  .mobile-strategy-content .system-logo-box li{padding: 0 30px 0 5px;}
  .mobile-strategy-content .system-logo-box li:last-child{padding-bottom: 0;}
  .mobile-strategy-content .system-logo-box li p{font-size: 14px;}
  .mobile-strategy-content .system-logo-box li:nth-child(1) .system-logo{background-size: contain;}
  .mobile-strategy-content .system-logo-box li:nth-child(2) .system-logo{background-size: contain;}
  .mobile-strategy-content .system-logo-box li:nth-child(3) .system-logo{background-size: contain;}
}

.model-image{text-align: center;}
.model-title span{font-weight: 500; font-size: 22px; line-height: 30px; display: block; margin-bottom: 7px;}
.model-title-1 span{color: #a90057;}
.model-title-2 span{color: #008dfa;}
.model-title-3 span{color: #ff6600;}
.model-title-4 span{color: #bd9400;}
.model-sub-title p{font-weight: 500; font-size: 22px;}
.model-sub-title-1 span{color: #a90057;}
.model-sub-title-2 span{color: #008dfa;}
.model-sub-title-3 span{color: #ff6600;}
.model-sub-title-4 span{color: #bd9400;}
.model-logo-inner{padding-bottom: 30px; position: relative;}
.model-logo-inner::before{content:""; display: block; position: absolute; left: 8.3%; bottom: 0; width: 83.2%; height: 1px; background-color: #bcbcbc;}
.model-logo-inner::after{content:""; display: block; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background-color: #bdbdbd; margin-left: -5px;}
.model-logo{width: 225px; height: 256px; background: url(../../images/sub/system_6.png) no-repeat center center; display: table; margin: 0 auto; position: relative;}
.model-logo::after{content:""; display: block; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background-color: #bcbcbc; margin-left: -1px;}
.model-logo-box{display: table-cell; vertical-align: middle; text-align: center;}
.model-logo-box p{font-size: 18px; line-height: 24px; color: white; margin-top: 13px;}
.model-content{margin-top: 30px;}
.model-content ul::after{content:""; display: table; clear: both;}
.model-content li{float: left; width: 16.6%; position: relative; height: 75px;}
.model-content li::before{content:""; display: block; position: absolute; left: -8px; top: 0; width: 56px; height: 75px; border-radius: 8px;}
.model-content li:nth-child(odd)::before{background: url(../../images/sub/model_background_2_sub.png) no-repeat right top;}
.model-content li:nth-child(even)::before{background: url(../../images/sub/model_background_1_sub.png) no-repeat right top;}
.model-content-text{height: 100%; display: table; width: 100%;}
.model-content li p{display: table-cell; vertical-align: middle; padding-left: 35px; font-size: 13px; line-height: 18px; color: white; position: relative; z-index: 2;}
.model-content li:first-child{border-top-left-radius: 8px; border-bottom-left-radius: 8px;}
.model-content li:first-child::after{content:""; display: block; position: absolute; width: 1px; height: 30px; top: -30px; background-color: #bcbcbc; left: 50%;}
.model-content li:first-child::before{display: none;}
.model-content li:nth-child(odd){background: url(../../images/sub/model_background_3.png) no-repeat left -10px top;}
.model-content li:nth-child(even){background: url(../../images/sub/model_background_4.png) no-repeat left -10px top;}
.model-content li:last-child{width: 16.85%; background-position: right top;}
.model-content li:last-child::after{content:""; display: block; position: absolute; width: 1px; height: 30px; top: -30px; background-color: #bcbcbc; left: 50%;}
.model-content li p::after{display: block; position: absolute; left: -8px; top: 0; font-weight: 600; font-size: 60px; color: rgba(255,255,255,.5); line-height: 75px; text-transform: uppercase; overflow: hidden; width: 30px; text-align: right;}
.model-content li:nth-child(1) p::after{left: 0; content:"s"; text-indent: -7px;}
.model-content li:nth-child(2) p::after{content:"t"; text-indent: -7px;}
.model-content li:nth-child(3) p::after{content:"r"; text-indent: -9px;}
.model-content li:nth-child(4) p::after{content:"o"; text-indent: -12px;}
.model-content li:nth-child(5) p::after{content:"n"; text-indent: -10px;}
.model-content li:nth-child(6) p::after{content:"g"; text-indent: -11px;}

@media all and (max-width: 1350px) {
  .model-content li p{padding-right: 10px; text-align: left;}
}

@media all and (max-width: 1024px) {
  .model-logo-inner::before{display: none;}
  .model-content{text-align: center;}
  .model-content ul{display: inline-block;}
  .model-content li{display: inline-block; float: none;}
  .model-content li, .model-content li:last-child{width: 27%;}
  .model-content li:nth-child(3n){background-position: right top; width: calc(25.5% + 56px);}
  .model-content li:nth-child(4){border-radius: 8px;}
  .model-content li:nth-child(4)::before{display: none;}
  .model-content li:first-child::after, .model-content li:last-child::after{display: none;}
  .model-content li::before{left: -10px;}
  .model-content li p::after{left: -10px;}
}

@media all and (max-width: 768px) {
  .model-content ul{display: block;}
  .model-content li, .model-content li:last-child, .model-content li:nth-child(3n){display: block; width: 313px; margin: 0 auto; margin-bottom: 20px; border-radius: 8px;}
  .model-content li:last-child{margin-bottom: 0;}
  .model-content li::before{display: none;}
}

.model-r-logo-inner{padding-bottom: 30px; position: relative;}
.model-r-logo-inner::after{content:""; display: block; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background-color: #bdbdbd; margin-left: -5px;}
.model-r-logo{width: 225px; height: 256px; background: url(../../images/sub/system_7.png) no-repeat center center; display: table; margin: 0 auto; position: relative;}
.model-r-logo::after{content:""; display: block; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background-color: #bcbcbc; margin-left: -1px;}
.model-r-logo-box{display: table-cell; vertical-align: middle; text-align: center;}
.model-r-logo-box p{font-size: 18px; line-height: 24px; color: white; margin-top: 13px;}
.model-r-content{margin: 0 90px; position: relative;}
.model-r-content::before{content:""; display: block; position: absolute; left: 15.5%; top: 0; width: 69%; height: 1px; background-color: #bcbcbc;}
.model-r-content ul{margin: 0 -25px;}
.model-r-content ul::after{content:""; display: table; clear: both;}
.model-r-content li{width: 33.3333%; float: left; padding: 0 25px; padding-top: 70px; position: relative;}
.model-r-content li::before{content:""; display: block; position: absolute; left: 50%; width: 1px; height: 70px; top: 0; background-color: #bcbcbc;}
.model-r-content li:nth-child(2)::before{display: none;}
.model-r-content-box{border-radius: 20px; position: relative;}
.model-r-content-box::before{content:""; display: block; position: absolute; width: 70px; height: 70px; border-radius: 50%; left: 50%; margin-left: -35px; top: -38px;}
.model-r-content-title{padding: 40px 0 20px; position: relative; overflow: hidden;}
.model-r-content-title::before{display: block; position: absolute; left: -10px; top: 0; font-size: 80px; font-weight: 600; line-height: 95px; text-transform: uppercase; opacity: .5; color: #e69b00}
.model-r-content-title p{text-align: center; font-weight: 500; font-size: 18px;}
.model-r-content li:nth-child(1) .model-r-content-box{border: 3px solid #f8b62d;}
.model-r-content li:nth-child(1) .model-r-content-box::before{background: #f8b62d url(../../images/sub/model-r_1.png) no-repeat center center;}
.model-r-content li:nth-child(1) .model-r-content-title::before{content:"o"}
.model-r-content li:nth-child(1) .model-r-content-title p{color: #e69b00}
.model-r-content li:nth-child(2) .model-r-content-box{border: 3px solid #e89451;}
.model-r-content li:nth-child(2) .model-r-content-box::before{background: #f39100 url(../../images/sub/model-r_2.png) no-repeat center center;}
.model-r-content li:nth-child(2) .model-r-content-title p{color: #f39100}
.model-r-content li:nth-child(2) .model-r-content-title::before{content:"n"}
.model-r-content li:nth-child(3) .model-r-content-box{border: 3px solid #ef852f;}
.model-r-content li:nth-child(3) .model-r-content-box::before{background: #ff7200 url(../../images/sub/model-r_3.png) no-repeat center center;}
.model-r-content li:nth-child(3) .model-r-content-title p{color: #ff6600}
.model-r-content li:nth-child(3) .model-r-content-title::before{content:"e"}
.model-r-main{width: calc(100% + 6px); position: relative; left: -3px; top: 3px; background-color: white; z-index: 2;}
.model-r-main-box{border-radius: 20px; height: 70px; width: 100%; display: table;}
.model-r-main-box p{display: table-cell; vertical-align: middle; text-align: center; color: white;}
.model-r-content li:nth-child(1) .model-r-main-box{background: url(../../images/sub/model-r_1_background.png) no-repeat center center; background-size: cover;}
.model-r-content li:nth-child(2) .model-r-main-box{background: url(../../images/sub/model-r_2_background.png) no-repeat center center; background-size: cover;}
.model-r-content li:nth-child(3) .model-r-main-box{background: url(../../images/sub/model-r_3_background.png) no-repeat center center; background-size: cover;}

@media all and (max-width: 1500px) {
  .model-r-content::before{left: 15%; width: 70%;}
}

@media all and (max-width: 1024px) {
  .model-r-content{margin: 0;}
}

@media all and (max-width: 768px) {
  .model-r-logo::after{display: none;}
  .model-r-logo-inner{padding-bottom: 60px;}
  .model-r-logo-inner::before{display: none;}
  .model-r-content::before{display: none;}
  .model-r-content ul{margin: 0;}
  .model-r-content li{width: 100%; float: none; padding: 0; margin-bottom: 70px;}
  .model-r-content li:last-child{margin-bottom: 0;}
  .model-r-content li::before{display: none;}
}


.model-a-logo-inner{padding-bottom: 30px; position: relative;}
.model-a-logo-inner::after{content:""; display: block; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; border-radius: 50%; background-color: #bdbdbd; margin-left: -5px;}
.model-a-logo{width: 225px; height: 256px; background: url(../../images/sub/system_8.png) no-repeat center center; display: table; margin: 0 auto; position: relative;}
.model-a-logo::after{content:""; display: block; position: absolute; left: 50%; bottom: -30px; width: 1px; height: 30px; background-color: #bcbcbc; margin-left: -1px;}
.model-a-logo-box{display: table-cell; vertical-align: middle; text-align: center;}
.model-a-logo-box img{padding-left: 20px;}
.model-a-logo-box p{font-size: 18px; line-height: 24px; color: white; margin-top: 13px;}
.model-a-content{margin: 0 90px; position: relative;}
.model-a-content::before{content:""; display: block; position: absolute; left: 15.5%; top: 0; width: 69%; height: 1px; background-color: #bcbcbc;}
.model-a-content ul{margin: 0 -25px;}
.model-a-content ul::after{content:""; display: table; clear: both;}
.model-a-content li{width: 33.3333%; float: left; padding: 0 25px; padding-top: 70px; position: relative;}
.model-a-content li::before{content:""; display: block; position: absolute; left: 50%; width: 1px; height: 70px; top: 0; background-color: #bcbcbc;}
.model-a-content li:nth-child(2)::before{display: none;}
.model-a-content-box{border-radius: 20px; position: relative;}
.model-a-content-box::before{content:""; display: block; position: absolute; width: 70px; height: 70px; border-radius: 50%; left: 50%; margin-left: -35px; top: -38px;}
.model-a-content-title{padding: 40px 0 20px; position: relative; overflow: hidden;}
.model-a-content-title::before{display: block; position: absolute; left: -10px; top: 0; font-size: 80px; font-weight: 600; line-height: 95px; text-transform: uppercase; opacity: .5; color: #c9ae6d}
.model-a-content-title p{text-align: center; font-weight: 500; font-size: 18px;}
.model-a-content li:nth-child(1) .model-a-content-box{border: 3px solid #c9ae6d;}
.model-a-content li:nth-child(1) .model-a-content-box::before{background: #c9ae6d      url(../../images/sub/model-a_1.png) no-repeat center center;}
.model-a-content li:nth-child(1) .model-a-content-title::before{content:"g"}
.model-a-content li:nth-child(1) .model-a-content-title p{color: #c9ae6d}
.model-a-content li:nth-child(2) .model-a-content-box{border: 3px solid #c0a353;}
.model-a-content li:nth-child(2) .model-a-content-box::before{background: #c0a353 url(../../images/sub/model-a_2.png) no-repeat center center;}
.model-a-content li:nth-child(2) .model-a-content-title p{color: #c0a353}
.model-a-content li:nth-child(2) .model-a-content-title::before{content:"w"}
.model-a-content li:nth-child(3) .model-a-content-box{border: 3px solid #bd9400;}
.model-a-content li:nth-child(3) .model-a-content-box::before{background: #bd9400 url(../../images/sub/model-a_3.png) no-repeat center center;}
.model-a-content li:nth-child(3) .model-a-content-title p{color: #bd9400}
.model-a-content li:nth-child(3) .model-a-content-title::before{content:"u"}
.model-a-main{width: calc(100% + 6px); position: relative; left: -3px; top: 3px; background-color: white; z-index: 2;}
.model-a-main-box{border-radius: 20px; height: 70px; width: 100%; display: table;}
.model-a-main-box p{display: table-cell; vertical-align: middle; text-align: center; color: white;}
.model-a-content li:nth-child(1) .model-a-main-box{background: url(../../images/sub/model-a_1_background.png) no-repeat center center; background-size: cover;}
.model-a-content li:nth-child(2) .model-a-main-box{background: url(../../images/sub/model-a_2_background.png) no-repeat center center; background-size: cover;}
.model-a-content li:nth-child(3) .model-a-main-box{background: url(../../images/sub/model-a_3_background.png) no-repeat center center; background-size: cover;}

@media all and (max-width: 1500px) {
  .model-a-content::before{left: 15%; width: 70%;}
}

@media all and (max-width: 1024px) {
  .model-a-content{margin: 0;}
}

@media all and (max-width: 768px) {
  .model-a-logo::after{display: none;}
  .model-a-logo-inner{padding-bottom: 60px;}
  .model-a-logo-inner::before{display: none;}
  .model-a-content::before{display: none;}
  .model-a-content ul{margin: 0;}
  .model-a-content li{width: 100%; float: none; padding: 0; margin-bottom: 70px;}
  .model-a-content li:last-child{margin-bottom: 0;}
  .model-a-content li::before{display: none;}
}

/*인재상*/

.human-wrap{background: url(../../images/sub/human_line.png) no-repeat top 57% center;}
.human-logo{width: 224px; height: 250px; background: url(../../images/sub/human_background.png) no-repeat center center; margin: 0 auto; display: table;}
.human-logo-box{display: table-cell; vertical-align: middle; text-align: center; padding-right: 10px;}
.human-logo-box p{font-size: 27px; font-weight: 500; color: white; margin-top: 3px; padding-bottom: 15px;}
.human-image{padding-right: 10px;}
.human-image img{margin-left: 10px;}
.human-text{margin: 13px 0 62px 0;}
.human-text p{text-align: center; font-size: 25px; line-height: 40px; color: #222222; font-weight: 500;}
.human-text p span{color: #a90057; display: block;}
.human-character-title{text-align: center;}
.human-character-title p{font-weight: 500; font-size: 23px; color: #222; background: #ededed; display: inline-block; padding: 22.75px 0; width: 370px; border-radius: 50px; position: relative;}
.human-character-title p::before{content:""; display: block; position: absolute; width: 47px; height: 51px; background: url(../../images/sub/title_deco.png) no-repeat center center; left: 50%; margin-left: -23.5px; top: -31px;}
.human-character-content{text-align: center; margin-top: 40px;}
.human-character-content ul{display: inline-block; margin: 0 0 0 60px;}
.human-character-content ul::after{content:""; display: table; clear: both;}
.human-character-content li{float: left; width: 340px; height: 340px; border-radius: 50%; position: relative;}
.human-character-content li:nth-child(1){background-color: rgba(226,63,147,.8);}
.human-character-content li:nth-child(2){background-color: rgba(37,170,226,.8); left: -20px;}
.human-character-content li:nth-child(3){background-color: rgba(243,145,0,.8); left: -40px;}
.human-character-header{padding-top: 40px; text-align: center;}
.human-character-logo{width: 45px; height: 38px; margin: 0 auto;}
.human-character-content li:nth-child(1) .human-character-logo{background: url(../../images/sub/human_1.png) no-repeat center center;}
.human-character-content li:nth-child(2) .human-character-logo{background: url(../../images/sub/human_2.png) no-repeat center center;}
.human-character-content li:nth-child(3) .human-character-logo{background: url(../../images/sub/human_3.png) no-repeat center center;}
.human-character-header p{display: inline-block; font-weight: 500; color: white; font-size: 18px; border-top: 1px solid white; border-bottom: 1px solid white; width: 120px; margin-top: 25px;}
.human-character-main{margin-top: 25px;}
.human-character-main p{font-size: 16px; line-height: 25px; color: white;}

@media all and (max-width: 1250px) {
  .human-character-content ul{margin: 0 0 0 40px;}
  .human-character-content li{width: 300px; height: 300px;}
}

@media all and (max-width: 1024px) {
  .human-wrap{background: none;}
  .human-character-content li{width: 220px; height: 220px;}
  .human-character-header{padding-top: 20px;}
  .human-character-header p{margin-top: 10px;}
  .human-character-main{margin-top: 10px;}
  .human-character-main p{font-size: 12px; line-height: 18px; padding: 0 20px;}
}

@media all and (max-width: 768px) {
  .human-character-content ul{width: 100%; display: block; margin: 0;}
  .human-character-content li{float: none; width: 100%; height: 250px; display: table; border-radius: 0; margin-bottom: 20px;}
  .human-character-inner{display: table-cell; vertical-align: middle;}
  .human-character-content li:nth-child(2){left: 0;}
  .human-character-content li:nth-child(3){left: 0; margin-bottom: 0;}
  .human-character-header{padding-top: 0;}
  .human-character-main p{font-size: 16px; line-height: 25px;}
}

@media all and (max-width: 500px) {
  .human-text p{font-size: 20px; line-height: 30px;}
  .human-character-title p{width: 100%;}
}

/*법인 기타단체*/
.corporation-wrap li{position: relative; margin-bottom: 50px;}
.corporation-wrap li:last-child{margin-bottom: 0;}
.corporation-wrap li::after{content:""; display: table; clear: both;}
.corporation-wrap li .corporation-image{width: 520px; float: left; position: relative;}
.corporation-wrap li .corporation-image::after{content:""; display: block; position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px; border: 1px solid rgba(255,255,255,0.7);}
.corporation-wrap li .corporation-content{width: calc(100% - 570px); float: right;}
.corporation-wrap li .corporation-content a.type2{position: absolute; right: 0; bottom: 0;}

@media all and (max-width: 1250px) {
  .corporation-wrap li .corporation-image{width: 400px;}
  .corporation-wrap li .corporation-content{width: calc(100% - 450px);}
}

@media all and (max-width: 1024px) {
  .corporation-wrap li .corporation-image{float: none; margin: 0 auto;}
  .corporation-wrap li .corporation-content{width: 100%; float: none; margin-top: 20px;}
  .corporation-wrap li .corporation-content a.type2{position: relative; margin-top: 10px;}
}

@media all and (max-width: 500px){
  .corporation-wrap li .corporation-image{width: 100%;}
}

/*상징*/
.symbol-wrap{margin-bottom: 65px;}
.symbol-wrap li {margin-bottom: 20px;}
.symbol-wrap li:last-child{margin-bottom: 0;}
.symbol-wrap li::after{content:""; display: table; clear: both;}
.symbol-wrap li .symbol-image{width: 323px;}
.symbol-wrap li .symbol-content{width: calc(100% - 373px); margin-top: 54px;}
.symbol-wrap li:nth-child(odd) .symbol-image{float: left;}
.symbol-wrap li:nth-child(even) .symbol-image{float: right;}
.symbol-wrap li:nth-child(odd) .symbol-content{float: right;}
.symbol-wrap li:nth-child(even) .symbol-content{float: left; text-align: right;}
.symbol-wrap li:nth-child(even) .symbol-content .objHeading_h2{display: inline-block;}

.song-wrap{height: 900px;}
.song-wrap::after{content:""; display: table; clear: both;}
.song-board{width: 62.5%; height: 100%; float: left; background: url(../../images/sub/song_board.png) no-repeat top center;}
.song-board img{display: none;}
.song-background{width: 37.5%; float: right; height: 100%; background: url(../../images/sub/song_background.png) no-repeat bottom center; padding-top: 70px;}
.song-background li{text-align: center; margin-bottom: 60px;}
.song-background li:last-child{margin-bottom: 0;}
.song-lyrics h1{display: inline-block; font-size: 16px; color: white; padding: 10.5px 0; width: 150px; border: 1px solid white; border-radius: 50px; border-top-left-radius: 0;}
.song-lyrics p{font-size: 14px; line-height: 34px; color: white; font-weight: 400; margin-top: 8px;}

@media all and (max-width: 1024px) {
  .symbol-wrap li .symbol-image{width: 250px;}
  .symbol-wrap li .symbol-content{width: calc(100% - 270px);}
  .song-wrap{height: 550px;}
  .song-board{background-size: cover;}
  .song-background{padding: 30px 10px 0;}
  .song-background li{margin-bottom: 30px;}
  .song-lyrics h1{width: 120px;}
  .song-lyrics p{line-height: 22px;}
}

@media all and (max-width: 768px) {
  .symbol-wrap {margin-bottom: 30px;}
  .symbol-wrap li {margin-bottom: 50px;}
  .symbol-wrap li .symbol-image{width: 323px; margin: 0 auto;}
  .symbol-wrap li .symbol-content{width: 100%;}
  .symbol-wrap li:nth-child(odd) .symbol-image{float: none;}
  .symbol-wrap li:nth-child(even) .symbol-image{float: none;}
  .symbol-wrap li:nth-child(odd) .symbol-content{float: none; margin-top: 25px;}
  .symbol-wrap li:nth-child(even) .symbol-content{float: none; text-align: left; margin-top: 25px;}
  .song-wrap{height: auto;}
  .song-board{width: 100%; float: none; background: transparents;}
  .song-board img{display: block;}
  .song-background{width: 100%; float: none; padding: 30px 10px; position: relative;}
  .song-background::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
  .song-background ul{position: relative; z-index: 2;}
}

@media all and (max-width: 500px) {
  .symbol-wrap li .symbol-image{width: 100%; text-align: center;}
}

/*UI*/
.ui-grid-wrap ul{margin: 0 -28px;}
.ui-grid-wrap ul::after{content:""; display: table; clear: both;}
.ui-grid-wrap li{width: 33.3333%; float: left; padding: 0 28px; height: 256px;}
.ui-grid-box{background: url(../../images/sub/ui_background.png) left -20px top -1px; border: 1px solid #d5d5d5; padding: 0 30px; height: 100%;}
.ui-grid-box h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.ui-grid-box h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.ui-grid-image{text-align: center;}

.font-grid-wrap ul{margin: 0 -34px;}
.font-grid-wrap ul::after{content:""; display: table; clear: both;}
.font-grid-wrap li{width: 50%; float: left; padding: 0 34px; height: 255px; margin-bottom: 50px;}
.font-grid-wrap li:nth-child(-n+2){height: 210px;}
.font-grid-box{background: url(../../images/sub/ui_background.png) left -20px top -1px; border: 1px solid #d5d5d5; padding: 0 30px; height: 100%;}
.font-grid-box h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.font-grid-box h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.font-grid-image{text-align: center;}

.app-font-grid-wrap ul{margin: 0 -28px;}
.app-font-grid-wrap ul::after{content:""; display: table; clear: both;}
.app-font-grid-wrap li{width: 33.3333%; float: left; padding: 0 28px; height: 255px;}
.app-font-grid-box{background: url(../../images/sub/ui_background.png) left -20px top -1px; border: 1px solid #d5d5d5; padding: 0 30px; height: 100%;}
.app-font-grid-box h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.app-font-grid-box h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.app-font-grid-image{text-align: center;}

.all-grid-vertical-wrap{background: url(../../images/sub/ul_bg.jpg) left -20px top -1px; border: 1px solid #d5d5d5; padding-left: 30px;}
.all-grid-vertical-wrap::after{content:""; display: table; clear: both;}
.all-grid-vertical-wrap ul{width: 50%; float: left; padding-right: 60px;}
.all-grid-vertical-wrap ul::after{content:""; display: table; clear: both;}
.all-grid-vertical-wrap li{width: 50%; float: left;}
.all-grid-vertical-wrap li:nth-child(1) .all-grid-image, .all-grid-vertical-wrap li:nth-child(2) .all-grid-image{height: 160px}
.all-grid-vertical-wrap li:nth-child(3) .all-grid-image, .all-grid-vertical-wrap li:nth-child(4) .all-grid-image{height: 175px}
.all-grid-vertical-wrap li:nth-child(5) .all-grid-image, .all-grid-vertical-wrap li:nth-child(6) .all-grid-image{height: 175px}
.all-grid-vertical-wrap h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.all-grid-vertical-wrap h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.all-grid-vertical-wrap .all-grid-image{padding-top: 26px;}
.all-grid-vertical-wrap .all-grid-image.heightauto{height: auto !important;}

.all-grid-wrap{background: url(../../images/sub/ul_bg.jpg) left -20px top -1px; border: 1px solid #d5d5d5; padding-left: 30px;}
.all-grid-wrap::after{content:""; display: table; clear: both;}
.all-grid-wrap ul{width: 50%; float: left; padding-right: 10px;}
.all-grid-wrap.second-grid ul{padding-right: 10px;}
.all-grid-wrap ul::after{content:""; display: table; clear: both;}
.all-grid-wrap li{width: 45.5%; float: left;}
.all-grid-wrap li:nth-child(even){width: 54.5%;}
.all-grid-wrap li:nth-child(1) .all-grid-image, .all-grid-wrap li:nth-child(2) .all-grid-image{height: 160px}
.all-grid-wrap li:nth-child(3) .all-grid-image, .all-grid-wrap li:nth-child(4) .all-grid-image{height: 175px}
.all-grid-wrap li:nth-child(5) .all-grid-image, .all-grid-wrap li:nth-child(6) .all-grid-image{height: 175px}
.all-grid-wrap h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.all-grid-wrap h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.all-grid-wrap .all-grid-image{padding-top: 26px;}

.append-font-grid-wrap{background: url(../../images/sub/ui_background.png) left -20px top -1px; border: 1px solid #d5d5d5; padding-left: 30px; padding-bottom: 50px;}
.append-font-grid-wrap::after{content:""; display: table; clear: both;}
.append-font-grid-wrap ul{width: 50%; float: left; padding-right: 60px;}
.append-font-grid-wrap h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.append-font-grid-wrap h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.append-font-image{margin-top :15px;}
.division-line{margin: 40px 0;}

.emblem-wrap{background: url(../../images/sub/ui_background.png) left -20px top -1px; border: 1px solid #d5d5d5; padding-left: 30px; padding-bottom: 50px;}
.emblem-wrap ul{margin: 0 -30px;}
.emblem-wrap ul::after{content:""; display: table; clear: both;}
.emblem-wrap ul li {display: inline-block; vertical-align: top; width: 49%; padding: 0 30px;}
.emblem-wrap h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-top: 30px;}
.emblem-wrap h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.emblem-image{margin-top :15px;}

.prohibition-wrap{border: 1px solid #d5d5d5; padding: 0 15px;}
.prohibition-wrap ul::after{content:""; display: table; clear: both;}
.prohibition-wrap li{float: left; width: 16.6666%; padding: 30px 0 30px 35px;}
.prohibition-box p{font-size: 11px; padding-left: 38px; background: url(../../images/sub/ui_no.png) no-repeat left top; color: #b9246d; padding-right: 10px; margin-top: 10px;}

.ui-link-inner{text-align: right;}
.ui-link-box{display: inline-block;}
.ui-link-box a:last-child{margin-right: 0 !important;}

@media all and (max-width: 1500px) {
  .prohibition-wrap li{width: 33.3333%;}
  .prohibition-image{text-align: center;}
  .prohibition-box p{line-height: 30px;}
}

@media all and (max-width: 1320px) {
  .prohibition-wrap li{padding: 20px 0 20px 25px;}
  .prohibition-box p{min-height: 40px; line-height: 20px;}
}

@media all and (max-width: 1024px) {
  .ui-grid-box, .font-grid-box, .app-font-grid-box{padding: 0 10px;}
  .ui-grid-box h1, .font-grid-box h1, .app-font-grid-box h1{margin-top: 15px;}
  .all-grid-wrap li:nth-child(1) .all-grid-image, .all-grid-wrap li:nth-child(2) .all-grid-image{height: 120px}
  .all-grid-wrap li:nth-child(3) .all-grid-image, .all-grid-wrap li:nth-child(4) .all-grid-image{height: 150px}
  .all-grid-wrap li:nth-child(5) .all-grid-image, .all-grid-wrap li:nth-child(6) .all-grid-image{height: 110px}

  .all-grid-vertical-wrap li:nth-child(1) .all-grid-image, .all-grid-vertical-wrap li:nth-child(2) .all-grid-image{height: 150px}
  .all-grid-vertical-wrap li:nth-child(3) .all-grid-image, .all-grid-vertical-wrap li:nth-child(4) .all-grid-image{height: 180px}
  .all-grid-vertical-wrap li:nth-child(5) .all-grid-image, .all-grid-vertical-wrap li:nth-child(6) .all-grid-image{height: 180px}

  .prohibition-box p{min-height: 60px;}
}

@media all and (max-width: 768px) {
  .ui-grid-wrap ul, .font-grid-wrap ul, .app-font-grid-wrap ul{margin: 0;}
  .ui-grid-wrap li, .font-grid-wrap li, .app-font-grid-wrap li{width: 100%; float: none; margin-bottom: 20px; padding: 0; height: auto;}
  .font-grid-wrap li:nth-child(-n+2) {height: auto;}
  .ui-grid-box, .font-grid-box, .app-font-grid-box{padding: 0 30px 30px;}
  .ui-grid-wrap li:last-child, .font-grid-wrap li:last-child, .app-font-grid-wrap li:last-child{margin-bottom: 0;}
  .all-grid-wrap{padding: 0 30px; padding-bottom: 30px;}
  .all-grid-wrap ul{width: 100%; float: none; padding: 0;}
  .all-grid-wrap.second-grid ul{padding-right: 0;}
  .all-grid-wrap li{width: 100%; float: none;}
  .all-grid-wrap li:nth-child(even){width: 100%;}
  .all-grid-wrap .all-grid-image{height: auto !important;}

  .all-grid-vertical-wrap{padding: 0 30px; padding-bottom: 30px;}
  .all-grid-vertical-wrap ul{width: 100%; float: none; padding: 0;}
  .all-grid-vertical-wrap li{width: 100%; float: none;}
  .all-grid-vertical-wrap .all-grid-image{height: auto !important;}

  .append-font-grid-wrap{padding: 0 30px; padding-bottom: 30px;}
  .append-font-grid-wrap ul{width: 100%; float: none; padding-right: 0;}

  .emblem-wrap{padding: 0 30px; padding-bottom: 30px;}
  .emblem-wrap ul{width: 100%; float: none; padding-right: 0;}
  .emblem-wrap ul li {width: 100%;}

  .prohibition-wrap li{width: 50%;}
}

@media all and (max-width: 500px) {
  .prohibition-wrap li{width: 100%; float: none; padding: 20px 0; text-align: center;}
  .prohibition-box p{display: inline-block; min-height: 30px; background-size: 18px auto; padding-left: 25px;}
}

/*색상*/
.color-wrap{padding: 30px; border: 1px solid #d5d5d5;}
.color-box > h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-bottom: 35px;}
.color-box > h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.color-box ul{margin: 0 -35px;}
.color-box ul::after{content:""; display: table; clear: both;}
.color-box li{width: 33.3333%; float: left; padding: 0 35px; height: 105px; margin-bottom: 35px;}
.color-box li::after{content:""; display: table; clear: both;}
.color-box li .main-color{width: calc(100% - 175px); float: left; height: 100%; border-radius: 30px; position: relative; border-top-left-radius: 0;}
.color-box li .main-color p{position: absolute; right: 16px; bottom: 12px; font-size: 18px; text-align: right; opacity: .5; color: white;}
.color-box li .main-color.main-1{background-color: #af0055;}
.color-box li .main-color.main-2{background-color: #2ea7e0;}
.color-box li .main-color.main-3{background-color: #f8b62d;}
.color-box li .main-color.main-4{background-color: #c9bc9c;}
.color-box li .main-color.main-5{background-color: #595757;}
.color-box li .main-color.main-6{background-color: #ffffff; border: 1px solid #d8d8d8}
.color-box li .main-color.main-6 p{color: #7e7e7e}
.color-box li .main-color-info{float: right; width: 175px; height: 100%; display: table; padding-left: 30px;}
.color-box li .main-color-info-box{display: table-cell; vertical-align: middle;}
.color-box li .main-color-info-box h1{color: #1c1c1c; font-size: 15px;}
.color-box li .main-color-info-box p{color: #666666; font-size: 13px; margin-top: 5px;}
.color-box li .main-color-info-box p span{color: #1c1c1c; display: inline-block; margin: 0 0 0 10px;}
.color-box li .main-color-info-box p span:first-child{margin: 0;}

.color-box-2 ul{margin: 0 -35px;}
.color-box-2 ul::after{content:""; display: table; clear: both;}
.color-box-2 li{width: 25%; float: left; padding: 0 35px; height: 105px; margin-bottom: 35px;}
.color-box-2 li::after{content:""; display: table; clear: both;}
.color-box-2 li .main-color{width: calc(100% - 165px); float: left; height: 100%; border-radius: 30px; position: relative; border-top-left-radius: 0;}
.color-box-2 li .main-color p{position: absolute; right: 16px; bottom: 12px; font-size: 15px; text-align: right; opacity: .5; color: white;}
.color-box-2 li .main-color.main-7{background-color: #7b002f;}
.color-box-2 li .main-color.main-8{background-color: #6c005e;}
.color-box-2 li .main-color.main-9{background-color: #8a9900;}
.color-box-2 li .main-color.main-10{background-color: #bd9400;}
.color-box-2 li .main-color-info{float: right; width: 165px; height: 100%; display: table; padding-left: 20px;}
.color-box-2 li .main-color-info-box{display: table-cell; vertical-align: middle;}
.color-box-2 li .main-color-info-box h1{color: #1c1c1c; font-size: 15px;}
.color-box-2 li .main-color-info-box p{color: #666666; font-size: 13px; margin-top: 5px;}
.color-box-2 li .main-color-info-box p span{color: #1c1c1c; display: inline-block; margin: 0 0 0 10px;}
.color-box-2 li .main-color-info-box p span:first-child{margin: 0;}

.color-box-3{margin-top: 15px;}
.color-box-3 > h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-bottom: 35px;}
.color-box-3 > h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.metal-color-inner::after{content:""; display: table; clear: both;}
.metal-color-box{float: left; width: 450px;}
.metal-color-box li{margin-bottom: 35px; height: 105px;}
.metal-color-box li:last-child{margin-bottom: 0;}
.metal-color-box li::after{content:""; display: table; clear: both;}
.metal-color-box li .main-color{width: calc(100% - 175px); float: left; height: 100%; border-radius: 30px; position: relative; border-top-left-radius: 0;}
.metal-color-box li .main-color.metal-10{background-color: #b5b5b6;}
.metal-color-box li .main-color.metal-11{background-color: #c0a353;}
.metal-color-box li .main-color p{position: absolute; right: 16px; bottom: 12px; font-size: 18px; text-align: right; opacity: .5; color: white;}
.metal-color-box li .main-color-info{float: right; width: 175px; height: 100%; display: table; padding-left: 30px;}
.metal-color-box li .main-color-info-box{display: table-cell; vertical-align: middle;}
.metal-color-box li .main-color-info-box h1{color: #1c1c1c; font-size: 15px;}
.metal-color-box li .main-color-info-box p{color: #666666; font-size: 13px; margin-top: 5px;}
.metal-color-box li .main-color-info-box p span{color: #1c1c1c; display: inline-block; margin: 0 0 0 10px;}
.metal-color-box li .main-color-info-box p span:first-child{margin: 0;}
.color-logo-inner{float: right; width: calc(100% - 570px);}
.color-logo-inner::after{content:""; display: table; clear: both;}
.color-logo-box{width: 46.5%; float: left; margin-bottom: 30px;}
.color-logo-box:nth-child(even){float: right;}
.color-logo-box::after{content:""; display: table; clear: both;}
.color-logo-box .color-main-logo{float: left;}
.color-logo-box ul{float: right; width: 270px}
.color-logo-box ul::after{content:""; display: table; clear: both;}
.color-logo-box li{float: left; margin-right: 30px;}
.color-logo-box li:last-child{margin-right: 0;}

.background-color-wrap{padding: 50px 30px 75px 30px; border: 1px solid #d5d5d5;}
.background-color-inner::after{content:""; display: table; clear: both;}
.background-color-left{width: 78%; float: left;}
.background-color-left-box{margin-bottom: 42px;}
.background-color-left-box:last-child{margin-bottom: 0;}
.background-color-left-box::after{content:""; display: table; clear: both;}
.background-color-left-box > h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-bottom: 35px; float: left; width: 93px;}
.background-color-left-box > h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.background-color-left-box ul{width: calc(100% - 93px); float: right;}
.background-color-left-box ul::after{content:""; display: table; clear: both;}
.background-color-left-box li{width: 20%; float: left; position: relative; text-align: center;}
.background-color-left-box li p{font-size: 13px; color: #666666; position: absolute; width: 100%; top: -30px; left: 0; display: none;}
.background-color-left-box:first-child li p{display: block;}
.background-color-right{width: 22%; float: right;}
.background-color-right li{margin-bottom: 42px;}
.background-color-right li:last-child{margin-bottom: 0;}
.background-color-right li::after{content:""; display: table; clear: both;}
.background-color-right li h1{font-size: 15px; color: #666666; padding-top: 10px; position: relative; margin-bottom: 35px; float: left; width: 150px;}
.background-color-right li h1::before{content:""; display: block; position: absolute; width: 33px; height: 3px; background-color: #666666; left: 0; top: 0;}
.background-color-right li .background-color-image{float: left;}
.background-gradient-inner{padding-left: 150px; margin-top: 48px; margin-right: 20px;}
.background-gradient{width: 100%; height: 120px; border: 1px solid #2f2623; background: linear-gradient(to right, white, black); position: relative;}
.background-gradient::before{content:""; display: block; position: absolute; width: 15px; height: 151px; background: url(../../images/sub/color_line.png); left: 37%; top: -17px;}
.background-gradient > div{position: absolute; top: 50%; margin-top: -45px;}
.background-gradient .background-white{right: 27%;}
.background-gradient .background-block{left: 12.5%;}
.background-gradient-text{position: relative;}
.background-gradient-text p{font-size: 12px; color: #666666; position: absolute; top: 17px;}
.background-gradient-text p.left{left: -21px;}
.background-gradient-text p.left::before{content:""; display: block; position: absolute; width: 15px; height: 11px; background: url(../../images/sub/color_arrow.png); top: -13px; left: 50%; margin-left: -7.5px;}
.background-gradient-text p.center{left: 35.5%;}
.background-gradient-text p.right{right: -30px;}
.background-gradient-text p.right::before{content:""; display: block; position: absolute; width: 15px; height: 11px; background: url(../../images/sub/color_arrow.png); top: -13px; left: 50%; margin-left: -7.5px;}
.college-color-wrap{padding: 0 30px 30px 30px; border: 1px solid #d5d5d5;}
.college-color-wrap ul{margin: 0 -21px;}
.college-color-wrap ul::after{content:""; display: table; clear: both;}
.college-color-wrap li{width: 20%; float: left; padding: 0 21px; padding-top: 40px}
.college-color{width: 100%; height: 105px; border-radius: 30px; border-top-left-radius: 0; position: relative;}
.college-color.color-1{background-color: #002968;}
.college-color.color-2{background-color: #008e7d;}
.college-color.color-3{background-color: #0069aa;}
.college-color.color-4{background-color: #fbaf33;}
.college-color.color-5{background-color: #d8511d;}
.college-color.color-6{background-color: #91268f;}
.college-color.color-7{background-color: #71bf44;}
.college-color.color-8{background-color: #b195c6;}
.college-color.color-9{background-color: #005747;}
.college-color.color-10{background-color: #864f00;}
.college-color p{position: absolute; right: 16px; bottom: 12px; font-size: 18px; text-align: right; opacity: .5; color: white;}
.college-color-wrap .main-color-info-box{margin-top: 15px;}
.college-color-wrap .main-color-info-box h1{color: #1c1c1c; font-size: 15px;}
.college-color-wrap .main-color-info-box p{color: #666666; font-size: 13px; margin-top: 5px;}
.college-color-wrap .main-color-info-box p span{color: #1c1c1c; display: inline-block; margin: 0 0 0 10px;}
.college-color-wrap .main-color-info-box p span:first-child{margin: 0;}


@media all and (max-width: 1500px) {
  .color-logo-box .color-main-logo{float: none;}
  .color-logo-box ul{float: none; width: 100%; margin-top: 10px;}
}

@media all and (max-width: 1300px) {
  .color-box-2 li{height: auto;}
  .color-box-2 li .main-color{width: 100%; float: none; height: 105px;}
  .color-box-2 li .main-color-info{width: 100%; float: none; margin-top: 20px; display: block; padding-left: 0;}
  .metal-color-box{width: 300px;}
  .metal-color-box li{height: auto;}
  .metal-color-box li .main-color{width: 100%; float: none; height: 105px;}
  .metal-color-box li .main-color-info{width: 100%; float: none; margin-top: 20px; display: block; padding-left: 0;}
  .color-logo-inner{width: calc(100% - 330px);}
  .color-logo-box li{margin-right: 20px;}
  .background-color-right li h1{width: 85px;}
  .background-color-right li .background-color-image{float: right;}
}

@media all and (max-width: 1024px) {
  .color-box li{height: auto;}
  .color-box li .main-color{width: 100%; float: none; height: 105px;}
  .color-box li .main-color-info{width: 100%; float: none; margin-top: 20px; display: block; padding-left:0;}
  .color-box-2 li{width: 50%;}
  .metal-color-box{float: none;; width: 100%;}
  .color-logo-box {width: 50%;}
  .color-logo-box .color-main-logo {float: left; width: 33.33%; padding-right: 1%;}
  .color-logo-box ul {float: left; width: 66.66%; margin-top: 0;}
  .color-logo-box li {float: left; width: 50%; margin-right: 0; padding-right: 1%;}
  .color-logo-inner{width: 100%; float: none; margin-top: 20px;}
  .college-color-wrap li{width: 33.3333%;}
  .background-color-left{float: none; width: 100%; margin-bottom: 42px;}
  .background-color-right{float: none; width: 100%;}
  .background-color-right ul::after{content:""; display: table; clear: both;}
  .background-color-right li{width: 50%; float: left;}
  .background-color-right li h1{width: 150px;}
  .background-color-right li .background-color-image{width: calc(100% - 150px); text-align: center;}
  .background-gradient-inner{padding-left: 0;}
}

@media all and (max-width: 768px) {
  .color-box ul{margin: 0;}
  .color-box li{width: 100%; float: none; padding: 0;}
  .color-box-2 ul{margin: 0;}
  .color-box-2 li{width: 100%; float: none; padding: 0;}
  .color-logo-box{width: 100%; float: none;}
  .color-logo-box:nth-child(even){float: none;}
  .college-color-wrap li{width: 100%;}
  .background-color-left-box > h1{width: 100%; float: none; margin-bottom: 50px;}
  .background-color-left-box ul{width: 100%; float: none;}
  .background-color-left-box li{width: 33.3333%; margin-bottom: 50px;}
  .background-color-left-box li p{display: block;}
  .background-color-right li{width: 100%; float: none;}
  .background-color-right li .background-color-image{text-align: right;}
}

@media all and (max-width: 460px) {
  .background-color-left-box li{width: 50%;}
  .background-gradient-inner{margin-right: 0;}
  .background-gradient-box{text-align: center; position: relative;}
  .background-gradient{width: 40%; height: 350px; display: inline-block; background: linear-gradient(to bottom, white, black)}
  .background-gradient > div{top: auto; margin-top: 0; left: 50%; margin-left: -44px;}
  .background-gradient .background-white{right: auto; top: 60%;}
  .background-gradient::before{transform: rotate(90deg); top: 17%; left: 50%;}
  .background-gradient .background-block{left: 50%; top: 7%;}
  .background-gradient-text{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  .background-gradient-text p{top: auto;}
  .background-gradient-text p.left{left: 0%; top: -2%;}
  .background-gradient-text p.center{left: 0%; top: 35.6%;}
  .background-gradient-text p.right{right: auto; left: -6%; top: auto; bottom: 0;}
  .background-gradient-text p.left::before{top: 3px; left: auto; margin-left: 0; right: -50%; transform: rotate(90deg);}
  .background-gradient-text p.right::before{top: 3px; left: auto; margin-left: 0; right: -40%; transform: rotate(90deg);}
}

/*행정업무편람*/
.administration-wrap > ul{margin: 0 -28px;}
.administration-wrap > ul::after{content:""; display: table; clear: both;}
.administration-wrap > ul > li{display: inline-block; width: 32.3333%; vertical-align: top; padding: 0 28px; margin-top: 30px;}
.administration-box ul:after{content:""; display: table; clear: both}
.administration-wrap > ul > li .left li{width: 50%; float: left;}
.administration-wrap > ul.full > li{width: 100%;}
.administration-wrap > ul.full > li .left li{width: 14.2857%;}
.administration-inner{background: url("../../images/sub/arith_bg1.jpg"); padding: 7px; margin-top: 20px;}
.administration-box{background-color: white; padding: 24px 33px; min-height: 116px;}
.administration-box li{padding: 5px 0;}
.administration-box li a{position: relative; display: inline-block; padding-left: 18px; background: url(../../images/sub/sub_history_arrow.png) no-repeat left top 8px; color: #666666;}
.administration-box li a::after {content: ""; position: absolute; z-index: 1; width: 15px; height: 15px; background: #D7D7D7; right: -4px; top: -2px; border-radius: 50%; opacity: 0; transition: opacity 0.3s;}
.administration-box li a span {position: relative; display: inline-block; z-index: 2;}
.administration-box li a span::before {content: ""; position: absolute; z-index: 1; width: 0; height: 1px; background: #222; left: 0; bottom: 1px; transition: width 0.3s;}

.administration-box li a:hover::after {opacity: 1;}
.administration-box li a:hover span::before {width: 100%;}


@media all and (max-width: 1300px) {
  .administration-wrap > ul.full > li .left li{width: 33.3333%;}
}

@media all and (max-width: 1024px) {
  .administration-wrap > ul > li{width: 49.5%;}
}

@media all and (max-width: 768px) {
  .administration-box {min-height: auto;}
  .administration-wrap > ul > li{width: 100%; float: none; margin-top: 20px;}
  .administration-inner{margin-top: 10px;}
  .administration-wrap > ul.full > li .left li{width: 50%;}
}

@media all and (max-width: 460px) {
  .administration-wrap > ul > li .left li{width: 100%; float: none;}
  .administration-wrap > ul.full > li .left li{width: 100%; float: none;}
}

/*찾아오시는 길*/
.road-wrap ul::after{content:""; display: table; clear: both;}
.road-wrap li{width: 50%; float: left; margin-bottom: 30px;}
.road-wrap li::after{content:""; display: table; clear: both;}
.road-wrap li .road-image{width: 130px; float: left; height: 148px; display: table;}
.road-wrap li .road-image-box{display: table-cell; vertical-align: middle; text-align: center;}
.road-wrap li .road-image-box p{color: white; font-size: 16px; font-weight: 500; margin-top: 10px;}
.road-wrap li .road-content{width: calc(100% - 160px); float: right; height: 148px; display: table;}
.road-wrap li .road-content-box{display: table-cell; vertical-align: middle;}
.road-wrap li .road-content-box p{font-size: 16px; line-height: 30px; color: #666666;}
.road-wrap.bus .road-image{background: url(../../images/sub/road_1.png) no-repeat center center; background-size: contain;}
.road-wrap.wonju .road-image{background: url(../../images/sub/road_2.png) no-repeat center center; background-size: contain;}
.road-wrap li.clear{float: none; width: 100%; clear: both;}

@media all and (max-width: 1024px) {
  .road-wrap li{width: 100%; float: none;}
  .road-wrap li:last-child{margin-bottom: 0;}
}

@media all and (max-width: 768px){
  .road-wrap li {display: table; width: 100%; margin-bottom: 20px;}
  .road-wrap li .road-image {float: none; width: 100px; display: table-cell; vertical-align: middle; text-align: center; height: 116px;}
  .road-wrap li .road-content {float: none; width: calc(100% - 100px); display: table-cell; vertical-align: middle; padding-left: 20px; height: auto;}
  .road-wrap li .road-image-box {display: block;}
  .road-wrap li .road-image-box img {max-width: 40%;}
  .road-wrap li .road-image-box p {font-size: 14px; margin-top: 3px;}
}

/* bBox (div2, div3) */
.bBox { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; }
.bBox > .itemWrap { flex:1 0 100%; width:100%; margin-bottom:50px; display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; min-height:50px; }
.bBox > .itemWrap > .tit { flex:0 1 10%; padding:5px 0; padding-right:10px; font-size:18px; font-weight:600; }
.bBox > .itemWrap > .cont { flex:1 0 90%; width:100%; padding:5px 0; border-left:3px solid #a90057; padding-left:40px; }
.bBox > .itemWrap.em1 > .cont { border-left:3px solid #a90057; }
.bBox > .itemWrap.em2 > .cont { border-left:3px solid #0067c3; }
.bBox > .itemWrap.em3 > .cont { border-left:3px solid #ff7200; }
.bBox > .itemWrap.em4 > .cont { border-left:3px solid #a18e6b; }
.bBox.div2 > .itemWrap { flex:0 0 48%; }
.bBox.div2 > .itemWrap:nth-child(odd) { margin-right:2%;}
.bBox.div2 > .itemWrap:nth-child(even) { margin-left:2%;}
.bBox.div2 > .itemWrap > .tit { flex:0 1 10%; }
.bBox.div2 > .itemWrap > .cont { flex:1 0 90%; }
@media only screen and (max-width:1024px) {
  .bBox.div2 > .itemWrap { flex:0 0 100%; }
  .bBox.div2 > .itemWrap:nth-child(odd) { margin-right:0;}
  .bBox.div2 > .itemWrap:nth-child(even) { margin-left:0;}
  .bBox.div2 > .itemWrap > .tit { flex:0 1 7%; }
  .bBox.div2 > .itemWrap > .cont { flex:1 0 93%; }
}