@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('/SunCruise_common/fonts/SpoqaHanSansBold.woff2') format('woff2'),
    url('/SunCruise_common/fonts/SpoqaHanSansBold.woff') format('woff'),
    url('/SunCruise_common/fonts/SpoqaHanSansBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('/SunCruise_common/fonts/SpoqaHanSansRegular.woff2') format('woff2'),
    url('/SunCruise_common/fonts/SpoqaHanSansRegular.woff') format('woff'),
    url('/SunCruise_common/fonts/SpoqaHanSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('/SunCruise_common/fonts/SpoqaHanSansLight.woff2') format('woff2'),
    url('/SunCruise_common/fonts/SpoqaHanSansLight.woff') format('woff'),
    url('/SunCruise_common/fonts/SpoqaHanSansLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('/SunCruise_common/fonts/SpoqaHanSansThin.woff2') format('woff2'),
    url('/SunCruise_common/fonts/SpoqaHanSansThin.woff') format('woff'),
    url('/SunCruise_common/fonts/SpoqaHanSansThin.ttf') format('truetype');
}


* {box-sizing: border-box;}
body,button,dd,div,dl,dt,fieldset,figcaption,figure,form,h1,h2,h3,h4,h5,input,label,legend,li,ol,p,textarea,ul{margin:0; padding:0; font-family:'Spoqa Han Sans', 'Sans-serif', sans-serif; font-weight:400}
#introWrap{width:100%;height:100%; position:relative; display: none;}
#introWrap .ins{position:absolute; top:8%; left:0; right:0 ;width:1185px; margin:0 auto;}
#introWrap dl dd{float:left; width:50%; text-transform:uppercase; text-align:center; }
#introWrap dl dd span.btn{font-size:16px; font-weight:700; display:inline-block; padding:10px 28px; color:#fff; text-align:center; background:#4c4c4c; border-radius:23px;}
#introWrap .info div{margin:15px 0}
#introWrap .info div.Tit01{font-size:37px; color:#111111;}
#introWrap .info div.Tit02{font-size:18px; color:#7f7f7f; letter-spacing:7px;}
#introWrap .info div.Tit03{font-size:11px; color:#a9a9a9; line-height:170%; margin:18px 0 30px;}
#introWrap .info .m-btn {display: none;}
#introWrap .ins dl dd .img {width: 573px; height: 372px; margin: 0 auto;}
#introWrap .ins dl dd .img.bg1 {background: url(/SunCruiseNew_common/images/homepage/index/intro_img01.jpg) center center no-repeat;}
#introWrap .ins dl dd .img.bg2 {background: url(/SunCruiseNew_common/images/homepage/index/intro_img02.jpg) center center no-repeat;}

#introWrap .addr a{padding:9px 46px; display:inline-block; background:#55657c; color:#fff; font-size:16px; margin:40px 0 25px;}
#introWrap .addr p{font-size:15px; line-height:165%; color:#7f7f7f}

@media screen and (max-width:1200px){
	#introWrap .ins {width: 90%;}
	#introWrap .info div {margin:10px 0;}
	#introWrap dl dd span.btn {font-size: 15px; padding: 8px 25px;}
	#introWrap .info div.Tit01 {font-size: 33px;}
	#introWrap .info div.Tit03 {margin: 12px 0 25px;}
	#introWrap .ins dl dd .img {width: 96%; height: 0; padding-bottom: 60%; background-size: cover !important;}
/* 	#introWrap .ins dl dd .img {overflow: hidden; padding: 0 10px;}
	#introWrap .ins dl dd .img img {width:100%; height: auto;} */
	#introWrap .addr a {margin: 30px 0 15px;}
	#introWrap .addr p {font-size: 14px;}
	
}

@media screen and (max-width:1024px){
	#introWrap {display: block;}
	#introWrap .ins {width: 94%;}
	#introWrap .info div {margin:7px 0;}
	#introWrap dl dd span.btn {font-size: 14.5px; padding: 7px 22px;}
	#introWrap .info div.Tit01 {font-size: 30px;}
	#introWrap .info div.Tit02 {font-size: 17px;}
	#introWrap .info div.Tit03 {margin: 10px 0 22px;}
/* 	#introWrap .ins dl dd .img {overflow: hidden; padding: 0 10px;}
	#introWrap .ins dl dd .img img {width:100%; height: auto;} */
	#introWrap .addr a {margin: 25px 0 10px;}
	#introWrap .addr p {font-size: 14px;}
		
}

@media screen and (min-width:1025px){
	html, body {width: 100%; height: 100%;}
	.introNew {overflow: hidden; width: 100%; height: 100%; background: url(/SunCruiseNew_common/images/homepage/index/intro_bg.jpg) center top no-repeat; 
				/* background-size: cover; */ position: relative;}
	.introNew .mask {width: 100%; height: 100%; position: absolute; right: 0; top: 0; background: rgba(0,0,0,.35); z-index: 9; opacity: 0; -webkit-transition: 0.7s; transition: 0.7s;}
	.introNew .poolvilla {position: absolute; right: 0; height: 100%; width: 51.45%;}
	.introNew .poolvilla a {position: relative; width: 610px; height: 304px; top: 254px; left: 59px; background: url(/SunCruiseNew_common/images/homepage/index/villa_over.jpg) no-repeat; 
				background-size: cover; z-index: 99; opacity: 0; -webkit-transition: 0.7s; transition: 0.7s;}
	.introNew .poolvilla a.show {opacity: 1;}
	.introNew .poolvilla .mask.show {opacity: 1;}
	.introNew .poolvilla a > span {display: inline-block; position: absolute; background: #fff;}
	.introNew .poolvilla a .line1 {right: 68%; bottom: 0; height: 1px; width: 0px;}
	.introNew .poolvilla a .line2 {left: 0; bottom: 0; height: 0px; width: 1px;}
	.introNew .poolvilla a .line3 {left: 0; top: 0; height: 1px; width: 0px;}
	.introNew .poolvilla a .line4 {right: 0; top: 0; height: 0px; width: 1px;}
	.introNew .poolvilla a .line5 {right: 0; bottom: 0; height: 1px; width: 0px;}
	.introNew .poolvilla a > p {text-align: center; color: #fff; position: absolute; top: 270px; left: 225px;}
	.introNew .poolvilla a > p .title {-webkit-transition: 1s; transition: 1s; opacity: 0; letter-spacing: 5px; font-size: 34px; font-weight: 700; line-height: 40px; display: block;}
	.introNew .poolvilla a > p .title-lt {display: inline-block;}
	.introNew .poolvilla a > p .title-s {letter-spacing: 2px; font-size: 16px; margin-top: 8px;}
	.introNew .poolvilla a > p .title-s.show {opacity: 1;}
	.introNew .poolvilla a > p .title-s-lt {display: inline-block; opacity: 0;}
	
	.introNew .hotelcondo {position: relative; left: 0; height: 100%; width: 48.55%;}
	.introNew .hotelcondo a {position: absolute; width: 610px; height: 304px; top: 254px; right: 59px; background: url(/SunCruiseNew_common/images/homepage/index/hotel_over.jpg) no-repeat; 
				background-size: cover; z-index: 99; opacity: 0; -webkit-transition: 0.7s; transition: 0.7s;}
	.introNew .hotelcondo a.show {opacity: 1;}
	.introNew .hotelcondo .mask.show {opacity: 1;}
	.introNew .hotelcondo a > span {display: inline-block; position: absolute; background: #fff;}
	.introNew .hotelcondo a .line1 {right: 70%; bottom: 0; height: 1px; width: 0px;}
	.introNew .hotelcondo a .line2 {left: 0; bottom: 0; height: 0px; width: 1px;}
	.introNew .hotelcondo a .line3 {left: 0; top: 0; height: 1px; width: 0px;}
	.introNew .hotelcondo a .line4 {right: 0; top: 0; height: 0px; width: 1px;}
	.introNew .hotelcondo a .line5 {right: 0; bottom: 0; height: 1px; width: 0px;}
	.introNew .hotelcondo a > p {text-align: center; color: #fff; position: absolute; top: 270px; left: 220px;}
	.introNew .hotelcondo a > p .title {-webkit-transition: 1s; transition: 1s; opacity: 0; letter-spacing: 5px; font-size: 34px; display: block; font-weight: 700; line-height: 40px;}
	.introNew .hotelcondo a > p .title-lt {display: inline-block;}
	.introNew .hotelcondo a > p .title-s {letter-spacing: -1px; font-size: 16px; margin-top: 8px;}
	.introNew .hotelcondo a > p .title-s.show {opacity: 1;}
	.introNew .hotelcondo a > p .title-s-lt {display: inline-block; opacity: 0;}
}

@media screen and (min-width:640px) and (max-width:1600px){
	.introNew {background: url(/SunCruiseNew_common/images/homepage/index/intro_bg_1600.jpg) center top no-repeat;}
	.introNew .poolvilla a {width: 509px; height: 254px; top: 211px; left: 47px; background: url(/SunCruiseNew_common/images/homepage/index/villa_over_1600.jpg) no-repeat;}
	.introNew .poolvilla a > p {top: 225px; left: 170px;}
	.introNew .poolvilla a > p .title {font-size: 30px; line-height: 36px; letter-spacing: 4px;}
	.introNew .poolvilla a > p .title img {width: 88%; height: auto;}
	.introNew .poolvilla a > p .title-s {letter-spacing: 1px; font-size: 14px; margin-top: 5px;}
	
	.introNew .hotelcondo a {width: 511px; height: 253px; top: 212px; right: 48px; background: url(/SunCruiseNew_common/images/homepage/index/hotel_over_1600.jpg) no-repeat;}
	.introNew .hotelcondo a > p {top: 220px; left: 163px;}
	.introNew .hotelcondo a > p .title {font-size: 30px; line-height: 36px; letter-spacing: 4px;}
	.introNew .hotelcondo a > p .title img {width: 88%; height: auto;}
	.introNew .hotelcondo a > p .title-s {font-size: 14px; margin-top: 5px;}
}

@media screen and (min-width:640px) and (max-width:1200px){
	.introNew {background: url(/SunCruiseNew_common/images/homepage/index/intro_bg_1400.jpg) center top no-repeat;}
	.introNew .poolvilla a {width: 445px; height: 223px; top: 184px; left: 39px; background: url(/SunCruiseNew_common/images/homepage/index/villa_over_1400.jpg) no-repeat;}
	.introNew .poolvilla a > p {top: 197px; left: 133px;}
	.introNew .poolvilla a > p .title {font-size: 25px; line-height: 27px; letter-spacing: 3px;}
	.introNew .poolvilla a > p .title img {width: 80%; height: auto;}
	.introNew .poolvilla a > p .title-s {letter-spacing: 0; font-size: 12px; margin-top: 3px;}
	
	.introNew .hotelcondo a {width: 447px; height: 220px; top: 186px; right: 45px; background: url(/SunCruiseNew_common/images/homepage/index/hotel_over_1400.jpg) no-repeat;}
	.introNew .hotelcondo a > p {top: 193px; left: 130px;}
	.introNew .hotelcondo a > p .title {font-size: 25px; line-height: 27px; letter-spacing: 3px;}
	.introNew .hotelcondo a > p .title img {width: 80%; height: auto;}
	.introNew .hotelcondo a > p .title-s {font-size: 12px; margin-top: 3px;}
}


@media screen and (max-width:640px){
	html, body {height: 100%;}
	.introNew {display: none;}
	
	#introWrap .ins {width: 100%; height: 100%; overflow: hidden; top: 0;}
	#introWrap .ins dl {height: 100%;}
	#introWrap dl dd {float: none; width: 100%; height: 50%; position: relative;}
	#introWrap dl dd .info {display: table; height: 45%; overflow: hidden; width: 100%;}
	#introWrap dl dd .info-wrap {display: table-cell; vertical-align: middle; width: 100%;}
	#introWrap dl dd span.btn {display: block; font-size: 22px; background: none; color: #111;}
	#introWrap .info div.Tit01 {display: inline-block; font-size: 15px; color: #111; margin: 2px 0 5px;}
	#introWrap .info div.Tit02 {display: inline-block; font-size: 15px; letter-spacing: 0; color: #111; margin: 2px 0 5px;}
	#introWrap .info div.Tit03 {display: none;}
	#introWrap .info .m-btn {display: block;}
	#introWrap .info .m-btn a {display: inline-block; color: #fff; background: #55657c; padding: 2% 12%; border-radius: 5px; font-size: 15px;}
	#introWrap .ins dl dd .img {padding: 0; height: 55%; position: absolute; bottom: 0; width: 100%;}
	#introWrap .ins dl dd .img img {height: 100%; width: auto;}
	#introWrap .addr {display: none;}
	
	
}