@charset "utf-8";

/************************
        main
************************/
.main_visual{width:100%;}

/* slide visual */
.main_visual .swiper-slide {position:relative;}
.main_visual .swiper-slide > a{display:block;width:100%;}
.main_img img{width:100%;} 
.main_visual .tit_wrap{position: absolute;bottom:33.96%;left:0;width:100%;text-align: center;}
.main_visual .tit_wrap .sub{padding-bottom:13px;font-size:10px;}
.main_visual .tit_wrap .sub span{font-weight: 800;}
.main_visual .tit_wrap .partner{position:relative;padding-left:36px;}
.main_visual .tit_wrap .partner:before{position:absolute;top:0;left:12px;content:'';display: block;width:10px;height:10px;background: url('../img/common/ico_plus.png') center no-repeat;background-size:100%;}
.main_visual .tit_wrap .tit{position:relative;padding:0 12%;font-size:27px;font-weight:800;}

.main_visual .tit_wrap .tit:before,
.main_visual .tit_wrap .tit:after {content:'';position:absolute;top:0%;margin-top:2px;display:inline-block;width:11px;height:18px;background: url('../img/common/ico_bar.png') center no-repeat;background-size:10.67px 17.33px;}
.main_visual .tit_wrap .tit:before{left:8.7%;}
.main_visual .tit_wrap .tit:after{right:8.7%;}

.main_visual .swiper-pagination{bottom:33.33px;}
.main_visual .swiper-pagination-bullet{width:13px;height:2px;border-radius:0;background:#000;opacity:0.2;}
.main_visual .swiper-pagination-bullet-active{opacity: 1;}

/* 메인 하단 */
.main_text{padding:47px 22px 50px;}
.main_text h3{font-size:18px;font-weight: 800;}
.main_text .desc{padding-top:15px;font-size:11px;}
.main_text .btn_link{margin-top:37px;}


/************************
        contents
************************/
.content {height:100%;}
.content_sub {padding-top:70px;height:100%;box-sizing:border-box;}

/* works - list */
.works {padding-bottom:50px;}
.works .li {opacity:0;-webkit-transform:translateY(30px);transform:translateY(30px);-webkit-transition:all 0.5s;transition:all 0.5s;}
.works .li.on {opacity:1;-webkit-transform: translateY(0);transform:translateY(0);}

.works .li {position:relative;padding:0 22px;box-sizing:border-box;}
.works .li + .li {margin-top:50px;}
.works .li .link {display:block}
.works .li .visual img {width:100%}
.works .li .visual + .info_txt {margin-top:12px;width:100%;padding-bottom:0;border-bottom:none;}
.works .li .info_txt {padding:0 7px;width:71.6%;padding-bottom:18px;border-bottom:2px solid #000;}
.works .li .info_txt .sup {font-size:10px;font-weight:800;}
.works .li .info_txt .name {margin-top:7px;font-size:19px;font-weight:800;line-height:1.3;}
.works .li .info_txt .date {margin-top:10px;}
.works .li .info_txt .date .tit {display:inline-block;width:57px;font-size:10px;font-weight:800}
.works .li .info_txt .date .cnt {font-size:10px;}

.works .li.circle {display:table;width:100%;min-height:55vw;}
.works .li.circle:after {content:'';display:inline-block;position:absolute;top:0;right:22px;width:55vw;height:55vw;border-radius:100%;}
.works .li.circle .link {position:relative;display:table-cell;vertical-align:middle;z-index:1;}
.works .li.circle .info_txt {position:relative;display:table-cell;width:100%;vertical-align:middle;padding-left:13vw;box-sizing:border-box;z-index:1;border-bottom:0;}
.works .circle.blue:after {background:#7a92f1}
.works .circle.green:after {background:#26a57a}
.works .circle.red:after {background:#f37163}
.works .circle.deepblue:after {background:#616c97;}

.works .li.square {display:table;width:100%;min-height:100px;}
.works .li.square:after {content:'';display:inline-block;position:absolute;top:0;left:23%;width:200px;height:100px;background:url(../img/sub/bg_works_01.png) no-repeat left top;background-size:cover;}
.works .li.square .info_txt {position:relative;display:table-cell;width:100%;vertical-align:bottom;box-sizing:border-box;z-index:1;border-bottom:0;}

.works .li.square.pink:after {background:url(../img/sub/bg_works_02.png) no-repeat left top;background-size:cover;}

/* view */
.sign {vertical-align:middle;}
.page {padding:0 22px;box-sizing:border-box;overflow:hidden}
.page.launching {padding:2px 0 0;text-align:center;}
.page.launching .info_top {height:29vh}
.page.launching .corp_name {font-weight:800;font-size:10px;}
.page.launching .sign.plus{width:10px;margin:0 13px;}
.page.launching .app_name {position:relative;font-size:27px;font-weight:800;margin-top:15px;padding:0 12%;line-height:1.2;}
.page.launching .app_name:before,
.page.launching .app_name:after {content:'';position:absolute;top:0%;margin-top:4px;display:inline-block;width:11px;height:18px;background: url('../img/common/ico_bar.png') center no-repeat;background-size:10.67px 17.33px;}
.page.launching .app_name:before{left:8.7%;}
.page.launching .app_name:after{right:8.7%;}
.page.launching .date {margin-top:21px;font-size:10px;line-height:1.7}
.page.launching .date .tit {font-weight:800;color:#000;padding-top:0;vertical-align:top;}
.page.launching .date .cnt {display:inline-block;padding-left:8px;text-align:left;}
.page.launching .image {position:relative;bottom:0;height:60vh;overflow:hidden;}
.page.launching .image img {position:absolute;left:0;bottom:0;right:0;}

.page .tit {padding-top:3.5vh;font-size:10px;font-weight:800;letter-spacing:2px;color:#7f76e6;}
.page .tit_lg {margin-top:2.5vh;font-size:27px;font-weight:700;line-height:1.2;}
.page .pagination {margin-top:4.2vh;font-size:10px;vertical-align:top}
.page .pagination .now {font-size:10px;font-weight:800;}
.page .pagination .dash {padding:0 10px;}
.page .screenshot {margin-top:7.5vh;}
.page .description {text-align:left;margin-top:3.7vh;font-size:11px;color:#000;line-height:1.5;}

/* 마이오토 */
.myauto .page .tit {color:#2375ca}
/* 하나멤버스 */
.hanamembers .page .tit {color:#0699a0}
/* 신한카드리뉴얼 */
.shinhancard_renewal .page .tit {color:#415ac6}

.control_btm {position:fixed;bottom:0;width:100%;height:18px;padding:25px 0;background:rgba(255, 255, 255, 0.3);z-index:1;}
.control_btm:before {position:absolute;top:0;left:0;right:0;content:'';display:inline-block;width:100%;height:1px;background:#e5e5e5;}
.control_btm .market {position:absolute;left:15px;}
.control_btm .market .slice{position:relative;display:inline-block;width:1px;height:20px;margin:0 20px;}
.control_btm .market .slice:after{content:"";position:absolute;left:50%;top:6px;width:1px;height:9px;background:#000;}
.control_btm a {display:inline-block;background-position:center;background-repeat:no-repeat;}
.control_btm .btn-app {width:20px;height:20px;}
.control_btm .btn-app.ios{background-image:url(../img/common/ico_ios.png);background-size:15px auto;}
.control_btm .btn-app.android{background-image:url(../img/common/ico_android.png);background-size:15px auto;}
.control_btm .navi {position:absolute;right:15px;text-align:right;}
.control_btm .btn-arrow{width:60px;height:18px;}
.control_btm .btn-arrow.prev{background-image:url(../img/common/btn_prev.png);background-size:100% auto;}
.control_btm .btn-arrow.next{background-image:url(../img/common/btn_next.png);background-size:100% auto;}
.control_btm .btn-list{width:18px;height:18px;background-image:url(../img/common/ico_list.png);background-size:18px auto;margin:0 20px;}

/* vertical slide */
.page.swiper-slide {opacity:0;transform:translateY(50px);transition:all 0.5s}
.page.swiper-slide-active {opacity:1;transform:translateY(0);}
.page.screen.swiper-slide-active .swiper-container .swiper-slide-active .balloon_box {opacity:1;animation-delay:1.5s;animation:bounce 1s;}

/* 이미지 frame */
/* pc&mobile */
.page .frame{position:absolute;left:0;right:0;top:82px;}
.page .frame .mobile{position:absolute;left:12%;top:40px;width:19%;z-index:5;border-radius:20px;box-shadow:3px 10px 20px #b8c5db;}
.page .frame .pc{position:relative;width:85.833%;margin:0 auto;margin-left:5.5%;z-index:3;border-radius:10px;}
.mobile_img_wrap{position:absolute;width:17.2%;left:13.1%;top:126px;z-index:4;overflow:hidden;}
.mobile_img{position:relative;width:100%;display:flex;flex-wrap:nowrap;align-items:flex-start;}
/* mobile */
.page .frame.only{top:inherit;}
.page .frame.only .mobile{position:relative;top:0;left:50%;margin-left:-17%;width:34%;}
.swiper-wrapper.mobile_only .balloon_box{top:-40px;}

/* 상세의 상세 slide */
.info_detail {position:relative;width:54%;height:37vh;display:inline-block;margin:0 auto;padding:5px;transition:all 0.5s;text-align:center} */
.info_detail img {height:100%;}
.slide_detail.swiper-container {padding:8vh 0 22vh;margin:0 -30px 0;box-sizing:border-box;}
.slide_detail.swiper-container .swiper-slide {text-align:center;}
.slide_detail.swiper-container .swiper-slide-active {z-index:2}
/* .slide_detail.swiper-container .swiper-slide-active .info_detail {background:#fff;border-radius:15px;box-shadow:-1px 3px 39px -9px rgb(47, 47, 47);} */

/* 상세의 상세 slide 가로가 긴 형태(예: 마이오토) */
.slide_detail_row .info_detail {position:relative;width:100%;margin:0 auto;padding:0;transition:all 0.5s;text-align:center}
.slide_detail_row .info_detail img {width:100%;height:auto;}
.slide_detail_row .swiper-slide .info_detail .pc_img{padding:0 0 0 4%;width:82.5%;}
.slide_detail_row .swiper-slide.swiper-slide-active .info_detail .pc_img{padding-left:13%;}


.slide_detail_row.swiper-container {padding:90px 0 100px;margin:0 -45px;box-sizing:border-box;}
.slide_detail_row.swiper-container .swiper-slide-active {z-index:2}
.slide_detail_row.swiper-container .swiper-slide-active .info_detail {background:#fff;;}

/* 상세의 상세 slide progress bar */
.slide_detail.swiper-container-horizontal > .swiper-pagination-progressbar,
.slide_detail_row.swiper-container-horizontal > .swiper-pagination-progressbar {position:fixed;top:auto;bottom:68px;height:2px;background:none;}
.slide_detail.swiper-container-horizontal > .swiper-pagination-progressbar .swiper-pagination-progressbar-fill,
.slide_detail_row.swiper-container-horizontal > .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#f37163;}


/* 말풍선 */
[data-rel] > .txt {display:none;}
.balloon_box {position:absolute;top:-50px;left:-30%;right:-30%;width:auto;margin:0 -30%;padding-bottom:5px;z-index:1;text-align:center;opacity:0;transition:all 0.5s;}
.balloon_box:after {position:absolute;bottom:0;left:50%;margin-left:-4px;content:'';display:inline-block;width:9px;height:5px;background:url(../img/common/bg_balloon.png) no-repeat;background-size:100% 100%;}
.balloon_box .cont {display:inline-block;color:#fff;font-size:12px;padding:10px 16px;border-radius:8px;background:#000;box-sizing:border-box;}


/* contact */
.contact {padding:3.5vh 22px;}
.contact .address_kor {font-size:27px;font-weight:700;line-height:1.2;}
.contact .address_eng {margin-top:2.6vh;font-size:11px;line-height:1.2;}
.contact .tel_info li + li {margin-top:4px}
.contact .tel_info {margin-top:26px;font-size:10px;line-height:1.7}
.contact .tel_info .tit {display:inline-block;min-width:24px;font-weight:800;color:#000;padding-top:0;vertical-align:top;}
.contact .tel_info .cnt {display:inline-block;padding-left:8px;text-align:left;}
.contact .map {margin-top:30px;}
.contact .map img {width:100%}
.contact .map + .btn_link {margin-top:35px;}

/* about */
.about {height:100%;}
.about .conts {position:relative;width:100%;min-height:100%;padding:70px 0 50px;box-sizing:border-box;}
.about #section01 {background:url(../img/sub/bg_about_01.png) repeat-y;background-size:100% auto}
.about #section01 .m4a_block {position:absolute;top:0;right:0;bottom:0;left:0;background:url(../img/sub/bg_m4a.png) no-repeat;background-size:100% auto;-webkit-animation:m4a 3s infinite;-moz-animation: m4a 3s infinite;animation: m4a 3s infinite;}
.about #section01 .txt_box {position:absolute;width:100%;bottom:20%;text-align:center;}
.about .txt_box .copy {font-size:18px;font-weight:800;line-height:1.2}
.about .txt_box .sub_copy {margin-top:30px;font-size:14px;font-weight:800}
.about .txt_box .description {font-size:11px;line-height:1.4;}
.about .txt_box .more_info {width:72%;padding-top:8px;border-top:1px solid #000;font-size:10px;font-weight:800;word-break:break-word;line-height:1.2;}
.about .txt_box .info_list li+li {margin-top:15px;}

.about .txt_box .copy + .description {margin-top:10px;}
.about .txt_box .sub_copy + .description,
.about .txt_box .sub_copy + .info_list {margin-top:15px;}
.about .txt_box .description + .more_info {margin-top:5px;}
.about .txt_box .sub_copy_line {padding:10px 0; border-bottom:1px solid #231f20}


.about .btn_wrap {position:fixed;width:100%;bottom:33px;text-align:center;}
.about .btn_wrap .btn_scroll {position:relative;display:inline-block;padding:16px 0 0 20px;text-align:left;background:none;}
.about .btn_wrap .btn_scroll:before {position:absolute;top:0;left:0;bottom:0;width:10px;content:'';display:inline-block;background:url(../img/sub/arrow_down.png) no-repeat left bottom;background-size:contain;-webkit-animation: moveDown 2s infinite;-moz-animation: moveDown 2s infinite;animation: moveDown 2s infinite;}
.about .btn_wrap .txt {font-size:8px;font-weight:800;line-height:1.2;}

.about #section02 {background:url(../img/sub/bg_about_02.png) repeat-y;background-size:cover;}
.about #section02 .txt_box {padding:3.5vh 50px 0 22px;}
.about #section02 .btn_link {margin-top:43px;}

.about #section03 {background:url(../img/sub/bg_about_03.png) repeat-y;background-size:cover;}
.about #section03 .txt_box {padding:3.5vh 22px 0 22px;}

.about #section04 {padding-bottom:150px;background:url(../img/sub/bg_about_04.png) repeat-y;background-size:cover;}
.about #section04 .txt_box {padding:3.5vh 22px 0 22px;text-align:center;}
.about #section04 .txt_box .info_list + .sub_copy {position:relative;margin-top:0;padding-top:60px;}
.about #section04 .txt_box .info_list + .sub_copy:before {content:'';display:inline-block;position:absolute;top:50%;left:50%;width:6px;height:23px;margin:-17px 0 0 -3px;background:url(../img/sub/arrow_down.png) no-repeat left bottom;background-size:6px auto;}



@media only screen and (max-width:320px){
	.page .frame.only .mobile{width:30%;margin-left:-15%;}
	.info_detail{width:47%;}
	.slide_detail.swiper-container{padding-top:9vh;}
	.page .frame{top:69px;}
	.page .frame .mobile{border-radius: 17px;}
	.mobile_img_wrap{top:112px;}
	.slide_detail_row.swiper-container{padding-top:73px;}

}

@media only screen and (min-width:760px){
	.page.launching .info_top {height:auto;}
	.page.launching .image {position:static;height:auto;margin-top:5vh}
	.page.launching .image img {position:static;}
	.info_detail{width:57%;padding:4% 0 0;}
	.page .frame .mobile{top:70px;left:8%;box-shadow:3px 20px 20px #b8c5db;border-radius:30px;}
	.page .frame.only .mobile{border-radius:60px;}
	.page .frame .pc{width:90%;margin-left:0;}
	.mobile_img_wrap{width:17%;top:157px;left:8.9%;}
	.slide_detail_row .swiper-slide .info_detail .pc_img{width:86.5%;padding-top:8px;}
	.slide_detail_row .swiper-slide.swiper-slide-active .info_detail .pc_img{padding-left:7.8%;}
	/* .slide_detail.swiper-container .swiper-slide-active .info_detail {border-radius:30px;} */
}
@media only screen and (min-width:1000px){
	.info_detail{padding:5% 0 0;}
	.page .frame .mobile{top:93px;left:8%;width:20.3%;}
	.page .frame .pc{width:93%;}
	.mobile_img_wrap{width:18.3%;top:186px;left:8.9%;}
	.slide_detail_row .swiper-slide .info_detail .pc_img{width:89.5%;padding-top:12px;padding-left:5%;}
	.slide_detail_row .swiper-slide.swiper-slide-active .info_detail .pc_img{padding-left:8%;}
		
}


@keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
        40% {transform: translateY(-10px);} 
        60% {transform: translateY(-5px);} 
} 

@keyframes m4a {
	0% {
		transform: translateY(20px);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(20px);
	}
}

@keyframes moveDown{
	0% {
		transform: translateY(10px);
		opacity:1;
	}
	50% {
		transform: translateY(0px);
		opacity: 0.3;
	}
	100% {
		transform: translateY(10px);
		opacity: 1;
	}
}
@keyframes moveUp{
	0% {
		transform: translateY(-10px);
		opacity:1;
	}
	50% {
		transform: translateY(0px);
		opacity: 0.3;
	}
	100% {
		transform: translateY(-10px);
		opacity: 1;
	}
}