@charset "utf-8";
/*
---------------------------------------------------------
combine/combine-766aae64.css
---------------------------------------------------------
00. /var/www/archibm/public/css/tutorial.css
*/

/*
---------------------------------------------------------
00. /var/www/archibm/public/css/tutorial.css
---------------------------------------------------------
*/

#tutorial-section                       { margin-bottom: 40px; background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(242, 241, 255, 1) 73%, rgba(255, 255, 255, 1) 73%, rgba(255, 255, 255, 1) 100%); }
#tutorial-section .images               { width: 100%; max-width: 1150px; margin: auto; aspect-ratio: 2800/1318; position: relative; overflow: hidden;}
#tutorial-section .images img           { position: absolute; left: 0; top: 0; width: 100%; transition: all .8s;}
#tutorial-section .images.is-inview img { transform: translateY(0) !important;}
#tutorial-section .images::after        { content: ''; position: absolute; left: 0; bottom:0; width: 100%; height: 50%; background-image: linear-gradient(180deg, #ffffff00 0%, #ffffffff 62%); }

.tutorial-section                                   { margin-bottom: 60px;}
.tutorial-section:last-child                        { margin-bottom: 0;}
.tutorial-section .inner                            { max-width: 1240px;}
.tutorial-section .trial-download .label            { border-radius: 5px;}
.tutorial-section .trial-download .menu             { padding-top: 2px; right: 0;}
.tutorial-section .trial-download .menu.right       { padding-top: 2px; right: 0;}
.tutorial-section .trial-download .menu > *         { padding: 14px 0;}
.tutorial-section .trial-download .menu ul          { width: auto; }
.tutorial-section .trial-download .menu li          { margin: 0;}
.tutorial-section .trial-download .menu li a        { padding: 8px 15px; color: var(--default-light-text-color); }
.tutorial-section .trial-download .menu li a:hover  { color: var(--theme-text-color); background-color: var(--softer-bg-color);}
.tutorial-section .trial-download .menu li i        { margin-left: 15px; }
.tutorial-section .trial-download.button            { border-radius: 5px;}

.tutorial-section .swiper-articles                  { margin-top: 30px; counter-reset: step-counter; }
.tutorial-section .swiper-wrapper                   { padding-bottom: 6px;}
.tutorial-section .swiper-slide                     { width: 22%; margin-right: 4%; position: relative; box-shadow: 3px 3px 6px rgba(0,0,0,.08); }
.tutorial-section .swiper-slide:hover               { border: 1px solid var(--theme-border-color);}
.tutorial-section .swiper-slide .thumb              { aspect-ratio: 400/320; background-color: #eee; margin-bottom: 20px;}
.tutorial-section .swiper-slide .thumb img          { object-fit: cover; width: 100%; height: 100%;}
.tutorial-section .swiper-slide .title              { min-height: 3em; line-height: 1.5em; font-size: 1.1em;}
.tutorial-section .swiper-slide::before             { content: "\0f105"; font: var(--fa-font-regular); color: var(--light-text-color); font-size: 24px; position: absolute; right: 0; top: 50%; transform: translate(34px, -50%); }
.tutorial-section .swiper-slide:last-child          { margin-right: 0;}
.tutorial-section .swiper-slide:last-child::before  { display: none;}
.tutorial-section .swiper-slide .holder             { padding: 12px 12px 20px 12px; position: relative; overflow: hidden; }
.tutorial-section .swiper-slide .holder::after      { counter-increment: step-counter; content: counter(step-counter); color: var(--lighter-text-color);  position: absolute; right: 0; bottom:0; transform: translate(5px, 11px); font-size: 70px; font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; }
.tutorial-section .swiper-button-next::after,
.tutorial-section .swiper-button-prev::after        { color: var(--light-text-color); font-size: 24px; margin-top: -3px;}
.tutorial-section .swiper-button-next               { right: -5px;}
.tutorial-section .swiper-button-prev               { left: -5px;}
.tutorial-section .swiper-button-disabled           { display: none;}

#advanced-section .inner                { max-width: 1240px;}

/*
-----------------------------
For 1280px or less
-----------------------------
*/
@media screen and (max-width: 1280px) {

#app-tutorial #tutorial-section .page-section-header h2 br,
#app-tutorial #tutorial-section .page-section-header .summary br { display: none; }

.tutorial-section .swiper-slide { width: 30.66666666666667%; margin-right: 4%; }
.tutorial-section .swiper-slide::before { transform: translate(30px, -50%);}
}


/*
-----------------------------
For 1024 or less
-----------------------------
*/
@media screen and (max-width: 1024px) {
.tutorial-section .swiper-slide::before { transform: translate(28px, -50%);}
}

/*
-----------------------------
For 768 or less
-----------------------------
*/
@media screen and (max-width: 768px) {
.tutorial-section .swiper-slide { width: 47%; margin-right: 6%; }
.tutorial-section .swiper-slide::before { transform: translate(30px, -50%);}
}

/*
-----------------------------
For 640px or less
-----------------------------
*/
@media screen and (max-width: 640px) {
.tutorial-section .swiper-articles { margin-top: 20px; } 
.tutorial-section .swiper-slide::before { transform: translate(25px, -50%);}

#app-tutorial #tutorial-section .buttons .button { font-size:1em; min-width: 120px; margin: 0 2px;}
}

/*
-----------------------------
For 480px or less
-----------------------------
*/
@media screen and (max-width: 480px) {
.tutorial-section .swiper-slide { width: 98%; margin-right: 2.2%; }
.tutorial-section .swiper-slide::before  { display: none;}
}