#contents.company .section_top .back_container{background-image: url(../images/about/company/top_bg.jpg);background-position: 50% 0%;}
#contents.company .section_top.contact .back_container{background-image: url(../images/about/company/contact_top_bg.jpg);background-position: 50% 0%;}

#contents.company .section_top .section_inner .text_container{position: absolute; top:50%;margin-top: -105px;}

#contents.company .section{padding: 150px 0;}
#contents.company .section .inner{max-width: 1080px;margin: 0 auto;}
#contents.company .section .inner h3{font-size: 32px;line-height: 36px;text-align: center;}
#contents.company .section .inner p{font-size: 20px;line-height: 34px;color: #666666;text-align: center;padding:15px 15px 0;box-sizing: border-box;}
#contents.company .section .intro p{text-align: left;}
#contents.company .section.intro .inner ul{max-width:1080px;margin: 75px auto 0;text-align: center; display: inline-block;}
#contents.company .section.intro .inner ul li{position: relative;float:left;margin:0 20px;border:2px solid #f0f0f0;background: #fff; width:calc((100% - 132px) / 3);height: 230px;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;padding: 46px 0}
#contents.company .section.intro .inner ul li:before{content: '';background: #fff;position: absolute;top:-2px;left:-2px;width: 3px;height: 3px;background: #74b0b6;}
#contents.company .section.intro .inner ul li:after{content: '';background: #fff;position: absolute;top:-2px;right:-2px;width: 3px;height: 3px;background: #74b0b6;}
#contents.company .section.intro .inner ul li >span{display: block;position: absolute;bottom:0;left:0;right:0;}
#contents.company .section.intro .inner ul li >span:before{content: '';background: #fff;position: absolute;bottom:-2px;left:-2px;width: 3px;height: 3px;background: #74b0b6;}
#contents.company .section.intro .inner ul li >span:after{content: '';background: #fff;position: absolute;bottom:-2px;right:-2px;width: 3px;height: 3px;background: #74b0b6;}
#contents.company .section.intro .inner ul li .tit{position: relative;font-size: 24px;line-height: 27px;padding-bottom: 28px;color: #62b134;}
#contents.company .section.intro .inner ul li .tit:after{content: '';position: absolute;left:50%;bottom:0;width: 24px;height: 1px;background:#62b134;margin-left: -12px; }
#contents.company .section.intro .inner ul li .desc{font-size: 18px;line-height: 28px;margin-top: 28px;padding: 0 15px;}
#contents.company .section.intro .pattern{position: absolute;}
#contents.company .section.intro .pattern1_1{top:-30px;left: 50%;margin-left: -620px;}
#contents.company .section.intro .pattern1_2{top:300px;left: 50%;margin-left: 300px;}

#contents.company .section.brand_intro{background: #f7f6f5;}
#contents.company .section .inner .brand_list{max-width: 1080px;margin: 0 auto}
#contents.company .section .inner .brand_list{overflow: hidden}
#contents.company .section .inner .brand_list li{float: left;margin-top: 100px;width:calc((100% - 20px) / 2);}
#contents.company .section .inner .brand_list li.even{float: right;}
#contents.company .section .inner .brand_list li .img{float: left;width:240px;}
#contents.company .section .inner .brand_list li .text{float: left;padding-left: 30px;width:calc(100% - 270px)}
#contents.company .section .inner .brand_list li .text .tit{font-size: 18px;line-height: 26px;letter-spacing: -0.3px;padding-bottom: 20px;}
#contents.company .section .inner .brand_list li .text .desc{font-size: 14px;line-height: 26px;letter-spacing: -0.8px;color: #666666;}
#contents.company .section .inner .brand_list li .text .down_area{text-align: left;margin-top: 20px;}
#contents.company .section .inner .brand_list li .text .down_area a{border:0;text-align: left;border-radius: 0;width: auto;padding-right: 18px;margin-right: 30px;}
#contents.company .section .inner .brand_list li .text .down_area a.btn_ai:after{right: 0px;}
#contents.company .section .inner .brand_list li .text .down_area a.btn_png:after{right: 0px;}
#contents.company .section .inner .brand_list li .text .down_area a:hover{background:#fff;color: #333;}
#contents.company .section .inner .brand_list li .text .down_area a:hover:after{background-position: 0 0px;}
#contents.company .section .inner .brand_list li{height:221px;}
#contents.company .section .inner .brand_list li.dono .tit{font-size:17px;}
#contents.company .section .inner .brand_list li{position:relative;}

#contents.company .section.mission{padding-top: 390px;}
#contents.company .section.mission .bg{position: absolute;top:0;left:0;right:0;height: 690px; background:#fff url(../images/about/company/mission_bg.jpg) no-repeat center top fixed;background-size: cover}
#contents.company .section.mission .inner{position: relative; background: #fff;padding: 100px 0 0}
#contents.company .section.mission .inner .mission_map{padding-top: 70px;  text-align: center;}

#contents.company .section.vision{padding: 0;}
#contents.company .section.vision .inner{position: relative;height: 620px; overflow: visible}
#contents.company .section.vision .bg{position: absolute;top:0;left:0;right:0;height: 620px; background:#fff url(../images/about/company/vision_bg.jpg) no-repeat center top fixed;background-size: cover;}
#contents.company .section.vision ul li{  box-shadow: 0px 4px 18px 0 rgba(60,74,66,0.2);position: absolute;right: 0;bottom:-60px;z-index: 1;overflow: hidden;width: 60%;height: 208px;
    background-image: -webkit-linear-gradient(to left, #74c3cb, #72d49d);
    background-image: -moz-linear-gradient(to left, #74c3cb, #72d49d);
    background-image: -o-linear-gradient(to left, #74c3cb, #72d49d);
    background-image: linear-gradient(to left, #74c3cb, #72d49d);

    color: #fff;box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;padding: 50px;font-size: 16px;line-height: 45px;}
#contents.company .section.vision ul li:first-child{left:0;bottom:270px;width: 60%}
#contents.company .section.vision ul li .cj_title_medium{font-size: 35px;padding-top: 15px;letter-spacing: 0.2px}
#contents.company .section.vision ul li .cj_title_medium em{font-size: 42px;}
#contents.company .section.vision ul li .ico{position: absolute;right:-100px;top:-5px;}
#contents.company .section.vision ul li:first-child .ico{right: 25px;top:30px;}
#contents.company .section.ceo{padding: 75px 0 150px;}
#contents.company .section.ceo .inner{position: relative;/*background:#fff;*/z-index: 3;padding-top: 120px;  max-width: 1100px;}
#contents.company .section.ceo .inner p{font-size: 24px;line-height: 38px;color: #62b134;}
#contents.company .section.ceo .inner .ceo_area{position: relative;z-index: 2;overflow: hidden;margin: 75px auto 0;}
#contents.company .section.ceo .inner .ceo_area .img{float: left;  margin-top: 8px;width:422px;}
#contents.company .section.ceo .inner .ceo_area .text{float: right;font-size: 16px;line-height: 28px;color: #666;width:calc(100% - 442px)；padding-top: 20px;}
#contents.company .section.ceo .inner .ceo_area .text >span{display: block;height: 13px;}
#contents.company .section.ceo .inner .ceo_area .text em{font-size: 20px;color: #333333;}

#contents.company .section.ceo .pattern{position: absolute;z-index: 2;}
#contents.company .section.ceo .pattern4_1{top:270px;left: 50%;margin-left:190px;}
#contents.company .section.ceo .pattern4_2{top:780px;left: 50%;margin-left: -568px;}
#contents.company .section.ceo .pattern4_3{top:500px;left: 50%;margin-left: 515px;}

#contents.company .section.history{background: #f6f6f6;}
#contents.company .section.history .inner{max-width: none;}
#contents.company .section.history .history_list{position: relative; margin: 75px auto 0;}
#contents.company .section.history .history_list:before {content:'';width:1px;height:100%;background:#86bc88;position:absolute;left:50%;top:0px;}
#contents.company .section.history .history_list ul {position: relative;padding-top: 35px;width:1080px;margin: 0 auto;}
#contents.company .section.history .history_list ul:before {content:'';width:5px;height:5px;background:#86bc88;position:absolute;left:50%;top:0;margin-left:-2px;border-radius: 5px}
#contents.company .section.history .history_list ul:after {content:'';width:5px;height:5px;background:#86bc88;position:absolute;left:50%;bottom:0;margin-left:-2px;border-radius: 5px}
#contents.company .section.history .history_list ul li {position:relative;  padding: 0 0 0 50%}
#contents.company .section.history .history_list ul li .year_box {position:relative;}
#contents.company .section.history .history_list ul li.left_box {text-align:right;  padding: 0 50% 0 0}
#contents.company .section.history .history_list ul li.left_box .year_box {padding-right:85px;}
#contents.company .section.history .history_list ul li.left_box .year_box:before {content:'';width:3px;height:3px;border:1px solid #86bc88;background:#f6f6f6;border-radius:5px;position:absolute;right:-3px;top:5px;z-index:2;}
#contents.company .section.history .history_list ul li.left_box .year_box:after {content:'';width:75px;height:1px;position:absolute;right:0;top:7px;border-top:1px solid #c4e4c5;}
#contents.company .section.history .history_list ul li.right_box {text-align:left;}
#contents.company .section.history .history_list ul li.right_box .year_box {padding-left:85px;}
#contents.company .section.history .history_list ul li.right_box .year_box:before {content:'';width:3px;height:3px;border:1px solid #86bc88;background:#f6f6f6;border-radius:5px;position:absolute;left:-2px;top:5px;z-index:2;}
#contents.company .section.history .history_list ul li.right_box .year_box:after {content:'';width:75px;height:1px;position:absolute;left:0;top:7px;border-top:1px solid #c4e4c5;}
#contents.company .section.history .history_list ul li .year_box .year {font-size:18px;color:#62b134;line-height:21px;margin-bottom:5px;}
#contents.company .section.history .history_list ul li .year_box .year_text {font-size:16px;line-height:24px;letter-spacing: -0.5px;}

#contents.company .section.contact_text{padding:150px 0 30px}
#contents.company .section.map{padding:0 0 150px;}
#contents.company .section.map .inner.map{height: 600px;position: relative;}

#contents .section_top .section_inner .scroll_arrow{position: absolute;bottom:100px;left:0;width:27px;height:27px;border:2px solid #fff;border-radius: 100%;}
#contents .section_top .section_inner .scroll_arrow:after{content: '';position: absolute;top: 29px;left: 50%;height: 100px;width: 1px;background: rgba(255,255,255,0.5)}


.section_top .scroll_arrow .arrow{position:absolute;width:27px;height:27px;overflow: hidden}
.section_top .scroll_arrow .arrow_img{position:absolute;opacity: 0;width:27px;height: 7px;background-image: url("../images/about/company/ico_arw.png");background-size:27px 7px;}
.section_top .scroll_arrow .arrow_img:nth-child(1){
    -webkit-animation: arrow 1s 0s linear infinite ;
    -moz-animation: arrow 1s 0s linear infinite ;
    animation:  arrow 1s 0s linear infinite ;
}
.section_top .scroll_arrow .arrow_img:nth-child(2){
    -webkit-animation: arrow 1s 0.5s linear infinite ;
    -moz-animation: arrow 1s 0.5s linear infinite ;
    animation:  arrow 1s 0.5s linear infinite ;
}
@-webkit-keyframes arrow {
    0% {-webkit-transform: translate(0px, 5px);opacity: 0;}
    50% {-webkit-transform: translate(0px, 12px);opacity: 1;}
    100% {-webkit-transform: translate(0px, 18px);opacity: 0;}
}
@-moz-keyframes arrow{
    0% {-moz-transform: translate(0px, 5px);opacity: 0;}
    50% {-moz-transform: translate(0px, 12px);opacity: 1;}
    100% {-moz-transform: translate(0px, 18px);opacity: 0;}
}
@keyframes arrow {
    0% {transform: translate(0px, 5px);opacity: 0;}
    50% {transform: translate(0px, 12px);opacity: 1;}
    100% {transform: translate(0px, 18px);opacity: 0;}
}

@media all and (max-width:1024px){
    #contents .section_top .section_inner .scroll_arrow{left: 30px;}
    #contents.company .section{padding: 100px 0;}
    #contents.company .section .inner{max-width: 100%;width: calc(100% - 40px)}
    #contents.company .section.ceo{padding: 75px 0 100px;}
    #contents.company .section.history .history_list ul{width: 100%;}
}
@media all and (max-width:812px){
    #contents .section_top .section_inner .text_container p{font-size: 16px;}
    #contents.company .section.intro .inner ul li{height: 200px;padding: 20px 0;}
    #contents.company .section.intro .inner ul li .tit{font-size: 20px;padding-bottom: 10px;}
    #contents.company .section.intro .inner ul li .desc{font-size: 14px;}
    #contents.company .section .inner .brand_list li{margin-top: 30px;height:380px}
    #contents.company .section .inner .brand_list li .img{width: 100%}
    #contents.company .section .inner .brand_list li .img img{width: 100%}
    #contents.company .section .inner .brand_list li .text{padding: 10px 0 0;width: 100%;}
    #contents.company .section.mission{padding-top: 250px;}
}
@media all and (max-width:812px){
    #contents.company .section .inner h3{font-size: 24px;}
    #contents.company .section .inner p{font-size: 16px;}
    #contents.company .section.intro .inner ul{max-width: 100%;margin:35px auto 0; width: 100%; }
    #contents.company .section.intro .inner ul li{width: calc(100% - 4px);float: none;margin: 0 0 20px;height: auto;}
    #contents.company .section.intro .inner ul li .desc{margin-top: 10px;}
    #contents.company .section .inner .brand_list li{margin-top: 20px;height: auto;width: 100%;}
    #contents.company .section .inner .brand_list li .text .tit{font-size: 14px;padding-bottom: 10px;}
    #contents.company .section .inner .brand_list li .text .desc{font-size: 11px;}
    #contents.company .section.mission{padding-top: 150px;}
    #contents.company .section.vision .inner{height: 380px;}
    #contents.company .section.vision .bg{}
    #contents.company .section.vision ul li{height: auto;padding: 20px 0 20px 30px;font-size: 14px;line-height: 32px;box-sizing: border-box;width: 90%;}
    #contents.company .section.vision ul li .cj_title_medium{font-size: 24px;padding-top: 0}
    #contents.company .section.vision ul li:first-child{width: 90%;top: 30%;bottom: auto;}
    #contents.company .section.vision ul li:first-child .ico{top: 10px;left: 5%;}
    #contents.company .section.ceo .inner{padding-top: 50px;}
    #contents.company .section.ceo .inner p{font-size: 16px;}
    #contents.company .section.ceo .inner .ceo_area{margin: 30px auto 0;}
    #contents.company .section.ceo .inner .ceo_area .img{width: 100%;margin-top:0;}
    #contents.company .section.ceo .inner .ceo_area .img img{width: 100%;}
    #contents.company .section.ceo .inner .ceo_area .text{width: 100%;font-size: 14px;margin-top: 20px;}
    #contents.company .section.history{padding: 50px 0}
    #contents.company .section.history .history_list ul li.left_box .year_box{padding-right: 55px}
    #contents.company .section.history .history_list ul li.left_box .year_box:after{width: 45px;}
    #contents.company .section.history .history_list ul li.right_box .year_box{padding-left: 55px}
    #contents.company .section.history .history_list ul li.right_box .year_box:after{width: 45px;}
    #contents.company .section.history .history_list ul li .year_box .year_text{font-size: 13px}
}
@media all and (max-width:480px){
    #contents.company .section.contact_text{padding: 50px 0}
}