@charset 'utf-8';
/* FONTS : Custom Samsung font. */

body { font-size:16px; font-family:'SamsungIFRg', sans-serif; color:#333; }

.textOutputBox { position:fixed; top:10px; left:10px; width:50%; height:3em; text-align:center; color:#F00; border:1px solid #F60; background:#FFF; z-index:1400;}
#Loading { display:none; width:100%; height:100%; background-color:#EEE; position:absolute; left:0; top:0; z-index:-100; }
#Loading.open { display:table; z-index:9999; }
#Loading div { display:table-cell; text-align:center; vertical-align:middle; }

/* Common */
.section { position:relative; width:100%; overflow:hidden; }

.section video { position:absolute; top:0; background-size: 100% 100%; background-position: center center; background-size: contain; object-fit:cover; z-index:0; }
.section .textArea { position:absolute; width:100%; padding:2.25em; text-align:center; box-sizing:border-box; z-index:2; }
.section .textArea h1 { font-size:3.75em; font-weight:bold; line-height:1; letter-spacing:-1px; }
.section .textArea h2 { font-size:2.625em; font-weight:bold; line-height:1;  margin-bottom:0.8em; }
.section .textContents { font-size:1.125em; }

.section .backImg { position:relative; width:100%; z-index:0; }
.section .backImg img { max-width:100%; }

.section .tips { display:table; position:absolute; bottom:0; width:100%; min-height:3em; background:url('../images/bg_tip.png') repeat 0 0; z-index:2; }
.section .tips p { display:table-cell; padding:1em; color:#000; font-size:1em; }
.section .scroll { display:none; position:absolute; bottom:4em; width:100%; height:72px; background:url('../images/img_scroll.png') no-repeat 50% 0; background-size:auto 100%; z-index:100; }
.section .scroll span { opacity:0; visibility:hidden; }


/* Section 01 */
.section.sec01 .textArea { display:table; padding:0; height:38%; border-collapse:collaspse; }
.section.sec01 h1 { display:table-cell; vertical-align:middle;  }
.section.sec01 h1 span { display:inline-block; width:95%; max-width:550px; }

.section.sec02 .textArea.f_W { color:#FFF; }
.section.sec02 h2 { width:35.5%; margin:1em auto 0.4em; }
.section.sec02 .textContents { width:38.5%; margin:0 auto 0.8em; }
.section.sec02 .icon { position:absolute; top:50%; width:100%; text-align:center; }
.section.sec02 .icon .iconbox { display:inline-block; width:28%; max-width:209px; margin:0 2em; }
.section.sec02 .icon .iconbox img { width:100%; }.slideControl { }
.section.sec02 .slide { position:relative; }
.section.sec02 .sec0202 .step { display:none; position:absolute; top:0; left:0; opacity:0; width:100%; height:100%;  }
.section.sec02 .sec0202 .step img { width:100%; }


/* Slide Controls */
.slideControl .slide_arrow { position:absolute; top:50%; width:50px; height:50px; margin-top:-25px; cursor:pointer; z-index:10; }
.slideControl .slide_arrow img { width:100%; }
.slideControl .prev { display:none; left:0; }
.slideControl .next { display:block; right:0; }

.bx-controls .bx-controls-direction a { position:absolute; top:50%; width:50px; height:50px; margin-top:-25px; cursor:pointer; z-index:10; }
.bx-controls .bx-controls-direction a.bx-prev { background:url("../images/btn_fp-slideprev.jpg") no-repeat center center; background-size:cover; left:0; }
.bx-controls .bx-controls-direction a.bx-next { background:url("../images/btn_fp-slidenext.jpg") no-repeat center center; background-size:cover; right:0; }
/*.section.sec02 .slideControl { display:none; }*/


.section.sec03 .textArea { top:4.375em; left:4.375em; max-width:690px; padding:3.125em; background-color:#FFF; text-align:left; }

.section.sec04 { background:#FFF; }
.section.sec04 .textArea { top:50%; left:48%; width:740px; height:250px; margin-top:-200px; max-width:48%; padding:0 0 164px 1em; background-size:contain; text-align:left; overflow:visible;  }
.section.sec04 .textArea h2 { font-size:2.222em; line-height:1.225em; margin-bottom:1em; }
.section.sec04 .textArea .textContents { margin-bottom:2.5em; }
.section.sec04 .textArea .gr-box { }
.section.sec04 .textArea .gr-title { font-size:2.555em; line-height:1.2em; font-weight:700; margin-bottom:0.3em; color:#1466b5;}
.section.sec04 .textArea .img img { width:77%; margin-left:0em; margin-bottom:1em;}
.section.sec04 .textArea .gr-img-txt { width:77%; font-size:1.125em; line-height:1.2em; font-weight:100; margin-bottom:0; }
.section.sec04 .textArea .gr-img-txt li { display:inline-block; width:24%; font-size:1em; line-height:1.2em; font-weight:100; margin-bottom:0; color:#333; text-align:center; }
.section.sec04 .textArea .gr-img-txt li:first-child { margin-left:-12%; }
.section.sec04 video { top:50%; left:10%; width:602px !important; height:657.297px !important; margin-top:-326px; max-width:45%; z-index:0; background:url('../images/sec04_bg02.jpg') no-repeat center center; background-size:cover; }

.section.sec05 .textArea { top:4.375em; left:4.375em; max-width:690px; padding:3.125em; background-color:#FFF; text-align:left; }
.section.sec04 .textArea .drum { display:none; }

.section.sec06 .folding { position:absolute; bottom:0; left:0; display:block; width:100%; height:68%; overflow:hidden; }
.section.sec06 .folding .unit { position:absolute; top:0; left:0; display:block; width:48%; height:100%; overflow:hidden; cursor:pointer;}
.section.sec06 .folding .unit img { min-width:100%; }
.section.sec06 .folding .unit .viewBox { position:absolute; left:0; top:0; width:100%; height:100%;}
.section.sec06 .folding .unit.folding01 { margin-left:0; }
.section.sec06 .folding .unit.folding02 { margin-left:48%; }
.section.sec06 .folding .unit.folding03 { margin-left:58.3%; }
.section.sec06 .folding .unit.folding04 { margin-left:68.8%; }
.section.sec06 .folding .unit.folding05 { margin-left:79.2%; }
.section.sec06 .folding .unit.folding06 { margin-left:89.6%; }

.section.sec06 .folding .unit .viewBox p { display:none; position:absolute; font-size:1.889em; }
.section.sec06 .folding .unit.on .viewBox p { display:block; }
.section.sec06 .folding .unit.folding01 p { right:50px; top:6%; text-align:right; color:#333; }
.section.sec06 .folding .unit.folding02 p { right:50px; top:6%; text-align:right; color:#333; }
.section.sec06 .folding .unit.folding03 p { left:50px; top:6%; color:#333; }
.section.sec06 .folding .unit.folding04 p { left:50px; top:6%; color:#333; }
.section.sec06 .folding .unit.folding05 p { right:50px; top:6%; text-align:right; color:#FFF;  }
.section.sec06 .folding .unit.folding06 p { right:50px; top:6%; text-align:right; color:#333; }
.section.sec06 .folding .unit a.next { position:absolute; /*top:76%;*/ bottom:5.5em; left:5.7%; width:9%; height:0; padding-top:9%; background:url('../images/btn_fp-slidenext_02.png') no-repeat 50% 0; background-size:contain; z-index:100;}
.section.sec06 .folding .unit.on a.next { display:none; }
.section.sec06 .bx-wrapper { position:absolute; bottom:0; }

.section.sec06 .slideControl { display:none; }

.section.sec07 { font-size:100%; }
.section.sec07 .tb-cell { position:relative; float:left; width:50%; background-color:#FFF; overfzlow:hidden; }
.section.sec07 .tb-cell .textArea { padding:2.225em; }
.section.sec07 .sub01 .textArea { max-width:350px; width:40%; text-align:left; }
.section.sec07 .sub02 .textArea { max-width:350px; width:40%; text-align:right; left:auto; right:0; }
.section.sec07 .sub03 .textArea { max-width:350px; width:40%; text-align:left; color:#FFF;  }
.section.sec07 .sub04 .textArea { max-width:350px; width:40%; text-align:left; }


@media only screen and (max-width:1620px){
	.section.sec07 { font-size:97%; }
	.section.sec07 .sub02 .textArea { width:50%; }
}

@media only screen and (max-width:1440px){

	.section.sec02 .textArea.wide h2 {}
	.section.sec02 .textArea.wide .textContents { width:80%; }
	.section.sec02 .icon .iconbox { width:12%; }
	.slideControl .slide_arrow { width:50px; height:50px; margin-top:-25px; }
	.slideControl .slide_arrow img { width:100%; }

	.section.sec04 video { left:0; }

	.section.sec07 { font-size:90%; }
	.section.sec07 .sub01 .textArea { width:55%; }
	.section.sec07 .sub03 .textArea { width:50%; }
	.section.sec07 .sub04 .textArea { width:45%; }
}

@media only screen and (max-width:1280px){
	.section.sec02 h2 { margin-top:0; }
	.section.sec07 { font-size:85%; }
}


@media only screen and (max-width:1152px){
	body { font-size:90%; }
	.section.sec02 h2 { margin-top:0; }
	.section.sec07 { font-size:82%; }
}
/*
@media only screen and (max-width:1024px){
	body { font-size:70%; }
	.section video { display:none; }
	.section.sec04 .textArea .drum { position:absolute; top:0; left:-80%; width:70%; height:0; margin:0 auto; padding-top:100%; background:url('../images/m/sec04_bg02.png') no-repeat 0 0; background-size:contain; }

	.section.sec07 { font-size:100%; }
}
*/
@media only screen and (max-width:1110px){
	body { font-size:87%; }
}
@media only screen and (max-width:1023px){
	body { font-size:160%; }
	.section .textArea { top:0 !important; left:0 !important; width:100% !important; max-width:100% !important; padding:2.2em 0 !important; text-align:center !important; }
	.section .textArea { top:0; left:0; width:100%; max-width:100%; padding:2.2em 0; text-align:center; }
	.section .textContents { width:95%; margin:0 auto; }
    .section .scroll { display:none; }

    .section.sec02 h2 { width:85%; }
    .section.sec02 .textArea { padding-top:2em; }
	.section.sec02 .textArea.wide h2 { width:85%; }
	.section.sec02 .textContents,
	.section.sec02 .textArea.wide .textContents { width:80%; }
	.section.sec02 .icon .iconbox { height:110px; }
	.section.sec02 .slideControl { display:block; }
	.slideControl .slide_arrow { width:50px; height:50px; margin-top:-120px; }

	.section.sec02 .icon { top:38%; }
	.section.sec02 .icon .iconbox { display:inline-block; width:28%; max-width:100%; margin:0; height:210px; }
	.section.sec02 .icon .iconbox.icon01 { display:block; width:100%; text-align:center;  }
	.section.sec02 .icon .iconbox.icon02 { display:block; float:left; width:50%; text-align:right; padding-right:10%; box-sizing:border-box; }
	.section.sec02 .icon .iconbox.icon03 { display:block; float:right; width:50%; text-align:left; padding-left:10%; box-sizing:border-box; }
	.section.sec02 .icon .iconbox img { width:auto; height:100%; }
    
    .section.sec03 h2 { width:100%; }
    .section.sec03 .textArea { padding-top:2em; }
	.section.sec03 .textContents { width:80%; }
	
    .section.sec04 h2 { width:100%; }
	.section.sec04 .textArea { margin-top:-12em; }
	.section.sec04 .textArea { top:0; left:0; margin-top:0; margin-top:0;  padding:2em 5%; text-align:center; }
	.section.sec04 .textArea .drum { display:block; position:relative; top:initial; left:initial; width:70%; height:0; margin:1.5em auto; /*padding-top:100%; background:url('../images/m/sec04_bg02.png') no-repeat 0 0; background-size:contain;*/ }
	.section.sec04 .textArea .drum img { width:100%; }	
	.section.sec04 .textArea .gr-img-txt { margin:0 auto; text-align:left; }

    .section.sec05 h2 { width:100%; }
	.section.sec05 .textArea { max-width:100%; top:0; left:0; padding:2em 5%; text-align:center; }


	/* �ʱ�ȭ */
	.section.sec06 .folding { position:initial; bottom:initial; left:initial; display:block; width:100%; height:initial; overflow:hidden; }
	.section.sec06 .folding .unit { position:relative; margin-left:initial; width:100%; cursor:initial; }
	.section.sec06 .folding .unit .viewBox { position:relative; left:initial; top:initial; width:100%; height:100%;  }
	.section.sec06 .folding .unit .viewBox img { width:100%; }
	.section.sec06 .bx-wrapper { position:absolute; bottom:0; }

	.section.sec06 .textArea { padding:2.5em 5%;} 
	.section.sec06 .folding .unit.folding01, 
	.section.sec06 .folding .unit.folding02,
	.section.sec06 .folding .unit.folding03,
	.section.sec06 .folding .unit.folding04,
	.section.sec06 .folding .unit.folding05,
	.section.sec06 .folding .unit.folding06 { position:relative; margin-left:0; }

	.section.sec06 .folding .unit .viewBox p { display:block; position:absolute; font-size:2em; }
	.section.sec06 .folding .unit.folding01 p { right:1.2em; top:5%; text-align:right; color:#333; }
	.section.sec06 .folding .unit.folding02 p { right:1.2em; top:5%; text-align:right; color:#333; }
	.section.sec06 .folding .unit.folding03 p { left:1em; top:5%; color:#333; }
	.section.sec06 .folding .unit.folding04 p { left:1em; top:5%; color:#333; }
	.section.sec06 .folding .unit.folding05 p { right:1.2em; top:5%; text-align:right; color:#FFF; }
	.section.sec06 .folding .unit.folding06 p { right:1.2em; top:5%; text-align:right; color:#333; }
	.section.sec06 .folding .unit a { display:none; }
	.section.sec06 .slideControl { display:block; }
	.section.sec06 .slideControl .slide_arrow { top:75%; }
	
	.section.sec07 { font-size:100%; }
	.section.sec07 .textArea .textContents { width:90%; margin-left:5%; }
	.section.sec07 .tb-cell { float:none; width:100%; }

}
@media only screen and (max-width:900px) {
	body { font-size:100%; }	
	.section .textArea {padding:4.5em 0 !important; }
}

@media only screen and (max-width:768px) {
	body { font-size:100%; }
	.section .textArea {padding:2.5em 0 !important; }
	.section .tips p { font-size:0.875em; }

	.section.sec04 .textArea { margin-top:0; }
}

@media only screen and (max-width:480px) {
	body { font-size:87%; }	
	.section .textArea { padding:2em 0 }
	.section .textArea h2 { margin-bottom:0.6em; }

	.section.sec02 .icon .iconbox { height:125px; }
	.section.sec04 h2 { width:90%; margin:0 auto;}
	.slideControl .slide_arrow { width:50px; height:50px; margin-top:-25px; }
}

@media only screen and (max-width:384px) {
	body { font-size:73%; }	
	.section.sec01 h1 { width:90%; }
	.section.sec02 .textContents,
	.section.sec02 .textArea.wide .textContents  { width:85%; }

	.section.sec06 .folding .unit .viewBox p { font-size:1.6em; padding-top:0px;}
}

@media only screen and (max-width:320px) {
	body { font-size: 67%; }
	.section .textArea {padding:1.8em 0 !important; }
	.section.sec01 .textArea { padding-top:0 !important; }
	.section.sec01 h1 { width:90%; }
	.section.sec02 .icon .iconbox { height:100px; }

	.section.sec07 .sub02 .textArea {}
}

@media only screen and (orientation:landscape) and (max-width:1023px) {
	body { font-size:120%; }
	.section .textArea { top:0 !important; left:0 !important; width:100% !important; max-width:100% !important; padding:2.2em 0 !important; text-align:center !important; }
	.section .textContents { width:95%; margin:0 auto; }
	
	.section.sec02 .textContents,
	.section.sec02 .textArea.wide .textContents  { width:85%; }
	.section.sec02 h2 { width:85%; }
	.section.sec02 .textArea.wide .textContents { width:75%; }
	
	.section.sec03 .textContents { widtH:80%; }
	
    .section.sec03 h2 { width:100%; }
    .section.sec03 .textArea { padding-top:2em; }
	.section.sec03 .textContents { width:80%; }
	.slideControl .slide_arrow { width:50px; height:50px; margin-top:-25px; }
	
    .section.sec04 h2 { width:100%; }
	.section.sec04 .textArea { top:0; left:0; margin-top:0; margin-top:0; width:100%; max-width:100%;  padding:2em 5%; text-align:center; }
	.section.sec04 .textArea h2,
	.section.sec04 .textArea .textContents { width:100%; }
	.section.sec04 .textArea .drum { position:relative; top:initial; left:initial; width:70%; height:0; margin:1.5em auto; padding-top:100%; background:url('../images/m/sec04_bg02.png') no-repeat 0 0; background-size:contain; }
	
    .section.sec05 h2 { width:100%; }
	.section.sec05 .textArea { max-width:100%; top:0; left:0; padding:2em 5%; text-align:center; }
	
	/* �ʱ�ȭ */
	.section.sec06.scl-point { width:100%; height:736px;}
	.section.sec06 .folding { position:initial; bottom:initial; left:initial; display:block; width:100%; height:initial; overflow:hidden; }
	.section.sec06 .folding .unit { position:initial; margin-left:initial; width:100%; cursor:initial; }
	.section.sec06 .folding .unit .viewBox { position:initial; left:initial; top:initial; width:100%; height:100%;  }
	.section.sec06 .folding .unit .viewBox img { width:100%;}
	.section.sec06 .bx-wrapper { position:absolute; bottom:0; }

	.section.sec06 .textArea { padding:2.5em 5%;}
	.section.sec06 .folding .unit.folding01, 
	.section.sec06 .folding .unit.folding02,
	.section.sec06 .folding .unit.folding03,
	.section.sec06 .folding .unit.folding04,
	.section.sec06 .folding .unit.folding05,
	.section.sec06 .folding .unit.folding06 { position:relative; margin-left:0; }

	.section.sec06 .folding .unit .viewBox p { display:block; position:absolute; font-size:2em; }
	.section.sec06 .folding .folding01 p { right:1.5em; top:65%; text-align:right; color:#333; }
	.section.sec06 .folding .folding02 p { right:1.5em; top:65%; text-align:right; color:#333; }
	.section.sec06 .folding .folding03 p { left:1em; top:65%; color:#333; }
	.section.sec06 .folding .folding04 p { left:1em; top:65%; color:#333; }
	.section.sec06 .folding .folding05 p { right:1.5em; top:65%; text-align:right; color:#FFF; }
	.section.sec06 .folding .folding06 p { right:1.5em; top:65%; text-align:right; color:#333; }
	.section.sec06 .folding .unit a { display:none; }
	.section.sec06 .slideControl { display:block; }

	.section.sec07 .textArea { padding:4.5em 5% !important; }
}
@media only screen and (orientation:landscape) and (max-width:768px) {
	body { font-size:95%; }
}

.section.sec06.scl-point{
background:#cacaca !important; 
height:936px !important;
}


@media (min-width:319px) and (max-width:1025px) {
.section.sec06.scl-point{
background:#cacaca !important; 
height:627px !important;
}
}

@media (min-width:768px) and (max-width:1024px) {
.section.sec06.scl-point{
background:#cacaca !important; 
height:936px !important;
}
}

@media (min-width:800px) and (max-width:1280px) {
.section.sec06.scl-point{
background:#cacaca !important; 
height:936px !important;
}
}


@media (min-width:980px) and (max-width:1280px) {
.section.sec06.scl-point{
background:#cacaca !important; 
height:1250px !important;
}
}

@media (min-width:480px) and (max-width:630px) {
.section.sec06.scl-point{
background:#cacaca !important; 
height:700px !important;
}
}