.main_titleArea{text-align: center;}
.main_titleArea .title1{font-size: 20px; line-height: 1; color: var(--point); font-weight: bold; font-family: var(--exo);}
.main_titleArea .title2{font-size: 50px; line-height: 1.2; color: #111; font-weight: bold; margin: 30px 0 0;}
.main_titleArea .sub{font-size: 18px; line-height: 25px; color: #646773; font-weight: 500; margin: 10px 0 0;}

.mText1{font-size: 22px; line-height: 30px; color: #111; font-weight: bold;}
.mText2{font-size: 18px; line-height: 26px; color: #646773;}

/* 공통 */

#mVisual{position: relative; width:100%; font-size:0; line-height:0; padding: 0; margin: 0; position: relative; overflow:hidden;}
#mVisual .swiper-slide{position: relative; width: 100%;}

#mVisual .swiper-slide img{width:100%; max-width:none; height: 800px; object-fit: cover;}
.mVisual_textArea{position: absolute; left:50%; top: 0; max-width: 1240px; width:100%; height: calc(100% - 210px); display: flex; align-items: center; justify-content: center; transform: translateX(-50%); z-index:6;}  
.mVisual_textArea_inner{position: relative; width: 100%;}

.mVisual_text_eq{width:100%; position: absolute; left:0; top:0; text-align: center; opacity: 0;}
.mVisual_text_eq.active{position: static; top: 0; opacity: 1;}

.mVisual_text_eq .text{position: relative; width:100%; left:0; top:0; color: #fff; text-align: center; opacity: 0;} 
.mVisual_text_eq.active .text{animation-name: textUp; animation-fill-mode: forwards;} 

.mVisual_text_eq .text01{font-size: 20px; line-height: 1.25; font-weight: bold; font-family: var(--exo);} 
.mVisual_text_eq .text02{font-size: 60px; line-height: 1.25; margin-top: 20px;} 
.mVisual_text_eq .text03{font-size: 25px; line-height: 1.5; font-weight: 500; margin-top: 10px;} 
.mVisual_text_eq .text04{display: inline-block; width: 180px; height: 60px; font-size: 18px; line-height: 60px; font-weight: 550; border: 1px solid #fff; border-radius: 1000px; margin-top: 40px;} 

.mVisual_text_eq .i01{animation-delay: 0.5s; animation-duration: 1s;}
.mVisual_text_eq .i02{animation-delay: 0.75s; animation-duration: 1s;}
.mVisual_text_eq .i03{animation-delay: 1s; animation-duration: 1s;}
.mVisual_text_eq .i04{animation-delay: 1.25s; animation-duration: 1s;}
.mVisual_text_eq .i05{animation-delay: 1.5s; animation-duration: 1s;}
.mVisual_text_eq .i06{animation-delay: 1.75s; animation-duration: 1s;}
.mVisual_text_eq .i07{animation-delay: 2s; animation-duration: 1s;}
.mVisual_text_eq .i08{animation-delay: 2.25s; animation-duration: 1s;}
.mVisual_text_eq .i09{animation-delay: 2.5s; animation-duration: 1s;}

@keyframes textUp {
    from {
        top: 50px; opacity: 0;
    }
  
    to {
        top: 0; opacity: 1;
    }
}

.mVisual_desc{position: absolute; width: 1200px; top: 50%; left: 50%; font-size: 18px; line-height: 20px; color: #fff; font-weight: bold; font-family: var(--exo); transform: translate(-50%, -50%); z-index: 7; margin: 0 auto;}
.mVisual_desc .mVisual_control .pagination{display: flex; gap: 10px; align-items: center; justify-content: flex-end;}
.mVisual_desc .mVisual_control .pagination #stopButton{width: 16px; aspect-ratio: 1/1; text-align: center; background-image: url('../img/main/pause.png'); background-size: cover; cursor: pointer;}
.mVisual_desc .mVisual_control .pagination #stopButton.pause{background-image: url('../img/main/play.png');}

/* mVisual Done */

#mInput{position: relative; margin-top: -210px; z-index: 7;  }
#mInput .inner{}
#mInput .logis{display: flex; border-radius: 30px; box-shadow: 10px 10px 50px rgba(0,0,0,0.2);}
#mInput .logis .writeArea{width: 760px; background-color: #fff; border-radius: 30px 0 0 30px; padding: 40px 60px;}
#mInput .logis .writeArea .title{font-size: 22px; line-height: 1; color: #111111; font-weight: bold; margin-bottom: 30px;}
#mInput .logis .writeArea .jusoArea{display: flex; gap: 10px; }
#mInput .logis .writeArea .jusoArea input{
    width: 100%; height: 52px; 
    font-size: 16px; line-height: 20px; color: #111; background-position: center left 15px; background-repeat: no-repeat;
    border: 1px solid #aaa; border-radius: 5px; box-sizing: border-box; padding: 15px 15px 15px 50px;
    filter: grayscale(100%); opacity: 0.6; transition: all ease 0.3s;}

#mInput .logis .writeArea .jusoArea input::placeholder{color: var(--point2);}
#mInput .logis .writeArea .jusoArea input:focus,
#mInput .logis .writeArea .jusoArea input:not(:placeholder-shown){filter: initial; opacity: 1;}
#mInput .logis .writeArea .jusoArea input.departures{background-image: url('../img/main/icon_departures.png');}
#mInput .logis .writeArea .jusoArea input.arrivals{background-image: url('../img/main/icon_arrivals.png');}
#mInput .logis .viewArea{width: calc(100% - 760px);}

.selectArea{display: flex; gap: 10px; margin-top: 20px;}
.selectArea .head{width: 80px; display: flex; align-items: center; font-size: 18px; line-height: 20px; color: #071437; font-weight: bold;}
.selectArea .body{width: calc(100% - 80px - 10px);}

.selectArea .inputCheckList{display: flex; gap: 10px; }
.selectArea .inputCheckList .checkBox{position: relative; width: calc((100% - 30px)/4);}
.selectArea .inputCheckList .checkBox input{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.selectArea .inputCheckList .checkBox label{
    position: relative; width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; 
    flex-direction: column; gap: 10px; font-size: 14px; line-height: 1; color: var(--point2); font-weight: 500; text-align: center; 
    background-color: #f6f9fc; border: 1px solid #d4dfe9; border-radius: 5px; transition: all ease 0.5s; cursor: pointer;}
.selectArea .inputCheckList .checkBox label .iconArea{width: 100%; height: 35px; display: flex; align-items: center; justify-content: center; opacity: 0.5; transition: all ease 0.3s;}
.selectArea .inputCheckList .checkBox input:checked + label{color: #3e97ff; font-weight: bold; border-color: #3e97ff;}
.selectArea .inputCheckList .checkBox input:checked + label .iconArea{opacity: 1;}

.selectArea .optionList{display: flex; gap: 10px;}
.selectArea .optionList select{
    width: calc((100% - 20px - 150px)/2); height: 52px; 
    font-size: 16px; line-height: 20px; color: var(--point2); font-weight: 500;
    border: 1px solid var(--point2); border-radius: 5px; padding: 15px 20px;
}
.selectArea .optionList .writeAreaDone{position: relative; width: 250px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 20px; color: #fff; font-weight: 550; background-color: #071437; border-radius: 1000px; overflow: hidden;}
.selectArea .optionList .writeAreaDone span{position: relative; z-index: 2;}
.selectArea .optionList .writeAreaDone::before{position: absolute; content: ''; bottom: 25.5px; left: 0; width: 100%; height: 100%; background-color: #1a2647; border-radius: 1000px;}

#mInput .logis .viewArea{width: calc(100% - 760px); background-color: var(--point); border-radius: 0 30px 30px 0; padding: 40px 60px;}
#mInput .logis .viewArea .box{}
#mInput .logis .viewArea .box + .box{border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0 0; margin: 20px 0 0;}
#mInput .logis .viewArea .box .desc{display: flex; justify-content: space-between; }
#mInput .logis .viewArea .box .desc + .desc{margin-top: 10px;}
#mInput .logis .viewArea .box .desc .head{font-size: 16px; line-height: 20px; color: #a1ccff; font-weight: bold;}
#mInput .logis .viewArea .box .desc .head span{display: inline-block; font-size: 14px; line-height: 16px; color: var(--point); background-color: #fff; border-radius: 50px;  padding: 0 5px;  vertical-align: middle;}
#mInput .logis .viewArea .box .desc .body{position: relative; font-size: 18px; line-height: 20px; color: #fff; font-weight: bold;}
#mInput .logis .viewArea .box .desc.km .body::after{position: relative; content: 'km'; padding: 0 0 0 2px;}
#mInput .logis .viewArea .box .desc.won .body::after{position: relative; content: '원'; padding: 0 0 0 2px;}

#mInput .logis .viewArea .viewAreaDone{width: 100%; height: 52px; border: 1px solid #fff; border-radius: 1000px; margin: 35px auto 0;}
#mInput .logis .viewArea .viewAreaDone:disabled{opacity: 0.5;}
#mInput .logis .viewArea .viewAreaDone span{position: relative; font-size: 18px; line-height: 20px; color: #fff; font-weight: 550; padding: 0 35px 0 0;}
#mInput .logis .viewArea .viewAreaDone span::after{position: absolute; content: ''; top: calc(50% - 3px); right: 0; width: 25px; height: 6px; background-image: url('../img/main/icon_arr.png'); background-size: contain;}

/* mInput Done */

#mService{background-image: url('../img/main/main_service_bg.jpg'); background-size: cover; background-position: top center; padding: 320px 0 160px; margin: -160px auto 0;}

.mService_list{display: flex; gap: 60px; margin: 50px auto 0;}
.mService_list li{width: calc((100% - 120px)/3); background-color: #fff; border-radius: 30px; box-shadow: 10px 10px 50px rgba(0,0,0,0.2);}
.mService_list li .thumbArea{position: relative;  border-radius: 30px 30px 0 0; overflow: hidden;}
.mService_list li .thumbArea .ab_en{position: absolute; bottom: 30px; left: 30px; font-size: 20px; line-height: 1; color: #fff; font-weight: bold; }

.mService_list li .textArea{border-radius: 0 0 30px 30px; padding: 30px 30px 60px;}

/* mService Done */

#mBanner{width: 100%; height: 360px; display: flex; align-items: center; justify-content: center; background-color: #796df6; }
#mBanner .inner{display: flex;}
#mBanner .inner .textArea{width: 50%; }
#mBanner .inner .textArea .main_titleArea{text-align: left;}
#mBanner .inner .textArea .main_titleArea .title1{line-height: 1.5; font-weight: 500; font-family: var(--pre);}

#mBanner .inner .thumbArea{width: 50%; display: flex; align-items: center; justify-content: center;}

/* #mBanner Done */

#mTrust{padding: 150px 0;}
#mTrust .inner{background-image: url('../img/main/main_trust_bg.png'); background-size: contain; background-repeat: no-repeat; background-position: top center; padding: 120px 0 50px;}

.mTrust_list{display: flex; gap: 20px; margin: 100px auto 0;}
.mTrust_list li{width: calc((100% - 60px)/4);}
.mTrust_list li .iconArea{height: 101px; display: flex; align-items: center; justify-content: center;}
.mTrust_list li .textArea{text-align: center; margin: 35px 0 0;}
.mTrust_list li .textArea h4{font-size: 22px; line-height: 30px; color: #111111; font-weight: bold; margin-bottom: 10px;}
.mTrust_list li .textArea p{font-size: 18px; line-height: 1.5; color: #646773; }

#mBenefit{background-color: #f6f9fc; padding: 150px 0;}
#mBenefit .inner{display: flex; gap: 20px;}

.mBenefit_title{font-size: 25px; line-height: 30px; color: #111111; font-weight: bold; margin-bottom: 20px;}
.mBenefit_title.ver2{color: #646773;}

#mBenefit .inner .mBenefit_benefit{width: calc(100% - 400px - 20px);}
#mBenefit .inner .mBenefit_benefit .box{height: calc(100% - 50px); display: flex; align-items: center; background-color: #fff; border-radius: 30px; box-shadow: 10px 10px 50px rgba(0,0,0,0.2); padding: 60px;}
#mBenefit .inner .mBenefit_benefit .box .inTheBox{width: 100%; background-image: url('../img/main/main_benefit_icon_01.png'); background-position: right top; background-repeat: no-repeat;}
#mBenefit .inner .mBenefit_benefit .box .inTheBox h4{font-size: 40px; line-height: 1.25; color: #111; font-weight: 300; margin-bottom: 20px;}
#mBenefit .inner .mBenefit_benefit .box .inTheBox p{font-size: 18px; line-height: 1.5; color: #646773; font-weight: 500;}

#mBenefit .inner .mBenefit_support{width: 400px;}
#mBenefit .inner .mBenefit_support .box{display: block; background-color: #3e97ff; border-radius: 30px; box-shadow: 10px 10px 50px rgba(0,0,0,0.2); padding: 45px 60px;}
#mBenefit .inner .mBenefit_support .box:nth-of-type(2){background-color: var(--point);}
#mBenefit .inner .mBenefit_support .box + .box{margin-top: 20px;}
#mBenefit .inner .mBenefit_support .box .inTheBox{min-height: 91px; background-repeat: no-repeat; background-position: top right;}
#mBenefit .inner .mBenefit_support .box:nth-of-type(1) .inTheBox{background-image: url('../img/main/main_support_icon_01.png');}
#mBenefit .inner .mBenefit_support .box:nth-of-type(2) .inTheBox{background-image: url('../img/main/main_support_icon_02.png');}
#mBenefit .inner .mBenefit_support .box .inTheBox h4{font-size: 20px; line-height: 1; color: rgba(255,255,255,0.3); font-weight: bold; font-family: var(--exo); margin-bottom: 15px; transition: all ease 0.3s;}
#mBenefit .inner .mBenefit_support .box .inTheBox p{font-size: 25px; line-height: 1; color: #fff; font-weight: 550;}

#mBenefit .inner .mBenefit_support .box:hover .inTheBox h4{color: #fff;}

/* mBenefit Done */

#mPartners{position: relative; padding: 150px 0;}
#mPartners::before{position: absolute; content: 'DNL LOGIS'; max-width: 1720px; min-width: 1240px; width: 100%; top: 50%; left: 50%; font-size: 300px; line-height: 1; color: #646773; font-weight: 100; font-family: var(--exo); text-align: center; white-space: nowrap; /* letter-spacing: 35px; */  opacity: 0.15; transform: translate(-50%, -50%);}

#mPartners .swiper{padding: 80px 0; overflow: initial;}
#mPartners .swiper-slide{width: calc((100% - 80px)/5); height: 120px; display: flex; align-items: center; justify-content: center; background-color: #fff; padding: 10px; border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);}

.mPartners_point{width: max-content; margin: 0 auto;}
.mPartners_point > h4{font-size: 30px; line-height: 40px; color: #111111; font-weight: 300; text-align: center; white-space: nowrap;}
.mPartners_point .textArea{display: flex; justify-content: space-between; margin: 25px auto 0;}
.mPartners_point .textArea p{font-size: 25px; line-height: 30px; color: #111; font-weight: 550;}
.mPartners_point .textArea p span{display: inline-block; color: var(--point); font-weight: bold; font-family: var(--exo); padding-left: 10px;}

/* mPartners Done */

#mApp{background-color: #f4f6f8; padding: 150px 0;}
#mApp .inner{display: flex;}
#mApp .inner .textArea{width: calc(100% - 740px);}
#mApp .inner .textArea .main_titleArea{text-align: left;}
#mApp .inner .textArea .main_titleArea .sub{margin-top: 20px;}

#mApp .inner .appArea{width: calc(360px + 360px + 20px); display: flex; gap: 20px;}
#mApp .inner .appArea .appBox{width: calc((100% - 20px)/2); border-radius: 30px; background-color: #fff; box-shadow: 20px 20px 50px rgba(0,0,0,0.2); padding: 70px 50px 60px; transition: all ease 0.3s;}
#mApp .inner .appArea .appBox .titleBox{}
#mApp .inner .appArea .appBox .titleBox .en{font-size: 18px; line-height: 20px; color: #9699a7; font-weight: bold; font-family: var(--exo); margin-bottom: 40px;}
#mApp .inner .appArea .appBox .titleBox .kr{font-size: 30px; line-height: 1; color: #111111; font-weight: bold; }
#mApp .inner .appArea .appBox .linkBox{margin: 40px 0 0;}
#mApp .inner .appArea .appBox .linkBox li a{position: relative; display: flex; gap: 10px; align-items: center; padding: 20px 0;}
#mApp .inner .appArea .appBox .linkBox li a::after{position: absolute; content: ''; width: 8px; aspect-ratio: 43/75; top: 50%; right: 0; background-image: url('../img/main/mApp_arr.svg'); background-size: contain; background-repeat: no-repeat; transform: translateY(-50%);}
#mApp .inner .appArea .appBox .linkBox li + li a{border-top: 1px solid #dbdfe9;}

#mApp .inner .appArea .appBox .linkBox li a .iconArea{width: 30px; height: 30px;}
#mApp .inner .appArea .appBox .linkBox li.android a .iconArea img{content: url('../img/main/android.svg');}
#mApp .inner .appArea .appBox .linkBox li.ios a .iconArea img{content: url('../img/main/ios.svg');}

#mApp .inner .appArea .appBox .linkBox li a .text{font-size: 18px; line-height: 20px; color: #646773; font-weight: bold; font-family: var(--exo);}

#mApp .inner .appArea .appBox *{transition: all ease 0.3s;}
#mApp .inner .appArea .appBox:hover .linkBox li a::after{background-image: url('../img/main/mApp_arr_active.svg');}
#mApp .inner .appArea .appBox:hover{background-color: var(--point);}
#mApp .inner .appArea .appBox:hover .point{color: #fff !important;}
#mApp .inner .appArea .appBox:hover .titleBox .en{color: #fff;}
#mApp .inner .appArea .appBox:hover .titleBox .kr{color: #fff;}

#mApp .inner .appArea .appBox:hover .linkBox li{opacity: 0.5;}
#mApp .inner .appArea .appBox:hover .linkBox li:hover{opacity: 1;}
#mApp .inner .appArea .appBox:hover .linkBox li.android a .iconArea img{content: url('../img/main/android_active.svg');}
#mApp .inner .appArea .appBox:hover .linkBox li.ios a .iconArea img{content: url('../img/main/ios_active.svg');}

#mApp .inner .appArea .appBox:hover .linkBox li a .text{color: #fff;}