@charset "utf-8";

@keyframes mail{
    0% {transform: translateY(0);} /* 처음 위치 */
    100% {transform: translateY(10px);} /* 마지막 위치 */
}

.alliance_title{position: relative; top: 100px; opacity: 0;}
.alliance_title span{font-weight: 700; font-size: 1em; color: #FFAA45;}

/* result */
.result{position: relative; margin: 200px auto;}
.result .result_inner{overflow: hidden;}
.result .content{position: relative; width: 90%; max-width: 1440px; margin: 0 auto;height: 100%; padding-top: 10%; box-sizing: border-box;}
.result .main_title2::after{content: ''; width: 25%; height: 2px; background-color: #FFAA45; position: absolute; left: 0;bottom: 0;}

.result .main_title2{left: -100px; opacity: 0;}

.result .content .result_wrap{margin-top: 5%; display: flex; justify-content: space-between;}

.img_box img{width: 100%;}

.result .content .result_wrap>div:first-child{position: relative; top: 100px; opacity: 0;}
.result .content .result_wrap>div:last-child{position: relative; right: -100px; opacity: 0;}
.result .content .result_wrap>div{width: 49%;}

.result .content .result1-1{display: flex; flex-direction: column; justify-content: center; align-items: center;}

.result .content .result1-1 .result1_graph{position: relative; width: 80%; margin: 0 auto; margin-top: 10%;}
.result .content .result1-1 .graph_line{height: 50px; width: 100%; border-bottom: 1px solid #000;}
.result .content .result1-1 .graph_box{position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: flex-end;}

.result .content .result1-1 .graph_box>div p:last-child{margin: 0 30px; text-align: center; position: absolute; left: -40%; bottom: -30px; color: #333; font-size: 1.2em; width: 100%;}

.result .content .result1-1 .graph_box>div{width: 70px; background-color: #fff; margin:0 30px; position: relative;}
.result .content .result1-1 .graph_box .graph1{height: 90%; background-color: #FFAA45;}
.result .content .result1-1 .graph_box .graph2{height: 70%; background-color: #305AC1;}
.result .content .result1-1 .graph_box .graph3{height: 60%;background-color: #61553F;}
.result .content .result1-1 .graph_box>div p{display: flex; justify-content: center; margin-top: 20px; font-size: 1.6em; color: #fff;}
.result .content .result1-1 .graph_box>div p:nth-child(2){margin-top: 10px; font-size: 1.2em;}

.result .content .text_box .main_title{margin: 30px 0 50px 0; color: #305AC1;}
.result .content .text_box p{font-size: 1.6em;}
.result .content .text_box p:nth-of-type(2){margin-bottom: 30px;}
.result .content .text_box p:nth-of-type(3){margin-bottom: 10px;}

.result .result2 .result2-1{display: flex; flex-direction: column; justify-content: center; padding:0 10%; box-sizing: border-box;}
.result .result2 .result2-1 .img_box{margin-top: 50px; display: flex; justify-content: center; width: 70%;}
.result .result2 .result2-1 p:nth-of-type(2){margin-bottom: 10px;}
.result .result2 .text_box p:nth-of-type(3){font-size: 1.1em; color: #777;}

.result .result2 .result2-2{display: flex; margin-top: 5%;}
.result .result2 .result2-2 ul{padding:0 1%; text-align: center; }
.result .result2 .result2-2 ul:nth-child(1){text-align: left;}

.result .result2 .result2-2 ul li{line-height: 50px; font-size: 1.4em; position: relative;}
.result .result2 .result2-2 ul li::after{content: ''; height: 1px; width: 170%; background-color: #333; position: absolute; left: -50%; top: 0;}
.result .result2 .result2-2 ul li:last-child::before{content: ''; height: 1px; width: 170%; background-color: #333; position: absolute; left: -50%; bottom: 0;}


.result  .result3 .result_wrap{align-items: center;}
.result  .result3 .result3-1{display: flex; justify-content: center; margin-top: -2%;}
.result  .result3-1 .img_box{position: relative;}
.result  .result3-1 .img_box .over_box{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-60%); text-align: center; width: 100%;}

.result  .result3-1 .img_box .over_box p:nth-child(1){font-size: 1.6em; font-weight: 700;}
.result  .result3-1 .img_box .over_box p:nth-child(2){font-size: 1.2em; margin: 20px 0;}
.result  .result3-1 .img_box .over_box p:nth-child(3){font-size: 1.8em; font-weight: 700; color: #305AC1;}

.result  .result3-2{display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.result  .result3-2 .img_box{margin-left: 20%; }
.result  .result3-2 .img_box img{width: 100%;}

.result .result3 .text_box p:nth-of-type(2){margin-bottom: 10px;}
.result .result3 .text_box p:nth-of-type(3){font-size: 1.1em; color: #777; margin-bottom: 50px;}

/* controls */
.controls{position: fixed; top: 50%; right: 0; transform: translate(-50%,-50%); text-align: right; z-index: 99;}
.controls li{position: relative;}
.controls li a{font-size: 1.2em; line-height: 30px; font-weight: 500; color: #777;}
.controls li.control_select a{color: #FFAA45; font-weight: 700;}
.controls li.control_select::after{content: ''; position: absolute; right: 0; top: 50%; transform: translate(120%,-120%); width: 20px; height: 2px; background-color: #FFAA45;}


/* service_3pl */
.service_3pl{background-color: #f8f8f8;}
.service_3pl_inner{text-align: center; padding: 5% 0; position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
.service_3pl .con_wrap .img_box img{width: 100%;}

.service_3pl_inner>.main_title{top: 100px; opacity: 0;}
.service_3pl_inner>.con_title{margin: 30px 0;font-weight: 500; position: relative; top: 100px; opacity: 0;}
.service_3pl_inner>p{font-size: 1vw; position: relative;top: 100px;opacity: 0;}

.service_3pl .con_wrap .text_box0{right: -100px;}
.service_3pl .con_wrap .text_box1{left: -100px;}
.service_3pl .con_wrap .img_box0{top: 100px;position: relative; opacity: 0;}
.service_3pl .con_wrap .img_box1{top: 100px; position: relative;  opacity: 0;}

.service_3pl .con_wrap{margin-top: 100px;}
.service_3pl .con_wrap>div{display: flex; margin-bottom: 30px; justify-content: center; align-items: center;}
.service_3pl .con_wrap>div>div{margin:0 5%;}
.service_3pl .con_wrap .text_box{padding: 2%;border-radius: 20px; position: relative; opacity: 0;}
.service_3pl .con_wrap .text_box h4{text-align: left; margin-bottom: 30px; color: #FFAA45;}
.service_3pl .con_wrap .text_box p{font-size: 1.2em; text-align-last: left;}




/* store */
.store{position: relative; width: 100%; background-image: url(../img/alliance/store_bg.png); background-size: cover; background-position: center; margin: 200px auto;}
.store .con_title{font-weight: 500;}
.store_inner{position: relative; width: 90%; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-evenly; align-items: center; padding: 3% 0;}
.store_inner .text_box .main_title{color: #FFAA45;}
.store_inner .text_box>*{color: #fff;}
.store_inner .text_box p:nth-of-type(1){font-size: 1.1vw; margin-top: 30px;}
.store_inner .text_box p:nth-of-type(2){font-size: 1.1vw; margin:30px 0 20px 0;}
.store_inner .text_box .more_btn{margin: 0; margin-top: 10px;}
.store_inner .text_box .more_btn:hover{background-color: #fff; color: #333;}


/* manager */
.manager .con_title{text-align: center;}
.manager .manager_table{margin: 0 auto; margin-top: 30px; border-top: 1px solid #333;  border-bottom: 1px solid #333; border-collapse: collapse; width: 80%; text-align: center;}
.manager .manager_table th{background-color: #eee; font-size: 1.2vw; font-weight: 500;}
.manager .manager_table td{font-size: 1vw;}
.manager .manager_table tr{font-size: 1.2vw; margin-right: 20px; line-height: 50px; border-bottom: 1px solid #000;}



/* mail */
.mail{position: relative; width: 100%; overflow: hidden;}
.mail_inner{display: flex; justify-content: space-between; position: relative; width: 90%; max-width: 1440px; margin: 0 auto;}
.mail_inner>div{width: 45%;}
.mail0{display: flex; flex-direction: column; align-items: center;}
.mail0 .main_title{top: 100px; opacity: 0;}
.mail0 p{font-size: 1.2vw; margin:30px 0 100px 0; position: relative; top: 100px; opacity: 0;}
.mail0 .img_box{position: relative; top: 100px; opacity: 0;}
.mail0 .img_box img{animation: mail 1s linear infinite alternate; width: 100%;}

.mail1{position: relative; right: -100px; opacity: 0;}
.mail1_wrap {width: 66%;}
.mail1_wrap label{display: block; margin: 10px 0 5px 0;font-size: 1.2em;}
.mail1_wrap input{margin-bottom: 10px; box-sizing: border-box; padding: 2px;}
.mail1_wrap input[type=text]{display: block; height: 30px; width: 100%;}
.mail1_wrap select{display: block; height: 30px; width: 100%;}
.mail1_wrap textarea{width: 100%; height: 200px; padding: 2px;}

.mail1_wrap>div{display: flex;}
.mail1_wrap>div.address_wrap input{width: 280px; height: 30px;}
.mail1_wrap>div button{margin-left: 10px; width: 70px; height: 30px; background-color: #fff; border: 1px solid #333; cursor: pointer;}

.mail1_wrap>div.tel_wrap input{width: 125px; box-sizing: border-box; height: 30px; margin-right: 10px;}
.mail1_wrap>div.tel_wrap>p{line-height: 30px;margin-right: 10px;}

.mail1_wrap>div.email_wrap input{width: 150px; box-sizing: border-box; height: 30px; margin-right: 10px;}
.mail1_wrap>div.email_wrap select{height: 30px;}
.mail1_wrap>div.email_wrap>p{line-height: 30px;margin-right: 10px;}


/* agree */
.agree{position: relative; width: 90%; max-width: 1440px; margin: 30px auto 200px auto;}
.agree h2{font-size: 1.2vw; font-weight: 500; position: relative; margin-bottom: 10px;}
/* .agree h2::after{content: ''; position: absolute; left: 24%; top: -20%; width: 10px; height: 10px; border-radius: 50%; background-color: #FFAA45;} */
.agree .agree_con{border: 1px solid #333; padding: 1%;}
.agree .agree_con ul{margin-bottom: 30px;}
.agree .agree_con ul li{line-height: 1.6; margin-left: 10px;}
.agree .agree_con ul li:first-of-type{line-height: 2; font-size: 1.2em; margin: 0;}
.agree .agree_con ul:last-child{margin-bottom: 0px;}

.agree .agree_check{display: flex; justify-content: space-between; margin-top: 10px;}
.agree .agree_check>div>div{margin-bottom: 5px;}
.agree .agree_check input{margin-right: 5px;}
.agree .agree_check label{margin-right: 20px;}
.agree .agree_check label:last-child{margin-right: 0px;}

.agree .btn_wrap{width: 100%; display: flex; justify-content: center; margin-top: 50px;}
.agree .btn_wrap input{background-color: #fff; border: 1px solid #333; width: 200px; border-radius: 25px; height: 50px; margin:0 2%; font-size: 1.4em; cursor: pointer; font-weight: 500;}
.agree .btn_wrap input[type=submit]{background-color: #FFAA45; border: 1px solid #FFAA45; width: 200px; border-radius: 25px; height: 50px; margin:0 2%;}