@charset 'utf-8';;
/* FONTS : Custom Samsung font. */
@font-face {
  font-family:'SamsungInterface';
  font-style: normal;
  font-weight: 400;
  src: url(../font/samsungif_rg-webfont.eot);
  src: url(../font/samsungif_rg-webfont.eot?#iefix) format('embedded-opentype'),
       url(../font/samsungif_rg-webfont.woff) format('woff');
}
@font-face {
  font-family:'SamsungInterface';
  font-style: normal;
  font-weight: 700;
  src: url(../font/samsungif_bd-webfont.eot);
  src: url(../font/samsungif_bd-webfont.eot?#iefix) format('embedded-opentype'),
       url(../font/samsungif_bd-webfont.woff) format('woff');
}

body { height:100%; font-family:'SamsungIFRg', 'SamsungInterface', sans-serif; color:#333; }
.altText { position:absolute; visibility:hidden; opacity:0; z-index:-100; }

.section { position:relative; background:#FFF; }
.section .textArea { position:absolute; top:0; left:0; width:100%; padding:4.125em; text-align:center; box-sizing:border-box; z-index:10; }
.section h1 { font-size:3.75em; font-weight:bold; line-height:1; }
.section h2 { font-size:2.625em; font-weight:bold; line-height:1; margin-bottom:0.8em; }
.section .textContents { font-size:1.125em; }
.section .backImg { width:100%; }
.section .backImg img { width:100%; }
.section .tips { position:absolute; bottom:0; left:0; display:table; vertical-align:middle; width:100%; min-height:2em; padding:1.3em 0; color:#FFF; background:url('../images/img_bg_tip.png'); }
.section .tips ol { display:table-cell; vertical-align:middle; }
.section .tips ol li { padding:0 1em; }
.section video { position:absolute; top:0; background-size: 100% 100%; background-position: center center; background-size: contain; object-fit:cover; z-index:0; max-width:1920px;}

.section.sec01 h1 { width:95%; max-width:550px; margin:0 auto; }

.section.sec02 .textArea { padding-top:4.5em; }
.section.sec02 .textArea.f_W { color:#FFF; }
.section.sec02 h2 { width:35.5%; margin:0 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%; margin:0 2em; max-width:209px; }
.section.sec02 .icon .iconbox img { width:100%; }
.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%; }

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

.section.sec03 .textArea {padding-top:4.5em; }
.section.sec03 h2 { width:50%; margin:0 auto 0.4em; }
.section.sec03 .textContents { width:50%; margin:0 auto 0.8em; }

.section.sec04 { overflow:hidden; }
.section.sec04 .textArea { top:4.375em; left:4.375em; max-width:45%; padding:3.125em; box-sizing:border-box; background-color:#FFF; text-align:left; }

.section.sec05 { }
.section.sec05 .textArea { top:4.375em; left:4.375em; max-width:45.5%; padding:3.125em; box-sizing:border-box; text-align:left; }
.section.sec05 .iconArea { position:absolute; bottom:7em; left:7em; }
.section.sec05 .iconArea ul { overflow:hidden; }
.section.sec05 .iconArea ul li { float:left; width:135px; margin-right:1.25em; text-align:center; color:#266dca; }
.section.sec05 .iconArea ul li img { width: 100%; }

.section.sec06 {overflow:hidden; }
.section.sec06 .textArea { top:4.375em; left:4.375em; max-width:45.5%; padding:3.125em; box-sizing:border-box; background-color:#FFF; text-align:left; }

.section.sec07 article { position:relative; float:left; width:50%; background-color:#FFF; overflow:hidden; }
.section.sec07 article .textArea { padding:3em 1em 0 3em; }
.section.sec07 .sub01 .textArea { max-width:350px; width:40%; text-align:left; }
.section.sec07 .sub02 .textArea { max-width:350px; width:40%; text-align:left; left:auto; right:5%; }
.section.sec07 .sub03 .textArea { max-width:350px; width:40%; text-align:left; }
.section.sec07 .sub04 .textArea { max-width:350px; width:40%; text-align:left; }





@media only screen and (max-width:1680px) {
	body { font-size:95%}
	
	.section.sec03 .textContents { width:60%; }
	
    .section.sec05 .textArea { top:50px; padding:0;}
    .section.sec05 .iconArea { left:70px; }
    
    .section.sec07 .sub01 .textArea,
    .section.sec07 .sub02 .textArea,
    .section.sec07 .sub03 .textArea { width:40%; }
    .section.sec07 .sub03 h2 { width:120%; }
}

@media only screen and (max-width:1439px) {
	body { font-size:90%}
	
	.section.sec02 .textArea { padding-top:3em; }
	.section.sec02 .textArea.wide h2 { width:45%; }
	
	.section.sec03 .textArea  { padding-top:3em; }
	
	.section.sec07 .sub01 .textArea { width:48%; }
	.section.sec07 .sub02 .textArea { width:48%; right:0; }
	.section.sec07 .sub03 .textArea { width:48%; }
	.section.sec07 .sub04 .textArea { width:48%; }
}

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

	.section.sec02 .textArea h2 { width:42%; }
	.section.sec02 .textArea .textContents { width:42%; }
	.section.sec02 .icon .iconbox { width:15%; }
	
	.section.sec03 .backImg img { margin-top:5%; }
	
	.section.sec05 .textArea h2 { margin-bottom:0.5em !important; }
	
	.section.sec07 article .textArea h2 { font-size:2.2em; }
	.section.sec07 article .textArea .textContents { font-size:1.05em; }
	.section.sec07 .sub02 .textArea { width:55%; }
	.section.sec07 .sub02 .backImg img { margin-left:-10%; }
}

@media only screen and (max-width:1190px) {
	body { font-size:88%}
}

@media only screen and (max-width:1150px) {
	body { font-size:70%}

	.section.sec02 .textArea h2 { width:40%; }
	.section.sec02 .textArea .textContents { width:40%; font-size:1.5em; }

	.section.sec03 .textArea .textContents { font-size:1.5em; }
	.section.sec04 .textArea .textContents { font-size:1.5em; }
	.section.sec05 .textArea .textContents { font-size:1.5em; }
	.section.sec06 .textArea .textContents { font-size:1.5em; }

	.section.sec05 .iconArea ul li { font-size: 1.125em; }
}

@media only screen and (max-width:1024px) {
	body { font-size:78%}

	.section .textArea h2 { font-size: 2.2em; }
	
	.section.sec02 .textArea { padding-top:2.5em; }
	.section.sec02 .textArea h2 { width:40%; }
	.section.sec02 .textArea .textContents { width:38%; font-size:1.125em; }
	.section.sec02 .icon .iconbox { width:15%; margin:0 1em; }

	.section.sec03 .backImg img { margin-top:9%; }
	.section.sec03 .textArea .textContents { font-size:1.125em; }

	.section.sec04 .textArea .textContents { font-size:1.125em; }
	
	.section.sec05 .textArea { left:70px; max-width:45%; }
	.section.sec05 .textArea .textContents { font-size:1.125em; }

	.section.sec06 .textArea .textContents { font-size:1.125em; }
	
	.section.sec07 article { float:none; width:100%; }
	.section.sec07 article .textArea .textContents { font-size:1.3em; }
	.section.sec07 .sub01 .textArea { width: 43%; max-width: none; }
	.section.sec07 .sub02 .textArea { width: 43%; max-width: none; right: 10%; }
	.section.sec07 .sub03 .textArea { width: 43%; max-width: none; }
	.section.sec07 .sub04 .textArea { width: 43%; max-width: none; }

	.section video { display:none; }

}
@media only screen and (orientation:portrait) and (max-width:1023px) { 
	body { font-size:80%}
	
	/*.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 h2 { width:38%; }
	.section.sec02 .textContents,
	.section.sec02 .textArea .textContents { width:38%; }
	.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:75%; }
	.section.sec03 .textContents { width:90%; }
	
	.section.sec04 .textArea { padding: 2em; }
	.section.sec04 .textArea h2 { width:97%; margin:0 auto 0.8em; }
	.section.sec04 .textArea .textContents { width:90%; }


	.section.sec05 .iconArea ul li { width:100px; margin-bottom:1em;}
	.section.sec05 .iconArea ul li img { width:100%;}
/*
	.section.sec05 .iconArea { position:absolute; bottom:6em; left:5%; }
	.section.sec05 .iconArea ul { width:110px; overflow:hidden; }
	.section.sec05 .iconArea ul li { width:110px; margin-bottom:1em;}
	.section.sec05 .iconArea ul li img { width:100%;}
*/
	.section.sec07 .sub03 h2 { width:100%; }
}


@media only screen and (max-width:850px) {
	body { font-size:100%; }	

	.section.sec01 h1 { padding-top: 18%; }

	.section.sec02 .textArea { width: 100%; padding-top: 13%; }
	.section.sec02 .textArea h2 { width: 100%; }
	.section.sec02 .textArea.wide h2 { width: 100%; }
	.section.sec02 .textArea .textContents { width: 100%; }

	.section.sec03 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec03 .textArea h2 { width: 100%; text-align: center; }
	.section.sec03 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec04 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec04 .textArea h2 { width: 100%; text-align: center; }
	.section.sec04 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec05 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec05 .textArea h2 { width: 100%; text-align: center; }
	.section.sec05 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec05 .iconArea { bottom:40%; left:5em; width: 120px; }
	.section.sec05 .iconArea ul li { width:120px; }

	.section.sec06 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec06 .textArea h2 { width: 100%; text-align: center; }
	.section.sec06 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec07 .sub01 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec07 .sub01 .textArea h2 { width: 100%; text-align: center; }
	.section.sec07 .sub01 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec07 .sub02 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec07 .sub02 .textArea h2 { width: 100%; text-align: center; }
	.section.sec07 .sub02 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec07 .sub03 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec07 .sub03 .textArea h2 { width: 100%; text-align: center; }
	.section.sec07 .sub03 .textArea .textContents { width: 100%; text-align: center; }

	.section.sec07 .sub04 .textArea { top: 0; left: 0; max-width: none; width: 100%; padding: 4.125em; padding-top: 13%; }
	.section.sec07 .sub04 .textArea h2 { width: 100%; text-align: center; }
	.section.sec07 .sub04 .textArea .textContents { width: 100%; text-align: center; }
}


@media only screen and (orientation:portrait) and (max-width:767px) {
	.section .textArea { padding-left: 5%; padding-right: 5%; padding-bottom: 0; }
	.section.sec01 h1 { padding-top: 10%; }

	.section .textArea h2 {font-size: 2em;  }
}

@media only screen and (orientation:portrait) and (max-width:670px) {
	.section .textArea h2 {font-size: 2em;  }
	.section .tips { padding: 1em 0; }
	.section .tips ol li {font-size: 1em;  }

	.section.sec01 h1 { padding-top: 0%; font-size: 3em; }

	.section.sec02 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec02 .textArea .textContents { font-size: 1.125em; }

	.section.sec02 .icon .iconbox { height:170px; }
	.section.sec02 .icon .iconbox img { width:auto; height:80%; }

	.section.sec03 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec03 .textArea .textContents { font-size: 1.125em; }

	.section.sec04 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec04 .textArea .textContents { font-size: 1.125em; }

	.section.sec05 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec05 .textArea .textContents { font-size: 1.125em; }

	.section.sec05 .iconArea { bottom:40%; left:3em; width: 100px; }
	.section.sec05 .iconArea ul li { width:85px; font-size:1em;}

	.section.sec06 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec06 .textArea .textContents { font-size: 1.125em; }

	.section.sec07 .sub01 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec07 .sub01 .textArea h2 { font-size: 2em; }
	.section.sec07 .sub01 .textArea .textContents { font-size: 1.125em; }

	.section.sec07 .sub02 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec07 .sub02 .textArea h2 { font-size: 2em; }
	.section.sec07 .sub02 .textArea .textContents { font-size: 1.125em; }

	.section.sec07 .sub03 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec07 .sub03 .textArea h2 { font-size: 2em; }
	.section.sec07 .sub03 .textArea .textContents { font-size: 1.125em; }

	.section.sec07 .sub04 .textArea { padding-top: 8%; padding-right: 5%; padding-bottom: 3%; padding-left: 5%; }
	.section.sec07 .sub04 .textArea h2 { font-size: 2em; }
	.section.sec07 .sub04 .textArea .textContents { font-size: 1.125em; }
}

@media only screen and (orientation:portrait) and (max-width:560px) {
	.section.sec05 .iconArea { bottom:40%; left:3em; width: 100px; }
	.section.sec05 .iconArea ul li { width:70px; font-size:0.8em;}
}

@media only screen and (orientation:portrait) and (max-width:480px) {
	.section .textArea h2 {font-size: 1.5em;  }
	.section .tips { padding: 0.75em 0; }
	.section .tips ol li {font-size: 0.8em;  }

	.section.sec01 h1 { font-size: 2.5em; }

	.section.sec02 .textArea h2 { font-size: 1.5em; }
	.section.sec02 .textArea .textContents { font-size: 0.9em; }

	.section.sec02 .icon .iconbox { height:140px; }
	.section.sec02 .icon .iconbox img { width:auto; height:80%; }

	.section.sec03 .textArea h2 { font-size: 1.5em; }
	.section.sec03 .textArea .textContents { font-size: 0.9em; }

	.section.sec04 .textArea h2 { font-size: 1.5em; }
	.section.sec04 .textArea .textContents { font-size: 0.9em; }

	.section.sec05 .textArea h2 { font-size: 1.5em; }
	.section.sec05 .textArea .textContents { font-size: 0.9em; }

	.section.sec05 .iconArea { bottom:38%; left:2em; width: 70px; }
	.section.sec05 .iconArea ul li { width:60px; font-size: 0.65em; }

	.section.sec06 .textArea h2 { font-size: 1.5em; }
	.section.sec06 .textArea .textContents { font-size: 0.9em; }

	.section.sec07 .sub01 .textArea h2 { font-size: 1.5em; }
	.section.sec07 .sub01 .textArea .textContents { font-size: 0.9em; }

	.section.sec07 .sub02 .textArea h2 { font-size: 1.5em; }
	.section.sec07 .sub02 .textArea .textContents { font-size: 0.9em; }

	.section.sec07 .sub03 .textArea h2 { font-size: 1.5em; }
	.section.sec07 .sub03 .textArea .textContents { font-size: 0.9em; }

	.section.sec07 .sub04 .textArea h2 { font-size: 1.5em; }
	.section.sec07 .sub04 .textArea .textContents { font-size: 0.9em; }
}

@media only screen and (orientation:portrait) and (max-width:375px) {
	.section .textArea h2 {font-size: 1.25em;  }
	.section .tips { padding: 0.75em 0; }
	.section .tips ol li {font-size: 0.65em;  }

	.section.sec01 h1 { font-size: 2em; }

	.section.sec02 .textArea h2 { font-size: 1.25em; }
	.section.sec02 .textArea .textContents { font-size: 0.8em; }

	.section.sec02 .icon .iconbox { height:110px; }
	.section.sec02 .icon .iconbox img { width:auto; height:80%; }

	.section.sec03 .textArea h2 { font-size: 1.25em; }
	.section.sec03 .textArea .textContents { font-size: 0.8em; }

	.section.sec04 .textArea h2 { font-size: 1.25em; }
	.section.sec04 .textArea .textContents { font-size: 0.8em; }

	.section.sec05 .textArea h2 { font-size: 1.25em; }
	.section.sec05 .textArea .textContents { font-size: 0.8em; }

	.section.sec05 .iconArea { bottom:35%; left:1.5em; width: 60px; }
	.section.sec05 .iconArea ul li { width:52px; font-size: 0.5em; }

	.section.sec06 .textArea h2 { font-size: 1.25em; }
	.section.sec06 .textArea .textContents { font-size: 0.8em; }

	.section.sec07 .sub01 .textArea h2 { font-size: 1.25em; }
	.section.sec07 .sub01 .textArea .textContents { font-size: 0.8em; }

	.section.sec07 .sub02 .textArea h2 { font-size: 1.25em; }
	.section.sec07 .sub02 .textArea .textContents { font-size: 0.8em; }

	.section.sec07 .sub03 .textArea h2 { font-size: 1.25em; }
	.section.sec07 .sub03 .textArea .textContents { font-size: 0.8em; }

	.section.sec07 .sub04 .textArea h2 { font-size: 1.25em; }
	.section.sec07 .sub04 .textArea .textContents { font-size: 0.8em; }
}

@media only screen and (orientation:portrait) and (max-width:320px) {
	.section.sec01 h1 { font-size: 1.725em; }
}