270 lines
12 KiB
CSS
Executable File
270 lines
12 KiB
CSS
Executable File
.lj_contact_banner { padding-bottom: 80px;}
|
|
|
|
.lj_contact {background: #fff;}
|
|
.lj_contact_w { background:#f1f1f1; margin: auto;}
|
|
|
|
@media screen and (min-width:768px){
|
|
.lj_contact_w { padding: 40px 0 ;width:75%;}
|
|
}
|
|
|
|
@media screen and (min-width:640px) and (max-width:767px){
|
|
.lj_contact_w { padding: 20px 0 ;width:90%;}
|
|
}
|
|
|
|
@media screen and (max-width:639px){
|
|
.lj_contact_w { padding: 10px 0 ;width:96%;}
|
|
}
|
|
|
|
|
|
@media screen and (min-width:1800px){
|
|
.lj_content { padding: 0 192px;}
|
|
}
|
|
@media (min-width:1280px) and (max-width:1799px){
|
|
.lj_content { padding: 0 80px;}
|
|
}
|
|
|
|
@media (min-width:900px) and (max-width:1279px){
|
|
.lj_content { padding: 0 30px;}
|
|
}
|
|
|
|
@media (min-width:640px) and (max-width:899px){
|
|
.lj_content { width:39%; margin: 0 2em; display: inline-block; height: 320px;}
|
|
}
|
|
|
|
@media (max-width:639px){
|
|
.lj_content { width:80%; margin: 0 3em;}
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width:1400px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{width:35%; padding: 0 5em 2.6em; text-align: center;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:12%;font-size: 1em; padding-right: 40px; padding-top:5%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {width:30%;}
|
|
.lj_l_title:after {top:80%; right: 0;}
|
|
.lj_c_img:before{ height:55%;background: #cecece; width:1px; left:-6px; bottom: 0;}
|
|
.lj_c_img_03:before {height:48%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 26px;font-size: 0.9em;}
|
|
}
|
|
@media (min-width:1280px) and (max-width:1399px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{width:35%; padding: 0 3em 2.6em;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:13%;font-size: 1em; padding-right: 40px;padding-top:6%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {width:30%; }
|
|
.lj_l_title:after {top:80%; right: 0;}
|
|
.lj_c_img:before{ height:54%;background: #cecece; width:1px; left:-6px; bottom: 0;}
|
|
.lj_c_img_03:before {height:50%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 26px;font-size: 0.9em;}
|
|
}
|
|
@media (min-width:1024px) and (max-width:1279px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{width:30%; padding: 0 2.5em 2.6em;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:14%; padding-right: 30px;font-size: 1em;padding-top:5%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {width:40%; }
|
|
.lj_l_title:after {top:80%; right: 0;}
|
|
.lj_c_img:before{ height:48%;background: #cecece; width:1px; left:-6px; bottom: 0;}
|
|
.lj_c_img_03:before {height:50%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 20px;font-size: 0.9em;}
|
|
}
|
|
@media (min-width:900px) and (max-width:1023px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{width:28%; padding: 0 2.5em 2.6em;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:15%; padding-right: 30px;font-size: 1em;padding-top:5%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {width:40%; }
|
|
.lj_l_title:after {top:80%; right: 0;}
|
|
.lj_c_img:before{ height:45%;background: #cecece; width:1px; left:-6px; bottom: 0;}
|
|
.lj_c_img_03:before {height:50%;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 20px;font-size: 0.9em;}
|
|
}
|
|
@media (min-width:640px) and (max-width:899px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{ text-align: left; width:100%; margin:1em auto;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:100%; margin: auto; font-size: 1.1em; text-align: left;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {width:100%;text-align: left; }
|
|
.lj_l_title:after,.lj_l_title_02:after ,.lj_l_title_03:after { display: none;}
|
|
.lj_c_img:before,.lj_c_img_02:before{ display: none;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 20px;font-size: 0.9em;}
|
|
}
|
|
@media (max-width:639px){
|
|
.lj_c_img,.lj_c_img_02,.lj_c_img_03{ text-align: left; width:100%; margin:1em auto;}
|
|
.lj_l_title,.lj_l_title_02,.lj_l_title_03{width:100%; margin: auto; font-size: 1.5em;padding:2em 0 0; text-align: left;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03 {text-align: left; margin: auto; }
|
|
.lj_l_title:after,.lj_l_title_02:after,.lj_l_title_03:after { display: none;}
|
|
.lj_c_img:before,.lj_c_img_02:before,.lj_l_title_03:after{ display: none;}
|
|
.lj_r_text,.lj_r_text_02,.lj_r_text_03{ line-height: 24px;}
|
|
}
|
|
.lj_l_title { float: left; color: #002953; font-weight: 600; position: relative; }
|
|
.lj_l_title:after {content: ""; position: absolute; width:8px; height: 8px; border-radius: 8px; background: #01ba30; border: 2px solid #ceead4;}
|
|
.lj_c_img { float: left; position: relative;}
|
|
.lj_c_img:before {content: ""; position: absolute; }
|
|
.lj_r_text {float: left;}
|
|
.lj_l_title_02 {float: left; color: #002953; font-weight: 600; position: relative; }
|
|
.lj_l_title_02:after {content: ""; position: absolute; width:8px; height: 8px; right: 0; top:80%; border-radius: 8px; background: #ff6902; border: 2px solid #f2dfd0;z-index: 2;}
|
|
.lj_c_img_02 { float: left; position: relative; }
|
|
.lj_c_img_02:before {content: ""; position: absolute; height:100%; background: #cecece; width:1px; left:-6px; bottom: 0;z-index: 1;}
|
|
.lj_r_text_02 { float: left;}
|
|
.lj_l_title_03 { float: left; color: #002953;font-weight: 600; position: relative; }
|
|
.lj_l_title_03:after {content: ""; position: absolute; width:8px; height: 8px; right: 0;bottom:0; border-radius: 8px; background: #2ecad6; border: 2px solid #d0eae9; z-index: 2;}
|
|
.lj_c_img_03 { float: left; position: relative; }
|
|
.lj_c_img_03:before {content: ""; position: absolute; background: #cecece; width:1px; left:-6px; top: 0; z-index: 1}
|
|
.lj_r_text_03 { float: left; }
|
|
.lj_p {margin: 40px 0;}
|
|
.lj_contact_bg {position:relative;}
|
|
|
|
@media screen and (min-width:1600px){
|
|
.lj_contact_l { width: 74%; margin: auto;}
|
|
.lj_contact_l li{width: 25%;float: left;}
|
|
.lj_contact_text { left: 0; top:0;}
|
|
.lj_contact_text01 { left: 0; bottom:0;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 5%; line-height:28px; position: absolute;}
|
|
.li_contact_img { text-align: center;}
|
|
}
|
|
@media (min-width:1460px) and (max-width:1599px){
|
|
.lj_contact_l { width: 74%; margin: auto;}
|
|
.lj_contact_l li{width: 25%;float: left;}
|
|
.lj_contact_text { left: 0; top:0;}
|
|
.lj_contact_text01 { left: 0; bottom:0;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 3%; line-height:24px; position: absolute;}
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em;}
|
|
.li_contact_img { text-align: center;}
|
|
}
|
|
|
|
@media (min-width:1366px) and (max-width:1459px){
|
|
.lj_contact_l { width: 74%; margin: auto;}
|
|
.lj_contact_l li{width: 25%;float: left;}
|
|
.lj_contact_text { left: 0; top:0;}
|
|
.lj_contact_text01 { left: 0; bottom:0;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.8em; padding:0 3%; line-height:22px; position: absolute;}
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em;}
|
|
.li_contact_img { text-align: center;}
|
|
}
|
|
|
|
|
|
@media (min-width:1000px) and (max-width:1365px){
|
|
.lj_contact_l { width: 90%; margin: auto;}
|
|
.lj_contact_l li{width: 25%;float: left;}
|
|
.lj_contact_text { left: 0; top:0;}
|
|
.lj_contact_text01 { left: 0; bottom:0;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.8em; padding:0 3%; line-height:20px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
@media (min-width:850px) and (max-width:999px){
|
|
.lj_contact_l { width: 80%; margin: auto;}
|
|
.lj_contact_l li{width:44%; margin-right: 12%; float: left;}
|
|
.lj_contact_l li:nth-child(2n) {margin-right: 0;}
|
|
.lj_contact_text { left: 0; top:2%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 10%; line-height:26px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
@media (min-width:768px) and (max-width:849px){
|
|
.lj_contact_l { width: 90%; margin: auto;}
|
|
.lj_contact_l li{width:44%; margin-right: 12%; float: left;}
|
|
.lj_contact_l li:nth-child(2n) {margin-right: 0;}
|
|
.lj_contact_text { left: 0; top:2%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 10%; line-height:26px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
@media (min-width:640px) and (max-width:767px){
|
|
.lj_contact_l { width: 86%; margin: auto;}
|
|
.lj_contact_l li{width:44%; margin-right: 12%; float: left;}
|
|
.lj_contact_l li:nth-child(2n) {margin-right: 0;}
|
|
.lj_contact_text { left: 0; top:2%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 5%; line-height:26px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 0.9em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
|
|
@media (min-width:480px) and (max-width:639px){
|
|
.lj_contact_l { width: 96%; margin: auto;}
|
|
.lj_contact_l li{width:48%; margin-right: 4%; float: left;}
|
|
.lj_contact_l li:nth-child(2n) {margin-right: 0;}
|
|
.lj_contact_text { left: 0; top:2%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 5%; line-height:22px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 1.1em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
@media (min-width:360px) and (max-width:479px){
|
|
.lj_contact_l { width: 96%; margin: auto;}
|
|
.lj_contact_l li{width:48%; margin-right: 4%; float: left;}
|
|
.lj_contact_l li:nth-child(2n) {margin-right: 0;}
|
|
.lj_contact_text { left: 0; top:2%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:0.9em; padding:0 2%; line-height:18px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 1em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
|
|
|
|
@media (max-width:359px){
|
|
.lj_contact_l { width: 90%; margin: auto;}
|
|
.lj_contact_l li{width:85%; margin:10px auto;}
|
|
.lj_contact_text { left: 0; top:5%;}
|
|
.lj_contact_text01 { left: 0; bottom:10%;}
|
|
.lj_contact_text,.lj_contact_text01 {font-size:1em; padding:0 5%; line-height:24px; position: absolute; }
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { font-size: 1.1em; margin: auto;}
|
|
.li_contact_img { text-align: left;}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.li_contact_title,.li_contact_title02,.li_contact_title03,.li_contact_title04 { color: #fff; text-align: center; font-weight: 600; position: relative;line-height:40px;}
|
|
.li_contact_title:before,.li_contact_title02:before,.li_contact_title03:before,.li_contact_title04:before{content: ""; position: absolute; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;}
|
|
.li_contact_title { background: #00bb31; }
|
|
.li_contact_title:before {top:-10px; left:45%; border-bottom:10px solid #00bb31;}
|
|
.li_contact_title02 { background: #ff6900; }
|
|
.li_contact_title02:before {bottom:-10px; left:45%; border-top:10px solid #ff6900; z-index: 2;}
|
|
.li_contact_title03 { background: #963cbd; }
|
|
.li_contact_title03:before {top:-10px; left:45%; border-bottom:10px solid #963cbd;}
|
|
.li_contact_title04 { background: #2dccd3;}
|
|
.li_contact_title04:before {bottom:-10px; left:45%; border-top:10px solid #2dccd3;z-index: 2;}
|
|
.li_p {padding-top: 20px;}
|
|
.li_color {color: #009fdf; text-decoration: underline;}
|
|
|
|
/*icon*/
|
|
@media screen and (min-width:1280px){
|
|
.lj_icon {width:90%; margin: auto;}
|
|
.lj_icon li {width:33.333%;font-size: 1em;text-align: center;}
|
|
.li_icon_p {padding:0 0 30px;}
|
|
}
|
|
|
|
@media (min-width:800px) and (max-width:1279px){
|
|
.lj_icon {width:90%; margin: auto;}
|
|
.lj_icon li {width:33.33%; padding: 20px 0;font-size: 0.9em;text-align: center;}
|
|
.li_icon_p {padding:0 0 20px;}
|
|
}
|
|
|
|
@media (min-width:640px) and (max-width:799px){
|
|
.lj_icon {width:98%; margin: auto;}
|
|
.lj_icon li {width:50%; padding: 15px 0;font-size: 0.9em;text-align: center;}
|
|
.li_icon_p {padding:0 0 10px; }
|
|
}
|
|
|
|
|
|
|
|
@media (min-width:480px) and (max-width:639px){
|
|
.lj_icon {width:98%; margin: auto;}
|
|
.lj_icon li {width:49%; padding: 15px 0;font-size: 0.9em;text-align: center;}
|
|
.li_icon_p {padding:0 0 10px; }
|
|
}
|
|
|
|
@media (max-width:479px){
|
|
.lj_icon {width:90%; margin: auto;}
|
|
.lj_icon li {width:90%; padding: 15px 0;font-size: 0.9em;text-align: center;}
|
|
.li_icon_p {padding:0 0 10px; }
|
|
}
|
|
|
|
.lj_icon li { float: left; }
|