@charset "utf-8";


body {overflow-y:inherit}

.wrap {overflow: hidden;}
.header {background: #FFFFFF; padding:14px 0; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04); border-bottom:solid 1px #E0E0E0;}
.header .inner { margin:0 auto; display: flex; align-items: center; justify-content: space-between;}

.logo {height:30px; font-weight: 700; font-size: 14px; color:#222; line-height: 30px;}
.logo a { display: block; font-size: 14px; color:#222; background: url(../img/index/logo.png) left center no-repeat; padding-left:43px; }

.header .utilMenu {display: flex; gap: 10px;}
.header .btnGray {background: #EFEFEF; color:#636363; }
.header .btnDarkGray {background: #5A5A5A; color:#fff;}  
.header .btn {border-radius: 4px; font-size:13px; font-weight:500; cursor: pointer; padding:5px 16px;}

.box {border: 4px solid #555555; border-radius: 40px; background: #fff; overflow: hidden; display: inline-block; position: relative;}
.box.mo {min-width: 375px; box-sizing: border-box;}

.section {text-align: center; padding:140px 0; position: relative;}
.section .text{font-weight: 700; font-size: 48px;line-height: 64px; text-align: center;color: #222222;}
.section .subText {font-weight: 700; font-size: 22px; line-height: 32px; color: #ABABAB; margin:20px 0 40px 0;}
.section .btn {background: #3D3D3D; border-radius: 8px; font-weight: 500; font-size: 16px;line-height: 23px;color: #FFFFFF; padding:15px 37px; margin-bottom:93px; cursor: pointer;}
.section01 {padding:140px 0 0 0; z-index: 10;}
.section01 .boxWrap {display: flex; gap:75px; justify-content: flex-end; margin-bottom:-130px;}
.section01 .box:last-child {border-right: none; border-radius: 40px 0 0 40px;}


.section.sectionDark{background: #494949;  display: flex;   justify-content: center; min-height: 1080px;  align-items: center; padding:0 0;}
.section.sectionDark .textWrap {text-align: right; width:50%;}
.section.sectionDark .text{color: #fff; text-align: right}
.section.sectionDark .boxWrap {position: absolute; right:-128px; top:0;}
.section.sectionDark .inner {position: relative; margin-top: 100px;}
.section.sectionDark .inner .box:first-child {z-index: 5;}
.section.sectionDark .inner .box:last-child { min-width: 312px; margin-left:-60px; margin-top:80px;}


.section03 {display: flex;   justify-content: center; min-height: 1080px;  align-items: center; padding:0 0;}
.section03 .inner {position: relative; margin-top: 50px;}    
.section03 .textWrap {text-align: left;   width: 50%; float: right;}
.section03 .boxWrap {position: absolute; top:0; left:-30px}
.section03 .box {border-radius: 10px;} 
.section03 .text {text-align: unset;}

.footer {background: #3E3E3E; text-align: center; }
.footer .download {padding:60px 0; }
.footer .download .text{font-weight: 700; font-size: 24px; line-height: 64px; color: #FFFFFF; margin-bottom:58px;}
.footer .download .btnWrap {display: flex; gap:46px; justify-content: center;}
.footer .download .btn {background: #373737;  width:86px;  height:86px; border-radius: 50%; display: block;}
.footer .download .apple {background:#373737 url(../img/index/appApple.png) center center no-repeat;}
.footer .download .goggle  {background:#373737 url(../img/index/appGoogle.png) center center no-repeat;}
.footer .copy {border-top:1px solid #373737; padding:40px; font-weight: 700; font-size: 12px;line-height: 17px; color: #ABABAB;}


@media only screen and (min-width: 1300px) {
    .wrap {min-width: 1300px; }
    .header .inner { min-width: 1300px; max-width: 1300px;}
    .section.sectionDark .inner {width: 1300px;}
    .section03 .inner {width: 1300px;}
}

@media only screen and (min-width: 960px) and (max-width: 1300px){

    .header {padding:14px 24px;}
    .section {padding:140px 24px;}
    .section.sectionDark{padding:0 24px; min-height: auto;}
    .section03 {padding:0 24px; min-height: auto;}

    
    .section01 {padding:120px 0 0 24px;}
    .section01 .boxWrap {gap:50px; zoom: .8;}
    .section.sectionDark .inner {width: 100%; margin: 0; padding-top: 240px;}
    .section.sectionDark .textWrap { width: 100%; text-align: center;}
    .section.sectionDark .text {text-align: center;}
    .section.sectionDark .boxWrap {zoom: .8; position: relative; right: 0; top: 0;   margin-bottom: -100px;}
    .section03 .inner {width:100%; margin: 0; padding-top: 240px; padding-bottom:120px;}
    .section03 .boxWrap {zoom: .8; position: relative;  top:unset;   left: unset;}
    .section03 .textWrap {width:100%; text-align: center;}
    
}

@media only screen and (min-width: 768px) and (max-width: 959px){

    .header {padding:14px 24px;}
    .section {padding:140px 24px;}
    .section.sectionDark{padding:0 24px;}

    .section {text-align: left;}
    .section .text {text-align: left; font-size: 40px; line-height: 48px;}
    .section .subText {font-size: 22px; line-height: 26px; margin: 20px 0 40px 0; font-weight: 400;}
    .section .btn {margin-bottom:60px; font-size: 16px; padding: 15px 20px;  font-weight: 400;}

    .box {zoom:.7; border: 6px solid #555555;}

    .section01 {padding:60px 0 0 24px;}
    .section01 .boxWrap {gap:25px; margin-bottom:-50px;}
    

    .section.sectionDark {justify-content: normal;flex-direction: row-reverse;  min-height: auto; padding:180px 32px 0 24px;}
    .section.sectionDark .inner {margin-top:0;}
    .section.sectionDark .inner .box:last-child {margin-left: -35px;}
    .section.sectionDark .boxWrap {position: relative; right: 0; top: unset; padding-top: 50px; margin-bottom:-100px;}
    .section.sectionDark .textWrap {width:100%;}

    .section03 {justify-content: unset; min-height: auto; padding:180px 32px 85px 24px}
    .section03 .inner {margin-top:0;}
    .section03 .textWrap {width:100%;}
    .section03 .boxWrap .boxWrap {position: relative; right: -10px; top: unset; }
    .section03 .boxWrap {position: relative;  top: 0; left: 0; }

    .footer  .copy {padding:30px 24px;}
    .footer .download {padding:25px 0 30px 0}
    .footer .download .text {font-size: 13px; line-height: 19px; margin-bottom:30px;}
    .footer .download .btnWrap {gap: 60px;}
    .footer .download .btn {width:50px; height:50px; background-size: 45%;}
}


@media only screen and (max-width: 767px) {
    .header {padding:14px 24px;}
    .section {padding:140px 24px;}
    .section.sectionDark{padding:0 24px;}
   


    .logo { overflow: hidden;}
    .logo a {display: block; width:40px; height: 30px; padding-left:0; }
    .logo span {display: none;}
    .section {text-align: left;}
    .section .text {text-align: left; font-size: 24px; line-height: 32px;}
    .section .subText {font-size: 14px; line-height: 20px; margin: 8px 0 40px 0;}
    .section .btn {margin-bottom:60px; font-size: 14px; padding: 15px 20px}
    .box {zoom:.5; border: 8px solid #555555;}

    .section01 {padding:60px 0 0 24px;}
    .section01 .boxWrap {gap:25px; margin-bottom:-35px;}
    .section01 .box:last-child {margin-bottom: -100px; margin-top: 100px;}

    .section.sectionDark {justify-content: normal;flex-direction: row-reverse;  min-height: auto; padding:220px 32px 110px 24px;}
    .section.sectionDark .inner {margin-top:0;}
    .section.sectionDark .inner .box:last-child {margin-left: -145px;}
    .section.sectionDark .boxWrap {position: relative; right: -10px; top: unset; }
    .section.sectionDark .textWrap {width:100%;}

    .section03 {justify-content: unset; min-height: auto; padding:75px 32px 85px 32px;}
    .section03 .inner {margin-top:0;}
    .section03 .textWrap {width:100%;}
    .section03 .boxWrap .boxWrap {position: relative; right: -10px; top: unset; }
    .section03 .boxWrap {position: relative;  top: 0; left: 0; }

    .footer  .copy {padding:30px 24px;}
    .footer .download {padding:25px 0 30px 0}
    .footer .download .text {font-size: 13px; line-height: 19px; margin-bottom:30px;}
    .footer .download .btnWrap {gap: 60px;}
    .footer .download .btn {width:50px; height:50px; background-size: 45%;}

}