Difference between revisions of "Team:SSTi-SZGD/css/Apply Design"

Line 27: Line 27:
 
.Core p:nth-last-of-type(1){ padding: 35px 75px;}
 
.Core p:nth-last-of-type(1){ padding: 35px 75px;}
 
.Core .img{ padding: 0 100px;}
 
.Core .img{ padding: 0 100px;}
−
.Core .img img{ width: 100%;}
+
.Core .img img{ width: 60%;}
  
 
.Product{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;}
 
.Product{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;}
Line 42: Line 42:
 
.Product .Proposed .Enzyme span:nth-of-type(1){ width: 345px;}
 
.Product .Proposed .Enzyme span:nth-of-type(1){ width: 345px;}
 
.Product .Proposed .Enzyme .section{ margin-top: 35px;}
 
.Product .Proposed .Enzyme .section{ margin-top: 35px;}
−
.Product .Proposed .Enzyme .img{ width: 1000px;}
+
.Product .Proposed .Enzyme .img{ width: 60%;}
  
 
.Product .Proposed .Whole span:nth-of-type(1){ width: 380px;}
 
.Product .Proposed .Whole span:nth-of-type(1){ width: 380px;}

Revision as of 06:57, 30 October 2017

body{ min-width: 1024px; min-height: 489px; position: relative;}

.SSTi-SZGD{ background: url(SSTi-SZGD_Apply_Design_banner.png) no-repeat top center; padding-top: 15px; max-height: 910px; position: relative;}

/*custom header*/ .header .nav .Project span,.header .nav .Project li:nth-of-type(4) a{ color: #FAEE0D;}

/*Content*/ .Content{ background: white; width: 100%; text-align: justify; font-size: 1.8rem;font-family: "Arial Regular";font-weight: bold;} .Content p{ line-height: 37.5px;} .Content .left{ float: left;} .Content .right{ float: right;} .Content img{ width: inherit;} .Content .img{ width: 1360px; margin: 40px auto;} .Content .Title{ font-size: 4rem; color: white; background: #786a52; height: 78px; padding: 0 40px; line-height: 75px;} .Content .Headline{ font-size: 2.5rem; margin: 40px 0; padding-left: 100px; font-weight: 600;} .Content .SubTitle span{ display: inline-block;} .Content .SubTitle span:nth-of-type(1){ font-size: 3.1rem; color: white; background: #bbb4a8; height: 55px; line-height: 47.41px; padding-left: 15px;} .Content .SubTitle span:nth-of-type(2){ font-size: 2.7rem; color: #bbb197; line-height: 49.59px;}

.Overview{ width: 1360px; margin: auto; border-top: 3px solid #786a52;} .Overview .Title{ width: 280px;} .Overview p:nth-last-of-type(1){ padding: 35px 75px;}

.Core{ width: 1360px; margin: auto; border-top: 3px solid #786a52;} .Core .Title{ width: 650px;} .Core p:nth-last-of-type(1){ padding: 35px 75px;} .Core .img{ padding: 0 100px;} .Core .img img{ width: 60%;}

.Product{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;} .Product .Title{ width: 385px;} .Product .section{ margin: 20px 0; padding-left: 100px;}

.Product .Proposed .OPP{ height: 350px;} .Product .Proposed .OPP .left{ width: 610px; margin-top: 60px; margin-left: 150px;} .Product .Proposed .OPP .left p{ font-size: 2.5rem; line-height: 75px;} .Product .Proposed .OPP .left p:nth-of-type(1){ font-size: 3.3rem;} .Product .Proposed .OPP .right{ width: 256px; margin-top: 50px; margin-right: 250px;}

.Product .Proposed .Enzyme{ height: 900px;} .Product .Proposed .Enzyme span:nth-of-type(1){ width: 345px;} .Product .Proposed .Enzyme .section{ margin-top: 35px;} .Product .Proposed .Enzyme .img{ width: 60%;}

.Product .Proposed .Whole span:nth-of-type(1){ width: 380px;} .Product .Proposed .Whole .Top{ height: 380px;} .Product .Proposed .Whole .Top .left{ width: 780px; padding-top: 70px;} .Product .Proposed .Whole .Top .right{ width: 220px; margin-right: 200px; padding-top: 50px;}

.Product .Proposed .Whole .Bottom{ height: 380px;} .Product .Proposed .Whole .Bottom .left{ width: 660px;} .Product .Proposed .Whole .Bottom .right{ width: 600px; padding-top: 50px;}

.Product .Proposed .Whole .considerations{ height: 460px;} .Product .Proposed .Whole .considerations .Headline{ padding: 0;} .Product .Proposed .Whole .considerations .section{ margin: 40px 0; padding: 0;} .Product .Proposed .Whole .considerations .left{ width: 48%;} .Product .Proposed .Whole .considerations .right{ width: 48%;}

.Product .Proposed .Whole .Environment{ height: 460px;} .Product .Proposed .Whole .Environment .Headline{ padding: 0;} .Product .Proposed .Whole .Environment .left{ width: 43%;} .Product .Proposed .Whole .Environment .right{ width: 52%;}

.Market{ width: 1360px; margin: 50px auto; border-top: 3px solid #786a52;} .Market .Title{ width: 385px;}

.Market .Target .Headline{ padding-left: 40px;} .Market .Target .Top{ height: 360px;} .Market .Target .Top .left{ width: 48%; padding-left: 40px;} .Market .Target .Top .right{ width: 48%;} .Market .Target .Bottom{ height: 560px;} .Market .Target .Bottom .left{ width: 48%; padding-left: 40px;} .Market .Target .Bottom .right{ width: 550px; padding-top: 100px; margin-right: 50px;} .Market .Target .section{ margin-left: 40px; margin-top: 20px;}

.Market .Marketing .Headline{ padding-left: 40px;} .Market .Marketing .left{ width: 48%; padding-left: 40px;} .Market .Marketing .right{ width: 48%;}

.Market .SWOT .Headline{ padding-left: 40px;} .Market .SWOT .section{ margin-left: 40px; margin-top: 20px;}

.Evaluation{ width: 1360px; margin: 50px auto 0 auto; padding-bottom: 50px; border-top: 3px solid #786a52;} .Evaluation .Title{ width: 505px;}

.Evaluation .Social{ height: 480px;} .Evaluation .Social .Headline{ padding-left: 40px;} .Evaluation .Social .section{ margin-left: 40px; margin-top: 20px;} .Evaluation .Social .left{ width: 54%;} .Evaluation .Social .right{ width: 38%;}

.Evaluation .Areas{ height: 350px;} .Evaluation .Areas .Headline{ padding-left: 40px;} .Evaluation .Areas .section{ margin-left: 40px; margin-top: 20px;} .Evaluation .Areas .left{ width: 54%;} .Evaluation .Areas .right{ width: 38%;}


/*--1920--*/ @media only screen and (max-width: 1920px) { .Content{ font-size: 1.3rem;} .Content p{ line-height: 26.5px;} .Content .img{ width: 1000px; margin: 20px auto;} .Content .Title{ font-size: 2.9rem; height: 58px; padding: 0 20px; line-height: 53px;} .Content .Headline{ font-size: 1.7rem; padding-left: 55px;} .Content .SubTitle span:nth-of-type(1){ font-size: 2.2rem; height: 40px; line-height: 33.73px; padding-left: 10px;} .Content .SubTitle span:nth-of-type(2){ font-size: 1.9rem; line-height: 35.28px;}

.Overview{ width: 1000px;} .Overview .Title{ width: 200px;} .Overview p:nth-last-of-type(1){ padding: 25px 55px;}

.Core{ width: 1000px;} .Core .Title{ width: 465px;} .Core p:nth-last-of-type(1){ padding: 25px 55px;}

.Product{ width: 1000px;} .Product .Title{ width: 275px;} .Product .section{ margin: 20px 0; padding-left: 55px;}

.Product .Proposed .OPP{ height: 300px;} .Product .Proposed .OPP .left{ width: 425px; margin-top: 60px; margin-left: 150px;} .Product .Proposed .OPP .left p{ font-size: 1.7rem; line-height: 53px;} .Product .Proposed .OPP .left p:nth-of-type(1){ font-size: 2.3rem;} .Product .Proposed .OPP .right{ width: 178px; margin-top: 50px; margin-right: 150px;}

.Product .Proposed .Enzyme{ height: 700px;} .Product .Proposed .Enzyme span:nth-of-type(1){ width: 245px;} .Product .Proposed .Enzyme .img{ width: 800px;}

.Product .Proposed .Whole span:nth-of-type(1){ width: 270px;} .Product .Proposed .Whole .Top{ height: 280px;} .Product .Proposed .Whole .Top .left{ width: 600px;} .Product .Proposed .Whole .Top .right{ width: 160px;}

.Product .Proposed .Whole .Bottom{ height: 300px;} .Product .Proposed .Whole .Bottom .left{ width: 460px;} .Product .Proposed .Whole .Bottom .right{ width: 500px; padding-top: 50px;}

.Product .Proposed .Whole .considerations{ height: 340px;}

.Product .Proposed .Whole .Environment{ height: 300px;}

.Market{ width: 1000px;} .Market .Title{ width: 275px;}

.Market .Target .Top{ height: 260px;} .Market .Target .Bottom{ height: 400px;} .Market .Target .Bottom .right{ width: 450px; margin: 0; padding-top: 40px;}

.Evaluation{ width: 1000px;} .Evaluation .Title{ width: 360px;}

.Evaluation .Social{ height: 360px;}

.Evaluation .Areas{ height: 250px;} }

/*--1190--*/ @media only screen and (max-width: 1190px) { html{ font-size: 50%;} .header .logo span{ margin: 15px 0;} .header .nav .Project{ width: 100px;} .header .nav .Application{ width: 100px;} .header .nav .Human_Practices{ width: 140px;} .header .nav .Achievement{ width: 120px;} .header .nav .Team{ width: 95px;} .header .nav .mainnav span{ padding-top: 8.5px; margin-bottom: 21px;} }