@import url('https://css.gg/today.css');
@import url('https://css.gg/enter.css');
@import url('https://css.gg/toolbox.css');

.contents .inner {position:relative; width:140rem; margin:6rem auto 10rem;}
@media only screen and (max-width: 1440px) {
	.contents .inner {width:100%; padding:0 5%;} 
}
@media only screen and (max-width: 1024px) {
	.contents .inner {margin: 2rem auto 5rem !important;} 
}
@media only screen and (max-width: 768px) {
	.contents p {font-size:1.5rem !important;}
}

/* greeting */
.greeting .inner {margin-bottom:18rem;}
.greeting .txt_box {position: relative;}
.greeting .txt_box:after {position: absolute; bottom: -47%; content:"MOOCHANG"; font-size:20rem; color:#f3f3f3; font-weight: bold; z-index: -1; animation: slidd 20s linear infinite;}
@keyframes slidd {0% {left:80%;}100% {left:-100%;}}
.greeting .txt_box p {font-weight:300; line-height:130%;}
.greeting .txt_box p mark {font-weight: bold;}
.greeting .txt_box ul {margin-top:5rem;}
.greeting .txt_box ul li {width:50%; font-weight: 300; line-height:170%;}
.greeting .txt_box ul li:nth-child(1) {margin-right:2rem;}
.greeting .txt_box ul li p {font-size:2rem; font-weight: 500; text-align:right; margin-top:12rem;}
.greeting .txt_box ul li p .name {font-size:2.6rem; font-weight: bold; margin-left:2rem;}

@media only screen and (max-width: 1024px) {
	.greeting .txt_box:after {font-size:10rem; bottom: -25%;}
	.greeting .txt_box ul {margin-top:2rem;}
	.greeting .txt_box ul li p {font-size:1.5rem; margin-top: 10rem;}
	.greeting .txt_box ul li p .name {font-size:1.8rem;}
}
@media only screen and (max-width: 768px) {
	.greeting .txt_box:after {display: none;}
	.greeting .txt_box ul li {width:100%;}
	.greeting .txt_box ul li p {margin-top:2rem;}
	.greeting .txt_box ul li p .name {margin-left:1rem; font-size:1.6rem;}
}

/* organization */
.organization {position:relative;}
.organization .tit {font-weight: bold; margin-bottom: 3rem;}
.organization .organization_wp ul {display:flex; flex-wrap: wrap;}
.organization .organization_wp ul li {position: relative; width:32.6%; height:53rem; color:var(--sub-color1); font-weight:100; margin-left:1rem; margin-bottom:1rem; display: flex; flex-direction: column; justify-content: flex-end; background-size:cover !important;}
.organization .organization_wp ul li:nth-child(1) {background:url(../image/sub/bg_organization01.jpg) center no-repeat; margin-left:0;}
.organization .organization_wp ul li:nth-child(2) {background:url(../image/sub/bg_organization02.jpg) center no-repeat;}
.organization .organization_wp ul li:nth-child(3) {background:url(../image/sub/bg_organization03.jpg) center no-repeat;}
.organization .organization_wp ul li:nth-child(4) {background:url(../image/sub/bg_organization04.jpg) center no-repeat; margin-left:0;}
.organization .organization_wp ul li:nth-child(5) {background:url(../image/sub/bg_organization05.jpg) center no-repeat;}
.organization .organization_wp ul li:hover {box-shadow: 3px 2px 10px 1px rgb(147 147 147 / 40%); background:var(--main-color1); border-radius: 20px 0 20px 0;}
.organization .organization_wp ul li p.eng {margin-left: 4rem; opacity:.7; letter-spacing:0;}
.organization .organization_wp ul li p.txt {margin:1rem 0 4rem 4rem;}
.organization .organization_wp ul li:nth-child(2) p.txt {font-weight: 300;}
.organization .organization_wp ul li:before {position: absolute; content:""; width:45px; height:45px; display: block; bottom:40px; right:40px;}
.organization .organization_wp ul li:nth-child(1):before {background:url(../image/sub/ico_organization01.png) center no-repeat;}
.organization .organization_wp ul li:nth-child(2):before {background:url(../image/sub/ico_organization02.png) center no-repeat;}
.organization .organization_wp ul li:nth-child(3):before {background:url(../image/sub/ico_organization03.png) center no-repeat;}
.organization .organization_wp ul li:nth-child(4):before {background:url(../image/sub/ico_organization04.png) center no-repeat;}
.organization .organization_wp ul li:nth-child(5):before {background:url(../image/sub/ico_organization05.png) center no-repeat;}

@media only screen and (max-width: 1024px) {
	.organization .tit {font-size:2.6rem  !important;}
	.organization .organization_wp ul li {width:49%; height: 20rem;}
	.organization .organization_wp ul li:before {background-size: 70% !important;}
	.organization .organization_wp ul li:nth-child(3),
	.organization .organization_wp ul li:nth-child(5) {margin-left: 0; margin-right:1rem;}
	.organization .organization_wp ul li p.eng {font-size:1.2rem !important; font-weight:300;}
	.organization .organization_wp ul li p.txt {font-size:2.2rem !important;}
}
@media only screen and (max-width: 768px) {
	.organization .tit {font-size:1.8rem !important;}
	.organization .organization_wp ul li {width:100%; height:10rem; margin-left: 0 !important; margin-right:0 !important;}
	.organization .organization_wp ul li p.eng {margin-left: 2rem;}
	.organization .organization_wp ul li p.txt {margin: 1rem 0 2rem 2rem; font-size:1.8rem !important;}
	.organization .organization_wp ul li:before {bottom: 20px; right: 20px;}
}

/* history */
.history {position: relative; overflow: hidden;}
.history .tit {font-weight: bold; margin-bottom: 3rem;}
.history .history_wp {display:flex; justify-content: space-between;} 
.history .history_wp:before {position: absolute; bottom:53%; content:"MOOCHANG"; font-size:20rem; color:#f3f3f3; font-weight: bold; z-index: -1; animation: slidd 20s linear infinite;}
@keyframes slidd {0% {left:80%;}100% {left:-100%;}}
.history .history_wp .history_list {width:50%; margin-top: 7rem;}
.history .history_wp .history_img {width:50%;}
.history .history_wp .history_img .img_box img {display: block; max-width: 100%;} 
.history .history_wp .history_cont {margin-left:8rem; width:100%; margin-bottom:10rem;} 
.history .history_wp .history_cont .history_year {width:100%; margin-bottom:3rem;}
.history .history_wp .history_cont .history_year .eng {font-size:2rem; color:var(--main-color1); font-weight:500; margin-bottom:1rem;}
.history .history_wp .history_cont .history_year .tit_year {font-size:5rem; font-weight:600; letter-spacing:-2px;} 
.history .history_wp .history_cont ul li {display:flex; align-items: center; line-height: 250%;}
.history .history_wp .history_cont ul li .date {width:23%; font-size:1.8rem; font-weight:400; display:inline-block;}
.history .history_wp .history_cont ul li .list p {position:relative; font-size:1.8rem; font-weight:300;}
.history .history_wp.type2 {margin-top:9rem;}
.history .history_wp.type2 .history_img {order:2}
.history .history_wp.type2 .history_list:before {display: none;}
.history .history_wp.type2 .history_cont {margin-left: 0;}
.history .summary {background:url(../image/sub/img_history03.jpg) center no-repeat; background-size: cover; padding:11.5rem 0; margin-bottom: -1rem;}
.history .summary .inner {margin: 0 auto;}
.history .summary .tit {color:var(--sub-color1);}
.history .summary ul {margin: 0 auto;}
.history .summary ul li {background:var(--sub-color1); width:24rem; height:24rem; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 5.2rem;}
.history .summary ul li:hover {background:var(--main-color1); color:var(--sub-color1); box-shadow: 0 15px 15px -10px rgb(0 0 0 / 40%); border-radius: 20px 0 20px 0;}
.history .summary ul li:before {content:""; width:35px; height:35px; display: block; margin-bottom:2.5rem;}
.history .summary ul li:nth-child(1):before {background:url(../image/sub/ico_history01.png) center no-repeat;}
.history .summary ul li:nth-child(2):before {background:url(../image/sub/ico_history02.png) center no-repeat;}
.history .summary ul li:nth-child(3):before {background:url(../image/sub/ico_history03.png) center no-repeat;}
.history .summary ul li:nth-child(4):before {background:url(../image/sub/ico_history04.png) center no-repeat;}
.history .summary ul li:nth-child(5):before {background:url(../image/sub/ico_history05.png) center no-repeat;}
.history .summary ul li .txt1 {font-weight:600; margin-bottom:1rem;}
.history .summary ul li .txt2 {font-weight:300; color:#333; line-height:130%;} 
.history .summary ul li:hover .txt2 {color:var(--sub-color1);} 
.history .summary ul li:hover:nth-child(1):before {background:url(../image/sub/ico_history01_hover.png) center no-repeat;}
.history .summary ul li:hover:nth-child(2):before {background:url(../image/sub/ico_history02_hover.png) center no-repeat;}
.history .summary ul li:hover:nth-child(3):before {background:url(../image/sub/ico_history03_hover.png) center no-repeat;}
.history .summary ul li:hover:nth-child(4):before {background:url(../image/sub/ico_history04_hover.png) center no-repeat;}
.history .summary ul li:hover:nth-child(5):before {background:url(../image/sub/ico_history05_hover.png) center no-repeat;}

@media only screen and (max-width: 1440px) {
	.history .summary ul li {width:19%; padding: 2rem; justify-content: center;}
}
@media only screen and (max-width: 1024px) {
	.history .inner {margin: 2rem auto 0 !important;}
	.history .history_wp:before {font-size: 10rem; bottom: 55%;}
	.history .tit {font-size:2.6rem !important;}
	.history .history_wp .history_cont {margin-bottom:3rem; margin-left:4rem;}
	.history .history_wp.type2 .history_img {margin-left:4rem;}
	.history .history_wp .history_cont ul li .date {font-size:1.5rem !important;}
	.history .history_wp .history_cont ul li .list p {font-size:1.5rem !important; padding: 5px 0 5px 15px; line-height: 140%;}
	.history .history_wp .history_cont ul li .list p:before {transform: translateY(-80%);}
	.history .history_wp .history_cont .history_year {margin-bottom:1rem;}
	.history .history_wp .history_cont .history_year .tit_year {font-size:2.6rem !important;} 
	.history .summary {padding:3rem 0; margin-bottom:0;}
	.history .summary ul {flex-wrap: wrap; justify-content: normal; width: 100%; padding-bottom: 2rem;}
	.history .summary ul li {width:32.3%; height: 22rem; margin-right:1rem; margin-bottom:1rem;}
	.history .summary ul li:nth-child(3) {margin-right: 0;}
	.history .summary ul li:nth-child(4),
	.history .summary ul li:nth-child(5) {margin-bottom:0;}
	.history .summary ul li:before {margin-bottom:1.5rem;}
}
@media only screen and (max-width: 768px) {
	.history .tit {font-size:1.8rem !important;}
	.history .history_wp {flex-direction: column;}
	.history .history_wp:before {bottom: 53%;}
	.history .history_wp .history_img {width:100%;}
	.history .history_wp .history_img .img_box img {width:100%;}
	.history .history_wp .history_list {width:100%; margin-top: 3rem;}
	.history .history_wp.type2 {margin-top:0;}
	.history .history_wp.type2 .history_img {order:1; margin-left: 0;}
	.history .history_wp.type2 .history_list {order:2;}
	.history .history_wp .history_cont {margin-left:0;}
	.history .history_wp .history_cont ul li .date {width: auto; margin-right: 2rem;}
	.history .history_wp .history_cont .history_year .tit_year {font-size:2rem !important;}
	.history .summary ul {flex-direction: inherit;}
	.history .summary ul li {width:49%; height: 18rem;}
	.history .summary ul li:nth-child(3) {margin-right:1rem;}
	.history .summary ul li:nth-child(2),
	.history .summary ul li:nth-child(4) {margin-right:0;}
}
@media only screen and (max-width: 568px) {
	.history .summary ul li {width:48%;}
}
@media only screen and (max-width: 425px) {
	.history .history_wp:before {bottom: 56.5%; font-size:6rem;}
}
@media only screen and (max-width: 375px) {
	.history .history_wp:before {bottom: 59%; font-size:6rem;}
	.history .summary ul li {height:23rem;}

}

/* location */
.location .tit {font-weight: bold; margin-bottom: 3rem;}
.location .root_daum_roughmap .wrap_controllers {display: none;}
.location .info_wp {display:flex; width:100%;}
.location .info_wp ul {border-top:2px solid #000; margin-top:4rem; width:50%;}
.location .info_wp ul li {display:flex; align-items: center; border-bottom:1px solid #ddd; padding:2.5rem 0 2.5rem 4rem;}
.location .info_wp ul li .txt1 {font-weight: 600; margin-right:4rem;}
.location .info_wp ul li .txt1:before {content:""; width:5px; height:5px; display: inline-block; border-radius:50px; background:var(--main-color1);     vertical-align: middle; margin-right:1.5rem;}
.location .info_wp ul li .txt2 {font-weight: 300;}
.location .info_wp ul:nth-child(2) li .txt1 {width: 10rem;}

.root_daum_roughmap .cont {display:none;}

@media screen and (max-width: 1024px) {
	.location .tit {font-size:2.6rem !important;}
	.location .info_wp {flex-direction: column;}
	.location .info_wp ul {width:100%;}
} 
@media screen and (max-width: 850px) {
	.root_daum_roughmap .wrap_map {height: 350px !important;}
} 
@media screen and (max-width: 768px) {
	.location .tit {font-size:1.8rem !important;}
	.location .info_wp ul {margin-top:2rem;}
	.location .info_wp ul li {padding: 1.5rem 0 1.5rem 2rem;}
	.location .info_wp ul li .txt1 {margin-right: 2rem;}
	.location .info_wp ul li .txt1:before {margin-right:1rem;}
	.location .info_wp ul:nth-child(2) {border-top: 0; margin-top: 0;}
	.location .info_wp ul:nth-child(2) li .txt1 {width:7rem;}
} 
@media screen and (max-width: 375px) {
	.location .info_wp ul li {flex-direction: column; align-items:normal; line-height:140%; padding: 1rem 0 1rem 2rem;}
	.location .info_wp ul li .txt2 {margin-left:1.3rem;}
} 
/* service */
.service {}
.service .tit {font-weight: bold; margin-bottom: 3rem;}
.service .service_wp .txt1 {font-weight: 500; margin-bottom:1.5rem;}
.service .service_wp .txt2 {font-weight: 300; line-height: 150%;}
.service .service_wp ul {margin-top:5rem;}
.service .service_wp ul li {width:25rem; height:25rem; border:1px solid #333; display: flex; align-items: center; justify-content: center; text-align:center;}
.service .service_wp ul li:nth-child(1) {background:var(--main-color1); color:var(--sub-color1); border: 0;}
.service .service_wp ul li:nth-child(1) .eng {font-size:1.4rem; opacity:.5;}
.service .service_wp ul li:hover {background:var(--main-color1); color:var(--sub-color1); border: 0; border-radius: 20px 0 20px 0;}
.service .project_wp {margin-top:10rem;}
.service .project_wp .project {width:100%; font-weight:300;}
.service .project_wp .project .box {border:1px solid #333; width:50%; padding:4rem;}
.service .project_wp .project .box:nth-child(1) {margin-right:4rem;}
.service .project_wp .project .box ul li {position: relative; line-height:160%; padding-left:2rem;}
.service .project_wp .project .box ul li.mab15 {margin-bottom:1.5rem;}
.service .project_wp .project .box ul li:before {position: absolute; top:9px; left:0; content:""; width:5px; height:5px; background:var(--main-color1); border-radius:50%; display: inline-block;}
@media only screen and (max-width: 1440px) {
	.service .service_wp ul li {width:20%; margin-left:1rem; padding:1rem;}
	.service .service_wp ul li:nth-child(1) {margin-left: 0;}
}
@media only screen and (max-width: 1024px) {
	.service .tit {font-size:2.6rem !important; margin-bottom:2rem;}
	.service .service_wp ul {margin-top:2rem;}
	.service .service_wp ul li {height:20rem;}
	.service .service_wp ul li:nth-child(1) .eng {font-size:1.2rem;}
	.service .project_wp {margin-top:5rem;}
	.service .project_wp .project .box {padding:2rem;}
	.service .project_wp .project .box:nth-child(1) {margin-right:1rem;}
}

@media only screen and (max-width: 768px) {
	.service .tit {font-size:1.8rem !important;}
	.service .service_wp ul {flex-wrap: wrap; flex-direction: initial;}
	.service .service_wp ul li {width:48%; height:9rem; margin-left:1rem; margin-bottom:1rem;}
	.service .service_wp ul li:nth-child(3),
	.service .service_wp ul li:nth-child(5) {margin-left: 0;}
	.service .project_wp .project .box {width:100%;}
	.service .project_wp .project .box:nth-child(1) {margin-right: 0; margin-bottom: 1rem;}
}

/* product */
.pdt_list {display: flex; flex-wrap: wrap; justify-content: flex-start;}
.pdt_list > li {position:relative; overflow:hidden; border:1px solid #ddd; margin: 0 0 30px 30px; flex-basis: 22.6%; z-index:1;}
.pdt_list > li:hover {border:0;}
.pdt_list > li:hover:before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; box-shadow: 3px 2px 10px 1px rgb(147 147 147 / 30%); border: 6px solid #d01b22; background: #fff; box-sizing: border-box; z-index:-1;}
.pdt_list > li a {display: block; width:100%; height:100%;}
.pdt_list > li .ico_mark {position:absolute; top:10px; right:10px; display:flex; justify-content:flex-end;} 
.pdt_list > li .ico_mark li {width:36px; height:36px; overflow:hidden; margin-left:4px;} 
.pdt_list > li .cont .pic {margin:30px auto 10px; padding:20px;}
.pdt_list > li .cont .pic img {display: block; max-width:100%; margin: 0 auto;}
.pdt_list > li .cont .txt {padding:20px; font-size:1.7rem; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; text-align:center;} 

@media only screen and (max-width: 1400px) {
	.pdt_list > li {flex-basis: 21.5%;} 
	.pdt_list > li .cont .txt {font-size:1.5rem;}
	.pdt_list > li .cont .pic {margin:20px auto 10px;}
}
@media only screen and (max-width: 960px) {
	.pdt_list > li {flex-basis: 28%;} 
}
@media only screen and (max-width: 768px) {
	.pdt_list > li {flex-basis: 44%;} 
}
@media only screen and (max-width: 568px) {
	.pdt_list > li {flex-basis: 100%; margin: 0 0 30px 0;} 
}

.pdt_view {}
.pdt_view .view_top {position:relative; overflow:hidden; display:flex; flex-wrap: wrap; flex-direction: row-reverse;}
.pdt_view .view_top .img_box {height:520px; overflow:hidden; flex-basis: 50%; display: flex; align-items: center; justify-content: center;} 
.pdt_view .view_top .img_box img {display:block; max-width:100%; margin:0 auto;}
.pdt_view .view_top .txt_box {display:inline-block;  vertical-align:top; padding-right:5rem; flex-basis: 50%;} 
.pdt_view .view_top .txt_box h4 {font-size:5rem; font-weight:bold; padding-bottom:4rem; margin-bottom:4rem;}
.pdt_view .view_top .txt_box h5 {font-size:3rem; font-weight:500;}
.pdt_view .view_top .txt_box .txt {padding-top:1rem; font-size:1.8rem; font-weight:300;} 
.pdt_view .view_top .txt_box .ico_mark {display:flex; margin-bottom:2rem;} 
.pdt_view .view_top .txt_box .ico_mark li {width:36px; height:36px; overflow:hidden; margin-left:4px;} 
.pdt_view .view_top .txt_box .pd_detail {padding-top:2rem; font-size:1.8rem; font-weight:300;} 
.pdt_view .view_top .txt_box .pd_detail li {position:relative; line-height:180%; padding-left:20px;}  
.pdt_view .view_top .txt_box .pd_detail li:before {position:absolute; top:35%; left:0; content:""; width:5px; height:5px; border-radius:50px; background:#d01b22;}
.pdt_view .view_top .txt_box .btn_wp {margin-top:5rem;}
.pdt_view .view_top .txt_box .btn_list {position: relative; display:inline-block; width: 32%; height:60px; text-align:center; font-weight:500; line-height:60px; margin-right:5px;}
.pdt_view .view_top .txt_box .btn1 {border:1px solid #777;}
.pdt_view .view_top .txt_box .btn2 {border:1px solid #777;}
.pdt_view .view_top .txt_box .btn3 {border:1px solid #777;}
.pdt_view .view_top .txt_box .btn_list i {display:inline-block; vertical-align:middle; margin-right:1rem;}
.pdt_view .view_top .txt_box .btn_list:hover {box-shadow: 3px 2px 10px 1px rgb(147 147 147 / 30%); background: #d01b22; color: #ffff; border: 0;}
.pdt_view .view_cont .txt_wp {border-bottom: 1px solid #000; padding: 8rem 0 2rem; margin-bottom: 5rem;}
.pdt_view .view_cont .txt_wp .tit {font-size: 2rem; font-weight: 400; padding: 1.8rem 10rem; display: inline; border: 1px solid #000;  border-bottom: 1px solid #fff; background: #fff;}
.pdt_view .view_cont img {max-width:100%} 

@media only screen and (max-width: 1440px) {
	.pdt_view .view_top .txt_box {padding-right:2rem;}
	.pdt_view .view_top .txt_box h4 {font-size:4rem; margin-bottom:0;}
}
@media only screen and (max-width: 1240px) {
	.pdt_view .view_top .txt_box h4 {font-size:2.8rem; padding-bottom:3rem;}
	.pdt_view .view_top .txt_box h5 {font-size:2rem;}
	.pdt_view .view_top .txt_box .btn_wp {margin-top:2rem; font-size:1.5rem;}
	.pdt_view .view_top .txt_box .btn_list {width:100%; margin-bottom:.5rem;}
	.pdt_view .view_top .txt_box .pd_detail {font-size:1.6rem;}
	.pdt_view .view_top .img_box {height:auto;}
}
@media only screen and (max-width: 1024px) {
	.pdt_view .view_top .txt_box h4 {font-size:2rem;}
	.pdt_view .view_top .txt_box h5 {font-size:1.6rem;}
	.pdt_view .view_top .txt_box .pd_detail {padding-top:1rem;}
}
@media only screen and (max-width: 768px) {
	.pdt_view .view_top .txt_box {flex-basis:100%; padding-left:0; margin-top:3rem;}
	.pdt_view .view_top .txt_box h4 {font-size:2rem; margin-bottom:1.5rem; padding-bottom:1rem;}
	.pdt_view .view_top .txt_box h5 {font-size:1.6rem;}
	.pdt_view .view_top .txt_box .btn_wp {margin: 2rem 0 0; font-size:1.4rem;}
	.pdt_view .view_top .txt_box .btn_list {height:5rem; line-height:5rem;}
	.pdt_view .view_top .txt_box .pd_detail {font-size:1.5rem;}
	.pdt_view .view_top .txt_box .pd_detail li {padding-left:1.5rem;}
	.pdt_view .view_cont {margin-top:3rem;}
	.pdt_view .view_cont .txt_wp {padding:0 0 1rem;}
	.pdt_view .view_cont .txt_wp .tit {padding: 0.8rem 2rem; font-size:1.5rem;}

	.pdt_view .view_top .img_box {flex-basis:100%;}
}
@media only screen and (max-width: 568px) {
	.pdt_view .view_top .img_box img {max-height: 400px;}
}
@media only screen and (max-width: 425px) {
	.pdt_view .view_top .img_box img {max-height: 300px;}
}

/* ready_img */
.ready img {display: block; max-width:100%; margin: 0 auto;}