/* 공통 적용 */ ._mix_block_form{} .mixContainer{--fontColor:inherit;--hover-color:#1e1e1e;color:var(--fontColor);--mix-titleSize:16px;--mix-fontSize:14px;--mix-titlefont:var(--nanumSN);--mix-titlefont-weight:800;} @media screen and (max-width:780px) { } .mixContainer .mix-thumb-wrap{position:relative;overflow:hidden;} .mixContainer .mix-thumb{position:relative;display:block;width:100%;background-repeat:no-repeat;background-size:cover;background-position:center;/*border-radius:3px;*/background-color:#f5f5f5;overflow:hidden;} .mixContainer .mix-thumb:before{content:'';font-size:0;height:0;margin:0;width:100%;display:block;padding-top:var(--img-ratio);} /*.mixContainer * + .mix-con{margin-top:10px;}*/ #mix-from-wrap{} /*──────────────────────────────────────────────────────────────*/ /* #mix-form /*──────────────────────────────────────────────────────────────*/ #mix-form{margin:0 auto;width:100%;} #mix-form .mix-subSetting{display:flex;align-items:center;gap:25px;margin-bottom:15px;} #mix-form .mix-subSetting.mybox{--form-height:29px;padding:10px;border:1px solid var(--blue);background:rgba(255, 252, 217, 0.37) !important} #mix-form .img-ratio{--form-height:28px;--form-fontSize:12px;} #mix-form .img-ratio input{background:#fffee2 !important;border:1px solid rgba(0,0,0,0.1);font-family:var(--mont);} #mix-form .video-play{position:absolute;top:0;left:0;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:25px;height:27px;border-radius:2px;color:rgba(255,255,255,1);background:#1abc9c} #mix-form .video-play:before{content:'\e94b';font-family:'myfont';font-size:12px;font-weight:normal;} #mix-form .video-play + input{padding-left:25px;} #mix-form ul.mix-ul.numbering{counter-reset:list-number;} #mix-form ul.mix-ul.numbering li.mix-li:not(.sub-title){counter-increment:list-number;position:relative;} #mix-form ul.mix-ul.numbering li.mix-li:not(.sub-title):before{content:counter(list-number);position:absolute;top:-5px;left:-6px;z-index:4;width:15px;height:15px;border-radius:3px;color:#fff;background:var(--blue);font-size:10px;font-family:var(--mont); display:inline-flex;align-items:center;justify-content:center;opacity:0.9;} #mix-form .mix-thumb{background-color:rgba(0,0,0,0.03);cursor:pointer;position:relative;} #mix-form .mix-thumb:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;border:1.5px dashed rgba(0,0,0,0.2);} #mix-form .mix-thumb:hover{background-color:rgba(0,0,0,0.04);} #mix-form .mix-thumb input{display:none;} #mix-form .label-del{position:absolute;top:5px;right:5px;z-index:5;font-size:0;} #mix-form .label-del input[type="checkbox"] + span{width:21px;height:21px;margin:0;background:rgba(186,186,186,0.75);border-radius:4px;color:rgba(255,255,255,0.7);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;} #mix-form .label-del input[type="checkbox"] + span:before{content:'\e95c';font-family:'myfont';font-size:15px;margin:0;font-weight:normal;} #mix-form .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);} #mix-form .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;} #mix-form .mix-thumb .videoIcon{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:inline-flex;align-items:center;justify-content:center;} #mix-form .mix-thumb .videoIcon:after{content:'\e998';font-family:'myfont';font-size:30px;color:#ff6f6f;color:rgba(0,0,0,0.3);position:relative;z-index:3;width:66px;height:66px;border-radius:50%;background:#fff; display:inline-flex;align-items:center;justify-content:center;} #mix-form .upImg{} #mix-form .upImg .label-del{position:relative;top:auto;right:auto;z-index:5;font-size:0;} #mix-form .upImg .label-del input[type="checkbox"] + span{width:16px;height:16px;padding:0;background:rgba(186,186,186,0.8);cursor:pointer;} #mix-form .upImg .label-del input[type="checkbox"] + span:before{font-size:11px;margin:0;transform:scale(0.8);} #mix-form .upImg .label-del input[type="checkbox"]:hover + span{color:#fff;background:rgba(174,174,174,1);} #mix-form .upImg .label-del input[type="checkbox"]:checked + span{color:#fff;background:#ff5757;} #mix-form .mix-con{width:100%;display:flex;flex-wrap:wrap;gap:5px;--form-fontSize:11px;/*flex-direction:column;*/} /*#mix-form .mix-con > * + *{margin-top:5px;}*/ #mix-form .textareaSet{width:100%;display:flex;flex-direction:column;gap:0px;border-radius:5px;padding:10px;background:#fbfcfc;border:var(--form-border);} #mix-form .textareaSet textarea{width:100%;padding:0;border:0;border-radius:0;box-shadow:none !important;font-size:var(--mix-fontSize);font-family:var(--font-family);background:transparent !important;transition:none;} #mix-form .textareaSet hr{display:block;height:1px;background:transparent;border-top:1px dashed rgba(0,0,0,0.1);margin:8px 0;} #mix-form .textareaSet .text-subject{font-size:var(--mix-titleSize);font-family:var(--mix-titlefont);font-weight:var(--mix-titlefont-weight);--line-height:1.45em;line-height:var(--line-height);min-height:var(--line-height);max-height:calc(var(--line-height) * 5);} #mix-form .textareaSet .text-sub{--line-height:1.45em;min-height:calc(var(--line-height) * 2);max-height:calc(var(--line-height) * 5);} #mix-form .mix-con .inp_btn_name{/*background:#f9fafc;*/border-style:dashed} #mix-form .mix-con .inp_btn_url{flex:1;} #mix-form .mix-con .select_btn_option{} /*──────────────────────────────────────────────────────────────*/ /* .blockContainer[data-mix-type] /*──────────────────────────────────────────────────────────────*/ .blockContainer.hover-marker:before{content:'';position:absolute;top:0;left:0;z-index:19;width:100%;height:100%;background:rgba(66, 126, 255, 0.39);} .blockContainer[data-mix-type]{position:relative;--lineColor:rgba(71,78,103,0.2);--lineColor2:rgba(71,78,103,0.35);--lineColor3:rgba(71,78,103,0.5);--lineColor4:rgba(71,78,103,0.6);--lineColor5:rgba(71,78,103,0.7);} .blockContainer[data-mix-type] .blockInner{position:relative;} .blockContainer[data-mix-type] .blockInner.layout-mix{display:flex;flex-direction:column;gap:50px;} @media screen and (max-width:780px) { .blockContainer[data-mix-type] .blockInner.layout-mix{gap:30px;} } .blockContainer[data-mix-type] .textCon{display:flex;flex-direction:column;gap:20px;--bl-title-deco-color:transparent;} .blockContainer[data-mix-type] .textCon .block-title{position:relative;font-size:var(--bl-title-size);font-weight:600;line-height:1.4em;display:flex;flex-direction:column;align-items:flex-start;transition:all .2s ease-in-out;} @media screen and (max-width:1020px) { .blockContainer[data-mix-type] .textCon .block-title{font-size:calc(var(--bl-title-size) / 1.25);} } @media screen and (max-width:780px) { .blockContainer[data-mix-type] .textCon{gap:10px;} .blockContainer[data-mix-type] .textCon .block-title{font-size:22px;} } .blockContainer[data-mix-type] .textCon.center .block-title{align-items:center;} .blockContainer[data-mix-type] .textCon.right .block-title{align-items:flex-end;} .blockContainer[data-mix-type] .textCon .block-title p{background:var(--bl-title-deco-color);} .blockContainer[data-mix-type] .textCon .block-conSet{position:relative;display:flex;flex-direction:column;gap:35px;} @media screen and (max-width:780px) { .blockContainer[data-mix-type] .textCon .block-conSet{gap:10px;--block-conSet-mobile-size:14px;font-size:var(--block-conSet-mobile-size);} } .blockContainer[data-mix-type] .textCon .contents{position:relative;} .blockContainer[data-mix-type] .textCon.row{flex-direction:row;} .blockContainer[data-mix-type] .textCon.row .block-title{flex:1;display:flex;flex-direction:column;justify-content:center;padding-right:50px;} .blockContainer[data-mix-type] .textCon.row .block-conSet{flex:1;padding:30px 50px;display:flex;flex-direction:column;gap:25px;} .blockContainer[data-mix-type] .textCon.row .block-title + .block-conSet{border-left:2px solid var(--lineColor);} @media screen and (max-width:780px) { .blockContainer[data-mix-type] .textCon.row .block-title{flex:none;justify-content:flex-start;padding-top:15px;padding-right:10px;} .blockContainer[data-mix-type] .textCon.row .block-conSet{flex:1;padding:15px 10px;gap:15px;} .blockContainer[data-mix-type] .textCon.row .block-title + .block-conSet{border:0;} } .blockContainer[data-mix-type] .mixContainer a:hover .mix-thumb-wrap .mix-thumb{position:relative;transform:scale(1.1);} .blockContainer[data-mix-type] .mixContainer .mix-thumb-wrap{display:flex;align-items:center;justify-content:center;} .blockContainer[data-mix-type] .mixContainer .mix-thumb-wrap .video{position:absolute;z-index:9;width:100%;height:100%;object-fit:cover;} .blockContainer[data-mix-type] .mixContainer .mix-thumb{transition:all .2s ease-in-out;} .blockContainer[data-mix-type] .mixContainer .mix-thumb:hover{/*opacity:0.85*/} .blockContainer[data-mix-type] .mixContainer .mix-textSet{font-size:var(--mix-fontSize);font-weight:normal;display:flex;flex-direction:column;gap:calc(var(--mix-titleSize) / 2.5);line-height:1.45em;} .blockContainer[data-mix-type] .mixContainer .title{font-size:var(--mix-titleSize);font-family:var(--mix-titlefont);font-weight:var(--mix-titlefont-weight);line-height:1.3em;display:flex;flex-direction:column;align-items:flex-start;} .blockContainer[data-mix-type] .mixContainer a .title{line-height:1.4em;} .blockContainer[data-mix-type] .mixContainer .mix-textSet .title p{position:relative;padding-bottom:0.15em;} .blockContainer[data-mix-type] .title-hover .mix-textSet .title p{} .blockContainer[data-mix-type] .title-hover .mix-textSet .title p:after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--hover-color);transition:all 0.3s cubic-bezier(0.5,0,0,1.05);} .blockContainer[data-mix-type] .title-hover .mix-textSet .title p:nth-child(2):after{transition-delay:0.05s} .blockContainer[data-mix-type] .title-hover .mix-textSet .title p:nth-child(3):after{transition-delay:0.1s} .blockContainer[data-mix-type] .title-hover a:hover .mix-textSet .title p:after{width:100%;} .blockContainer[data-mix-type] a:hover .title-hover .mix-textSet .title p:after{width:100%;} .blockInner .textCon .contents * + .list-btn-set{margin-top:30px;} .blockInner .textCon .list-btn-set{margin-top:15px;display:flex;align-items:center;--btn-height:50px;--btn-radius:0;} @media screen and (min-width:781px) { .blockContainer[data-mix-type] .list-btn-set{--gap:20px;} } @media screen and (max-width:780px) { .blockContainer[data-mix-type] .list-btn-set{--gap:10px;} } .blockInner .textCon .list-btn-set a{flex:none;padding:0 20px;font-size:15px;font-weight:var(--bold);min-width:180px;transition:all .2s ease-in-out; display:inline-flex;align-items:center;justify-content:center;} .blockInner .textCon.center{text-align:center;} .blockInner .textCon.center .list-btn-set{justify-content:center;} .blockInner .textCon.right{text-align:right;} .blockInner .textCon.right .list-btn-set{justify-content:flex-end;} /*──────────────────────────────────────────────────────────────*/ /* mix-btn TYPE /*──────────────────────────────────────────────────────────────*/ .mix-btn{cursor:pointer;} .btn-type-01{} .btn-type-01 .mix-btn{margin-top:20px;position:relative;font-size:14px;font-weight:600;color:rgba(55,71,79,0.8);display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease-in-out;} .btn-type-01 .mix-btn:before{content:'\e921';font-family:'myfont';font-size:14px;background:rgba(55,71,79,0.3);color:#fff;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;transition:all .2s ease-in-out;} .btn-type-01 .mix-btn:hover, .btn-type-01 a:hover .mix-btn{color:var(--hover-color)} .btn-type-01 .mix-btn:hover:before, .btn-type-01 a:hover .mix-btn:before{background:var(--hover-color);} .btn-type-02{} .btn-type-02 .mix-btn{margin-top:20px;position:relative;font-size:14px;padding:1px 60px 0 15px;min-width:200px;height:42px;display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,0.4);transition:all .2s ease-in-out;} .btn-type-02 .mix-btn:after{content:'';display:inline-block;width:30px;height:1px;background:#424242;position:absolute;right:15px;transition:all 0.3s cubic-bezier(0.5,0,0,1.25);} .btn-type-02 .mix-btn:before{content:'';display:inline-block;width:6px;height:1px;background:#424242;transform:rotate(45deg);position:absolute;right:15px;margin-bottom:5px;transition:all 0.3s cubic-bezier(0.5,0,0,1.25);} .btn-type-02 .mix-btn:hover, .btn-type-02 a:hover .mix-btn{color:var(--blue);border-color:var(--blue);} .btn-type-02 .mix-btn:hover:before, .btn-type-02 .mix-btn:hover:after, .btn-type-02 a:hover .mix-btn:before, .btn-type-02 a:hover .mix-btn:after{background:var(--blue);right:5px;} .btn-type-03{} .btn-type-03 .mix-btn{margin-top:40px;padding:0 20px;height:41px;padding-top:1px;font-size:14px;font-weight:400;border-radius:30px;border:1px solid rgba(0,0,0,0.5);display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;} .btn-type-03 .mix-btn:not([class*='_popup-view']):after{content:'\e921';font-family:'myfont';font-size:14px;font-weight:normal;margin-left:10px;} .btn-type-03 .mix-btn:hover{background:#1b1b1b;color:#fff;border-color:#1b1b1b;} .btn-type-04{} .btn-type-04 .mix-btn{margin-top:25px;font-family:'Noto Sans KR', sans-serif;font-size:15px;display:inline-flex;align-items:center;gap:10px;transition:all .2s ease-in-out;border:1px solid red} .btn-type-04 .mix-btn:after{content:'\e921';font-family:'myfont';font-size:15px;font-weight:normal;opacity:1;transition:all .2s ease-in-out;} .btn-type-04 .mix-btn:hover:after, .btn-type-04 a:hover .mix-btn:after{margin-left:10px;} .btn-type-05{} .btn-type-05 .mix-btn{margin-top:25px;font-family:'Noto Sans KR', sans-serif;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:15px;color:inherit;transition:all .2s ease-in-out;} .btn-type-05 .mix-btn:before{content:'\e921';font-family:'myfont';font-size:13px;font-weight:normal;width:36px;height:36px;color:#fff;background:#656f77;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .2s ease-in-out;} li.mix-li{position:relative;} /* ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ MIX ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ */ /*──────────────────────────────────────────────────────────────*/ /* mix-01 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-01"]{position:relative;--padding-ratio:17%;--gap:60px;transition:all .2s ease-in-out;} [data-mix-type="mix-01"] .mixContainer{--mix-titleSize:15px;--mix-fontSize:14px;} [data-mix-type="mix-01"] ul.mix-ul{position:relative;display:flex;align-items:flex-end;gap:var(--gap);} [data-mix-type="mix-01"] ul.mix-ul li.mix-li{position:relative;} [data-mix-type="mix-01"] ul.mix-ul.imgCon-ul .mix-con{display:none;} [data-mix-type="mix-01"] ul.mix-ul.txtCon-ul{align-items:flex-start;margin-top:10px;} [data-mix-type="mix-01"]:not(.reverse_lr){padding-left:var(--padding-ratio);} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li:not([data-num="3"]){flex:1;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="3"]{width:54%;--mix-titleSize:21px;--mix-fontSize:16px;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li:not([data-num="3"]) .mix-thumb:before{padding-top:95%;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="3"] .mix-thumb:before{padding-top:80%;} [data-mix-type="mix-01"].reverse_lr{padding-right:var(--padding-ratio);} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"]{width:54%;--mix-titleSize:21px;--mix-fontSize:16px;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li:not([data-num="1"]){flex:1;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"] .mix-thumb:before{padding-top:80%;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li:not([data-num="1"]) .mix-thumb:before{padding-top:95%;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"] .mix-con{padding-left:15px;} #mix-from-wrap[data-mix-type="mix-01"]{position:relative;display:flex;flex-wrap:wrap;} #mix-from-wrap[data-mix-type="mix-01"] .mix-subSetting{position:absolute;left:0;top:10px} #mix-from-wrap[data-mix-type="mix-01"] #wrConBox{order:1;position:relative;width:100%;max-width:calc(46% + var(--padding-ratio) - var(--gap));margin-top:30px;margin-bottom:-330px !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;} #mix-from-wrap[data-mix-type="mix-01"]:not(.reverse_lr) #wrConBox{right:var(--padding-ratio);} #mix-from-wrap[data-mix-type="mix-01"].reverse_lr #wrConBox{margin-left:auto;left:var(--padding-ratio);} #mix-from-wrap[data-mix-type="mix-01"] #wrConBox .mybox-title{display:none;} #mix-from-wrap[data-mix-type="mix-01"] #wrConBox .inner{display:block !important;height:auto !important;opacity:1 !important;visibility:visible !important;} #mix-from-wrap[data-mix-type="mix-01"] #mix-form{order:2;width:100%;} #mix-from-wrap[data-mix-type="mix-01"] ul.mix-ul{padding-bottom:300px;} #mix-from-wrap[data-mix-type="mix-01"] .mix-con{position:absolute;margin-top:10px;width:100%;} #mix-from-wrap[data-mix-type="mix-01"] ul.mix-ul .textareaSet .text-subject{max-height:calc(var(--line-height) * 2);} .blockContainer[data-mix-type="mix-01"] .textCon{width:100%;max-width:calc(46% - var(--gap));position:absolute;z-index:3;} .blockContainer[data-mix-type="mix-01"] .textCon .block-title{position:relative;justify-content:center;} .blockContainer[data-mix-type="mix-01"] .textCon .block-title .line-deco{position:absolute;width:0;height:2px;background:var(--lineColor3);display:block;transition:all 1.5s cubic-bezier(0.5,0,0,1);animation-delay:0.5s;} .blockContainer[data-mix-type="mix-01"] .textCon .block-title .line-deco.active{width:500px} .blockContainer[data-mix-type="mix-01"]:not(.reverse_lr) .textCon{left:0;align-items:flex-start;} .blockContainer[data-mix-type="mix-01"]:not(.reverse_lr) .textCon .block-title .line-deco{left:-530px;} .blockContainer[data-mix-type="mix-01"].reverse_lr .textCon{align-items:flex-end;right:0;text-align:right;} .blockContainer[data-mix-type="mix-01"].reverse_lr .textCon .block-title .line-deco{left:none;right:-530px;} .blockContainer[data-mix-type="mix-01"].reverse_lr .textCon .list-btn-set{justify-content:flex-end;} @media screen and (max-width:1680px) { [data-mix-type="mix-01"]{--padding-ratio:8%;} } @media screen and (max-width:1430px) { #mix-from-wrap[data-mix-type="mix-01"] #wrConBox{margin-bottom:-300px !important;} } @media screen and (max-width:1260px) { [data-mix-type="mix-01"]:not(.reverse_lr){padding-right:15px;} [data-mix-type="mix-01"].reverse_lr{padding-left:15px;} #mix-from-wrap[data-mix-type="mix-01"] #wrConBox{max-width:100%;margin-bottom:0 !important;left:0 !important;right:0 !important;} #mix-from-wrap[data-mix-type="mix-01"] .mix-con{position:relative;} .blockContainer[data-mix-type="mix-01"] .textCon{position:relative;max-width:100%;} [data-mix-type="mix-01"] .mixContainer{--mix-titleSize:15px;--mix-fontSize:13px;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="3"]{--mix-titleSize:17px;--mix-fontSize:14px;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"]{--mix-titleSize:17px;--mix-fontSize:14px;} [data-mix-type="mix-01"] ul.mix-ul{display:flex;align-items:flex-start;flex-wrap:wrap;} [data-mix-type="mix-01"] ul.mix-ul.imgCon-ul .mix-con{display:block;margin-top:10px;} [data-mix-type="mix-01"] ul.mix-ul.txtCon-ul{display:none !important;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="1"]{width:45%;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="2"]{width:45%;margin-right:auto;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="3"]{width:100%;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="3"]{width:45%;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="2"]{width:45%;margin-right:auto;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"]{width:100%;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"] .mix-con{padding-left:0;} } @media screen and (max-width:960px) { [data-mix-type="mix-01"]{--padding-ratio:20px;padding-left:var(--padding-ratio) !important;padding-right:var(--padding-ratio) !important;--gap:25px 15px;} [data-mix-type="mix-01"] .mixContainer{--mix-titleSize:14px;--mix-fontSize:12px;} [data-mix-type="mix-01"]:not(.reverse_lr) ul.mix-ul li.mix-li[data-num="3"]{--mix-titleSize:16px;--mix-fontSize:13px;} [data-mix-type="mix-01"].reverse_lr ul.mix-ul li.mix-li[data-num="1"]{--mix-titleSize:16px;--mix-fontSize:13px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-02 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-02"] .mixContainer{display:flex;align-items:flex-start;gap:70px;--mix-titleSize:18px;--mix-fontSize:14px;--img-ratio:65%;} [data-mix-type="mix-02"] .mixContainer .mix-textSet .title{line-height:1.5em;} [data-mix-type="mix-02"] .head{position:relative;flex:1.1;max-width:760px;--mix-titleSize:20px;--mix-fontSize:16px;} [data-mix-type="mix-02"] .head .mix-thumb:before{padding-top:var(--img-ratio);} [data-mix-type="mix-02"] .head * + .mix-con{margin-top:10px;} [data-mix-type="mix-02"] .body{position:relative;flex:1;} [data-mix-type="mix-02"] ul.mix-ul{display:flex;flex-direction:column;} [data-mix-type="mix-02"] ul.mix-ul li.mix-li{padding:25px 0;border-bottom:1px solid rgba(0,0,0,0.2);display:flex;align-items:flex-start;gap:15px} [data-mix-type="mix-02"] ul.mix-ul li.mix-li:first-child{border-top:1px solid rgba(0,0,0,0.2);} [data-mix-type="mix-02"] ul.mix-ul li.mix-li a{width:100%;display:flex;align-items:flex-start;gap:15px} [data-mix-type="mix-02"] ul.mix-ul li.mix-li .mix-con{flex:1;} [data-mix-type="mix-02"] ul.mix-ul li.mix-li .mix-thumb{width:120px;} [data-mix-type="mix-02"] ul.mix-ul li.mix-li .mix-thumb:before{padding-top:100%;} [data-mix-type="mix-02"].reverse_lr .mixContainer{} [data-mix-type="mix-02"].reverse_lr .mixContainer .head{order:2;} [data-mix-type="mix-02"].reverse_lr .mixContainer .body{order:1;} @media screen and (max-width:1360px){ [data-mix-type="mix-02"] .mixContainer{display:flex;flex-wrap:wrap;} [data-mix-type="mix-02"] .head{max-width:100%;flex:auto;} [data-mix-type="mix-02"] .body{width:100%;flex:auto;} } @media screen and (max-width:780px) { [data-mix-type="mix-02"] .mixContainer{gap:40px;--mix-titleSize:14px;--mix-fontSize:12px;} [data-mix-type="mix-02"] .head{--mix-titleSize:15px;--mix-fontSize:13px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-03 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-03"] .mixContainer{display:flex;align-items:flex-start;gap:80px;--mix-titleSize:23px;--mix-fontSize:16px;--img-ratio:85%;} [data-mix-type="mix-03"] .mixContainer .mix-textSet .title{line-height:1.5em;} [data-mix-type="mix-03"] .mixContainer > *{flex:1;} [data-mix-type="mix-03"] .mix-thumb:before{padding-top:var(--img-ratio);} [data-mix-type="mix-03"] .mixContainer .mix-con{position:relative;} [data-mix-type="mix-03"].reverse_lr .mixContainer{display:flex;} [data-mix-type="mix-03"].reverse_lr .mixContainer .mix-thumb-wrap{order:2;} [data-mix-type="mix-03"].reverse_lr .mixContainer .mix-thumb-wrap [data-mix-type="mix-03"].reverse_lr .mixContainer .mix-con{order:1;} @media screen and (max-width:1360px){ [data-mix-type="mix-03"] .mixContainer{display:flex;flex-wrap:wrap;} [data-mix-type="mix-03"] .mix-thumb-wrap{max-width:100%;flex:auto;} [data-mix-type="mix-03"] .mix-con{width:100%;flex:auto;} } #mix-from-wrap[data-mix-type="mix-03"].reverse_lr .mixContainer .mix-thumb{order:2;} #mix-from-wrap[data-mix-type="mix-03"] .textareaSet .text-subject{min-height:calc(var(--line-height) * 5);max-height:calc(var(--line-height) * 8);} #mix-from-wrap[data-mix-type="mix-03"] .textareaSet .text-sub{min-height:calc(var(--line-height) * 2);max-height:calc(var(--line-height) * 8);} @media screen and (max-width:780px) { [data-mix-type="mix-03"] .mixContainer{gap:25px;--mix-titleSize:16px;--mix-fontSize:14px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-04 /*──────────────────────────────────────────────────────────────*/ .blockContainer[data-mix-type="mix-04"] .textCon{} [data-mix-type="mix-04"] .mixContainer{--mix-titleSize:26px;--mix-fontSize:16px;--img-ratio:55%;} [data-mix-type="mix-04"] ul.mix-ul{display:flex;flex-direction:column;gap:80px;margin-top:0px;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li{display:flex;align-items:center;justify-content:center;gap:60px;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li > *{flex:1;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li:nth-child(2n) > *:not(.mix-con){order:2} [data-mix-type="mix-04"] ul.mix-ul li.mix-li:nth-child(2n) .mix-con{order:1;text-align:right;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li:nth-child(2n) .mix-con .mix-textSet .title p{margin-left:auto;} #mix-from-wrap[data-mix-type="mix-04"] ul.mix-ul.numbering li.mix-li:nth-child(2n):before{left:auto;right:-7px;top:-7px;} @media screen and (max-width:780px) { [data-mix-type="mix-04"] .mixContainer{--mix-titleSize:15px;--mix-fontSize:13px;} [data-mix-type="mix-04"] ul.mix-ul{gap:50px;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li{gap:15px;align-items:flex-start;} [data-mix-type="mix-04"] ul.mix-ul li.mix-li > *:first-child{flex:0.6;} [data-mix-type="mix-04"] ul.mix-ul .mix-thumb-wrap{} } /*──────────────────────────────────────────────────────────────*/ /* mix-05 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-05"] .mixContainer{--mix-titleSize:21px;--mix-fontSize:16px;--img-ratio:85%;} [data-mix-type="mix-05"] li.mix-li{display:flex !important;align-items:center !important;justify-content:center !important;} #mix-from-wrap[data-mix-type="mix-05"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-05"] #wrConBox{margin-bottom:20px !important;} #mix-from-wrap[data-mix-type="mix-05"] ul.mix-ul{display:flex;flex-direction:column;gap:30px;} #mix-from-wrap[data-mix-type="mix-05"] .mix-con{display:block;} #mix-from-wrap[data-mix-type="mix-05"] .mix-con .inner{padding:50px;width:100%;display:flex;flex-wrap:wrap;gap:10px 5px;} .blockContainer[data-mix-type="mix-05"] .mixContainer{position:relative;} .blockContainer[data-mix-type="mix-05"] .swiper-slide{transition:all .25s ease-in-out;box-shadow:0 8px 15px rgba(0,0,0,0.025);} .blockContainer[data-mix-type="mix-05"] .swiper-slide:not(.swiper-slide-active){transform:scale(0.8);opacity:0;} .blockContainer[data-mix-type="mix-05"] .mix-con * + a .mix-btn{margin-top:40px;} .blockContainer[data-mix-type="mix-05"] .mix-con{background:#fff;} .blockContainer[data-mix-type="mix-05"] .mix-con .inner{padding:60px;display:flex;flex-direction:column;gap:10px;} .blockContainer[data-mix-type="mix-05"] .mixContainer.swiper-container .btn-slide:not(.swiper-button-disabled):before{border:1px solid rgba(0,0,0,0.15) !important;box-shadow:none;} @media screen and (min-width:1101px) { [data-mix-type="mix-05"] li.mix-li{flex-direction:row !important;align-items:stretch !important;} [data-mix-type="mix-05"] .mix-thumb-wrap{flex:1 !important;} [data-mix-type="mix-05"] .mix-con{flex:1 !important;border:1px solid rgba(0,0,0,0.15);border-left:0;} .blockContainer[data-mix-type="mix-05"] .mix-thumb{min-height:100%;border-radius:0;border-top-left-radius:2px;border-bottom-left-radius:2px;} .blockContainer[data-mix-type="mix-05"] .mix-thumb img{border-radius:0;} .blockContainer[data-mix-type="mix-05"] .mix-con{border-top-right-radius:2px;border-bottom-right-radius:2px;min-height:420px;} } @media screen and (max-width:1100px) { [data-mix-type="mix-05"] .mixContainer{--mix-titleSize:16px;--mix-fontSize:14px;} [data-mix-type="mix-05"] li.mix-li{flex-direction:column;} [data-mix-type="mix-05"] .mix-thumb-wrap{width:100%;} .blockContainer[data-mix-type="mix-05"] .mix-thumb{min-height:100%;border-radius:0;border-top-left-radius:2px;border-bottom-left-radius:2px;} .blockContainer[data-mix-type="mix-05"] .mix-con{width:100%;border-bottom-left-radius:2px;border-bottom-right-radius:2px;} .blockContainer[data-mix-type="mix-05"] .mix-con .inner{padding:25px;} .blockContainer[data-mix-type="mix-05"] .mix-con * + a .mix-btn{margin-top:20px;} .blockContainer[data-mix-type="mix-05"] ul.mix-ul{align-items:flex-start !important;} } /*──────────────────────────────────────────────────────────────*/ /* mix-06 (ScrollTrigger) /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-06"] .mixContainer{position:relative;z-index:2;--mix-titleSize:18px;--mix-fontSize:14px;--img-ratio:136%;--hover-color:#fff;} [data-mix-type="mix-06"] ul.mix-ul{display:flex;align-items:flex-start;flex-wrap:wrap;width:920px;max-width:55%;position:relative;} [data-mix-type="mix-06"] ul.mix-ul > li{position:relative;width:calc(50% - 50px);color:#fff;font-family:var(--nanumSN)} [data-mix-type="mix-06"] ul.mix-ul li .mix-con{margin-top:25px;} [data-mix-type="mix-06"] ul.mix-ul li .mix-li-inner{will-change: transform;} [data-mix-type="mix-06"] ul.mix-ul li .mix-li-inner img{will-change: transform;} [data-mix-type="mix-06"] ul.mix-ul a:after{display:none;} #mix-from-wrap[data-mix-type="mix-06"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form{order:3;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mixContainer{display:flex;flex-direction:column;align-items:flex-end;} #mix-from-wrap[data-mix-type="mix-06"] #wrConBox{order:1;margin-top:0px !important;margin-bottom:20px;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con{display:flex;flex-wrap:wrap;flex-direction:row;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con .textareaSet{width:100%;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con .btn-name{order:1;font-size:13px;width:calc(100% - 105px);} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con .btn-url{order:3} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con .btn-option{order:2;width:100px;margin-top:5px;margin-left:5px;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form .mix-con .btn-option .dropdown-toggle{font-size:12px;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form ul.mix-ul{gap:100px 100px;} #mix-from-wrap[data-mix-type="mix-06"] #mix-form ul.mix-ul > li:nth-child(2n){margin-top:350px} #mix-from-wrap[data-mix-type="mix-06"] #mix-form ul.mix-ul > li:nth-child(2n+1){margin-top:-150px} #mix-from-wrap[data-mix-type="mix-06"] #mix-form ul.mix-ul > li:nth-child(1){margin-top:0;} .blockContainer[data-mix-type="mix-06"]{position:relative;} .blockContainer[data-mix-type="mix-06"] .textCon{position:absolute;top:70vh;left:0;width:calc(100% - 60%);z-index:3;color:#fff;padding-left:clamp(15px, 10vw, 200px);} .blockContainer[data-mix-type="mix-06"] .mixContainer{display:flex;justify-content:flex-end;padding-right:clamp(15px, 5vw, 100px);} .blockContainer[data-mix-type="mix-06"] .bgContainer{position:absolute;top:0;left:0;width:100%;height:100vh;overflow:hidden;} .blockContainer[data-mix-type="mix-06"] .backgroundCon{background-repeat:no-repeat;background-position:center;background-size:cover;width:100%;transform:scale(1.03);} .blockContainer[data-mix-type="mix-06"] ul.mix-ul{margin-top:190vh;margin-bottom:50vh;gap:500px 100px;} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li:nth-child(3){margin-top:100px} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li:nth-child(4){margin-top:100px} .blockContainer[data-mix-type="mix-06"] .mix-textSet{word-break:keep-all;} .blockContainer[data-mix-type="mix-06"] .mix-textSet .title{word-break:keep-all;} .blockContainer[data-mix-type="mix-06"] .mix-btn{color:#fff !important;border-color:#fff !important;} .blockContainer[data-mix-type="mix-06"] .mix-btn:after{background:#fff !important;} .blockContainer[data-mix-type="mix-06"] .mix-btn:before{background:#fff !important;} .blockContainer[data-mix-type="mix-06"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-06"] .list-btn-set a:hover{color:#000;background:#fff;} @media screen and (max-width:1020px) { .blockContainer[data-mix-type="mix-06"]{z-index:-1;} .blockContainer[data-mix-type="mix-06"] .mixContainer{--mix-titleSize:16px;--mix-fontSize:13px;} .blockContainer[data-mix-type="mix-06"] .textCon{top:20vh;width:100%;padding:0 50px 0 25px;position:relative !important;} .blockContainer[data-mix-type="mix-06"] .mixContainer{padding-right:0;padding-left:20px;} .blockContainer[data-mix-type="mix-06"] ul.mix-ul{width:100%;max-width:100%;margin-top:100vh;margin-bottom:10vh;padding:10px;gap:220px 20px;} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li{width:calc(50% - 10px);} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li:nth-child(2){margin-top:50px} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li:nth-child(3){margin-top:0px} .blockContainer[data-mix-type="mix-06"] ul.mix-ul > li:nth-child(4){margin-top:0px} .blockContainer[data-mix-type="mix-06"] .mixContainer.btn-type-02 .mix-btn{font-size:12px;padding:1px 30px 0 12px;min-width:100%;} } /*──────────────────────────────────────────────────────────────*/ /* mix-07 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-07"] .mixContainer{--mix-titleSize:19px;--mix-fontSize:14px;--img-ratio:62%;} [data-mix-type="mix-07"] .mixContainer .mix-textSet .title{line-height:1.5em;} [data-mix-type="mix-07"] .head{position:relative;--mix-titleSize:22px;--mix-fontSize:16px;} [data-mix-type="mix-07"] .head .mix-thumb:before{padding-top:var(--img-ratio);} [data-mix-type="mix-07"] .body{position:relative;} [data-mix-type="mix-07"] .body .mix-thumb{width:100%;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li{position:relative;} [data-mix-type="mix-07"] .mixContainer.reverse_lr{} [data-mix-type="mix-07"] .mixContainer.reverse_lr .head{order:2;} [data-mix-type="mix-07"] .mixContainer.reverse_lr .body{order:1;} #mix-from-wrap[data-mix-type="mix-07"] .mix-con{position:absolute;bottom:20px;left:20px;z-index:3;max-width:70%} #mix-from-wrap[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-con{position:absolute;bottom:20px;left:20px;z-index:3;} .blockContainer[data-mix-type="mix-07"] .head .mix-thumb{transition:all 1.3s cubic-bezier(0.5,0,0,1);} .blockContainer[data-mix-type="mix-07"] .head .mix-con{position:absolute;bottom:40px;left:60px;z-index:9;color:#fff;overflow:hidden;} .blockContainer[data-mix-type="mix-07"] .head .mix-con .mix-textSet{position:relative;gap:0;} .blockContainer[data-mix-type="mix-07"] .head .mix-con .mix-textSet .title{} .blockContainer[data-mix-type="mix-07"] .head .mix-con .mix-textSet .sub{display:none;} .blockContainer[data-mix-type="mix-07"] .head:not(:hover) .mix-con .mix-textSet{/*transform:translateY(80px);*/} .blockContainer[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-thumb{transition:all 1.15s cubic-bezier(0.5,0,0,1);} .blockContainer[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-con{position:absolute;bottom:20px;left:20px;z-index:3;color:#fff;} .blockContainer[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-con .mix-textSet{gap:0;} .blockContainer[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-con .mix-textSet .sub{display:none;} .blockContainer[data-mix-type="mix-07"] .mixContainer a:hover .mix-thumb-wrap .mix-thumb{transform:scale(1.15);} @media screen and (min-width:1021px) { [data-mix-type="mix-07"] .mixContainer{display:flex;align-items:flex-start;align-items:stretch;} [data-mix-type="mix-07"] .head{flex:1.8;} [data-mix-type="mix-07"] .body{flex:1;} [data-mix-type="mix-07"] ul.mix-ul{height:100%;display:flex;flex-direction:column;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li{width:100%;height:50%;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li a{display:flex;width:100%;height:100%;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-thumb-wrap{display:flex;width:100%;height:100% !important;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-thumb{display:flex;width:100%;height:100% !important;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-thumb:before{display:none;} } @media screen and (max-width:1020px) { [data-mix-type="mix-07"] .mixContainer{display:flex;flex-direction:column;} [data-mix-type="mix-07"] ul.mix-ul{display:flex;align-items:flex-start;align-items:stretch;} [data-mix-type="mix-07"] ul.mix-ul li.mix-li{flex:1} [data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-thumb:before{padding-top:var(--img-ratio);} .blockContainer[data-mix-type="mix-07"] .head .mix-con{bottom:20px;left:20px;} } @media screen and (max-width:780px) { [data-mix-type="mix-07"] .mixContainer{--mix-titleSize:16px;--mix-fontSize:13px;} [data-mix-type="mix-07"] .head{--mix-titleSize:16px;--mix-fontSize:13px;} .blockContainer[data-mix-type="mix-07"] .head .mix-con .mix-textSet .sub{display:block;} .blockContainer[data-mix-type="mix-07"] ul.mix-ul li.mix-li .mix-con .mix-textSet .sub{display:block;} } /* faq 만들려고............................. */ /*──────────────────────────────────────────────────────────────*/ /* mix-08 /*──────────────────────────────────────────────────────────────*/ .blockContainer[data-mix-type="mix-08"] .textCon{} [data-mix-type="mix-08"] .mixContainer{--mix-titleSize:30px;--mix-fontSize:18px;--img-ratio:55%;} [data-mix-type="mix-08"] ul.mix-ul{display:flex;flex-direction:column;gap:80px;margin-top:0px;} [data-mix-type="mix-08"] ul.mix-ul li.mix-li{display:flex;align-items:center;justify-content:center;gap:60px;} [data-mix-type="mix-08"] ul.mix-ul li.mix-li > *{flex:1;} /* ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ MIX-GALLERY ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ */ /*──────────────────────────────────────────────────────────────*/ /* mix-gall01 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-gall01"] .mixContainer{--mix-titleSize:21px;--mix-fontSize:16px;--hover-color:#1e1e1e;--img-ratio:65%;} [data-mix-type="mix-gall01"] ul.mix-ul{align-items:stretch;} [data-mix-type="mix-gall01"] ul.mix-ul a{display:flex;} [data-mix-type="mix-gall01"] ul.mix-ul li.mix-li{display:flex;flex-direction:column;gap:0;} [data-mix-type="mix-gall01"] ul.mix-ul a > li.mix-li{width:100%;} [data-mix-type="mix-gall01"] ul.mix-ul li.mix-li .mix-con{padding:25px;background:#e3e5e5;} [data-mix-type="mix-gall01"] ul.mix-ul a:hover li.mix-li .mix-con{background:#fff;} [data-mix-type="mix-gall01"] ul.mix-ul a:hover li.mix-li .mix-con .mix-textSet{color:var(--hover-color);} [data-mix-type="mix-gall01"] ul.mix-ul a:hover li.mix-li .mix-btn:before{background:var(--hover-color);} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 80px} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner > *:not(.bl_titleSet):not(.wrConBox):not(.form-btn-set){width:100%;} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner .bl_titleSet{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner .wrConBox{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner .form-btn-set{width:50%;margin-left:auto} #mix-from-wrap[data-mix-type="mix-gall01"] #wrConBox .inner .bl_alignSet{order:-1;margin-top:0 !important;;margin-bottom:10px;} #mix-from-wrap[data-mix-type="mix-gall01"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-gall01"] .inp_btn_url{min-width:65%;border:0;} .blockContainer[data-mix-type="mix-gall01"] .textCon .block-conSet .contents{font-size:17px;line-height:1.6em;} .blockContainer[data-mix-type="mix-gall01"] ul.mix-ul li.mix-li .mix-con{flex:1;display:flex;flex-direction:column;margin:0 !important;transition:all .2s ease-in-out;} .blockContainer[data-mix-type="mix-gall01"] ul.mix-ul li.mix-li .mix-con .mix-textSet{margin-bottom:60px;align-items:flex-start;gap:15px} .blockContainer[data-mix-type="mix-gall01"] ul.mix-ul li.mix-li .mix-con .mix-textSet .title{position:relative;padding-bottom:8px;} .blockContainer[data-mix-type="mix-gall01"] ul.mix-ul li.mix-li .mix-btn{margin-top:auto;} @media screen and (max-width:780px) { [data-mix-type="mix-gall01"] .mixContainer{--mix-titleSize:19px;--mix-fontSize:15px;} .blockContainer[data-mix-type="mix-gall01"] .textCon .block-conSet .contents{font-size:var(--block-conSet-mobile-size);} } /*──────────────────────────────────────────────────────────────*/ /* mix-gall02 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-gall02"] .mixContainer{--mix-titleSize:24px;--mix-fontSize:17px;--hover-color:#1e1e1e;--img-ratio:100%;} [data-mix-type="mix-gall02"] ul.mix-ul{align-items:stretch;} [data-mix-type="mix-gall02"] ul.mix-ul a{display:flex;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li{display:flex;flex-direction:column;gap:0;background:#e3e5e5;} [data-mix-type="mix-gall02"] ul.mix-ul a > li.mix-li{width:100%;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head{display:flex;align-items:flex-start;align-items:stretch;gap:20px;padding:30px 30px 20px 30px;--mix-titleSize:18px;--mix-fontSize:16px;transition:all .2s ease-in-out;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head .mix-textSet{flex:1;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head .mix-thumb{width:140px;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head .mix-thumb:before{padding-top:var(--img-ratio) !important;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con{padding:30px 30px 60px 30px;margin:0 !important;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con .mix-textSet{margin-bottom:60px;align-items:flex-start;gap:15px} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con .mix-textSet .title{position:relative;padding-bottom:8px;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-btn{margin-top:auto;} [data-mix-type="mix-gall02"] ul.mix-ul a:hover li.mix-li .mix-thumb{transform:scale(1.1);} [data-mix-type="mix-gall02"] ul.mix-ul a:hover li.mix-li .mix-head{background:rgba(255,255,255,0.5);} [data-mix-type="mix-gall02"] ul.mix-ul a:hover li.mix-li .mix-con{background:rgba(255,255,255,0.5);} [data-mix-type="mix-gall02"] ul.mix-ul a:hover li.mix-li .mix-con .mix-textSet{color:var(--hover-color);} [data-mix-type="mix-gall02"] ul.mix-ul a:hover li.mix-li .mix-btn:before{background:var(--hover-color);} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 80px} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner > *:not(.bl_titleSet):not(.wrConBox):not(.form-btn-set){width:100%;} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner .bl_titleSet{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner .wrConBox{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner .form-btn-set{width:50%;margin-left:auto} #mix-from-wrap[data-mix-type="mix-gall02"] #wrConBox .inner .bl_alignSet{order:-1;margin-top:0 !important;margin-bottom:10px;} #mix-from-wrap[data-mix-type="mix-gall02"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-gall02"] #mix-form .mix-head .textareaSet{margin-bottom:0;flex:1;padding:5px !important;} #mix-from-wrap[data-mix-type="mix-gall02"] #mix-form .mix-con .textareaSet{padding:5px !important;} .blockContainer[data-mix-type="mix-gall02"] .textCon .block-conSet .contents{font-size:17px;line-height:1.6em;} .blockContainer[data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con{flex:1;display:flex;flex-direction:column;transition:all .2s ease-in-out;} @media screen and (max-width:780px) { [data-mix-type="mix-gall02"] .mixContainer{--mix-titleSize:19px;--mix-fontSize:15px;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head{gap:15px;padding:25px 25px 15px 25px;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-head .mix-thumb{width:120px;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con{padding:20px 25px 20px 25px;margin:0 !important;} [data-mix-type="mix-gall02"] ul.mix-ul li.mix-li .mix-con .mix-textSet{margin-bottom:15px;} .blockContainer[data-mix-type="mix-gall02"] .textCon .block-conSet .contents{font-size:var(--block-conSet-mobile-size);} } /*──────────────────────────────────────────────────────────────*/ /* mix-gall03 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-gall03"] .mixContainer{--mix-titleSize:20px;--mix-fontSize:17px;---img-ratio:100%;} [data-mix-type="mix-gall03"] ul.mix-ul{} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li{width:100%;display:flex;align-items:flex-start;gap:20px;padding:20px 0;border-top:1px solid rgba(0,0,0,0.1);} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-con{flex:1;} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-con .mix-textSet{gap:0} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-con .mix-textSet .title{position:relative;padding-bottom:8px;transition:all .2s ease-in-out;} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-con .mix-textSet .title{font-size:var(--mix-titleSize);line-height:1.3em;display:flex;flex-direction:column;align-items:flex-start;} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-thumb{width:130px;height:130px;} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 80px} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner > *:not(.bl_titleSet):not(.wrConBox):not(.form-btn-set){width:100%;} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner .bl_titleSet{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner .wrConBox{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner .form-btn-set{width:50%;margin-left:auto} #mix-from-wrap[data-mix-type="mix-gall03"] #wrConBox .inner .bl_alignSet{order:-1;margin-top:0 !important;;margin-bottom:10px;} #mix-from-wrap[data-mix-type="mix-gall03"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-gall03"] #mix-form .textareaSet{margin-bottom:0;padding:5px !important;} .blockContainer[data-mix-type="mix-gall03"] .textCon .block-conSet .contents{font-size:17px;line-height:1.6em;} .blockContainer[data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-thumb-wrap{transition:all 0.35s cubic-bezier(0.5,0,0,1.25);} .blockContainer[data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-con{display:flex;flex-direction:column;transition:all .2s ease-in-out;} .blockContainer[data-mix-type="mix-gall03"] ul.mix-ul a:hover li.mix-li .mix-thumb-wrap{transform:scale(1.2) !important;} .blockContainer[data-mix-type="mix-gall03"] ul.mix-ul a:hover li.mix-li .mix-thumb{transform:scale(1) !important;} .blockContainer[data-mix-type="mix-gall03"] ul.mix-ul a:hover li.mix-li .mix-con .mix-textSet .title{color:var(--mainColor);} @media screen and (max-width:780px) { [data-mix-type="mix-gall03"] .mixContainer{--mix-titleSize:19px;--mix-fontSize:15px;} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li{padding:25px 0;} [data-mix-type="mix-gall03"] ul.mix-ul li.mix-li .mix-thumb{width:110px;height:110px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-gall04 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-gall04"] .mixContainer{--mix-titleSize:21px;--mix-fontSize:16px;--hover-color:#1e1e1e;--img-ratio:65%;} [data-mix-type="mix-gall04"] ul.mix-ul{align-items:stretch;} [data-mix-type="mix-gall04"] ul.mix-ul a{display:flex;} [data-mix-type="mix-gall04"] ul.mix-ul li.mix-li{display:flex;flex-direction:column;gap:0;} [data-mix-type="mix-gall04"] ul.mix-ul a > li.mix-li{width:100%;} [data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con{padding:25px;margin:0 !important;background:#e3e5e5;} [data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-btn{margin-top:auto;} [data-mix-type="mix-gall04"] ul.mix-ul a:hover .mix-con{background:#fff;} [data-mix-type="mix-gall04"] ul.mix-ul a:hover .mix-con .mix-textSet{color:var(--hover-color);} [data-mix-type="mix-gall04"] ul.mix-ul a:hover .mix-btn:before{background:var(--hover-color);} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 80px} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner > *:not(.bl_titleSet):not(.wrConBox):not(.form-btn-set){width:100%;} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner .bl_titleSet{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner .wrConBox{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner .form-btn-set{width:50%;margin-left:auto} #mix-from-wrap[data-mix-type="mix-gall04"] #wrConBox .inner .bl_alignSet{order:-1;margin-top:0 !important;;margin-bottom:10px;} #mix-from-wrap[data-mix-type="mix-gall04"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con{} #mix-from-wrap[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con .textareaSet{} #mix-from-wrap[data-mix-type="mix-gall04"] .inp_btn_name{margin-top:auto;} #mix-from-wrap[data-mix-type="mix-gall04"] .inp_btn_url{min-width:65%;border:0;} .blockContainer[data-mix-type="mix-gall04"] .textCon .block-conSet .contents{font-size:17px;line-height:1.6em;} .blockContainer[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con{flex:1;transition:all .2s ease-in-out;} .blockContainer[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con .inner{min-height:100%;display:flex;flex-direction:column;} .blockContainer[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con .mix-textSet{flex:1;margin-bottom:60px;align-items:flex-start;gap:15px} .blockContainer[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con .mix-textSet .title{position:relative;padding-bottom:8px;} @media screen and (max-width:780px) { [data-mix-type="mix-gall04"] .mixContainer{--mix-titleSize:19px;--mix-fontSize:15px;} .blockContainer[data-mix-type="mix-gall04"] ul.mix-ul li.mix-li .mix-con .mix-textSet{flex:1;margin-bottom:60px;align-items:flex-start;gap:5px} } /* ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ MIX-BRIDGE ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ */ /*──────────────────────────────────────────────────────────────*/ /* mix-bridge01 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge01"] .mixContainer{--img-height:520px;--img-height-mobile:300px;} [data-mix-type="mix-bridge01"] .mix-thumb:before{display:none;} #mix-from-wrap[data-mix-type="mix-bridge01"]{position:relative;} #mix-from-wrap[data-mix-type="mix-bridge01"] #wrConBox{margin-top:80px;} #mix-from-wrap[data-mix-type="mix-bridge01"] #wrConBox .inner{display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-bridge01"] #wrConBox .inner .form-btn-set{} #mix-from-wrap[data-mix-type="mix-bridge01"] #wrConBox .inner .bl_alignSet{} #mix-from-wrap[data-mix-type="mix-bridge01"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-bridge01"] #mix-form .mix-textSet{margin-bottom:0;flex:1;} #mix-from-wrap[data-mix-type="mix-bridge01"] .mix-subSetting{position:absolute;left:0;top:-65px;} .blockContainer[data-mix-type="mix-bridge01"]{position:relative;z-index:9;} .blockContainer[data-mix-type="mix-bridge01"] .mixContainer{z-index:9;min-height:var(--img-height);display:flex;align-items:center;justify-content:center;background-position:center;background-size:cover;background-repeat:no-repeat;} .blockContainer[data-mix-type="mix-bridge01"] .textCon{position:relative;z-index:5;width:100%;color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px 25px;} .blockContainer[data-mix-type="mix-bridge01"] .textCon .block-title{} .blockContainer[data-mix-type="mix-bridge01"] .textCon .block-conSet{} .blockContainer[data-mix-type="mix-bridge01"] .textCon .block-conSet .contents{font-size:21px;line-height:1.6em;} .blockContainer[data-mix-type="mix-bridge01"] .mix-thumb{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;border-radius:0;} /*.blockContainer[data-mix-type="mix-bridge01"] .mix-thumb{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;border-radius:0;}*/ .blockContainer[data-mix-type="mix-bridge01"] .list-btn-set{justify-content:center;} .blockContainer[data-mix-type="mix-bridge01"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-bridge01"] .list-btn-set a:hover{color:#000;background:#fff;} .blockContainer[data-mix-type="mix-bridge01"].first-block .textCon{} @media screen and (max-width:1150px) { .blockContainer[data-mix-type="mix-bridge01"] .mixContainer{min-height:calc(var(--img-height) / 1.3);} } @media screen and (max-width:780px) { .blockContainer[data-mix-type="mix-bridge01"] .mixContainer{padding-top:var(--mobile-header-height);min-height:var(--img-height-mobile);height:300px;} .blockContainer[data-mix-type="mix-bridge01"] .textCon{padding:20px 0;} .blockContainer[data-mix-type="mix-bridge01"] .textCon .block-conSet .contents{font-size:16px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge02 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge02"] .mixContainer{--img-ratio:400px;} [data-mix-type="mix-bridge02"] .mix-thumb:before{display:none;} #mix-from-wrap[data-mix-type="mix-bridge02"]{position:relative;} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0 80px} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner > *:not(.bl_titleSet):not(.wrConBox):not(.form-btn-set){width:100%;} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner .bl_titleSet{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner .wrConBox{width:calc(50% - 40px);} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner .form-btn-set{width:50%;margin-left:auto} #mix-from-wrap[data-mix-type="mix-bridge02"] #wrConBox .inner .bl_alignSet{order:-1;margin-top:0 !important;;margin-bottom:10px;} #mix-from-wrap[data-mix-type="mix-bridge02"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-bridge02"] #mix-form .mix-textSet{margin-bottom:0;flex:1;} .blockContainer[data-mix-type="mix-bridge02"]{position:relative;z-index:9;} .blockContainer[data-mix-type="mix-bridge02"] .mixContainer{z-index:9;} .blockContainer[data-mix-type="mix-bridge02"] .textCon{position:relative;z-index:5;width:100%;min-height:560px;padding:80px 100px;color:#fff;display:flex;justify-content:center;flex-direction:row;align-items:stretch;gap:80px;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-title{flex:1;padding-left:80px;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-conSet{flex:1;padding:50px 80px 20px 80px;border-left:1px solid rgba(255,255,255,0.6);display:flex;flex-direction:column;justify-content:flex-end;gap:25px;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-conSet .contents{font-size:21px;line-height:1.6em;} .blockContainer[data-mix-type="mix-bridge02"] .mix-thumb{position:absolute;left:0;top:0;z-index:1;width:100%;height:100%;border-radius:0;transition:none !important;} .blockContainer[data-mix-type="mix-bridge02"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-bridge02"] .list-btn-set a:hover{color:#000;background:#fff;} .blockContainer[data-mix-type="mix-bridge02"].first-block .textCon{padding-top:120px;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge02"] .textCon{min-height:auto;padding:30px 20px;flex-direction:column;gap:15px;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-title{flex:none;padding-left:0;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-conSet{flex:1;padding:0 0 0px 30px;border-left:0;justify-content:flex-start;gap:15px;} .blockContainer[data-mix-type="mix-bridge02"] .textCon .block-conSet .contents{font-size:14px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge03 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge03"] .mixContainer{--img-ratio:50%;} [data-mix-type="mix-bridge03"] .mix-thumb:before{padding-top:var(--img-ratio) !important;} #mix-from-wrap[data-mix-type="mix-bridge03"]{display:flex;align-items:center;justify-content:center;align-items:stretch;} #mix-from-wrap[data-mix-type="mix-bridge03"] #mix-form{flex:1.3;order:2} #mix-from-wrap[data-mix-type="mix-bridge03"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-bridge03"] #wrConBox{flex:1;margin-top:0 !important;order:1;padding:0;margin-right:20px;border:0 !important;background:transparent !important;box-shadow:none !important} #mix-from-wrap[data-mix-type="mix-bridge03"] #wrConBox .mybox-title{display:none;} #mix-from-wrap[data-mix-type="mix-bridge03"] #wrConBox .inner{display:block !important;height:auto !important;opacity:1 !important;visibility:visible !important;} .blockContainer[data-mix-type="mix-bridge03"]{margin:0;position:relative;z-index:9;} .blockContainer[data-mix-type="mix-bridge03"] .mixContainer{display:flex;align-items:flex-end;align-items:stretch;} .blockContainer[data-mix-type="mix-bridge03"] .textCon{width:45%;display:flex;justify-content:center;flex-direction:column;padding:30px 190px 60px 120px;background:#fff;} .blockContainer[data-mix-type="mix-bridge03"] .textCon .contents{font-size:18px;line-height:1.6em;margin-top:15px;} .blockContainer[data-mix-type="mix-bridge03"] .mix-thumb-wrap{position:relative;z-index:3;bottom:-70px;right:0;margin-left:-100px;width:calc(55% + 100px) !important;border-radius:0;} .blockContainer[data-mix-type="mix-bridge03"] .mix-thumb img{border-radius:0;} .blockContainer[data-mix-type="mix-bridge03"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-bridge03"] .list-btn-set a:hover{color:#000;background:#fff;} .blockContainer[data-mix-type="mix-bridge03"].first-block .textCon{padding-top:120px;padding-bottom:100px;} .blockContainer[data-mix-type="mix-bridge03"].first-block .mix-thumb-wrap{bottom:-90px;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge03"] .mixContainer{flex-direction:column;} .blockContainer[data-mix-type="mix-bridge03"] .textCon{width:calc(100% - 40px);padding:30px 30px 70px 30px;gap:10px;} .blockContainer[data-mix-type="mix-bridge03"] .textCon .contents{font-size:13px;margin-top:0;} .blockContainer[data-mix-type="mix-bridge03"] .mix-thumb-wrap{position:relative;z-index:3;bottom:0;margin-top:-40px;margin-left:40px;width:calc(100% - 40px) !important;} .blockContainer[data-mix-type="mix-bridge03"].first-block .textCon{padding-bottom:20px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge04 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge04"] .mixContainer{--img-ratio:50%;} [data-mix-type="mix-bridge04"] .mix-thumb:before{padding-top:var(--img-ratio) !important;} #mix-from-wrap[data-mix-type="mix-bridge04"]{display:flex;align-items:center;justify-content:center;align-items:stretch;} #mix-from-wrap[data-mix-type="mix-bridge04"] #mix-form{flex:1.3;order:1} #mix-from-wrap[data-mix-type="mix-bridge04"] #bl_title{min-height:120px !important;} #mix-from-wrap[data-mix-type="mix-bridge04"] #wrConBox{flex:1;margin-top:0 !important;order:2;padding:0;margin-left:20px;border:0 !important;background:transparent !important;box-shadow:none !important} #mix-from-wrap[data-mix-type="mix-bridge04"] #wrConBox .mybox-title{display:none;} #mix-from-wrap[data-mix-type="mix-bridge04"] #wrConBox .inner{display:block !important;height:auto !important;opacity:1 !important;visibility:visible !important;} .blockContainer[data-mix-type="mix-bridge04"]{position:relative;z-index:9;} .blockContainer[data-mix-type="mix-bridge04"] .mixContainer{display:flex;align-items:flex-end;align-items:stretch;} .blockContainer[data-mix-type="mix-bridge04"] .mix-thumb-wrap{position:relative;z-index:3;bottom:-70px;left:0;margin-right:-100px;width:calc(55% + 100px) !important;border-radius:0;} .blockContainer[data-mix-type="mix-bridge04"] .mix-thumb img{border-radius:0;} .blockContainer[data-mix-type="mix-bridge04"] .textCon{width:45%;display:flex;justify-content:center;flex-direction:column;padding:30px 120px 60px 190px;background:#fff;} .blockContainer[data-mix-type="mix-bridge04"] .textCon .contents{font-size:18px;line-height:1.6em;margin-top:15px;} .blockContainer[data-mix-type="mix-bridge04"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-bridge04"] .list-btn-set a:hover{color:#000;background:#fff;} .blockContainer[data-mix-type="mix-bridge04"].first-block .textCon{padding-top:120px;padding-bottom:100px;} .blockContainer[data-mix-type="mix-bridge04"].first-block .mix-thumb-wrap{bottom:-90px;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge04"] .mixContainer{flex-direction:column;} .blockContainer[data-mix-type="mix-bridge04"] .textCon{width:calc(100% - 40px);padding:30px 30px 70px 50px;margin-left:40px;gap:10px;} .blockContainer[data-mix-type="mix-bridge04"] .textCon .contents{font-size:13px;margin-top:0;} .blockContainer[data-mix-type="mix-bridge04"] .mix-thumb-wrap{order:2;position:relative;z-index:3;bottom:0;margin-top:-40px;margin-left:0;width:calc(100% - 40px) !important;} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge05 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge05"] .mixContainer{--img-ratio:32%;} [data-mix-type="mix-bridge05"] .mix-thumb:before{padding-top:var(--img-ratio) !important;} #mix-from-wrap[data-mix-type="mix-bridge05"]{display:flex;flex-direction:column;border:1px solid var(--blue);padding:40px;position:relative;} #mix-from-wrap[data-mix-type="mix-bridge05"] #mix-form{order:2;position:relative;padding-left:30%;} #mix-from-wrap[data-mix-type="mix-bridge05"] #wrConBox{flex:1;margin-top:0 !important;order:1;padding:0 !important;margin-left:20px;border:0 !important;background:transparent !important;box-shadow:none !important} #mix-from-wrap[data-mix-type="mix-bridge05"] #wrConBox .mybox-title{display:none;} #mix-from-wrap[data-mix-type="mix-bridge05"] #wrConBox .inner{display:block !important;height:auto !important;opacity:1 !important;visibility:visible !important;} .blockContainer[data-mix-type="mix-bridge05"]{position:relative;z-index:9;} .blockContainer[data-mix-type="mix-bridge05"] .mixContainer{z-index:9;padding-bottom:250px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row{position:relative;width:100%;min-height:250px;padding:80px 120px 60px 120px;display:flex;justify-content:center;--lineColor:rgba(255,255,255,0.5);} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row .block-title{flex:none;display:inline-flex;flex-direction:column;justify-content:center;padding-right:50px;width:auto;} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row .block-conSet{flex:none;padding:30px 50px;display:flex;flex-direction:column;gap:25px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon .contents{font-size:18px;line-height:1.6em;} .blockContainer[data-mix-type="mix-bridge05"] .mix-thumb-wrap{position:absolute;right:0;bottom:-120px;z-index:9;width:70%;border-radius:0;} .blockContainer[data-mix-type="mix-bridge05"] .mix-thumb img{border-radius:0;} .blockContainer[data-mix-type="mix-bridge05"] .list-btn-set a{color:#fff;border-color:#fff;} .blockContainer[data-mix-type="mix-bridge05"] .list-btn-set a:hover{color:#000;background:#fff;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge05"] .mixContainer{z-index:9;padding-bottom:50px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row{position:relative;flex-direction:column !important;width:100%;min-height:auto;padding:20px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row .block-title{justify-content:flex-start;padding-right:0;} .blockContainer[data-mix-type="mix-bridge05"] .textCon.row .block-conSet{padding:15px 20px;display:flex;flex-direction:column;gap:15px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon{gap:0px;} .blockContainer[data-mix-type="mix-bridge05"] .textCon .contents{font-size:13px;} .blockContainer[data-mix-type="mix-bridge05"] .mix-thumb-wrap{bottom:-30px} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge06 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge06"] .blockInner{gap:0 !important;} [data-mix-type="mix-bridge06"] .mixContainer{--mix-titleSize:36px;--mix-fontSize:18px;--hover-color:#fff;} [data-mix-type="mix-bridge06"] ul.mix-ul{display:flex;width:100%;height:600px;} [data-mix-type="mix-bridge06"] li.mix-li{flex:1;height:100%;position:relative;transition:all 0.8s cubic-bezier(0.5,0,0,1.25);overflow:hidden} [data-mix-type="mix-bridge06"] li.mix-li:hover{flex:1.3;} [data-mix-type="mix-bridge06"] li.mix-li .mix-thumb{position:absolute;top:0;left:0;z-index:1;height:100%;border-radius:0;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;} #mix-from-wrap[data-mix-type="mix-bridge06"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-bridge06"] #wrConBox{order:1;margin-top:0 !important;margin-bottom:30px;} #mix-from-wrap[data-mix-type="mix-bridge06"] #mix-form{order:2;margin-bottom:50px;} #mix-from-wrap[data-mix-type="mix-bridge06"] .mixContainer ul.mix-ul{display:flex;} #mix-from-wrap[data-mix-type="mix-bridge06"] .mixContainer ul li{} #mix-from-wrap[data-mix-type="mix-bridge06"] .mix-thumb:after{} #mix-from-wrap[data-mix-type="mix-bridge06"] .mix-thumb:before{display:none;} #mix-from-wrap[data-mix-type="mix-bridge06"] .mix-thumb .label-del{position:absolute;top:30px;right:30px;z-index:5;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con{color:#fff;margin:0;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;text-align:center;opacity:1;transition:all .2s ease-in-out; display:flex;align-items:center;justify-content:center;flex-direction:column;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-textSet{max-width:460px;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-textSet .title{line-height:1.25em !important;align-items:center;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-btn{margin-top:35px;font-size:16px;font-weight:var(--bold);height:48px;color:#fff;min-width:180px;padding:0 15px;border-radius:0;border:1px solid #fff;transition:all .2s ease-in-out; display:inline-flex;align-items:center;justify-content:center;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-btn:hover{background:#fff;color:#000;} .blockContainer[data-mix-type="mix-bridge06"] li.mix-li:hover .mix-con{opacity:1;background:rgba(0,0,0,0.5);font-size:22px;} .blockContainer[data-mix-type="mix-bridge06"] li.mix-li:hover .mix-con .mix-btn{opacity:1;} .blockContainer[data-mix-type="mix-bridge06"] .textCon.row{position:relative;width:100%;padding:0;display:flex;align-items:flex-start;justify-content:center;gap:0;} .blockContainer[data-mix-type="mix-bridge06"] .textCon.row .block-title{flex:1;display:flex;align-items:flex-end;padding:30px 70px 100px 50px} .blockContainer[data-mix-type="mix-bridge06"] .textCon.row .block-conSet{flex:1;padding:30px 50px 100px 70px;display:flex;flex-direction:column;gap:25px;border-width:1px;} .blockContainer[data-mix-type="mix-bridge06"] li.mix-li:hover .mix-thumb{transform:scale(1.1);filter:blur(3px);} .blockContainer[data-mix-type="mix-bridge06"].first-block .textCon{padding-top:120px;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge06"] .textCon.row{flex-direction:column !important;} .blockContainer[data-mix-type="mix-bridge06"] .textCon.row .block-title{display:flex;align-items:flex-end;padding:15px 0 0 25px;} .blockContainer[data-mix-type="mix-bridge06"] .textCon.row .block-conSet{padding:15px 30px 40px 50px;gap:15px;} .blockContainer[data-mix-type="mix-bridge06"] .mixContainer ul.mix-ul{display:flex;flex-direction:column;height:auto;} [data-mix-type="mix-bridge06"] li.mix-li{height:auto;} [data-mix-type="mix-bridge06"] li.mix-li .mix-thumb{height:100%;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con{position:relative;height:auto;padding:35px 25px;min-height:230px;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-textSet{font-size:14px;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-textSet .title{font-size:19px;} .blockContainer[data-mix-type="mix-bridge06"] .mix-con .mix-btn{margin-top:15px;} } /*──────────────────────────────────────────────────────────────*/ /* mix-bridge07 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-bridge07"] .blockInner{gap:0 !important;} [data-mix-type="mix-bridge07"] .mixContainer{--mix-titleSize:42px;--mix-fontSize:18px;--hover-color:#fff;} [data-mix-type="mix-bridge07"] ul.mix-ul{display:flex;width:100%;height:600px;} [data-mix-type="mix-bridge07"] li.mix-li{flex:1;height:100%;position:relative;transition:all 0.8s cubic-bezier(0.5,0,0,1.25);overflow:hidden} [data-mix-type="mix-bridge07"] li.mix-li:hover{flex:1.3;} [data-mix-type="mix-bridge07"] li.mix-li .mix-thumb{position:absolute;top:0;left:0;z-index:1;height:100%;border-radius:0;display:flex;align-items:center;justify-content:center;} #mix-from-wrap[data-mix-type="mix-bridge07"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-bridge07"] #wrConBox{order:1;margin-top:0 !important;margin-bottom:30px;} #mix-from-wrap[data-mix-type="mix-bridge07"] #mix-form{order:2;margin-bottom:50px;} #mix-from-wrap[data-mix-type="mix-bridge07"] .mixContainer ul.mix-ul{display:flex;} #mix-from-wrap[data-mix-type="mix-bridge07"] .mixContainer ul li{} #mix-from-wrap[data-mix-type="mix-bridge07"] .mix-thumb:after{} #mix-from-wrap[data-mix-type="mix-bridge07"] .mix-thumb:before{display:none;} #mix-from-wrap[data-mix-type="mix-bridge07"] .mix-thumb .label-del{position:absolute;top:30px;right:30px;z-index:5;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con{color:#fff;margin:0;position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;text-align:center;opacity:1;transition:all .2s ease-in-out; display:flex;align-items:center;justify-content:center;flex-direction:column;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-textSet{max-width:460px;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-textSet .title{line-height:1.25em !important;align-items:center;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-btn{margin-top:35px;font-size:16px;font-weight:var(--bold);height:48px;color:#fff;min-width:180px;padding:0 15px;border-radius:0;border:1px solid #fff;transition:all .2s ease-in-out; display:inline-flex;align-items:center;justify-content:center;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-btn:hover{background:#fff;color:#000;} .blockContainer[data-mix-type="mix-bridge07"] li.mix-li:hover .mix-con{opacity:1;background:rgba(0,0,0,0.5);font-size:22px;} .blockContainer[data-mix-type="mix-bridge07"] li.mix-li:hover .mix-con .mix-btn{opacity:1;} .blockContainer[data-mix-type="mix-bridge07"] .textCon.row{position:relative;width:100%;padding:0;display:flex;align-items:flex-start;justify-content:center;gap:0;} .blockContainer[data-mix-type="mix-bridge07"] .textCon.row .block-title{flex:1;display:flex;align-items:flex-end;padding:30px 70px 100px 50px} .blockContainer[data-mix-type="mix-bridge07"] .textCon.row .block-conSet{flex:1;padding:30px 50px 100px 70px;display:flex;flex-direction:column;gap:25px;border-width:1px;} .blockContainer[data-mix-type="mix-bridge07"] li.mix-li:hover .mix-thumb{transform:scale(1.1);filter:blur(3px);} .blockContainer[data-mix-type="mix-bridge07"].first-block .textCon{padding-top:120px;} @media screen and (max-width:1024px) { .blockContainer[data-mix-type="mix-bridge07"] .textCon.row{flex-direction:column !important;} .blockContainer[data-mix-type="mix-bridge07"] .textCon.row .block-title{display:flex;align-items:flex-end;padding:15px 0 0 25px;} .blockContainer[data-mix-type="mix-bridge07"] .textCon.row .block-conSet{padding:15px 30px 40px 50px;gap:15px;} .blockContainer[data-mix-type="mix-bridge07"] .mixContainer ul.mix-ul{display:flex;flex-direction:column;height:auto;} [data-mix-type="mix-bridge07"] li.mix-li{height:auto;} [data-mix-type="mix-bridge07"] li.mix-li .mix-thumb{height:100%;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con{position:relative;height:auto;padding:35px 25px;min-height:230px;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-textSet{font-size:14px;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-textSet .title{font-size:19px;} .blockContainer[data-mix-type="mix-bridge07"] .mix-con .mix-btn{margin-top:15px;} } /* ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ MIX-BUTTON ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ */ /*──────────────────────────────────────────────────────────────*/ /* mix-btn01 /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-btn01"] ul.mix-ul{display:flex;align-items:center;flex-wrap:wrap;--gap:20px;width:100%;} [data-mix-type="mix-btn01"] li.mix-li .mix-btn{position:relative;font-size:14px;font-weight:600;width:100%;display:flex;align-items:center;transition:all .2s ease-in-out;} /*[data-mix-type="mix-btn01"] .row-1 li.mix-li{width:100%;} [data-mix-type="mix-btn01"] .row-2 li.mix-li{width:calc(50% - 10px)} [data-mix-type="mix-btn01"] .row-3 li.mix-li{width:calc(33.33% - 14px)} [data-mix-type="mix-btn01"] .row-4 li.mix-li{width:calc(25% - 15px)} [data-mix-type="mix-btn01"] .row-5 li.mix-li{width:calc(20% - 16px)} [data-mix-type="mix-btn01"] .row-6 li.mix-li{width:calc(16.66% - 17px)}*/ [data-mix-type="mix-btn01"] li.mix-li.sub-title{width:100% !important;} [data-mix-type="mix-btn01"] li.mix-li.sub-title:not(:first-child){margin-top:60px;} [data-mix-type="mix-btn01"] .type01 .mix-btn{height:48px;padding:3px 15px 0 15px;border:1px solid rgba(0,0,0,0.4);} [data-mix-type="mix-btn01"] .type01 .mix-btn:after{content:'';display:inline-block;width:30px;height:1px;background:#424242;position:absolute;right:15px;transition:all 0.3s cubic-bezier(0.5,0,0,1.25);} [data-mix-type="mix-btn01"] .type01 .mix-btn:before{content:'';display:inline-block;width:6px;height:1px;background:#424242;transform:rotate(45deg);position:absolute;right:15px;margin-bottom:5px;transition:all 0.3s cubic-bezier(0.5,0,0,1.25);} [data-mix-type="mix-btn01"] .type01 .mix-btn:hover{color:var(--blue);border-color:var(--blue);} [data-mix-type="mix-btn01"] .type01 .mix-btn:hover:before, [data-mix-type="mix-btn01"] .mix-btn:hover:after{background:var(--blue);right:5px;} [data-mix-type="mix-btn01"] .type02 .mix-btn{height:54px;background:#fff;padding:0 25px;height:50px;padding-top:1px;border-radius:5px;background:var(--mainColor);color:#fff;} [data-mix-type="mix-btn01"] .type02 .mix-btn:after{content:'\e921';font-family:'myfont';font-size:14px;font-weight:normal;margin-left:10px;transition:all .2s ease-in-out;} [data-mix-type="mix-btn01"] .type02 .mix-btn:hover{background:var(--subColor);} [data-mix-type="mix-btn01"] .type02 .mix-btn:hover:after{background:transparent;color:#fff;margin-left:15px;} #mix-from-wrap[data-mix-type="mix-btn01"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-btn01"] #mix-form{order:2;} #mix-from-wrap[data-mix-type="mix-btn01"] #wrConBox{order:1;margin-top:10px !important;margin-bottom:40px;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-thumb{position:absolute;top:40px;left:0;width:180px;border-radius:50%;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-thumb:after{border-radius:50%;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-thumb:before{padding-top:100% !important;padding-top:var(--img-ratio) !important;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-thumb .label-del{position:absolute;top:30px;right:30px;z-index:5;} #mix-from-wrap[data-mix-type="mix-btn01"] .typeControl{margin-bottom:30px;display:flex;align-items:center;gap:15px;} #mix-from-wrap[data-mix-type="mix-btn01"] li.mix-li.sub-title{--form-height:44px;} #mix-from-wrap[data-mix-type="mix-btn01"] li.mix-li.sub-title .inp_btn_name{font-size:16px;font-weight:600;} #mix-from-wrap[data-mix-type="mix-btn01"] li.mix-li.sub-title input{background:#f7fcff;border-color:#045da2;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-con{display:flex;flex-wrap:wrap;flex-direction:row;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-con .inp_btn_name{order:1;width:calc(100% - 105px);border-style:solid;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-con .inp_btn_url{order:3} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-con .select_btn_option{order:2;width:100px;margin-top:0;} #mix-from-wrap[data-mix-type="mix-btn01"] .mix-con .select_btn_option .dropdown-toggle{font-size:12px;padding-right:0;} .blockContainer[data-mix-type="mix-btn01"]{} .blockContainer[data-mix-type="mix-btn01"] + .blockContainer[data-mix-type="mix-btn01"]{margin-top:-50px;} .blockContainer[data-mix-type="mix-btn01"] + .blockContainer[data-mix-type="mix-btn01"] .blockInner{padding-top:50px !important;} .blockContainer[data-mix-type="mix-btn01"] .textCon .flex{display:flex;align-items:center;} .blockContainer[data-mix-type="mix-btn01"] .textCon .flex1{flex:1;} .blockContainer[data-mix-type="mix-btn01"] .mix-thumb{position:relative;display:block;width:180px;background-repeat:no-repeat;background-size:cover;background-position:center;border-radius:3px;background-color:#f5f5f5;overflow:hidden;border-radius:50%;} .blockContainer[data-mix-type="mix-btn01"] .mix-thumb + *{margin-left:50px;} .blockContainer[data-mix-type="mix-btn01"] .mix-thumb:before{content:'';font-size:0;height:0;margin:0;width:100%;display:block;padding-top:100%;padding-top:var(--img-ratio) !important;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title h3{position:relative;font-size:26px;font-family:var(--noto);font-weight:600;display:flex;align-items:center;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title h3:before{content:'';position:absolute;left:-15px;width:5px;height:5px;border-radius:50%;background:var(--mainColor);display:inline-flex;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title p{font-size:15px;color:rgba(71,78,103,0.7);} @media screen and (max-width:780px) { [data-mix-type="mix-btn01"] ul.mix-ul{--gap:10px;} [data-mix-type="mix-btn01"] li.mix-li.sub-title:not(:first-child){margin-top:20px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title{margin-bottom:0px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title h3{font-size:18px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title h3:before{left:-10px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li.sub-title p{font-size:13px;} .blockContainer[data-mix-type="mix-btn01"] li.mix-li .mix-btn{font-size:12px !important;} } /* ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ ETC ▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨▨ */ /*──────────────────────────────────────────────────────────────*/ /* mix-kakao-map /*──────────────────────────────────────────────────────────────*/ [data-mix-type="mix-kakao-map"] .mixContainer{--mix-titleSize:30px;--mix-fontSize:17px;--img-ratio:60%;--map-height:500px;} [data-mix-type="mix-kakao-map"] .mixContainer .mix-kakao-map{} [data-mix-type="mix-kakao-map"] .mixContainer .mix-kakao-map .map{position:relative;height:var(--map-height);} [data-mix-type="mix-kakao-map"] .mixContainer .mix-kakao-map .mix-thumb{width:70px !important;height:70px !important;border-radius:3px;} [data-mix-type="mix-kakao-map"] .mixContainer .mix-kakao-map .textareaSet{flex:1;width:auto !important;} [data-mix-type="mix-kakao-map"] ul.mix-ul{position:relative;padding:0 60px 0 140px;} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li{display:flex;align-items:center;} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li .mix-thumb-wrap{flex:1.5;max-width:780px;position:relative;z-index:2;top:-60px} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li .mix-con{flex:1;position:relative;top:-30px;padding-left:100px;} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li .mix-con .mix-textSet{margin:0;width:auto !important;} #mix-from-wrap[data-mix-type="mix-kakao-map"]{position:relative;display:flex;flex-direction:column;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form{} #mix-from-wrap[data-mix-type="mix-kakao-map"] #wrConBox{margin-top:10px !important;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map{display:flex;--mix-titleSize:13px;--mix-fontSize:12px;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .map{flex:1;margin-right:40px;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .map .mapCover{position:absolute;top:0;left:0;width:100%;height:100%;z-index:9;background:#fdfdfd;border:2px dashed rgba(0,0,0,0.1); display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease-in-out;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .map .mapCover:before{content:'\e9be';font-family:'myfont';font-size:40px;color:rgba(0,0,0,0.1);} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .map .mapCover:hover{background:#f5f5f5;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .map .e-msg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:12;background:rgba(255,52,52,0.7);font-size:15px;font-weight:bold;color:#fff; display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .mix-con{width:460px;display:flex;flex-direction:column;gap:5px;--form-height:32px} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form .mix-kakao-map .mix-con .mapCon{display:flex;gap:10px;margin-top:25px;} #mix-from-wrap[data-mix-type="mix-kakao-map"] #mix-form ul.mix-ul li.mix-li .mix-thumb{flex:1.5;max-width:780px;position:relative;z-index:2;top:-60px} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file{--form-height:28px} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file input[type="file"]{display:none;} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file .uploadSet{width:auto;} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file .uploadSet .upload-name{display:none;} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file .uploadSet .upload-btn{width:auto;border:0;border-radius:3px;background:var(--blue);color:#fff;gap:5px;padding:0 10px;} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file .uploadSet .upload-btn:before{content:'\e9c1';font-family:'myfont';font-size:10px;font-weight:normal;} #mix-from-wrap[data-mix-type="mix-kakao-map"] .mix-map-file .upImg img{max-width:100px;margin-top:10px;} .blockContainer[data-mix-type="mix-kakao-map"] #map{} .mix-kakao-map .mapConOveray{position:absolute;left:0;bottom:45px;width:280px;margin-left:-140px;text-align:left;font-size:12px;border-radius:6px;box-shadow:0px 4px 8px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);} .mapConOveray .inner{position:relative;width:100%;min-height:70px;background:#fff;padding:15px;border-radius:5px;display:flex;gap:10px;} .mapConOveray .inner:after{content:'';transform:rotate(45deg);content:'';display:inline-block;background:#fff;width:12px;height:12px;position:absolute;left:50%;bottom:-6px;margin-left:-6px; border-bottom:1px solid rgba(0,0,0,0.15);border-right:1px solid rgba(0,0,0,0.15);} .mapConOveray .inner .close{position:absolute;top:10px;right:10px;z-index:15;cursor:pointer;opacity:0.6;transition:all .2s ease-in-out;} .mapConOveray .inner .close:before{content:"\e95c";font-family:'myfont';font-size:16px;} .mapConOveray .inner .close:hover{opacity:1;} .mapConOveray img{border-radius:2px;} .mapConOveray .inner .desc{position:relative;display:flex;flex-direction:column;gap:5px} .mapConOveray .inner .desc .title{font-size:13px;font-weight:bold;color:#202020;} .mapConOveray .inner .desc .sub{font-size:11px;} .mapConOveray .inner .desc .address{color:#3396ff;font-size:11px;margin-top:5px;} @media screen and (max-width:780px) { [data-mix-type="mix-kakao-map"] .mixContainer{--mix-titleSize:16px;--mix-fontSize:13px;--map-height:420px;} .blockContainer[data-mix-type="mix-kakao-map"] .textCon.row{flex-direction:column !important;padding:0 20px;} .blockContainer[data-mix-type="mix-kakao-map"] .textCon.row .block-title{} .blockContainer[data-mix-type="mix-kakao-map"] .textCon.row .block-conSet{padding-left:20px;padding-top:0;} [data-mix-type="mix-kakao-map"] ul.mix-ul{position:relative;padding:0 20px 0 20px;} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li .mix-thumb-wrap{flex:none;width:50%;top:-25px;} [data-mix-type="mix-kakao-map"] ul.mix-ul li.mix-li .mix-con{padding-left:10px;padding-top:15px;} } /* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */ #mix-bigBanner .mixContainer{border:1px solid red;} #mix-bigBanner ul{display:flex;align-items:center;flex-wrap:wrap;} #mix-bigBanner ul li:nth-child(2n){margin-left:20px;} #mix-bigBanner ul li{width:calc(50% - 10px);height:440px;margin-bottom:20px;display:inline-flex;align-items:center;justify-content:center;position:relative;padding:50px;} #mix-bigBanner ul li .mix-thumb{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;} #mix-bigBanner ul li .mix-thumb:before{display:none;} #mix-bigBanner ul li textarea{margin:0;text-align:center;font-size:30px;font-weight:700;font-family:'Noto Sans KR', sans-serif;width:100%;position:relative;z-index:3;height:1em;} #mix-bigBanner ul li textarea.fill{border:0;color:#fff;background:transparent;box-shadow:none;}