@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
font-family: "Inter", sans-serif;
*/

body{ padding:0; margin:0; font-size:16px; color:#232426; font-family: "Inter", sans-serif; background: #f6f6f8; letter-spacing: -0.5px;}
a, button{outline:none !important; text-decoration:none; box-shadow:none; transition:all .4s ease-in-out;}
a:hover, a:focus, select:focus, button:focus,.btn:focus,btn.focus { outline:none; text-decoration:none; box-shadow:none;}
* { margin:0; padding:0;}
img { border:none; vertical-align:middle; max-width:100%; height:auto;}
li{ list-style:none;}
h1, h2, h3, h4, h5, h6{ outline:none !important;}
input, select, textarea, button{ outline:none !important; box-shadow:none;}
input, textarea, select{ /*-moz-appearance: none; -webkit-appearance: none;*/ box-shadow:none !important;}
h2{ letter-spacing: -0.04em;}

.container{ width:96%; max-width:1800px; margin:0 auto; padding:0;}

.btns{ margin: 0; padding: 8px 25px; min-width: 136px; background: #3b82f6; border-radius: 40px; font-size: 15px; color: #fff; font-weight: 700; text-align: center; border: 1px solid #3b82f6; display: inline-flex; justify-content: center;}
.btns.white{ background: #fff; color: #232426; border-color: #dadcf2;}
.btns:hover{ background: #232426; color: #fff; border-color: #232426;}

.global_title{ margin: 0 0 40px 0; padding: 0; font-size: 72px; color: #232426; font-weight: 700; line-height: 1em;}
.global_title span{ color: #3b82f6;}

/* Header */
.header_sec{ margin: 0; padding: 20px 0;}
.header_sec .container{ max-width: 1120px;}
.header_sec .inner{ display: flex; align-items: center; justify-content: space-between; gap: 20px;}
.header_sec .btn_info{ display: flex; align-items: center; gap: 10px;}

/* Hero */
.hero_sec{ margin: 0; padding: 80px 0 0 0;}
.hero_sec .container{ max-width: 1440px;}
.hero_sec .detail{ margin: 0 auto; padding: 0; max-width: 530px; text-align: center; position: relative; z-index: 1;}
.hero_sec .detail h1{ margin: 0 0 20px 0; padding: 0; font-size: 105px; color: #232426; font-weight: 700; line-height: 1em; letter-spacing: -0.04em;}
.hero_sec .detail p{ margin: 0 0 25px 0; padding: 0; font-size: 24px; font-weight: 600;}
.hero_sec .detail i{ box-shadow: 0 15px 30px rgba(0,0,0,0.1); display: inline-block; border-radius: 50%; cursor: pointer;}

.terminal_info{ margin: -260px 0 0 0; padding: 0; display: flex; justify-content: space-between; align-items: end; text-align: center;}
.terminal_info figure{ margin: 0; padding: 0; position: relative; overflow: hidden;}
.terminal_info .terminal_block{ margin: 0; padding: 0;}
.terminal_info .terminal_block h6{ margin: 0 0 12px 0; font-size: 17px; font-weight: 700;}

.terminal_info .hero1 video { width: 100%; height: 100%; position: absolute; top: 33px; left: 29px; max-width: 235px; max-height: 385px; object-fit: cover;}
.terminal_info .hero2 video { width: 100%; height: 100%; position: absolute; top: 21px; left: 12px; max-width: 195px; max-height: 260px; object-fit: cover;}
.terminal_info .hero3 video { width: 100%; height: 100%; position: absolute; top: 4px; left: 5px; max-width: 114px; max-height: 246px; object-fit: cover; border-radius: 13px;}
.terminal_info .hero4 video { width: 100%; height: 100%; position: absolute; top: 5px; left: 6px; max-width: 113px; max-height: 244px; object-fit: cover; border-radius: 13px; z-index: -1;}
.terminal_info .hero5 video { width: 100%; height: 100%; position: absolute; top: 37px; left: 6px; max-width: 83px; max-height: 91px; object-fit: cover; border-radius: 12px;}
.terminal_info .hero6 video { width: 100%; height: 100%; position: absolute; top: 12px; left: 7px; max-width: 268px; max-height: 169px; object-fit: cover;}

.hero_modal{ margin: 0; padding: 0; width: 100%; height: 100%;}
.hero_modal .modal-dialog{ width: 100%; height: 100vh; max-width: 100%; margin: 0; padding: 0;}
.hero_modal .modal-content{ height: 100%; background: #000; border-radius: 0; padding: 0;}
.hero_modal .modal-body{ padding: 0;}
.hero_modal .btn-close{ position: absolute; top: 20px; right: 20px; padding: 0; z-index: 999;}
.hero_modal iframe{ display: flex;}

/* Client */
.client_sec{ margin: 0; padding: 0; text-align: center;}
.client_sec .global_title{ margin-bottom: 90px;}
.client_sec .inner{ padding: 100px 40px; background: #000000;}
.client_sec .detail{ max-width: 990px; margin: 0 auto;}
.client_block{ margin: 0 0 30px 0; padding: 0;}
.client_block i{ margin: 0 0 15px 0; padding: 0; display: block;}
.client_block h3{ margin: 0; font-size: 28px; color: #f6f6f8;}
.client_block span{ color: #3b82f6; font-weight: 700;}

/* What */
.what_sec{ margin: 0; padding: 0;}
.what_sec .detail{ margin: 0 auto; padding: 40px 0; max-width: 490px;}
.what_sec span{ margin: 0 0 35px 0; display: block; font-size: 24px; color: #3b82f6; font-weight: 600; line-height: 1.1em;}
.what_sec .video_info{ padding: 60px 0 0 0; position: relative; height: 100%; background: url(../images/what.jpg) center center no-repeat; background-size: cover; display: flex; justify-content: center; align-items: end;}
.what_sec figure{ margin: 0; padding: 0; overflow: hidden; position: relative;}
.what_sec video { width: 100%; height: 100%; position: absolute; top: 44px; left: 40px; max-width: 315px; max-height: 520px; object-fit: cover;}
ul.what_list{ margin: 0; padding: 0;}
ul.what_list li{ margin: 0 0 30px 0; padding: 0 0 0 27px; display: block; font-size: 17px; color: #232426; font-weight: 500; line-height: 1.2em; position: relative;}
ul.what_list li::before{ content: ""; width: 20px; height: 20px; background: url(../images/checkmark.svg) center center no-repeat; background-size: 100% 100%; position: absolute; top: 0; left: 0;}

/* Serve */
.serve_sec{ margin: 0; padding: 0; text-align: center;}
.serve_sec .global_title{ margin-bottom: 60px;}
.serve_sec .inner{ padding: 100px 40px; background: #000000;}
.serve_info{ margin: 0; padding: 0; display: flex; gap: 100px; justify-content: center; flex-wrap: wrap;}
.serve_block{ margin: 0; padding: 0;}
.serve_block i{ margin: 0 0 20px 0; display: block;}
.serve_block h3{ margin: 0; padding: 0; font-size: 26px; color: #f6f6f8; font-weight: 400; line-height: 1em;}
.serve_block h3 span{ display: block; color: #545455;}

/* Clones */
.clones_sec{ margin: 0; padding: 0; position: relative;}
.clones_sec .detail{ margin: 0 auto; padding: 40px 0; max-width: 490px;}
.clones_sec .detail p{ margin: 0 0 20px 0; font-size: 17px; color: #232426; font-weight: 500;}
.clones_sec .video_info{ padding: 60px 0 0 0; position: relative; height: 100%; background: url(../images/clone_img.jpg) center center no-repeat; background-size: cover; display: flex; justify-content: center; align-items: end;}
.clones_sec figure{ margin: 0; padding: 0; overflow: hidden; position: relative;}
.clones_sec video { width: 100%; height: 100%; position: absolute; top: 40px; left: 96px; max-width: 271px; max-height: 449px; object-fit: cover; clip-path: polygon(0 0%, 100% 0, 101% 98%, 0% 100%);}
.clones_sec .women{ position: absolute; bottom: -35px; left: 49.6%; transform: translateX(-50%); z-index: 1;}

/* Way */
.way_sec{ margin: 0; padding: 150px 0 100px 0; text-align: center;}
.way_sec .container{ max-width: 1280px;}
.way_sec .global_title{ font-size: 58px; margin-bottom: 70px;}
.way_sec figure{ margin: 0; width: 100%;}
.way_sec .main{ margin: 0; padding: 0; overflow: hidden; position: relative;}
.way_sec video { width: 100%; height: 100%; position: absolute; top: 25px; left: 3px; max-width: 404px; max-height: 546px; object-fit: cover; border-radius: 0 0 13px 13px;}
.way_sec .detail{ display: flex; flex-direction: column; justify-content: space-around; height: 100%;}
.way_block{ margin: 0; display: flex; justify-content: space-between; align-items: center;}
.way_sec .what_list{ max-width: 145px; text-align: left; margin: 0;}
.way_sec .what_list li{ margin: 0;}
.way_sec [class^="col-"]:last-child .way_block{ flex-direction: row-reverse; justify-content: center; gap: 10px;}
.way_sec [class^="col-"]:last-child .way_block figure{ width: auto;}

/* Market */
.market_sec{ margin: 0; padding: 0; position: relative;}
.market_sec .inner{ background: #3b82f6 url(../images/logo_blue.svg) left bottom -5px no-repeat; background-size: 50.5% auto;}
.market_sec .detail{ margin: 0 auto; padding: 40px 0; max-width: 440px;}
.market_sec .detail p{ margin: 0 0 20px 0; font-size: 17px; color: #232426; font-weight: 500;}
.market_sec .video_info{ padding: 60px 0 0 0; position: relative; height: 100%; background: url(../images/market_img.jpg) center center no-repeat; background-size: cover; display: flex; justify-content: center; align-items: end;}
.market_sec figure{ margin: 0; padding: 0; overflow: hidden; position: relative;}
.market_sec .video_info video { width: 100%; height: 100%; position: absolute; top: 44px; left: 40px; max-width: 315px; max-height: 520px; object-fit: cover;}
.market_sec .market_lap{ position: absolute; bottom: -35px; left: 49.6%; transform: translateX(-50%); z-index: 1; display: flex; align-items: end;}
.market_sec .market_lap video { width: 100%; height: 100%; position: absolute; top: 25px; left: 25px; max-width: 243px; max-height: 323px; object-fit: cover;}
.market_sec .market_mobile{ margin: 0 0 20px -30px; position: relative; z-index: 1;}
.market_sec .market_lap video.mob_vid { width: 100%; height: 100%; position: absolute; top: 79px; right: 8px; max-width: 133px; max-height: 289px; object-fit: cover; left: auto; border-radius: 12px;}

/* Technology */
.technology_sec{ margin: 0; padding: 90px 0 0 0; text-align: center;}
.technology_sec .inner{ margin: 0; padding: 110px 40px; background: #0b3170;}
.technology_sec figure{ margin: 0 0 60px 0; padding: 0;}
.technology_sec p{ max-width: 1040px; margin: 0 auto; font-size: 22px; color: #f6f6f8;}

/* Agent */
.agent_sec{ margin: 0; padding: 130px 0 100px 0;}
.agent_sec .container{ max-width: 1540px;}
.agent_sec .what_list{ max-width: 380px;}
.agent_sec figure{ max-width: 730px; margin: 0 auto; padding: 0; overflow: hidden; position: relative;}
.agent_sec video { width: 100%; height: 100%; position: absolute; top: 17px; left: 79px; max-width: 577px; max-height: 360px; object-fit: cover; clip-path: polygon(3px 0%, calc(100% - 3px) 0, 100% 100%, 0% 100%);}
ul.agent_list{ margin: 0 0 40px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px 40px;}
ul.agent_list li{ margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; font-size: 23px; color: #232426; font-weight: 600;}
ul.agent_list li span{ padding: 4px 15px; display: inline-flex; border-radius: 5px; background: #232426; color: #fff; font-weight: 700;}

.agent_sec .row{ margin-left:-30px; margin-right:-30px;}
.agent_sec [class^="col-"], .agent_sec > [class*=" col-"]{ padding-left:30px; padding-right:30px;}

/* Footer */
.footer_sec{ margin: 0; padding: 0 0 50px 0;}
.footer_sec .inner{ margin: 0; padding: 200px 30px 70px 30px; background: #000000 url(../images/logo_black.svg) bottom center no-repeat; background-size: 100% auto;}
.footer_sec .detail{ max-width: 1240px; margin: 0 auto; display: flex; align-items: end; justify-content: space-between;}
.footer_sec .left_info{ display: flex; flex-direction: column-reverse; gap: 20px;}
.footer_sec .left_info figure{ margin: 0; padding: 0;}
.footer_sec .right_info{ display: flex; align-items: end; flex-direction: column;}
.footer_sec .select_wrapper{ margin: 0 0 25px 0; position: relative;}
.footer_sec .select_wrapper::before{ content: ""; width: 11px; height: 7px; background: url(../images/arrow.svg) center center no-repeat; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
.footer_sec .selectpicker{ margin: 0; padding: 7px 40px 7px 40px; background: rgba(255,255,255,0.1) url(../images/language.svg) center left 15px no-repeat; border-radius: 5px; font-size: 16px; color: #f6f6f8; text-transform: uppercase; border: none; box-shadow: none !important; appearance: inherit; z-index: 1; position: relative;}
.footer_sec .selectpicker option{ color: #000;}

ul.social_info{ margin: 0; padding: 0; display: flex; align-items: center; gap: 10px;}
ul.social_info li{ font-size: 16px; color: #545455;}

ul.help_list{ margin: 0 0 30px 0; display: flex; gap: 20px; justify-content: end;}
ul.help_list li a{ display: inline-flex; font-size: 16px; color: #f6f6f8;}
ul.help_list li a:hover{ color: #3b82f6;}

ul.privacy_list{ margin: 0; display: flex; gap: 20px; justify-content: end;}
ul.privacy_list li{ display: inline-flex; font-size: 16px; color: #545455;}
ul.privacy_list li a{ color: #545455;}
ul.privacy_list li a:hover{ color: #3b82f6;}