@import "global.css";
@font-face {
    font-family: 'Cafe24Ssurround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.main {padding-top: 66px; position: relative;}
.main .inner_box {width: 1080px; margin: 0 auto; position: relative; box-sizing: border-box;}

/* header */
.header {width: 100%; position: fixed; top: 0; left: 0; background-color: #fff; z-index: 10;}
.header .app_bar {width: 1080px; height: 66px; margin: 0 auto; padding: 0 40px;  position: relative; box-sizing: border-box;}
.header .app_bar .logo {display: block; width: 96px; height: 40px; position: relative; top: 14px; background: url(../../images/baza_logo.png) center center no-repeat;}
.header .app_bar .search_box {width: 260px; height: 38px; border-radius: 38px; background-color: #f4f7f8; position: absolute; left: 144px; top: 14px;}
.header .app_bar .search_box .it {height: 38px; padding:0 62px 0 20px; line-height: 38px; border: 0; font-size: 16px; color: #000; background-color: transparent;}
.header .app_bar .search_box .btn_search {display: block; width: 62px; height: 38px; background: url(../../images/ic_search.svg) center center no-repeat; border: 0; background-size: 22px auto; position: absolute; right: 0; top: 0;}
.header .app_bar .app_box {position: absolute; right: 40px; top: 14px; overflow: hidden;}
.header .app_bar .app_box a {display: inline-block; padding: 10px 14px; font-size: 15px; color: #fff; float: left; margin-left: 6px; background-color: #000000; border-radius: 10px;}
.header .app_bar .app_box a:first-child {margin-left: 0;}
.header .app_bar .app_box a span {display: inline-block;}
.header .app_bar .app_box a.btn_google span {padding-left: 23px; background: url(../../images/playstore@2x.png) 0 center no-repeat; background-size: 18px auto;}
.header .app_bar .app_box a.btn_app span {padding-left: 20px; background: url(../../images/appstore@2x.png) 0 center no-repeat; background-size: 18px auto;}

/* body */
.flex{display:flex;justify-content: flex-start;align-items: flex-end;flex-wrap: wrap;}
.title_flex2{display: flex;flex: auto;flex-direction: row;align-items: center;align-content: stretch;}
.title_mo{display: none}

.main .title_section {background-color: #0eb4f3; height: 760px;padding: 0 40px;}
.main .title_section .text_area {padding-top: 120px}
.main .title_section .text_area .title_text {font-weight: 700; font-size:68px; line-height: 83px; letter-spacing: -0.03em; color:#fff; font-family: 'Cafe24Ssurround', sans-serif;margin:0 36px}

.main .title_section .text_area .bar_area{flex-grow: 1;}
.main .title_section .text_area span{height: 0px; border: 3px solid #69FF47; background: #69FF47;width: 100%;display: inline-block;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;}
.main .inner_box .video_area{position: absolute;top: 335px; left: 50%; transform:translateX(-50%);}
.main .inner_box .video_area .inner{background: #FFFFFF;box-shadow: 0px 34px 70px rgba(28, 90, 115, 0.36);padding: 8px;width: 976px;height: 549px; }

.main .inner_box, .contents_section {margin: 0 auto;}
.main .youtube_area{margin-top: 284px;}
.main .youtube_area img{width: 99%}
.main .youtube_area .title{font-size:68px; line-height:30px; color:#040F13;font-family: 'Cafe24Ssurround', sans-serif;text-align: center;padding-top: 120px;}
.main .youtube_area .title span{color: #0CBAFF;}
.main .youtube_area .circle{height:calc(100vw - 40px);width:calc(100vw - 40px); max-width: 947px; max-height: 947px; background:#F1F6F9;border-radius: 100%;-moz-border-radius: 100%;-webkit-border-radius: 100%;position: absolute;z-index: -1;left: 50%; transform:translateX(-50%);}
.main .youtube_area .inner .main_video{max-width: 620px;margin: 60px auto;}
.main .youtube_area .inner .main_video img{border: 8px solid #FFFFFF;}
.main .youtube_area .inner .sub_video{display:flex;justify-content: center;flex-wrap: wrap;align-items: center;align-content:center}
.main .youtube_area .inner .sub_video img{width: calc(972px / 3);}
.main .youtube_area .inner .sub_video a {margin:0 18px 36px;}

.main .app_download_area{padding: 202px 0 0}
.main .app_download_area .title_text {font-family: 'Cafe24Ssurround', sans-serif; font-size:54px; color:#000; margin-bottom: 29px;}
.main .app_download_area .sub_text {font-size:17px; line-height:30px; color:#565858;display: flex;justify-content: space-between; align-items: stretch;flex-wrap: wrap}
.main .app_download_area .sub_text p{flex-grow: 0}
.main .app_download_area .btn_area {flex-grow: 1;text-align: right}
.main .app_download_area .btn_area .btn_down {color:#fff;font-size:18px; font-weight:700; text-align: center; border-radius: 55px; box-shadow: 0 18px 36px 0 rgba(0, 84, 116, 0.28); background-color: #0db3f3; padding: 13px 23px;vertical-align: middle;display: inline-block}
.main .app_download_area .btn_area .btn_down img {margin-right: 5px; vertical-align: middle;}

/* footer */
footer{margin: 0;padding: 0; width: 100%}
.main .footer_section {background-color: #f4f7f8;margin-top: 134px;}
.main .footer_section .footer .menu {height:75px; border-bottom:solid 1px #d0d4d5;padding: 0 30px;}
.main .footer_section .footer .menu .btn_area {float:right;}
.main .footer_section .footer .menu .btn_area a {display:inline-block; color:#697274; font-size:16px; line-height:75px; font-weight:700; text-decoration:underline; margin-left:38px;}
.main .footer_section .footer .info {padding:54px 30px 57px;}
.main .footer_section .footer .info span {position: relative; display: inline-block;}
.main .footer_section .footer .info br {display:none;}
.main .footer_section .footer .info .item {width:150px;}
.main .footer_section .footer .info .item.long {width:200px;}
.main .footer_section .footer .info .bar {margin:0 10px 0 0; padding-right:10px; }
.main .footer_section .footer .info .bar:after {content:""; display:block; width:1px; height:10px; background-color:#929b9f; position:absolute; right:0; top:3px;}
.main .footer_section .footer .info .name {margin-bottom:24px; color:#697274; font-size:16px; line-height:19px; font-weight:700;}
.main .footer_section .footer .info .company {margin-bottom:12px; color:#929b9f; font-size:14px; line-height:17px;}
.main .footer_section .footer .info .contact {margin-bottom:12px; color:#929b9f; font-size:14px; line-height:17px;}
.main .footer_section .footer .info .address {margin-bottom:28px; color:#929b9f; font-size:14px; line-height:17px;}
.main .footer_section .footer .info .copyright {margin-bottom: 0; color:#929b9f; font-size:14px; line-height:17px;}
.main .footer_section .footer .info .sns {position:absolute; right:40px; bottom: 53px;}
.main .footer_section .footer .info .sns .link {display: inline-block; margin-left: 15px;}
.main .footer_section .footer .info .sns img{width:48px; height:48px;}

.main .btn_appdown {display: none; width: 100%; height: 64px; line-height: 64px; color: #fff; text-align: center; font-size: 20px; font-weight: 700; background-color: #0EB4F3; position: fixed; bottom: 0; left: 0; z-index: 10; box-shadow:0px -5px 10px 0px rgba(0, 0, 0, 0.1);}
.main .btn_appdown span {color: #0eb4f3;}

/*common*/
.mr36{margin-right: 36px;}
.mt120{margin-top: 120px}
.pt120{padding-top: 120px}
.trans {color:#fff; -webkit-text-stroke: 1.5px black;}
.underline {font-family:inherit; display:inline-block; height:46px; border-bottom:13px solid #9BE5FF;}

@media screen and (max-width: 1079px) {
    .main .inner_box {width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;}

    /* header */
    .header .app_bar {width: 100%;}

    /* body */
    .main .title_section .text_area {padding-top: 121px;}
    .main .inner_box .video_area .inner{width: 604px;height: 339px;}

    .main .youtube_area .inner .sub_video img{width: calc(620px / 2);}

    .main .app_download_area{padding: 202px 40px 0}
    .main .contents_section .sub_text {margin-bottom: 38px;}
    .main .contents_section .btn_area {width:100%; position: relative; display:inline-block; right: unset; bottom: unset;}
}

@media screen and (max-width: 699px) {
    .trans {color:#fff; -webkit-text-stroke: 1px black;}
    .underline {font-family:inherit; display:inline-block; height:27px;}

    .main {padding: 66px 0 56px; position: relative;}
    .main .inner_box {width: 100%; margin: 0 auto; position: relative; box-sizing: border-box;}

    /* header */
    .header .app_bar {width: 100%; padding: 0 14px;}
    .header .app_bar .search_box {width: calc(100% - 130px); height: 38px; border-radius: 38px; background-color: #f4f7f8; position: absolute; left: 116px; top: 14px;}
    .header .app_bar .app_box {display:none;}

    /* body */
    .main .title_section {height: 346px;padding:0}
    .main .title_section .text_area {padding:60px 0 0; width: 360px;margin: 0 auto}
    .main .title_section .text_area .title_text {font-size:38px; line-height: 50px;margin-right: 0;}

    .flex{flex-direction:column;align-items: stretch}
    .title_mo{display: flex;align-content: center;align-items: center;padding-right: 30px;}
    .main .title_section .text_area span{margin-left: 16px;border: 1.5px solid #69FF47;}
    .title_flex2{display: none}

    .main .youtube_area{margin-top: 195px;}
    .main .youtube_area .title{font-size:32px;padding-top: 60px;}
    .main .inner_box .video_area{top:255px;width: 100%}
    .main .inner_box .video_area .inner{width: 344px;height: 198px;margin:0 auto; padding: 4px;}
    .main .youtube_area .circle{height: calc(100vw - 48px); width: calc(100vw - 48px);}
    .main .youtube_area .inner .main_video{max-width: 308px;margin: 30px auto 20px;}
    .main .youtube_area .inner .main_video img{border: 4px solid #FFFFFF;}
    .main .youtube_area .inner .sub_video{width: 336px;margin: 0 auto;}
    .main .youtube_area .inner .sub_video a{margin:0 5px 20px}
    .main .youtube_area .inner .sub_video img{width: calc(300px / 2);}

    .main .app_download_area{padding: 82px 0 0;width: 300px;margin: 0 auto}
    .main .app_download_area .title_text {font-size:30px;margin-bottom: 15px;}
    .main .app_download_area .btn_area .btn_down{font-size: 13px;padding: 11px 23px;width: 100px;margin-top: 24px;}

    /* footer */
    .main .footer_section .footer .menu {height:92px; border-bottom:solid 1px #d0d4d5;padding: 0 30px;}
    .main .footer_section .footer .menu .btn_area {float:left;}
    .main .footer_section .footer .menu .btn_area a {display:inline-block; color:#697274; font-size:16px; line-height:75px; font-weight:700; text-decoration:underline; margin-left:0; margin-right:28px;}
    .main .footer_section .footer .info {padding:17px 30px 54px;}
    .main .footer_section .footer .info br {display:initial;}
    .main .footer_section .footer .info .item {width:100%}
    .main .footer_section .footer .info .item.long {width:100%;margin-top:12px;}
    .main .footer_section .footer .info .company {margin-bottom:12px; color:#929b9f; font-size:14px; line-height:17px;}
    .main .footer_section .footer .info .contact {margin-bottom:12px; color:#929b9f; font-size:14px; line-height:17px;}
    .main .footer_section .footer .info .address {margin-bottom:20px; color:#929b9f; font-size:14px; line-height:17px;}
    .main .footer_section .footer .info .copyright {margin-bottom:26px; color:#929b9f; font-size:14px; line-height:17px;}
    .main .footer_section .footer .info .sns {position:relative; display:inline-block; right:unset; bottom: unset;}
    .main .footer_section .footer .info .sns .link {display: inline-block; margin-left: 0; margin-right:13px;}
    .main .footer_section .footer .info .sns img{width:42px; height:42px;}

    .main .btn_appdown {display: initial;}
}