/* -------- 메인 컨텐츠 :: 컨텐츠1(INDUSTRIES) -------- */ #mainContent1{padding:100px 0 105px; } .accordion-list-box{margin-top:60px} .accordion-list .accordion-item{position:relative; overflow:hidden; } .accordion-list .accordion-item .accordion-inner{display:block; position:relative; width:100%; height:100%; top:0; left:0; margin:0 2px; cursor:pointer;} .accordion-list .accordion-item.active .accordion-inner{cursor:default} @media all and ( min-width: 1367px ){ .accordion-list-box .accordion-list{height:670px} .accordion-list .accordion-item{width:250px;} } @media all and ( min-width: 1025px ){ .accordion-list-box .accordion-list{ display: table; width:100%; height: 500px; white-space:nowrap; overflow:hidden; font-size:0;} .accordion-list .accordion-item{width:144px; display:table-cell; height:100%; white-space:nowrap; } /* 접힌 li의 width*/ .accordion-list .accordion-item .accordion-m-img{display:none;} } /* 아코디언 :: 타이틀 및 내용 */ .accordion-item .accordion-inner .accordion-tit{ position:absolute; top:60px; left:50%; color:#222; font-size:24px; font-weight:500; letter-spacing:-0.25px; text-align:center; z-index:1; opacity:1.0;filter:Alpha(opacity=100); transition:all 0.3s; transform: translateX(-50%); writing-mode:tb-rl } .accordion-item .accordion-inner .accordion-tit em{display:inline-block; transform:rotate(-90deg); height:24px} .accordion-item .accordion-info-box{position:absolute; left:0; right:0; top:0px;} .accordion-item .accordion-info-box dl{ position:relative; z-index:1; padding:8.8% 8.8% 0; opacity:0;filter:Alpha(opacity=0); -webkit-transition-delay:0s; -moz-transition-delay:0s; -o-transition-delay:0s; -ms-transition-delay:0s; transition-delay:0s; z-index:1; } .accordion-item .accordion-info-box dl dt{font-size:46px; font-weight:500; letter-spacing:-0.1px; margin-bottom:25px; color:#222} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size:16.5px; font-weight:400; letter-spacing:-0.5px; color:#5d5d5d; line-height:1.81; white-space:normal} .accordion-item .accordion-info-box dl .accordion-info-txt .txt{display:block} .accordion-item .accordion-info-box dl .industry-view-more{display:block; position:relative; text-transform:uppercase} .accordion-item .accordion-info-box dl .industry-view-more:after{position:absolute; content:""; width:100%; height:100%; background-color:transparent; top:0; left:0; z-index:1; margin-left:0; transition-delay:0.2s} .accordion-item .accordion-info-box dl .industry-view-more a{display:inline-block; font-weight:700; font-size:12px; letter-spacing:0; color:#a2a2a2; margin-top:20px} .accordion-item .accordion-info-box dl .industry-view-more a .arrow{display:inline-block; width:48px; height:27px; background:url("/images/icon/cm_style_arrow04.png") no-repeat; background-size:contain !important; margin-left:6px; vertical-align:middle} /* 아코디언 :: 타이틀 및 내용 Active */ .accordion-item.active .accordion-inner:after{opacity:0;filter:Alpha(opacity=0); } .accordion-item.active .accordion-info-box dl .industry-view-more:after{margin-left:50%} .accordion-item.active .accordion-inner .accordion-tit{ opacity:0;filter:Alpha(opacity=0); transition:all 0s; } .accordion-item.active .accordion-inner dl{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.3s 0.2s; -moz-transition:all 0.3s 0.2s; -o-transition:all 0.3s 0.2s; -ms-transition:all 0.3s 0.2s; transition:all 0.3s 0.2s; } /* -------- 메인 컨텐츠 :: 컨텐츠1(INDUSTRIES) -------- */ @media all and ( max-width: 1380px ){ .accordion-list .accordion-item .accordion-inner{background-size:cover !important} } @media (max-width: 1024px){ .accordion-list-box .accordion-list{/*max-width:800px;*/ margin:0px auto;} .accordion-list .accordion-item{display:block; width:100% !important; height:auto; margin-top:0px; padding-left:0; } .accordion-list .accordion-item:first-child{margin-top:0} .accordion-list .accordion-item .accordion-inner{ position:relative} .accordion-list .accordion-item .accordion-m-img{ height:0; padding-top:110px; background-size:cover !important; -webkit-transition:padding 0.4s; -moz-transition:padding 0.4s; -o-transition:padding 0.4s; -ms-transition:padding 0.4s; transition:padding 0.4s; } .accordion-list .accordion-item.active .accordion-inner{cursor:default;} .accordion-list .accordion-item.active .accordion-m-img{padding-top:55%} .accordion-item .accordion-inner .accordion-tit{left:5%; writing-mode:rl-tb; transform:translateY(-50%); top:50%} .accordion-item .accordion-inner .accordion-tit em{display:contents; transform:inherit; padding:0; height:auto} /* 아코디언 :: 타이틀 및 내용 */ .accordion-item .accordion-info-box:before{height:100%;} .accordion-item .accordion-info-box dl{padding:6%} } @media all and ( max-width: 700px ){ #mainContent1{padding:50px 0} .accordion-list-box{margin-top:15px} .accordion-list .accordion-item .accordion-m-img{padding-top:80px;} .accordion-item .accordion-inner .accordion-tit{font-size:17px; margin:0; color:#fff;} .accordion-tit br {display:none;} /* 아코디언 :: 타이틀 및 내용 */ .accordion-item .accordion-info-box dl{padding:4%} .accordion-item .accordion-info-box dl dt{font-size:20px !important; margin-bottom:15px; font-weight:bold; letter-spacing:-0.1px; color:#fff; } .accordion-item .accordion-info-box dl dt strong {display:block; font-size:30px; margin-bottom:10px; } .accordion-item .accordion-info-box dl dd {margin:0;} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size:13px; color:#fff;} .accordion-item .accordion-info-box dl .industry-view-more a{font-size:11px; margin-top:15px; color:#fff; border:2px solid #fff; text-decoration:none; padding:5px 20px; border-radius:35px; line-height:18px;} .accordion-item .accordion-info-box dl .industry-view-more a .arrow{width:39px; height:22px} .accordion-list-box .accordion-list {padding:0;} } @media all and ( max-width: 480px ){ .accordion-list .accordion-item .accordion-m-img{background-size:auto !important} /* 아코디언 :: 타이틀 및 내용 */ .accordion-list .accordion-item.active .accordion-m-img{padding-top:72%} .accordion-item .accordion-info-box dl dt{font-size:25px} .accordion-item .accordion-info-box dl .accordion-info-txt{font-size:12px} }