@charset "utf-8";

h1 {position: fixed; left: 5%; top: 30px; z-index: 1000; width:260px; height: auto;}
.box {padding:170px 0; width: 100%;}

@media screen and (max-width : 1023px ){
	h1 {left: 6%; top: 4%; width: 50%}
}

@media screen and (max-width : 768px ){
	 h1 {left: 4%; top: 3%; width:65%; }
	.box {padding:120px 0; width: 100%;}
}

.none {display:none}

#mainArea {width: 100%; min-height: calc(100% - 80px);}

.box2 {width: 90%; margin: 0 auto; overflow: hidden;}
.box2 h2 img {height:4.5vw; width: auto; position: fixed;} 

#tab {margin-top: 8vw; position: fixed;}
#tab{width: 25%; color: #FFF; display: flex; flex-direction: column;}
#tab li{width: 100%; border-bottom: 2px solid #FFF; padding: 25px 0; }
#tab .active:hover{cursor: pointer; color: #FFF; transition: all 0.5s; }
#tab .active{border-bottom: 1px #999 solid; color: #999}

.box3, .box4, .box6 {width: 55%; margin: 0 auto; float: right;}

.box3 .list {font-size: 14px; color: #fff; margin-bottom: 60px;}
.box4 .list {font-size: 12px; color: #fff; margin-bottom: 60px;}

.box3 .list div {display: flex; border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 20px;}
.box4 .list div {display: flex; border-bottom: 1px solid #333; margin-bottom: 20px; padding-bottom: 20px; flex-wrap: wrap;}

.box3 .list h4, .box4 .list h4{font-size: 20px; margin-bottom: 60px}

.box3 .list p {width: 50%;}
.box3 .list p:nth-of-type(2) {text-align: right}

.box4 .list h5 {font-size: 16px; margin:40px 0 20px}
.box4 .list p {line-height: 1.3;}
.box4 .list p:nth-of-type(1) {width: 26%; font-weight: 300;}
.box4 .list p:nth-of-type(2) {width: 54%; font-weight: 300;}
.box4 .list p:nth-of-type(3) {width: 20%; text-align: right; font-size: 14px;}
.box4 .list p:nth-of-type(3n+4) {width: 26%; margin-top: 10px; font-weight: 300;}
.box4 .list p:nth-of-type(3n+5) {width: 54%; margin-top: 10px; font-weight: 300;} 
.box4 .list p:nth-of-type(3n+6) {width: 20%; margin-top: 10px; text-align: right; font-size: 14px;}

.box6 p {color: #FFF; line-height: 1.6; font-size: 12px; margin-bottom: 3em;}
.box6 h6 {color: #FFF; lfont-size: 14px; margin-bottom: 1em;}

.box5 {color: #FFF; margin-top: 60px;}
.box5 p:nth-of-type(1) {font-size: 18px; margin-bottom: 15px;}
.box5 p:nth-of-type(2) {font-size: 14px;}

@media screen and (max-width : 1023px ){
	.box2 {width: 88%;}
}

@media screen and (max-width : 768px ){
	
	#mainArea {width: 100%; min-height:calc(100% - 40px);}
	
	.box2 { width: 92%;}
	.box2 h2 img {height:12vw; position: relative;}
	
	#tab{width: 100%; margin-top: 15vw; flex-direction: column; font-size: 16px;  position: relative;}
	#tab li{width: 100%; text-align: left; padding: 20px 0; display: block; position: relative;}
	#tab li:after{content: ''; width: 6px; height: 6px; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(135deg); position: absolute; top: calc(50% - 5px); right: 10px;}
	
	.box3, .box4, .box6 {width: 100%; float: none; margin-top: 80px;}
		
	.box4 .list p:nth-of-type(1) {width: 30%;}
	.box4 .list p:nth-of-type(2) {width: 35%;}
	.box4 .list p:nth-of-type(3) {width: 35%;}
	.box4 .list p:nth-of-type(3n+4) {width: 30%;}
	.box4 .list p:nth-of-type(3n+5) {width: 35%;}
	.box4 .list p:nth-of-type(3n+6) {width: 35%;}
	
}