/* Scss Document */ @import "setting"; /* =============== hero =============== */ #hero { background-color: #D6E6F0; width: 100%; } #hero .inner { background: url(../img/hero.jpg) no-repeat center bottom; margin: 3rem auto 0 auto; padding: 2rem; text-align: center; max-width: 1400px; } .mainCopy { font-size: 1.5rem; letter-spacing: .3rem; margin: 3rem 0 27rem 0; @include max980 { font-size: 1.2rem; letter-spacing: 0; } } #hero .inner .text { display: inline-block; } #hero .inner p { font-size: 1.5rem; } #hero .inner .bt { background: url(../img/arrow-simple-right.png) no-repeat 80% 50%; background-size: .8rem; background-color: #E12A4A; font-size: 1.2rem; text-align: center; width: 30%; margin: 0 auto; @include max980 { background: url(../img/arrow-simple-right.png) no-repeat 90% 50%; background-size: .8rem; background-color: #E12A4A; width: 85%; } } #hero .inner .bt a { color: #FFF; display: block; padding: 1rem; } #hero .inner .bt a:hover { background-color: rgba(255,255,255,0.3); } /* =============== end hero =============== */ /* =============== middle content =============== */ #middle { background-color: #fff; } #middle .inner{ background: url(../img/middle.png) no-repeat 80% -15%; background-size: 20%; color: #004F98; max-width: 980px; margin: 0 auto; padding: 4rem 23rem 4rem 0; @include max980 { background: url(../img/middle.png) no-repeat 80% -15%; background-size: 23%; padding: 2rem 25rem 2rem 2rem; } @include max767 { background: url(../img/middle.png) no-repeat 50% 12rem; background-size: 30%; margin: 0 auto; padding: 2rem 2rem 40% 2rem; } @include max640 { background: url(../img/middle.png) no-repeat 50% 120%; background-size: 33%; margin: 0 auto; padding: 2rem 2rem 60% 2rem; } @include max375 { background: url(../img/middle.png) no-repeat 50% 105%; background-size: 33%; margin: 0 auto; padding: 2rem 2rem 60% 2rem; } } h2 .sub-copy { font-weight: bold; font-size: 1rem; } h2 .text { display: inline-block; font-size: 1.8rem; letter-spacing: .2rem; } #middle .inner .explain { font-size: .8rem; padding: 0 10% 0 0; @include max767 { padding: 0 0 0 0; } } #middle .inner .text { @include max980{ font-size: 1.8rem; } @include max767 { display: inline; font-weight: bold; font-size: 1.6rem; } } @media screen and (max-width: 767px) { #middle .inner .sub-copy { font-size: .9rem; } } /* =============== end middle content =============== */ /* =============== bottom content =============== */ #bottom { background-color: #5084C4; color: #004F98; } #bottom .inner { max-width: 1400px; padding: 2rem 0; @include max767 { margin: 0 5%; width: auto; } } #bottom .inner .content { max-width: 980px; margin: 0 auto; width: auto; } #bottom .inner .content h2 { margin: 0 auto; text-align: center; } #bottom .inner .content h3 { font-size: 2rem; font-weight: bold; letter-spacing: .2rem; margin: 2rem 0 1rem 0; } .row { margin: 0; } #bottom .point { color: #FFF; margin: 2rem 0; letter-spacing: .13rem; } #bottom .detail { padding: 0 1rem; text-align: center; @include max980 { padding: 0 2rem; } @include max767 { padding: 0 5%; } } #bottom .detail h4 { font-size: 1.2rem; border-bottom: #fff 1px solid; padding: .3rem; margin: 1rem 0 0 0; } #bottom .detail h3, #bottom .detail h4, #bottom .detail p{ text-align: left; } @media screen and (max-width: 640px) { } @media screen and (max-width: 375px) { } /* =============== end bottom content =============== */ /* =============== foot content =============== */ #foot-content { background: url(../img/foot_content-bg.png) no-repeat 50% 50%; background-size: 2000px auto; background-color: #1C1022; letter-spacing: .1rem; padding: 3rem; @include max767 { background: url(../img/foot_content-bg.png) no-repeat 50% 50%; background-size: cover; } @include max640 { padding: 3rem 1rem; } } #foot-content .inner { background-color: rgba(64,33,15,0.85); border-radius: 20px; max-width: 800px; margin: 0 auto; } #foot-content .inner .content { background: url(../img/aes_security.png) no-repeat 95% 50%; background-size: 8rem; color: #FFF; padding: 2rem 20% 2rem 2rem; @include max767 { background: url(../img/aes_security.png) no-repeat 95% 50%; background-size: 6rem; padding: 2rem 20% 2rem 2rem; } @include max640 { padding: 2rem 23% 2rem 2rem; } @include max480 { padding: 2rem 27% 2rem 2rem; } @include max375 { background: url(../img/aes_security.png) no-repeat 95% 50%; background-size: 5rem; padding: 2rem 30% 2rem 1rem; } } #foot-content .inner .content h3 { font-size: 1.5rem; margin: 0 0 1rem 0; @include max640 { font-size: 1.3rem; } @include max375 { font-size: 1.2rem; } } /* =============== end foot content =============== */