@charset "utf-8";

@font-face {
	font-family: 'NotoKrL';
	font-style: normal;
	font-weight: 100;
	src: local('Noto Sans Light'), local('NotoSans-Light'), url(../../app/font/NotoSans-Light.eot);
	src: url(../../app/font/NotoSans-Light.eot?#iefix) format('embedded-opentype'),
	url(../../app/font/NotoSans-Light.woff2) format('woff2'),
	url(../../app/font/NotoSans-Light.woff) format('woff');
}

@font-face {
	font-family: 'NotoKrR';
	font-style: normal;
	font-weight: 300;
	src: local('Noto Sans Regular'), local('NotoSans-Regular'), url(../../app/font/NotoSans-Regular.eot);
	src: url(../../app/font/NotoSans-Regular.eot?#iefix) format('embedded-opentype'),
	url(../../app/font/NotoSans-Regular.woff2) format('woff2'),
	url(../../app/font/NotoSans-Regular.woff) format('woff');
}

@font-face {
	font-family: 'NotoKrM';
	font-style: normal;
/* 	font-weight: 500; */
	font-weight: normal;
	src: local('Noto Sans Medium'), local('NotoSans-Medium'), url(../../app/font/NotoSans-Medium.eot);
	src: url(../../app/font/NotoSans-Medium.eot?#iefix) format('embedded-opentype'),
	url(../../app/font/NotoSans-Medium.woff2) format('woff2'),
	url(../../app/font/NotoSans-Medium.woff) format('woff');
}

@font-face {
	font-family: 'NotoKrB';
	font-style: normal;
/* 	font-weight: 700; */
	font-weight: normal;
	src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(../../app/font/NotoSans-Bold.eot);
	src: url(../../app/font/NotoSans-Bold.eot?#iefix) format('embedded-opentype'),
	url(../../app/font/NotoSans-Bold.woff2) format('woff2'),
	url(../../app/font/NotoSans-Bold.woff) format('woff');
}



@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 700;
	src: local('Gmarket Sans Bold'), local('GmarketSans-Bold'),
	url('../../app/font/GmarketSansBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../app/font/GmarketSansBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 500;
	src: local('Gmarket Sans Medium'), local('GmarketSans-Medium'),
	url('../../app/font/GmarketSansMedium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../app/font/GmarketSansMedium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
@font-face {
	font-family: 'Gmarket Sans';    font-style: normal;    font-weight: 300;
	src: local('Gmarket Sans Light'), local('GmarketSans-Light'),
	url('../../app/font/GmarketSansLight.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
	url('../../app/font/GmarketSansLight.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


html { padding: 0px 0px; margin: 0px 0px; font-family: 'NotoKrM'; font-size: 18px; }
body { padding: 0px 0px; margin: 0px 0px; font-family: 'NotoKrM'; font-size: 18px; }
div { display: block; padding: 0px 0px; margin: 0px 0px; }
a { text-align: center; text-decoration: none; /* 링크의 밑줄 제거 */ color: inherit; /* 링크의 색상 제거 */ }
select { padding-left: 5px; height: 38px; font-weight: normal; font-family: 'Gmarket Sans'; }
.btn { cursor: pointer; box-sizing: border-box; display: inline-block; background-color: #40c6e8; border-radius: 20px; color: #ffffff; padding: 5px 15px; font-size: 1.2rem; font-weight: bold; }
.btn.transparent { background-color: transparent; }
.newLineTag { display: none; }

.topBar { position: relative; width: 100%; height: 100px; }
.topBar img { position: absolute; top: 18px; left: 40px; }
.topBar .menuList { width: 500px; position: absolute; top: 30px; right: 80px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; }
.topBar .menuList div { width: 120px; height: 40px; line-height: 40px; display: inline-block; text-align: center; cursor: pointer; font-weight: bold; }

.banner { position: relative; width: 100%; height: 685px; background: url("../../landing/img/top_banner_01.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top center; }
.banner img { width: 100%; }
.banner .btn { width: 262px; height: 69px; position: absolute; bottom: 131px; left: calc((100vw - 1440px)/2); cursor: pointer; }

.mobileBanner { display: none; }

.service { width: 100%; width: 100%; height: auto; display: block; position: relative; }
.service .service01 { position: relative; width: 100%;  text-align: center; overflow: hidden; }
/* .service .service01 .centerBox { padding-top: 75px; font-weight: 500; font-family: 'Gmarket Sans'; width: 1200px; height: 610px; margin: 100px 0px 40px 0px; display: inline-block; border-radius: 50px; font-size: 3rem; text-align: center; background-color: #f7faff; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; } */
.service .service01 .centerBox { padding-top: 75px; font-weight: 500; font-family: 'Gmarket Sans'; width: 100%; max-width: 1000px; height: 610px; margin: 100px 0px 40px 0px; display: inline-block; border-radius: 50px; font-size: 3rem; text-align: center; background-color: #f7faff; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
.service .service01 .boxList { width: 100%; text-align: center; position: absolute; top: 275px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; }
.service .service01 .boxList .scrollDiv{ width: auto; display: flex; flex-wrap: wrap; justify-content: space-between; }
/* .service .service01 .serviceBox { box-sizing: border-box; height: 458px; position: relative; background: #ffffff; margin: 0px calc(1vw); text-align: center; border-radius: 14% 14%; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px;  } */
.service .service01 .serviceBox { box-sizing: border-box; height: auto; position: relative; background: #ffffff; margin: 0px calc(0vw); text-align: center; border-radius: 14% 14%; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px;  }
.service .service01 .serviceBox { width: 23%;}
.service .service01 .serviceBox img { width: 100%; height: 100%; }
.service .service01 .serviceBox.on { border: 3px solid #40c6e8; }
.service .service01 .btn { position: absolute;
    bottom: 15px;
/*     left: calc(324px/2 - 150px/2); */
    left: calc(100%/2 - 150px/2);
    cursor: pointer;
    display: inline-block;
    background-color: #40c6e8;
    border-radius: 20px;
    color: #ffffff;
    padding: 5px 15px;
    font-size: 1.2rem;
    font-weight: bold;
    width: 150px;
    box-sizing: border-box;  }
/* .service .service01 img { width: 100%; } */

.tabContents { width: 100%; height: auto; min-height: 560px;  }
.tabContents .contents { width: 100%; height: 100%; display: flex; background-color: #f2ebed; display: none;  }
.tabContents .contents.on { display: flex; }
.tabContents .contents > div:nth-child(1) { width: 50%; background-color: #f7faff; padding: 80px 20px 40px calc(50vw - 860px); box-sizing: border-box; text-align: left; }
.tabContents .contents > div:nth-child(1) .subType { font-size: 1.5rem; font-weight: bold; font-family: 'NotoKrB'; color: #40c6e8; line-height: 40px; }
.tabContents .contents > div:nth-child(1) .title { font-size: 2rem; font-weight: 500; font-family: 'Gmarket Sans'; color: #000000; line-height: 50px; }
.tabContents .contents > div:nth-child(1) .desc { font-size: 1rem; font-weight: normal; font-family: 'NotoKrR'; color: #000000; line-height: 30px; margin-top: 10px; }
.tabContents .contents > div:nth-child(1) .btn { cursor: pointer; display: inline-block; background-color: #40c6e8; border-radius: 20px; color: #ffffff; padding: 8px 15px; font-size: 1.2rem; font-weight: bold; width: 300px; margin-top: 30px; box-sizing: border-box;  }
.tabContents .contents > div:nth-child(2) { width: 50%; margin: auto; text-align: left; padding: 0 0 0 calc(5vw); box-sizing: border-box;  }
.tabContents .contents > div:nth-child(2) img { display: inline-block; max-height: 550px; }


.service { width: 100%; width: 100%; height: auto; display: block; position: relative; }
.service .service02 { position: relative; width: 100%;  text-align: center; margin-top: 40px; }
.service .service02 .title { width: calc(90vw); font-weight: 500; font-family: 'Gmarket Sans'; margin: 120px 10px 80px 10px; display: inline-block; font-size: 3rem; text-align: center; }
/* .service .service02 .contentsDiv { display: flex; flex-wrap: nowrap; width: 100%; justify-content: center; }  */
.service .service02 .contentsDiv { display: flex; flex-wrap: wrap; width: 100%; justify-content: center; } 
/* .service .service02 .centerBox { font-weight: 500; font-family: 'Gmarket Sans'; width: 50%; height: 610px; margin: 0px 10px; padding: 40px 10px; box-sizing: border-box; display: inline-block; border-radius: 50px; font-size: 2rem; text-align: center; background-color: #f7faff; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; } */
.service .service02 .centerBox { font-weight: 500; font-family: 'Gmarket Sans'; width: 100%; height: auto; margin: 0px 10px 30px 10px; padding: 40px 10px; box-sizing: border-box; display: inline-block; border-radius: 50px; font-size: 2rem; text-align: center; background-color: #f7faff; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
.service .service02 .boxList { width: 100%; text-align: center; position: absolute; top: 275px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; }
.service .service02 .serviceBox { height: 458px; position: relative; background: #ffffff; margin: 0px 10px; text-align: center; border-radius: 14% 14%; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px;  }

.service .service02 .service02Div { width: calc(90vw); max-width: 1400px; display: inline-block; }
.service02 .contentsDiv .btn { font-family: 'NotoKrM'; display: inline-block; padding: 0px 10px; height: 38px; line-height: 38px; vertical-align: bottom; border-radius: 10px;  font-size: 1rem; }

.service02 .contentsDiv .controlsBar { margin: 5px 0px 10px 0; }
/* .service02 .contentsDiv .listScrollDiv { width: 100%; height: 140px; overflow-y: auto; } */
.service02 .contentsDiv .listScrollDiv { width: 100%; height: auto; margin-bottom: 20px; overflow-y: auto; }
.service02 .contentsDiv table { margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; width: 100%; font-size: 14px; font-family: 'NotoKrL'; line-height: 18px; }
.service02 .contentsDiv table tr { border: 1px solid #E3E3E3;  }
.service02 .contentsDiv table tr th { height: 40px; border: 1px solid #E3E3E3; text-align: center; background-color: #F8F8F8; }
.service02 .contentsDiv table tr td { border: 1px solid #E3E3E3; text-align: left; line-height: 20px; padding: 5px 5px; }
.service02 .contentsDiv table tr td:LAST_CHILD { text-align: left; }



.download { position: relative; width: 100%; text-align: center; }
.download img { width: 100%; max-width: 1417px; display: inline-block; }
.download .btn { width: 266px; height: 70px; position: absolute; bottom: 107px; left: 89px; cursor: pointer; }

.footer { position: relative; width: 100%; height: 200px; text-align: center; border-top: 1px solid #e3e3e3; }
.footer .compInfo { position: relative; display: inline-block; width: calc(90vw); height: 200px; }
.footer .compInfo img { position: absolute; top: 55px; left: 0px; }
.footer .compInfo .txt { text-align: left; padding: 50px 0px 0px 250px; line-height: 24px; }
.footer .compInfo .txt dl { display: inline-block; padding-bottom: 6px; padding: 0px 0px; margin-block-start: 0em; margin-block-end: 0em; }
.footer .compInfo .txt dl dt { display: inline-block; font-weight: 700; padding-right: 50px; }
.footer .compInfo .txt dl dd { display: inline-block; padding: 0px 0px; margin: 0px 0px;  }
.footer .compInfo .txt p { display: inline-block; padding: 0px 0px; margin: 0px 0px; }

.topBar .m-nav-icon {
    display: none;
}
.hamburger {
    width: 45px;
    height: 45px;
    padding: 12px 9px;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 10px;
}
.hamburger div {
    align-self: flex-end;
    height: 2px;
    width: 100%;
    margin-bottom: 7px;
    background: #444;
}
.hamburger .meat {
    width: 75%;
    transition: all 200ms ease-in-out;
}
.hamburger .bottom-bun {
    width: 100%;
    transition: all 400ms ease-in-out;
}  

.pushy {
    width: 230px;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 9999;
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.pushy, .push {
	transition: transform .2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
.pushy-right {
	transform: translate3d(230px, 0, 0);
}
.pushy.pushy-right {
    right: 0;
}
.site-overlay {
    display: none;
}
.pushy-content {
    transition: visibility .2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
    visibility: hidden;
}
.pushy-open-right .pushy-content {
    visibility: visible;
}
.pushy-submenu>a, .pushy-submenu>button {
    position: relative;
}
.pushy a {
    display: block;
    color: #444;
    text-decoration: none;
}
.pushy-submenu>a {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    text-align: left;
}
/* .pushy-submenu>a::after { */
/*     content: "＞"; */
/*     font-family: Ionicons; */
/*     display: block; */
/*     position: absolute; */
/*     top: 14px; */
/*     right: 15px; */
/* } */
.pushy-submenu-closed>ul {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
}
.pushy-submenu>ul {
    border-bottom: 1px solid #eee;
}
.pushy-submenu>ul {
    padding-left: 10px;
    transition: max-height .2s ease-in-out,visibility .2s ease-in-out;
}
.pushy-submenu-open>a {
    background-color: #f8f8f8;
    color: #133fb0;
}
/* .pushy-submenu-open>a::after { */
/*     content: "∨"; */
/* } */
.pushy-submenu-open>ul {
    max-height: 1000px;
    visibility: visible;
}
.pushy-submenu>ul>li {
    transition: opacity .2s ease-in-out;
}
.pushy-submenu>ul>li:first-child {
    padding-top: 9px;
}
.pushy-submenu>ul>li:last-child {
    padding-bottom: 9px;
}
.pushy-submenu>ul>li>a {
    padding: 5px 23px;
    font-size: .9375rem;
    position: relative;
    text-align: left;
}
.pushy-submenu>ul>li>a:hover {
    color: #133fb0;
}
.pushy-submenu>ul>li>a:before {
    width: 3px;
    height: 3px;
    content: "";
    background-color: #6a6a6a;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 15px;
    left: 14px;
}




ul, ol, dl {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul:last-child, ol:last-child, dl:last-child {
    margin-bottom: 0;
}

.pushy-open-right .site-overlay {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9998;
    background-color: rgba(0,0,0,.5);
    -webkit-animation: fade 500ms;
    animation: fade 500ms;
}
.pushy-open-right .pushy {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


@media (min-width: 1921px) {
	.banner { width: 100%; height: auto; aspect-ratio: 160/57; }
	
/* 	.tabContents .contents > div:nth-child(1) { padding: 80px 20px 40px calc(50vw - 860px); } */
	.tabContents .contents > div:nth-child(2) { padding: 0 0 0 calc(5vw);  }
}

@media (max-width: 1920px) {
	.tabContents .contents > div:nth-child(2) img { width: 100%; } 
}

@media (max-width: 1726px) {
	.tabContents .contents > div:nth-child(1) { padding: 80px 20px 40px calc(2vw); }
}

@media (max-width: 1500px) {
/* 	.service .service01 .centerBox { width: calc(70vw); height: calc(35vw); font-size: 2.5rem; } */
	.service .service01 .centerBox { width: calc(70vw); height: calc(40vw); font-size: 2.5rem; }
	.service .service01 .boxList { top: 245px; }
/* 	.service .service01 .serviceBox { height: calc(30vw); } */
	.service .service01 .btn { bottom: calc(1.5vw); padding: 5px 15px; font-size: 1.0rem; font-weight: bold; width: 150px; }
	.service .service01 .serviceBox img { height: auto; }
	
	.tabContents { min-height: 500px; }
}

@media (max-width: 1440px) {
	.banner { height: 580px; }
	.banner .btn { width: 225px; height: 56px; position: absolute; bottom: 112px; left: calc((100vw - 1228px)/2); }
	
/* 	.service .service01 .centerBox { width: calc(60vw); height: calc(40vw); font-size: 2.5rem; } */
	.service .service01 .boxList { top: 245px; }
/* 	.service .service01 .serviceBox { height: calc(30vw); } */
	
	.service .service01 .btn { bottom: calc(1.5vw); padding: 5px 15px; font-size: 1.0rem; font-weight: bold; width: 150px; }
}

/* @media (min-width: 1201px) and (max-width: 1417px) { */
@media (max-width: 1240px) {
	.banner { height: 480px; }
	.banner .btn { width: 188px; height: 48px; position: absolute; bottom: 92px; left: calc((100vw - 1022px)/2); }
	
	.tabContents { min-height: 420px; }
}

@media (max-width: 1417px) {
	.download .btn { width: calc(18.5vw); height: calc(5vw); position: absolute; bottom: calc(7.4vw); left: calc(6.2vw); }
}

@media (max-width: 1024px) {
	.topBar .menuList { right: 20px; }
	.banner { height: 360px; }
	.banner .btn { width: 140px; height: 36px; position: absolute; bottom: 69px; left: calc((100vw - 768px)/2); }    
	
/* 	.service .service01 .centerBox { font-size: 2.0rem; margin: 60px 0px 40px 0px; padding-top: 55px; } */
/* 	.service .service01 .boxList { top: 175px; } */
/* 	.service .service01 .btn { bottom: calc(2vw); left: calc(11vw - 120px/2); font-size: 0.8rem; width: 120px; } */
	
/* 	.service .service01 .centerBox { width: calc(88vw); height: auto; aspect-ratio: 9/17; font-size: 1.5rem; margin: 60px 0px 40px 0px; padding-top: 40px; } */
	.service .service01 .centerBox { width: calc(88vw); height: auto; aspect-ratio: 9/12; font-size: 1.5rem; margin: 60px 0px 40px 0px; padding-top: 40px; }
	.service .service01 .boxList { top: 150px; display: flex; flex-wrap: wrap; padding: 0px calc(10vw); box-sizing: border-box; }
	.service .service01 .serviceBox { width: 45%; margin-bottom: 25px; }
	.service .service01 .btn { bottom: calc(3vw); font-size: 1rem; }
	
	.tabContents { height: auto; }
    .tabContents .contents.on { display: flex; flex-direction: row; flex-wrap: wrap; }
	.tabContents .contents > div:nth-child(1) { width: 100%; min-height: calc(60vw); padding-bottom: 50px; }
	.tabContents .contents > div:nth-child(2) { width: 100%; text-align: center; padding: 0 0; }
	
	.service .service02 .service02Div { width: calc(90vw); }
	.service .service02 .title { font-size: 2rem; }
	.service .service02 .centerBox { font-size: 1.5rem; }
	.service02 .contentsDiv .listScrollDiv { height: 180px; }
	
	.download { overflow: hidden; }
	.download img { width: calc(120vw); margin-left: calc(-2vw); }
	.download .btn { width: calc(22.4vw); height: calc(6vw); position: absolute; bottom: calc(9.1vw); left: calc(5.6vw); }
}
	
@media (max-width: 768px) {
	.topBar img { top: 10px; left: 20px; width: calc(30vw); min-width: 180px;}
	.topBar .menuList { top: 80px; right: 20px; justify-content: right; width: 100%; }
	.topBar .menuList div { width: 100px; font-size: 0.8rem; }

	.banner { background-position: -90px 0px; }
	.banner .btn { width: 140px; height: 36px; position: absolute; bottom: 69px; left: 38px; }    
	
	.service .service02 .title { margin: 80px 10px 30px 10px; }
	.service .service02 .contentsDiv { flex-wrap: wrap; }
	.service .service02 .centerBox { width: 100%; height: auto; margin-bottom: 30px; padding: 50px 20px; box-sizing: border-box; }
	.service02 .contentsDiv .listScrollDiv { height: 240px; }
	
	.footer .compInfo .txt { width: 100%; padding: 140px 0px 60px 0px; }
	
	.topBar .menuList { display: none; }
	.topBar .m-nav-icon {
	    display: block;
	    top: 27px;
	}
	
	.topBar { position: fixed; top: 0px; z-index: 10; background: #ffffff; box-shadow: rgb(17 17 26 / 5%) 0px 4px 16px, rgb(17 17 26 / 5%) 0px 8px 24px, rgb(17 17 26 / 5%) 0px 16px 20px; }
	.banner { margin-top: 100px; }
	
	.newLineTag { display: block; }
}

@media (max-width: 600px) {
	.tabContents .contents > div:nth-child(1) { padding: 40px calc(5vw); } 
	
	.service .service01 .centerBox { width: calc(90vw); height: auto; aspect-ratio: 3/3.6; font-size: 1.2rem; margin: 60px 0px 20px 0px;  }
	.service .service01 .boxList { top: 150px; width: 100%; display: block; text-align: left; overflow-x: scroll; padding: 0px calc(10vw); box-sizing: border-box; }
/* 	.service .service01 .boxList .scrollDiv { width: calc(70vw * 5); } */
	.service .service01 .boxList .scrollDiv { width: calc(70vw * 4); }
	.service .service01 .serviceBox { width: calc(65vw); height: 100%; display: inline-block; }
	.service .service01 .serviceBox img { width: 100%; height: 100%; }
	.service .service01 .btn { bottom: calc(6vw); }
	
	.tabContents .contents > div:nth-child(1) .subType { font-size: 1.2rem; }
	.tabContents .contents > div:nth-child(1) .title { font-size: 1.3rem; }
	
	.service .service02 .title { font-size: 1.5rem; }
	.download { margin-top: -50px; }
	
	.topBar { height: 70px; }
	.topBar img { top: 16px !important; }
	.topBar .m-nav-icon { top: 13px; }
	.banner { margin-top: 70px; }
}

	
@media (max-width: 500px) {
/* 	.mobileBanner { display: block; } */
	
	.banner { position: relative; width: 100%; height: calc(100% * 268 / 203); background: url("../../landing/img/top_banner_mobile_02.png"); background-repeat: no-repeat; background-size: contain; background-position: top center; background-color: #f0f9fb; aspect-ratio: 268/203; }
	.banner .btn { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;  }	 
}
	
@media (max-width: 425px) {
	.topBar .menuList { right: 0px; justify-content: center; }
	.topBar .menuList div { width: 85px; font-size: 0.7rem; }
	
	
	.service .service01 .centerBox { margin: 30px 0px 20px 0px; }
	.service .service01 .boxList { top: 110px; }
    
	.service .service02 .service02Div { width: calc(100vw); }
	.service .service02 .centerBox { padding: 30px 10px 50px 10px; }
	.service .service02 .contentsDiv .btn { padding: 0px 10px; font-size: 0.8rem; border-radius: 5px; }
	.service02 .contentsDiv .controlsBar { margin: 5px 0px 10px 0; display: flex; justify-content: center; }
	.service02 .contentsDiv .controlsBar select { margin: 0px 5px; }
	
	.service02 .contentsDiv .controlsBar.type01 > select { margin: 0px 2px; }
	.service02 .contentsDiv .controlsBar.type01 > select:nth-child(1) { width: 90px !important; }
	.service02 .contentsDiv .controlsBar.type01 > select:nth-child(2) { width: 85px !important; }
	.service02 .contentsDiv .controlsBar.type01 > select:nth-child(3) { width: 85px !important; }
	.service02 .contentsDiv .controlsBar.type01 > .btn { width: 40px; padding: 0px 0px; border-radius: 5px; }

	.download img { width: calc(270vw); margin-left: calc(-10vw); }
	.download .btn { width: calc(51vw); height: calc(14vw); position: absolute; bottom: calc(20vw); left: calc(7vw); }
}
	
@media (max-width: 1200px) {
/* 	.banner .btn { position: absolute; top: 300px; left: 180px; width: 190px; } */
/* 	.service .service01 .btn { position: absolute; bottom: 72px; right: 360px; width: 190px; } */
/* 	.service .service02 .serviceTitle { position: absolute; top: 60px; left: 156px; padding: 10px 0px; } */
/* 	.service .service02 .serviceDesc { position: absolute; top: 100px; left: 156px; padding: 10px 0px; } */
/* 	.service .service02 .tabBar { position: absolute; top: 180px; left: 156px; width: 400px; } */
/* 	.service .service02 .tabBar .btn { width: 108px; } */
/* 	.service .service02 .tabContents { position: absolute; top: 264px; left: 156px; width: 420px; } */
/* 	.service .service03 .serviceBox { width: 280px; height: 180px; } */
}