@charset "UTF-8";

#wrap{width:100%;height:100%;margin-top:80px;overflow:hidden;}
#wrap *{font-family: 'Poppins';}

/* gnb */
#main > #header_wrap{border-bottom:1px solid #d8d8d8;background:#fff;}
#main > #header_wrap .logo .black{display:block;}
#main > #header_wrap .logo .white{display:none;}

#wrap section{}
.inner{width:100%;height:100%;max-width:1368px;margin:0 auto;padding:150px 30px;box-sizing:border-box;}
@media screen and (max-width:1024px){
	#wrap{margin-top:68px;}
	.inner{padding: 80px 16px;}
}
@media screen and (max-width:640px){
	#wrap{margin-top:60px;}
}

/* section */
/* common */
.section_top > h2.tit{margin-bottom:20px;font-size:52px;font-weight:600;color:#000;line-height: 1.3;word-break:keep-all;}
.section_top > h2.tit.eng{font-weight:600;line-height: 1.5;}
.section_top > p.tit_detail{font-size:28px;font-weight:500;color:#000;line-height: 1.4;word-break:keep-all;}
@media screen and (max-width:1024px){
	.section_top > h2.tit{font-size:32px;}
	.section_top > h2.tit.eng{font-size:32px;}
	.section_top > p.tit_detail{font-size:20px;}
}
@media screen and (max-width:640px){
	.section_top > h2.tit{font-size:30px;margin-bottom: 10px;}
	.section_top > h2.tit.eng{font-size:33px;}
	.section_top > p.tit_detail{font-size:16px;line-height: 1.5;}
}
@media screen and (max-width:400px){
}

/* main */
.main01{}
.main01 > .inner{padding:100px 30px 80px;}
.main01 h2.tit{margin-bottom:20px;font-size:65px;font-weight:800;color:#000;line-height: 1.3;}
.main01 h2.tit.eng{font-weight:600;line-height: 1.5;}
.main01 p.tit_detail{font-size:28px;font-weight:600;color:#000;}
@media screen and (max-width:1024px){
	.main01 > .inner{padding: 80px 16px;}
	.main01 h2.tit{font-size:45px;}
	.main01 h2.tit.eng{}
	.main01 p.tit_detail{font-size:20px;}
}
@media screen and (max-width:640px){
	.main01 > .inner{padding: 40px 16px 30px;}
	.main01 h2.tit{font-size:35px;}
	.main01 h2.tit.eng {line-height: 1.25;}
	.main01 p.tit_detail{font-size:18px;line-height: 1.5;}
}
/* main02 */
.main02 .section_top{margin-bottom:0;}

/* visual */
.visual{}
.visual > video{width:100%;height:100%;}
@media screen and (max-width:1024px){
}

/* picture */
.picture {position:relative;}
.picture > .bg_img{width:100%;height: 440px;background:url('/common/img/main/img_main01.jpg') no-repeat;background-position: 100% 27%;background-size: cover;}
.picture > .bg_left{position:absolute;top:0;left:0;width:20%;height:100%;background:#fff;transition:width .3s ease-in-out, opacity .2s .1s ease-in-out;}
.picture > .bg_right{position:absolute;top:0;right:0;width:20%;height:100%;background:#fff;transition:width .3s ease-in-out, opacity .2s .1s ease-in-out;}
.picture > .bg_left.disappear,
.picture > .bg_right.disappear{width:0;transition:width .3s ease-in-out, opacity .2s .1s ease-in-out;}
@media screen and (max-width:640px){
	.picture{padding-bottom:50px;}
	.picture > .bg_img{background-position:center;}
}
@media screen and (max-width:400px){
	.picture > .bg_img{background-size:100%;height:200px;}
}

/* process */
@media screen and (min-width:1930px){
	.process{padding:0 !important;}
}
.process {width:100%;height:95%;margin-top: 10px !important;display: flex; justify-content: center;align-items: center;  -webkit-transform: translateZ(0);overflow-x:hidden; box-sizing: border-box;}
.process * { -webkit-transform: translateZ(0)}
.process > .inner{width: 90%;margin: 0 auto;margin-left:15%;max-width: initial;padding: 0 30px;}
.process { height:95%;display: flex; justify-content: center;align-items: center;  -webkit-transform: translateZ(0);overflow-x:hidden;}
.process * { -webkit-transform: translateZ(0)}
.process_list_area {position: relative;width: 100%; }
.process_list {display: flex; width:150vw;  }
.process_list .list {width:auto; color:#333;  box-sizing:border-box}
.process_list .list.item_1 {width:20%; padding-top:100px}
.process_list .list.item_2 {width:21%; padding-right:3%; padding-top:100px}
.process_list .list.item_3 {width:21%; padding-right:3%;padding-top: 50px;}
.process_list .list.item_4 {width:21%; padding-right:2%;}
.process_list .list.item_5 {width:20%; display: flex;align-items: flex-end;margin-right: 2%;padding-bottom: 80px;box-sizing: border-box;}

.process_list .list h2.tit{margin-bottom:30px;font-size:2.5vw;font-weight:600;color:#000;line-height: 1.3;}
.process_list .list h3.tit{margin-bottom:30px;font-size:2vw;font-weight:600;color:#000;line-height: 1.3;text-align: right;}
.process_list .list p.tit_detail{font-size:1.5vw;font-weight:400;color:#000;line-height: 1.5;width: 80%;}
.process_list .list p.tit_detail > span.eng{line-height:1.5;}
.process_list .list img {width:100%}
.process_list .list.item_5 h2.tit{margin-bottom:0;text-align: right;}
.process_list .list > .img_box{width:100%;}
.process_list .list > .txt_box{margin-top:20px;}
.process_list .list > .txt_box > p{font-weight: 400;font-size:18px;color:#000;}
.process_list .list > .txt_box > p.tit{font-weight:600;font-size:24px;margin-bottom:10px;}
.process_list .list .bg_logo{width:auto; max-width:none;padding-bottom: 50px;box-sizing: border-box;}

.process_list .list + .process_list .list{margin-left: 0;}
@media screen and (max-width:1024px){
	.process{margin-top:0 !important;padding: 0 !important;}
	.process > .inner{width: 100%;margin-left:0;padding:80px 16px;}
	.process_list{flex-direction: column;width:100%;align-items: center;}
	.process_list .list{width:60% !important;transform: none !important;padding: 50px 0;}
	.process_list .listitem_2 {padding-top:0;}
	.process_list .listitem_3{padding-top:50px;}
	.process_list .list:nth-child(odd){margin-right:auto;}
	.process_list .list:nth-child(even){margin-left: auto;}
	.process_list .list h2.tit{font-size:32px;word-break: keep-all;}
	.process_list .list h3.tit{font-size:24px;text-align: left;}
	.process_list .list h2.tit > br{display:none;}
	.process_list .list.item_5 h2.tit{text-align:left;}
	.process_list .list p.tit_detail{font-size:20px;}
	.process_list .list p.tit_detail > span.eng{font-weight:500;}
	.process_list .list .bg_logo{display:none;}
}
@media screen and (max-width:640px){
	.process > .inner{padding: 30px 16px 80px;}
	.process_list .list.item_1{padding:0;}
	.process_list .list.item_2,
	.process_list .list.item_5{padding-bottom: 0;}
	.process_list .list.item_2{padding-top:80px}
	.process_list .list.item_3{padding-top: 60px;}
	.process_list .list h2.tit{font-size:30px;line-height:1.3}
	.process_list .list h3.tit{}
	.process_list .list p.tit_detail{font-size:16px;}
	.process_list .list{padding:30px 0;width:80% !important;}
	.process_list .list > .txt_box > p{font-size:15px;line-height:1.5;word-break: keep-all;}
	.process_list .list > .txt_box > p.tit{font-size:20px;}
}

/* making */
.making{margin-top: 130px;background:#f7f9fb;position:relative;}
.making:before{content:'';background:url('/common/img/main/bg_main01.png') no-repeat; position:absolute; top:0; right:0; width:100%;height:100%;background-position: 115% 10%;}
.making > .inner{z-index: 2;position: relative;}
.making h2.tit{font-size:60px;}
.making.on .section_top > p.tit_detail{font-size:28px;}
.making > .inner > ul {display:flex;justify-content: space-around;align-items: flex-start;margin-top: 140px;text-align: center;}
.making > .inner > ul > li{}
.making > .inner > ul > li > .circle{display: flex;align-items: center;justify-content: center;margin: 0 auto;width: 235px;height: 235px;border-radius: 500px;}
.making > .inner > ul > li > .circle.circle1{background:#2CA9D0;}
.making > .inner > ul > li > .circle.circle2{background:#8CB540;}
.making > .inner > ul > li > .circle.circle3{background:#F38331;}
.making > .inner > ul > li > .txt_box {margin-top:30px;}
.making > .inner > ul > li > .txt_box > p{font-weight: 400;font-size:18px;color:#000;line-height: 1.5;font-family: 'Poppins';}
.making > .inner > ul > li > .txt_box > p.tit{font-weight:600;font-size:24px;margin-bottom:10px;}
@media screen and (max-width:1024px){
	.making{margin-top:0;}
	.making:before{background-size: 50%;}
	.making > .inner > ul {flex-direction: column;margin-top: 80px;align-items: center;}
	.making > .inner > ul > li{margin-bottom: 50px;}
	.making > .inner > ul > li:last-child{margin-bottom:0;}
	.making > .inner > ul > li > .circle{width:180px;height:180px}
	.making > .inner > ul > li > .circle > img{max-width: 70px;}
	.making > .inner > ul > li > .txt_box > p{word-break: keep-all;}
	.making > .inner > ul > li > .txt_box > p > br {display: none;}
}
@media screen and (max-width:640px){
	.making:before{display:none;}
	.making.on .section_top > p.tit_detail{font-size:18px;}
	.making > .inner > ul > li > .txt_box > p{font-size:16px;}
	.making > .inner > ul > li > .txt_box > p.tit{font-size: 20px;}
}
@media screen and (max-width:400px){
	.making .section_top > p.tit_detail{width:80%;}
	.making > .inner > ul > li > .txt_box > p{width:82%;margin: 0 auto;}
}
@media screen and (max-width:340px){
	.making .section_top > p.tit_detail{width:100%;}
}

/* product */
.product{}
.product > .inner{padding:150px 30px 0;}
.product .list{display:flex;margin-top: 80px;justify-content: space-between;align-items: center;}
.product .list > li{display:inline-block;width: 32%;position:relative;border-radius: 40px;}
.product .list > li .img_box{transition: all 0.3s ease-out;}
.product .list > li .txt_box > p{position:absolute;left:40px;width: 80%;}
.product .list > li .txt_box > p.ex{font-size:18px;color:#000;font-weight: 700;border-bottom:1px solid transparent;top:30px;}
.product .list > li .txt_box > p.tit{font-size:38px;color:#000;border:0;font-weight:600;bottom:30px;line-height: 1.1;}
.product .list > li .txt_box > p.tit > .eng{font-size:38px;font-weight: 600;}
@media screen and (max-width:1024px){
	.product > .inner{padding:80px 16px;}
	.product .list > li .txt_box > p{left:20px;}
	.product .list > li .txt_box > p.ex{font-size: 16px;top:20px}
	.product .list > li .txt_box > p.tit{font-size: 25px;bottom:20px;width: 90%;}
	.product .list > li .txt_box > p.tit > .eng{font-size: 25px;}
}
@media screen and (max-width:640px){
	.product > .inner{padding:80px 16px 120px;}
	.product .list{margin-top: 50px;flex-direction: column;}
	.product .list > li{width:100%;min-height: 180px;margin-bottom:20px;border-radius:25px;background: url(/common/img/main/img_main05_mo.png) no-repeat 100% 100%;background-size: cover;background-position: 50% 90%;transition: all 0.3s ease-out;}
	.product .list > li:nth-child(2){background: url(/common/img/main/img_main06_mo.png) no-repeat 100% 100%;background-size: cover;background-position: 50%;}
	.product .list > li:nth-child(3){background: url(/common/img/main/img_main07_mo.png) no-repeat 100% 100%;background-size: cover;background-position: 50%;margin-bottom:0;}
	.product .list > li .img_box{display:none;}
	.product .list > li .txt_box > p{left:30px;}
	.product .list > li .txt_box > p.ex{font-size: 16px;top:30px}
	.product .list > li .txt_box > p.tit{font-size: 30px;bottom:30px;left: 0;width: 95%;text-align:right;}
	.product .list > li .txt_box > p.tit > .eng{font-size: 30px;}
}
/* product 활성화 */
.product .list > li:hover .img_box {filter: brightness(60%);}
.product .list > li:hover .txt_box p{color:#fff;}
.product .list > li:hover .txt_box p.ex{text-decoration:underline;}
@media screen and (max-width:640px){
	.product .list > li:hover {background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(/common/img/main/img_main05_mo.png);background-repeat: no-repeat;background-size: cover;background-position: 50% 100%;}
	.product .list > li:nth-child(2):hover {background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(/common/img/main/img_main06_mo.png);background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;}
	.product .list > li:nth-child(3):hover {background:linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url(/common/img/main/img_main07_mo.png);background-repeat: no-repeat;background-size: cover;background-position: 50% 50%;}
}

/* partner */
.partner{}
.partner > .inner{padding:180px 30px 0;}
.partner h2.tit.eng{font-size:60px;font-weight:600;}
.partner > .inner > .list{display:flex;flex-wrap:wrap;align-items: center;justify-content: space-between;margin-top:40px;}
.partner > .inner > .list > li{display: flex;align-items: center;justify-content: center;width:16.66%;margin-top:50px;background:#fff; box-sizing:border-box;}
@media screen and (max-width:1024px){
	.partner h2.tit.eng{font-size:40px;}
	.partner > .inner > .list > li{width:25%;}
}
@media screen and (max-width:640px){
	.partner > .inner{padding: 0 16px 60px;}
	.partner h2.tit.eng{font-size:33px;}
	.partner > .inner > .list{margin-top: 20px;}
	.partner > .inner > .list > li{margin: 1%;min-height: 73px;}
	.partner > .inner > .list > li:nth-last-child(4) > img{width:100%;}
	.partner > .inner > .list > li:nth-last-child(3) > img{width: 20%;}
	.partner > .inner > .list > li > img{width:80%;}
}

/* compete */
.compete{}
.compete > .inner{padding:180px 30px 200px;}
.compete > .inner > .list{display:flex;align-items: flex-start;justify-content: space-between;margin-top:80px;}
.compete > .inner > .list > li{width: 32%;}
.compete > .inner > .list > li > .img_box{border-radius:40px;overflow: hidden;}
.compete > .inner > .list > li > .txt_box {margin-top:30px;}
.compete > .inner > .list > li > .txt_box > p{font-weight: 400;font-size:18px;color:#000;line-height: 1.5;width:96%;}
.compete > .inner > .list > li > .txt_box > p.tit{font-weight:600;font-size:30px;margin-bottom:10px;line-height: 1.3;width:100%;}
.compete > .inner > .list > li > .txt_box > p.tit > .eng{font-size: 30px;font-weight: 600;}
.compete > .inner > .list > li:nth-child(2) > .txt_box > p.tit {margin-bottom:49px;}
.compete > .inner > .list > li:nth-child(3) > .txt_box > p.tit {margin-bottom:49px;}
.compete > .inner > .list > li > .txt_box > p.ex{min-height: 110px;}
.compete > .inner > .list > li > .txt_box .btn_more{float:initial;margin-top:25px;}
@media screen and (max-width:1024px){
	.compete > .inner > .list{align-items: flex-start;}
	.compete > .inner > .list > li > .img_box{border-radius:25px;}
	.compete > .inner > .list > li > .txt_box > p{word-break:keep-all;}
	.compete > .inner > .list > li > .txt_box > p > br{display:none;}
	.compete > .inner > .list > li > .txt_box > p.tit,
	.compete > .inner > .list > li > .txt_box > p.tit > .eng{font-size:25px;}
}
@media screen and (max-width:768px){
	.compete > .inner > .list > li > .txt_box > p{font-size: 16px;}
	.compete > .inner > .list > li > .txt_box > p.ex{min-height:auto;}
	.compete > .inner > .list > li > .txt_box > p.tit{margin-bottom:15px !important;}
}
@media screen and (max-width:640px){
	.compete > .inner{padding:60px 16px 120px;}
	.compete > .inner > .list{margin-top:50px;flex-direction: column;}
	.compete > .inner > .list > li{width:100%;margin-bottom:30px;}
	.compete > .inner > .list > li:last-child{margin-bottom:0;}
	.compete > .inner > .list > li > .txt_box{margin-top:15px;text-align: center;}
	.compete > .inner > .list > li > .txt_box > p{font-size: 14px;text-align:left;font-weight:400;}
	.compete > .inner > .list > li > .txt_box > p.tit,
	.compete > .inner > .list > li > .txt_box > p.tit > .eng{font-size:20px;}
	.compete > .inner > .list > li > .txt_box .btn_more{margin-top:15px;}
}