/* 헤더 */

header{width: 100%; height: 80px; position: fixed; z-index: 100; padding: 0 5%; background-color: #fff; }

header .cont_part{display: flex; justify-content: space-between;}
header .logo{width: 110px; height: 45px; margin-top: 17.5px; cursor: pointer;}
header .logo .logo_part{width: 100%; height: 100%; background-image: url(../img/home_logo.png); background-size: cover; background-position: 50% 50%;}

header .button{width: 160px; height: 48px; margin-top: 16px; position: relative;}
header .button .down_load{width: 100%; height: 100%; background-image: url(../img/ico_down.png); transition: 0.5s; background-size: contain;}

header .download .img:hover{background-image: url(https://swim-talk.com/img/icon_down_hover.png);}

header .button .show_store{position: absolute; bottom: -128px; width: 264px; height: 128px; background-color: #fff; color: #71d0e8; border-radius: 16px; border: 1px solid #71d0e8; text-align: center; transition: 0.5s; opacity: 0; z-index: -10; overflow: hidden;}
header .button .show_store.on{opacity: 1; z-index: 57;}

header .button .show_store .top{width: 100%; height: 63px; line-height: 64px; transition: 0.5s;}
header .button .show_store h3{font-size: 20px;}
header .button .show_store .top:hover{background-color: #71d0e8; color: #fff;  border-radius: 14.5px;}
header .button .show_store .top a{color: #71d0e8;}
header .button .show_store .top:hover a{color: #fff;}

header .button .show_store .bottom{width: 100%; height: 63px; line-height: 64px; transition: 0.5s; }
header .button .show_store .bottom a{color: #71d0e8;}
header .button .show_store .bottom:hover a{color: #fff;}
header .button .show_store .bottom:hover{background-color: #71d0e8; color: #fff; border-radius: 14.5px;}


/* 맨위로 버튼 */
.up_button{position: fixed;bottom: 5%; right: 5%; width: 76px; height: 76px; cursor: pointer; z-index: 100;}
.up_button img{width: 100%; height: 100%;}



/* 첫페이지 및 마지막 페이지 */
.main{width: 100%; height: 100vh; padding: 80px 10% 100px; position: relative;}

.main .cont_part{display: flex; justify-content:space-around; width: 100%; height: 100%;}


/* img_part */

.main .cont_part .left_part{width: 50%; height: auto; background-image: url(../img/img_00.png); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;}


/* right_part */

.main .cont_part .right_part{width: 50%; height: 100%; display: table; margin-left: 10%;}
.main .cont_part .right_part .container{display: table-cell; vertical-align: middle; }
.main .cont_part .right_part p{font-size: 56px; font-weight: 500;}
.main .cont_part .right_part p span{color: #71d0e8;}
.main .cont_part .right_part h1{margin-top: 5%; font-size: 32px; font-weight: 300; line-height: 1.5;}
.main .cont_part .right_part h1 span{color: #71d0e8;}

.main .button{display: flex; justify-content:start; align-items: center; margin-top: 5%; position: relative; transition: 0.5s;}

.main .button .down_load{width: 264px; height: 80px; background-image: url(../img/icon_down_rec.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; transition: 0.5s; cursor: pointer;}


.main .button .qr_code{width: 264px; height: 80px;  background-image: url(../img/ico_qr.png); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; margin-left: 24px; transition: 0.5s; cursor: pointer;}

/* .main .button .qr_code:hover{background-image: url(../img/ico_qr_hover.png);} */


.main .button .show_store{position: absolute; top: -128px; width: 264px; height: 128px; background-color: #fff; color: #71d0e8; border-radius: 16px; border: 1px solid #71d0e8; text-align: center; transition: 0.5s; opacity: 0; z-index: -10; overflow: hidden;}
.main .button .show_store.on{opacity: 1; z-index: 55;}

.main .button .show_store .top{width: 100%; height: 63px; line-height: 64px; transition: 0.5s;}
.main .button .show_store h3{font-size: 20px;}
.main .button .show_store .top:hover{ background-color: #71d0e8; color: #fff;  border-radius: 14.5px;}
.main .button .show_store .top a{color: #71d0e8;}
.main .button .show_store .top:hover a{color: #fff;}

.main .button .show_store .bottom{width: 100%; height: 63px; line-height: 64px; transition: 0.5s; }
.main .button .show_store .bottom a{color: #71d0e8;}
.main .button .show_store .bottom:hover a{color: #fff;}

.main .button .show_store .bottom:hover{background-color: #71d0e8; color: #fff; border-radius: 14.5px;}

.main .qr_codeimg{position: absolute; top: -264px; left: 288px; width: 264px; height: 264px; background-image: url(../img/btn_QR.png); background-size: contain; transition: 0.5s; opacity: 0; z-index: -10;}

.main .qr_codeimg.on{opacity: 1; z-index: 55;}

/* mobile 이미지 */
.main .button_mobile_01{width: 160px; height: 44px; background-image: url(../img/btn_applestore.png); background-size: contain; background-repeat: no-repeat; margin-right: 5%; display: none;}
.main .button_mobile_01 a{width: 100%; height: 100%; display: block; }
.main .button_mobile_02 a{width: 100%; height: 100%; display: block; }

.main .button_mobile_02{width: 160px; height: 44px; background-image: url(../img/btn_googleplay.png); background-size: contain; background-repeat: no-repeat; display: none;}

/* scrolldown 이미지*/

.main .scroll{width: 100%; margin: 0 auto; text-align: center; cursor: pointer;}
.main .scroll_down{position: absolute; left: 48%; top: 85%; animation: motion 0.5s linear 0s infinite alternate; width: 90px; height: auto;}

@keyframes motion {
	0% {margin-top: 0px;}
	100% {margin-top: 10px;}
}


/* 두번째 페이지 이후 common */
.fp-section{height: 100vh !important;}
.fp-tableCell{height: 100% !important;}

.section_part{width: 100%; height: 100vh; padding: 80px 10% 0;}

.section_part .cont_part{display: flex; justify-content:space-around; width: 100%; height: 100%;}


/* left_part */
.section_part .left_part{width: 50%; height: 100%; display: table;}
.section_part .left_part .container{height: 100%; display: table-cell; vertical-align: middle;}

.section_part .left_part .icon_part{width: 56px; height: 56px; margin-bottom: 5%; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;}

.section_part .left_part p{font-size: 32px; font-weight: 300;}
.section_part .left_part p span{color: #7ed0df;}

.section_part .left_part h1{font-size: 64px; font-weight: 500; margin: 40px 0;}

.section_part .slide_part{width: 80%; margin-top: 20%; display: flex; justify-content:start; align-items: center;} 

.section_part .slide_part h2{font-size: 30px; margin: 5px 10% 10px; line-height: 40px; font-weight: normal;}

.section_part .slide_part h2 span{color: #bcbcbc ;}

.section_part .slide_part .up{width: 44px; height: 44px; background-image: url(../img/ico_next.png); background-size: contain; background-position: 50% 50%; cursor: pointer;}

.section_part .slide_part .down{width: 44px; height: 44px; background-image: url(../img/ico_back.png); background-size: contain; background-position: 50% 50%; cursor: pointer;}

/* right_part */
.section_part .right_part{width: 50%; height: auto; background-image: url(../img/img_01.png); background-size: contain; background-position: 50% 100%; background-repeat: no-repeat; margin-left: 5%;}


/* 두번째 페이지 */
#sec_01{background-color: #fafafa;}
#sec_01 .left_part .icon_part{background-image: url(../img/point.png);}
#sec_01 .right_part{background-image: url(../img/img_01.png);}

 
/* 세번째 페이지 */
#sec_02 .left_part .icon_part{background-image: url(../img/ic_message.png);}
#sec_02 .right_part{background-image: url(../img/img_02.png);}


/* 네번째 페이지 */
#sec_03{background-color: #fafafa;}
#sec_03 .left_part .icon_part{background-image: url(../img/ico_alert.png);}
#sec_03 .right_part{background-image: url(../img/img_03.png);}

/* 다섯번째 페이지 */
#sec_04{background-color: #fafafa;}
#sec_04 .left_part .icon_part{background-image: url(../img/ico_alert.png);}
#sec_04 .right_part{background-image: url(../img/camtalk_phone.png);}


/* 마지막 페이지 */
#main_02 .cont{position: relative;}
#main_02 .cont_part .left_part{background-image: url(../img/04.png); background-size: contain; background-position: 50% 50%; background-repeat: no-repeat;}
#main_02 .cont_part .right_part p{font-size: 64px;}
#main_02 .cont_part .right_part h1{font-size: 40px; word-break: keep-all;}

/* footer */
footer{width: 100%; height: 256px;  margin: 0 auto; background-color: #2d2d2d; padding: 40px 10% 24px;}
footer .cont_part{display: flex; justify-content: space-between; }

footer.fp-table{height: auto !important;}
footer .fp-tableCell{height: auto !important;}
/* left_part */
footer .cont_part .left_part{width: 50%;}
footer .cont_part .left_part .top{display: flex;  width: 100%;}
footer .cont_part .left_part .top a{margin-right: 3%; margin-left: 3%;}
footer .cont_part .left_part .top a:nth-child(1){margin-left: 0;}

footer .cont_part .left_part .top p{color: #bbb; font-size: 16px;}
footer .cont_part .left_part .bottom{margin-top: 32px;}
footer .cont_part .left_part .bottom p{font-size: 14px; color: #979797; margin-bottom: 10px; font-weight: normal;}

/* right_part */
footer .cont_part .right_part{width: 35%;}
footer .cont_part .right_part .top{color: #bbb; font-size: 16px;}

footer .cont_part .right_part .bottom .icon{width: 100%; display: flex; margin-top: 24px; }
footer .cont_part .right_part .bottom .icon_part{width: 72px; height: 72px; background-size: cover; background-position: 50% 50%; }
footer .cont_part .right_part .bottom .icon a{width: 72px; height: 72px; display: block; margin-right: 5%;}
footer .cont_part .right_part .blog{background-image: url(../img/ico_blog.png);}
footer .cont_part .right_part .facebook{background-image: url(../img/ico_facebook.png);}
footer .cont_part .right_part .instagram{background-image: url(../img/ico_insta.png);}
footer .cont_part .right_part .youtube{background-image: url(../img/ico_youtube.png); margin-right: 0;}


/* copy_bottom */
footer .copy_bottom{font-size: 10px; color: #979797; text-align: center; margin-top: 62px;}

/* footer mobile */
footer .cont_part .mobile{display: none;}
footer .mobile{display: none;}


/* 반응형 */
@media(max-width:1700px){
	header .button .show_store{right: 0;}
}

@media(max-width:1306px){
	.main .cont_part .right_part{margin-left: 5%;}
}

@media(max-width:1284px){
	.main .cont_part .right_part{width: 38%;}
	.main .cont_part .right_part p{font-size: 38px;}
	.main .cont_part .right_part h1{font-size: 28px;}
	.main .button .down_load{width: 200px;}
	.main .button .qr_code{width: 200px;}

	.main .button .show_store{width: 200px; top: -118px;}
	.main .qr_codeimg{width: 200px; height: 200px; background-size: contain; top: -190px; left: 224px;}
	
	footer .cont_part .right_part{width: 45%;}
	footer .copy_bottom{margin-top: 62px;}

}

@media(max-width:1024px){
	.section_part .left_part p{font-size: 28px;}
	.section_part .left_part h1{font-size: 48px;}
	footer .copy_bottom{margin-left: 2%;}
	#main_02 .cont_part .right_part p{font-size: 48px;}
	#main_02 .cont_part .right_part h1{font-size: 28px; word-break: keep-all;}
}

@media(max-width:992px){
	footer{padding: 40px 3%;}
}

@media(max-width:768px){
	header{height: 52px;}
	header .logo{width: 78px; height: 32px; margin-top: 9px;}
	header .button{width: 108px; margin-top: 10px;}
	header .button .down_load{background-size: contain; background-repeat: no-repeat;}

	header .button .show_store{width: 160px; height: 93px; top: 32px; border-radius: 8px;}
	header .button .show_store .top{height: 45px; line-height: 44px;}
	header .button .show_store .top:hover{border-radius: 8px;}
	header .button .show_store h3{font-size: 14px;}

	header .button .show_store .bottom{height: 45px; line-height: 44px;}
	header .button .show_store .bottom:hover{border-radius: 8px;}
	header .button .show_store h3{font-size: 14px;}

	.main{padding: 54px 16px 5%;}
	.main .cont_part .right_part .container{vertical-align: middle;}

	/* section */
	.section_part{padding: 54px 16px 0%;}


	/* main */
	
	
	.main .cont_part{display: block;}
	.main .cont_part .left_part{width: 100%; height: 50%;}
	
	.main .cont_part .right_part{width: 100%; height: 50%; margin-left: 0;}
	.main .cont_part .right_part p{text-align: center; font-size: 32px; margin-top: 2%;}
	.main .cont_part .right_part h1{text-align: center; font-size: 16px; margin-top: 5%; margin-bottom: 5%;}
	.main .button{justify-content: center; width: 80%; margin:3% auto 0;}

	.main .button .button_left{width: 50%;}
	.main .button .down_load{width: 250px; height: 55px; margin: 0 auto;}

	.main .button .button_right{width: 50%;}
	.main .button .qr_code{width: 250px; height: 55px; margin: 0 auto;}

	.main .scroll{display: none;}


	.main .button .show_store{width: 180px; top: -127px; left: 25%; transform: translateX(-50%);}
	.main .button .show_store h3{font-size: 18px;}

	.main .qr_codeimg{width: 180px; top: -180px; left: 75%; transform: translateX(-50%); background-repeat: no-repeat;}

	.main .button .button_left{display: none;}
	.main .button .button_right{display: none;}

	.main .button_mobile_01{display: block;}
	.main .button_mobile_02{display: block;}

	#main_02 .cont_part .right_part p{font-size: 32px;}
	#main_02 .cont_part .right_part h1{font-size: 16px; word-break: keep-all;}

	/* section */
	.section_part{padding: 80px 16px 0%;}
	.section_part .left_part .icon_part{margin: 0 auto;}
	.section_part .cont_part{display: block;}
	.section_part .left_part{width: 100%; height: 30%; text-align: center; margin-bottom: 3%;}
	.section_part .right_part{width: 100%; height: 49%;margin-left: 0;}
	.section_part .slide_part{display: none;}

	.section_part .left_part p{font-size: 16px;}
	.section_part .left_part h1{font-size: 32px; margin: 3% 0;}

	/* footer */


	footer{height: auto; text-align: center; padding: 24px 10% 10px;}
	footer .cont_part{display: block;}
	footer .cont_part .mobile{width: 100%; display: block; margin: 0 auto;}
	footer .cont_part .mobile .bottom .icon{justify-content: center; margin-top: 0; margin-bottom: 24px;}
	footer .cont_part .mobile .bottom .icon a{width: 44px; height: 44px;}
	footer .cont_part .right_part .bottom .icon_part{width: 100%; height: 100%;}

	footer .cont_part .pc{display: none;}
	footer .cont_part .left_part{width: 100%;}
	footer .cont_part .left_part .top{justify-content: center;}
	footer .cont_part .left_part .top p{font-size: 12px;}

	footer .cont_part .left_part .bottom{margin-top: 24px;}
	footer .cont_part .left_part .bottom p{word-break: keep-all; font-size: 10px; line-height: 16px;}

	footer .mobile{display: block;}
	footer .pc{display: none;}

	footer .copy_bottom{margin-top: 34px; margin-left: 0;}

	
}

@media(max-width:678px){
	.main .button{width: 100%;}
	.main .button .down_load{width: 160px;}
	.main .button .qr_code{width: 160px;}

	.main .button .show_store{width: 160px; top: -124px;}
	.main .qr_codeimg{width: 160px; top: -156px;}
}

@media(max-width:514px){
	.main .button{width: 100%;}
}

@media(max-width:425px){
	
	.section_part .left_part .icon_part{width: 50px; height: 35px; margin-bottom: 2%;}
	.section_part .left_part p span{font-size: 16px;}
	.section_part .left_part p{font-size: 14px;}
	.section_part .left_part h1{font-size: 24px; margin: 5% 0;}

	.up_button{width: 44px; height: 44px;}

	/* footer */
	footer{padding-left: 5%; padding-right: 5%;}
	footer .cont_part .right_part .bottom .icon_part{width: 44px; height: 44px;}
	
}

@media(max-width:320px){
	.main{padding: 54px 5px 5%;}

	.main .button_mobile_01{width: 140px;}
	.main .button_mobile_02{width: 140px;}
	.main .button_mobile_01{margin-right: 5%;}
}