/* Respective Size Define

1200px or more
992px - 1199px		Space 207px, iPad Horizontal View.
768px - 991px		Space 223px, iPad Vertical View.
600px - 767px		Space 167px, Mobile Horizontal View.
480px - 599px		Space 119px
320px - 479px		Space 159px, Mobile Vertical View.
319px or below

*/

.endoscopy { background: white }
.endoscopy h1, .endoscopy h2, .endoscopy h3 { display: block; margin: 0 }
.endoscopy .section > div { margin: auto; padding: 0 60px; max-width: 1080px }
.endoscopy .title { background: url(../img/capimize-title.jpg) no-repeat top -840px center; background-size: 1920px auto; height: 250px }

.endoscopy .section1 { padding: 80px 0 40px 0 }
.endoscopy .section1 h1 { padding: 0 50px; font-weight: 300; font-size: 32px; color: #005a65 }
.endoscopy .section1 h2 { padding-top: 10px; font-weight: 300; font-size: 24px; color: #324364 }
.endoscopy .section1 p { padding: 0 50px; font-weight: 300; font-size: 18px; line-height: 1.7; color: #777 }
.endoscopy .section1 p b { font-weight: 400; font-size: 24px; color: #00b2ba }
.endoscopy .section1 ul { margin: 50px 0 0 0; padding: 0; list-style: none }
.endoscopy .section1 li { display: inline-block; margin: 0 -3px -3px 0; width: 25%; height: 250px; vertical-align: middle; text-align: center }
.endoscopy .section1 .icon { margin: auto; width: 180px; height: 180px; background: #00b2ba; border-radius: 90px }
.endoscopy .section1 .colonoscopy { background: url(../img/capimize-colonoscopy.svg) no-repeat center center #00b2ba; background-size: 110% }
.endoscopy .section1 .cystoscopy { background: url(../img/capimize-cystoscopy.svg) no-repeat bottom center #00b2ba; background-size: 100% }
.endoscopy .section1 .gastroscopy { background: url(../img/capimize-gastroscopy.svg) no-repeat center center #00b2ba; background-size: 138% }
.endoscopy .section1 .nasoendoscopy { background: url(../img/capimize-nasoendoscopy.svg) no-repeat center center #00b2ba; background-size: 100% }

.endoscopy .section2 { background: #00b2b9 }
.endoscopy .section2 > div { max-width: 1080px; height: 300px }
.endoscopy .section2 .pic { float: left; background: url(../img/capimize-section2-bg.jpg) no-repeat top -170px center; background-size: 900px auto; width: 70%; height: 300px }
.endoscopy .section2 .pic:before { float: left; content: ""; width: 0; height: 0; border-bottom: 300px solid #00b2b9; border-right: 200px solid transparent }
.endoscopy .section2 .pic:after { float: right; content: ""; width: 0; height: 0; border-top: 300px solid #00b2b9; border-left: 200px solid transparent }
.endoscopy .section2 .info { float: right; width: 30%; height: 300px }
.endoscopy .section2 .text { position: absolute; margin: 70px 0 0 -50px; color: white; text-align: right }
.endoscopy .section2 h1 { font-weight: 300; font-size: 60px }
.endoscopy .section2 h2 { font-weight: 300; font-size: 27px }
.endoscopy .section2 h3 { padding-top: 5px; padding-bottom: 3px; font-weight: 300; font-size: 19px }

.endoscopy .section3 { /*background: #f3f3f3;*/ padding: 60px 0; min-height: 500px }
.endoscopy .section3 > div { max-width: 1100px }
.endoscopy .section3 h1 { font-weight: 300; font-size: 32px; line-height: 1.4; color: #005a65; text-align: center }
.endoscopy .section3 .board { margin: 100px 0 0 0; padding: 0; list-style: none; text-align:  center }
.endoscopy .section3 .board > li { display: inline-block; margin-left: 25px; padding: 15px; width: 300px; height: 460px; background: #00b2b9; text-align: left; color: white; vertical-align: top }
.endoscopy .section3 .board > li:first-child { margin-left: 0 }
.endoscopy .section3 .board ul { padding-left: 25px; padding-right: 25px }
.endoscopy .section3 .board ul li { margin-top: 10px; font-weight: 300; font-size: 16px; line-height: 1.3; list-style-type: disc }
.endoscopy .section3 .board ul li:last-child { line-height: 1.5 }
.endoscopy .section3 .board ul li span { margin-top: 14px; display: block; font-size: 12px }
.endoscopy .section3 .board .icon { margin: -70px auto 20px auto; width: 130px; height: 130px; background: #005a65; border-radius: 70px }
.endoscopy .section3 .board .icon-network { background: url(../img/capimize-network.svg) no-repeat center center #005a65 }
.endoscopy .section3 .board .icon-image { background: url(../img/capimize-image.svg) no-repeat center center #005a65 }
.endoscopy .section3 .board .icon-speech { background: url(../img/capimize-speech.svg) no-repeat center center #005a65 }

.endoscopy .section4 { /*background: #f3f3f3*/ }
.endoscopy .section4 > div { height: 300px; background: url(../img/capimize-clock.svg) no-repeat bottom -215px left 520px; background-size: 512px auto }
.endoscopy .section4 h1 { padding-left: 100px; font-weight: 300; font-size: 72px; color: #324364 }
.endoscopy .section4 h2 { padding: 100px 0 0 100px; font-weight: 300; font-size: 28px; line-height: 1.3; color: #777 }
.endoscopy .section4 h2 span { display: block }

.endoscopy .section5 .monitor { margin-left: 160px; width: 700px; height: 600px; background: url(../img/capimize-monitor.png) no-repeat top center; background-size: contain }

.endoscopy .section6 { background: #00b2b9; height: 280px }
.endoscopy .section6 .report { position: absolute; margin: -70px 0 0 30px; width: 600px; height: 450px; background: url(../img/cover-img-01-bg.png) no-repeat center center; background-size: contain }
.endoscopy .section6 h1 { position: absolute; margin: 90px 0 0 650px; font-weight: 300; font-size: 36px; color: white }
.endoscopy .section6 h1 span { display: block }


@media (max-width: 1199px) {
	.endoscopy .section1 h1, .endoscopy .section1 p { padding: 0 4.16vw }
	
	.endoscopy .section3 .board > li { width: 27% }
	
	.endoscopy .section4 > div { background-position: bottom -215px left 43.33vw }
	.endoscopy .section4 h1, .endoscopy .section4 h2 { padding-left: 8.33vw }
	.endoscopy .section4 h1 { font-size: 6vw }
	.endoscopy .section4 h2 { font-size: 2.33vw }
	
	.endoscopy .section5 .monitor { margin-left: 13.33vw; width: 58.33vw; height: 50vw }
	
	.endoscopy .section6 { height: 23.33vw }
	.endoscopy .section6 .report { margin: -5.83vw 0 0 2.5vw; width: 50vw; height: 37.5vw }
	.endoscopy .section6 h1 { margin: 7.5vw 0 0 54.16vw; font-size: 3vw }
}

@media (max-width: 991px) {
	.endoscopy .section1 h2 { padding-top: 1vw; font-size: 2.41vw }
	.endoscopy .section1 li { height: 25.20vw }
	.endoscopy .section1 .icon { width: 18.14vw; height: 18.14vw }
	
	.endoscopy .section2 > div { padding: 0 }
	.endoscopy .section2 .pic { width: 60% }
	.endoscopy .section2 .pic:before { display: none }
	.endoscopy .section2 .info { width: 40% }
	
	.endoscopy .section3 .board > li { width: 275px }
	.endoscopy .section3 .board > li:last-child { margin-top: 80px; margin-left: 0; height: 340px }
	
	.endoscopy .section4 h1, .endoscopy .section4 h2 { padding-left: 10px }
	.endoscopy .section4 h1 { font-size: 60px }
	.endoscopy .section4 h2 { font-size: 24px }
}

@media (max-width: 767px) {
	.endoscopy .section1 { padding: 60px 0 0 0 }
	.endoscopy .section1 h1, .endoscopy .section1 p { padding: 0 6.51vw }
	.endoscopy .section1 h2 { padding-top: 10px; font-size: 22px }
	.endoscopy .section1 li { width: 50%; height: 250px }
	.endoscopy .section1 .icon { width: 170px; height: 170px }
	
	.endoscopy .section2 > div { height: auto }
	.endoscopy .section2 .pic { float: none; width: auto; background-position: top -170px left; background-size: 980px auto; opacity: 0.3 }
	.endoscopy .section2 .pic:after { display: none }
	.endoscopy .section2 .info { position: absolute; float: none; display: table; margin-top: -300px; width: 100% }
	.endoscopy .section2 .text { position: initial; display: table-cell; margin: 0; padding-left: 50px; vertical-align: middle; text-align: left }
	
	.endoscopy .section3 .board > li { display: block; margin-top: 80px; margin-left: 0; padding: 15px 30px 35px 30px; width: auto; height: auto }
	.endoscopy .section3 .board > li:last-child { height: auto }
	
	.endoscopy .section4 > div { background-position: center bottom -215px; height: 430px; text-align: center }
	.endoscopy .section4 h1 { padding-top: 10px }
	.endoscopy .section4 h2 { padding-top: 0; font-size: 22px }
	.endoscopy .section4 h2 span { display: initial }
	
	.endoscopy .section5 > div { padding: 0 !important }
	.endoscopy .section5 .monitor { margin: auto; width: 90%; height: 55vw; background-size: 95% }
	
	.endoscopy .section6 { height: 54.68vw }
	.endoscopy .section6 > div { padding: 0 !important }
	.endoscopy .section6 .report { margin: 16vw 0 0 0; width: 100%; height: 55vw; background-position: top center }
	.endoscopy .section6 h1 { margin: 4vw 0 0 14.32vw; font-size: 4.68vw }
}

@media (max-width: 599px) {
	.endoscopy .title { background-position: top -140vw center; background-size: 320vw auto; height: 41.66vw }
	
	.endoscopy .section1 { padding: 30px 0 }
	.endoscopy .section1 h1, .endoscopy .section1 p { padding: 0 }
	.endoscopy .section1 h2 { padding-top: 1.66vw; font-size: 3.66vw }
	.endoscopy .section1 li { height: 41.66vw }
	.endoscopy .section1 .icon { width: 28.33vw; height: 28.33vw }
	
	.endoscopy .section4 > div { padding: 0; background-position: center bottom -35.83vw; height: 71.66vw; background-size: 85% }
	.endoscopy .section4 h1 { padding-top: 1.66vw; font-size: 10vw }
	.endoscopy .section4 h2 { font-size: 3.66vw }
}

@media (max-width: 479px) {
	.endoscopy .section > div { padding: 0 40px }
	
	.endoscopy .section1 { padding: 20px 0 0 0 }
	.endoscopy .section1 h1, .endoscopy .section1 p { padding: 0 }
	.endoscopy .section1 h1 { font-size: 30px }
	.endoscopy .section1 h2 { font-size: 20px }
	.endoscopy .section1 p { font-size: 16px }
	.endoscopy .section1 p b { font-size: 21px }
	.endoscopy .section1 li { display: block; width: auto; height: 220px }
	.endoscopy .section1 .icon { width: 150px; height: 150px }
	
	.endoscopy .section2 > div { padding: 0 !important }
	.endoscopy .section2 .pic { height: 250px }
	.endoscopy .section2 .pic { background-position: top -25vw left; background-size: 239.58vw auto }
	.endoscopy .section2 .info { margin-top: -250px; height: 250px }
	.endoscopy .section2 .text { padding-left: 0; text-align: center }
	.endoscopy .section2 h1 { font-size: 13vw }
	.endoscopy .section2 h2 { font-size: 5.9vw }
	.endoscopy .section2 h3 { padding-top: 1.04vw; padding-bottom: 0.62vw; font-size: 4.2vw }
	
	.endoscopy .section3 { padding: 0 0 40px 0 }
	.endoscopy .section3 h1 { font-size: 26px }
	.endoscopy .section3 > div { padding: 20px !important }
	.endoscopy .section3 .board > li { padding: 10px 10px 30px 10px }
	
	.endoscopy .section4 > div { height: 370px; background-position: center bottom -175px; background-size: 400px }
	.endoscopy .section4 h1 { font-size: 48px }
	.endoscopy .section4 h2 { font-size: 21px }
	.endoscopy .section4 h2 span { display: block }
	
	.endoscopy .section5 .monitor { height: 61vw; background-size: 105% }
	
	.endoscopy .section6 { height: 70vw }
	.endoscopy .section6 .report { margin-top: 20vw; height: 60vw }
	.endoscopy .section6 h1 { margin: 4vw 0 0 0; width: 100%; font-size: 5.6vw; text-align: center }
}

@media (max-width: 319px) {
	.endoscopy .title { background-position: top -440px center; background-size: 1010px auto; height: 135px }
	.endoscopy .section > div { padding: 0 12.5vw }
	
	.endoscopy .section1 { padding: 12.5vw 0 }
	
	.endoscopy .section2 .pic { height: 200px }
	.endoscopy .section2 .info { margin-top: -200px; height: 200px }
	
	.endoscopy .section4 > div { height: 350px }
	.endoscopy .section4 h1 { font-size: 44px }
	.endoscopy .section4 h2 { font-size: 18px }
}