@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap");

/*top_banner*/
#top_banner {background:#663399;color:#fff;height:80px;letter-spacing:-0.025em;}
#top_banner .container {width:1200px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;}
#top_banner h2{font-size:20px;font-weight:500;margin-bottom:10px;}
#top_banner em{font-size:24px;color:#ff0;}
#top_banner p{font-size:14px;font-weight:300;}
#top_banner a{font-size:30px;font-weight:500;color:#ff0;vertical-align: middle;}
#top_banner span {font-size:18px;vertical-align:top;}
#top_banner i {margin-left:10px;cursor:pointer;vertical-align: middle;}



/*header nav*/
#header {line-height:100px;}
#header .container {display:flex;width:1200px;margin:0 auto;align-items:center;}
#header h1 {padding:0 15px;}
#header nav {margin:auto;}
#header nav>ul {display:flex;position:relative;}
#header nav>ul>li>a {display:block;padding:0 28px;}
#header nav>ul>li {position:relative;font-weight:500;color:#333;}
#header nav>ul>li:hover {color:#663399;}
#header nav>ul>li:hover>ul>li {color:#333;}
#header nav>ul>li~li:after {position:absolute;top:44px;content:"";display:block;width:1px;height:12px;background:#555;}
#header .right {display:block;border-radius:40px;font-size:15px;font-weight:500;color:#666;padding:5px 15px;line-height:20px;border: 1px solid #eee;text-align:center;} 
#header .right i {margin-right:5px;font-size:20px;vertical-align:middle;}
#header nav>ul>li>ul>li {font-weight:400;}
#header nav>ul>li>ul>li~li {border-top:1px solid #ddd;}
#header nav>ul>li>ul {display:none;position:absolute;top:90px;left:50%;transform:translateX(-50%);width:110%;text-align:center;border:1px solid #ddd;background:#fff;padding-top:5px;padding-bottom:5px;z-index:999;}
#header nav>ul>li>ul>li>a {display:block;line-height:40px;background:#fff;position:relative;z-index:1;}
#header nav>ul>li:hover>ul {display:block;}
#header nav>ul>li>ul>li:hover {color:#663399;font-weight:500;}

#header nav>ul>li>ul:after {position:absolute;top:0;left:50%;transform:translateX(-50%);display:block;content:"";width:0;height:3px;background:#663399;transition:0.5s;}
#header nav>ul>li:hover>ul:after {width:60%;}



/*main_visual*/
#visual .container {width:1200px;margin:0 auto;color:#fff;}
#visual .main_visual {background:rgba(0,0,0,0.3);}
#visual .main_visual figure {height:700px;position:relative;}
#visual .main_visual .slider01 {background:url(../img/main_visual01.jpg) no-repeat center center/cover;}
#visual .main_visual .slider02 {background:url(../img/main_visual02.jpg) no-repeat center center/cover;}
#visual .main_visual .slider03 {background:url(../img/main_visual03.jpg) no-repeat center center/cover;}
#visual .main_visual figure .container {padding:230px 0 0 0;}
#visual .main_visual figure p {font-size:18px;font-weight:300;margin-bottom:18px;letter-spacing:0.4em;opacity:0;}
#visual .main_visual figure.on p {opacity:1;transition:1s 1s;}
#visual .main_visual figure h3 {text-indent:-4px;font-size:38px;font-weight:500;margin-bottom:32px;opacity:0;}
#visual .main_visual figure.on h3 {opacity:1;transition:0.5s;}
#visual .main_visual figure strong {font-size:16px;opacity:0;}
#visual .main_visual figure.on strong {opacity:1;transition:1s 1.3s;}
#visual .main_visual figure a {display:block;width:120px;background:#663399;margin-top:45px;border-radius:5px;line-height:35px;font-size:15px;text-align:center;opacity:0}
#visual .main_visual figure.on a {opacity:1;transition:1s 1.5s;}



/*con01*/
.con01 {position:relative;padding:0 0 150px;text-align:center;color:#333;letter-spacing:-0.025em;}
.con01:before {content:"";display:block;width:1px;height:150px;background:#663399;margin:0 auto;}
.con01 .rotate img {animation:rotate 6s infinite;}
@keyframes rotate {
    0% {transform:rotate(0);}
    50% {transform:rotate(180deg) scale(1.3);}
    100% {transform:rotate(360deg);}
}

.con01 h2 {font-weight:700;margin-top:10px;margin-bottom:50px;}
.con01 h3 {font-size:28px;font-weight:700;letter-spacing:0;margin-bottom:50px;color:#663399;transform:scale(0.2);opacity:0;transition:1s;font-family: "Noto Serif KR", sans-serif;}
.con01 h3>span {font-size:18px;margin:0 10px;}
.con01.on h3 {opacity:1;transform:scale(1);}
.con01 strong {display:block;font-size:18px;font-weight:bold;margin-bottom:20px;font-family: "Noto Serif KR", sans-serif;}
.con01 p {font-size:15px;line-height:1.5;}

.con01 .container {width:1200px;margin:60px auto;}
.con01 .container figure {padding:0 15px;}
.con01 .container figure img {max-width:100%;}
.con01 span {font-size:15px;line-height:1.5;}

.con01 .btn i {position:absolute;top:61%;left:50%;transform:translate(-50%,-5%);font-size:20px;background:#663399;color:#fff;border-radius:50%;cursor:pointer;}
.con01 .btn i.xi-angle-left {margin-left:-630px;padding:10px 10px 10px 8px;}
.con01 .btn i.xi-angle-right {margin-left:630px;padding:10px 7px 10px 10px;}



/*con02*/
.con02 {background:url(../img/con02.jpg) no-repeat center center/cover;background-attachment:fixed;height:800px;padding:150px 0;margin:0 auto;text-align:center;color:#fff;letter-spacing:-0.025em;}
.con02 h2 {font-size:26px;font-weight:600;margin-bottom:15px;}
.con02 p {font-size:15px;font-weight:300;margin-bottom:73px;}

.con02 .container {position:relative;display:flex;width:1170px;margin:0 auto;text-align:center;margin:0 auto;padding:0 15px;border:1.5px solid #aaa;height:363px;}
.con02 .container figure {flex:1;opacity:0;transform:scale(0.2);transition:0.3s;}
.con02.on .container figure:nth-of-type(1) {transition:0.3s;}
.con02.on .container figure:nth-of-type(2) {transition:0.3s 0.3s;}
.con02.on .container figure:nth-of-type(3) {transition: 0.3s 0.5s;}
.con02.on .container figure:nth-of-type(4) {transition:0.3s 0.8s;}
.con02.on .container figure {transform:scale(1);opacity:1;}
.con02 .container figure:hover h3 {color:#ff0;}
.con02 .container figure h3 {width:70px;height:70px;line-height:70px;margin:0 auto;font-size:24px;font-weight:700;background:#663399;border-radius:50%;transform:translateY(-50%);transition:0.3s;z-index:999;}
.con02 .container figure strong {display:block;font-size:21px;font-weight:500;margin-bottom:32px;}
.con02 .container figure>p {font-size:15px;font-weight:400;line-height:24px;margin-bottom:0;}
.con02 .container figure a {display:block;width:117px;background:#663399;line-height:35px;border-radius:5px;margin:44px auto;font-size:14px;font-weight:300;}
.con02 .container figure a:hover {background:#fff;color:#663399;font-weight:700;transition:0.3s;}

.con02 .container figure a i {vertical-align:middle;margin-left:3px;}
.con02 .container figure~figure:before {position:absolute;top:95px;content:"";display:block;width:1px;height:180px;background:#777;}



/*con03*/
.con03 {position:relative;padding:150px 0;width:1200px;margin:0 auto;color:#333;letter-spacing:-0.025em;}
.con03 h2 {font-size:28px;font-weight:600;margin-bottom:15px;padding:0 15px;}
.con03 p {font-size:15px;margin-bottom:30px;padding:0 15px;}
.con03 .container01 {display:flex;width:1200px;}
.con03 figure {padding:0 15px;}

.con03 .case {overflow:hidden;}
.con03 figure .case img {transition:0.4s;}
.con03 figure:nth-child(1) {z-index:999;}
.con03 figure:hover .case img {transform:scale(1.1);}

.con03 .container02 {position:absolute;top:605px;left:20%;transform:translate(15px,0);opacity:0;transition:1s 0.3s;}
.con03.on .container02 {left:50%;opacity:1;}
.con03 strong {font-size:22px;font-family:"Noto Serif KR", sans-serif;}
.con03 em {font-size:15px;}
.con03 span {display:block;margin-top:12px;font-size:15px;font-weight:400;line-height:24px;}
.con03 a {display:block;font-weight:700;margin-top:29px;}
.con03 i {transition:0.3s;}
.con03 a:hover i {transform:translateX(20px);}



/*con04*/
.con04 {padding:110px 0;background:url(../img/con04_visual05.jpg) no-repeat center center/cover;text-align:center;color:#f2f2f2;letter-spacing:-0.025em;}
.con04 h2 {font-size:16px;font-weight:300;margin-bottom:10px;color:#ddd;}
.con04 p {font-size:20px;font-weight:500;line-height:24px;}
.con04 .btn {display:flex;justify-content:center;margin:28px auto 0;}
.con04 a {display:block;border:1px solid #999;width:200px;line-height:32px;border-radius:5px;text-align:center;margin:0 15px;transition:0.3s;}
.con04 a:hover {background:rgba(255,255,255,0.5);color:#000;font-weight:500;}



/*con05*/
.con05 {padding:150px 0 100px;width:1200px;margin:0 auto;letter-spacing:-0.025em;}
.con05 h2 {font-size:28px;font-weight:600;margin-bottom:15px;padding:0 15px;}
.con05 p {font-size:15px;margin-bottom:30px;padding:0 15px;}

.con05 .wrap {display:flex;width:1200px;}
.con05 .left {width:385px;padding:40px 15px 0;}
.con05 dl {display:flex;flex-wrap:wrap;line-height:36px;}
.con05 dt {width:25%;font-weight:400;font-size:15px;color:#663399;}
.con05 dd {width:75%;font-size:18px;font-weight:500;}
.con05 .btn {display:flex;margin-top:32px;}
.con05 .btn a {flex:1;display:block;font-size:15px;font-weight:500;color:#663399;border:1px solid #663399;line-height:32px;border-radius:5px;text-align:center;transition:0.3s;}
.con05 .btn a:nth-child(1) {margin-right:15px;}
.con05 .btn a:hover {background:#663399;color:#fff;}

.con05 .map {padding:0 0 0 30px;}



/*footer*/
#footer {background:#333;color:#ccc;padding:50px 0;}
#footer .container {display:flex;width:1200px;margin:0 auto;padding:0 15px;justify-content:space-between;line-height:40px;}
#footer img {width:170px;}
#footer ul {display:flex;}
#footer li {position:relative;}
#footer li:nth-of-type(2) {color:#fff;}
#footer ul a {display:block;padding:0 0 0 36px;}
#footer .container li~li:before {font-size:12px;content:"|";position:absolute;top:0px;left:16px;color:#666;}

#footer hr {margin:10px auto 15px;border:none;border-top:1px solid #666;width:1170px;}

#footer .container .left {line-height:25px;}
#footer address {margin-top:50px;color:#999;font-size:15px;}

#footer .right a {display:block;border:1px solid #ccc;width:200px;line-height:36px;text-align:center;margin-bottom:15px;transition:0.3s;}
#footer .right a:hover {background:rgba(255,255,255,0.6);color:#333;font-weight:500;}



/*right_pop*/
#right_pop {position:fixed;top:120px;right:3%;display:block;text-align:center;width:120px;height:120px;background:#663399;border-radius:50%;padding:30px 0;box-shadow: 3px 3px 5px rgba(0,0,0,0.3);z-index:999;}
#right_pop a {color:#fff;font-size:20px;font-weight:400;line-height:28px;transition:0.5s;}
#right_pop:hover {box-shadow: inset 3px 3px 10px rgba(0,0,0,0.3);}
#right_pop:hover a {color:#ff0;transition:1s;}