@charset "utf-8";

/* === CSS reset === */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, main, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
	outline:0;
	font-size:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	}
body{
	font-family:'SSTPro', '맑은 고딕', 'Malgun Gothic', 'Material Icons', 돋움, Dotum, sans-serif;
	letter-spacing:-0.05em;
	}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main{ 
	display:block;
	}
h1{font-size:5em; line-height:130%;}
h2{font-size:4em; line-height:130%;}
h3{font-size:3em; line-height:130%;}
h4{font-size:1.5em; line-height:150%;}
h5{font-size:1.25em; line-height:150%;}
h6{font-size:1em; line-height:150%;}
ul,ol,li{list-style:none; line-height:170%;}
p{line-height:170%;}
a{
	margin:0;
	padding:0;
	font-size:100%;
	text-decoration:none;
	color:inherit;
	line-height:150%;
}
table{border-collapse:collapse; border-spacing:0;}
hr{
	display:block;
	height:1px;
	border:0; 
	border-top:1px solid #f1f5f9;
	margin:1em 0;
	padding:0;
	}
input, select{vertical-align:middle;}
img{max-width:100%; vertical-align:top;}
time{color:#9f9f9f; font-size:0.9em; font-weight:300;}
address{font-style:normal;}

/* === float, clear, margin, align === */

.fl{float:left;}
.fr{float:right;}
.cb{clear:both;}
.cf{*zoom:1;}
.cf:after{content:''; display:block; clear:both;}

.taL{text-align:left;}
.taC{text-align:center;}
.taR{text-align:right;}

.maC{margin:0 auto;}

.mt0{margin-top:0px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}

.mb0{margin-bottom:0px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}

.mr0{margin-right:0px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}

/* === Sony style 공통 === */

#wrap{width:100%; min-width:1200px; background-color:#f1f5f9;}

.goArrow{
	width:200px; height:40px;
	color:#e75300;
	font-size:1.25em;
	font-weight:700;
	}
.icon{
	width:50px; height:50px;
	border:2px solid #ffffff;
	border-radius:25px;
	color:#ffffff;
	text-align:center;
	vertical-align:middle;
	padding-top:5px;
	}
span.bold{font-weight:700; letter-spacing:0em;}
span.eng{letter-spacing:0em;}
button.btn{
	padding:5px;
	border:1px solid transparent;
	background:#9f9f9f;
	color:#ffffff;
	text-align:center;
	font-weight:700;
	cursor:pointer;
	}
button.btn:hover{
	border:1px solid #e75300;
	color:#ffffff;
	background:#e75300;
	}
	
/* === Sony 공통 Header === */

header{
	background-color:rgba(3,1,15,1);
	color:#ffffff;
	width:100%; min-width:1200px; height:90px;
	position:fixed;
	z-index:200;
	}
header #headerLogo{
	width:44px; height:44px;
	position:absolute;
	top:23px; left:60px;
	line-height:0;
	}
#headerLogo img{width:44px;}
header #headerIcon{
	width:150px; height:36px;
	position:absolute;
	top:17px; right:60px;
	text-align:right;
	font-weight:300;
	}
#headerIcon div{
	display:inline-block;
	}
#headerIcon div:nth-child(2):before, #headerIcon div:nth-child(3):before{
	content:'|';
	white-space:pre;
	vertical-align:super;
	font-size:36px;
	font-weight:200px;
	}
#headerIcon div#trigger{
	display:none;
	}
#headerIcon button{
	border:none; outline:none;
	background-color:transparent;
	color:#ffffff;
	width:40px; height:40px;
	text-align:center;
	padding:0;
	}
#headerIcon button:hover{
	color:#e75300;
	}

/* === Sony 공통 nav gnb 1depth === */

nav#gnb{
	width:630px; height:90px;
	position:absolute;
	top:20px; left:50%;
	margin-left:-315px;
	}
#gnb > ul{
	position:relative;
	margin:0 auto;
	text-align:center;
	}
#gnb .depth1{
	width:105px; height:90px;
	}
#gnb .depth1 > a{
	display:block;
	padding:10px;
	font-size:1.2em;
	font-weight:600;
	}
#gnb .depth1 > a:hover{
	border-bottom:2px solid #e75300;
	}

/* === Sony 공통 nav gnb 2depth === */

nav#gnb .depth2{
	display:none;
	background-color:rgba(111,111,117,0.75);
	-webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
	-moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
	-o-box-shadow:0 0 3px rgba(0,0,0,0.2);
	-ms-box-shadow:0 0 3px rgba(0,0,0,0.2);
	box-shadow:0 0 3px rgba(0,0,0,0.2);
	width:135px;
	padding:10px;
	font-size:0.92em;
	line-height:200%;
	}
#gnb #sub1.depth2{position:absolute; top:70px; left:-15px;}
#gnb #sub2.depth2{position:absolute; top:70px; left:90px;}
#gnb #sub3.depth2{position:absolute; top:70px; left:195px;}
#gnb #sub4.depth2{position:absolute; top:70px; left:300px;}
#gnb #sub5.depth2{position:absolute; top:70px; left:405px;}
#gnb #sub6.depth2{position:absolute; top:70px; left:510px;}
#gnb .depth2 > a{
	display:block;
	padding:10px;
	font-weight:400;
	}
#gnb .depth1:hover .depth2{
	display:block;
	}
#gnb .depth2 > li:hover > a{
	color:#e75300;
	font-weight:700;
	}

/* === Sony 공통 footer === */

footer{
	background-color:#03010f;
	color:#ffffff;
	}
footer #footBox{
	width:1200px;
	margin:0 auto;
	}
#footBox #footCopy{
	width:600px; height:315px;
	}
#footCopy a:hover{
	color:#e75300;
	}
#footCopy ul li{
	display:inline;
	}
#footCopy ul li:after{
	content:"     |     ";
	white-space:pre;
	}
#footCopy ul li:last-child:after{
	content:"";
	}
#footCopy ul, #footCopy dl, #footCopy p{
	margin-top:30px;
	}
#footCopy dl dt, #footCopy dl dd{
	font-size:0.9em;
	line-height:150%;
	}
#footCopy dl dt{
	display:inline;
	float:left;
	}
#footCopy dl dt:after{
	content:" : ";
	white-space:pre;
	}
#footCopy p{font-size:0.9em;}
#footBox #footFam{
	width:600px; height:110px;
	padding-top:35px;
	}
#footFam div{
	width:235px; height:40px;
	border:1px solid #9f9f9f;
	background-color:#333335;
	margin-right:20px;
	font-size:0.9em;
	position:relative;
	}
#footFam div:nth-child(1) .material-icons{
	position:absolute;
	top:8px; right:8px;
	}
#footFam div:nth-child(1) select{
	width:233px; height:38px;
	border:0; outline:0;
	color:#ffffff;
	font-size:0.9em;
	background-color:#333335;
	padding-left:0.5em;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	}
#footFam div:nth-child(1) select::-ms-expand{
	display:none;
	}
#footFam div:nth-child(2){
	padding:8px 0 0 0.5em;
	position:relative;
	}
#footFam div:nth-child(2) a{
	display:block;
	}
#footFam div:nth-child(2) .material-icons{
	position:absolute;
	top:8px; right:8px;
	}
#footBox #footSns{
	width:600px; height:205px;
	}
#footSns div{
	width:50px; height:50px;
	margin-right:10px;
	background-color:#333335;
	border-radius:25px;
	text-align:center;
	font-size:1.5em;
	padding-top:5px;
	}
#footFam a:hover, #footSns a:hover{
	color:#e75300;
	}